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

✨ Slides kinda working

Browse Source
This commit is contained in:
Mawoka
2022-12-22 17:54:22 +01:00
parent 0af5aeef95
commit 8d8c524e94
7 changed files with 118 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/admin.svelte
+54 -42
View File
@@ -87,14 +87,14 @@
timer_res = seconds.toString();
}, 1000);
};
let circular_prgoress = 0;
let circular_progress = 0;
$: {
try {
circular_prgoress =
circular_progress =
1 -
((100 / quiz_data.questions[selected_question].time) * parseInt(timer_res)) / 100;
} catch {
circular_prgoress = 0;
circular_progress = 0;
}
}
</script>
@@ -126,7 +126,7 @@
</button>
{/if}
{#if question_results === null && selected_question !== -1}
<button on:click={get_question_results} class="admin-button">Show results </button>
<button on:click={get_question_results} class="admin-button">Show results</button>
{/if}
{:else if selected_question !== -1}
<button on:click={show_solutions} class="admin-button"
@@ -153,50 +153,62 @@
<div class="w-full h-full pt-28">
{#if timer_res !== undefined && !final_results_clicked && !question_results}
<div class="flex flex-col justify-center w-screen h-1/6">
<h1 class="text-6xl text-center">
{@html quiz_data.questions[selected_question].question}
</h1>
<!-- <span class='text-center py-2 text-lg'>{$t('admin_page.time_left')}: {timer_res}</span>-->
<div class="mx-auto my-2">
<CircularTimer
bind:text={timer_res}
bind:progress={circular_prgoress}
color="#ef4444"
{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
{#await import('$lib/play/admin/slide.svelte')}
<Spinner my_20={false} />
{:then c}
<svelte:component
this={c.default}
bind:question={quiz_data.questions[selected_question]}
/>
{/await}
{:else}
<div class="flex flex-col justify-center w-screen h-1/6">
<h1 class="text-6xl text-center">
{@html quiz_data.questions[selected_question].question}
</h1>
<!-- <span class='text-center py-2 text-lg'>{$t('admin_page.time_left')}: {timer_res}</span>-->
<div class="mx-auto my-2">
<CircularTimer
bind:text={timer_res}
bind:progress={circular_progress}
color="#ef4444"
/>
</div>
</div>
</div>
{#if quiz_data.questions[selected_question].image !== null}
<div>
<img
src={quiz_data.questions[selected_question].image}
class="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
alt="Content for Question"
/>
</div>
{/if}
{#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD || quiz_data.questions[selected_question].type === QuizQuestionType.VOTING}
<div class="grid grid-cols-2 gap-2 w-full p-4">
{#each quiz_data.questions[selected_question].answers as answer, i}
<div
class="rounded-lg h-fit flex"
style="background-color: {answer.color ?? '#B45309'}"
class:opacity-50={!answer.right &&
timer_res === '0' &&
quiz_data.questions[selected_question].type === QuizQuestionType.ABCD}
>
<img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} />
<span class="text-center text-2xl px-2 py-4 w-full text-black"
>{answer.answer}</span
{#if quiz_data.questions[selected_question].image !== null}
<div>
<img
src={quiz_data.questions[selected_question].image}
class="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
alt="Content for Question"
/>
</div>
{/if}
{#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD || quiz_data.questions[selected_question].type === QuizQuestionType.VOTING}
<div class="grid grid-cols-2 gap-2 w-full p-4">
{#each quiz_data.questions[selected_question].answers as answer, i}
<div
class="rounded-lg h-fit flex"
style="background-color: {answer.color ?? '#B45309'}"
class:opacity-50={!answer.right &&
timer_res === '0' &&
quiz_data.questions[selected_question].type ===
QuizQuestionType.ABCD}
>
<span class="pl-4 w-10" />
</div>
{/each}
</div>
<img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} />
<span class="text-center text-2xl px-2 py-4 w-full text-black"
>{answer.answer}</span
>
<span class="pl-4 w-10" />
</div>
{/each}
</div>
{/if}
{/if}
{/if}
<br />
{#if timer_res === '0' && JSON.stringify(final_results) === JSON.stringify([null])}
{#if timer_res === '0' && JSON.stringify(final_results) === JSON.stringify( [null] ) && quiz_data.questions[selected_question].type !== QuizQuestionType.SLIDE}
{#if question_results === null}{:else if question_results === undefined}
{#if !final_results_clicked}
<div class="w-full flex justify-center">