如何在javascript测验中为正确的选择和错误的选择着色？

Posted 2023-02-25

技术标签:

【中文标题】如何在javascript测验中为正确的选择和错误的选择着色？【英文标题】：How to color the right choice and the wrong choice in java script quiz? 【发布时间】：2020-05-16 13:11:56 【问题描述】：

当用户选择正确答案时，我想用绿色为按钮着色，错误时用红色着色，但同时用绿色着色正确答案，我尝试这样做，但它不起作用。

这段文字是为了让我发帖

/* 如果他们选择的答案不正确，我希望能够向用户展示问题的正确答案是什么。我想保持简单，但这就是我的想法。一旦用户提交了他们的答案并且如果它不正确，在继续下一个问题之前，我希望不正确的答案以红色突出显示，正确的答案以绿色突出显示。

我已经对答案是否正确进行了编码，但是我无法弄清楚如果选择了不正确的答案，如何能够显示正确的答案。 */

function wait(ms)
    var start = new Date().getTime();
    var end = start;
    while(end < start + ms) 
      end = new Date().getTime();
   
 


function Quiz(questions) 
    this.score = 0;
    this.questions = questions;
    this.questionIndex = 0;

 
Quiz.prototype.getQuestionIndex = function() 
    return this.questions[this.questionIndex];

 
Quiz.prototype.guess = function(answer) 
    if(this.getQuestionIndex().isCorrectAnswer(answer)) 
        console.log(answer);
        this.score++;
    

    populateV2();   
    wait(2000);
    this.questionIndex++;

 
Quiz.prototype.isEnded = function() 
    return this.questionIndex === this.questions.length;

 
 
function Question(text, textAnswer, choices, answer) 
    this.text = text;
    this.textAnswer = textAnswer;
    this.choices = choices;
    this.answer = answer;

 
Question.prototype.isCorrectAnswer = function(choice) 
    document.getElementById("btn0").style.backgroundColor='green';
    return this.answer === choice;



 
function populate() 
    if(quiz.isEnded()) 
        showScores();
    
    else 
        // show question
        var element = document.getElementById("question");
        element.innerhtml = quiz.getQuestionIndex().text;

        
        // show textAnswer
        var textAnswer = quiz.getQuestionIndex().textAnswer;
        for(var i = 0; i < textAnswer.length; i++) 
            var element = document.getElementById("textAnswer" + i);
            element.innerHTML = textAnswer[i];
        
 
        // show options
        var choices = quiz.getQuestionIndex().choices;
        for(var i = 0; i < choices.length; i++) 
            var element = document.getElementById("choice" + i);
            element.innerHTML = choices[i];
            guess("btn" + i, choices[i]);
        
 
        showProgress();
    
;

function populateV2() 
       
        console.log("Test");
        // show question
        var element = document.getElementById("question");
        element.innerHTML = quiz.getQuestionIndex().text;

        
        // show textAnswer
        var textAnswer = quiz.getQuestionIndex().textAnswer;
        for(var i = 0; i < textAnswer.length; i++) 
            var element = document.getElementById("textAnswer" + i);
            element.innerHTML = textAnswer[i];
        
 
        // show options
        var choices = quiz.getQuestionIndex().choices;
        for(var i = 0; i < choices.length; i++) 
            var element = document.getElementById("choice" + i);
            element.innerHTML = choices[i];
        
 
        showProgress();
    
;
 
function guess(id, guess) 
    var button = document.getElementById(id);
    button.onclick = function() 
        quiz.guess(guess);
        populate();
        
    
;
 
 
function showProgress() 
    var currentQuestionNumber = quiz.questionIndex + 1;
    var element = document.getElementById("progress");
    element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length;
;
 
function showScores() 
    var gameOverHTML = "<h1>Result</h1>";
    gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";
    var element = document.getElementById("quiz");
    element.innerHTML = gameOverHTML;
;
 
// create questions here
var questions = [
    new Question("1.At what age was Harry Potter when he received his Hogwarts letter?",
    ["A: 9",
    "B: 6",
    "C: 7"],
     ["A", "B","C"],
      "C"),
    new Question("2.Which is not a Hogwarts house?",
    ["A: Dunder Mifflin",
    "B: Ravenclaw",
    "C: Slytherin"],
     ["A", "B","C"],
      "A"),
    new Question("3.Who teaches Transfiguration at Hogwarts?",
    ["A: Rubeus Hagrid",
    "B: Minerva McGonnagle",
    "C: Albus Dumbledore"],
     ["A", "B","C"],
      "B")
];
 
// create quiz
var quiz = new Quiz(questions);
 
// display quiz
populate();

body 
    background-color: #eeeeee;


