CLASSROOMIO-T-193: Exercise Templates for HTML

CLASSROOMIO-T-193: Convert to single quotes

CLASSROOMIO-T-193: Resolved Feedbacks

landing page improvement

add spacing on mobile for notes in lms

little bug fixes in lms

CLASSROOMIO-T-193: return the array

Simplify template generation

CLASSROOMIO-T-193: Styling improvement

CLASSROOMIO-T-193: Exercise Templates for HTML


Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>
Co-authored-by: Tunji Adeyemi <tunji@digdippa.com>


Merge-request: CLASSROOMIO-MR-88
Merged-by: Best Admin <best@digdippa.com>

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

@@ -10,6 +10,8 @@
     handleAnswerSelect,
     addDynamicValue
   } from '../store/exercise';
+  import { Select, SelectItem } from 'carbon-components-svelte';
+
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
   import AddFilledIcon from 'carbon-icons-svelte/lib/AddFilled.svelte';
   import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
@@ -24,7 +26,6 @@
   import ErrorMessage from '$lib/components/ErrorMessage/index.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import Select from '$lib/components/Form/Select.svelte';
   import QuestionContainer from '$lib/components/QuestionContainer/index.svelte';
   import DeleteConfirmationModal from './DeleteConfirmation.svelte';
   import OrderModal from './OrderModal.svelte';
@@ -156,7 +157,7 @@
         }}
       >
         <div class="flex justify-between items-center">
-          <div class="mr-2 w-3/5">
+          <div class="mr-5 w-3/5">
             <TextField
               placeholder="Question"
               bind:value={question.title}
@@ -168,12 +169,19 @@
           </div>
 
           <Select
-            bind:value={question.question_type}
-            options={QUESTION_TYPES}
-            onChange={() => {
+            size="xl"
+            class="w-[50px]"
+            bind:selected={question.question_type.id}
+            on:change={(e) => {
+              const id = parseInt(e.target.value);
+              question.question_type = QUESTION_TYPES.find((q) => q.id === id);
               question.is_dirty = true;
             }}
-          />
+          >
+            {#each QUESTION_TYPES as type}
+              <SelectItem value={type.id} text={type.label} />
+            {/each}
+          </Select>
         </div>
 
         {#if typeof question.code === 'string'}

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

@@ -1,11 +1,12 @@
-<script>
+<script lang="ts">
   import QuestionContainer from '$lib/components/QuestionContainer/index.svelte';
   import EditContent from '$lib/components/EditContent/index.svelte';
   import DateTime from '$lib/components/Form/DateTime.svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
   import { questionnaire } from '../store/exercise';
   import { marked } from 'marked';
-  export let preview;
+
+  export let preview: boolean;
 
   function getTotalPossibleGrade(questions) {
     return questions.reduce((acc, question) => {
@@ -15,7 +16,7 @@
   }
 </script>
 
-<div class="mb-5 px-6">
+<div class="mb-5 {!preview ? 'px-6' : 'px-2'}">
   <QuestionContainer isTitle={true}>
     {#if !preview}
       <TextField

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

@@ -132,7 +132,8 @@
           <div class="mb-5 flex items-center gap-2">
             {#each tags as tag}
               <Tag
-                type={selectedTag === tag ? 'cool-gray' : 'outline'}
+                type={selectedTag === tag ? 'warm-gray' : 'outline'}
+                class={selectedTag === tag ? 'bg-primary-400' : ''}
                 interactive
                 on:click={() => {
                   selectedTag = tag;

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

@@ -182,8 +182,13 @@
             <img src="/images/empty-exercise-icon.svg" alt="Exercise" class="my-2.5 mx-auto" />
             <h2 class="text-xl my-1.5 font-normal">No exercises added for this lesson</h2>
             <p class="text-sm text-center text-slate-500">
-              Share your knowledge with the world by creating engaging exercises. Add an exercise
-              now.
+              {#if isStudent}
+                Your tutor hasn't assigned any exercise to this lesson. For the main time, you can
+                <strong>chill with the big boys :)</strong>
+              {:else}
+                Share your knowledge with the world by creating engaging exercises. Add an exercise
+                now.
+              {/if}
             </p>
           </div>
         </Box>

src/lib/components/CourseLandingPage/components/Editor/index.svelte

@@ -134,14 +134,6 @@
     const link = `${window.location.origin}/course/${course.slug}`;
     window.open(link, '_blank');
   }
-
-  async function handlePublish() {
-    loading = true;
-    await updateCourse(courseId, undefined, {
-      is_published: true
-    });
-    loading = false;
-  }
 </script>
 
 <aside
@@ -182,12 +174,6 @@
             onClick={handleSave}
             isLoading={loading}
           />
-          <PrimaryButton
-            label="Publish"
-            type="button"
-            onClick={handlePublish}
-            isDisabled={loading}
-          />
           <IconButton onClick={handlePreview} disabled={loading || !course.slug}>
             <ArrowUpRightIcon size={24} class="carbon-icon dark:text-white" title="Preview" />
           </IconButton>

src/lib/components/PageBody/index.svelte

@@ -7,6 +7,8 @@
   export let headerClassName = '';
   export let onClick = () => {};
   export let isPageNavHidden = false;
+
+  $: padding = isPageNavHidden ? `pb-20 px-4` : padding;
 </script>
 
 <div