javascript - Quiz ，希望在选择的答案不正确时同时显示正确和错误的答案

Question

当我们在测验中选择错误答案时，需要在正确答案上获得绿色背景，在错误答案上获得红色背景

 
const myQuestions = [
	{
	 'question':	'What is the Full-form of GST?',
	 'answers': ["Good and Supply Tax","Goods and Services Tax","Good and Service Tax","Great Service Tax"],
	 'correct': 1 
	},
	{
	 'question': 'Upper limit on investment in Kisan Vikas Patra (KVP)?',
	 'answers': ["5000", "10000", "50000", "25000"],
	 'correct':  0
  },

	{
	 'question': "Which insurance company has come up with India's first ever insurance cover for individual victims of cyber crime?",
	 'answers': ["ICICI","Muthoot Finance","LIC","Bajaj Allianz"],
	 'correct':  2
	},

	{
	'question': "How much amount will be provided by NITI Aayog to every district to encourage digital payment system?",
	'answers': ["Rs 1 lakh","Rs 2 lakh","Rs 5 lakh","Rs 10 lakh"],
	'correct':  2
	},
	{
	'question': "What company was the first company to produce a handheld mobile phone?",
  'answers': ["Motorola", "Nokia", "Samsung" , "Apple"],
	'correct': 0
	},
	{
	 'question':	"What was the first version of Windows?",
	 'answers': ["Windows 95","Windows 7","Windows 1.01","Windows NT 3"],
	 'correct': 2
	},
	{
	 'question':"Who is the founder of Amazon?",
	 'answers': ["John Mackey", "Jeff Bezos", "Lee Byung-chul", "Howard Shultz"],
	 'correct': 1
	},
	{
	 'question':"When was Amazon founded?",
	 'answers': ["2005", "2002", "1996", "1994"],
	 'correct':  3
	},
	{
	 'question':"What does the internet prefix WWW stand for?",
	 'answers': ["Western Web World", "World Wide Web", "World Wide World", "We Wide Web"],
	 'correct': 1  
	},
	{
	 'question': "What is the most used web browser in 2017?",
	 'answers': ["Safari","Internet Explorer","Chrome", "Firefox"],
	 'correct': 2
	}
	];

var score = 0;
var current = 0;

$(document).ready(function(){
  // Create an event listener to listen for a click on the Start Quiz button
  $(".start-button").click(function(){
     $('.start-quiz').hide();
     $('.next').hide();
     $('.questions').show();
     displayQuestion();
      $('.score').text('Current Score: '+score);
    console.log("Start Quiz button clicked");
  });
  
  // Create an event listener to listen for a click on the Next button
  $(".next-button").click(function(event){
    console.log("Next button clicked");
    displayQuestion();
    $('.next').hide();
    $('.submit').show();
  });
  
  $(".submit-button").click(function(event){
    if($('li.selected').length){
      var answer = $('li.selected').attr('id');
      checkAnswer(answer);
      $('.next').show();
      $('.submit').hide();
    } else {
      alert('Please select an answer');
    }
  });
  
  // Create an event listener to listen for a click on the Retake button and refresh the page
  $(".retake-button").click(function(){
  location.reload();
    console.log("Retake button clicked");
  });
  
  //Click listener when clicking on a list item to change the color of the background
  $('ul.list').on('click', 'li', function(event) {
    $('.selected').removeClass();
    $(this).addClass('selected');
  });
  
});

//***************FUNCTIONS**************
function displayQuestion(){
  $('.question-number').text('Question Number: '+(current + 1)+"/10" );
  if(current < myQuestions.length){
    var listQuestion = myQuestions[current];
    $('h2').text(listQuestion.question);
    $('ul.list').html('');
    for (var i = 0; i < listQuestion.answers.length; i++) {
      $('ul.list').append('<li id = "'+i+'">'+listQuestion.answers[i] +'</li>');
    }
  } else {
    // show summary that says how many you got correct
    displayScore();
  }
}

// Checks answer from the array to see if the one chosen is the one that is correct
function checkAnswer(answer){
  var listQuestion = myQuestions[current];
  if(listQuestion.correct == answer){
    score++;
    $('li.selected').addClass('correct');
  } else {

    $('li.selected').addClass('incorrect') ;
    $('listQuestion.correct').addClass('correct');
    
  }
  $('.score').text('Current Score: '+score);
  current++;
}

//Display score
function displayScore(){
  $('.questions').hide();
  $('.end-quiz').show();
  $('.end-score').text("Your score is: " +score + '/10');
  if(score >= 8){
    $('.comment').text('GREAT JOB!');
  }else{
    $('.comment').text('You need to work hard');
  }
}

body {
  box-sizing: border-box;
  background: #ff4040;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Nunito', sans-serif;
  color:#f2b632;
  font-size: 20px;
  margin: 0;
}



}

h1 {
  margin: 60px 60px 0 60px;
  font-size: 30px; 
  padding-bottom: 30px;
  border-bottom: 1px solid #b5b5b7;
  color: #ffcc00;
}

