Question

好的，所以我正在建立一个JS教程的网站，我正在进行一项迷你测试。我想知道如何添加一个能够在弹出窗口中告诉用户正确答案及其答案的函数。我已经编写了正确的答案，但我仍然坚持如何创建一个函数，在弹出框中指定他们回答的内容。

目前为止的进展如下：

<html>
<head>
<title>Javascript Tutorials - Review 1</title>
<script type="text/javascript">
function show_alert()
{
alert("1. Correct Answer is: True" );
alert("2. Correct Answer is: True");
alert("3. Correct Answer is: True");
}
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="index.html">Javascript Tutorial</a></h1>
</div>
<div id="slogan">
<h2>Javascript Tutorial covering concepts</h2>
</div>
</div>
<div id="menu">
<ul>
<li class="first current_page_item"><a href="index.html">Home</a></li>
<li><a href="struct.html">Structured Programming</a></li>
<li><a href="sequence.html">Sequence Structure</a></li>
<li><a href="comparison.html">Pseudocode, JS and Flowcharts</a></li>
<li class="last"><a href="Workscited.html">Credits</a></li>
</ul>
<br class="clearfix" />
</div>
<div id="splash">
<img class="pic" src="http://i.imgur.com/pCvZ4.png" width="870" height="230" alt="" />
</div>
<div id="page">
<div id="content">
<div class="box">
<h2>Welcome to Javascript Tutorials 
<p>
This is <strong>Javascript</strong>,  quiz and test for the Three Control Structures.
<p>Comparing Pseudocode, JavaScript and Flowcharts</p>
<h3>Flowcharts can describe the same processes and information.</h3>
<form name="threecont">
<input type="radio" name="option1contr" value="1"/>True<br />
<input type="radio" name="option1contr" value="2" />False.<br />
<p>Psuedocode and flowcharts are both tools to help you develop the logic for an algorithm?</p>
<input type="radio" name="option2contr" value="4"/>True<br />
<input type="radio" name="option2contr" value="5" />False<br />
<p>IPO stands for Processing and output?</p>
<input type="radio" name="option2contr" value="7."/>True<br />
<input type="radio" name="option2contr" value="8" />False<br />
<input type="button" onclick="show_alert()" value="Submit" />
</form>
</div>
<div class="box" id="content-box1">
<ul class="section-list">
</li>
</ul>
</div>
<br class="clearfix" />
</div>
<div id="sidebar">
<div class="box">
<h3>Navigation</h3>
<ul class="list">
<li class="first"><a href="index.html">Home</a></li>
<li><a href="struct.html">Structured Programming</a></li>
<li><a href="sequence.html">Sequence Structure</a></li>
<li><a href="comparison.html">Pseudocode, JS and Flowcharts</a></li>
<li class="last"><a href="Workscited.html">Credits</a></li>
</ul>
</div>
<div class="box">
<h3>Javascript Test Review</h3>
<div class="date-list">
<ul class="list date-list">
<li class="first"><span class="date">2/21</span> <a href="review1.html">Review Structured Programming</a></li>
<li class="first"><span class="date">2/21</span> <a href="review2.html">Review Sequence Structure</a></li>
<li class="first"><span class="date">2/21</span> <a href="review3.html">Review Comparsion Quiz</a></li>
</ul>
</div>
</div>
</div>
<br class="clearfix" />
</div>
<div id="page-bottom">
<div id="page-bottom-content">
<h3>Javascript Tutorials</h3>
<p>
This website covers very basic Javascript chapters we've covered within class, the goal is to educate
computer users on our content that we have covered so far.
</p>
</div>
<div id="page-bottom-sidebar">
<h3>Links</h3>
<ul class="list">
<li class="first"><a href="struct.html">Structured Programming</a>
<li><a href="sequence.html">Sequence Structure</a></li>
<li class="last"><a href="comparison.html">Pseudocode, JS and Flowcharts</a></li>
</ul>
</div>
<br class="clearfix" />
</div>
</div>
</div>
</body>
</html>

Answer 1

好吧所以我不知道我的anwser是不是最好的方式去做但不管怎么说都在这里：

<p>Comparing Pseudocode, JavaScript and Flowcharts</p>
<h3>Flowcharts can describe the same processes and information.</h3>
<input type="radio" name="option1contr" value="1"/>True<br />
<input type="radio" name="option1contr" value="2" />False<br />
<p>Psuedocode and flowcharts are both tools to help you develop the logic for an algorithm?</p>
<input type="radio" name="option2contr" value="4"/>True<br />
<input type="radio" name="option2contr" value="5" />False<br />
<p>IPO stands for Processing and output?</p>
<input type="radio" name="option3contr" value="7"/>True<br />
<input type="radio" name="option3contr" value="8" />False<br />
<input type="button" onclick="show_alert()" value="Submit" />

对于初学者来说，您可能想要重命名收音机的名称（“IPO代表处理和输出？”之后的名称），考虑到您只能选择最后一个中的一个。我也摆脱了“ “。在第一个假之后保持一致性。（也是在option3contr的值7之后删除了“。”

你可以：

function show_alert(){
var thisArray =[document.threecont.option1contr, document.threecont.option2contr, document.threecont.option3contr];
var answer1 = find_User_Answers(thisArray[0]);
var answer2 = find_User_Answers(thisArray[1]);
var answer3 = find_User_Answers(thisArray[2]);

alert(answer1 + answer2 + answer3);

}

function find_User_Answers(someVariable){

var val = new Array();
var thisRadio = someVariable;

    for(var i = 0; i < thisRadio.length; i++ ){

    if(thisRadio[i].checked == true){

    if(thisRadio[i].value == "1" || thisRadio[i].value == "4" || thisRadio[i].value == "7"){
        val.push("true");
      }
        else{val.push("false");}
      }
     }//end radiogroup for loop

return val;
}

现在它会在单行中返回答案，但它们是有序的...现在要弄清楚如何拆分它们会更容易，例如

alert("You Answered: " + answer1);

我希望这会帮助你！

Answer 2

使用“模态对话框”而不是弹出窗口。这实际上是一个绝对定位的DIV，您可以在其中填充内容，然后显示在点击位置（或浏览器窗口的中间）。

开始隐藏
您加载内容
定位元素
显示元素
点击

谷歌“javascript模式对话框”如果您不想自己动手，有许多预制插件可以执行此操作。

Javascript＆gt;显示回答的内容

2 个答案: