jeudi 5 décembre 2019

How to get inside this if statement (JavaScript)

I'm creating this simple quiz with 6 questions that I'm storing in an array. What I'm stuck with is that when you've reached the last question and you click 'Next', I'd like to show your results along with a text and a 'Restart' button.

What happens now though is that it show the last question again but without any answer-butons (I'm not getting into that if statement).

I'm pretty new to js, here's my code.

const startQuiz = document.querySelector('.container__start-btn');
const theQuestion = document.querySelector('.container__question');
const fourAnswers = document.querySelector('.container__answers');
const counter = document.querySelector('.container__counter__correct-answer');
const questionCounter = document.querySelector('.container__counter__question-nr');
const containerCounter = document.querySelector('.container__counter');

let currentQuestion = 0;
let count = 0;

const showQuestion = () => {
  startQuiz.innerText = 'NEXT';
  while (fourAnswers.firstChild) {
        fourAnswers.removeChild(fourAnswers.firstChild);
    }
    theQuestion.innerText = questions[currentQuestion].question;
    checkCounters();
}

const checkCounters = () => {
  counter.textContent = `Score: ${count}`;
  questionCounter.textContent = `Question: ${currentQuestion + 1}/${questions.length}`;
  generateAnswers();
}

const generateAnswers = () => {
  questions[currentQuestion].answers.forEach(answer => {
    const button = document.createElement('button');
    button.innerText = answer.answer;
    if (answer.correct) {
      button.classList.add('right');
    }
    button.classList.add('btn');
    fourAnswers.appendChild(button);
    fourAnswers.classList.remove('hide');
  })
  fourAnswers.onclick = () => {
    const selected = event.target;
    if (selected.classList.contains('right')) {
      selected.classList.add('selectedRight');
      count++;
      counter.textContent = `Score: ${count}`;
    }
    if (!selected.classList.contains('right')) {
      selected.classList.add('selectedWrong');
    }
    const rightA = document.querySelector('.right');
    rightA.classList.add('selectedRight');
  }
   currentQuestion++;
  if (currentQuestion > questions.length) {
    console.log('inside if');
    startQuiz.innerText = 'START';
    theQuestion.innerText = `Good job! You got ${count} correct answers out of ${questions.length}. Press 'START' to go again.`;
    count = 0;
    currentQuestion = 0;
  }
}

const questions = [
  {
    question: 'What is the capital of Greece?',
    answers: [
      { answer: 'Athens', correct: true },
      { answer: 'Gothenburg', correct: false },
      { answer: 'Madrid', correct: false },
      { answer: 'Berlin', correct: false }
    ]
  },
    {
    question: 'What is the capital of Sweden?',
    answers: [
      { answer: 'Stockholm', correct: true },
      { answer: 'Lisboa', correct: false },
      { answer: 'Paris', correct: false },
      { answer: 'New York', correct: false }
    ]
  },
    {
    question: 'What is the capital of Portugal?',
    answers: [
      { answer: 'Lisboa', correct: true },
      { answer: 'Valencia', correct: false },
      { answer: 'Porto', correct: false },
      { answer: 'London', correct: false }
    ]
  },
    {
    question: 'What is the capital of Argentina?',
    answers: [
      { answer: 'Buenos Aires', correct: true },
      { answer: 'Santiago', correct: false },
      { answer: 'Amsterdam', correct: false },
      { answer: 'Beijing', correct: false }
    ]
  },
    {
    question: 'What is the capital of Thailand?',
    answers: [
      { answer: 'Bangkok', correct: true },
      { answer: 'Manila', correct: false },
      { answer: 'Rome', correct: false },
      { answer: 'Nicosia', correct: false }
    ]
  },
    {
    question: 'What is the capital of Denmark?',
    answers: [
      { answer: 'Copenhagen', correct: true },
      { answer: 'Oslo', correct: false },
      { answer: 'Beirut', correct: false },
      { answer: 'Los Angeles', correct: false }
    ]
  }
]

startQuiz.addEventListener('click', showQuestion);

Aucun commentaire:

Enregistrer un commentaire