h1, h2 {
  text-align: center;
  font-weight: bold;
  letter-spacing: 10px;
  text-transform: uppercase;
}

h2 {
  font-size: 20px;
}

button {
  margin-top: 20px;
  width: 300px;
  height: 40px;
  background: #ffcc00;
  font-family: 'Dosis', sans-serif;
  font-size: 20px;
  color: #ff4040;
  border: .5px solid #f2b632;
}

.start-quiz {
  width: 500px;
  height: 300px;
  margin: 100px auto;
  text-align: center;
  padding-bottom: 200px;
  color: white;
}

.questions, .end-quiz {
  display: none;
  text-align: center;
  padding-bottom: 200px;
  margin: 100px auto 0 auto;
  text-align: center;
  width: 500px;
  height: 300px;
}

.end-quiz {
  border: 2px solid #f2b632;
  padding-top: 80px;
  height: 100px;
  font-size: 30px;
  color: #b5b5b7;
}

.question-number, .score {
  font-size: 30px;
  color: #b5b5b7;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  border: 1px solid #d6d6cf;
  width: 200px;
  margin: 10px auto;
  font-size: 18px;
  border-radius: 5px;
  padding: 5px;
}
  

.start-button{
  color:white;
}


.selected {
  background: #f2b632;
  color:#252839;
}

.correct {
  background-color: green;
}

.incorrect {
  background-color: red;  
}
.dot {
  height: 110px;
  width: 110px;
  border-radius: 50%;
  display: inline-block;
}

<!DOCTYPE html>
<html>
<head>
  <title>Financial Quiz</title>
  <link href="https://fonts.googleapis.com/css?family=Bree+Serif|Concert+One|Nunito" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="final.css">

</head>
<body>

<!-- */*************************START PAGE**************************/* -->
    <div class="container">
    <h1>Financial Quiz</h1>

    <div class = "start-quiz">
      <p class = 'descrip'>Test your knowledge on the Finance</p>
      <button class='start-button dot' >START</button>
    </div>
    
    
    
<!-- */******************QUESTIONS********/* -->
  
    <div class = 'questions'>
      <h2 class='question'></h2>
      <p class= "score"> Score:  </p>
      <ul class ="list">
      </ul>
      
      <div class='submit'>
        <button class="submit-button">Check Answer</button> 
      </div>
      <div class='next'>
        <button class="next-button">Next</button> 
      </div>
      
      <p class = 'question-number'></p>
    </div>

  <!-- */********************COMPLETED PAGE************ -->
  
    <div class = 'end-quiz'> 
      <p class = 'end-score'></p>
      <p class='comment'></p>
      <button class="retake-button">RETAKE QUIZ</button>
    </div>
</div>
<!-- */****************************************** -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="final.js"></script>
</body>
</html>

当答案不正确时无法获得绿色背景和红色，如果有人知道如何在正确答案旁边制作一个弹出框以进行解释。

Answer 1

要解决此问题，您只需将 correct 类添加到 li 中，并在您的对象数组中添加答案索引。为此，请更改 checkAnswer() 中的这一行:

$('listQuestion.correct').addClass('correct');

对此:

$('li').eq(listQuestion.correct).addClass('correct');

const myQuestions = [{
    'question': 'What is the Full-form of GST?',
    'answers': ["Good and Supply Tax", "Goods and Services Tax", "Good and Service Tax", "Great Service Tax"],
    'correct': 1
  }, {
    'question': 'Upper limit on investment in Kisan Vikas Patra (KVP)?',
    'answers': ["5000", "10000", "50000", "25000"],
    'correct': 0
  }, {
    'question': "Which insurance company has come up with India's first ever insurance cover for individual victims of cyber crime?",
    'answers': ["ICICI", "Muthoot Finance", "LIC", "Bajaj Allianz"],
    'correct': 2
  }, {
    'question': "How much amount will be provided by NITI Aayog to every district to encourage digital payment system?",
    'answers': ["Rs 1 lakh", "Rs 2 lakh", "Rs 5 lakh", "Rs 10 lakh"],
    'correct': 2
  }, {
    'question': "What company was the first company to produce a handheld mobile phone?",
    'answers': ["Motorola", "Nokia", "Samsung", "Apple"],
    'correct': 0
  },
  {
    'question': "What was the first version of Windows?",
    'answers': ["Windows 95", "Windows 7", "Windows 1.01", "Windows NT 3"],
    'correct': 2
  },
  {
    'question': "Who is the founder of Amazon?",
    'answers': ["John Mackey", "Jeff Bezos", "Lee Byung-chul", "Howard Shultz"],
    'correct': 1
  }, {
    'question': "When was Amazon founded?",
    'answers': ["2005", "2002", "1996", "1994"],
    'correct': 3
  }, {
    'question': "What does the internet prefix WWW stand for?",
    'answers': ["Western Web World", "World Wide Web", "World Wide World", "We Wide Web"],
    'correct': 1
  }, {
    'question': "What is the most used web browser in 2017?",
    'answers': ["Safari", "Internet Explorer", "Chrome", "Firefox"],
    'correct': 2
  }
];

