From 107101e04cb40fd12feb50c0c2bb0d099f31112f Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Wed, 4 Oct 2023 11:11:09 +0100
Subject: [PATCH] Improve header of questions

---
 .../Question/CheckboxQuestion/index.svelte          |  7 ++++++-
 .../Question/TextareaQuestion/index.svelte          | 13 +++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/Question/CheckboxQuestion/index.svelte b/src/lib/components/Question/CheckboxQuestion/index.svelte
index 4ccfc585..c33f996b 100644
--- a/src/lib/components/Question/CheckboxQuestion/index.svelte
+++ b/src/lib/components/Question/CheckboxQuestion/index.svelte
@@ -4,6 +4,7 @@
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import Checkbox from '$lib/components/Form/Checkbox.svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
+  import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
 
   export let title = '';
   export let code;
@@ -60,7 +61,11 @@
 
 <form on:submit|preventDefault={handleFormSubmit}>
   <div class="flex items-center justify-between">
-    <h3 class={!isNaN(grade) && 'w-3/4'}>{title}</h3>
+    <HtmlRender className="mt-4">
+      <svelte:fragment slot="content">
+        <h3 class={!isNaN(grade) ? 'w-3/4' : ''}>{title}</h3>
+      </svelte:fragment>
+    </HtmlRender>
     {#if !isNaN(grade)}
       <div class="flex items-center">
         <TextField
diff --git a/src/lib/components/Question/TextareaQuestion/index.svelte b/src/lib/components/Question/TextareaQuestion/index.svelte
index ae256b6b..290b4154 100644
--- a/src/lib/components/Question/TextareaQuestion/index.svelte
+++ b/src/lib/components/Question/TextareaQuestion/index.svelte
@@ -5,6 +5,7 @@
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import TextArea from '$lib/components/Form/TextArea.svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
+  import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
 
   export let title = '';
   export let code;
@@ -35,7 +36,11 @@
 
 <form on:submit|preventDefault={handleFormSubmit}>
   <div class="flex items-center justify-between">
-    <h3 class={!isNaN(grade) && 'w-3/4'}>{title}</h3>
+    <HtmlRender className="mt-4">
+      <svelte:fragment slot="content">
+        <h3 class={!isNaN(grade) ? 'w-3/4' : ''}>{title}</h3>
+      </svelte:fragment>
+    </HtmlRender>
     {#if !isNaN(grade)}
       <div class="flex items-center">
         <TextField
@@ -60,11 +65,7 @@
         {@html marked(defaultValue)}
       </div>
     {:else}
-      <TextArea
-        bind:value={defaultValue}
-        rows="5"
-        placeholder="Write your answer here"
-      />
+      <TextArea bind:value={defaultValue} rows="5" placeholder="Write your answer here" />
     {/if}
   </div>