From adae09398df92945685bb19a820cb0a80c6f4c14 Mon Sep 17 00:00:00 2001
From: kamadi2000 <kmaliyanage@gmail.com>
Date: Wed, 18 Oct 2023 16:10:18 +0530
Subject: [PATCH] questions display in practice quiz page

---
 webapp/src/components/QuestionComponent.js | 15 +++++-----
 webapp/src/views/Exam.js                   | 34 ++++++++++++++++++----
 2 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/webapp/src/components/QuestionComponent.js b/webapp/src/components/QuestionComponent.js
index 6650839..a251b6a 100644
--- a/webapp/src/components/QuestionComponent.js
+++ b/webapp/src/components/QuestionComponent.js
@@ -1,15 +1,16 @@
 import React from 'react'
 
-function QuestionComponent({id}) {
-  const mcq = {
-    ques:"1. What does a circular road sign with a red border and a white center indicate?",
-    ans:["Yield to oncoming traffic", "No entry","Give way to pedestrians","Speed limit ahead"]
-  }
+function QuestionComponent({id , mcq}) {
+  // const mcq = {
+  //   ques:"1. What does a circular road sign with a red border and a white center indicate?",
+  //   ans:["Yield to oncoming traffic", "No entry","Give way to pedestrians","Speed limit ahead"]
+  // }
   return (
     <div className=' mb-3'>
-      <h6 className=' p-0 m-0'>{mcq.ques}</h6>
+      <h6 className=' p-0 m-0'>{mcq.question}</h6>
+      {/* <h6 className=' p-0 m-0'>{mcq}</h6> */}
       <ul style={{padding:'0',margin:'0',marginLeft:'5px'}}>
-        {mcq.ans.map((ans,index) => 
+        {mcq.options.map((ans,index) => 
         <li style={{listStyleType:'none'}} >
           <input className="form-check-input me-2" type="radio" name={id} id={id}/>
           <label className="form-check-label" htmlFor={id}>
diff --git a/webapp/src/views/Exam.js b/webapp/src/views/Exam.js
index 888a0b8..7c36037 100644
--- a/webapp/src/views/Exam.js
+++ b/webapp/src/views/Exam.js
@@ -1,8 +1,27 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import FrameComponent from '../components/FrameComponent'
 import QuestionComponent from '../components/QuestionComponent'
+import axios from 'axios'
 
 function Exam() {
+    const [question, setQuestion] = useState([])
+    useEffect(()=>{
+        axios.defaults.withCredentials = true
+        axios.get('http://localhost:5000/api/material/getQuestions')
+            .then(response => {
+                // Handle the successful response here
+                setQuestion(response.data)
+                console.log(response.data)
+                
+    
+                
+            })
+            .catch(error => {
+                console.log(error)
+    
+    
+            })
+      },[])
   return (
     <FrameComponent>
         <div className='container min-vh-100 rounded-1 mb-1 mb-md-2 mb-lg-3 mt-1 mt-md-2 mt-lg-3 col-11 col-md-10 col-lg-10 mx-auto' >
@@ -25,16 +44,19 @@ function Exam() {
                         </div>
                         <div>
                             <hr/>
-                            <QuestionComponent id={1} />
-                            <QuestionComponent id={2} />
+                            {question.map((mcq, index) => (
+                                <QuestionComponent id={index} mcq = {mcq} />
+                            ))}
+                            
+                            {/* <QuestionComponent id={2} />
                             <QuestionComponent id={3} />
                             <QuestionComponent id={4} />
                             <QuestionComponent id={5} />
-                            <QuestionComponent id={6} />
-                            <QuestionComponent id={7} />
+                            <QuestionComponent id={6} /> */}
+                            {/* <QuestionComponent id={7} />
                             <QuestionComponent id={8} />
                             <QuestionComponent id={9} />
-                            <QuestionComponent id={10} />
+                            <QuestionComponent id={10} /> */}
                         </div>
                     </div>
                 </div>