javascript - 如何根据用户选择在 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;
};
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() {
document.getElementById("quiz").innerHTML = ''; // Clear out the "game over"
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();
return false; // So the link doesn't try to go anywhere
}
function showScores() {
var gameOverHTML = "<h1>Result</h1>";
gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";
// message if they would like to try again, should I use console.log?
gameOverHTML.addEventListener("click", restart) //not done yet
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
};
// 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")
];
// create quiz
var quiz = new Quiz(questions);
// display quiz
populate();
<!DOCTYPE html>
<html>
<head lang="en">
<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>
<script src="question.js"></script>
</body>
</html>
解决方案
我添加了一个<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 lang="en">
<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>
推荐阅读
- android - 使用 android studio 移动编辑文本提示
- python - 如何在 heroku 上部署 Python API?没有名为“app”的模块错误
- matlab - 在不使用 Hist 的情况下在 Matlab 中生成直方图
- ios - 为什么我的 UICollectionView 大纲不起作用?
- vim - 如何在 7.3 之前的 vim 上启用语法高亮?
- php - 从 Vue.js 发送 POST 到 Laravel 的问题
- android - 在 RxAndroidBLE 中,当 autoConnect=true 时,RxBleDevice.establishConnection() 方法会无限阻塞
- c++ - 带有模板的 C++ 模板化函数特化
- python - 在 google colab 上读写数据的最佳方式?
- twitter - 在哪里为 Twitter webhook 添加有效负载 URL?