var score = 0;
var current = 0;

$(document).ready(function() {
  $(".start-button").click(function() {
    $('.start-quiz').hide();
    $('.next').hide();
    $('.questions').show();
    displayQuestion();
    $('.score').text('Current Score: ' + score);
  });

  $(".next-button").click(function(event) {
    displayQuestion();
    $('.next').hide();
    $('.submit').show();
  });

  $(".submit-button").click(function(event) {
    if ($('li.selected').length) {
      var answer = $('li.selected').attr('id');
      checkAnswer(answer);
      $('.next').show();
      $('.submit').hide();
    } else {
      alert('Please select an answer');
    }
  });

  $(".retake-button").click(function() {
    location.reload();
    console.log("Retake button clicked");
  });

  $('ul.list').on('click', 'li', function(event) {
    $('.selected').removeClass();
    $(this).addClass('selected');
  });

});

function displayQuestion() {
  $('.question-number').text('Question Number: ' + (current + 1) + "/10");
  if (current < myQuestions.length) {
    var listQuestion = myQuestions[current];
    $('h2').text(listQuestion.question);
    $('ul.list').html('');
    for (var i = 0; i < listQuestion.answers.length; i++) {
      $('ul.list').append('<li id = "' + i + '">' + listQuestion.answers[i] + '</li>');
    }
  } else {
    // show summary that says how many you got correct
    displayScore();
  }
}

function checkAnswer(answer) {
  var listQuestion = myQuestions[current];
  if (listQuestion.correct == answer) {
    score++;
    $('li.selected').addClass('correct');
  } else {
    $('li.selected').addClass('incorrect');
    $('li').eq(listQuestion.correct).addClass('correct');
  }
  $('.score').text('Current Score: ' + score);
  current++;
}

function displayScore() {
  $('.questions').hide();
  $('.end-quiz').show();
  $('.end-score').text("Your score is: " + score + '/10');
  if (score >= 8) {
    $('.comment').text('GREAT JOB!');
  } else {
    $('.comment').text('You need to work hard');
  }
}

body {
  box-sizing: border-box;
  background: #ff4040;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Nunito', sans-serif;
  color: #f2b632;
  font-size: 20px;
  margin: 0;
}

h1 {
  margin: 60px 60px 0 60px;
  font-size: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #b5b5b7;
  color: #ffcc00;
}

h1,
h2 {
  text-align: center;
  font-weight: bold;
  letter-spacing: 10px;
  text-transform: uppercase;
}

h2 {
  font-size: 20px;
}

button {
  margin-top: 20px;
  width: 300px;
  height: 40px;
  background: #ffcc00;
  font-family: 'Dosis', sans-serif;
  font-size: 20px;
  color: #ff4040;
  border: .5px solid #f2b632;
}

.start-quiz {
  width: 500px;
  height: 300px;
  margin: 100px auto;
  text-align: center;
  padding-bottom: 200px;
  color: white;
}

.questions,
.end-quiz {
  display: none;
  text-align: center;
  padding-bottom: 200px;
  margin: 100px auto 0 auto;
  text-align: center;
  width: 500px;
  height: 300px;
}

.end-quiz {
  border: 2px solid #f2b632;
  padding-top: 80px;
  height: 100px;
  font-size: 30px;
  color: #b5b5b7;
}

.question-number,
.score {
  font-size: 30px;
  color: #b5b5b7;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  border: 1px solid #d6d6cf;
  width: 200px;
  margin: 10px auto;
  font-size: 18px;
  border-radius: 5px;
  padding: 5px;
}

.start-button {
  color: white;
}

.selected {
  background: #f2b632;
  color: #252839;
}

.correct {
  background-color: green;
}

.incorrect {
  background-color: red;
}

.dot {
  height: 110px;
  width: 110px;
  border-radius: 50%;
  display: inline-block;
}

<link href="https://fonts.googleapis.com/css?family=Bree+Serif|Concert+One|Nunito" rel="stylesheet">
<div class="container">
  <h1>Financial Quiz</h1>
  <div class="start-quiz">
    <p class='descrip'>Test your knowledge on the Finance</p>
    <button class='start-button dot'>START</button>
  </div>

  <!-- */******************QUESTIONS********/* -->
  <div class='questions'>
    <h2 class='question'></h2>
    <p class="score"> Score: </p>
    <ul class="list">
    </ul>

    <div class='submit'>
      <button class="submit-button">Check Answer</button>
    </div>
    <div class='next'>
      <button class="next-button">Next</button>
    </div>

    <p class='question-number'></p>
  </div>

  <!-- */********************COMPLETED PAGE************ -->
  <div class='end-quiz'>
    <p class='end-score'></p>
    <p class='comment'></p>
    <button class="retake-button">RETAKE QUIZ</button>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>