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

✨ Closes #184 and closes #174

Browse Source
This commit is contained in:
Mawoka
2022-12-03 15:34:42 +01:00
parent 5934d06c7f
commit ac9a84c5e8
2 changed files with 113 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/admin.svelte
+1 -1
View File
@@ -193,7 +193,7 @@
style="background-color: {answer.color ?? '#B45309'}"
class:opacity-50={!answer.right &&
timer_res === '0' &&
quiz_data.questions[selected_question].type !==
quiz_data.questions[selected_question].type ===
QuizQuestionType.ABCD}
>
<img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} />
frontend/src/lib/play/question.svelte
+112 -104
View File
@@ -98,118 +98,126 @@
$: console.log(slider_value, 'values');
</script>
<div class="flex flex-col justify-center w-screen h-1/6">
<h1 class="text-6xl text-center text-black dark:text-white">
{@html question.question}
</h1>
<div class="mx-auto my-2">
<CircularTimer bind:text={timer_res} bind:progress={circular_prgoress} color="#ef4444" />
<div class="h-screen w-screen">
<div class="flex flex-col justify-center w-screen h-1/6">
<h1 class="text-3xl text-center text-black dark:text-white mt-2">
{@html question.question}
</h1>
<div class="mx-auto my-2">
<CircularTimer
bind:text={timer_res}
bind:progress={circular_prgoress}
color="#ef4444"
/>
</div>
</div>
</div>
{#if question.image !== null && game_mode !== 'kahoot'}
<div>
<img
src={question.image}
class="h-2/5 object-cover mx-auto mb-8"
alt="Content for Question"
/>
</div>
{/if}
{#if timer_res !== '0'}
{#if question.type === QuizQuestionType.ABCD || question.type === QuizQuestionType.VOTING}
{#if game_mode === 'normal'}
<div class="grid grid-cols-2 gap-2 w-full p-4">
{#each question.answers as answer}
<button
class="rounded-lg h-fit flex align-middle justify-center disabled:opacity-60 p-3"
style="background-color: {answer.color ?? '#B45309'}"
disabled={selected_answer !== undefined}
on:click={() => selectAnswer(answer.answer)}>{answer.answer}</button
>
{/each}
</div>
{:else if game_mode === 'kahoot'}
<div class="grid grid-cols-2 gap-2 w-full p-4">
{#each question.answers as answer, i}
<button
class="rounded-lg h-fit flex align-middle justify-center disabled:opacity-60 p-3"
style="background-color: {answer.color ?? '#B45309'}"
disabled={selected_answer !== undefined}
on:click={() => selectAnswer(answer.answer)}
>
<img class="w-10 inline-block" alt="Icon" src={kahoot_icons[i]} />
</button>
{/each}
</div>
{:else}
<p>Error</p>
{/if}
{:else if question.type === QuizQuestionType.RANGE}
{#await import('svelte-range-slider-pips')}
<Spinner />
{:then c}
<div class:pointer-events-none={selected_answer !== undefined}>
<svelte:component
this={c.default}
bind:values={slider_value}
bind:min={question.answers.min}
bind:max={question.answers.max}
pips
float
all="label"
/>
</div>
<div class="flex justify-center">
<button
class="w-1/2 text-3xl bg-[#B07156] my-2 disabled:opacity-60 border border-white"
disabled={selected_answer !== undefined}
on:click={() => selectAnswer(slider_value[0])}
>{$t('words.submit')}
</button>
</div>
{/await}
{/if}
{:else if question.type === QuizQuestionType.ABCD}
{#if solution === undefined}
<Spinner />
{:else}
<div class="grid grid-cols-2 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}
{#if question.image !== null && game_mode !== 'kahoot'}
<div>
<img
src={question.image}
class="h-2/5 object-cover mx-auto mb-8"
alt="Content for Question"
/>
</div>
{/if}
{:else if question.type === QuizQuestionType.RANGE}
{#if solution === undefined}
<Spinner />
{:else}
<p class="text-center">
Every number between {solution.answers.min_correct} and {solution.answers.max_correct} was
correct. You got {selected_answer}, so you have been
{#if solution.answers.min_correct <= parseInt(selected_answer) && parseInt(selected_answer) <= solution.answers.max_correct}
correct
{#if timer_res !== '0'}
{#if question.type === QuizQuestionType.ABCD || question.type === QuizQuestionType.VOTING}
{#if game_mode === 'normal'}
<div class="grid grid-cols-2 gap-2 w-full p-4">
{#each question.answers as answer}
<button
class="rounded-lg h-fit flex align-middle justify-center disabled:opacity-60 p-3"
style="background-color: {answer.color ?? '#B45309'}"
disabled={selected_answer !== undefined}
on:click={() => selectAnswer(answer.answer)}>{answer.answer}</button
>
{/each}
</div>
{:else if game_mode === 'kahoot'}
<div class="grid grid-cols-2 gap-2 w-full p-4 h-5/6">
{#each question.answers as answer, i}
<button
class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3"
style="background-color: {answer.color ?? '#B45309'}"
disabled={selected_answer !== undefined}
on:click={() => selectAnswer(answer.answer)}
>
<img class="w-10 inline-block" alt="Icon" src={kahoot_icons[i]} />
</button>
{/each}
</div>
{:else}
wrong.
<p>Error</p>
{/if}
</p>
{/if}
<!--{:else if question.type === QuizQuestionType.VOTING}
{:else if question.type === QuizQuestionType.RANGE}
{#await import('svelte-range-slider-pips')}
<Spinner />
{:then c}
<div class:pointer-events-none={selected_answer !== undefined}>
<svelte:component
this={c.default}
bind:values={slider_value}
bind:min={question.answers.min}
bind:max={question.answers.max}
pips
float
all="label"
/>
</div>
<div class="flex justify-center">
<button
class="w-1/2 text-3xl bg-[#B07156] my-2 disabled:opacity-60 border border-white"
disabled={selected_answer !== undefined}
on:click={() => selectAnswer(slider_value[0])}
>{$t('words.submit')}
</button>
</div>
{/await}
{/if}
{:else if question.type === QuizQuestionType.ABCD}
{#if solution === undefined}
<Spinner />
{:else}
<div class="grid grid-cols-2 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 />
{:else}
<p class="text-center">
Every number between {solution.answers.min_correct} and {solution.answers
.max_correct} was correct. You got {selected_answer}, so you have been
{#if solution.answers.min_correct <= parseInt(selected_answer) && parseInt(selected_answer) <= solution.answers.max_correct}
correct
{:else}
wrong.
{/if}
</p>
{/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}-->
{/if}
{/if}
</div>