Vanilla JavaScript Quiz App with 3 Screens

🧠 Create a 3-Screen Quiz App using Vanilla JavaScript & JSON

✅ Built using only HTML, CSS, JS ✅ JSON-powered, hosted on GitHub Pages ✅ No frameworks or build tools needed

Code on Github

Live on Github Pages

This tutorial explains how to build a 3-screen quiz app using only HTML, CSS, and JavaScript. All quiz data will be fetched using fetch() from JSON files hosted on GitHub Pages.

---

📦 What We'll Build

Screen 1: List of Subjects
Screen 2: Quizzes in Selected Subject
Screen 3: Take Quiz & Show Result

---

📁 JSON File Examples

subjects.json

[
  {
    "subjectNo": 1,
    "subjectName": "JavaScript",
    "quizListUrl": "https://yourusername.github.io/data/js-quizzes.json"
  }
]

js-quizzes.json

[
  {
    "quizNo": 1,
    "quizName": "JS Basics",
    "quizUrl": "https://yourusername.github.io/data/js-basics-quiz.json"
  }
]

js-basics-quiz.json

[
  {
    "question": "What does JS stand for?",
    "options": ["JavaScript", "JustScript", "JScript", "Java"],
    "answer": "JavaScript"
  }
]

---

🧱 Folder Structure

📁 public/
  ├── index.html
  ├── style.css
  ├── main.js

---

📄 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Quiz App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div id="app">
    <h1>🧠 Quiz App</h1>
    <div id="screen"></div>
  </div>

  <script src="main.js"></script>
</body>
</html>

---

🎨 style.css

body {
  font-family: Arial, sans-serif;
  background: #f2f2f2;
  padding: 2rem;
  text-align: center;
}

button {
  padding: 10px 20px;
  margin: 8px;
  border: none;
  background: #3498db;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background: #2980b9;
}

h2 {
  color: #2c3e50;
}

---

⚙️ main.js

const screen = document.getElementById('screen');

const state = {
  quizListUrl: '',
  quizUrl: '',
  subjectName: '',
  quizName: '',
  questions: [],
  currentIndex: 0,
  score: 0,
};

function loadSubjects() {
  fetch('https://yourusername.github.io/data/subjects.json')
    .then(res => res.json())
    .then(subjects => {
      screen.innerHTML = '<h2>Select Subject</h2>';
      subjects.forEach(sub => {
        const btn = document.createElement('button');
        btn.textContent = sub.subjectName;
        btn.onclick = () => {
          state.quizListUrl = sub.quizListUrl;
          state.subjectName = sub.subjectName;
          loadQuizzes();
        };
        screen.appendChild(btn);
      });
    });
}

function loadQuizzes() {
  fetch(state.quizListUrl)
    .then(res => res.json())
    .then(quizzes => {
      screen.innerHTML = `<h2>${state.subjectName}: Select Quiz</h2>`;
      quizzes.forEach(quiz => {
        const btn = document.createElement('button');
        btn.textContent = quiz.quizName;
        btn.onclick = () => {
          state.quizUrl = quiz.quizUrl;
          state.quizName = quiz.quizName;
          loadQuizQuestions();
        };
        screen.appendChild(btn);
      });
    });
}

function loadQuizQuestions() {
  fetch(state.quizUrl)
    .then(res => res.json())
    .then(questions => {
      state.questions = questions;
      state.currentIndex = 0;
      state.score = 0;
      showQuestion();
    });
}

function showQuestion() {
  const q = state.questions[state.currentIndex];
  screen.innerHTML = `<h2>Q${state.currentIndex + 1}: ${q.question}</h2>`;
  q.options.forEach(opt => {
    const btn = document.createElement('button');
    btn.textContent = opt;
    btn.onclick = () => {
      if (opt === q.answer) state.score++;
      state.currentIndex++;
      if (state.currentIndex < state.questions.length) {
        showQuestion();
      } else {
        showResult();
      }
    };
    screen.appendChild(btn);
  });
}

function showResult() {
  screen.innerHTML = `
    <h2>🎉 Quiz Completed!</h2>
    <p><strong>${state.quizName}</strong></p>
    <p>Your Score: ${state.score}/${state.questions.length}</p>
    <button onclick="loadSubjects()">Restart</button>
  `;
}

// Start the app
loadSubjects();

---

🌐 Hosting JSON on GitHub Pages

1. Create a GitHub repo with a `data/` folder 2. Upload `subjects.json`, `js-quizzes.json`, etc. 3. Enable GitHub Pages on the repo 4. Use the raw GitHub URL (or `https://yourusername.github.io/yourrepo/data/...`) in your `fetch()` calls ---

✨ Features You Can Add Next

- Timer for each question - Previous/Next question navigation - Leaderboard using localStorage - Result summary & feedback - Progress bar ---

🚀 Final Words

This is a great way to build a quiz app with minimal code. You don’t need React or a framework — just HTML, CSS, JavaScript, and some JSON files hosted for free on GitHub Pages. ---

Want a downloadable ZIP or GitHub deploy help? Let me know in the comments!