如何检查用户是否点击了测验程序的正确答案？
如何检查用户是否点击了测验程序的正确答案？
提问于 2017-04-06 08:40:12
下面的代码段是ajax、javascript、html和一个xml文件。
我需要将用户输入的分数加起来，看看他们是否点击了测试的正确答案。我试图解决这个问题，但我不确定您如何创建必要的代码来解决此问题。
我将非常感谢一些建议，并感谢您阅读这篇文章。
This is the javascript and ajax file.
var score;
var i;
function loaddata() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// r = xhr.JSONparse(responseText);
displayData(xhr);
}
};
xhr.open("GET", "FinalQuiz.xml", true);
xhr.send();
}
function displayData(xhr) {
console.log(xhr);
//get data as xml file
var xmldoc = xhr.responseXML;
//start table
var output="";
//process data by record
var x = xmldoc.getElementsByTagName("question");
for(i = 0; i<x.length; i++)
{
output+="Question ";
output+=x[i].getElementsByTagName("qnumber")[0].childNodes[0].nodeValue + " ";
output+="<br>";
output+="Title: ";
output+=x[i].getElementsByTagName("qtitle")[0].childNodes[0].nodeValue + " ";
output+="<br>";
output+= "<button onclick=\"answer()\">A</button>" ;
output+=x[i].getElementsByTagName("a")[0].childNodes[0].nodeValue + " ";
output+="<br>";
output+= "<button onclick=\"answer()\">B</button>" ;
output+=x[i].getElementsByTagName("b")[0].childNodes[0].nodeValue + " ";
output+="<br>";
output+= "<button onclick=\"answer()\">C</button>" ;
output+=x[i].getElementsByTagName("c")[0].childNodes[0].nodeValue + " ";
output+="<br>";
output+= "<button onclick=\"answer()\">D</button>" ;
output+=x[i].getElementsByTagName("d")[0].childNodes[0].nodeValue;
output+="<br>";
output+="<br>";
}
document.getElementById("quiz").innerHTML = output;
}
function answer()
{
score = score + 1;
}这是xml文件。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE finalquiz SYSTEM "FinalQuiz.dtd" >
<finalquiz>
<question>
<qnumber>1</qnumber>
<qtitle>In a switch statement, the ________ case clause is used to process exceptional conditions and is usually listed last.</qtitle>
<a>break</a>
<b>default</b>
<c>else</c>
<d>then</d>
</question>
<question>
<qnumber>2</qnumber>
<qtitle>The technique of developing and maintaining a large program by constructing it from small, simple pieces is called ________.</qtitle>
<a>divide and conquer</a>
<b>modular programming</b>
<c>multitasking</c>
<d>multiprogramming</d>
</question>
<question>
<qnumber>3</qnumber>
<qtitle>All variables declared in function definitions are ________. </qtitle>
<a>global variables</a>
<b>static variables</b>
<c>constant variables</c>
<d>local variables</d>
</question>
<question>
<qnumber>4</qnumber>
<qtitle>A function’s ________ are also considered to be local variables. </qtitle>
<a>parameters</a>
<b>static variables</b>
<c>register variables</c>
<d>constant variables</d>
</question>
<question>
<qnumber>5</qnumber>
<qtitle>The style of programming in which the user interacts with a GUI component is called ________ programming. </qtitle>
<a>modular</a>
<b>automatic</b>
<c>event driven</c>
<d>object oriented</d>
</question>
<rightanswers>b,a,d,a,c</rightanswers>
</finalquiz>这是html文件
<!DOCTYPE html>
<html>
<head>
<title>Quiz</title>
<meta name="generator" content="Bluefish 2.2.7" >
<meta name="author" content="kgoertzen" >
<meta name="date" content="2016-03-21T12:31:24-0700" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="expires" content="0">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!-- Bootstrap - Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384- BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Bootstrap - Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Bootstrap - Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384- Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--link href="css.css" rel="stylesheet" type="text/css">-->
<script type="text/javascript" src="xml.js">
</script>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<div class="row header">
<div class="col-sm-12">
<div>
<h1>Kyle Goertzen : 000729347</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a rel="noopener" href="../index.html" href="#">View</a></li>
</ul>
</div>
</div>
</div>
</div>
<body onload="loaddata()">
<div id="quiz"></div>
</body>
</html>回答 1
Stack Overflow用户
发布于 2017-04-06 14:44:01
好的，你的程序/逻辑有太多的错误。
首先，我假设这是一个学习练习，因为你不能在客户端呈现的同一个xml文件中得到答案(人们可以很容易地用开发工具看到答案)
其次，你的算法是苍白的。您的代码中没有逻辑。
当尝试计算分数时，有两个基本的东西：
1)某个特定问题的答案是什么
2)如果用户更改了这些答案，会发生什么
对于这类问题，您需要选择适当的数据类型来存储您的答案。我推荐使用js object。
在这个对象中，keys是题号，values是个人分数。Initially, all the individual scores are set to zero if the answer is correct we set to 1 or to 0 if its wrong
var score=0;
var result; // this will have the rightanswers from the xml
var answered ={0:0,1:0,2:0,3:0,4:0}; // keys are question numbers , values are individual scores那么你的answer()就不会记录下哪一个问题正在被回答，什么是答案。因此，我们将其修改为answer(i,'a')，answer(i,'b')...，其中i是问题编号索引(从0开始)，第二个参数是正在单击的选项。
最后，您在answer函数中的逻辑将如下所示：
function answer(i,ans)
{
var ansArray = result[0].innerHTML.split(",");
answered[i]= ansArray[i] == ans ? 1 :0;console.log(answered);
score = answered[0]+answered[1]+answered[2]+answered[3]+answered[4];
//alert(score);
}附言:这只是OP中要求的众多方法中的一种。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43243813
复制相关文章
相似问题
腾讯云开发者
