0

我有以下多项选择题 javascript 测验,我想对其进行修改,以帮助我提供有关应试者表现的更详细信息。我想更改脚本,而不是给我一个综合分数,我希望输出包含一个反映我如何对问题进行分类的子分数列表。为此,我需要将现有数组分解为数组子集,其中一些包含重叠的问题。例如,我想在“javascript”下将问题#1-3 分组,但在 WindowsOS 下将 #3 分组,而在基本编程下将 #1 分组,等等。我该怎么做?非常感谢您!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>The JavaScript Source: Miscellaneous : Multiple Choice Quiz</title>

<style type="text/css">
<!--
.question {
  color:darkblue;
  font-size:14px;
  font-weight:bold;
}
-->
</style><script type="text/javascript">

var useranswers = new Array();
var answered = 0;

function renderQuiz() {
  for(i=0;i<questions.length;i++) {
    document.writeln('<p class="question">' + questions[i] + ' <span id="result_' + i + '"><img src="blank.bmp" style="border:0" alt="" /></span></p>');
    for(j=0;j<choices[i].length;j++) {
      document.writeln('<input type="radio" name="answer_' + i + '" value="' + choices[i][j] + '" id="answer_' + i + '_' + j + '" class="question_' + i + '" onclick="submitAnswer(' + i + ', this, \'question_' + i + '\', \'label_' + i + '_' + j + '\')" /><label id="label_' + i + '_' + j + '" for="answer_' + i + '_' + j + '"> ' + choices[i][j] + '</label><br />');
    }
  }
  document.writeln('<p><input type="submit" value="Show Score" onclick="showScore()" /> <input type="submit" value="Reset Quiz" onclick="resetQuiz(true)" /></p><p style="display:none"><img src="correct.bmp" style="border:0" alt="Correct!" /><img src="incorrect.bmp" style="border:0" alt="Incorrect!" /></p>');
}
function resetQuiz(showConfirm) {
  if(showConfirm)
    if(!confirm("Are you sure you want to reset your answers and start from the beginning?"))
      return false;
  document.location = document.location;
}
function submitAnswer(questionId, obj, classId, labelId) {
  useranswers[questionId] = obj.value;
  document.getElementById(labelId).style.fontWeight = "bold";
  disableQuestion(classId);
  showResult(questionId);
  answered++;
}
function showResult(questionId) {
  if(answers[questionId] == useranswers[questionId]) {
    document.getElementById('result_' + questionId).innerHTML = '<img src="correct.bmp" style="border:0" alt="Correct!" />';
  } else {
    document.getElementById('result_' + questionId).innerHTML = '<img src="incorrect.bmp" style="border:0" alt="Incorrect!" />';
  }
}
function showScore() {
  if(answered != answers.length) {
    alert("You have not answered all of the questions yet!");
    return false;
  }
  questionCount = answers.length;
  correct = 0;
  incorrect = 0;
  for(i=0;i<questionCount;i++) {
    if(useranswers[i] == answers[i])
      correct++;
    else
      incorrect++;
  }
  pc = Math.round((correct / questionCount) * 100);
  alertMsg = "You scored " + correct + " out of " + questionCount + "\n\n";
  alertMsg += "You correctly answered " + pc + "% of the questions! \n\n";
  if(pc == 100)
    alertMsg += response[0];
  else if(pc >= 90)
    alertMsg += response[1];
  else if(pc >= 70)
    alertMsg += response[2];
  else if(pc > 50)
    alertMsg += response[3];
  else if(pc >= 40)
    alertMsg += response[4];
  else if(pc >= 20)
    alertMsg += response[5];
  else if(pc >= 10)
    alertMsg += response[6];
  else
    alertMsg += response[7];
  if(pc < 100) {
    if(confirm(alertMsg))
      resetQuiz(false);
    else
      return false;
  } else {
    alert(alertMsg);
  }
}
function disableQuestion(classId) {
  var alltags=document.all? document.all : document.getElementsByTagName("*")
  for (i=0; i<alltags.length; i++) {
    if (alltags[i].className == classId) {
      alltags[i].disabled = true;
    }
  }
}

var questions = new Array();
var choices = new Array();
var answers = new Array();
var response = new Array();

// To add more questions, just follow the format below.

questions[0] = "1) JavaScript is ...";
choices[0] = new Array();
choices[0][0] = "the same as Java";
choices[0][1] = "kind of like Java";
choices[0][2] = "different than Java";
choices[0][3] = "ther written part of Java";
answers[0] = choices[0][2];

questions[1] = "2) JavaScript is ...";
choices[1] = new Array();
choices[1][0] = "subjective";
choices[1][1] = "objective";
choices[1][2] = "evil";
choices[1][3] = "object based";
answers[1] = choices[1][3];

