Merge pull request #20 from techswitch-learners/mm-307-question-itera…

…tion

added question iteration.

src/App.tsx

@@ -18,7 +18,7 @@ function App() {
           <Route path='/quiz'
             element={<Quiz username={username}/>} />
         </Routes>
-        <Footer />
+        <Footer/>
       </Router>
     </div>
   );

src/Header/Header.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Hamburger from '../Hamburgerbutton/Hamburgerbutton';
 import './Header.scss'
 
-const logo = require('../ImageAssets/marsiokartlogo.jpg')
+const logo = require('../ImageAssets/marsiokartlogo.png')
 
 const Header: React.FC = () => {
 

src/QuestionDisplay/QuestionDisplay.tsx

@@ -1,16 +1,17 @@
-import { getQuizQuestions } from "../getQuizQuestions/getQuizQuestions";
+import { Question } from "../getQuizQuestions/getQuizQuestions";
 
-export function QuestionDisplay() {
-    const questions = getQuizQuestions();
+interface QuestionDisplayProp{
+    question: Question;
+}
 
-    const question = questions[Math.floor(Math.random() * questions.length)];
+export function QuestionDisplay(props: QuestionDisplayProp) {
 
     return (
         <div>
-            {question.question} <br/>
-            <input type="radio" name="answer" id="radio-button1" value="0" /> {question.answers[0].answer} <br/>
-            <input type="radio" name="answer" id="radio-button2" value="1" /> {question.answers[1].answer} <br/>
-            <input type="radio" name="answer" id="radio-button3" value="2" /> {question.answers[2].answer} <br/>
+            {props.question.question} <br/>
+            <input type="radio" name="answer" id="radio-button1" value="0" /> {props.question.answers[0].answer} <br/>
+            <input type="radio" name="answer" id="radio-button2" value="1" /> {props.question.answers[1].answer} <br/>
+            <input type="radio" name="answer" id="radio-button3" value="2" /> {props.question.answers[2].answer} <br/>
         </div>
 
     )

src/Quiz/Quiz.tsx

@@ -1,14 +1,36 @@
 import { QuestionDisplay } from "../QuestionDisplay/QuestionDisplay"
+import { getQuizQuestions } from "../getQuizQuestions/getQuizQuestions"
+import { useState, useEffect } from "react";
 
 interface QuizProps{
     username:string;
 }
 
 export function Quiz (props:QuizProps) {
+    const listOfQuestions = getQuizQuestions();
+
+    const [currentIndex, setCurrentIndex] = useState<number>(0);
+    const [buttonText, setButtonText] = useState<string>("Next");
+
+    const question = listOfQuestions[currentIndex]
+
+    useEffect(() => {
+        if (currentIndex === listOfQuestions.length-1) {
+            setButtonText("Finish")
+        }
+    }, [currentIndex, listOfQuestions.length]);
+
+    function updateCurrentIndex() {
+        if (currentIndex < listOfQuestions.length-1) {
+            setCurrentIndex(currentIndex + 1);
+        }
+    }
+
     return (
         <div>
             User : {props.username}
-            <QuestionDisplay/>
+            <QuestionDisplay question={question}/>
+            <button type="submit" className="quiz-button" onClick={() => updateCurrentIndex()}>{buttonText}</button>
         </div>
     )
 }

src/getQuizQuestions/getQuizQuestions.tsx

@@ -1,9 +1,9 @@
-type Answer = {
+export type Answer = {
     answer: string,
     isCorrect: boolean
 }
 
-type Question = {
+export type Question = {
     question: string,
     answers: Array<Answer>
 }