🌟 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:
0 Comments