.grid 
    width: 600px;
    height: 600px;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px 50px 50px 50px;
    border-radius: 50px;
    border: 2px solid #cbcbcb;
    box-shadow: 10px 15px 5px #cbcbcb;


.grid h1 
    font-family: "sans-serif";
    background-color: #57636e;
    font-size: 60px;
    text-align: center;
    color: #ffffff;
    padding: 2px 0px;
    border-radius: 50px;


#score 
    color: #5A6772;
    text-align: center;
    font-size: 30px;


.grid #question 
    font-family: "monospace";
    font-size: 20px;
    color: #5A6772;


.grid1 #textAnswer 
    font-family: "monospace";
    font-size: 15px;
    color: #5A6772;


.image 
    width: 20%;


.buttons 
    margin-top: 30px;


#btn0, #btn1 
    background-color: #778897;
    width: 250px;
    font-size: 20px;
    color: #fff;
    border: 1px solid #1D3C6A;
    border-radius: 50px;
    margin: 10px 40px 10px 0px;
    padding: 10px 10px;


#btn2 
    background-color: #778897;
    width: 500px;
    font-size: 20px;
    color: #fff;
    border: 1px solid #1D3C6A;
    border-radius: 50px;
    margin: 10px 40px 10px 20px;
    padding: 10px 10px;



#btn0:hover, #btn1:hover, #btn2:hover 
    cursor: pointer;
    background-color: #57636e;


#btn0:focus, #btn1:focus, #btn2:focus 
    outline: 0;


#progress 
    color: #2b2b2b;
    font-size: 18px;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Quiz</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="grid">
        <div id="quiz">
            <h1>Quiz</h1>
            <hr style="margin-bottom: 20px">

            <p id="question"></p>

            <ul class="grid1">
                <li id="textAnswer0"></li>
                <li id="textAnswer1"></li>
                <li id="textAnswer2"></li>
            </ul>

            <div class="buttons">
                <button id="btn0"><span id="choice0"></span></button>
                <button id="btn1"><span id="choice1"></span></button>
                <button id="btn2"><span id="choice2"></span></button>
            </div>
             <span id="wrong_answer"></span>
            <hr style="margin-top: 50px">
            <footer>
                <p id="progress">Question x of y</p>
            </footer>
        </div>
    </div>


<script src="app.js"></script>
</body>
</html>

【问题讨论】：

【参考方案1】：

要将正确的选择用绿色着色，将错误的选择用红色着色，只需选择所有按钮，将其<span> 元素的内容与正确答案进行比较并相应地着色：

function wait(ms) 
  var start = new Date().getTime();
  var end = start;
  while (end < start + ms) 
    end = new Date().getTime();
  



function Quiz(questions) 
  this.score = 0;
  this.questions = questions;
  this.questionIndex = 0;


Quiz.prototype.getQuestionIndex = function() 
  return this.questions[this.questionIndex];


Quiz.prototype.guess = function(answer) 
  if (this.getQuestionIndex().isCorrectAnswer(answer)) 
    console.log(answer);
    this.score++;
  

  populateV2();
  wait(2000);
  this.questionIndex++;


Quiz.prototype.isEnded = function() 
  return this.questionIndex === this.questions.length;



function Question(text, textAnswer, choices, answer) 
  this.text = text;
  this.textAnswer = textAnswer;
  this.choices = choices;
  this.answer = answer;


Question.prototype.isCorrectAnswer = function(choice) 
  var answer = this.answer;
  const buttons = document.querySelectorAll('button');

  for (let i = 0; i < buttons.length; i++) 
    var letter = buttons[i].getElementsByTagName("span")[0].textContent;
    if (letter == answer) 
      buttons[i].style.backgroundColor = 'green';
     else 
      buttons[i].style.backgroundColor = 'red';
    
  
  return this.answer === choice;



function populate() 
  if (quiz.isEnded()) 
    showScores();
   else 
    // show question
    var element = document.getElementById("question");
    element.innerHTML = quiz.getQuestionIndex().text;


    // show textAnswer
    var textAnswer = quiz.getQuestionIndex().textAnswer;
    for (var i = 0; i < textAnswer.length; i++) 
      var element = document.getElementById("textAnswer" + i);
      element.innerHTML = textAnswer[i];
    

    // show options
    var choices = quiz.getQuestionIndex().choices;
    for (var i = 0; i < choices.length; i++) 
      var element = document.getElementById("choice" + i);
      element.innerHTML = choices[i];
      guess("btn" + i, choices[i]);
    

    showProgress();
  
;

