Quiz App using JavaScript

Data Setup (const variables)

• The code starts by defining an array of constants (questions). This array holds the actual quiz content, with each question as an object.
• Each question object has two properties:
• question: This is the actual question text that will be displayed.
• answers: This is an array of objects, each representing an answer choice.
• Each answer object has two properties:
• text: This is the text displayed for the answer choice.
• correct: This is a boolean value (true or false) indicating if the answer is correct.
  Other constants are defined to reference HTML elements:
• questionElement: This refers to the h2 element with the ID “question” where the actual question text will be displayed.
• answerButton: This refers to the div element with the ID “answer-buttons” that will hold the answer buttons.
• nextButton: This refers to the button element with the ID “next-btn” that controls moving to the next question.
  Two more variables are declared:
• currectQuestionIndex: This variable keeps track of the index of the current question being displayed (starts at 0).
• Score: This variable stores the user’s current score (starts at 0).

Starting the Quiz (startQuiz function)

• The startQuiz function is called when the quiz needs to begin (or restart).
• It resets currectQuestionIndex and Score to their initial values.
• It sets the text of the “Next” button back to “Next”.
• Finally, it calls the showQuestion function to display the first question.

Displaying the Current Question (showQuestion function)

• The showQuestion function displays the current question and answer choices.
• It first calls the restState function to clear any previous answer styles and buttons.
• showQuestion  function retrieves the current question object from the questions array based on the currectQuestionIndex.
• It constructs the question number by adding 1 to currectQuestionIndex and formats the question text with the question number.
• It iterates through the answers array of the current question using forEach.
• Inside the loop, it creates a new button element (button).
• The button’s text content is set to the current answer’s text (answer.text).
• This button is assigned the “btn” class for styling (defined in CSS).
• The button is appended to the answerButton element, adding it to the list of answer choices displayed on the screen.
• If the current answer is the correct one (answer.correct is true), a data attribute named correct is set to “true” on the button element. This will be used later to identify the correct answer.
• Finally, an event listener is added to the button using addEventListener. When the button is clicked, it calls the SelectAnswer function, passing the click event object as an argument.

Clearing the Quiz State (restState function)

• The restState function is used to clear the quiz state after displaying a question or before displaying a new one.
• It hides the “Next” button by setting its display style to “none”.
• It removes any existing answer buttons by looping through the answerButton element’s children and removing them one by one.

Handling Answer Selection (SelectAnswer function)

• The SelectAnswer function is called whenever a user clicks on an answer button. It receives the click event object (e) as an argument.
• It retrieves the clicked button element (selectBtn) from the event object.
• It checks if the clicked button has the data-correct attribute set to “true” using a comparison with “=== true” (strict comparison). This tells us if the clicked button represents the correct answer.
• If the answer is correct (iscorrect is true):
• The button’s class list is modified to add the “correct” class, likely applying a green background color from the CSS (as discussed earlier).
• The score is incremented by 1.
  If the answer is incorrect:
• The button’s class list is modified to add the “incorrect” class, likely applying a red background color from the CSS.
• It then iterates through all the child buttons (answerButton.children) of the `answer.

Disabling Buttons and Showing Correct Answer (continued in SelectAnswer function)

• The loop (Array.from(answerButton.children).forEach(button => { … })) iterates through all the answer buttons using forEach.
• Inside the loop, it checks if the current button (button) has the data-correct attribute set to “true”. This identifies the button representing the correct answer.
  If it’s the correct answer:
• The “correct” class is added to the button using classList.add(“correct”), likely applying the green background color from the CSS.
• Regardless of whether it’s the correct answer or not, the button is disabled using button.disabled = true. This prevents users from selecting the same answer again.

Showing the “Next” Button (continued in SelectAnswer function)

• Finally, the display style of the “Next” button is set to “block”, making it visible after an answer is selected.

Showing the Score (showScore function)

• The showScore function is called to display the user’s score after all questions are answered.
• It calls the restState function to clear any answer button styles.
• It updates the text content of the questionElement to display a message like “You Scored ${Score} Out of ${questions.length}”.
• restState function changes the text of the “Next” button to “Play Again”.
• It sets the display style of the “Next” button to “block” to make it visible.

Handling the “Next” Button Click (handleNextButton function)

• The handleNextButton function is likely called when the user clicks the “Next” button.
• It increments the currectQuestionIndex by 1 to move to the next question in the array.
• It checks if currectQuestionIndex is still within the bounds of the question’s array length.
• If there are more questions (currectQuestionIndex < questions.length), it calls the showQuestion function to display the next question.
• If there are no more questions (currectQuestionIndex reaches the array length), it calls the showScore function to display the final score.

Event Listener for “Next” Button Click

• An event listener is added to the “Next” button (nextButton). When the button is clicked, it calls an anonymous function.
• Inside the anonymous function, it checks the value of currectQuestionIndex.
• If there are more questions (currectQuestionIndex < questions.length), it calls the handleNextButton function to handle moving to the next question.
• If there are no more questions, it calls the startQuiz function to restart the quiz.

Starting the Quiz (startQuiz called at the end)

• Finally, the code calls the startQuiz function at the very end. This ensures the quiz starts as soon as the JavaScript code is loaded and executed.

Overall, this JavaScript code effectively manages the quiz flow by:

• Setting up the initial state and questions data.
• Displaying the current question and answer choices.
• Handling user selection of answers, including feedback and disabling buttons.
• Showing the final score after all questions are answered.
• Restarting the quiz when the “Play Again” button is clicked.

Article By Sparkify Solutions.

How to create a Quiz App using JavaScript.