猿问

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

好的,我使用 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;

};





月关宝盒
浏览 75回答 1
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) {&nbsp; &nbsp; this.score = 0;&nbsp; &nbsp; this.questions = questions;&nbsp; &nbsp; this.questionIndex = 0;}Quiz.prototype.getQuestionIndex = function() {&nbsp; &nbsp; return this.questions[this.questionIndex];}Quiz.prototype.guess = function(answer) {&nbsp; &nbsp; if(this.getQuestionIndex().isCorrectAnswer(answer)) {&nbsp; &nbsp; &nbsp; &nbsp; this.score++;&nbsp; &nbsp; }&nbsp; &nbsp; this.questionIndex++;}Quiz.prototype.isEnded = function() {&nbsp; &nbsp; return this.questionIndex === this.questions.length;}function Question(text, choices, answer) {&nbsp; &nbsp; this.text = text;&nbsp; &nbsp; this.choices = choices;&nbsp; &nbsp; this.answer = answer;}Question.prototype.isCorrectAnswer = function(choice) {&nbsp; &nbsp; return this.answer === choice;}function populate() {&nbsp; &nbsp; if(quiz.isEnded()) {&nbsp; &nbsp; &nbsp; &nbsp; showScores();&nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; // show question&nbsp; &nbsp; &nbsp; &nbsp; var element = document.getElementById("question");&nbsp; &nbsp; &nbsp; &nbsp; element.innerHTML = quiz.getQuestionIndex().text;&nbsp; &nbsp; &nbsp; &nbsp; // show options&nbsp; &nbsp; &nbsp; &nbsp; var choices = quiz.getQuestionIndex().choices;&nbsp; &nbsp; &nbsp; &nbsp; for(var i = 0; i < choices.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var element = document.getElementById("choice" + i);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.innerHTML = choices[i];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; guess("btn" + i, choices[i]);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; showProgress();&nbsp; &nbsp; }};function guess(id, guess) {&nbsp; &nbsp; var button = document.getElementById(id);&nbsp; &nbsp; button.onclick = function() {&nbsp; &nbsp; &nbsp; &nbsp; quiz.guess(guess);&nbsp; &nbsp; &nbsp; &nbsp; populate();&nbsp; &nbsp; }};function showProgress() {&nbsp; &nbsp; var currentQuestionNumber = quiz.questionIndex + 1;&nbsp; &nbsp; var element = document.getElementById("progress");&nbsp; &nbsp; element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length;};function shuffle_questions(questions) {&nbsp; &nbsp; var currentIndex = questions.length, temporaryValue, randomIndex;&nbsp; &nbsp; while (0 !== currentIndex) {&nbsp; &nbsp; &nbsp; &nbsp; randomIndex = Math.floor(Math.random() * currentIndex);&nbsp; &nbsp; &nbsp; &nbsp; currentIndex -= 1;&nbsp; &nbsp; &nbsp; &nbsp; temporaryValue = questions[currentIndex];&nbsp; &nbsp; &nbsp; &nbsp; questions[currentIndex] = questions[randomIndex];&nbsp; &nbsp; &nbsp; &nbsp; questions[randomIndex] = temporaryValue;&nbsp; &nbsp; }&nbsp; &nbsp; return questions;}function restart() {&nbsp; &nbsp; questions = shuffle_questions(questions); // Left as an exercise for the reader; see https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array&nbsp; &nbsp; quiz = new Quiz(questions); // Rebuild the quiz object&nbsp; &nbsp; populate();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; document.getElementById('quiz').style.display = 'block'; // show quiz&nbsp; &nbsp; document.getElementById('results').style.display = 'none'; // hide results&nbsp; }function showScores() {&nbsp; &nbsp; document.getElementById('quiz').style.display = 'none'; // hide quiz&nbsp; &nbsp; document.getElementById('results').style.display = 'block'; // show results&nbsp; &nbsp; document.getElementById('score').innerHTML = quiz.score; // Put score in results};// create questions herevar questions = [&nbsp; &nbsp; new Question("Which nation won FIFA 2018 World Cup?", ["Peru", "France","Germany", "USA"], "France"),&nbsp; &nbsp; new Question("Which nation hosted FIFA 2018 World Cup?", ["Sweden", "Russia", "Iran", "South Korea"], "Russia"),&nbsp; &nbsp; new Question("Which nation has won the most World Cups?", ["Argentina", "Peru","Brazil", "France"], "Brazil"),&nbsp; &nbsp; new Question("Where was FIFA 2014 World Cup hosted?", ["Ecuador", "Brazil", "France", "All"], "Brazil"),&nbsp; &nbsp; new Question("Which nation won the first FIFA World Cup", ["Brazil", "Uruguay", "Italy", "Australia"], "Uruguay")];document.getElementById('restart').addEventListener('click', restart);// create quizvar quiz = new Quiz(questions);// display quizpopulate();<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>Quiz</title>&nbsp; &nbsp; <link rel="stylesheet" type="text/css" href="style.css"></head><body>&nbsp; &nbsp; <div class="grid">&nbsp; &nbsp; &nbsp; &nbsp; <div id="quiz">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>FIFA World Cup Quiz</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <hr style="margin-bottom: 20px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p id="question"></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="buttons">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="btn0"><span id="choice0"></span></button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="btn1"><span id="choice1"></span></button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="btn2"><span id="choice2"></span></button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="btn3"><span id="choice3"></span></button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <hr style="margin-top: 50px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <footer>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p id="progress">Question x of y</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </footer>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div id="results" style="display: none">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Results&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Your scores: <span id="score"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="restart">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Restart&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </div><!--<script src="question.js"></script>--></body></html>
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答