Question

以下代码段包含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>

Answer 1

好的，您的程序/逻辑有太多问题。

首先，我认为这是一个学习练习，因为你无法在同一个xml文件中获得答案，而是在客户端呈现（人们可以通过开发者工具轻松查看答案）

其次，你的算法很苍白。您的代码中没有逻辑。

在尝试计算分数时，有2个主要的东西：

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);
}

Working demo 1

Working demo 2

P.S：这只是在OP中提出要求的众多方式之一。

如何检查用户是否点击了测验计划的正确答案？

1 个答案: