Main

src/App.js

@@ -4,19 +4,22 @@ import Navbar from "./Components/Navbar"
 import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
 
 import './App.css';
+import Quiz from "./Components/Quiz";
 
 function App() {
   return (
-    
+
    <Router>
     <Routes>
-    <Route path="/" element={<Navbar/>}></Route>
-      <Route exact path="/" element={<Login/>} ></Route>
+      <Route path="/" element={<Navbar/>}></Route>
+      <Route exact path="/login" element={<Login/>} ></Route>
       <Route exact path="/SignUp" element={<Signup/>}></Route>
-
+      <Route exact path="/Quiz" element={<Quiz/>} ></Route>
+
     </Routes>
    </Router>
 
+
 
   );
 }

src/Components/Navbar.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import  capLogo  from './Images/logo.svg'
 import rightimg from './Images/Right-img.svg'
+import {Link} from 'react-router-dom';
+
 const menuLinks = [
   { name: "How it works", link: "#works" },
   { name: "Features", link: "#features" },
@@ -53,7 +55,7 @@ const Navbar = () => {
 
           </div>
     </div>
-
+    <Link to="/login">Go to Login</Link>
     </div>
   </>
   );

src/Components/Quiz.jsx

@@ -0,0 +1,95 @@
+import { useState } from 'react'
+import { quiz } from './quetions'
+import './quiz.css'
+
+const Quiz = () => {
+  const [activeQuestion, setActiveQuestion] = useState(0)
+  const [selectedAnswer, setSelectedAnswer] = useState('')
+  const [showResult, setShowResult] = useState(false)
+  const [selectedAnswerIndex, setSelectedAnswerIndex] = useState(null)
+  const [result, setResult] = useState({
+    score: 0,
+    correctAnswers: 0,
+    wrongAnswers: 0,
+  })
+
+  const { questions } = quiz
+  const { question, choices, correctAnswer } = questions[activeQuestion]
+
+  const onClickNext = () => {
+    setSelectedAnswerIndex(null)
+    setResult((prev) =>
+      selectedAnswer
+        ? {
+            ...prev,
+            score: prev.score + 5,
+            correctAnswers: prev.correctAnswers + 1,
+          }
+        : { ...prev, wrongAnswers: prev.wrongAnswers + 1 }
+    )
+    if (activeQuestion !== questions.length - 1) {
+      setActiveQuestion((prev) => prev + 1)
+    } else {
+      setActiveQuestion(0)
+      setShowResult(true)
+    }
+  }
+
+  const onAnswerSelected = (answer, index) => {
+    setSelectedAnswerIndex(index)
+    if (answer === correctAnswer) {
+      setSelectedAnswer(true)
+    } else {
+      setSelectedAnswer(false)
+    }
+  }
+
+  const addLeadingZero = (number) => (number > 9 ? number : `0${number}`)
+
+  return (
+    <div className="quiz-container">
+      {!showResult ? (
+        <div>
+          <div>
+            <span className="active-question-no">{addLeadingZero(activeQuestion + 1)}</span>
+            <span className="total-question">/{addLeadingZero(questions.length)}</span>
+          </div>
+          <h2>{question}</h2>
+          <ul>
+            {choices.map((answer, index) => (
+              <li
+                onClick={() => onAnswerSelected(answer, index)}
+                key={answer}
+                className={selectedAnswerIndex === index ? 'selected-answer' : null}>
+                {answer}
+              </li>
+            ))}
+          </ul>
+          <div className="flex-right">
+            <button onClick={onClickNext} disabled={selectedAnswerIndex === null}>
+              {activeQuestion === questions.length - 1 ? 'Finish' : 'Next'}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="result">
+          <h3>Result</h3>
+          <p>
+            Total Question: <span>{questions.length}</span>
+          </p>
+          <p>
+            Total Score:<span> {result.score}</span>
+          </p>
+          <p>
+            Correct Answers:<span> {result.correctAnswers}</span>
+          </p>
+          <p>
+            Wrong Answers:<span> {result.wrongAnswers}</span>
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Quiz

src/Components/login.jsx

@@ -120,9 +120,13 @@ export default function Login() {
               <Link className='link' to='/SignUp'>
                 SignUp
               </Link>
+
             </button>
+
           </div>
-
+          <Link className='Quiz' to='/Quiz'>
+                Quiz
+              </Link>
           <div className='another-Login'>
             <p> Or Login with </p>
             <p className='same-lo'>Google</p>

src/Components/quetions.jsx

@@ -0,0 +1,33 @@
+export const quiz = {
+    topic: 'Javascript',
+    level: 'Beginner',
+    totalQuestions: 4,
+    perQuestionScore: 5,
+    questions: [
+      {
+        question: 'Which function is used to serialize an object into a JSON string in Javascript?',
+        choices: ['stringify()', 'parse()', 'convert()', 'None of the above'],
+        type: 'MCQs',
+        correctAnswer: 'stringify()',
+      },
+      {
+        question: 'Which of the following keywords is used to define a variable in Javascript?',
+        choices: ['var', 'let', 'var and let', 'None of the above'],
+        type: 'MCQs',
+        correctAnswer: 'var and let',
+      },
+      {
+        question:
+          'Which of the following methods can be used to display data in some form using Javascript?',
+        choices: ['document.write()', 'console.log()', 'window.alert', 'All of the above'],
+        type: 'MCQs',
+        correctAnswer: 'All of the above',
+      },
+      {
+        question: 'How can a datatype be declared to be a constant type?',
+        choices: ['const', 'var', 'let', 'constant'],
+        type: 'MCQs',
+        correctAnswer: 'const',
+      },
+    ],
+  }

src/Components/quiz.css

@@ -0,0 +1,100 @@
+/* @import url('https://fonts.googleapis.com/css2?family=Anek+Malayalam:wght@100;200;300;400;500;600;700;800&display=swap');
+
+body {
+  font-family: 'Anek Malayalam', sans-serif;
+  background: linear-gradient(90.04deg, #800080 0.03%, #ffc0cb 99.96%);
+  color: #11052c;
+  display: flex;
+  justify-content: center;
+  margin: 0;
+  padding: 0 30px;
+}
+
+.quiz-container {
+  max-width: 500px;
+  min-width: 250px;
+  background: #ffffff;
+  border-radius: 4px;
+  margin-top: 100px;
+  padding: 30px 60px;
+}
+
+.quiz-container .active-question-no {
+  font-size: 32px;
+  font-weight: 500;
+  color: #800080;
+}
+
+.quiz-container .total-question {
+  font-size: 16px;
+  font-weight: 500;
+  color: #e0dee3;
+}
+
+.quiz-container h2 {
+  font-size: 20px;
+  font-weight: 500;
+  margin: 0;
+}
+
+.quiz-container ul {
+  margin-top: 20px;
+  margin-left: -40px;
+}
+
+.quiz-container ul li {
+  text-decoration: none;
+  list-style: none;
+  color: #2d264b;
+  font-size: 16px;
+  background: #ffffff;
+  border: 1px solid #eaeaea;
+  border-radius: 16px;
+  padding: 11px;
+  margin-top: 15px;
+  cursor: pointer;
+}
+
+.quiz-container ul .selected-answer {
+  background: #ffd6ff;
+  border: 1px solid #800080;
+}
+
+.quiz-container button {
+  background: linear-gradient(90.04deg, #800080 0.03%, #ffc0cb 99.96%);
+  border-radius: 9px;
+  font-size: 18px;
+  color: #ffffff;
+  padding: 10px 42px;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  margin-top: 15px;
+}
+
+.quiz-container button:disabled {
+  background: #e7e8e9;
+  color: #9fa3a9;
+  cursor: not-allowed;
+}
+
+.flex-right {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.result h3 {
+  font-size: 24px;
+  letter-spacing: 1.4px;
+  text-align: center;
+}
+
+.result p {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.result p span {
+  color: #800080;
+  font-size: 22px;
+} */