function populateV2()  
  console.log("Test");
  // show question
  var element = document.getElementById("question");
  element.innerHTML = quiz.getQuestionIndex().text;


  // show textAnswer
  var textAnswer = quiz.getQuestionIndex().textAnswer;
  for (var i = 0; i < textAnswer.length; i++) 
    var element = document.getElementById("textAnswer" + i);
    element.innerHTML = textAnswer[i];
  

  // show options
  var choices = quiz.getQuestionIndex().choices;
  for (var i = 0; i < choices.length; i++) 
    var element = document.getElementById("choice" + i);
    element.innerHTML = choices[i];
  

  showProgress();

;

function guess(id, guess) 
  var button = document.getElementById(id);
  button.onclick = function() 
    quiz.guess(guess);  
    populate();

  
;


function showProgress() 
  var currentQuestionNumber = quiz.questionIndex + 1;
  var element = document.getElementById("progress");
  element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length;
;

function showScores() 
  var gameOverHTML = "<h1>Result</h1>";
  gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";
  var element = document.getElementById("quiz");
  element.innerHTML = gameOverHTML;
;

// create questions here
var questions = [
  new Question("1.At what age was Harry Potter when he received his Hogwarts letter?",
    ["A: 9",
      "B: 6",
      "C: 7"
    ],
    ["A", "B", "C"],
    "C"),
  new Question("2.Which is not a Hogwarts house?",
    ["A: Dunder Mifflin",
      "B: Ravenclaw",
      "C: Slytherin"
    ],
    ["A", "B", "C"],
    "A"),
  new Question("3.Who teaches Transfiguration at Hogwarts?",
    ["A: Rubeus Hagrid",
      "B: Minerva McGonnagle",
      "C: Albus Dumbledore"
    ],
    ["A", "B", "C"],
    "B")
];

// create quiz
var quiz = new Quiz(questions);

// display quiz
populate();

body 
    background-color: #eeeeee;


.grid 
    width: 600px;
    height: 600px;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px 50px 50px 50px;
    border-radius: 50px;
    border: 2px solid #cbcbcb;
    box-shadow: 10px 15px 5px #cbcbcb;


.grid h1 
    font-family: "sans-serif";
    background-color: #57636e;
    font-size: 60px;
    text-align: center;
    color: #ffffff;
    padding: 2px 0px;
    border-radius: 50px;


#score 
    color: #5A6772;
    text-align: center;
    font-size: 30px;


.grid #question 
    font-family: "monospace";
    font-size: 20px;
    color: #5A6772;


.grid1 #textAnswer 
    font-family: "monospace";
    font-size: 15px;
    color: #5A6772;


.image 
    width: 20%;


.buttons 
    margin-top: 30px;


#btn0, #btn1 
    background-color: #778897;
    width: 250px;
    font-size: 20px;
    color: #fff;
    border: 1px solid #1D3C6A;
    border-radius: 50px;
    margin: 10px 40px 10px 0px;
    padding: 10px 10px;


#btn2 
    background-color: #778897;
    width: 500px;
    font-size: 20px;
    color: #fff;
    border: 1px solid #1D3C6A;
    border-radius: 50px;
    margin: 10px 40px 10px 20px;
    padding: 10px 10px;



#btn0:hover, #btn1:hover, #btn2:hover 
    cursor: pointer;
    background-color: #57636e;


#btn0:focus, #btn1:focus, #btn2:focus 
    outline: 0;


#progress 
    color: #2b2b2b;
    font-size: 18px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid">
        <div id="quiz">
            <h1>Quiz</h1>
            <hr style="margin-bottom: 20px">

            <p id="question"></p>

            <ul class="grid1">
                <li id="textAnswer0"></li>
                <li id="textAnswer1"></li>
                <li id="textAnswer2"></li>
            </ul>

            <div class="buttons">
                <button id="btn0"><span id="choice0"></span></button>
                <button id="btn1"><span id="choice1"></span></button>
                <button id="btn2"><span id="choice2"></span></button>
            </div>
             <span id="wrong_answer"></span>
            <hr style="margin-top: 50px">
            <footer>
                <p id="progress">Question x of y</p>
            </footer>
        </div>
    </div>

请注意，您必须调整/重组您的代码，以便在生成新问题之前有很短的等待时间，因为我认为您可能希望在新问题上再次以灰色背景颜色显示按钮。

【讨论】：

以上是关于如何在javascript测验中为正确的选择和错误的选择着色？的主要内容，如果未能解决你的问题，请参考以下文章

多项选择的测验应用程序

如何使用 PHP、MySQL 和 Jquery 创建测验

Google 表单作为多项选择测验 - 如何提供结果

微信小程序开发视频教程学习（第3天）2：PHP测验错误题分析

jQuery测验

JavaScript测验题回顾-刷题笔记001