added question iteration.

src/App.tsx

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

src/Header/Header.tsx

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

src/QuestionDisplay/QuestionDisplay.tsx

@@ -1,16 +1,26 @@
-import { getQuizQuestions } from "../getQuizQuestions/getQuizQuestions";
+import { getQuizQuestions, Answer, Question } from "../getQuizQuestions/getQuizQuestions";
+import { Quiz } from "../Quiz/Quiz";
 
-export function QuestionDisplay() {
-    const questions = getQuizQuestions();
+interface QuestionDisplayProp{
+    question: Question;
+}
 
-    const question = questions[Math.floor(Math.random() * questions.length)];
+export function QuestionDisplay(props: QuestionDisplayProp) {
+    // const questions = getQuizQuestions();
+
+    // const question = questions[Math.floor(Math.random() * questions.length)];
+
+    // function updateCurrentIndex() {
+    //     setCurrentIndex(currentIndex + 1);
+    // }
 
     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/>
+            {/* <button type="submit" className="submit-answer" onClick={() => updateCurrentIndex() }>Submit</button> */}
         </div>
 
     )

src/Quiz/Quiz.tsx

@@ -1,7 +1,35 @@
 import { QuestionDisplay } from "../QuestionDisplay/QuestionDisplay"
+import { getQuizQuestions } from "../getQuizQuestions/getQuizQuestions"
+import { useState, useEffect } from "react";
+
 
 export function Quiz () {
+    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]);
+
+
+    let lastQuestion = false;
+
+    function updateCurrentIndex() {
+        if (currentIndex < listOfQuestions.length-1) {
+            setCurrentIndex(currentIndex + 1);
+        }
+    }
+
     return (
-        <QuestionDisplay/>
+        <div>
+            <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>
 }