Question

我正在做一个多项选择测验，并想知道我会怎样能够显示答案。目前我已经把它输出了许多答案用户得到的正确（1,2,3等）。我想在问题标题下输出3个选项，并用粗体颜色正确。这是我到目前为止所做的代码。谢谢！

<!DOCTYPE html>
<html lang="en-us">

<head>
<Meta Charset="UTF-8">
<script src="Main.js" type="text/javascript" ></script>
<link href="Main.css" rel="stylesheet" type="text/css"/>
<title> Awesome Multiple Choice Quiz </title>
</head>

<body>
<h1> Random Quiz ! </h1>
<form id = "quiz" name = "quiz">
<h2> How do you spell it? </h2>
<input id="textbox" type="text" name="question1">
<br>
<h3> What is the colour of the sky? </h3>
<input type="radio" id= "MCQ" name ="question2" value = "stuff1"> Lime 
Green
<br>
<input type="radio" id= "MCQ" name ="question2" value = "stuff2"> Neon 
 Purple 
<br>
<h4> Does looking at pictures of sun hurt your eyes? </h4>
<input type="radio" id= "MCQ" name ="question3" value = "stuff3"> Yes
<br>
<input type="radio" id= "MCQ" name ="question3" value = "stuff4"> 
Maybe...
<br>
<input id = "BTN" type = "button" value ="Next" onclick = "check();">
</form>

<div id="after_submit">

<p id ="message"></p>
<p id ="number_correct"></p>
<img id ="picture">
</div>
</body>
</html> 


function check(){
var question1 = document.quiz.question1.value;
var question2 = document.quiz.question2.value;
var question3 = document.quiz.question3.value;
var correct = 0;

if (question1 == "it") {
    correct++;
}

if (question2 == "stuff1") {
    correct++;
}

if (question3 == "stuff3") {
    correct++;
}

var messages = ["MLG!", "Okay...", "Git Gud"];
var pictures =  ["img/win.gif", "img/meh.gif", "img/lose.gif"];

var range;

if (correct < 1) {
    range = 2;
}

if (correct > 0 && correct < 3) {
    range = 1;
}

if (correct > 2) {
    range = 0;
}

document.getElementById("after_submit").style.visibility = "visible";
document.getElementById("message").innerHTML = messages[range];
document.getElementById("number_correct").innerHTML = "You got " + 
correct + " correct.";
document.getElementById("picture").src = pictures[range];
}

Answer 1

为了使您的代码更容易，您可以将问题存储在一个数组中：

function check(){
var answers=[1,2,3].map(id=> document.quiz["question"+id]);  
var solutions=["it","stuff2", "stuff3"];
var correct=0;
for(var i=0;i<solutions.length && i<answers.length;i++){
  if(answers[i].value===solutions[i]){
     correct++;
  }else{
   alert(" No! Question "+(i+1)+" was "+solutions[i]);
  }
}
//calc range + show emoji
}

如何在多项选择测验中显示结果？谢谢

1 个答案: