Final Course Project: Interactive Quiz Application

🚀 Project Overview

In this final project, you will build a fully interactive Quiz App. You will use JavaScript to manage the questions, handle user scoring, manipulate the DOM to show/hide sections, and use Asynchronous logic to fetch high scores from a simulated server.

Problem Statement

Educational platforms need engaging ways to test student knowledge. You must create an app where users can answer multiple-choice questions, see their final score, and see how they rank against others.

Project Objectives

• Store quiz data in an **Array of Objects**.
• Dynamically render questions using **DOM Manipulation**.
• Implement a timer using setInterval.
• Use **Local Storage** to save the user's best score.

Core Features

1. Dynamic Loading: Questions are injected into the page one by one.
2. Score Engine: Real-time calculation of correct answers.
3. Countdown Timer: Users have 60 seconds to finish the quiz.
4. Result Dashboard: Display final score and a "Retake" button.
5. High Scores: Save and display the top 5 scores from local storage.

Development Steps

1. Create the base HTML structure (Container, Question Div, Options Div, Timer).
2. Define an array questions containing objects with text, options, and correct index.
3. Write a function showQuestion() that clears the old content and injects new buttons.
4. Add event listeners to the buttons to check answers and move to the next question.
5. Implement the timer logic; when it hits zero, jump to the results page.
6. Use JSON.stringify() and JSON.parse() to manage local storage data.

Evaluation Criteria

• Functionality (No bugs in question flow or scoring).
• Clean DOM manipulation (No hard-coded text in HTML for questions).
• User feedback (Animations or color changes for Correct/Incorrect).
• Effective use of Array methods (map, filter).
• Logic modularity (Small, single-purpose functions).

Solve in Editor

---