✨ functionality to skip question or end survey

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

frontend/src/components/form/footer/Footer.svelte

@@ -6,6 +6,8 @@
 
     export let questionNum:number
     export let answeredAll:boolean
+    export let answer1ID:number
+    export let answer2ID:number
 
     const gotoNextPage = async (questionNum: number) => {        
         goto(`${questionNum + 1}`)
@@ -15,6 +17,24 @@
         goto(`${questionNum - 1}`)
     }
     
+    const skipQuestion = async (questionNum: number) => {
+        let allFormAnswers:string | null = localStorage.getItem("allFormAnswers")
+        if (allFormAnswers) {
+            const convertedAnswers:[] = JSON.parse(allFormAnswers)
+            let result = convertedAnswers.filter((item) => item[0] != answer1ID && item[0] != answer2ID)
+            const localStorageResult = JSON.stringify(result)
+            localStorage.setItem("allFormAnswers", localStorageResult)
+
+            if (questionNum != 0 && questionNum % 4 == 0) {
+                handleFormSubmit()
+            } else {
+                goto(`${questionNum + 1}`)
+            }
+        } else {
+            goto(`${questionNum + 1}`)
+        }
+    }
+
     const handleFormSubmit = async () => {
         let allFormAnswers:string | null = localStorage.getItem("allFormAnswers")
         let respondentID:string | null = localStorage.getItem("RespondentId")
@@ -27,7 +47,8 @@
 
 </script>
 
-<div class="flex justify-center items-center gap-8 pb-4 mt-4 md:mb-5">
+<div class="flex flex-col gap-8 justify-around items-center pb-6 md:mb-5">
+    <div class="flex gap-8">
         <button disabled={questionNum == 0} class={`flex items-center gap-2 text-primary font-semibold ${questionNum == 0 && "opacity-50"}`} on:click={() => gotoPrevPage(questionNum)}>
             <ArrowChevron width=16 direction="left"/>
             Forrige spørsmål
@@ -41,3 +62,12 @@
             <ArrowChevron width=16 direction="right"/>
         </button>
     </div>  
+    <div class="flex gap-8">
+        <button on:click={() => skipQuestion(questionNum)} class="border-2 border-primary text-primary rounded-3xl hover:bg-primary hover:text-bg px-3 py-2">
+            Ønsker ikke vurdere dette spørsmålet
+        </button>
+        <button on:click={handleFormSubmit} disabled={(questionNum != 0 && questionNum % 4 == 0) || !answeredAll} class={`border-2 border-primary bg-primary text-bg rounded-3xl px-3 py-2 ${(questionNum != 0 && questionNum % 4 == 0) || !answeredAll && "opacity-50"} ${questionNum != 0 && questionNum % 4 == 0 && "opacity-50"} ${questionNum % 4 == 0 && questionNum != 0 &&  answeredAll && "hidden"}`}>
+            Avslutt undersøkelsen og send inn svar
+        </button>
+    </div>
+</div>

frontend/src/components/form/header/FormHeader.svelte

@@ -5,7 +5,7 @@
     export let questionNum:number
 </script>
 
-<div class="flex justify-center items-start md:items-center md:h-auto md:mt-16">
+<div class="flex justify-center items-start md:items-center md:h-auto md:mt-8">
     <div class="flex justify-center">
         <div class="flex flex-grow flex-col md:flex-row md:justify-center items-center md:w-4/5 gap-4">
             <h1 class="text-xl text-primary font-bold text-center">Spørsmål {Number(questionNum) + 1}</h1>

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

@@ -17,7 +17,7 @@
 
 <div class="flex flex-col justify-between items-center h-full">
     <div class="flex flex-col gap-14 md:gap-8 h-full mt-8">
-        <div class="flex flex-col gap-4 md:px-96 items-center">
+        <div class="flex flex-col gap-4 lg:px-60 items-center">
             <h1 class="text-3xl text-primary font-bold">Takk for at du tok deg tid!</h1>
             <p>Tusen takk for hjelpen i denne undersøkelsen! Vi setter stor pris på det og håper du får en fin dag videre.</p>
             <p>Har du tid så setter vi veldig pris på om du skrevet en liten tilbakemelding til oss i tekstfeltet under:</p>

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

@@ -70,9 +70,9 @@
     });
 </script>
 
-<div class="flex flex-col h-full md:h-screen gap-10">
+<div class="flex flex-col h-full md:h-screen">
     <FormHeader questionNum={questionNumber} formQuestion={formQuestion}/>
-    <div class="flex flex-col md:flex-row h-full justify-between gap-12">
+    <div class="flex flex-col md:flex-row h-full justify-between mt-6 mb-10 gap-12">
         {#key questionNumber}
             <div class="flex-1">
                 <AnswerBox on:update={(e) => question1Answered = e.detail} answerNum={1} answerText={questionAnswer1Text} answerID={questionAnswer1ID}/>
@@ -83,6 +83,6 @@
         {/key}
     </div>
     {#key questionNumber}
-        <Footer answeredAll={question1Answered && question2Answered} questionNum={Number(questionNumber)}/>
+        <Footer answeredAll={question1Answered && question2Answered} answer1ID={questionAnswer1ID} answer2ID={questionAnswer2ID} questionNum={Number(questionNumber)}/>
     {/key}
 </div>