React JS Quiz

React JS Quiz

React JS

https://create-react-app.dev/

Create Project

C:\react-js>npx create-react-app myreactdev

Run

C:\react-js\myreactdev> npm start

C:\react-js\myreactdev\src\App.js

//C:\react-js\myreactdev\src\App.js
import React, { useState } from "react";
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from "./components/Home";
import Questions from "./components/Questions";
import "./index.css";
import Result from "./components/Result";
const App = () => {
  const [answer, setAnswer] = useState([]);
  return (
    <>
      <Router>
        <Routes>
            <Route exact path="/" element={<Home/>}/>
            <Route exact path="/questions" element={<Questions answer={answer} setAnswer={setAnswer}/>}/>
            <Route exact path="/solution" element={<Result answer={answer}/>}/>
          </Routes>
        </Router>
    </>
  );
};
 
export default App;

Install React Router Dom
https://www.npmjs.com/package/react-router-dom
C:\react-js\myreactdev>npm i react-router-dom --save

C:\react-js\myreactdev\src\components\Home.js

//C:\react-js\myreactdev\src\components\Home.js
import React from "react";
import { Link } from "react-router-dom";
 
const Home = () => {
  return (
    <div className="container welcome_box">
      <div className="row box">
        <p>Welcome to Quizzz</p>
        <Link to="/questions">
          <button className="btn btn-primary btn-block text-center">Start the Quiz</button>
        </Link>
      </div>
    </div>
  ); 
};
 
export default Home;

C:\react-js\myreactdev\src\components\Questions.js

//C:\react-js\myreactdev\src\components\Questions.js
import React, { useState } from "react";
import QuestionComp from "./QuestionComp";
import question from "./question";
import { Link } from "react-router-dom";
 
const Questions = ({ answer, setAnswer }) => {
  const [number, setNumber] = useState(0);
  const [show, setShow] = useState(true);
 
  const handleAnswer = (id, ans) => {
    let temp = [...answer]; 
    temp[id] = ans;
    setAnswer([...temp]);
  };
 
  const handleIncrement = () => {
    if (number === 4) {
      alert("This is a Last questions");
      setShow(false)
      return;
    }
    setNumber(number + 1);
  };
  const handleDecrement = () => {
    if (number === 0) return;
    setNumber(number - 1);
  };
 
  return (
    <div className="container mb-5">
      <div className="row"> 
        <div className="col-12"> 
          <QuestionComp question={question[number]} handleAnswer={handleAnswer} />
          <div className="buttons">
          <button class="btn btn-primary px-4 py-2 fw-bold" onClick={handleDecrement}> Prev</button>
          {show ? (
            <button class="btn btn-success px-4 py-2 fw-bold" onClick={handleIncrement}> Next</button>
          ) : (
            <Link to="/solution">
              <button class="btn btn-info px-4 py-2 fw-bold">Submit</button>
            </Link>
          )}
          </div>
        </div> 
      </div>
    </div>
  );
};
 
export default Questions;

C:\react-js\myreactdev\src\components\QuestionComp.js

//C:\react-js\myreactdev\src\components\QuestionComp.js
import React from "react";
 
const QuestionComp = ({ question, handleAnswer }) => {
  const { title, options, id } = question;
  return (
    <div className="question">
      <p className="fw-bold">Question No - {id + 1} / 5</p> 
      <p className="fw-bold">{title}</p> 
      <div> 
        <input type="radio" name="box" id="one" /> 
        <input type="radio" name="box" id="two" /> 
        <input type="radio" name="box" id="three" /> 
        <input type="radio" name="box" id="four" /> 
        <label htmlFor="one" className="box first" onClick={() => handleAnswer(id, 0)}> 
          <div className="course"> <span className="circle" /> <span className="subject"> {options[0]} </span> </div> 
        </label> 
        <label htmlFor="two" className="box second" onClick={() => handleAnswer(id, 1)}> 
          <div className="course"> <span className="circle" /> <span className="subject"> {options[1]} </span> </div> 
        </label> 
        <label htmlFor="three" className="box third" onClick={() => handleAnswer(id, 2)}> 
          <div className="course"> <span className="circle" /> <span className="subject"> {options[2]} </span> </div> 
        </label> 
        <label htmlFor="four" className="box forth" onClick={() => handleAnswer(id, 3)}> 
          <div className="course"> <span className="circle" /> <span className="subject"> {options[3]} </span> </div> 
        </label> 
      </div> 
    </div>
  );
};
 
