0
代码链接可以在这里找到：Codepen link琐事游戏：来自阵列的答案无法正确或不正确。
这个问题是从triviaPrompts数组中随机选择的。但是，选择时答案不正确。
例如：这个问题的正确答案是B：马拉卡纳体育场。但是，出现提示错误答案并将选项C显示为正确答案。
HTML：
<div class="container" id="start">
<div class = "question"></div>
</br>
<div id="answers">
</br>
<div class= "answer span" id= "A"></div>
<div class= "answer span" id= "B"></div>
<div class= "answer span" id= "C"></div>
</div>
</div>
<div class="container">
<div class="score"></div>
</div>
<div class="container2">
<div class = "right-or-wrong" style = "display:none"></div>
</br>
<div class = "next" style = "display:none">Next question!</div>
<div id="score again"></div>
</div>
<div class="cd-popup" role="alert">
<div class="cd-popup-container">
<p> You got nothing right</p>
<ul class="cd-buttons">
<li id="reset"><a href="#start">Play Again</a></li>
</ul>
</div>
</div>
<div class="cd-popup1" role="alert">
<div class="cd-popup1-container">
<img src="css/bronze-short.png" />
<p> You got 1 out of 3 correct. </br>Good job!</p>
<ul class="cd-buttons">
<li id="reset"><a href="#start">Play Again</a></li>
</ul>
</div>
</div>
<div class="cd-popup2" role="alert">
<div class="cd-popup2-container">
<img src="css/silver-short.png" />
<p>You got 2 out of 3 correct.</br>Awesome job!</p>
<ul class="cd-buttons">
<li id="reset"><a href="#start">Play Again</a></li>
</ul>
</div>
</div>
<div class="cd-popup3" role="alert">
<div class="cd-popup3-container">
<img src="css/gold-short.png" />
<p>You got 3 out of 3 correct.</br>Perfection!</p>
<ul class="cd-buttons">
<li id="reset"><a href="#start">Play Again</a></li>
</ul>
</div>
</div>
JS：
var clickCount = 0;
var questionCount = 0;
var score = 0;
var i = 0;
var reloading = document.getElementById('reload');
var setScore = function() {
if (clickCount < 1) {
$(".score").html("<p>Score:" + score + "</p>");
}
};
function reset(){
$('#reset').on('click', function(){
addQAs();
setScore();
chooseAnswer();
})
};
jQuery(document).ready(function($){
//open popup
$('.cd-popup-trigger').on('click', function(){
// event.preventDefault();
$('.cd-popup').addClass('is-visible');
});
//close popup
$('#reset').on('click', function(){
$('.cd-popup').removeClass('is-visible');
reset()
})
$(document).keyup(function(event){
if(event.which=='27'){
$('.cd-popup').removeClass('is-visible');
}
});
});
var triviaPrompts = [
[ "How many times have the Olympics been held in South America before 2016?", ["Once", "Twice", "Never"], "C", ["A", "B"] ],
[ "Which events are included for the first time in decades?", ["Golf & Cycling-BMX", "Rugby & Golf", "Rugby & Cricket"], "B", ["A", "C"] ],
[ "What is lit with a flame during the opening ceremony?", ["The Olympic Cauldron", "The Olympic Mascot", "The Olympic Torch"], "C", ["A", "B"] ],
[ "The torch relay began on April 21st in which city?", ["Olympia", "Rio de Janeiro", "London"], "A", ["B", "C"] ],
[ "Organizers prepare approximately how many meals per day to feed athletes?", ["5,000", "60,000", "30,000"], "B", ["A", "C"] ],
[ "Which is one of the venues for the Rio Olympics?", ["The Olympic Golf Course", "The Olympic Village", "The Olympic Parade"], "A", ["B", "C"] ],
[ "The first refugee team to ever compete at the Olympic Games competes under which flag?", ["Olympic", "Greece", "Brazil"], "A", ["B", "C"] ],
[ "Which two types of martial arts are represented in the Summer Olympics?", ["Kung Fu & Tai Chi Chuan", "Karate & Ninjitsu", "Taekwondo & Judo"], "C", ["A", "B"] ],
[ "The beach volleyball tournament is held at?", ["Fort Copacabana", "Copacabana Beach", "The Copacabana Club"], "B", ["A", "C"] ],
[ "Where are the opening and closing ceremonies held?", ["Joao Havelange Olympic Stadium", "Maracana Stadium", "Maracanazinho Arena"], "B", ["A", "C"] ],
["How many gold medals will be handed out during at the 2016 Summer Olympics?",
["306", "256", "400"], "A", ["B", "C"] ],
["What is the motto for the 2016 Summer Olympics?", ["One World. One Dream.", "Light the Fire Within", "Live your passion"], "C", ["A", "B"] ],
["What is the estimated cost in U.S. dollars of the 2016 Summer Olympics?", ["$6.25 billion", "$11.25 billion", "$22.25 billion"], "B", ["A", "C"] ],
["When will the 2016 Summer Games end?", ["October 15th", "September 2nd", "August 21st"], "C", ["A", "B"] ],
["Rio's taxi drivers, or 'taxistas', were given the chance to sign up for free online English lessons provided by the Rio 2016 Organizing Committee?", ["True", "False", " "], "A", ["B", "C"] ],
["There will be a total of 28 sports in the 2016 Summer Olympics?", ["True", "False", " "], "A", ["B", "C"] ],
["The official mascots of the 2016 Summer Olympics are Vinicius and Tom?", ["True", "False", " "], "A", ["B", "C"] ],
["There will be less than 10,000 athletes participating in the 2016 Summer Olympics?", ["True", "False", " "], "B", ["A", "C"] ]
];
function addQAs(){
var questionCount = Math.floor(Math.random() * triviaPrompts.length);
$(".question").text(triviaPrompts[questionCount][0]);
$("#A").text(triviaPrompts[questionCount][1][0]);
$("#B").text(triviaPrompts[questionCount][1][1]);
$("#C").text(triviaPrompts[questionCount][1][2]);
};
var chooseAnswer = function(){
var rightAnswer = function() {
if (clickCount < 1) {
$(this).css("color", "green"); // (1)
$("#" + triviaPrompts[questionCount][3][0]).css("color", "grey");
$("#" + triviaPrompts[questionCount][3][1]).css("color", "grey");
$(".right-or-wrong").show();
$(".right-or-wrong").text("You are correct!");
score = score + 1;
}
setScore();
clickCount++;
$(".next").show();
};
var wrongAnswer = function() {
if (clickCount < 1) {
$(".answer").css("color", "grey");
$(this).css("color", "red");
$(".right-or-wrong").show();
$(".right-or-wrong").text("That is wrong! The correct Answer is " + $("#" + triviaPrompts[questionCount][2]).text() + ".");
clickCount++;
$(".next").show();
}
};
var answerChoices = function() {
$(".answer").off("click");
$("#" + triviaPrompts[questionCount][2]).on("click", rightAnswer);
$("#" + triviaPrompts[questionCount][3][0]).on("click", wrongAnswer);
$("#" + triviaPrompts[questionCount][3][1]).on("click", wrongAnswer);
};
answerChoices();
};
var onNext = function(){
var random = Math.floor(Math.random() * (triviaPrompts.length));
questionCount++;
if (questionCount <= (triviaPrompts.length-1)) {
addQAs();
$(".right-or-wrong").hide();
$(".next").hide();
$(".answer").css("color", "white");
clickCount = 0;
chooseAnswer();
}
if (questionCount == 3) {
$(document).ready(function() {
if (score=== 3){
$('.cd-popup3').addClass('is-visible');
} else if (score === 2) {
$('.cd-popup2').addClass('is-visible');
} else if (score ===1){
$('.cd-popup1').addClass('is-visible');
} else {
$('.cd-popup').addClass('is-visible');
}
})
}
}
$(".next").on("click", onNext);
$("html").on("keydown", function(e){
if ($(".next").css("display") !== "none"){
if (e.keyCode == 13) {
onNext();
}
}
});
addQAs();
setScore();
chooseAnswer();
reset();
不幸的是，我仍然得到错误的结果。正确的答案在数组中供参考。 – LaFrish
有很少的语法错误和错误的变量使用像变量questioncount是为了获得随机问题，但它被用来代替点击计数，如果条件I.e如果（questioncount = 3），而不是点击计数和重置点击计数为零 –