✨ functionality to skip question or end survey

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

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

@@ -6,14 +6,34 @@
 
     export let questionNum:number
     export let answeredAll:boolean
+    export let answer1ID:number
+    export let answer2ID:number
 
     const gotoNextPage = async (questionNum: number) => {        
         goto(`${questionNum + 1}`)
     }
-
+    
     const gotoPrevPage = async (questionNum: number) => {
         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")
@@ -27,17 +47,27 @@
 
 </script>
 
-<div class="flex justify-center items-center gap-8 pb-4 mt-4 md:mb-5">
-    <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
-    </button>
-    <button disabled={questionNum == 0 || questionNum % 4 != 0} on:click={handleFormSubmit}
-    class={`${(questionNum == 0 || questionNum % 4 != 0) || (questionNum % 4 == 0 && !answeredAll) ?  "hidden" : "bg-primary text-bg hover:bg-bg hover:text-primary"} font-bold uppercase border-primary border-2 rounded-full px-2 md:px-8 py-3`}>
-            Send inn svar
-    </button>
-    <button disabled={(questionNum != 0 && questionNum % 4 == 0) || !answeredAll} class={`flex items-center gap-2 text-primary font-semibold ${(questionNum != 0 && questionNum % 4 == 0) || !answeredAll && "opacity-50"} ${questionNum != 0 && questionNum % 4 == 0 && "opacity-50"} ${questionNum % 4 == 0 && questionNum != 0 &&  answeredAll && "hidden"}`} on:click={() => gotoNextPage(questionNum)}>
-        Neste spørsmål
-        <ArrowChevron width=16 direction="right"/>
-    </button>
+<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
+        </button>
+        <button disabled={questionNum == 0 || questionNum % 4 != 0} on:click={handleFormSubmit}
+        class={`${(questionNum == 0 || questionNum % 4 != 0) || (questionNum % 4 == 0 && !answeredAll) ?  "hidden" : "bg-primary text-bg hover:bg-bg hover:text-primary"} font-bold uppercase border-primary border-2 rounded-full px-2 md:px-8 py-3`}>
+                Send inn svar
+        </button>
+        <button disabled={(questionNum != 0 && questionNum % 4 == 0) || !answeredAll} class={`flex items-center gap-2 text-primary font-semibold ${(questionNum != 0 && questionNum % 4 == 0) || !answeredAll && "opacity-50"} ${questionNum != 0 && questionNum % 4 == 0 && "opacity-50"} ${questionNum % 4 == 0 && questionNum != 0 &&  answeredAll && "hidden"}`} on:click={() => gotoNextPage(questionNum)}>
+            Neste spørsmål
+            <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>