From 75e9598db2c87c6e256163d755a67eb7a0d5657f Mon Sep 17 00:00:00 2001
From: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
Date: Sun, 14 Jan 2024 13:20:00 +0100
Subject: [PATCH] :sparkles: randomize order of answers

Co-authored-by: haraldnilsen <harald_998@hotmail.com>
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 frontend/src/routes/form/[slug]/+page.svelte | 22 ++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/src/routes/form/[slug]/+page.svelte b/frontend/src/routes/form/[slug]/+page.svelte
index 7b4fb1d..9dc3184 100644
--- a/frontend/src/routes/form/[slug]/+page.svelte
+++ b/frontend/src/routes/form/[slug]/+page.svelte
@@ -13,6 +13,8 @@
     let questionAnswer2Text: string = ""
     let questionAnswer2ID: number = 0
     let questionNumber: number = 0
+    
+    let shouldSwitch = false;
 
     let question1Answered: boolean = false
     let question2Answered: boolean = false
@@ -60,16 +62,24 @@
     // On mount, call the update function
     onMount(() => {
         updateQuestionData();
+        shouldSwitch = Math.random() >= 0.5;
     });
 </script>
 
-<div class="flex flex-col h-full md:h-screen gap-4">
+<div class="flex flex-col h-full md:h-screen gap-10">
     <FormHeader questionNum={questionNumber} formQuestion={formQuestion}/>
-    <div class="flex flex-col md:flex-row h-full justify-between gap-12">
-        {#key questionNumber}     
-            <AnswerBox on:update={(e) => question1Answered = e.detail} answerNum={1} answerText={questionAnswer1Text} answerID={questionAnswer1ID}/>
-            <AnswerBox on:update={(e) => question2Answered = e.detail} answerNum={2} answerText={questionAnswer2Text} answerID={questionAnswer2ID}/>
-        {/key}
+    <div class="flex flex-col md:flex-row h-full  justify-between gap-12">
+        {#if shouldSwitch}
+            {#key questionNumber}
+                <AnswerBox on:update={(e) => question2Answered = e.detail} answerNum={2} answerText={questionAnswer2Text} answerID={questionAnswer2ID}/>
+                <AnswerBox on:update={(e) => question1Answered = e.detail} answerNum={1} answerText={questionAnswer1Text} answerID={questionAnswer1ID}/>
+            {/key}
+        {:else}
+            {#key questionNumber}
+                <AnswerBox on:update={(e) => question1Answered = e.detail} answerNum={1} answerText={questionAnswer1Text} answerID={questionAnswer1ID}/>
+                <AnswerBox on:update={(e) => question2Answered = e.detail} answerNum={2} answerText={questionAnswer2Text} answerID={questionAnswer2ID}/>
+            {/key}
+        {/if}
     </div>
     {#key questionNumber}
         <Footer answeredAll={question1Answered && question2Answered} questionNum={Number(questionNumber)}/>