javascriptクイズゲームで画像に回答を設定するには

Question

これは簡単なjavascriptクイズですが、私は可能な回答と正しい回答として画像を追加したいので、ユーザーがリベリア画像をクリックして正しい画像をクリックします img srcを取得しようとしました私が欲しいのは、質問に対する可能な選択肢として画像を置くことですテキスト として答え配列でそれを設定することができますし、それらが正解配列に正しいことをするために のplsはここ

$(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"); 

Answer 1

初心者DEV以来のを助けますこれはすべてjavascriptにあり、あなたは簡単に正しい答えをコードで見ることができます。とにかく、正しいイメージを与えることができると思います。たとえば、 "正しい"と言ってください。

はその後のようなものにコードを変更します。

$(".answer").on("click", function(){ 
    if($(this).find("img").hasClass("correct")) { 
     clearInterval(theClock); 
     generateWin(); 
    } 
    else { 
     clearInterval(theClock); 
     generateLoss(); 
    } 
});