From 3295c36984a20d813babb7e661d3e5152f015547 Mon Sep 17 00:00:00 2001
From: pravar1919 <pravar.sharma@gmail.com>
Date: Sun, 10 Mar 2024 17:21:11 +0530
Subject: [PATCH 1/2] added question number bar

---
 .../quiz-app/src/App.css                      |  6 ++++-
 .../quiz-app/src/App.jsx                      | 20 ++++++++++++++++-
 .../src/components/QuestionNumber.jsx         | 22 +++++++++++++++++++
 .../quiz-app/src/components/question.jsx      |  2 +-
 .../quiz-app/src/components/result.jsx        |  2 +-
 5 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 reactjs-interview-questions/quiz-app/src/components/QuestionNumber.jsx

diff --git a/reactjs-interview-questions/quiz-app/src/App.css b/reactjs-interview-questions/quiz-app/src/App.css
index dcc08d9..297fda1 100644
--- a/reactjs-interview-questions/quiz-app/src/App.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/reactjs-interview-questions/quiz-app/src/App.jsx b/reactjs-interview-questions/quiz-app/src/App.jsx
index 61ee70b..ed6f611 100644
--- a/reactjs-interview-questions/quiz-app/src/App.jsx
+++ b/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);
+    setActiveQuestion(currentQuestion + 1);
     setUserAnswers([...userAnswers, isCorrect]);
   };
 
   const resetQuiz = () => {
     setCurrentQuestion(0);
     setUserAnswers([]);
+    setActiveQuestion(0);
   };
 
+  const onClickQuestion = (index) => {
+    setActiveQuestion(index);
+    setCurrentQuestion(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}
         />
       )}
 
diff --git a/reactjs-interview-questions/quiz-app/src/components/QuestionNumber.jsx b/reactjs-interview-questions/quiz-app/src/components/QuestionNumber.jsx
new file mode 100644
index 0000000..2c10af1
--- /dev/null
+++ b/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;
diff --git a/reactjs-interview-questions/quiz-app/src/components/question.jsx b/reactjs-interview-questions/quiz-app/src/components/question.jsx
index 71f57cd..cd04828 100644
--- a/reactjs-interview-questions/quiz-app/src/components/question.jsx
+++ b/reactjs-interview-questions/quiz-app/src/components/question.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 
-const Question = ({question, onAnswerClick = () => {}}) => {
+const Question = ({ question, onAnswerClick = () => {} }) => {
   return (
     <div className="question">
       <h2>{question.question}</h2>
diff --git a/reactjs-interview-questions/quiz-app/src/components/result.jsx b/reactjs-interview-questions/quiz-app/src/components/result.jsx
index c6dbf63..9be4ab8 100644
--- a/reactjs-interview-questions/quiz-app/src/components/result.jsx
+++ b/reactjs-interview-questions/quiz-app/src/components/result.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 
-const Result = ({userAnswers, questions, resetQuiz = () => {}}) => {
+const Result = ({ userAnswers, questions, resetQuiz = () => {} }) => {
   const correctAnswers = userAnswers.filter((answer) => answer).length;
 
   return (

From 0fc0352622dc084e4dbf0a9bd3eb6511531b0dc3 Mon Sep 17 00:00:00 2001
From: pravar1919 <pravar.sharma@gmail.com>
Date: Sun, 10 Mar 2024 19:02:20 +0530
Subject: [PATCH 2/2] fixed bug

---
 reactjs-interview-questions/quiz-app/src/App.jsx    | 12 ++++++------
 .../quiz-app/src/components/question.jsx            | 10 +++++++++-
 .../quiz-app/src/components/result.jsx              | 13 ++++++++++---
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/reactjs-interview-questions/quiz-app/src/App.jsx b/reactjs-interview-questions/quiz-app/src/App.jsx
index ed6f611..27b7f33 100644
--- a/reactjs-interview-questions/quiz-app/src/App.jsx
+++ b/reactjs-interview-questions/quiz-app/src/App.jsx
@@ -12,10 +12,10 @@ function App() {
 
   // Keep all of the logic in App.jsx
 
-  const handleNextQuestion = (isCorrect) => {
-    setCurrentQuestion(currentQuestion + 1);
-    setActiveQuestion(currentQuestion + 1);
-    setUserAnswers([...userAnswers, isCorrect]);
+  const handleNextQuestion = (newQues) => {
+    setCurrentQuestion(parseInt(currentQuestion) + 1);
+    setActiveQuestion(parseInt(currentQuestion) + 1);
+    setUserAnswers([...userAnswers, newQues]);
   };
 
   const resetQuiz = () => {
@@ -25,8 +25,8 @@ function App() {
   };
 
   const onClickQuestion = (index) => {
-    setActiveQuestion(index);
-    setCurrentQuestion(index);
+    setActiveQuestion(parseInt(index));
+    setCurrentQuestion(parseInt(index));
   };
   return (
     <div className="App">
diff --git a/reactjs-interview-questions/quiz-app/src/components/question.jsx b/reactjs-interview-questions/quiz-app/src/components/question.jsx
index cd04828..71ee147 100644
--- a/reactjs-interview-questions/quiz-app/src/components/question.jsx
+++ b/reactjs-interview-questions/quiz-app/src/components/question.jsx
@@ -8,7 +8,15 @@ const Question = ({ question, onAnswerClick = () => {} }) => {
         {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>
diff --git a/reactjs-interview-questions/quiz-app/src/components/result.jsx b/reactjs-interview-questions/quiz-app/src/components/result.jsx
index 9be4ab8..9b11f2c 100644
--- a/reactjs-interview-questions/quiz-app/src/components/result.jsx
+++ b/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 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