feat(frontend): improve and unify frontend styles

Iamhexi · Oct 28, 2024 · bb775f5 · bb775f5
1 parent 975f7b9
commit bb775f5
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 31 deletions.
diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -5,6 +5,7 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
+		<link rel="stylesheet" href="%sveltekit.assets%/global.css"
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -99,12 +99,16 @@
     {/each}
 {:else}
 <form on:submit|preventDefault={handleSubmit}>
-    <p>Question: {question}</p>
+    <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>Your answer:</p>
+        <p><b>Your answer:</b></p>
         <textarea
             class="answer-input"
             bind:value={formData.userAnswer}
@@ -113,7 +117,7 @@
             autofocus
         ></textarea>
     </label>
-    <button class="submit-answer-button" type="submit">Check the answer</button>
+    <button type="submit">&rarr;</button>
     </form>
 {/if}
 
@@ -124,11 +128,6 @@
         display: block;
     }
 
-    .submit-answer-button {
-        display: block;
-        font-size: 10px;
-    }
-
     label {
         height: 10vh;
     }
@@ -162,20 +161,4 @@
         margin-right: 1rem;
     }
 
-    button {
-        /* height: 3.5rem; */
-        /* line-height: 3.5rem; */
-        text-align: center;
-        text-decoration: none;
-        border: 1px solid gray;
-        border-radius: 5px;
-        padding: 0.5rem;
-        background-color: darkgray;
-        width: 20%;
-        font-size: 2rem;
-    }
-
-    button:hover {
-        cursor: pointer;
-    }
 </style>
diff --git a/frontend/src/routes/evaluate/+page.svelte b/frontend/src/routes/evaluate/+page.svelte
@@ -53,14 +53,95 @@ onMount(async () => {
   evaluation = await evaluateAnswer(formData.context, formData.userAnswer);
   disableLoader();
 });
+
+
+	/**
+   * Generate a feedback header based on the evaluation.
+	 * @param {string} evaluation
+   * @returns {string|null}
+	 */
+function getHeader(evaluation) {
+  if (evaluation === 'entailment') {
+    return 'Correct answer';
+  } else if (evaluation === 'neutral') {
+    return 'Unassociated answer';
+  } else if (evaluation === 'contradiction') {
+    return 'Wrong answer';
+  }
+  return null;
+}
+
+/**
+ * Generate a feedback paragraph based on the evaluation.
+ * @param {string} evaluation
+ * @returns {string}
+ */
+ function getParagraph(evaluation) {
+  const feedbackMessages = {
+    entailment: 'Your answer is correct. Well done!',
+    neutral: 'Your answer does not seems to tackle the question. It is not necessarily wrong. Try to rephrase your answer.',
+    contradiction: 'Your answer is wrong. Revise the learning material and try again.'
+  };
+
+  return feedbackMessages[evaluation] || 'No evaluation provided. Please ensure that the evaluation is valid.';
+}
+
 </script>
 
-{#if formData.context && formData.userAnswer && formData.correctAnswer }
-  <p>The context: {formData.context}</p>
-  <p>Your answer: {formData.userAnswer}</p>
-  <p>The correct answer: {formData.correctAnswer}</p>
-  <p>Question: {formData.question}</p>
-  <p>Evaluation: {evaluation}</p>
+{#if evaluation }
+  <main class="feedback-wrapper">
+    <header><h1>Feedback</h1></header>
+    <p class="feedback-evaluation {evaluation}">
+      <b>{getHeader(evaluation)}</b>
+      <br>
+      {getParagraph(evaluation)}
+    </p>
+    <p><b>Question:</b> {formData.question}</p>
+    <p><b>Your answer:</b> {formData.userAnswer}</p>
+    <p><b>The correct answer:</b> {formData.correctAnswer}</p>
+    <p><b>The context:</b> {formData.context}</p>
+  </main>
 
   <a href="/">Change a paragraph</a>
 {/if}
+
+<style>
+  .feedback-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: space-between;
+  }
+
+  .feedback-wrapper p {
+    padding: 1rem;
+    border: 1px solid black;
+  }
+
+  .feedback-evaluation {
+    border-radius: 5px;
+    text-align: center;
+    line-height: 2rem;
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  .feedback-evaluation.entailment {
+    background-color: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+  }
+
+  .feedback-evaluation.contradiction {
+    background-color: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+  }
+
+  .feedback-evaluation.neutral {
+    background-color: #fff3cd;
+    color: #856404;
+    border: 1px solid #ffeeba;
+  }
+
+</style>
diff --git a/frontend/static/global.css b/frontend/static/global.css
@@ -0,0 +1,23 @@
+
+* {
+    font-family: 'Courier New', Courier, monospace;
+  }
+
+button, input[type="submit"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: gray;
+  color: white;
+  border: none;
+  line-height: 4rem;
+  height: 4rem;
+  width: 20%;
+  border-radius: 5px;
+  font-size: 2rem;
+  padding-bottom: 1rem; /* Centering an arrow with padding. */
+}
+
+button:hover, input[type="submit"]:hover {
+  cursor: pointer;
+}
diff --git a/learning_assets/programming/python.txt b/learning_assets/programming/python.txt
@@ -6,4 +6,4 @@ Python programming language is used for system scripting, back-end development f
 
 Python has a beginner-friendly syntax but is tough to master. It was created by a Dutch programmer in 90'.
 
-Python is known for its simple `Hello, world!`, which has exactly one line `print('Hello, world!')`.
+Python is known for its simple "Hello, world!", which has exactly one line "print('Hello, world!')".