CareerPlug NGCareerPlug
← Back to practice projects
JavaScriptMedium
16 views

Dynamic JavaScript Quiz Application

This project challenges you to build a fully functional, interactive quiz application using vanilla JavaScript, HTML, and CSS. The goal is to create a dynamic experience where users answer multiple-choice questions and receive instant feedback, culminating in a final score.

Requirements/Acceptance Criteria:

  • Quiz Data Structure: Define at least 5 multiple-choice questions (each with 4 options and one correct answer) as an array of objects in your JavaScript code.
    • Example: { question: "What is 2 + 2?", options: ["3", "4", "5", "6"], correctAnswer: "4" }
  • Dynamic Question Display: Questions and their respective answer options must be dynamically rendered on the webpage, one question at a time.
  • User Interaction:
    • Users should be able to select only one answer per question.
    • A "Next Question" button should advance the quiz to the next question.
  • Instant Feedback: After a user selects an answer, immediately indicate whether the chosen answer is correct or incorrect (e.g., by changing the background color of the option or displaying a text message).
  • Score Tracking: The application must accurately track the number of correct answers throughout the quiz.
  • Quiz Completion:
    • Upon answering the last question, the quiz concludes.
    • Display the user's total score (e.g., "You scored X out of Y!") and percentage.
    • Provide a "Restart Quiz" button to allow the user to play again.
  • Basic Styling: The quiz interface should be visually appealing and user-friendly, employing basic CSS for layout and presentation.
  • Pure JavaScript: No external libraries or frameworks (like React, Vue, jQuery) are allowed. Only native JavaScript.

What to include in your submission:

  • index.html: The main HTML file for your quiz application.
  • style.css: Your CSS file for styling the application.
  • script.js: Your JavaScript file containing all the quiz logic.

Submit your code

The AI reads your code and gives you a score and feedback — no login required.

Upload your project as a .zip file

Only one file is accepted — if your project has multiple files (e.g. index.html + style.css + script.js), zip them together first and upload that.