Quiz App Source Code in HTML, CSS & JavaScript – Interactive Quiz Application

 How to run the app

1. Copy the entire code into a new file called, for example, quizmaster.html.

2. Open that file with any modern browser (Chrome, Edge, Firefox, etc.).

3. The quiz app loads immediately – all features are available offline after the first load.

Note about uploads/quiz.json
This is a pure front‑end application, so custom quizzes are stored in your browser’s localStorage, not in a server folder. You can still upload a .json file or paste JSON directly – the app will remember them automatically.

2. Navigating the app

The app has four main views accessible from the top navigation bar:

• Use the mobile menu button (three horizontal lines) on small screens.

• At the end of any quiz, you can Retry, Review Answers, or go back to Home.

3. Adding custom quizzes (the “uploads” feature)

Even though there’s no physical uploads/ folder, you can add as many quizzes as you like. Here’s how:

Method A – Paste JSON directly

1. Click “Add Quiz” in the nav bar.

2. Write (or copy‑paste) a quiz in JSON format into the text area.

3. Click “Save Quiz”.

4. The quiz instantly appears on the Home screen under Available Quizzes.

Method B – Upload a .json file

1. On the Add Quiz page, click the upload area (or drag & drop a .json file onto it).

2. The content of the file fills the text area.

3. Review the JSON, then click “Save Quiz”.

Method C – Start with the sample template

• Click the “Load Sample” button to see the required JSON structure, then modify and save.

Important: All saved custom quizzes persist in your browser’s localStorage. They stay even after closing the tab, but they are lost if you manually clear your browser data.

4. JSON format for a quiz

Your custom quiz must follow this structure (same as the sample):

{
  "title": "My Awesome Quiz",
  "category": "General",
  "difficulty": "medium",
  "timePerQuestion": 25,
  "iconType": "custom",
  "questions": [
    {
      "question": "What is the capital of France?",
      "options": ["London", "Berlin", "Paris", "Madrid"],
      "correct": 2,
      "explanation": "Paris is the capital of France."
    },
    {
      "question": "How many continents are there?",
      "options": ["5", "6", "7", "8"],
      "correct": 2,
      "explanation": "There are 7 continents."
    }
  ]
}

Rules:

• title – string, required.

• questions – array of objects, at least one question.

• Each question must have:

  • question (string)

  • options (array of strings, minimum 2 options, maximum 4 recommended)

  • correct (integer 0‑based index of the correct option)

  • explanation (string, optional but recommended)

• Optional fields: difficulty (easy/medium/hard), timePerQuestion (seconds, default 30), iconType (science/general/tech/custom).

5. Playing a quiz – key features

• Timer per question – default 30 seconds (customisable via JSON). Bar turns yellow then red as time runs out.

• Keyboard shortcuts – while a question is active, press 1‑4 or A‑D to select an answer. Press Enter or Space to move to the next question after answering.

• Instant feedback – after selecting an answer, the correct option is highlighted in green, wrong ones in red, and an explanation appears.

• Scoring – points for each correct answer: 100 + (time left * bonus). Perfect scores trigger confetti.

• Results screen – shows percentage, total points, time taken, and a question‑by‑question review.

6. Customisation tips (for developers)

If you want to change the default quizzes or the behaviour:

• Edit the pre‑loaded quizzes – Find the defaultQuizzes array in the JavaScript (around line 1500). Add, remove, or modify quiz objects.

• Change default timer – Inside each quiz object, set timePerQuestion to your preferred number.

• Adjust styling – All colours are CSS custom properties under :root. For example, change --accent-1 to a different colour to rebrand the app.

7. What if you really need a server‑side uploads/quiz.json folder?

The current implementation is fully client‑side. If you later need to store quizzes on a server (e.g., with Node.js or Python), you would:

• Send the JSON from the Add Quiz page to an endpoint that saves it in uploads/quiz.json (or multiple files).

• Load those files on startup instead of using localStorage.

However, for most personal or demo use, the localStorage approach is simpler, faster, and already implemented. The app shows exactly the same “upload” experience without any backend.