export default QuestionComp;

C:\react-js\myreactdev\src\components\Result.js

//C:\react-js\myreactdev\src\components\Result.js
import React from "react";
import { Link } from "react-router-dom";
import question from "./question";
 
const Result = ({ answer }) => {
  function giveResult() {
    let cnt = 0;
    for (let i = 0; i < 5; i++) {
      if (answer[i] === question[i].ans) cnt++;
    }
    return cnt;
  }
 
  return (
    <div className="container welcome_box">
      <div className="row box">
        <h2>Congratulations </h2>
        <p>you Scored {giveResult()} / 5</p>
        <Link to="/">
          <button class="btn btn-success px-4 py-2 fw-bold">HOME</button>
        </Link>
      </div>
    </div>
  );
};
 
export default Result;

C:\react-js\myreactdev\src\components\question.js

//C:\react-js\myreactdev\src\components\question.js
const question = [
    {
      id: 0,
      title: "What is the correct command to create a new React project?",
      options: ["npx create-react-app", "npm create-react-app", "npm create-react-app myReactApp", "npx create-react-app myReactApp"],
      ans: 3,
    },
    {
      id: 1,
      title: "What does myReactApp refer to in the following command? npx create-react-app myReactApp",
      options: ["A reference to an existing app", "The type of app to create", "The directory to create the new app in", "The name you want to use for the new app"],
      ans: 3,
    },
    {
      id: 2,
      title: "What command is used to start the React local development server?",
      options: ["npm start", "npm run dev", "npm build", "npm serve"],
      ans: 0,
    },
    {
      id: 3,
      title: "What is the default local host port that a React development server uses?",
      options: ["3500", "3000  ", "8080", "5000"],
      ans: 1,
    },
    {
      id: 4,
      title: "Which keyword creates a constant in JavaScript?",
      options: ["constant", "const", "var", "let"],
      ans: 1,
    },
  ];
   
  export default question;

C:\react-js\myreactdev\src\index.css

//C:\react-js\myreactdev\src\index.css
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Roboto', sans-serif}
p{margin: 0%}
body{height: 100vh;background-color: bisque;padding: 10px}
 
.welcome_box {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.box {
  text-align: center;
  background-color: white;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.box p {
  font-size: 1.5rem;
  font-weight: bold;
  font-family: cursive;
  color: green;
}
.container{margin: 30px auto;background: white;padding: 20px 15px}
label.box{display: flex;margin-top: 10px;padding: 10px 12px;border-radius: 5px;cursor: pointer;border: 1px solid #ddd}
#one:checked~label.first, #two:checked~label.second, #three:checked~label.third, #four:checked~label.forth, #five:checked~label.fifth, #six:checked~label.sixth, #seven:checked~label.seveth, #eight:checked~label.eighth{border-color: #8e498e}
#one:checked~label.first .circle, #two:checked~label.second .circle, #three:checked~label.third .circle, #four:checked~label.forth .circle, #five:checked~label.fifth .circle, #six:checked~label.sixth .circle, #seven:checked~label.seveth .circle, #eight:checked~label.eighth .circle{border: 6px solid #8e498e;background-color: #fff}
label.box:hover{background: #d5bbf7}
label.box .course{display: flex;align-items: center;width: 100%}
label.box .circle{height: 22px;width: 22px;border-radius: 50%;margin-right: 15px;border: 2px solid #ddd;display: inline-block}
input[type="radio"]{display: none}
@media(max-width: 450px){
  .subject{font-size: 12px}
}
.buttons {
  display: flex;padding-top: 10px;padding-bottom: 10px;
  justify-content: space-between;
  width: 100%;
  border-radius: 10px;
}

react-js\myreactdev\public\index.html

//react-js\myreactdev\public\index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Run C:\react-j\myreactdev>npm start
http://localhost:3000/

Tutorial101

article

Wednesday, June 14, 2023

React JS Quiz

Related Post

Search This Blog

HOME

Category

Popular Posts