Posted on Jul 9

Day-54 Building a Simple React Quiz App Using Context API

In this post, I’ll walk through how I created a basic quiz application using React. The goal of this app is to let users enter their name, take a multiple-choice quiz, and see their result at the end. I used React hooks and the Context API to manage global state like username, score, and gamestate.

Folder Structure

src/ ├── App.js ├── App.css ├── assets/ │ └── questions.json ├── components/ │ ├── User.js │ ├── Quiz.js │ └── Result.js

App.js

import logo from './logo.svg'; import './App.css'; import User from './components/User'; import Quiz from './components/Quiz'; import Result from './components/Result'; import { createContext, useEffect, useState } from 'react'; export const quizContext = createContext(); function App() { const [gamestate, setGamestate] = useState("users"); const [username, setUsername] = useState(""); const [score, setScore] = useState(0); return ( <div className="App"> <header className="App-header"> <quizContext.Provider value={{ gamestate, setGamestate, username, setUsername, score, setScore }}> {gamestate === 'users' && <User />} {gamestate === 'playing' && <Quiz />} {gamestate === 'result' && <Result />} </quizContext.Provider> </header> </div> ); } export default App;

User.js

import React, { useContext, useEffect, useRef } from 'react'; import { quizContext } from '../App'; function User() { const { gamestate, setGamestate, username, setUsername } = useContext(quizContext); const userRef = useRef(); useEffect(() => { userRef.current.focus(); }, []); function startPlaying() { setUsername(userRef.current.value); setGamestate("playing"); } return ( <div> <input type="text" placeholder='Enter useName' ref={userRef} /> <button onClick={startPlaying}>Start Quiz</button> </div> ); } export default User;

Quiz.js

import React, { useContext, useState } from 'react'; import questions from '../assets/questions.json'; import { quizContext } from '../App'; function Quiz() { const [currentQuestion, setCurrentQuestion] = useState(0); const [optionChosen, setOptionChosen] = useState(""); const { setGamestate, score, setScore } = useContext(quizContext); function next() { if (optionChosen === questions[currentQuestion]['answer']) { setScore(score + 1); } setCurrentQuestion(currentQuestion + 1); setOptionChosen(""); } function finish() { if (optionChosen === questions[currentQuestion]['answer']) { setScore(score + 1); } setGamestate("result"); } return ( <div> {questions[currentQuestion]['prompt']} { ['A', 'B', 'C', 'D'].map((opt) => ( <button onClick={() => setOptionChosen(`option${opt}`)}> {questions[currentQuestion][`option${opt}`]} </button> )) } { (questions.length - 1 === currentQuestion) ? (<button onClick={finish}>Finish</button>) : (<button onClick={next}>Next</button>) } </div> ); } export default Quiz;

Result.js

import React, { useContext } from 'react'; import { quizContext } from '../App'; import questions from '../assets/questions.json'; function Result() { const { setGamestate, setUsername, score, username, setScore } = useContext(quizContext); function restartQuiz() { setUsername(""); setScore(0); setGamestate("users"); } return ( <div> <h1>{`${username} scored ${score} out of ${questions.length}`}</h1> <button onClick={restartQuiz}>Restart Quiz</button> </div> ); } export default Result;

questions.json

[ { "prompt": "HTML stands for?", "optionA": "HyperText Markup Language", "optionB": "HyperText Mark Language", "optionC": "HyperText Markup Learn", "optionD": "Hyper Markup Language", "answer": "optionA" }, { "prompt": "JS stands for?", "optionA": "HyperText Markup Language", "optionB": "CSS", "optionC": "TypeScript", "optionD": "JavaScript", "answer": "optionD" }, { "prompt": "CSS stands for?", "optionA": "Cascading Style Sheets", "optionB": "Cascading Sheet Styles", "optionC": "Colorful Style Sheets", "optionD": "Computer Style Sheets", "answer": "optionA" }, { "prompt": "Which HTML element is used for the largest heading?", "optionA": "<h1>", "optionB": "<h2>", "optionC": "<h3>", "optionD": "<h4>", "answer": "optionA" }, { "prompt": "Which symbol is used to select classes in CSS?", "optionA": "#", "optionB": ".", "optionC": "*", "optionD": "&", "answer": "optionB" } ]