Creating a score that will go up every time a correct answer is selected

Question

So I have a quiz created using HTML, CSS, and javascript. I am trying to add a score but when I add to it when it goes to the next question then it either adds 4 each time or does not add. Any help appreciated

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')
var score = 0
score = Number(score)
let shuffledQuestions, currentQuestionIndex

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
      answer.correct = Boolean(answer.correct)
      button.dataset.correct = answer.correct

   
      //mainbox .body.correct
      //$("mainbox").css("background-color","green");
    }
    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 = 'Restart'
    startButton.classList.remove('hide')
    window.alert("You have scored "+ score)
    score = 0;
    score = Number(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: 'which is non-price factor?',
    answers: [
      { text: 'income', correct: true },
      { text: 'price ', correct: false }
    ]
  },
  {
    question: 'which is merit good?',
    answers: [
      { text: 'cigarette', correct: false },
      { text: 'junk food ', correct: false },
      { text: 'healthcare', correct: true },
      { text: 'gambling', correct: false }
    ]
  },
  {
    question: 'which one is not the type of market failure?',
    answers: [
      { text: 'monopoly market', correct: false },
      { text: 'oligopoly market', correct: true },
      { text: 'demerit goods', correct: false },
      { text: 'negative externality', correct: false }
    ]
  },
  {
    question: 'Total profit = total revenue - total cost?',
    answers: [
      { text: 'flase', correct: false },
      { text: 'true', correct: true }
    ]
  }
]

Style Sheet

#topbox{
    width: 100%;
    height: 70px;
    background-color: rgb(146, 182, 214);
 }
 u1  {
     list-style-type: none ;
     margin : 0px ;
     padding : 0 ;
     overflow : hidden;
     background-color: rgb(153, 197, 218);
}
li  {
    float: left;
 }
 li a  {
    display:inline-block;
     padding: 20px;
     border: 1px solid rgb(243, 240, 240);
     background-color: rgb(153, 197, 218);
     color: white;
     text-align:center;
     position:relative;
     padding-bottom: 20px;
     font-size: 20pt;

 }
 #medianbox{
    width: 100%;
    height: 73px;
    background-color:rgb(153, 197, 218) ;
 }
 #mainbox{
    width: 100%;
    height: 100%;
    background-color: rgb(146, 182, 214);

 }

*, *::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: 10000px;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: hsl(var(--hue), 100%, 20%);   }
  .body.correct {
hue: var(--hue-correct);   }
  .body.wrong {
--hue: var(--hue-wrong);   }
  .container {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;   }
.btn-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 10px; margin: 20px 0; Color: blue; }

.btn { --hue: var(--hue-neutral); border: 1px solid hsl(var(--hue), 100%, 30%); } .btn:hover { border-color: black; } .btn.correct { --hue: var(--hue-correct); color: green; } .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; } .hide { display: flex; }

.p1 { font-family: "Times New Roman", Times, serif; font-size: 26pt; }

HTML

Quiz App BBS economic

definition

test

resource

community

search

me Question Answer 1 Answer 2 Answer 3 Answer 4 Start Next

Creating a score that will go up every time a correct answer is selected

Answers (1)

Related Questions