个人中心
gpt4 book ai didi

Javascript > 显示已回答的内容

转载 作者：行者123 更新时间：2023-11-29 22:25:54 26 4
gpt4 key购买 nike

好的，所以我正在制作一个 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>

最佳答案

好吧，我不知道我的答案是否是解决它的最佳方式，但无论如何它都会发生:

<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" />

对于初学者来说，考虑到您只能选择最后 4 个中的一个，您可能想重命名 radio 的名称(“IPO 代表处理和输出？”之后的名称。我还去掉了“”在第一个 False 之后以保持一致性。 (也去掉了 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);

希望对您有所帮助!

关于Javascript > 显示已回答的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9397765/

26 4 0
文章推荐： javascript - 在所有浏览器中以 % 形式通过 javascript 返回 CSS 属性的确切值
文章推荐： javascript - 如何使用 JavaScript 中的正则表达式删除跨越多行的一段文本？
文章推荐： javascript - 返回表示图像为 JSON 的 byte[]？
文章推荐： javascript - 单击时工具提示覆盖不会消失
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com