✨ navigation between questions okaydokay

Co-authored-by: haraldnilsen <harald_998@hotmail.com>
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

frontend/src/routes/form/[slug]/+page.svelte

@@ -2,7 +2,6 @@
     import FormHeader from "../../../components/form/header/FormHeader.svelte";
     import AnswerBox from "../../../components/form/answerbox/AnswerBox.svelte";
 	import Footer from "../../../components/form/footer/Footer.svelte";
-
     import { onMount } from "svelte"
 
     export let data;
@@ -10,31 +9,36 @@
     let formQuestion: string = ""
     let questionAnswer1: string = ""
     let questionAnswer2: string = ""
+    let questionNumber: number = 0
 
-    onMount(async () => {
-        const questionNumber = data.slug
+    // Reactive statement to react on 'data.slug' changes
+    $: if (data && data.slug !== undefined) {
+        questionNumber = data.slug;
+        updateQuestionData();
+    }
+
+    // Refactored data updating logic into a function
+    function updateQuestionData() {
         let localstoragequestions = localStorage.getItem("userQuestions");
-	    if (localstoragequestions) {
-            let questions = JSON.parse(localstoragequestions).questions
-            console.log(questions)
-            formQuestion = questions[questionNumber].Question.QuestionText
-            questionAnswer1 = questions[questionNumber].Answers[0].AnswerText
-            questionAnswer2 = questions[questionNumber].Answers[1].AnswerText
-            console.log(formQuestion)
-            console.log(questionAnswer1)
-            console.log(questionAnswer2)
-        };  
-    })
+        if (localstoragequestions) {
+            let questions = JSON.parse(localstoragequestions).questions;
+            formQuestion = questions[questionNumber].Question.QuestionText;
+            questionAnswer1 = questions[questionNumber].Answers[0].AnswerText;
+            questionAnswer2 = questions[questionNumber].Answers[1].AnswerText;
+        }
+    }
+
+    // On mount, call the update function
+    onMount(() => {
+        updateQuestionData();
+    });
 </script>
 
 <div class="flex flex-col h-full">
-    <FormHeader formQuestion={formQuestion}/>
+    <FormHeader questionNum={questionNumber} formQuestion={formQuestion}/>
     <div class="flex h-full justify-between gap-12">
-        <AnswerBox answerText={questionAnswer1}/>
-        <AnswerBox answerText={questionAnswer2}/>
+        <AnswerBox answerNum={1} answerText={questionAnswer1}/>
+        <AnswerBox answerNum={2} answerText={questionAnswer2}/>
     </div>
-    <Footer />
-</div>
-
-<style lang="postcss">
-</style>
+    <Footer questionNum={Number(questionNumber)}/>
+</div>

frontend/src/routes/userform/+page.svelte

@@ -15,6 +15,7 @@
     let firstUserQuestion: number = 0
 
     const handleUserformSubmit = async (age: string, education: string, healthcare_personnel: string, gender: string) => {
+        localStorage.clear()
         const response = await postUserformData(age, education, healthcare_personnel, gender)
         const userQuestions = await getUserQuestions(response.respondentID)