By Howie


2020-06-30 03:04:13 8 Comments

I am trying to call the increaseScore() function to increase the score by 1 each time the correct answer "A" is chosen. Right now it increases by 1 when you hit the start button, but that is the only time it changes. Nothing else happens when the correct or incorrect answer is chosen. Im not sure if the increaseScore() function is not written correctly or if its just in the wrong place. So lost

const startButton = document.getElementById('startBtn')
const nextButton = document.getElementById('nextBtn')
const questionContainerElement = document.getElementById('questionContainer')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answerButtons')

let shuffledQuestions, currentQuestionIndex

startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
    currentQuestionIndex++
    setNextQuestion()
    
})


function startGame() {
    console.log('Started')
    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
            increaseScore()
        }
        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')
    }
}

function setStatusClass(element, correct) {
    if (correct) {
        element.classList.add('correct')
        
    }else {
        element.classList.add('wrong')
    }
}
function increaseScore(){
    console.log('score increase', score)
    return displayScore.innerHTML = score + 1
    
}



function clearStatusClass(element) {
    element.classList.remove('correct')
    element.classList.remove('wrong')
}

const questions = [
    {
        question: "What is question #1",
        answers: [
            { text: 'A', correct: true},
            { text: 'B', correct: false},
            { text: 'C', correct: false},
            { text: 'D', correct: false}
        ]
    },
    {
        question: "What is question #2",
        answers: [
            { text: 'A', correct: true},
            { text: 'B', correct: false},
            { text: 'C', correct: false},
            { text: 'D', correct: false}
        ]
    },
    {
        question: "What is question #3",
        answers: [
            { text: 'A', correct: true},
            { text: 'B', correct: false},
            { text: 'C', correct: false},
            { text: 'D', correct: false}
        ]
    },
    {
        question: "What is question #4",
        answers: [
            { text: 'A', correct: true},
            { text: 'B', correct: false},
            { text: 'C', correct: false},
            { text: 'D', correct: false}
        ]
    },
    {
        question: "What is question #5",
        answers: [
            { text: 'A', correct: true},
            { text: 'B', correct: false},
            { text: 'C', correct: false},
            { text: 'D', correct: false}
        ]
    }

]
var score = 0;
var displayScore = document.querySelector('.score')
displayScore.innerHTML = score  

3 comments

@TacoEater 2020-06-30 03:28:16

A little bit of detective work quickly reveals that the culprits is displayScore.innerHTML = score + 1

You are not progressing score, just displaying 0 + 1 if you want to progress score your code should be:

return displayScore.innerHTML = score++

@Howie 2020-06-30 03:39:23

I am now getting it to increase by one each time i click next. Do you know why it is not working for only the correct answers? It works for every answer

@TacoEater 2020-07-01 13:17:59

Hey @howyie, that's because on page change you are checking every button whether it is correct, so one of them is correct which causes it to increase the result. What you need to do is 1) in your select answer function set a global variable to isCorrect = true (if correct). 2) in your setNextQuestion score = isCorrect? score+1:score. 3) The last thing you want to do after increasing the score is isCorrect = false to reset it.

@Rick 2020-06-30 03:24:40

you are calling increaseScore(), which returns the score, but you are not saving it anywhere.

you have

increaseScore()

should be:

score = increaseScore();

@Howie 2020-06-30 23:05:46

Thank you. But I am getting it to increase after each click, correct and wrong. I cannot figure out how to get it to only increase on the correct.

@freqnseverity 2020-06-30 03:24:38

I believe it's because you need to increment the value of score rather than just setting displayScore.innerHTML = score + 1. Consider

function increaseScore(){
  score = score + 1
  displayScore.innerHTML = score
}

@Howie 2020-06-30 23:06:07

Thank you. But I am getting it to increase after each click, correct and wrong. I cannot figure out how to get it to only increase on the correct.

@freqnseverity 2020-06-30 23:45:40

In the showQuestion function, can you add a console.log to print the value of answer.correct before the if statement?

@freqnseverity 2020-07-01 00:01:11

I think you will find that whatever is in answer.correct is not 0 or False so it evaluates to true.

Related Questions

Sponsored Content

8 Answered Questions

[SOLVED] Why was the name 'let' chosen for block-scoped variable declarations in JavaScript?

1 Answered Questions

[SOLVED] Building a simple quiz in HTML using JavaScript

  • 2018-05-04 18:04:50
  • Dookoto_Sea
  • 518 View
  • 0 Score
  • 1 Answer
  • Tags:   javascript html

3 Answered Questions

[SOLVED] jqGrid row(s) deletion

1 Answered Questions

[SOLVED] How to turn on and off the correct answer buttons?

1 Answered Questions

[SOLVED] jQuery Quiz compare correct answer in array

  • 2011-08-03 04:36:00
  • noviceRick
  • 4519 View
  • 2 Score
  • 1 Answer
  • Tags:   javascript jquery

1 Answered Questions

Score counter using PHP and JavaScript

  • 2011-07-27 22:07:35
  • Amal
  • 1939 View
  • 0 Score
  • 1 Answer
  • Tags:   php javascript

3 Answered Questions

[SOLVED] Javascript add a PHP file

  • 2010-04-27 15:04:29
  • Jorge
  • 167 View
  • 0 Score
  • 3 Answer
  • Tags:   php javascript

Sponsored Content