feat: Auto move to the next question (#324)

* move to the next question

* remove console

* minor changes

* updated the confetti timeout

* updated the button

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

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

@@ -124,7 +124,7 @@
   </form>
 </Modal>
 
-<div class="w-full">
+<div class="w-full mb-20">
   {#if Object.values(errors).length}
     <div class="w-full flex justify-center mb-4">
       <ErrorMessage

apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte

@@ -14,7 +14,7 @@
   import { removeDuplicate } from '$lib/utils/functions/removeDuplicate';
   import { QUESTION_TYPE } from '$lib/components/Question/constants';
   import { STATUS } from './constants';
-  import { getPropsForQuestion, filterOutDeleted } from './functions';
+  import { getPropsForQuestion, filterOutDeleted, wasCorrectAnswerSelected } from './functions';
   import { formatAnswers, getGroupMemberId } from '$lib/components/Course/function';
   import { submitExercise } from '$lib/utils/services/courses';
   import {
@@ -166,7 +166,7 @@
     handleSubmit({ preventDefault: () => {} });
   }
 
-  async function onSubmit(id, value, moveToNextQuestion = false) {
+  async function onSubmit(id, value) {
     if ($course.type === COURSE_TYPE.SELF_PACED) {
       isLoading = true;
     }
@@ -183,47 +183,62 @@
       [id]: formattedAnswer
     };
 
-    if (moveToNextQuestion) {
-      $questionnaireMetaData.currentQuestionIndex += 1;
-      localStorage.setItem(
-        `autosave-exercise-${exerciseId}`,
-        JSON.stringify($questionnaireMetaData)
-      );
-    }
+    const isCorrect = wasCorrectAnswerSelected(currentQuestion, $questionnaireMetaData.answers);
+    console.log({ isCorrect });
 
-    const isFinished = !questions[$questionnaireMetaData.currentQuestionIndex - 1];
+    const isFinished = !questions[$questionnaireMetaData.currentQuestionIndex];
     console.log(`isFinished`, isFinished);
     console.log(
       `$questionnaireMetaData.currentQuestionIndex`,
       $questionnaireMetaData.currentQuestionIndex
     );
 
-    // If last question send to server
-    if (isFinished) {
-      localStorage.removeItem(`autosave-exercise-${exerciseId}`);
-      $questionnaireMetaData.status = 1;
-      $questionnaireMetaData.totalPossibleGrade = getTotalPossibleGrade($questionnaire.questions);
-      $questionnaireMetaData.grades = {};
+    if (isCorrect) {
+      setTimeout(async () => {
+        $questionnaireMetaData.currentQuestionIndex += 1;
+        localStorage.setItem(
+          `autosave-exercise-${exerciseId}`,
+          JSON.stringify($questionnaireMetaData)
+        );
 
-      $questionnaireMetaData.comment = '';
-      let response = await submitExercise(
-        $questionnaireMetaData.answers,
-        questions,
-        exerciseId,
-        $course.id,
-        getGroupMemberId($group.people, $profile.id)
-      );
-      if (response) {
-        submissionResponse = response;
-        submissionId = submissionResponse.submission[0]?.id;
-      }
+        // If last question send to server
+        if (isFinished) {
+          localStorage.removeItem(`autosave-exercise-${exerciseId}`);
+          $questionnaireMetaData.status = 1;
+          $questionnaireMetaData.totalPossibleGrade = getTotalPossibleGrade(
+            $questionnaire.questions
+          );
+          $questionnaireMetaData.grades = {};
 
-      if ($course.type === COURSE_TYPE.SELF_PACED) {
-        automaticGrading($questionnaireMetaData, $questionnaire.questions);
-      }
+          $questionnaireMetaData.comment = '';
+          let response = await submitExercise(
+            $questionnaireMetaData.answers,
+            questions,
+            exerciseId,
+            $course.id,
+            getGroupMemberId($group.people, $profile.id)
+          );
+          if (response) {
+            submissionResponse = response;
+            submissionId = submissionResponse.submission[0]?.id;
+          }
 
-      notifyEducator();
+          if ($course.type === COURSE_TYPE.SELF_PACED) {
+            automaticGrading($questionnaireMetaData, $questionnaire.questions);
+          }
+
+          notifyEducator();
+        }
+      }, 1000);
     }
+
+    // if (moveToNextQuestion) {
+    //   $questionnaireMetaData.currentQuestionIndex += 1;
+    //   localStorage.setItem(
+    //     `autosave-exercise-${exerciseId}`,
+    //     JSON.stringify($questionnaireMetaData)
+    //   );
+    // }
   }
 
   function onPrevious() {

apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/functions.js

@@ -26,7 +26,7 @@ export function wasCorrectAnswerSelected(currentQuestion, answers, isFinished) {
   if (isCorrect && !isFinished) {
     toggleConfetti();
 
-    setTimeout(toggleConfetti, 1500);
+    setTimeout(toggleConfetti, 100);
   }
 
   return isCorrect;
@@ -80,7 +80,8 @@ export function getPropsForQuestion(
         ? {
             label: isLast ? 'Finish' : 'Next',
             isActive: true,
-            disableOptionSelect: true
+            disableOptionSelect: true,
+            isDisabled: isLast ? false : true // Disable Next button because auto next is enabled
           }
         : {
             label: 'Check',

apps/dashboard/src/lib/components/Question/CheckboxQuestion/index.svelte

@@ -46,7 +46,7 @@
   function handleFormSubmit(event) {
     if (isPreview) return;
     const values = getVal(event.target, name);
-    onSubmit(name, values, nextButtonProps.isActive);
+    onSubmit(name, values);
     event.target.reset();
   }
 
@@ -135,6 +135,7 @@
         variant={nextButtonProps.isActive ? VARIANTS.CONTAINED : VARIANTS.OUTLINED}
         type="submit"
         label={nextButtonProps.label}
+        isDisabled={nextButtonProps.isDisabled}
         {name}
       />
     </div>

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

@@ -48,7 +48,7 @@
   function handleFormSubmit(event) {
     if (isPreview) return;
     const value = getRadioVal(event.target, name);
-    onSubmit(name, [value], nextButtonProps.isActive);
+    onSubmit(name, [value]);
     event.target.reset();
   }
 
@@ -136,6 +136,7 @@
         variant={nextButtonProps.isActive ? VARIANTS.CONTAINED : VARIANTS.OUTLINED}
         type="submit"
         label={nextButtonProps.label}
+        isDisabled={nextButtonProps.isDisabled}
         {name}
       />
     </div>

apps/dashboard/src/lib/components/Question/TextareaQuestion/index.svelte

@@ -32,7 +32,7 @@
   function handleFormSubmit(event) {
     if (isPreview) return;
 
-    onSubmit(name, defaultValue, true);
+    onSubmit(name, defaultValue);
     // event.target.reset();
   }
 

apps/dashboard/src/routes/org/[slug]/courses/+page.svelte

@@ -29,7 +29,6 @@
   let hasFetched = false;
 
   async function getCourses(userId: string | undefined, orgId: string) {
-    console.log({ org: $currentOrg });
     if (cantFetch && typeof cantFetch === 'boolean' && orgId && !hasFetched) {
       // only show is loading when fetching for the first time
       if (!$courses.length) {