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

✨ Big update to the admin-screen and smaller bug-fixes

Browse Source
This commit is contained in:
Mawoka
2022-06-24 17:34:03 +02:00
parent c19e362aaf
commit ffee61fde3
14 changed files with 375 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/play/end.svelte
+13 -5
View File
@@ -1,5 +1,8 @@
<script lang="ts">
import type { QuizData } from '$lib/quiz_types';
import { getLocalization } from '$lib/i18n';
const { t } = getLocalization();
export let quiz_data: QuizData;
export let final_results: Array<null> | Array<Array<PlayerAnswer>>;
@@ -46,19 +49,19 @@
</script>
<div>
<h1 class="mx-auto text-center text-6xl mt-8">That's it! This was the quiz.</h1>
<h1 class="mx-auto text-center text-6xl mt-8">{$t('play_page.end_sentence')}</h1>
<div class="flex mx-auto w-fit flex-col pt-8 gap-2">
<div>
<p class="text-3xl text-center">
1st Place: <span class="underline">{winners_arr[0]}</span>
{$t('play_page.1st_place')}: <span class="underline">{winners_arr[0]}</span>
<span>with {winners[winners_arr[0]]} out of {quiz_data.questions.length}</span>
</p>
</div>
{#if winners_arr.length >= 2}
<div>
<p class="text-2xl text-center">
2nd Place: <span class="underline">{winners_arr[1]}</span>
{$t('play_page.2nd_place')}: <span class="underline">{winners_arr[1]}</span>
<span>with {winners[winners_arr[1]]} out of {quiz_data.questions.length}</span>
</p>
</div>
@@ -66,8 +69,13 @@
{#if winners_arr.length >= 3}
<div>
<p class="text-xl text-center">
3rd Place: <span class="underline">{winners_arr[2]}</span>
<span>with {winners[winners_arr[2]]} out of {quiz_data.questions.length}</span>
{$t('play_page.3rd place')}: <span class="underline">{winners_arr[2]}</span>
<span>
{$t('play_page.with_out_of', {
correct_questions: winners[winners_arr[2]],
total_question_count: quiz_data.questions.length
})}
</span>
</p>
</div>
{/if}
frontend/src/lib/play/show_results.svelte
+54 -58
View File
@@ -1,6 +1,8 @@
<script lang="ts">
import type { Answer, QuizData } from '$lib/quiz_types';
import { getLocalization } from '$lib/i18n';
const { t } = getLocalization();
export let results: Array<Answer>;
export let game_data: QuizData;
export let question_index: string;
@@ -14,8 +16,6 @@
for (let i = 0; i < results.length; i++) {
data_store[results[i].answer] += 1;
}
console.log(data_store);
</script>
<!-- Show the results from the results object -->
@@ -23,62 +23,58 @@
<!-- Path: frontend/src/lib/play/show_results.svelte -->
<div>
<h2>Results</h2>
<div class="flex flex-col mx-auto">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block py-2 min-w-full sm:px-6 lg:px-8">
<div class="overflow-hidden shadow-md sm:rounded-lg">
<table class="min-w-full">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th
scope="col"
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
>
Answer
</th>
<th
scope="col"
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
>
Count
</th>
<th
scope="col"
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
>
Right
</th>
</tr>
</thead>
<tbody>
<!-- Product 1 -->
{#each game_data.questions[parseInt(question_index)].answers as answer}
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<td
class="py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
{answer.answer}
</td>
<td
class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"
>
{data_store[answer.answer]}
</td>
<td
class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"
>
{#if answer.right}
✅
{:else}
❌
{/if}
</td>
</tr>{/each}
</tbody>
</table>
</div>
</div>
<h2 class="text-center text-3xl mb-8">{$t('words.result', { count: 2 })}</h2>
<div class="w-screen flex justify-center">
<div class="relative overflow-x-auto shadow-md rounded-lg">
<table class="w-fit text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th
scope="col"
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
>
{$t('words.answer')}
</th>
<th
scope="col"
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
>
{$t('words.count')}
</th>
<th
scope="col"
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
>
{$t('words.correct')}
</th>
</tr>
</thead>
<tbody>
{#each game_data.questions[parseInt(question_index)].answers as answer}
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<td
class="py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
{answer.answer}
</td>
<td
class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"
>
{data_store[answer.answer]}
</td>
<td
class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"
>
{#if answer.right}
✅
{:else}
❌
{/if}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
</div>