我目前正在为我的学校项目制作一个问答游戏。将显示问题,您必须单击您认为正确的答案,正确答案将显示为绿色,错误答案将显示为红色。完成第一个随机问题后,将有一个“下一步”按钮,您必须单击该按钮才能进入下一个问题,完成所有5个问题后,将有一个“提交”按钮。单击“提交”按钮后,应显示分数,但不显示分数。
这是JavaScript:
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
const scoreText = document.getElementById("score");
let shuffledQuestions, currentQuestionIndex
let score = 0;
document.write(score);
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
})
function startGame() {
startButton.classList.add('hide')
shuffledQuestions = questions.sort(() => Math.random() - .5)
currentQuestionIndex = 0
questionContainerElement.classList.remove('hide')
setNextQuestion()
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add('hide')
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide')
} else {
startButton.innerText = 'Submit'
startButton.classList.remove('hide')
}
if (answer.correct) {
score++
}
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add('correct')
} else {
element.classList.add('wrong')
}
}
function clearStatusClass(element) {
element.classList.remove('correct')
element.classList.remove('wrong')
}
const questions = [{
question: 'What is the capital city of Brazil?',
answers: [{
text: 'Brasilia',
correct: true
},
{
text: 'Rio de Janeiro',
correct: false
}
]
},
{
question: 'What is the population of the United Kingdom in 2021?',
answers: [{
text: '68 million',
correct: true
},
{
text: '81 million',
correct: false
},
{
text: '56 million',
correct: false
},
{
text: '62 million',
correct: false
}
]
},
{
question: 'What country has the most people as of 2021?',
answers: [{
text: 'India',
correct: false
},
{
text: 'Indonesia',
correct: false
},
{
text: 'China',
correct: true
},
{
text: 'USA',
correct: false
}
]
},
{
question: 'Which city is bigger?',
answers: [{
text: 'Paris',
correct: false
},
{
text: 'London',
correct: true
}
]
},
{
question: 'What country is angkor wat in?',
answers: [{
text: 'Laos',
correct: false
},
{
text: 'Cambodia',
correct: true
},
{
text: 'Vietnam',
correct: false
},
{
text: 'Thailand',
correct: false
}
]
}
]
{
//This is the bit where the score should have been displayed document.getElementById("after_submit").style.visibility="visible";
document.getElementById("score").innerHTML = "you got " + score + " correct.";
}
//This is the CSS:
*, *::before, *::after {
box-sizing: border-box;
font-family: Gotham Rounded;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: lime;
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: var(--hue-wrong);
}
.container {
width: 600px;
max-width: 80%;
background-color: green;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
color: white;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
border: 1px solid hsl(var(--hue), 100%, 30%);
background-color: hsl(var(--hue), 100%, 50%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.btn:hover {
border-color: black;
}
.btn.correct {
--hue: var(--hue-correct);
color: white;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
a {
text-decoration: solid;
color: white;
font-size: 300%
}
div.a {
position: absolute;
top: 0;
border: green;
}
.hide {
display: none;
}
#after_Submit {
visibility: hidden;
}
<html lang="en">
<title>Quiz App</title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="styles.css" rel="stylesheet">
<script defer src="script.js"></script>
</head>
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
</div>
</div>
</html>
我添加了一些快速修复,试试看。
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const submitButton = document.getElementById('submit')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
const scoreText = document.getElementById("score");
let shuffledQuestions, currentQuestionIndex
let score = 0;
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
})
submitButton.addEventListener('click', showScore)
let executed = false;
function startGame() {
if (!executed) {
startButton.classList.add('hide')
shuffledQuestions = questions.sort(() => Math.random() - .5)
currentQuestionIndex = 0
questionContainerElement.classList.remove('hide')
setNextQuestion()
executed = true;
}
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', function(e){
selectAnswer(e, answer);
}, false);
if (currentQuestionIndex < shuffledQuestions.length + 1) {
answerButtonsElement.appendChild(button)
}
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add('hide')
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}
}
function selectAnswer(e, answer) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
if (answer.correct) {
score++;
}
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide')
} else {
submitButton.classList.remove('hide')
}
}
function showScore () {
document.getElementById("score").innerHTML = "you got " + score + " correct.";
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add('correct')
} else {
element.classList.add('wrong')
}
}
function clearStatusClass(element) {
element.classList.remove('correct')
element.classList.remove('wrong')
}
const questions = [{
question: 'What is the capital city of Brazil?',
answers: [{
text: 'Brasilia',
correct: true
},
{
text: 'Rio de Janeiro',
correct: false
}
]
},
{
question: 'What is the population of the United Kingdom in 2021?',
answers: [{
text: '68 million',
correct: true
},
{
text: '81 million',
correct: false
},
{
text: '56 million',
correct: false
},
{
text: '62 million',
correct: false
}
]
},
{
question: 'What country has the most people as of 2021?',
answers: [{
text: 'India',
correct: false
},
{
text: 'Indonesia',
correct: false
},
{
text: 'China',
correct: true
},
{
text: 'USA',
correct: false
}
]
},
{
question: 'Which city is bigger?',
answers: [{
text: 'Paris',
correct: false
},
{
text: 'London',
correct: true
}
]
},
{
question: 'What country is angkor wat in?',
answers: [{
text: 'Laos',
correct: false
},
{
text: 'Cambodia',
correct: true
},
{
text: 'Vietnam',
correct: false
},
{
text: 'Thailand',
correct: false
}
]
}
]
*, *::before, *::after {
box-sizing: border-box;
font-family: Gotham Rounded;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: var(--hue-wrong);
}
.container {
width: 600px;
max-width: 80%;
background-color: green;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
color: white;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
border: 1px solid hsl(var(--hue), 100%, 30%);
background-color: hsl(var(--hue), 100%, 50%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.btn:hover {
border-color: black;
}
.btn.correct {
--hue: var(--hue-correct);
color: white;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
a {
text-decoration: solid;
color: white;
font-size: 300%
}
div.a {
position: absolute;
top: 0;
border: green;
}
.hide {
display: none;
}
#after_Submit {
visibility: hidden;
}
<html lang="en">
<title>Quiz App</title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="styles.css" rel="stylesheet">
<script defer src="script.js"></script>
</head>
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
<button id="submit" class="btn hide">Submit</button>
</div>
<div id="score"></div>
</div>
</html>