feat(frontend): add step to UI flow with paragraph reading

Iamhexi · Oct 29, 2024 · 1186a21 · 1186a21
1 parent bb775f5
commit 1186a21
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 61 deletions.
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -4,21 +4,6 @@
     import { goto } from '$app/navigation';
 
     let formData = { context: '', userAnswer: '', correctAnswer: '', question: '' };
-    const minimumAnswerLength = 5;
-
-    const handleSubmit = () => {
-        const answerInput = document.querySelector('.answer-input');
-        const answer = String(answerInput.value);
-        if (answer.length < minimumAnswerLength) {
-            alert(`Answer is too short. Minimum length: ${minimumAnswerLength}.`)
-            return;
-        }
-
-        if (typeof window !== 'undefined') {
-            sessionStorage.setItem('formData', JSON.stringify(formData));
-            goto('/evaluate');
-        }
-  };
 
     /**
 	 * @type {any[]}
@@ -72,16 +57,7 @@
         question = result.data.question;
     }
 
-    /**
-     * Make Ctrl + Enter send a form.
-	 * @param {{ key: any; }} event
-	 */
-    function handleKeyDown(event) {
-        // @ts-ignore
-        if (event.ctrlKey && event.key === 'Enter') {
-            handleSubmit();
-        }
-  }
+
 
 </script>
 
@@ -98,45 +74,13 @@
         </div>
     {/each}
 {:else}
-<form on:submit|preventDefault={handleSubmit}>
-    <p>
-        <b>Question:</b>
-        <br>
-        {question}
-    </p>
-    <input type="text" bind:value={formData.question} hidden readonly/>
-    <input type="text" bind:value={formData.context} hidden readonly/>
-    <input type="text" bind:value={formData.correctAnswer} hidden readonly/>
-    <label>
-        <p><b>Your answer:</b></p>
-        <textarea
-            class="answer-input"
-            bind:value={formData.userAnswer}
-            on:keydown={handleKeyDown}
-            required
-            autofocus
-        ></textarea>
-    </label>
-    <button type="submit">&rarr;</button>
-    </form>
+    <p>Read a paragraph</p>
+    <p>{formData.context}</p>
+    <button on:click={() => goto('/answer')}>&rarr;</button>
 {/if}
 
 
 <style>
-    label > p {
-        /* padding: 10px; */
-        display: block;
-    }
-
-    label {
-        height: 10vh;
-    }
-
-    .answer-input {
-        width: 80%;
-        height: 10rem;
-    }
-
     .learning-material {
         margin: 50px 0;
         display: flex;

diff --git a/frontend/src/routes/answer/+page.svelte b/frontend/src/routes/answer/+page.svelte
@@ -0,0 +1,71 @@
+<script>
+	import { goto } from "$app/navigation";
+	import { onMount } from "svelte";
+
+    const minimumAnswerLength = 5;
+
+    let formData = { context: '', userAnswer: '', correctAnswer: '', question: '' };
+    /**
+         * @type {string|null}
+         */
+    let evaluation = null;
+
+    function receiveFormData() {
+        if (typeof window !== 'undefined' && sessionStorage.getItem('formData')) {
+        // @ts-ignore
+        formData = JSON.parse(sessionStorage.getItem('formData'));
+        }
+    }
+
+    onMount(async () => {
+        await receiveFormData();
+        formData.userAnswer = '';
+    });
+
+    const handleSubmit = () => {
+        const answerInput = document.querySelector('.answer-input');
+        const answer = String(answerInput.value);
+        if (answer.length < minimumAnswerLength) {
+            alert(`Answer is too short. Minimum length: ${minimumAnswerLength}.`)
+            return;
+        }
+
+        if (typeof window !== 'undefined') {
+            sessionStorage.setItem('formData', JSON.stringify(formData));
+            goto('/evaluate');
+        }
+  };
+
+    /**
+     * Make Ctrl + Enter send a form.
+	 * @param {{ key: any; }} event
+	 */
+     function handleKeyDown(event) {
+        // @ts-ignore
+        if (event.ctrlKey && event.key === 'Enter') {
+            handleSubmit();
+        }
+    }
+</script>
+
+<form on:submit|preventDefault={handleSubmit}>
+    <p>
+        <b>Question:</b>
+        <br>
+        {formData.question}
+    </p>
+    <input type="text" bind:value={formData.question} hidden readonly/>
+    <input type="text" bind:value={formData.context} hidden readonly/>
+    <input type="text" bind:value={formData.correctAnswer} hidden readonly/>
+    <label>
+        <p><b>Your answer:</b></p>
+        <textarea
+            class="answer-input"
+            bind:value={formData.userAnswer}
+            on:keydown={handleKeyDown}
+            required
+            autofocus
+        ></textarea>
+    </label>
+    <button type="submit">&rarr;</button>
+</form>
diff --git a/frontend/src/routes/evaluate/+page.svelte b/frontend/src/routes/evaluate/+page.svelte
@@ -2,7 +2,6 @@
   import { onMount } from "svelte";
   import { API_URL } from "../../lib/config.js";
   import { showErrorMessage, disableLoader, enableLoader } from "../../lib/utils.js"
-	import { goto } from "$app/navigation";
 
   let formData = { context: '', userAnswer: '', correctAnswer: '', question: '' };
   /**