script.js

// Questions
const quizData = [
  {
    question: 'Which language runs in a web browser?',
    a: 'Java',
    b: 'C',
    c: 'Python',
    d: 'JavaScript',
    correct: 'd',
  },
  {
    question: 'What dooes CSS stands for?',
    a: 'Central Style Sheets',
    b: 'Cascading Style Sheets',
    c: 'Cascading Simple Sheets',
    d: 'Cars Suvs Sailboats',
    correct: 'b',
  },
  {
    question: 'What does HTML stands for?',
    a: 'Hypertext Markup Language',
    b: 'Hypertext Markdown Language',
    c: 'Hyperloop Machine Language',
    d: 'Helicopter Terminals Motorboats',
    correct: 'a',
  },
  {
    question: 'What year was JavaScript Launched?',
    a: '1996',
    b: '1995',
    c: '1994',
    d: 'None of the above',
    correct: 'b',
  },
];

//Selections
const quiz = document.getElementById(`quiz`);
const answerEls = document.querySelectorAll(`.answer`);
const questionEl = document.getElementById(`question`);
const a_text = document.getElementById(`a_text`);
const b_text = document.getElementById(`b_text`);
const c_text = document.getElementById(`c_text`);
const d_text = document.getElementById(`d_text`);
const submitBtn = document.getElementById(`submit`);

let currentQuiz = 0;
let score = 0;

loadQuiz();

function loadQuiz() {
  deselectAnswers();

  const currentQuizData = quizData[currentQuiz];

  questionEl.innerText = currentQuizData.question;
  a_text.innerText = currentQuizData.a;
  b_text.innerText = currentQuizData.b;
  c_text.innerText = currentQuizData.c;
  d_text.innerText = currentQuizData.d;
}

function deselectAnswers() {
  answerEls.forEach(answerEl => (answerEl.checked = false));
}

function getSelected() {
  let answer;

  answerEls.forEach(answerEl => {
    if (answerEl.checked) {
      answer = answerEl.id;
    }
  });
  return answer;
}

submitBtn.addEventListener(`click`, () => {
  const answer = getSelected();

  if (answer) {
    if (answer === quizData[currentQuiz].correct) {
      score++;
    }
    currentQuiz++;

    if (currentQuiz < quizData.length) {
      loadQuiz();
    } else {
      quiz.innerHTML = `
              <h2>You answered ${score}/${quizData.length} questions correctly.</h2>
              <button onclick="location.reload()">Reload</button>
              `;
    }
  }
});