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

✨ Now showing correct and wrong answers in bar chart

Browse Source
This commit is contained in:
Mawoka
2023-10-18 20:31:07 +02:00
parent 22f0e9fa9d
commit fa3736cb4d
1 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/play/admin/voting_results.svelte
+15 -7
View File
@@ -6,16 +6,19 @@ SPDX-License-Identifier: MPL-2.0
<script lang="ts"> <script lang="ts">
import type { Question } from '$lib/quiz_types'; import type { Question } from '$lib/quiz_types';
import { QuizQuestionType } from '$lib/quiz_types';
export let data; export let data;
export let question: Question; export let question: Question;
let quiz_answers = []; let quiz_answers = [];
let quiz_colors = []; let quiz_colors = [];
let answer_correct: boolean[] = []
for (const i of question.answers) { for (const i of question.answers) {
quiz_answers.push(i.answer); quiz_answers.push(i.answer);
quiz_colors.push(i.color); quiz_colors.push(i.color);
answer_correct.push(i.right)
} }
let sorted_data = {}; let sorted_data = {};
@@ -32,17 +35,20 @@ SPDX-License-Identifier: MPL-2.0
class="m-auto w-fit gap-4 flex flex-col" class="m-auto w-fit gap-4 flex flex-col"
style="grid-template-columns: repeat({quiz_answers.length}, minmax(0, 1fr));" style="grid-template-columns: repeat({quiz_answers.length}, minmax(0, 1fr));"
> >
<div class="flex gap-4"> <div class="flex gap-12">
{#each quiz_answers as answer} {#each quiz_answers as answer}
<span class="text-center self-end mx-auto" <span class="text-center self-end mx-auto text-lg"
>{#if sorted_data[answer] > 0}{sorted_data[answer]}{/if}</span >{#if sorted_data[answer] > 0}{sorted_data[answer]}{/if}</span
> >
{/each} {/each}
</div> </div>
<div class="flex gap-4"> <div class="flex gap-12">
{#each quiz_answers as answer, i} {#each quiz_answers as answer, i}
<div <div
class="w-20 self-end flex justify-center border border-black" class="w-20 self-end flex justify-center border border-black shadow-xl rounded"
class:shadow-blue-500={answer_correct[i] && question.type !== QuizQuestionType.VOTING}
class:shadow-yellow-500={!answer_correct[i] && question.type !== QuizQuestionType.VOTING}
class:opacity-70={!answer_correct[i] && question.type !== QuizQuestionType.VOTING}
style="height: {(sorted_data[answer] * 20) / style="height: {(sorted_data[answer] * 20) /
data.length}rem; background-color: {quiz_colors[i] data.length}rem; background-color: {quiz_colors[i]
? quiz_colors[i] ? quiz_colors[i]
@@ -50,10 +56,12 @@ SPDX-License-Identifier: MPL-2.0
/> />
{/each} {/each}
</div> </div>
<div class="flex gap-4"> <div class="flex gap-12">
{#each quiz_answers as answer} {#each quiz_answers as answer,i}
<div class="w-20"> <div class="w-20">
<p class="-rotate-45">{@html answer}</p> <p class="-rotate-45 text-xl text-str"
class:line-through={!answer_correct[i] && question.type !== QuizQuestionType.VOTING}
>{@html answer}</p>
</div> </div>
{/each} {/each}
</div> </div>