✨ completed routing for questions

frontend/src/routes/+page.svelte

@@ -15,7 +15,9 @@
             </ul>
         </div>
         <div class="flex justify-center items-center w-2/5">
-            <ButtonComponent text="Start undersøkelse" url="/userform" filled={false} />
+            <a href="/userform">
+                <ButtonComponent text="Start undersøkelse" filled={false} />
+            </a>
         </div>
     </div>
     <div class="flex justify-center items-center gap-8 text-primary font-bold">

frontend/src/routes/form/+page.server.ts

@@ -1,12 +0,0 @@
-import { error } from '@sveltejs/kit';
-
-/** @type {import('./$types').PageServerLoad} */
-export async function load({ params }) {
-	const post = await getPostFromDatabase(params.slug);
-
-	if (post) {
-		return post;
-	}
-
-	error(404, 'Not found');
-}

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

@@ -1,24 +0,0 @@
-<script>
-    import FormHeader from "../../components/form/header/FormHeader.svelte";
-    import AnswerBox from "../../components/form/answerbox/AnswerBox.svelte";
-	import Footer from "../../components/form/footer/Footer.svelte";
-</script>
-
-<div class="flex flex-col h-full">
-    <FormHeader />
-    <div class="flex h-full justify-between gap-12">
-        <AnswerBox />
-        <AnswerBox />
-    </div>
-    <Footer />
-</div>
-
-<style lang="postcss">
-    :root {
-        color: theme(colors.content);
-        
-    }
-    p {
-        font-size: medium;
-    }
-</style>

frontend/src/routes/form/[slug]/+page.server.ts

@@ -0,0 +1,10 @@
+import { error } from "@sveltejs/kit";
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ params }) {
+	let questionNumber = params;
+
+	if (questionNumber) return questionNumber;
+
+	error(404, "Not found");
+}

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+    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;
+
+    let formQuestion: string = ""
+    let questionAnswer1: string = ""
+    let questionAnswer2: string = ""
+
+    onMount(async () => {
+        const questionNumber = data.slug
+        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)
+        };  
+    })
+</script>
+
+<div class="flex flex-col h-full">
+    <FormHeader formQuestion={formQuestion}/>
+    <div class="flex h-full justify-between gap-12">
+        <AnswerBox answerText={questionAnswer1}/>
+        <AnswerBox answerText={questionAnswer2}/>
+    </div>
+    <Footer />
+</div>
+
+<style lang="postcss">
+</style>

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

@@ -3,16 +3,22 @@
     import ArrowBack from "../../components/svg/ArrowBack.svelte";
 	import ButtonComponent from "../../components/userform/inputs/ButtonComponent.svelte";
 	import { postUserformData } from "../../api/postUserformData";
+	import { getUserQuestions } from "../../api/getUserQuestions";
+    import { goto } from "$app/navigation";
+
 
     let age: string = "18-20"
     let education: string = "PhD"
     let healthcare_personnel: string = "Ja"
     let gender: string = "Mann"
 
+    let firstUserQuestion: number = 0
+
     const handleUserformSubmit = async (age: string, education: string, healthcare_personnel: string, gender: string) => {
         const response = await postUserformData(age, education, healthcare_personnel, gender)
+        const userQuestions = await getUserQuestions(response.respondentID)
         
-        await getUserQuestions(response.respondentID)
+        goto("form/0")
     }
 </script>
 
@@ -34,7 +40,7 @@
         </div>
     </div>
     <div class="flex justify-center items-center gap-8 text-primary font-bold">
-        <ButtonComponent text="Start undersøkelse" url="/form" filled={true} onclick={() => handleUserformSubmit(age, education, healthcare_personnel, gender)} />
+        <ButtonComponent text="Start undersøkelse" filled={true} onclick={() => handleUserformSubmit(age, education, healthcare_personnel, gender)} />
     </div>
 </div>