React Quiz App

Step 1: Create Context in App.jsx

App.jsx

import { BrowserRouter, Route, Routes } from 'react-router-dom'
import './App.css'
import Home from './components/Home'
import Questions from './components/Questions'
import Result from './components/Result'
import { createContext, useState } from 'react'

export const quizContext = createContext();

function App() {

  const [user, setUser] = useState("");
  const [score, setScore] = useState(0);

  return (
    <div>

      <BrowserRouter>

        <quizContext.Provider
          value={{ user, setUser, score, setScore }}
        >

          <Routes>
            <Route path='/' element={<Home />} />
            <Route path='/quiz' element={<Questions />} />
            <Route path='/result' element={<Result />} />
          </Routes>

        </quizContext.Provider>

      </BrowserRouter>

    </div>
  )
}

export default App

Step 2: Create Home Page

Home.jsx

import { useContext, useEffect, useRef } from "react";
import { quizContext } from "../App";
import { useNavigate } from "react-router-dom";

function Home() {

  const { user, setUser } = useContext(quizContext);

  const userRef = useRef();

  const navigate = useNavigate();

  useEffect(() => {
    userRef.current.focus();
  }, []);

  function startGame() {

    if (user) {
      navigate("/quiz");
    }
    else {
      alert("Enter user name to Start quiz");
    }

  }

  return (
    <div>

      <input
        ref={userRef}
        value={user}
        type="text"
        placeholder="Enter userName"
        onChange={(e) => setUser(e.target.value)}
      />

      <button onClick={startGame}>
        Start quiz
      </button>

    </div>
  );
}

export default Home;

Step 3: Create Questions Data

Create a JSON file for storing quiz questions.

questions.json

[
  {
    "prompt": "HTML stands for?",
    "optionA": "HyperText Markup Language",
    "optionB": "HyperText Mark Language",
    "optionC": "HyperText Markup Learn",
    "optionD": "Hyper Markup Language",
    "answer": "optionA"
  }
]

Step 4: Questions Component

import React, { useContext, useState } from 'react'
import questions from '../assets/questions.json'
import { quizContext } from '../App';
import { useNavigate } from 'react-router-dom';

function Questions() {
  const navigate = useNavigate()
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [optionChosen, setOptionChosen] = useState("");
  const { score, setScore } = useContext(quizContext);


  function nextQuestion() {

    if (optionChosen == questions[currentQuestion].answer) {
      setScore(score + 1)
    }
    setCurrentQuestion(currentQuestion + 1)
  }

  function finishQuestion() {
    if (optionChosen == questions[currentQuestion].answer) {
      setScore(score + 1)
    }
    navigate('/result')
  }

  return (
    <div>
      <h1>{questions[currentQuestion].prompt}</h1>
      {
        ['A', 'B', 'C', 'D'].map((v) => (
          <button onClick={() => setOptionChosen(`option${v}`)}>{questions[currentQuestion][`option${v}`]}</button>
        ))
      }
      {currentQuestion == questions.length - 1 ? <button onClick={finishQuestion}>Finish</button> : <button onClick={nextQuestion}>Next</button>}

    </div>
  )
}

export default Questions

Step 5: Result Page

The Result page displays the final score.

Result.jsx

import React, { useContext } from 'react'
import { quizContext } from '../App'

function Result() {

  const { user, score } = useContext(quizContext)

  return (
    <div>

      <h1>Result</h1>

      <h2>
        {user} Total Mark Scored is {score}/5
      </h2>

    </div>
  )
}

export default Result