question option added

Rakibhasaniu · Oct 12, 2022 · c337c3b · c337c3b
1 parent 09ead99
commit c337c3b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 28 deletions.
diff --git a/src/App.js b/src/App.js
@@ -12,7 +12,7 @@ const router = createBrowserRouter([
   {
     path:'/',
     errorElement: <ErrorPage></ErrorPage>,
-    loader: () => fetch('https://openapi.programming-hero.com/api/quiz'),
+    loader: async () => await fetch('https://openapi.programming-hero.com/api/quiz'),
     element:<Main></Main>,
     children: [
       {
@@ -33,7 +33,7 @@ const router = createBrowserRouter([
       },
       {
         path:'/quiz/:id',
-        loader: async({params}) => fetch(`https://openapi.programming-hero.com/api/quiz/${params.id}`),
+        loader: async({params}) => await fetch(`https://openapi.programming-hero.com/api/quiz/${params.id}`),
         element: <Topics></Topics>
       }
 

diff --git a/src/components/Quiz/Quiz.js b/src/components/Quiz/Quiz.js
@@ -1,31 +1,33 @@
-import React from 'react';
+import React, { useState } from "react";
 
+const Quiz = ({ quiz }) => {
+
+  const { options, question,correctAnswer } = quiz;
+  console.log(quiz);
+  const[correct, setCorrect] = useState(false);
 
+  const handleQuiz = (answer, correctAns) => { 
+    if(answer == correctAns){
+      alert("Your answer is true")
+    }
+    else{
+      alert("your answer is false")
+    }
 
-const Quiz = ({quiz}) => {
-    // console.log(quiz);
-    // const{question,options} = quiz;
-    // const allOption = quiz.options;
-    // // const allOption = quiz[0];
-    // // const {option} = allOption;
-    // console.log(allOption);
-    const{options, question} = quiz;
+   }
 
-
-    return (
-        <div>
-
-           <div>
-           {
-            <h1>Quiz: {question}</h1>
-           }
-           {
-            options.map(option => <p>{option}</p>)
-           }
-           </div>
-
-        </div>
-    );
+  return (
+    <div>
+      <div>
+        {<h1>Quiz: {question}</h1>}
+        {options.map((option, i) => (
+          <div className="py-2 bg-gray-400 my-4 ">
+            {i}.<button onClick={()=>handleQuiz(option, correctAnswer)}>{option}</button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
 };
 
-export default Quiz;
+export default Quiz;
diff --git a/src/components/Topics/Topics.js b/src/components/Topics/Topics.js
@@ -9,7 +9,7 @@ const Topics = () => {
     const {data} = allData;
 
      const quizs = data.questions;
-    //  console.log(quiz);
+     console.log(quizs);
 
 
     return (