React Quiz Project

App.jsx

import { BrowserRouter, Route, Routes } from 'react-router-dom'
import './App.css'
import User from './components/User'
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={<User />} />
            <Route path='/questions' element={<Questions />} />
            <Route path='/result' element={<Result />} /> 
        </Routes>
        </quizContext.Provider>
      </BrowserRouter>
    </div>
  )
}

export default App

User.jsx

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

function User() {
    const navigate = useNavigate();
    const { user, setUser } = useContext(quizContext);

    function start() {
        if (user) {
            navigate("/questions")
        } else {
            alert("Please enter valid input");
        }
    }
    return (
        <div className="user">
            <h1 className="head">Quiz App</h1>
            <input type="text" className="form-control" placeholder='Enter userName' onChange={(e) => setUser(e.target.value)} />
            <button className="user-btn" onClick={start}>Start Quiz</button>
        </div>
    )
}

export default User

Questions.jsx

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


function Questions() {
  const { score, setScore } = useContext(quizContext);
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [optionChoosen, setOptionChoosen] = useState("");

  const navigation = useNavigate();

  function next() {
    if (optionChoosen === quiz[currentQuestion].answer) {
      setScore(score + 1);
    }
    setCurrentQuestion(currentQuestion + 1);


  }

  function finish() {
     if (optionChoosen === quiz[currentQuestion].answer) {
      setScore(score + 1);
    }
    navigation("/result");
  }
  return (
    <div className='quiz'>
      <h1 className="question">{quiz[currentQuestion].prompt}</h1>
      <button className='quesBtn' onClick={() => setOptionChoosen("optionA")}>{quiz[currentQuestion].optionA}</button>
      <button className='quesBtn' onClick={() => setOptionChoosen("optionB")}>{quiz[currentQuestion].optionB}</button>
      <button className='quesBtn' onClick={() => setOptionChoosen("optionC")}>{quiz[currentQuestion].optionC}</button>
      <button className='quesBtn' onClick={() => setOptionChoosen("optionD")}>{quiz[currentQuestion].optionD}</button>
      {
        currentQuestion == quiz.length - 1 ? <button className='nextBtn' onClick={finish}>Finish</button> : <button className='nextBtn' onClick={next}>Next</button>
      }

    </div>
  )
}

export default Questions

Result.jsx

import React, { useContext } from 'react'
import { quizContext } from '../App';
import Questions from './Questions';
import { useNavigate } from 'react-router-dom';


function Result() {
  const { user, score } = useContext(quizContext);
  const navigation = useNavigate();

  function reset() {
    navigation("/");
    window.location.reload();
  }

  return (
    <div className='result'>
      <h1 className='headRes'>Quiz Result</h1>
      <p className='resultSco'>{user}, your score is: {score}</p>
      <p className='resultSco'>Thank you for participating!</p>
      <button className='resBtn' onClick={reset}>Play Again</button>
    </div>
  )
}

export default Result

App.css

/* userCss */

.user{
  height: 100vh;
  width: 100%;
  background-image: url("https://t4.ftcdn.net/jpg/03/45/88/07/360_F_345880772_zIT2mkdCzTthplO7xqaGGrMspN0jw0ll.jpg");
  background-size: cover;
  background-position: center;
}
.form-control{
  padding: 10px;
  border-radius: 5px;
  border: none;


}
.user-btn{
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  background-color: #c6c6d8;

}
.head{

  color: rgb(245, 239, 239);
  font-size: 50px;
  margin-right: 20px;
  padding-top: 200px;

}

/* questionCss */

.quiz{
  height: 100vh;
  width: 100%;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgt3hNmO2Q_xmX2Nll5Zj9xtcOgB3oXMjKyE7-xT5LqL4ng2zNanS4wFmm&s=10");
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  margin:0;


}

.question{
  color: rgba(15, 14, 14, 0.973);
  font-size: 30px;
  /* border: 2px solid black; */
  padding: 10px;
  margin: 10px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.863);
  margin-bottom: 100px;

}

.quesBtn{
  margin: 20px;
  padding: 15px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  background-color: #c6c6d8;
}

.quesBtn:hover{
  background-color: #80808f;
  color: white;
}

.nextBtn{
  width: 120px;
  margin: 20px;
  padding: 15px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  background-color: #0808e9;
  margin-left: 1000px;
  color: white;

} 

/* resultCss */

.result{
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin:0;
  background-color: rgba(10, 165, 226, 0.863);

}

.headRes{
  color: rgba(15, 14, 14, 0.973);
  font-size: 50px;
  margin-top: 100px;
  margin-bottom: 100px;
}

.resultSco{
  color: rgba(15, 14, 14, 0.973);
  font-size: 30px;
  margin-bottom: 100px;
}

.resBtn{
  width: 120px;
  margin: 20px;
  padding: 15px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  background-color: #0808e9;
  margin-left: 500px;
  color: white;
}

Output: