From 1acbae281a5564e74318fc93bb93f97f6f47925b Mon Sep 17 00:00:00 2001
From: emmanuel <ifeanyi@digdippa.com>
Date: Mon, 23 Oct 2023 18:33:27 +0000
Subject: [PATCH] CLASSROOMIO-T-231: Worked on the analytics of the individual
 student

CLASSROOMIO-T-231:worked on the individual page

Merge branch 'main' into CLASSROOMIO-T-231

CLASSROOMIO-T-231:worked on the individual page


Co-authored-by: Ifeanyi Nwosu <ifeanyi@digdippa.com>


Merge-request: CLASSROOMIO-MR-112
Merged-by: Best Admin <best@digdippa.com>
---
 .../Exercise/Submissions/Individual.svelte    | 77 ++++++++++++++-----
 .../Exercise/Submissions/Summary.svelte       | 11 ++-
 2 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/Course/components/Lesson/Exercise/Submissions/Individual.svelte b/src/lib/components/Course/components/Lesson/Exercise/Submissions/Individual.svelte
index 26357912..f9067cdb 100644
--- a/src/lib/components/Course/components/Lesson/Exercise/Submissions/Individual.svelte
+++ b/src/lib/components/Course/components/Lesson/Exercise/Submissions/Individual.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { Loading } from 'carbon-components-svelte';
+  import type { ExerciseSubmissions } from '$lib/utils/types';
   import { questionnaire } from '../../store/exercise';
   import { submissions } from './store';
 
@@ -9,18 +11,49 @@
 
   let studentSelected = 0;
 
-  const isSelected = (option: { value: string[] }): boolean => {
+  const isSelected = (
+    student: ExerciseSubmissions,
+    option: { question_id: number; value: string[] }
+  ) => {
     if ($submissions) {
-      let submittedAnswer = $submissions[studentSelected]?.answers.map((answer) => answer.answers);
-      return !!submittedAnswer.find((opt) => opt == option.value);
+      let submittedAnswer = student?.answers;
+      let filteredAnswer = submittedAnswer.filter(
+        (ans: { question_id: number }) => ans.question_id === option.question_id
+      );
+      if (filteredAnswer.map((ans) => ans.answers.length > 1)) {
+        return filteredAnswer.some((ans) => ans.answers.includes(option.value));
+      } else {
+        return filteredAnswer.map((ans: { answers: any }) => ans.answers) == option.value;
+      }
     }
+  };
 
-    return false;
+  const isCorrect = (
+    student: ExerciseSubmissions,
+    option: { is_correct?: any; question_id?: number; value?: string[] }
+  ) => {
+    if (!isSelected(student, option)) return;
+    if (option.is_correct) {
+      return 'border-green-700';
+    } else {
+      return 'border-red-700';
+    }
+  };
+  const getOpenAnswer = (student: ExerciseSubmissions, q: never) => {
+    let submittedAnswer = student?.answers;
+    let filteredAnswer = submittedAnswer.filter(
+      (ans: { question_id: number }) => ans.question_id === q.id
+    );
+    if (filteredAnswer.some((ans: { open_answer: string }) => ans.open_answer == '')) {
+      return 'No Answer was provided';
+    } else {
+      return filteredAnswer.map((ans: { open_answer: any }) => ans.open_answer);
+    }
   };
 </script>
 
 {#if isLoading}
-  Loading data
+  <Loading withOverlay={true} />
 {:else if $submissions?.length}
   <div class="flex gap-1 w-full overflow-auto mt-2 mb-5">
     {#each $submissions as student, i}
@@ -52,28 +85,30 @@
     {#if $questionnaire.questions}
       {#each $questionnaire.questions as q, i}
         <div class="pb-4">
-          <p>{i + 1}. {q.title}</p>
+          <h3>{i + 1}. {q.title}</h3>
           {#if q.question_type_id !== 3}
             {#each q.options as option, i}
               <div
-                class="flex gap-2 max-w-[80%] items-center my-1 border border-gray-600 dark:border-gray-100 rounded-md p-3"
+                class={`flex gap-2 items-center my-2 border-2 border-gray-300 rounded-md p-2 ${isCorrect(
+                  $submissions[studentSelected],
+                  option
+                )}`}
               >
-                <input type="checkbox" name="" id="" checked={isSelected(option)} />
-                <p>{option.label}</p>
+                <input
+                  type="radio"
+                  name=""
+                  id=""
+                  class="form-radio"
+                  checked={isSelected($submissions[studentSelected], option)}
+                />
+                <span class="dark:text-white">{option.label}</span>
               </div>
             {/each}
-          {/if}
-          {#if q.question_type_id === 3}
-            <div
-              class="border border-gray-300 rounded-md max-w-[80%] bg-slate-200 dark:bg-slate-500 p-2 my-1"
-            >
-              {#if $submissions[studentSelected].answers.map((ans) => ans.open_answer)}
-                <p>
-                  {$submissions[studentSelected].answers.map((ans) => ans.open_answer)}
-                </p>
-              {:else}
-                <p>No answer</p>
-              {/if}
+          {:else}
+            <div class="rounded bg-slate-100 dark:bg-slate-300 p-2 my-1 w-full">
+              <span class="text-base font-medium text-black">
+                {getOpenAnswer($submissions[studentSelected], q)}
+              </span>
             </div>
           {/if}
         </div>
diff --git a/src/lib/components/Course/components/Lesson/Exercise/Submissions/Summary.svelte b/src/lib/components/Course/components/Lesson/Exercise/Submissions/Summary.svelte
index 6b928104..45fee2ce 100644
--- a/src/lib/components/Course/components/Lesson/Exercise/Submissions/Summary.svelte
+++ b/src/lib/components/Course/components/Lesson/Exercise/Submissions/Summary.svelte
@@ -13,6 +13,7 @@
   import { getChartOptions } from './functions';
   import { submissions } from './store';
   import '@carbon/charts-svelte/styles.css';
+  import { Loading } from 'carbon-components-svelte';
 
   export let isLoading = true;
 
@@ -138,7 +139,7 @@
 </script>
 
 {#if isLoading}
-  Loading data
+  <Loading withOverlay={true} />
 {:else if browser}
   <div>
     <h1>Question Charts</h1>
@@ -150,14 +151,12 @@
         {:else if q.type === 2}
           <svelte:component this={barChart} data={q.chartData} options={barOptions} />
         {:else}
-          <div class="max-h-[200px] overflow-auto">
+          <div class="max-h-[250px] overflow-auto">
             <ul>
               {#each q.chartData as answer (answer)}
                 {#if answer.group}
-                  <div
-                    class="border border-gray-300 rounded-md w-[80%] bg-slate-200 dark:bg-slate-500 p-2 my-1"
-                  >
-                    <li>{answer.group}</li>
+                  <div class="rounded bg-slate-100 dark:bg-slate-300 p-2 my-1 w-full">
+                    <li class="text-base font-medium text-black">{answer.group}</li>
                   </div>
                 {/if}
               {/each}