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

关键词：

【中文标题】如何在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测验题回顾-刷题笔记001

目录1.我们可以在下列哪个HTML元素中放置Javascript代码？​编辑2.写"HelloWorld"的正确Javascript语法是？3.插入Javacript的正确位置是？4.引用名为"xxx.js"的外部脚本的正确语法是？5.如何在警告框中写入"Hell... 查看详情

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

】Google表单作为多项选择测验-如何提供结果【英文标题】：GoogleFormsasMultipleChoiceQuiz-HowtoProvideResults【发布时间】：2013-02-0714:17:11【问题描述】：我已经为多项选择测验构建了一个谷歌表单，并带有一个用于结果的链接电子表格... 查看详情

如何在 javascript 中为桌面和移动设备创建不同的点击行为？

】如何在javascript中为桌面和移动设备创建不同的点击行为？【英文标题】：Howtocreatedifferentonclickbehaviorfordesktopandmobileinjavascript?【发布时间】：2012-07-2108:57:10【问题描述】：我正在开发生成一段格式化文本的简单表单（你可以看... 查看详情

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

】如何使用PHP、MySQL和Jquery创建测验【英文标题】：HowtoCreateQuizusingPHP,MySQLandJquery【发布时间】：2011-11-0417:22:20【问题描述】：我需要创建一个带有正确答案的测验/多项选择题。它基本上是针对词汇的，所以“将显示一个定义”... 查看详情

jquery测验

...l结果:19/11.下面哪种说法是正确的？你的回答: jQuery是JavaScript库 回答正确!2.jQuery使用CSS选择器来选取元素？你的回答: 正确 回答正确!3.jQuery的简写是？你的回答: $符号 回答正确!4.通过j 查看详情

如何在 Google Apps 脚本中为 DateTimePicker 获取正确的 DateTime？

】如何在GoogleApps脚本中为DateTimePicker获取正确的DateTime？【英文标题】：HowdoIgetthecorrectDateTimeforaDateTimePickerinGoogleAppsScript?【发布时间】：2021-12-1808:21:36【问题描述】：使用GoogleApps脚本中的DateTimePicker，我可以让用户选择日期和时... 查看详情

在 javascript 中为 JWT 生成 JTI 声明

】在javascript中为JWT生成JTI声明【英文标题】：GeneratingJTIclaimforJWTinjavascript【发布时间】：2019-03-2900:51:15【问题描述】：我之所以问这个问题，是因为一位同事已经为此困扰了几天。问题是，他试图在他的JWT中使用JTI声明，但他... 查看详情

如何在 android textview 中为 nextline 提供一些空格？

】如何在androidtextview中为nextline提供一些空格？【英文标题】：Howtogivesomespacesfornextlineinandroidtextview?【发布时间】：2016-11-1710:31:29【问题描述】：在我的应用程序中，我有一个测验页面..它有问题和答案..每个问题都有问题编号..... 查看详情

如何在 axios 请求中为对象数组设置正确的类型？

】如何在axios请求中为对象数组设置正确的类型？【英文标题】：howtosetpropertypesinaxiosrequestforarrayofobjects?【发布时间】：2021-09-2112:56:17【问题描述】：我正在尝试为api请求编写axios服务，但我无法理解此错误：类型“AxiosResponse”... 查看详情

在 Python 中为随机森林选择正确的分布

】在Python中为随机森林选择正确的分布【英文标题】：ChoosingthecorrectdistributionforRandomForestswithinPython【发布时间】：2018-02-1801:48:28【问题描述】：我目前使用的数据在0.5和1.0之间变化，其中有一堆值在0.5-0.6左右，然后是上面的几... 查看详情

如何在 Google 表格中为 IMPORTXML 找出正确的 xpath - N/A 错误？

】如何在Google表格中为IMPORTXML找出正确的xpath-N/A错误？【英文标题】：HowtofigureoutproperxpathforIMPORTXMLinGoogleSheets-N/AError?【发布时间】：2020-05-0906:19:59【问题描述】：我正在尝试在Google表格上使用IMPORTXML功能。例如：=IMPORTXML("htt... 查看详情

在 WinForms 中为上下文菜单动态选择菜单项的正确方法是啥？

】在WinForms中为上下文菜单动态选择菜单项的正确方法是啥？【英文标题】：What\'stherightwaytodynamicallychoosemenuitemsforacontextmenuinWinForms?在WinForms中为上下文菜单动态选择菜单项的正确方法是什么？【发布时间】：2010-09-1108:05:29【问... 查看详情

如何在Javascript中为1到1000的奇数和偶数编写脚本？

】如何在Javascript中为1到1000的奇数和偶数编写脚本？【英文标题】：Howtodoascriptforoddandevennumbersfrom1to1000inJavascript?【发布时间】：2015-01-1001:53:36【问题描述】：我正在研究一本带有已解决示例的Javascript书籍，但有一个示例没有解... 查看详情

具有多种收音机和文本输入类型的 Javascript 测验

】具有多种收音机和文本输入类型的Javascript测验【英文标题】：Javascriptquizwithmultipleradioandtextinputtypes【发布时间】：2021-03-2909:44:47【问题描述】：我用单选和复选框类型做了一个小测试/测验。我的代码中的单选按钮是必须检查... 查看详情

如何在 Javascript 中为 iOS 和 Android 创建可靠的指南针？

】如何在Javascript中为iOS和Android创建可靠的指南针？【英文标题】：HowdoIcreateareliablecompassforiOSandAndroidinJavascript?【发布时间】：2019-01-0615:37:35【问题描述】：我正在尝试在Javascript/JQuery中创建一个可靠的指南针（使用deviceorientation... 查看详情

创建 JavaScript 测验应用程序（伪代码）

】创建JavaScript测验应用程序（伪代码）【英文标题】：CreatingaJavaScriptquizApp(pseudocode)【发布时间】：2016-12-0522:40:09【问题描述】：有人可以检查我是否走在正确的轨道上，这是我在第一个Web应用程序上的尝试，我一直在尝试不同... 查看详情

如何在 OS X 中为 Django 正确设置 GEOIP_PATH？

】如何在OSX中为Django正确设置GEOIP_PATH？【英文标题】：HowtoproperlysetGEOIP_PATHforDjangoinOSX?【发布时间】：2014-04-3008:03:26【问题描述】：我只是在Python和Django上迈出了第一步，我想在我的Mac上将它与GeoIP一起使用。我已经使用Homebrew... 查看详情