Let's break down the code step-by-step to understand what's happening at each part.

Variables and DOM Elements

const questionContainer = document.getElementById('question-container'); 
const questionElement = document.getElementById('question'); 
const answerButtons = document.getElementById('answer-buttons'); 
const nextButton = document.getElementById('next-button');

• questionContainer: This variable holds the HTML element with the ID question-container, which is where the questions will be displayed.
• questionElement: This variable holds the HTML element for displaying the question text.
• answerButtons: This variable holds the HTML element that will contain the answer buttons for the user to select.
• nextButton: This variable holds the HTML element for the "Next" button, which allows the user to proceed to the next question.

Question Data Structure

const questions = [ 
{ question: 'What is the capital of France?', 
answers: [ 
{ text: 'Berlin', correct: false }, 
{ text: 'Madrid', correct: false }, 
{ text: 'Paris', correct: true }, 
{ text: 'Lisbon', correct: false } ] }, 
// ... other questions ... ];

• questions: This is an array of objects, where each object represents a question. Each question has:
  • A question string that contains the question text.
  • An answers array with possible answers, each represented as an object containing:
    • text: The answer text.
    • correct: A boolean indicating whether the answer is correct.

Current Question Index

let currentQuestionIndex = 0;

• currentQuestionIndex: This variable keeps track of which question is currently being displayed. It starts at 0, indicating the first question.

Start Game Function

function startGame() { 
currentQuestionIndex = 0; 
nextButton.classList.add('hide'); 
showQuestion(questions[currentQuestionIndex]); 
}

• startGame: This function resets the game state:
  • Sets currentQuestionIndex to 0, so the first question is shown.
  • Hides the "Next" button using classList.add('hide').
  • Calls showQuestion to display the current question.

Show Question Function

function showQuestion(question) { 
questionElement.innerText = question.question; 
answerButtons.innerHTML = ''; 
question.answers.forEach(answer => { 
const button = document.createElement('button'); 
button.innerText = answer.text; 
button.classList.add('btn'); 
button.addEventListener('click', () => selectAnswer(answer)); 
answerButtons.appendChild(button); 
});
 }

• showQuestion: This function updates the UI to display a given question:
  • Sets the innerText of questionElement to the question text.
  • Clears any existing answer buttons by setting innerHTML to an empty string.
  • Loops through the answers of the question:
    • For each answer, it creates a new button element.
    • Sets the button's text to the answer text.
    • Adds a class btn for styling.
    • Adds a click event listener that calls selectAnswer when clicked.
    • Appends the button to the answerButtons container.

Select Answer Function

function selectAnswer(answer) { 
const correct = answer.correct; 
if (correct) { 
alert('Correct!'); 
} else { 
alert('Wrong!'); 
} 
nextButton.style.display = 'block';
 }

• selectAnswer: This function is called when an answer button is clicked:
  • It checks if the answer is correct.
  • Displays an alert indicating whether the answer was correct or wrong.
  • Makes the "Next" button visible by changing its style to display: block.

Next Button Logic

nextButton.addEventListener('click', () => { 
currentQuestionIndex++; 
if (currentQuestionIndex < questions.length) { 
showQuestion(questions[currentQuestionIndex]); 
nextButton.style.display = 'none'; 
} else { 
alert('Quiz finished!'); 
startGame(); 
} 
});

• Next Button Event Listener: This code sets up an event listener for the "Next" button:
  • Increments currentQuestionIndex to move to the next question.
  • Checks if there are more questions:
    • If yes, calls showQuestion with the next question and hides the "Next" button.
    • If no more questions are available, it shows an alert that the quiz is finished and restarts the game by calling startGame.

Start the Game

startGame();

• This line initializes the game when the script first runs, calling the startGame function to set everything in motion.

Summary

The code sets up a simple quiz application where users can answer multiple-choice questions. It manages the state of the quiz, updates the UI based on user interaction, and provides feedback on whether the answers were correct. Each function is responsible for a specific aspect of the quiz's behavior, making the code organized and easy to follow.