React Js Project : Quiz Management System. Understand Usecontext, Createcontext, Usestate.

Prerequisite:

1) Basic of javascript and react.js
2)  HTML and CSS

 

Components/Quiz.jsx

import React, { useContext, useState } from "react";
import {QuizContext} from "../context/QuizContext";

const Quiz = () => {
  const {initialState,currentQ,totalq,question,choices,correctAnswer,currentIndex,currentAnswer,resutCalculate,showResult,handleMultipleChoice,handleNext,tryAgain} = useContext(QuizContext);

  return (
    <div className="quiz-container">
      {!showResult ? (
        <>
          <span className="active-question">{currentQ + 1}</span>
          <span className="total-question">/{totalq}</span>
          <h2>{question}</h2>
          <ul>
            {choices.map((item, index) => (
              <li
                onClick={() => handleMultipleChoice(item, index)}
                className={index == currentIndex ? "selected-answer" : null}
              >
                {item}
              </li>
            ))}
          </ul>
          <div class="footer">
            <button
              disabled={currentIndex == null}
              onClick={() => handleNext()}
            >
              {currentQ == totalq - 1 ? "Finish" : "Next"}
            </button>
          </div>
        </>
      ) : (
        <div className="showResult">
          <h2>Result</h2>
          <p>
            Total Questions: <span>{totalq.length}</span>{" "}
          </p>
          <p>
            Total Score: <span>{resutCalculate.score}</span>{" "}
          </p>
          <p>
            Wrong Answers: <span>{resutCalculate.wrongAnswers}</span>{" "}
          </p>
          <p>
            Correct Answers: <span>{resutCalculate.correctAnswers}</span>{" "}
          </p>
          <button onClick={() => tryAgain()} className="try-again">
            Try Again
          </button>
        </div>
      )}
    </div>
  );
};

export default Quiz;

 

context / QuizContext.jsx

import { Children } from "react";
import { createContext, useState, useEffect } from "react";
import React from "react";
import { jsQuizz } from "../quiz";

export const QuizContext = createContext({});
const DataProvider = ({ children }) => {
  console.log("jsQuizz>>>",jsQuizz.questions)
  const [initialState, setInitialState] = useState({
    score: 0,
    wrongAnswers: 0,
    correctAnswers: 0,
  });

  const [currentQ, setCurrentQ] = useState(0);

  const { question, choices, correctAnswer } = jsQuizz.questions[currentQ];
  const[totalq,setTotalq]= useState(jsQuizz.questions.length)

  const [currentIndex, setCurrentIndex] = useState(null);
  const [currentAnswer, setCurrentAnswer] = useState(false);

  const [resutCalculate, setResutCalculate] = useState(initialState);
  const [showResult, setShowResult] = useState(false);

  const handleMultipleChoice = (answer, index) => {
    setCurrentIndex(index);

    if (answer == correctAnswer) {
      setCurrentAnswer(true);
    } else {
      setCurrentAnswer(false);
    }
  };

  const handleNext = () => {
    setCurrentIndex(null);

    setResutCalculate((prev) =>
      currentAnswer
        ? {
            ...prev,
            score: prev.score + 5,
            correctAnswers: prev.correctAnswers + 1,
          }
        : {
            ...prev,
            wrongAnswers: prev.wrongAnswers + 1,
          }
    );

    if (currentQ != jsQuizz.questions.length - 1) {
       ((prev) => prev + 1);
    } else {
      setCurrentQ(0);
      setShowResult(true);
    }
  };

  const tryAgain = () => {
    setCurrentQ(0);
    setShowResult(false);
    setResutCalculate(initialState);
  };


  return (
    <QuizContext.Provider
      value={{
        initialState,currentQ,totalq,question,choices,correctAnswer,currentIndex,currentAnswer,resutCalculate,showResult,handleMultipleChoice,handleNext,tryAgain
      }}
    >
      {children}
    </QuizContext.Provider>
  );
};
export default DataProvider;

 

index.scss

$accent: #d08642;
$bg: #ffffff;
$bg-accent: #e7e8e8;
$primary: #150080;
$disabled: #9c9c9c;
$foreground: #2d264b;

body
{
    font-family: monospace;
    background:linear-gradient(0deg, $primary 0.03%,$accent);
    color:$foreground;
    display:flex;
    justify-content: center;
    margin:0 auto;
    padding:0 30px;
    height: 100vh;  
}

.quiz-container
{
    background: $bg;
    width:500px;
    margin-top:100px;
    border-radius:4px;
    padding:30px 60px;
    box-sizing:border-box;

    .active-question{
        font-size:32px;
        font-weight: 500px;
        color:$primary
    }
    .total-question{
        font-size:16px;
        font-weight: 16px;
        color:$disabled;
       }
      h2{
        font-size:20px;
        font-weight: 500;
        margin:0;
      }
      ul{
        margin-top:30px;
        margin-left:-40px;

        li{
            text-decoration: none;
            list-style: none;
            color:$foreground;
            border-radius: 16px;
            background: $bg;
            border:1px solid $disabled;
            font-size:16px;
            padding:10px;
            margin-top:15px;
            cursor:pointer;
        }
        .selected-answer{
            background:$primary;
            color:$bg;
            border:1px solid $accent;
        }
      }

.footer{
    display:flex;
    justify-content:flex-end;

    button{
        border-radius: 10px;
        padding:10px 42px;
        font-size:19px;
        color:$bg;
        background:linear-gradient(0deg, $primary 0.03%,$accent);
        border:none;
        outline:none;
        cursor: pointer;
        &:disabled{
            background:$bg-accent;
            color:$disabled;
            cursor:not-allowed;
        }

    }

}
.showResult{
    text-align: center;
    h2{
        font-size:26px;
        letter-spacing: 1.4px;
    }
    p{
        font-size:16px;
        font-weight:500;
        span{
            color:$primary;
            font-size: 20px;
        }
    }
    .try-again{
        border-radius: 10px;
        padding:10px 42px;
        font-size:19px;
        color:$bg;
        background:linear-gradient(0deg, $primary 0.03%,$accent);
        border:none;
        outline:none;
        cursor: pointer;
    }

}
}

App.jsx

import Quiz from "./components/Quiz";
import { jsQuizz } from "./quiz";
import DataProvider from "./context/QuizContext";
function App() {
  return (
    <DataProvider>
      <Quiz />
    </DataProvider>
  );
}

export default App;