CLASSROOMIO-T-180: Make exercise answerable

src/lib/components/Course/components/Lesson/Exercise/index.svelte

@@ -68,8 +68,8 @@
 
 <PageBody padding="px-4" headerClassName="bg-gray-100 rounded-md mb-3">
   <svelte:fragment slot="header">
-    <div class="flex items-center py-2 w-">
-      <RoleBasedSecurity allowedRoles={[1, 2]}>
+    <RoleBasedSecurity allowedRoles={[1, 2]}>
+      <div class="flex items-center py-2 w-">
         {#if $exerciseMode.editMode}
           <PrimaryButton
             className="mr-2"
@@ -94,8 +94,8 @@
             {/if}
           </IconButton>
         {/if}
-      </RoleBasedSecurity>
-    </div>
+      </div>
+    </RoleBasedSecurity>
 
     {#if $exerciseMode.editMode}
       <div class="flex items-center">

src/lib/components/Course/components/Lesson/Exercises/index.svelte

@@ -20,6 +20,7 @@
   export let path;
   export let exerciseId;
   export let lessonId;
+  export let isStudent = true;
 
   let open = false;
   let isFetching = false;
@@ -123,11 +124,9 @@
     getExercises();
   });
 
-  const gotoEdit = () => {
-    $exerciseMode.editMode = true;
-  };
-
   $: getExercise(exerciseId);
+
+  $: $exerciseMode.editMode = !isStudent;
 </script>
 
 {#if isFetching}
@@ -159,7 +158,6 @@
         <a
           class="w-52 bg-gray-100 dark:bg-neutral-800 px-4 py-7 mr-4 mb-4 rounded-lg"
           href="{path}/{exercise.id}"
-          on:click={gotoEdit}
         >
           <h3 class="dark:text-white text-xl">{exercise.title}</h3>
           <p class="dark:text-white mt-4 text-sm">Created Jul 3, 2021</p>

src/lib/components/Question/RadioQuestion/index.svelte

@@ -4,6 +4,7 @@
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import RadioItem from '$lib/components/Form/RadioItem.svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
+  import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
 
   export let title = '';
   export let code = '';
@@ -62,9 +63,13 @@
 
 <form on:submit|preventDefault={handleFormSubmit}>
   <div class="flex items-center justify-between">
-    <h3 class="dark:text-white {labelClassName} {!isNaN(grade) && 'w-3/4'}">
-      {title}
-    </h3>
+    <HtmlRender className="mt-4">
+      <svelte:fragment slot="content">
+        <h3 class="dark:text-white {labelClassName} {!isNaN(grade) && 'w-3/4'}">
+          {title}
+        </h3>
+      </svelte:fragment>
+    </HtmlRender>
     {#if !isNaN(grade)}
       <div class="flex items-center">
         <TextField
@@ -112,9 +117,7 @@
         variant={VARIANTS.OUTLINED}
       />
       <PrimaryButton
-        variant={nextButtonProps.isActive
-          ? VARIANTS.CONTAINED
-          : VARIANTS.OUTLINED}
+        variant={nextButtonProps.isActive ? VARIANTS.CONTAINED : VARIANTS.OUTLINED}
         type="submit"
         label={nextButtonProps.label}
         {name}