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/
