Added Question bar

reactjs-interview-questions/quiz-app/src/App.css

@@ -36,7 +36,7 @@ button {
   /* border: 1px solid grey; */
 }
 
-button:hover {
+button:hover, .active {
   background-color: green;
   color: white;
 }
@@ -71,3 +71,7 @@ button:hover {
 .results li[data-correct="false"] {
   color: red;
 }
+
+.questionNumber{
+  margin: 5px 5px;
+}

reactjs-interview-questions/quiz-app/src/App.jsx

@@ -1,34 +1,52 @@
-import {useState} from "react";
+import { useState } from "react";
 import "./App.css";
 import questions from "./constants/questions.json";
 import Question from "./components/question";
 import Result from "./components/result";
+import QuestionNumber from "./components/QuestionNumber";
 
 function App() {
   const [currentQuestion, setCurrentQuestion] = useState(0);
   const [userAnswers, setUserAnswers] = useState([]);
+  const [activeQuestion, setActiveQuestion] = useState(0);
 
   // Keep all of the logic in App.jsx
 
-  const handleNextQuestion = (isCorrect) => {
-    setCurrentQuestion(currentQuestion + 1);
-    setUserAnswers([...userAnswers, isCorrect]);
+  const handleNextQuestion = (newQues) => {
+    setCurrentQuestion(parseInt(currentQuestion) + 1);
+    setActiveQuestion(parseInt(currentQuestion) + 1);
+    setUserAnswers([...userAnswers, newQues]);
   };
 
   const resetQuiz = () => {
     setCurrentQuestion(0);
     setUserAnswers([]);
+    setActiveQuestion(0);
   };
 
+  const onClickQuestion = (index) => {
+    setActiveQuestion(parseInt(index));
+    setCurrentQuestion(parseInt(index));
+  };
   return (
     <div className="App">
       <h1>World Quiz</h1>
 
+      {/* Questions Marking */}
+      {currentQuestion < questions.length && (
+        <QuestionNumber
+          questions={questions}
+          activeQuestion={activeQuestion}
+          onClickQuestion={onClickQuestion}
+        />
+      )}
+
       {/* Questions Component */}
       {currentQuestion < questions.length && (
         <Question
           question={questions[currentQuestion]}
           onAnswerClick={handleNextQuestion}
+          userAnswers={userAnswers}
         />
       )}
 

reactjs-interview-questions/quiz-app/src/components/QuestionNumber.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+const QuestionNumber = ({
+  questions,
+  activeQuestion,
+  onClickQuestion = () => {},
+}) => {
+  return questions.map((q, index) => (
+    <button
+      className={
+        activeQuestion == index ? "active questionNumber" : "questionNumber"
+      }
+      value={index}
+      key={index}
+      onClick={(event) => onClickQuestion(event.target.value)}
+    >
+      {index + 1}
+    </button>
+  ));
+};
+
+export default QuestionNumber;

reactjs-interview-questions/quiz-app/src/components/question.jsx

@@ -1,14 +1,22 @@
 /* eslint-disable react/prop-types */
 
-const Question = ({question, onAnswerClick = () => {}}) => {
+const Question = ({ question, onAnswerClick = () => {} }) => {
   return (
     <div className="question">
       <h2>{question.question}</h2>
       <ul className="options">
         {question.answerOptions.map((option) => {
           return (
             <li key={option.text}>
-              <button onClick={() => onAnswerClick(option.isCorrect)}>
+              <button
+                onClick={() =>
+                  onAnswerClick({
+                    question: question.question,
+                    answer: option.text,
+                    isCorrect: option.isCorrect,
+                  })
+                }
+              >
                 {option.text}
               </button>
             </li>

reactjs-interview-questions/quiz-app/src/components/result.jsx

@@ -1,7 +1,9 @@
 /* eslint-disable react/prop-types */
 
-const Result = ({userAnswers, questions, resetQuiz = () => {}}) => {
-  const correctAnswers = userAnswers.filter((answer) => answer).length;
+const Result = ({ userAnswers, questions, resetQuiz = () => {} }) => {
+  const correctAnswers = userAnswers.filter(
+    (answer) => answer.isCorrect
+  ).length;
 
   return (
     <div className="results">
@@ -13,10 +15,15 @@ const Result = ({userAnswers, questions, resetQuiz = () => {}}) => {
       <ul>
         {questions.map((question, index) => {
           return (
-            <li key={index} data-correct={userAnswers[index]}>
+            <li
+              key={index}
+              data-correct={userAnswers
+                .filter((q) => q.question === question.question)
+                .map((m) => m.isCorrect)}
+            >
               Q{index + 1}. {question.question}
               <b>
-                {userAnswers[index]
+                {userAnswers[index].isCorrect
                   ? ""
                   : `- ${
                       question.answerOptions.find((ans) => ans.isCorrect).text