How to Build a JSON-Based Quiz App in React
Hello, fellow code explorer! 🌟 Are you ready to embark on your first adventure in React? Today, we’re going to build a simple yet engaging quiz app using JSON and React. By the end of this tutorial, you’ll have a fully functional quiz app that fetches questions from a JSON file. Sounds exciting, right? Let’s dive in!
What You’ll Need
Before we jump into the code, make sure you have the following prerequisites:
– Basic knowledge of HTML, CSS, and JavaScript
– Node.js and npm installed on your computer
– A code editor like Visual Studio Code
– Basic understanding of React concepts
Setting Up Your React Project
First things first, let’s set up a new React project. We’ll use Create React App, a fantastic tool to help us bootstrap our project quickly.
Open your terminal (or command prompt) and type the following command:
bash
npx create-react-app json-quiz-app
This command creates a new directory called json-quiz-app with all the necessary files to get started. Once the setup is complete, navigate into the directory by running:
bash
cd json-quiz-app
Start the development server with:
bash
npm start
You should see a React welcome page open in your browser. Great job setting up!
Creating the JSON File
Next, let’s create a JSON file to hold our quiz data. In your project’s root directory, create a folder named data, and inside it, create a file named quizData.json. Let’s populate it with some sample quiz questions:
json
[
{
"question": "What is the capital of France?",
"options": ["Berlin", "Madrid", "Paris", "Lisbon"],
"answer": "Paris"
},
{
"question": "Which language is used for web apps?",
"options": ["Python", "JavaScript", "C++", "Java"],
"answer": "JavaScript"
},
{
"question": "What is the currency of Japan?",
"options": ["Yen", "Dollar", "Euro", "Rupee"],
"answer": "Yen"
}
]
This JSON file includes three quiz questions. Feel free to modify them or add more questions as you like!
Fetching the JSON Data
Now, let’s fetch this data in our React app. Open src/App.js and replace its contents with the following code:
import React, { useEffect, useState } from 'react';
import './App.css';
function App() {
const [questions, setQuestions] = useState([]);
useEffect(() => {
fetch('/data/quizData.json')
.then(response => response.json())
.then(data => setQuestions(data))
.catch(error => console.error("Error fetching data:", error));
}, []);
return (
<div className="App">
<h1>JSON-Based Quiz App</h1>
{questions.length > 0 ? (
questions.map((question, index) => (
<div key={index} className="question">
<h2>{question.question}</h2>
<ul>
{question.options.map((option, idx) => (
<li key={idx}>{option}</li>
))}
</ul>
</div>
))
) : (
<p>Loading questions...</p>
)}
</div>
);
}
export default App;
Explanation
– useEffect & useState Hooks: We use these hooks to fetch quiz data from our JSON file and manage the questions’ state.
– fetch Function: It fetches the JSON file and updates the questions state.
– Conditional Rendering: We display the quiz questions once they’re loaded, ensuring the app won’t crash if the data is still loading.
Styling the App
A little bit of CSS can go a long way to make our app more appealing. Open src/App.css and add the following styles:
css
.App {
font-family: Arial, sans-serif;
margin: 20px;
}
.question {
margin-bottom: 20px;
}
h1 {
color: #333;
}
h2 {
color: #444;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 5px 0;
}
Feel free to experiment with different styles to suit your taste.
Making the Quiz Functional
Now that we have the questions displaying, let’s make the quiz interactive. We want users to select an option and receive feedback based on their choice.
Modify the App.js file to include quiz interactions:
jsx
function App() {
const [questions, setQuestions] = useState([]);
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
const [selectedOption, setSelectedOption] = useState('');
const [score, setScore] = useState(0);
// Fetching questions logic remains same...
const handleOptionClick = (option) => {
setSelectedOption(option);
if (option === questions[currentQuestionIndex].answer) {
setScore(score + 1);
}
};
const nextQuestion = () => {
setSelectedOption('');
setCurrentQuestionIndex(currentQuestionIndex + 1);
};
return (
<div className="App">
<h1>JSON-Based Quiz App</h1>
{questions.length > 0 ? (
currentQuestionIndex < questions.length ? (
<div className="question">
<h2>{questions[currentQuestionIndex].question}</h2>
<ul>
{questions[currentQuestionIndex].options.map((option, idx) => (
<li
key={idx}
onClick={() => handleOptionClick(option)}
className={selectedOption === option ? 'selected' : ''}
>
{option}
</li>
))}
</ul>
<button onClick={nextQuestion} disabled={!selectedOption}>
Next
</button>
</div>
) : (
<h2>Your Score: {score}/{questions.length}</h2>
)
) : (
<p>Loading questions...</p>
)}
</div>
);
}
Enhancements
– State for Current Question and Score: We track which question the user is on and their score.
– Option Selection: Allows users to click on an option and compares it with the correct answer to update the score.
– Next Question & Finish: Moves to the next question when an option is selected, and displays the final score after all questions are answered.
Wrapping Up
Congratulations, you’ve built a JSON-based quiz app using React! 🎉 This project introduced you to using React hooks, JSON data fetching, and simple state management.
Optional Practice Ideas
– Add more questions to the JSON file and test your app.
– Implement a timer for each question.
– Enhance the styling with React Bootstrap or another UI library.
Feel free to tweak the app and make it your own. Remember, the best way to learn is by experimenting and building. Happy coding! 😊
—
I hope this guide was helpful and fun! If you have any questions or ideas, feel free to reach out. Until next time, keep coding and creating!