这是一个简单的javascript测验，但我想只添加图像作为可能的答案和正确的答案，所以用户点击liberia图像是正确的 我尝试获取img src所以我可以在答案数组中将其设置为文本 我想要的只是将图像作为问题的可能选择，并使它们在正确的答案数组中正确 请帮助 初学者在这里
$(document).ready(function() {
function initialScreen() {
startScreen = "<p class='text-center main-button-container'><a class='btn btn-primary btn-lg btn-block start-button' href='#' role='button'>Start Quiz</a></p>";
$(".mainArea").html(startScreen);
}
initialScreen();
$("body").on("click", ".start-button", function(event){
event.preventDefault();
clickSound.play();
generateHTML();
timerWrapper();
});
for (var i = 1; i >= 20; i--) {
var jad = document.getElementById(i);
var src = jad.src;
}
$("body").on("click", ".answer", function(event){
//answeredQuestion = true;//answeredQuestion = true;
clickSound.play();
selectedAnswer = $(this).img()
if(selectedAnswer === correctAnswers[questionCounter]) {
//alert("correct");
clearInterval(theClock);
generateWin();
}
else {
//alert("wrong answer!");
clearInterval(theClock);
generateLoss();
}
}); // Close .answer click
$("body").on("click", ".reset-button", function(event){
clickSound.play();
resetGame();
}); // Closes reset-button click
});
// Closes jQuery wrapper
function generateLossDueToTimeOut() {
unansweredTally++;
gameHTML = "<p class='text-center timer-p'>Time Remaining: <span class='timer'>" + counter + "</span></p>" + "<p class='text-center'>You ran out of time! The correct answer was: " + correctAnswers[questionCounter] + "</p>" + "<img class='center-block img-wrong' src='img/x.png'>";
$(".mainArea").html(gameHTML);
setTimeout(wait, 4000); // change to 4000 or other amount
}
function generateWin() {
correctTally++;
gameHTML = "<p class='text-center timer-p'>Time Remaining: <span class='timer'>" + counter + "</span></p>" + "<p class='text-center'>Correct! The answer is: " + correctAnswers[questionCounter] + "</p>" + imageArray[questionCounter];
$(".mainArea").html(gameHTML);
setTimeout(wait, 4000); // change to 4000 or other amount
}
function generateLoss() {
incorrectTally++;
gameHTML = "<p class='text-center timer-p'>Time Remaining: <span class='timer'>" + counter + "</span></p>" + "<p class='text-center'>Wrong! The correct answer is: "+ correctAnswers[questionCounter] + "</p>" + "<img class='center-block img-wrong' src='img/x.png'>";
$(".mainArea").html(gameHTML);
setTimeout(wait, 4000); // change to 4000 or other amount
}
function generateHTML() {
gameHTML = "<p class='text-center timer-p'>Time Remaining: <span class='timer'>30</span></p><p class='text-center'>" + questionArray[questionCounter] + "</p><p class='first-answer answer'>A. " + answerArray[questionCounter][0] + "</p><p class='answer'>B. "+answerArray[questionCounter][1]+"</p><p class='answer'>C. "+answerArray[questionCounter][2]+"</p><p class='answer'>D. "+answerArray[questionCounter][3]+"</p>";
$(".mainArea").html(gameHTML);
}
function wait() {
if (questionCounter < 7) {
questionCounter++;
generateHTML();
counter = 30;
timerWrapper();
}
else {
finalScreen();
}
}
function timerWrapper() {
theClock = setInterval(thirtySeconds, 1000);
function thirtySeconds() {
if (counter === 0) {
clearIeLossDueToTimeOut();
}nterval(theClock);
generat
if (counter > 0) {
counter--;
}
$(".timer").html(counter);
}
}
function finalScreen() {
gameHTML = "<p class='text-center timer-p'>Time Remaining: <span class='timer'>" + counter + "</span></p>" + "<p class='text-center'>All done, here's how you did!" + "</p>" + "<p class='summary-correct'>Correct Answers: " + correctTally + "</p>" + "<p>Wrong Answers: " + incorrectTally + "</p>" + "<p>Unanswered: " + unansweredTally + "</p>" + "<p class='text-center reset-button-container'><a class='btn btn-primary btn-lg btn-block reset-button' href='#' role='button'>Reset The Quiz!</a></p>";
$(".mainArea").html(gameHTML);
}
function resetGame() {
questionCounter = 0;
correctTally = 0;
incorrectTally = 0;
unansweredTally = 0;
counter = 30;
generateHTML();
timerWrapper();
}
var startScreen;
var gameHTML;
var counter = 50000000000;
var questionArray = ["Which of these E-mails is fake? ", "What is the capital of Liberia?", "What is the capital of Taiwan?", "What is the capital of Japan?", "What is the capital of China?", "What is the capital of Turkey?", "What is the capital of Colombia?", "What is the capital of India?"];
var answerArray = [["<img id='1' src='img/fakeemail.png'>", "<img src='img/liberia.png' class='answer'>", "<img src='img/taiwan.png' class='answer'>", "<img src='img/japan.png' class='answer'>"], ["Arthington","Monrovia","Tuzon","Marshall"], ["Tainan City", "Taichung", "Taipei", "Hsinchu"], ["Kyoto","Hiroshima","Tokyo","Osaka"], ["Hong Kong", "Macau", "Shanghai", "Beijing"], ["Ankara","Istanbul","Antalya","Bursa"], ["Medellin", "Bogota", "Cartagena", "Cali"], ["Mumbai","Hyderabad","Bangalore","New Delhi"]];
var imageArray = ["<img class='center-block img-right' src='img/fakseemail.png'>", "<img class='center-block img-right' src='img/liberia.png'>", "<img class='center-block img-right' src='img/taiwan.png'>", "<img class='center-block img-right' src='img/japan.png'>", "<img class='center-block img-right' src='img/china.png'>", "<img class='center-block img-right' src='img/turkey.png'>", "<img class='center-block img-right' src='img/colombia.png'>", "<img class='center-block img-right' src='img/india.png'>"];
var correctAnswers = ["img/fakeemail.png", "B. Monrovia", "C. Taipei", "C. Tokyo", "D. Beijing", "A. Ankara", "B. Bogota", "D. New Delhi"];
var questionCounter = 0;
var selecterAnswer;
var theClock;
var correctTally = 0;
var incorrectTally = 0;
var unansweredTally = 0;
var clickSound = new Audio("sound/button-click.mp3");
答案 0 :(得分：0)
由于这一切都在javascript中，你可以很容易地在代码中看到正确的答案，我想你可以给出正确的图像，例如＆＃34;更正＆＃34;。
然后将代码更改为：
$(".answer").on("click", function(){
if($(this).find("img").hasClass("correct")) {
clearInterval(theClock);
generateWin();
}
else {
clearInterval(theClock);
generateLoss();
}
});