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

✨ Closing #216

Browse Source
This commit is contained in:
Mawoka
2023-08-07 16:10:02 +02:00
parent 25806f3a04
commit 994983c58e
5 changed files with 109 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/play/admin/results.svelte
+8 -2
View File
@@ -5,13 +5,16 @@ SPDX-License-Identifier: MPL-2.0
-->
<script lang="ts">
import VotingResults from './voting_results.svelte';
import { flip } from 'svelte/animate';
import { fly } from 'svelte/transition';
import { onMount } from 'svelte';
import { getLocalization } from '$lib/i18n';
import type { Question } from '$lib/quiz_types';
const { t } = getLocalization();
export let data;
export let question: Question;
export let new_data: Array<{
username: string;
@@ -89,7 +92,7 @@ SPDX-License-Identifier: MPL-2.0
// https://svelte.dev/repl/96a58afdea2248a5b7e489160ffba887?version=3.44.2
</script>
<main>
<div class="h-full flex flex-col">
<div class="flex justify-center">
<div>
<table class="table-auto text-xl">
@@ -124,4 +127,7 @@ SPDX-License-Identifier: MPL-2.0
</table>
</div>
</div>
</main>
<div class="mt-12">
<VotingResults data={new_data} {question} />
</div>
</div>
frontend/src/lib/play/admin/voting_results.svelte
+27 -20
View File
@@ -18,7 +18,6 @@ SPDX-License-Identifier: MPL-2.0
quiz_colors.push(i.color);
}
console.log('mounted', question);
let sorted_data = {};
for (const i of quiz_answers) {
sorted_data[i] = 0;
@@ -28,27 +27,35 @@ SPDX-License-Identifier: MPL-2.0
}
</script>
<div class="flex justify-center h-full w-full">
<div class="flex justify-center w-full">
<div
class="m-auto grid grid-rows-3 w-fit gap-4"
class="m-auto w-fit gap-4 flex flex-col"
style="grid-template-columns: repeat({quiz_answers.length}, minmax(0, 1fr));"
>
{#each quiz_answers as answer}
<span class="text-center self-end"
>{#if sorted_data[answer] > 0}{sorted_data[answer]}{/if}</span
>
{/each}
{#each quiz_answers as answer, i}
<div
class="w-20 self-end flex justify-center"
style="height: {(sorted_data[answer] * 20) /
data.length}rem; background-color: {quiz_colors[i] ? quiz_colors[i] : 'black'}"
/>
{/each}
{#each quiz_answers as answer}
<div class="w-20">
<p class="-rotate-45">{@html answer}</p>
</div>
{/each}
<div class="flex gap-4">
{#each quiz_answers as answer}
<span class="text-center self-end mx-auto"
>{#if sorted_data[answer] > 0}{sorted_data[answer]}{/if}</span
>
{/each}
</div>
<div class="flex gap-4">
{#each quiz_answers as answer, i}
<div
class="w-20 self-end flex justify-center"
style="height: {(sorted_data[answer] * 20) /
data.length}rem; background-color: {quiz_colors[i]
? quiz_colors[i]
: 'black'}"
/>
{/each}
</div>
<div class="flex gap-4">
{#each quiz_answers as answer}
<div class="w-20">
<p class="-rotate-45">{@html answer}</p>
</div>
{/each}
</div>
</div>
</div>