From fa3736cb4d328809058d598a7ad9894b01d4ad55 Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Wed, 18 Oct 2023 20:31:07 +0200
Subject: [PATCH] :sparkles: Now showing correct and wrong answers in bar chart

---
 .../src/lib/play/admin/voting_results.svelte  | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/play/admin/voting_results.svelte b/frontend/src/lib/play/admin/voting_results.svelte
index 0b25ddb..a9e3f5e 100644
--- a/frontend/src/lib/play/admin/voting_results.svelte
+++ b/frontend/src/lib/play/admin/voting_results.svelte
@@ -6,16 +6,19 @@ SPDX-License-Identifier: MPL-2.0
 
 <script lang="ts">
 	import type { Question } from '$lib/quiz_types';
+	import { QuizQuestionType } from '$lib/quiz_types';
 
 	export let data;
 	export let question: Question;
 
 	let quiz_answers = [];
 	let quiz_colors = [];
+	let answer_correct: boolean[] = []
 
 	for (const i of question.answers) {
 		quiz_answers.push(i.answer);
 		quiz_colors.push(i.color);
+		answer_correct.push(i.right)
 	}
 
 	let sorted_data = {};
@@ -32,17 +35,20 @@ SPDX-License-Identifier: MPL-2.0
 		class="m-auto w-fit gap-4 flex flex-col"
 		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}
-				<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
 				>
 			{/each}
 		</div>
-		<div class="flex gap-4">
+		<div class="flex gap-12">
 			{#each quiz_answers as answer, i}
 				<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) /
 						data.length}rem; background-color: {quiz_colors[i]
 						? quiz_colors[i]
@@ -50,10 +56,12 @@ SPDX-License-Identifier: MPL-2.0
 				/>
 			{/each}
 		</div>
-		<div class="flex gap-4">
-			{#each quiz_answers as answer}
+		<div class="flex gap-12">
+			{#each quiz_answers as answer,i}
 				<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>
 			{/each}
 		</div>