Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio
This commit is contained in:
Rotimi Best
+56
-21
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -58,13 +58,12 @@ export function getPropsForQuestion(
|
||||
}
|
||||
|
||||
return {
|
||||
title: questionIndex + '. ' + question.title,
|
||||
index: questionIndex + '. ',
|
||||
title: question.title,
|
||||
name: `${question.name}`,
|
||||
options: question.options,
|
||||
code: question.code,
|
||||
defaultValue: isOpenQuesiton
|
||||
? answers[question.name] || ''
|
||||
: answers[question.name] || [],
|
||||
defaultValue: isOpenQuesiton ? answers[question.name] || '' : answers[question.name] || [],
|
||||
onSubmit,
|
||||
onPrevious,
|
||||
disablePreviousButton: questionIndex === 1,
|
||||
@@ -75,18 +74,18 @@ export function getPropsForQuestion(
|
||||
nextButtonProps: isOpenQuesiton
|
||||
? {
|
||||
label: 'Next',
|
||||
isActive: true,
|
||||
isActive: true
|
||||
}
|
||||
: isCorrect
|
||||
? {
|
||||
label: isLast ? 'Finish' : 'Next',
|
||||
isActive: true,
|
||||
disableOptionSelect: true,
|
||||
disableOptionSelect: true
|
||||
}
|
||||
: {
|
||||
label: 'Check',
|
||||
isActive: false,
|
||||
},
|
||||
isActive: false
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
import Grade from '$lib/components/Question/Grade.svelte';
|
||||
|
||||
export let title = '';
|
||||
export let index = 1;
|
||||
export let code;
|
||||
export let name = '';
|
||||
export let options = [];
|
||||
@@ -63,7 +64,12 @@
|
||||
<div class="flex items-center justify-between">
|
||||
<HtmlRender className="mt-4">
|
||||
<svelte:fragment slot="content">
|
||||
<h3 class={typeof grade === 'number' ? 'w-3/4' : ''}>{title}</h3>
|
||||
<span class={`${typeof grade === 'number' ? 'w-3/4' : ''} flex gap-1`}>
|
||||
<h3>{index}</h3>
|
||||
<h3>
|
||||
{title}
|
||||
</h3>
|
||||
</span>
|
||||
</svelte:fragment>
|
||||
</HtmlRender>
|
||||
<Grade {gradeMax} {grade} {disableGrading} />
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
import Grade from '$lib/components/Question/Grade.svelte';
|
||||
|
||||
export let title = '';
|
||||
export let index = 1;
|
||||
export let code = '';
|
||||
export let name = '';
|
||||
export let options = [];
|
||||
@@ -65,9 +66,12 @@
|
||||
<div class="flex items-center justify-between">
|
||||
<HtmlRender className="mt-4">
|
||||
<svelte:fragment slot="content">
|
||||
<h3 class="dark:text-white {labelClassName} {typeof grade === 'number' && 'w-3/4'}">
|
||||
{title}
|
||||
</h3>
|
||||
<span
|
||||
class="dark:text-white flex gap-1 {labelClassName} {typeof grade === 'number' && 'w-3/4'}"
|
||||
>
|
||||
<h3>{index}</h3>
|
||||
<h3>{title}</h3>
|
||||
</span>
|
||||
</svelte:fragment>
|
||||
</HtmlRender>
|
||||
<Grade {gradeMax} {grade} {disableGrading} />
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
import Grade from '$lib/components/Question/Grade.svelte';
|
||||
|
||||
export let title = '';
|
||||
export let index = 1;
|
||||
export let code = '';
|
||||
export let name = '';
|
||||
export let onSubmit = () => {};
|
||||
@@ -37,7 +38,10 @@
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<HtmlRender className="mt-4">
|
||||
<svelte:fragment slot="content">
|
||||
<h3 class={typeof grade === 'number' ? 'w-3/4' : ''}>{title}</h3>
|
||||
<span class={`${typeof grade === 'number' ? 'w-3/4' : ''} flex gap-1`}>
|
||||
<h3>{index}</h3>
|
||||
<h3>{title}</h3>
|
||||
</span>
|
||||
</svelte:fragment>
|
||||
</HtmlRender>
|
||||
<Grade {gradeMax} {grade} {disableGrading} />
|
||||
|
||||
Reference in New Issue
Block a user