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'}" style="background-color: {answer.color ?? '#B45309'}"
class:opacity-50={!answer.right && class:opacity-50={!answer.right &&
timer_res === '0' && timer_res === '0' &&
quiz_data.questions[selected_question].type !== quiz_data.questions[selected_question].type ===
QuizQuestionType.ABCD} QuizQuestionType.ABCD}
> >
<img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} /> <img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} />
frontend/src/lib/play/question.svelte
+16 -8
View File
@@ -98,12 +98,17 @@
$: console.log(slider_value, 'values'); $: console.log(slider_value, 'values');
</script> </script>
<div class="h-screen w-screen">
<div class="flex flex-col justify-center w-screen h-1/6"> <div class="flex flex-col justify-center w-screen h-1/6">
<h1 class="text-6xl text-center text-black dark:text-white"> <h1 class="text-3xl text-center text-black dark:text-white mt-2">
{@html question.question} {@html question.question}
</h1> </h1>
<div class="mx-auto my-2"> <div class="mx-auto my-2">
<CircularTimer bind:text={timer_res} bind:progress={circular_prgoress} color="#ef4444" /> <CircularTimer
bind:text={timer_res}
bind:progress={circular_prgoress}
color="#ef4444"
/>
</div> </div>
</div> </div>
{#if question.image !== null && game_mode !== 'kahoot'} {#if question.image !== null && game_mode !== 'kahoot'}
@@ -129,10 +134,10 @@
{/each} {/each}
</div> </div>
{:else if game_mode === 'kahoot'} {:else if game_mode === 'kahoot'}
<div class="grid grid-cols-2 gap-2 w-full p-4"> <div class="grid grid-cols-2 gap-2 w-full p-4 h-5/6">
{#each question.answers as answer, i} {#each question.answers as answer, i}
<button <button
class="rounded-lg h-fit flex align-middle justify-center disabled:opacity-60 p-3" class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3"
style="background-color: {answer.color ?? '#B45309'}" style="background-color: {answer.color ?? '#B45309'}"
disabled={selected_answer !== undefined} disabled={selected_answer !== undefined}
on:click={() => selectAnswer(answer.answer)} on:click={() => selectAnswer(answer.answer)}
@@ -179,13 +184,15 @@
<button <button
class="text-3xl rounded-lg h-fit flex align-middle justify-center p-3 bg-green-600" class="text-3xl rounded-lg h-fit flex align-middle justify-center p-3 bg-green-600"
disabled disabled
class:opacity-30={answer.answer !== selected_answer}>{answer.answer}</button class:opacity-30={answer.answer !== selected_answer}
>{answer.answer}</button
> >
{:else} {:else}
<button <button
class="text-3xl rounded-lg h-fit flex align-middle justify-center p-3 bg-red-500" class="text-3xl rounded-lg h-fit flex align-middle justify-center p-3 bg-red-500"
disabled disabled
class:opacity-30={answer.answer !== selected_answer}>{answer.answer}</button class:opacity-30={answer.answer !== selected_answer}
>{answer.answer}</button
> >
{/if} {/if}
{/each} {/each}
@@ -196,8 +203,8 @@
<Spinner /> <Spinner />
{:else} {:else}
<p class="text-center"> <p class="text-center">
Every number between {solution.answers.min_correct} and {solution.answers.max_correct} was Every number between {solution.answers.min_correct} and {solution.answers
correct. You got {selected_answer}, so you have been .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} {#if solution.answers.min_correct <= parseInt(selected_answer) && parseInt(selected_answer) <= solution.answers.max_correct}
correct correct
{:else} {:else}
@@ -213,3 +220,4 @@
bind:question={quiz_data.questions[selected_question]} /> bind:question={quiz_data.questions[selected_question]} />
{/await}--> {/await}-->
{/if} {/if}
</div>