LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Added Check Choice question type

Browse Source
This commit is contained in:
Mawoka
2023-05-24 21:40:53 +02:00
parent d713f76d0a
commit c6dc71b941
13 changed files with 164 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/play/question.svelte
+32 -36
View File
@@ -32,10 +32,10 @@
}
/* if (typeof question_index === 'string') {
question_index = parseInt(question_index);
} else {
throw new Error('question_index must be a string or number');
}*/
question_index = parseInt(question_index);
} else {
throw new Error('question_index must be a string or number');
}*/
let timer_res = question.time;
let selected_answer: string;
@@ -251,30 +251,6 @@
</BrownButton>
</div>
</div>
{:else if question.type === QuizQuestionType.ABCD}
{#if solution === undefined}
<Spinner />
{:else}
<div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4">
{#each solution.answers as answer}
{#if answer.right}
<button
class="text-3xl rounded-lg h-fit flex align-middle justify-center p-3 bg-green-600"
disabled
class:opacity-30={answer.answer !== selected_answer}
>{answer.answer}</button
>
{:else}
<button
class="text-3xl rounded-lg h-fit flex align-middle justify-center p-3 bg-red-500"
disabled
class:opacity-30={answer.answer !== selected_answer}
>{answer.answer}</button
>
{/if}
{/each}
</div>
{/if}
{:else if question.type === QuizQuestionType.RANGE}
{#if solution === undefined}
<Spinner />
@@ -291,8 +267,8 @@
{/if}
{:else if question.type === QuizQuestionType.ORDER}
<!-- {#if solution === undefined}
<Spinner />
{:else}-->
<Spinner />
{:else}-->
<div class="flex flex-col w-full h-full gap-4 px-4 py-6">
{#each question.answers as answer, i (answer.id)}
<div
@@ -365,14 +341,34 @@
</div>
</div>
<!--{/if}-->
{:else if question.type === QuizQuestionType.CHECK}
{#await import('./questions/check.svelte')}
<Spinner />
{:then c}
<svelte:component
this={c.default}
bind:question
bind:selected_answer
bind:game_mode
/>
<div class="flex justify-center h-[5%]">
<div class="w-1/2">
<BrownButton
disabled={!selected_answer}
on:click={() => selectAnswer(selected_answer)}
>{$t('words.submit')}
</BrownButton>
</div>
</div>
{/await}
{/if}
<!--{:else if question.type === QuizQuestionType.VOTING}
{#await import('$lib/play/admin/voting_results.svelte')}
<Spinner />
{:then c}
<svelte:component this={c.default} bind:data={question_results}
bind:question={quiz_data.questions[selected_question]} />
{/await}-->
{#await import('$lib/play/admin/voting_results.svelte')}
<Spinner />
{:then c}
<svelte:component this={c.default} bind:data={question_results}
bind:question={quiz_data.questions[selected_question]} />
{/await}-->
{/if}
</div>
frontend/src/lib/play/questions/check.svelte
+63
View File
@@ -0,0 +1,63 @@
<!--
- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
-->
<script lang="ts">
import type { Question } from '$lib/quiz_types';
import { get_foreground_color } from '$lib/helpers';
import { kahoot_icons } from '$lib/play/kahoot_mode_assets/kahoot_icons';
// import CircularTimer from '$lib/play/circular_progress.svelte';
const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
export let question: Question;
export let selected_answer = '';
export let game_mode;
let _selected_answers = [false, false, false, false];
const selectAnswer = (i: number) => {
_selected_answers[i] = !_selected_answers[i];
selected_answer = '';
for (let i = 0; i < _selected_answers.length; i++) {
if (_selected_answers[i]) {
selected_answer += String(i);
}
}
selected_answer = selected_answer;
console.log(_selected_answers, selected_answer);
};
</script>
<div class="w-full h-[95%]">
<!--
<div
class="absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-50"
>
<CircularTimer
bind:text={timer_res}
bind:progress={circular_prgoress}
color="#ef4444"
/>
</div>
-->
<div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4 h-full">
{#each question.answers as answer, i}
<button
class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3 border-2 border-black opacity-50 transition-all"
style="background-color: {answer.color ??
default_colors[i]}; color: {get_foreground_color(
answer.color ?? default_colors[i]
)}"
on:click={() => selectAnswer(i)}
class:opacity-100={_selected_answers[i]}
>
{#if game_mode === 'kahoot'}
<img class="h-2/3 inline-block m-auto" alt="Icon" src={kahoot_icons[i]} />
{:else}
<p class="m-auto">{answer.answer}</p>
{/if}
</button>
{/each}
</div>
</div>