A Flutter Online Quiz in Steps

🌟 Building a Multi-Quiz MCQ App in Flutter

From Static JSON to Dynamic Online Quizzes

✅ Introduction

Creating a quiz app in Flutter is a great way to learn about widgets, state management, networking, and multi-screen navigation. In this tutorial, we’ll build three progressive versions of an MCQ (Multiple Choice Questions) app, each adding new features.

✅ Version 1: Static JSON MCQ Quiz App

🎯 Concept:

We start by embedding quiz questions as a hardcoded JSON string directly inside our Dart file.

🧱 Features:

• Hardcoded JSON in main.dart
• 4 answer buttons (no radio buttons)
• Immediate feedback (✅ / ❌)
• Score displayed at the end

📝 Sample JSON:

[
  {
    "qno": 1,
    "question": "What is C?",
    "opa": "Programming Language",
    ...
  }
]

Skills Learned: Flutter widgets, setState, basic UI

✅ Version 2: Online JSON Quiz (HTTP GET)

🎯 Concept:

Instead of hardcoding the questions, we now fetch them from a live online URL using Flutter's HTTP package.

✅ JSON URL:

https://varanasi-software-junction.github.io/vsjpictures/mcq.json

🧱 Features:

• Uses Flutter http package
• Fetches quiz questions over internet
• Displays loading spinner and error message on network failure

Skills Learned: API calls, Future, async/await, error handling

✅ Version 3: Multi-Quiz Selection with Dynamic Quiz List

🎯 Concept:

Now the app first shows a list of available quizzes (fetched from a master JSON). Each quiz has its own JSON URL for questions.

✅ Quiz List URL:

https://varanasi-software-junction.github.io/vsjpictures/quizlist.json

🧱 Features:

• Fetch quiz list from internet
• Tap on any quiz → Load that quiz dynamically
• Uses Flutter navigation between screens
• Back to quiz list option

✅ Example Quiz List JSON:

[
  {
    "quizno": 1,
    "quizname": "Q1",
    "url": "https://varanasi-software-junction.github.io/vsjpictures/mcq.json"
  },
  ...
]

Skills Learned: Multi-screen navigation, dynamic content loading, list views

✅ What's Next?

Here are some ideas for taking this project even further:

• Add a countdown timer for each question
• Track high scores using local storage (SharedPreferences)
• Animate question transitions
• Allow adding quizzes dynamically via an admin panel

✅ Download Source Code

You can find all three complete Flutter project folders on my GitHub:

👉 Click here for full source code on GitHub

© 2025 Varanasi Software Junction | Learning Flutter with fun projects 🚀