questions[2] = "3) To comment out a line in JavaScript ...";
choices[2] = new Array();
choices[2][0] = "Precede it with two forward slashes, i.e. '//'";
choices[2][1] = "Precede it with an asterisk and a forward slash, i.e. '*/'";
choices[2][2] = "Precede it with an asterisk, i.e. '*'";
choices[2][3] = "Precede it with a forward slash and an asterisk, i.e. '/*'";
answers[2] = choices[2][0];

questions[3] = "4) JavaScript can only run on Windows";
choices[3] = new Array();
choices[3][0] = "True";
choices[3][1] = "False";
answers[3] = choices[3][1];

questions[4] = "5) Semicolons are optional at the end of a JavaScript statement.";
choices[4] = new Array();
choices[4][0] = "True";
choices[4][1] = "False";
answers[4] = choices[4][0];

questions[5] = "6) The four basic data types are:";
choices[5] = new Array();
choices[5][0] = "strings, numbers, BooBoos, and nulls";
choices[5][1] = "strings, text, Booleans, and nulls";
choices[5][2] = "strings, numbers, Booleans, and nulls";
choices[5][3] = "strings, numbers, Booleans, and zeros";
answers[5] = choices[5][2];

// response for getting 100%
response[0] = "Excellent, top marks!";
// response for getting 90% or more
response[1] = "Excellent, try again to get 100%!"
// response for getting 70% or more
response[2] = "Well done, that is a good score, can you do better?";
// response for getting over 50%
response[3] = "Nice one, you got more than half of the questions right, can you do better?";
// response for getting 40% or more
response[4] = "You got some questions right, you can do better!";
// response for getting 20% or more
response[5] = "You didn't do too well, why not try again!?";
// response for getting 10% or more
response[6] = "That was pretty poor!  Try again to improve!";
// response for getting 9% or less
response[7] = "Oh dear, I think you need to go back to school (or try again)!";

//-->
</script>

<link id="noteanywherecss" media="screen" type="text/css" rel="stylesheet" href="data:text/css,.note-anywhere%20.closebutton%7Bbackground-image%3A%20url%28chrome-extension%3A//bohahkiiknkelflnjjlipnaeapefmjbh/asset/deleteButton.png%29%3B%7D%0A"></head>
<body bgcolor="#ffffff" vlink="#0000ff">


<br>
<center>
<script language="JavaScript" type="text/javascript"><!--
function openDescription(ID) {
var url = "http://www.ppcforhosts.com/public/util/description.cfm?id=" + ID;
link = window.open(url,"newWin","directories=0,height=250,location=0,menubar=0,resizable=1,scrollbars=1,status=0,toolbar=0,width=450");
}
//--></script>
<table cellpadding="10" cellspacing="0" border="0" width="100%">
   <tbody><tr><td align="center">
<!-- cdXpo code -->


<center>
 <span class="quad_R">
href="http://o1.qnsr.com/cgi/r?;n=203;c=662698/662688/662676/662675/581034;s=10665;x=7936;f=38775509;u=j;z=20110808154704" target="_blank"&gt;
&lt;img border="0" width="0" height="0" src="http://o1.qnsr.com/cgi/x?;n=203;c=662698/662688/662676/662675/581034;s=10665;x=7936;f=38775509;u=j;z=20110808154704" alt="Click here"&gt;&lt;/a&gt;
</noscript>
</span>
4

2 回答 2

1

如果您将问题数组更改为 javascript 对象文字表示法,您的代码的可维护性将会增加。然后你可以给每个问题一个组属性,你可以使用它来根据组进行评分。这是一个例子:

var questions = [
    {
        question: "5) Semicolons are optional at the end of a Javascript statement.",
        groups: [
            "Javascript",
            "HTML"
        ],
        answer: "True", // could also be replaced with the index of the correct choice to avoid possible typos.
        choices: [
            "True",
            "False"
        ]
    },
    // other questions...
]
于 2011-12-30T16:49:58.730 回答
0

创建一个 JSON 对象,如下所示

var data = [{
    "type": "radio",
    "question": "Question here",
    "explanation": "",
    "options": [{
        "value": "Option 1",
        "right": true,
        "selected": false
    }, {
        "value": "Option 2",
        "right": false,
        "selected": false
    }, {
        "value": "Option 3",
        "right": false,
        "selected": false
    }, {
        "value": "Option 4",
        "right": false,
        "selected": false
    }]
}];

要查看测验活动,请访问https://htmlcodegenerator.blogspot.com/2019/10/html-javascript-quiz-generator-score-timer.html

于 2020-02-09T23:21:00.697 回答