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'}">
+    <HtmlRender className="mt-4">
-      {title}
+      <svelte:fragment slot="content">
-    </h3>
+        <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
+        variant={nextButtonProps.isActive ? VARIANTS.CONTAINED : VARIANTS.OUTLINED}
-          ? VARIANTS.CONTAINED
-          : VARIANTS.OUTLINED}
         type="submit"
         label={nextButtonProps.label}
         {name}

src/routes/+layout.svelte

@@ -166,7 +166,7 @@
       if (data.isOrgSite) {
         if (params.has('redirect')) {
           goto(params.get('redirect') || '');
-        } else if (!path.includes('lms')) {
+        } else if (shouldRedirectOnAuth(path)) {
           goto('/lms');
         }
       } else {

src/routes/courses/[id]/lessons/+page.svelte

@@ -30,10 +30,10 @@
   import TextChip from '$lib/components/Chip/Text.svelte';
   import Avatar from '$lib/components/Apps/components/Poll/components/Avatar.svelte';
   import AddLessonModal from '$lib/components/Course/components/Lesson/AddLessonModal.svelte';
-  import { exerciseMode } from '$lib/components/Course/components/Lesson/Exercise/store';
 
   export let data;
   const { courseId } = data;
+
   let lessonEditing;
   let isStudent = true;
   let openModal = false;
@@ -99,10 +99,6 @@
       isStudent = user.role_id === 3;
     }
   }
-  $: {
-    console.log('isStudent', isStudent);
-    $exerciseMode.editMode = !isStudent;
-  }
 </script>
 
 <AddLessonModal {isStudent} bind:openModal />

src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte

@@ -39,6 +39,7 @@
   let isMarkingComplete = false;
   let isLoading = false;
   let isSaving = false;
+  let isStudent = true;
 
   function getLessonOrder(id: string) {
     const index = $lessons.findIndex((lesson) => lesson.id === id);
@@ -200,7 +201,11 @@
   }
 </script>
 
-<CourseContainer {path} isExercisePage={!data.isMaterialsTabActive && data.exerciseId}>
+<CourseContainer
+  bind:isStudent
+  {path}
+  isExercisePage={!data.isMaterialsTabActive && data.exerciseId}
+>
   <PageNav
     navItems={[
       {
@@ -256,7 +261,12 @@
   </PageNav>
 
   {#if !data.isMaterialsTabActive}
-    <Exercises lessonId={data.lessonId} exerciseId={data.exerciseId} path={`${path}/exercises`} />
+    <Exercises
+      bind:isStudent
+      lessonId={data.lessonId}
+      exerciseId={data.exerciseId}
+      path={`${path}/exercises`}
+    />
   {:else if !!data.lessonId}
     <PageBody
       onClick={() => {