如何根据用户选择在 JS 中再次重复我的程序？

Question

好的，我使用 html、css 和 JS 做了一个小测验。我想做的是在测验结束时，我想请用户选择是否愿意再次进行测验。我想我必须使用“while”循环，但不太确定。好的，我已经添加了 html 和 JS。我认为这很容易理解。我已经添加了事件监听器，但它运行不正常，我不知道如何修复它。它给我错误消息说“addEventListener 不是函数”。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)) {        this.score++;    }    this.questionIndex++;}Quiz.prototype.isEnded = function() {    return this.questionIndex === this.questions.length;}function Question(text, choices, answer) {    this.text = text;    this.choices = choices;    this.answer = answer;}Question.prototype.isCorrectAnswer = function(choice) {    return this.answer === choice;}function populate() {    if(quiz.isEnded()) {        showScores();    }    else {        // show question        var element = document.getElementById("question");        element.innerHTML = quiz.getQuestionIndex().text;        // 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 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;};

Answer 1

我添加了一个<div id="results">（默认情况下隐藏），用于显示结果。当游戏结束时，showScores()函数会显示它<div>并隐藏<div id="quiz">.

当用户单击Restart按钮时，处理程序会隐藏<div id="results">并显示，<div id="quiz">以便可以玩游戏。

这可以通过添加/删除类而不是直接操作 CSS (style.display属性) 来改进。但这留给读者作为练习。

您还可以在此处找到此代码：https ://jsfiddle.net/kjLbea61/

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)) {

        this.score++;

    }

    this.questionIndex++;

}

Quiz.prototype.isEnded = function() {

    return this.questionIndex === this.questions.length;

}

function Question(text, choices, answer) {

    this.text = text;

    this.choices = choices;

    this.answer = answer;

}

Question.prototype.isCorrectAnswer = function(choice) {

    return this.answer === choice;

}

function populate() {

    if(quiz.isEnded()) {

        showScores();

    }

    else {

        // show question

        var element = document.getElementById("question");

        element.innerHTML = quiz.getQuestionIndex().text;

        // 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 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 shuffle_questions(questions) {

    var currentIndex = questions.length, temporaryValue, randomIndex;

    while (0 !== currentIndex) {

        randomIndex = Math.floor(Math.random() * currentIndex);

        currentIndex -= 1;

        temporaryValue = questions[currentIndex];

        questions[currentIndex] = questions[randomIndex];

        questions[randomIndex] = temporaryValue;

    }

    return questions;

}

function restart() {

    questions = shuffle_questions(questions); // Left as an exercise for the reader; see https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array

    quiz = new Quiz(questions); // Rebuild the quiz object

    populate();

    

    document.getElementById('quiz').style.display = 'block'; // show quiz

    document.getElementById('results').style.display = 'none'; // hide results

  }

function showScores() {

    document.getElementById('quiz').style.display = 'none'; // hide quiz

    document.getElementById('results').style.display = 'block'; // show results

    document.getElementById('score').innerHTML = quiz.score; // Put score in results

};

// create questions here

var questions = [

    new Question("Which nation won FIFA 2018 World Cup?", ["Peru", "France","Germany", "USA"], "France"),

    new Question("Which nation hosted FIFA 2018 World Cup?", ["Sweden", "Russia", "Iran", "South Korea"], "Russia"),

    new Question("Which nation has won the most World Cups?", ["Argentina", "Peru","Brazil", "France"], "Brazil"),

    new Question("Where was FIFA 2014 World Cup hosted?", ["Ecuador", "Brazil", "France", "All"], "Brazil"),

    new Question("Which nation won the first FIFA World Cup", ["Brazil", "Uruguay", "Italy", "Australia"], "Uruguay")

];

document.getElementById('restart').addEventListener('click', restart);

// create quiz

var quiz = new Quiz(questions);

// display quiz

populate();

<!DOCTYPE html>

<html>

<head>

    <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>FIFA World Cup Quiz</h1>

            <hr style="margin-bottom: 20px">

            <p id="question"></p>

            <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>

                <button id="btn3"><span id="choice3"></span></button>

            </div>

            <hr style="margin-top: 50px">

            <footer>

                <p id="progress">Question x of y</p>

            </footer>

        </div>

        <div id="results" style="display: none">

          <h1>

            Results

          </h1>

          <h2>

            Your scores: <span id="score"></span>

          </h2>

          <button id="restart">

            Restart

          </button>

        </div>

        

    </div>

<!--

<script src="question.js"></script>

-->

</body>

</html>