Fetch exercise from server

src/components/Course/components/Lesson/Exercise/ViewMode.svelte

@@ -17,8 +17,6 @@
   let currentQuestion = {};
   let renderProps = {};
 
-  const { questions, title, description } = $questionnaire;
-
   function handleStart() {
     $questionnaireMetaData.currentQuestionIndex += 1;
   }
@@ -60,20 +58,22 @@
     }
 
     return (
-      Math.round(((currentQuestionIndex - 1) / questions.length) * 100) || 0
+      Math.round(
+        ((currentQuestionIndex - 1) / $questionnaire.questions.length) * 100
+      ) || 0
     );
   }
 
   $: {
     currentQuestion =
-      questions[$questionnaireMetaData.currentQuestionIndex - 1];
+      $questionnaire.questions[$questionnaireMetaData.currentQuestionIndex - 1];
     if ($questionnaireMetaData.currentQuestionIndex > 0 && !currentQuestion) {
       $questionnaireMetaData.isFinished = true;
     }
 
     if (currentQuestion) {
       renderProps = getPropsForQuestion(
-        questions,
+        $questionnaire.questions,
         currentQuestion,
         $questionnaireMetaData,
         $questionnaireMetaData.currentQuestionIndex,
@@ -87,15 +87,20 @@
   $: $questionnaireMetaData.progressValue = getProgressValue(
     $questionnaireMetaData.currentQuestionIndex
   );
+
+  $: console.log('$questionnaire', $questionnaire);
 </script>
 
-{#if !preview && questions.length && !$questionnaireMetaData.isFinished}
+{#if !preview && $questionnaire.questions.length && !$questionnaireMetaData.isFinished}
   <Progress value={$questionnaireMetaData.progressValue} />
 {/if}
 
 {#if preview}
-  <Preview {questions} questionnaireMetaData={$questionnaireMetaData} />
-{:else if !questions.length}
+  <Preview
+    questions={$questionnaire.questions}
+    questionnaireMetaData={$questionnaireMetaData}
+  />
+{:else if !$questionnaire.questions.length}
   <div
     class="w-4/5 h-40 m-auto flex items-center justify-center text-center border-2 border-gray-200 rounded-md"
   >
@@ -106,8 +111,8 @@
   </div>
 {:else if $questionnaireMetaData.currentQuestionIndex === 0}
   <div>
-    <h2 class="my-1">{title}</h2>
-    <p>{description}</p>
+    <h2 class="my-1">{$questionnaire.title}</h2>
+    <p>{$questionnaire.description}</p>
 
     <PrimaryButton
       onClick={handleStart}
@@ -119,7 +124,7 @@
 {:else if $questionnaireMetaData.isFinished}
   <div class="flex items-center justify-between">
     <div class="flex flex-col justify-between">
-      <h2 class="text-xl mb-2 mt-0">{title}</h2>
+      <h2 class="text-xl mb-2 mt-0">{$questionnaire.title}</h2>
       {#if STATUS.IN_PROGRESS === $questionnaireMetaData.status}
         <span
           class="bg-yellow-600 text-white rounded-full py-2 px-6 text-center"
@@ -144,7 +149,10 @@
       {getTotalScores()}/100
     </span>
   </div>
-  <Preview {questions} questionnaireMetaData={$questionnaireMetaData} />
+  <Preview
+    questions={$questionnaire.questions}
+    questionnaireMetaData={$questionnaireMetaData}
+  />
 {:else if QUESTION_TYPE.RADIO === currentQuestion.type}
   <RadioQuestion {...renderProps} />
 {:else if QUESTION_TYPE.CHECKBOX === currentQuestion.type}

src/components/Course/components/Lesson/Materials/EditMode.svelte

@@ -1,6 +1,6 @@
 <script>
   import Tabs from '../../../../Tabs/index.svelte';
-  import TabContent from '../../../../Tabs/index.svelte';
+  import TabContent from '../../../../TabContent/index.svelte';
   import EditContent from '../../../../EditContent/index.svelte';
   import TextField from '../../../../Form/TextField.svelte';
   import { lesson } from '../store/lessons';
@@ -22,6 +22,7 @@
   let currentTab = tabs[0].value;
 
   function onChange(tabValue) {
+    console.log(`$lesson`, $lesson);
     return () => {
       currentTab = tabValue;
     };

src/components/Course/components/Lesson/Materials/ViewMode.svelte

@@ -1,6 +1,6 @@
 <script>
   import Tabs from '../../../../Tabs/index.svelte';
-  import TabContent from '../../../../Tabs/index.svelte';
+  import TabContent from '../../../../TabContent/index.svelte';
   import MarkdownRender from '../../../../MarkdownRender/index.svelte';
   import { lesson } from '../store/lessons';
 

src/components/CourseContainer/index.svelte

@@ -3,24 +3,28 @@
 
   import Navigation from '../Course/components/Navigation/index.svelte';
   import { lessons, lesson } from '../Course/components/Lesson/store/lessons';
+  import { questionnaire } from '../Course/components/Lesson/Exercise/store';
+  import { questionnaireMetaData } from '../Course/components/Lesson/Exercise/store/answers';
 
   export let courseData = {};
   export let path;
 
-  onMount(() => {
+  function setStoreWithData() {
     lessons.set(courseData.lessons);
+    console.log(`courseData`, courseData);
     if (courseData.lesson) {
       lesson.set(courseData.lesson);
     }
-  });
 
-  afterUpdate(() => {
-    lessons.set(courseData.lessons);
-
-    if (courseData.lesson) {
-      lesson.set(courseData.lesson);
+    if (courseData.exercise && courseData.exercise.data) {
+      questionnaire.set(courseData.exercise.data);
+      questionnaireMetaData.set(courseData.exercise.answers);
     }
-  });
+  }
+
+  onMount(setStoreWithData);
+
+  afterUpdate(setStoreWithData);
 </script>
 
 <svelte:head>

src/components/Question/RadioQuestion/index.svelte

@@ -65,7 +65,7 @@
   <div class="ml-4">
     {#each options as option}
       <button
-        class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md cursor-pointer hover:bg-gray-200 w-full {getValidationClassName(
+        class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 w-full {getValidationClassName(
           option
         )}"
         type="button"

src/components/Tabs/index.svelte

@@ -4,7 +4,7 @@
   export let onChange;
 </script>
 
-<div class="w-full flex justify-center">
+<div class="w-full flex justify-center flex-col">
   <div class="flex items-center">
     {#each tabs as tab}
       <button
@@ -23,5 +23,7 @@
     {/each}
   </div>
 
-  <slot name="content" />
+  <div class="mt-4">
+    <slot name="content" />
+  </div>
 </div>