提问者:小点点

为什么我的代码不在测验结束时显示分数?


我目前正在为我的学校项目制作一个问答游戏。将显示问题,您必须单击您认为正确的答案,正确答案将显示为绿色,错误答案将显示为红色。完成第一个随机问题后,将有一个“下一步”按钮,您必须单击该按钮才能进入下一个问题,完成所有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>

共1个答案

匿名用户

我添加了一些快速修复,试试看。

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>