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

✨ Made order-answers usable in practice-mode

Browse Source
This commit is contained in:
Mawoka
2023-01-26 21:11:41 +01:00
parent 751b5f83f0
commit ec4aae07f8
2 changed files with 104 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/i18n/locales/en.json
+3 -1
View File
@@ -154,7 +154,9 @@
"download": "Download", "download": "Download",
"continue": "Continue", "continue": "Continue",
"backup_code": "Backup-code", "backup_code": "Backup-code",
"totp": "Totp" "totp": "Totp",
"text": "Text",
"order": "order"
}, },
"editor": { "editor": {
"time_in_seconds": "Time in seconds", "time_in_seconds": "Time in seconds",
frontend/src/lib/practice/question.svelte
+101 -65
View File
@@ -3,11 +3,11 @@
- License, v. 2.0. If a copy of the MPL was not distributed with this - 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/. - file, You can obtain one at https://mozilla.org/MPL/2.0/.
--> -->
<script lang='ts'> <script lang="ts">
import type { Question } from '$lib/quiz_types'; import type { OrderQuizAnswer, Question } from '$lib/quiz_types';
import { QuizQuestionType } from '$lib/quiz_types';
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
import { getLocalization } from '$lib/i18n'; import { getLocalization } from '$lib/i18n';
import { QuizQuestionType } from '$lib/quiz_types';
import Spinner from '$lib/Spinner.svelte'; import Spinner from '$lib/Spinner.svelte';
import { flip } from 'svelte/animate'; import { flip } from 'svelte/animate';
@@ -43,6 +43,13 @@
let text_input; let text_input;
timer(question.time); timer(question.time);
function shuffleArray(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
const swapArrayElements = (arr, a: number, b: number) => { const swapArrayElements = (arr, a: number, b: number) => {
let _arr = [...arr]; let _arr = [...arr];
@@ -51,20 +58,46 @@
_arr[b] = temp; _arr[b] = temp;
return _arr; return _arr;
}; };
let original_order: OrderQuizAnswer[] = [];
if (question.type === QuizQuestionType.ORDER) {
for (let i = 0; i < question.answers.length; i++) {
question.answers[i] = { answer: question.answers[i].answer, id: i };
}
original_order = [...question.answers];
console.log(original_order);
shuffleArray(question.answers);
}
let order_corrected = false;
const select_complex_answer = () => {
/* const correct_order_ids = []
for (const e of original_order) {
correct_order_ids.push(e.id)
}
const user_set_ids = []
for (const e of answer) {
correct_order_ids.push(e.id)
}*/
question.answers = original_order;
order_corrected = true;
timer_res = '0';
};
</script> </script>
<div class='w-full px-6 lg:px-20 h-[80vh] absolute' in:fly={{ x: 100 }} out:fly={{ x: -100 }}> <div class="w-full px-6 lg:px-20 h-[80vh] absolute" in:fly={{ x: 100 }} out:fly={{ x: -100 }}>
<h1 class='text-3xl text-center'>{@html question.question}</h1> <h1 class="text-3xl text-center">{@html question.question}</h1>
{#if question.image !== null} {#if question.image !== null}
<div> <div>
<img <img
src={question.image} src={question.image}
class='max-h-[40vh] object-cover mx-auto mb-8 w-auto' class="max-h-[40vh] object-cover mx-auto mb-8 w-auto"
alt='Content for Question' alt="Content for Question"
/> />
</div> </div>
{/if} {/if}
<p class='text-center'>{timer_res}</p> <p class="text-center">{timer_res}</p>
{#if question.type === QuizQuestionType.ABCD} {#if question.type === QuizQuestionType.ABCD}
{#if show_results} {#if show_results}
<div> <div>
@@ -75,8 +108,8 @@
class:bg-red-500={!question.answers[i].right} class:bg-red-500={!question.answers[i].right}
class:text-xl={i === selected_answer} class:text-xl={i === selected_answer}
class:underline={i === selected_answer} class:underline={i === selected_answer}
class='p-2 rounded-lg flex justify-center w-full transition my-5 text-black' class="p-2 rounded-lg flex justify-center w-full transition my-5 text-black"
>{answer.answer}</button >{answer.answer}</button
> >
{/each} {/each}
</div> </div>
@@ -85,7 +118,7 @@
{#each question.answers as answer, i} {#each question.answers as answer, i}
<button <button
disabled={selected_answer !== undefined || timer_res === '0'} disabled={selected_answer !== undefined || timer_res === '0'}
class='p-2 rounded-lg flex justify-center w-full transition bg-amber-300 my-5 disabled:grayscale text-black' class="p-2 rounded-lg flex justify-center w-full transition bg-amber-300 my-5 disabled:grayscale text-black"
on:click={() => { on:click={() => {
selected_answer = i; selected_answer = i;
timer_res = '0'; timer_res = '0';
@@ -94,7 +127,7 @@
{/each} {/each}
{#if timer_res === '0'} {#if timer_res === '0'}
<button <button
class='bg-orange-500 p-2 rounded-lg flex justify-center w-full transition my-5 text-black' class="bg-orange-500 p-2 rounded-lg flex justify-center w-full transition my-5 text-black"
on:click={() => { on:click={() => {
show_results = true; show_results = true;
}}>{$t('admin_page.get_results')}</button }}>{$t('admin_page.get_results')}</button
@@ -107,7 +140,7 @@
{#await import('svelte-range-slider-pips')} {#await import('svelte-range-slider-pips')}
<Spinner /> <Spinner />
{:then c} {:then c}
<div class='grayscale pointer-events-none w-full'> <div class="grayscale pointer-events-none w-full">
<svelte:component <svelte:component
this={c.default} this={c.default}
bind:values={slider_values} bind:values={slider_values}
@@ -115,7 +148,7 @@
bind:max={question.answers.max} bind:max={question.answers.max}
pips pips
float float
all='label' all="label"
/> />
</div> </div>
{/await} {/await}
@@ -131,18 +164,18 @@
bind:max={question.answers.max} bind:max={question.answers.max}
pips pips
float float
all='label' all="label"
/> />
</div> </div>
<div class='flex justify-center'> <div class="flex justify-center">
<button <button
class='w-1/3 text-3xl bg-[#B07156] my-2 disabled:opacity-60 rounded-lg p-1 transition' class="w-1/3 text-3xl bg-[#B07156] my-2 disabled:opacity-60 rounded-lg p-1 transition"
disabled={selected_answer !== undefined} disabled={selected_answer !== undefined}
on:click={() => { on:click={() => {
selected_answer = slider_value[0]; selected_answer = slider_value[0];
timer_res = '0'; timer_res = '0';
}} }}
>{$t('words.submit')} >{$t('words.submit')}
</button> </button>
</div> </div>
{/await} {/await}
@@ -151,7 +184,7 @@
{#each question.answers as answer, i} {#each question.answers as answer, i}
<button <button
disabled={selected_answer !== undefined || timer_res === '0'} disabled={selected_answer !== undefined || timer_res === '0'}
class='p-2 rounded-lg flex justify-center w-full transition bg-amber-300 my-5 disabled:grayscale text-black' class="p-2 rounded-lg flex justify-center w-full transition bg-amber-300 my-5 disabled:grayscale text-black"
on:click={() => { on:click={() => {
selected_answer = i; selected_answer = i;
timer_res = '0'; timer_res = '0';
@@ -165,7 +198,7 @@
{#await import('$lib/play/admin/slide.svelte')} {#await import('$lib/play/admin/slide.svelte')}
<Spinner my={false} /> <Spinner my={false} />
{:then c} {:then c}
<div class='max-h-[90%] max-w-[90%]'> <div class="max-h-[90%] max-w-[90%]">
<svelte:component this={c.default} bind:question /> <svelte:component this={c.default} bind:question />
</div> </div>
{/await} {/await}
@@ -173,23 +206,23 @@
{#if timer_res === '0'} {#if timer_res === '0'}
{#each question.answers as answer, i} {#each question.answers as answer, i}
<div <div
class='p-2 rounded-lg flex justify-center w-full transition bg-gray-200 my-5 text-black' class="p-2 rounded-lg flex justify-center w-full transition bg-gray-200 my-5 text-black"
> >
{answer.answer} {answer.answer}
</div> </div>
{/each} {/each}
{:else} {:else}
<div class='flex justify-center mt-2'> <div class="flex justify-center mt-2">
<input <input
type='text' type="text"
bind:value={text_input} bind:value={text_input}
class='bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center' class="bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center"
/> />
</div> </div>
<div class='flex justify-center'> <div class="flex justify-center">
<button <button
disabled={!text_input} disabled={!text_input}
class='w-1/3 text-3xl bg-[#B07156] my-2 disabled:opacity-60 rounded-lg p-1 transition' class="w-1/3 text-3xl bg-[#B07156] my-2 disabled:opacity-60 rounded-lg p-1 transition"
on:click={() => { on:click={() => {
selected_answer = text_input; selected_answer = text_input;
timer_res = '0'; timer_res = '0';
@@ -197,75 +230,78 @@
> >
</div> </div>
{/if} {/if}
<div class='flex flex-col w-full h-full gap-4 px-4 py-6'> {:else if question.type === QuizQuestionType.ORDER}
<div class="flex flex-col w-full h-full gap-4 px-4 py-6">
{#each question.answers as answer, i (answer.id)} {#each question.answers as answer, i (answer.id)}
<div <div
class='w-full h-fit flex-row rounded-lg p-2 align-middle' class="w-full h-fit flex-row rounded-lg p-2 align-middle"
animate:flip={{ duration: 100 }} animate:flip={{ duration: 100 }}
style="background-color: {answer.color ?? '#b07156'}" style="background-color: {answer.color ?? '#b07156'}"
> >
<button <button
on:click={() => { on:click={() => {
question.answers = swapArrayElements(question.answers, i, i - 1); question.answers = swapArrayElements(question.answers, i, i - 1);
}} }}
class='disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition' class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition"
type='button' type="button"
disabled={i === 0} disabled={i === 0 || order_corrected}
> >
<svg <svg
class='w-8 h-8' class="w-8 h-8"
stroke-width='2' stroke-width="2"
viewBox='0 0 24 24' viewBox="0 0 24 24"
fill='none' fill="none"
xmlns='http://www.w3.org/2000/svg' xmlns="http://www.w3.org/2000/svg"
color='currentColor' color="currentColor"
> >
<path <path
d='M12 22a2 2 0 110-4 2 2 0 010 4zM12 15V2m0 0l3 3m-3-3L9 5' d="M12 22a2 2 0 110-4 2 2 0 010 4zM12 15V2m0 0l3 3m-3-3L9 5"
stroke='currentColor' stroke="currentColor"
stroke-width='2' stroke-width="2"
stroke-linecap='round' stroke-linecap="round"
stroke-linejoin='round' stroke-linejoin="round"
/> />
</svg> </svg>
</button> </button>
<p class='w-full text-center p-2 text-2xl'>{answer.answer}</p> <p class="w-full text-center p-2 text-2xl">{answer.answer}</p>
<button <button
on:click={() => { on:click={() => {
question.answers = swapArrayElements(question.answers, i, i + 1); question.answers = swapArrayElements(question.answers, i, i + 1);
}} }}
class='disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition' class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition"
type='button' type="button"
disabled={i === question.answers.length - 1} disabled={i === question.answers.length - 1 || order_corrected}
> >
<svg <svg
class='w-8 h-8' class="w-8 h-8"
stroke-width='2' stroke-width="2"
viewBox='0 0 24 24' viewBox="0 0 24 24"
fill='none' fill="none"
xmlns='http://www.w3.org/2000/svg' xmlns="http://www.w3.org/2000/svg"
color='currentColor' color="currentColor"
> >
<path <path
d='M12 6a2 2 0 110-4 2 2 0 010 4zM12 9v13m0 0l3-3m-3 3l-3-3' d="M12 6a2 2 0 110-4 2 2 0 010 4zM12 9v13m0 0l3-3m-3 3l-3-3"
stroke='currentColor' stroke="currentColor"
stroke-width='2' stroke-width="2"
stroke-linecap='round' stroke-linecap="round"
stroke-linejoin='round' stroke-linejoin="round"
/> />
</svg> </svg>
</button> </button>
</div> </div>
{/each} {/each}
<button <button
class='bg-[#B07156] hover:bg-amber-700 text-white font-bold py-2 px-4 rounded-lg mt-2 transition w-full' class="bg-[#B07156] hover:bg-amber-700 text-white font-bold py-2 px-4 rounded-lg mt-2 transition w-full"
type='button' type="button"
disabled={timer_res === '0'}
on:click={() => { on:click={() => {
select_complex_answer(question.answers); select_complex_answer();
}} }}
> >
{$t('words.submit')} {$t('words.submit')}
</button> </button>
</div>
{/if} {/if}
</div> </div>