✨ Implemented in Live-Game

frontend/src/lib/admin.svelte

@@ -114,8 +114,8 @@
 			{#if selected_question + 1 === quiz_data.questions.length && timer_res === '0' && question_results !== null}
 				{#if JSON.stringify(final_results) === JSON.stringify([null])}
 					<button on:click={get_final_results} class="admin-button"
-						>Get final results</button
-					>
+						>Get final results
+					</button>
 				{/if}
 			{:else if timer_res === '0' || selected_question === -1}
 				{#if (selected_question + 1 !== quiz_data.questions.length && question_results !== null) || selected_question === -1}
@@ -129,13 +129,13 @@
 				{/if}
 				{#if question_results === null && selected_question !== -1}
 					<button on:click={get_question_results} class="admin-button"
-						>Show results</button
-					>
+						>Show results
+					</button>
 				{/if}
 			{:else if selected_question !== -1}
 				<button on:click={show_solutions} class="admin-button"
-					>Stop time and show solutions</button
-				>
+					>Stop time and show solutions
+				</button>
 			{:else}
 				<!--				<button
 					on:click={() => {
@@ -181,20 +181,28 @@
 			</div>
 		{/if}
 		{#if game_mode === 'kahoot'}
-			{#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD}
+			{#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD || quiz_data.questions[selected_question].type === QuizQuestionType.VOTING}
 				<div class="grid grid-cols-2 gap-2 w-full p-4">
 					{#each quiz_data.questions[selected_question].answers as answer, i}
 						<div
 							class="rounded-lg h-fit flex"
 							style="background-color: {answer.color ?? '#B45309'}"
-							class:opacity-50={!answer.right && timer_res === '0'}
+							class:opacity-50={!answer.right &&
+								timer_res === '0' &&
+								quiz_data.questions[selected_question].type !==
+									QuizQuestionType.ABCD}
 						>
 							<img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} />
 							<span
 								class="text-center text-2xl px-2 py-4 w-full text-black"
-								class:text-4xl={answer.right && timer_res === '0'}
-								class:underline={answer.right && timer_res === '0'}
-								>{answer.answer}</span
+								class:text-4xl={answer.right &&
+									timer_res === '0' &&
+									quiz_data.questions[selected_question].type !==
+										QuizQuestionType.ABCD}
+								class:underline={answer.right &&
+									timer_res === '0' &&
+									quiz_data.questions[selected_question].type !==
+										QuizQuestionType.ABCD}>{answer.answer}</span
 							>
 							<span class="pl-4 w-10" />
 						</div>
@@ -221,6 +229,16 @@
 					<h1 class="text-3xl">{$t('admin_page.no_answers')}</h1>
 				</div>
 			{/if}
+		{:else if quiz_data.questions[selected_question].type === QuizQuestionType.VOTING}
+			{#await import('$lib/play/admin/voting_results.svelte')}
+				<Spinner />
+			{:then c}
+				<svelte:component
+					this={c.default}
+					bind:data={question_results}
+					bind:question={quiz_data.questions[selected_question]}
+				/>
+			{/await}
 		{:else}
 			{#await import('$lib/play/admin/results.svelte')}
 				<Spinner />

frontend/src/lib/editor/VotingEditorPart.svelte

@@ -9,6 +9,7 @@
 	import { reach } from 'yup';
 	import { getLocalization } from '$lib/i18n';
 	import { VotingQuestionSchema } from '$lib/yupSchemas';
+	import { onMount } from 'svelte';
 
 	const { t } = getLocalization();
 
@@ -19,9 +20,19 @@
 
 	export let selected_question: number;
 	export let data: EditorData;
-	if (!Array.isArray(data.questions[selected_question].answers)) {
-		data.questions[selected_question].answers = [];
-	}
+	try {
+		if (typeof data.questions[selected_question].answers[0].right === 'boolean') {
+			data.questions[selected_question].answers = [];
+		}
+	} catch {}
+
+	/*console.log(data.questions[selected_question].answers, 'moIn!', data.questions[selected_question].answers.length);
+	onMount(() => {
+		for (let i = 0; i < data.questions[selected_question].answers; i++) {
+			console.log(data.questions[selected_question].answers[i], 'iterate');
+			data.questions[selected_question].answers[i].right = undefined;
+		}
+	});*/
 </script>
 
 <!--

frontend/src/lib/play/admin/voting_results.svelte

@@ -0,0 +1,50 @@
+<!--
+  - This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at https://mozilla.org/MPL/2.0/.
+  -->
+<script lang="ts">
+	import type { Question } from '$lib/quiz_types';
+
+	export let data;
+	export let question: Question;
+
+	let quiz_answers = [];
+
+	for (const i of question.answers) {
+		quiz_answers.push(i.answer);
+	}
+
+	console.log('mounted', question);
+	let sorted_data = {};
+	for (const i of quiz_answers) {
+		sorted_data[i] = 0;
+	}
+	for (const i of data) {
+		sorted_data[i.answer] += 1;
+	}
+</script>
+
+<div class="flex justify-center h-full w-full">
+	<div
+		class="m-auto grid grid-rows-3 w-fit gap-4"
+		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}
+			<div
+				class="w-20 bg-black self-end flex justify-center"
+				style="height: {(sorted_data[answer] * 20) / data.length}rem"
+			/>
+		{/each}
+		{#each quiz_answers as answer}
+			<div class="w-20">
+				<p class="-rotate-45">{answer}</p>
+			</div>
+		{/each}
+	</div>
+</div>

frontend/src/lib/play/question.svelte

@@ -113,7 +113,7 @@
 	</div>
 {/if}
 {#if timer_res !== '0'}
-	{#if question.type === QuizQuestionType.ABCD}
+	{#if question.type === QuizQuestionType.ABCD || QuizQuestionType.VOTING}
 		{#if game_mode === 'normal'}
 			<div class="grid grid-cols-2 gap-2 w-full p-4">
 				{#each question.answers as answer}
@@ -202,4 +202,11 @@
 			{/if}
 		</p>
 	{/if}
+	<!--{:else if question.type === QuizQuestionType.VOTING}
+	{#await import('$lib/play/admin/voting_results.svelte')}
+		<Spinner />
+	{:then c}
+		<svelte:component this={c.default} bind:data={question_results}
+						  bind:question={quiz_data.questions[selected_question]} />
+	{/await}-->
 {/if}

frontend/src/lib/practice/question.svelte

@@ -91,48 +91,64 @@
 				{/if}
 			</div>
 		{/if}
-	{:else if timer_res === '0'}
-		{#await import('svelte-range-slider-pips')}
-			<Spinner />
-		{:then c}
-			<div class="grayscale pointer-events-none w-full">
-				<svelte:component
-					this={c.default}
-					bind:values={slider_values}
-					bind:min={question.answers.min}
-					bind:max={question.answers.max}
-					pips
-					float
-					all="label"
-				/>
-			</div>
-		{/await}
-	{:else}
-		{#await import('svelte-range-slider-pips')}
-			<Spinner />
-		{:then c}
-			<div class:pointer-events-none={selected_answer !== undefined}>
-				<svelte:component
-					this={c.default}
-					bind:values={slider_value}
-					bind:min={question.answers.min}
-					bind:max={question.answers.max}
-					pips
-					float
-					all="label"
-				/>
-			</div>
-			<div class="flex justify-center">
-				<button
-					class="w-1/2 text-3xl bg-amber-700 my-2 disabled:opacity-60 border border-white"
-					disabled={selected_answer !== undefined}
-					on:click={() => {
-						selected_answer = slider_value[0];
-						timer_res = '0';
-					}}
-					>{$t('words.submit')}
-				</button>
-			</div>
-		{/await}
+	{:else if question.type === QuizQuestionType.RANGE}
+		{#if timer_res === '0'}
+			{#await import('svelte-range-slider-pips')}
+				<Spinner />
+			{:then c}
+				<div class="grayscale pointer-events-none w-full">
+					<svelte:component
+						this={c.default}
+						bind:values={slider_values}
+						bind:min={question.answers.min}
+						bind:max={question.answers.max}
+						pips
+						float
+						all="label"
+					/>
+				</div>
+			{/await}
+		{:else}
+			{#await import('svelte-range-slider-pips')}
+				<Spinner />
+			{:then c}
+				<div class:pointer-events-none={selected_answer !== undefined}>
+					<svelte:component
+						this={c.default}
+						bind:values={slider_value}
+						bind:min={question.answers.min}
+						bind:max={question.answers.max}
+						pips
+						float
+						all="label"
+					/>
+				</div>
+				<div class="flex justify-center">
+					<button
+						class="w-1/2 text-3xl bg-amber-700 my-2 disabled:opacity-60 border border-white"
+						disabled={selected_answer !== undefined}
+						on:click={() => {
+							selected_answer = slider_value[0];
+							timer_res = '0';
+						}}
+						>{$t('words.submit')}
+					</button>
+				</div>
+			{/await}
+		{/if}
+	{:else if question.type === QuizQuestionType.VOTING}
+		{#each question.answers as answer, i}
+			<button
+				disabled={selected_answer !== undefined || timer_res === '0'}
+				class="p-2 rounded-lg flex justify-center w-full transition bg-amber-300 my-5 disabled:grayscale text-black"
+				on:click={() => {
+					selected_answer = i;
+					timer_res = '0';
+				}}>{answer.answer}</button
+			>
+		{/each}
+		{#if timer_res === '0'}
+			<p>No correct answers, since this is a poll-question</p>
+		{/if}
 	{/if}
 </div>

frontend/src/lib/yupSchemas.ts

@@ -63,9 +63,12 @@ export const dataSchema = yup.object({
 					.lowercase(),
 				answers: yup.lazy((v) => {
 					if (Array.isArray(v)) {
+						console.log(v);
 						if (typeof v[0].right === 'boolean') {
+							console.log('Yup, ABCD');
 							return ABCDQuestionSchema;
 						} else {
+							console.log('Yup, Poll');
 							return VotingQuestionSchema;
 						}
 					} else {

frontend/src/routes/create/+page.svelte

@@ -9,6 +9,7 @@
 	import { getLocalization } from '$lib/i18n';
 	import { navbarVisible } from '$lib/stores';
 	import { QuizQuestionType } from '$lib/quiz_types';
+	import type { Question } from '$lib/quiz_types';
 
 	navbarVisible.set(false);
 
@@ -21,18 +22,6 @@
 		questions: Question[];
 	}
 
-	interface Question {
-		question: string;
-		time: string;
-		type?: QuizQuestionType;
-		answers: Answer[];
-	}
-
-	interface Answer {
-		right: boolean;
-		answer: string;
-	}
-
 	let responseData = {
 		open: false
 	};

frontend/src/routes/test/+page.svelte

@@ -0,0 +1,129 @@
+<!--
+  - This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at https://mozilla.org/MPL/2.0/.
+  -->
+<script lang="ts">
+	import { navbarVisible } from '$lib/stores';
+
+	navbarVisible.set(false);
+	const data = [
+		{
+			username: 'Mawoka',
+			answer: 'A very long answe-thing',
+			right: false,
+			time_taken: 1681.631,
+			score: 0
+		},
+		{
+			username: 'Mawoka',
+			answer: 'A very long answe-thing',
+			right: false,
+			time_taken: 1681.631,
+			score: 0
+		},
+		{
+			username: 'Mawoka',
+			answer: 'A very long answe-thing',
+			right: false,
+			time_taken: 1681.631,
+			score: 0
+		},
+		{
+			username: 'Mawoka',
+			answer: 'A very long answe-thing',
+			right: false,
+			time_taken: 1681.631,
+			score: 0
+		},
+		{
+			username: 'Mawoka',
+			answer: 'A very long answe-thing',
+			right: false,
+			time_taken: 1681.631,
+			score: 0
+		},
+		{
+			username: 'Mawoka',
+			answer: 'A very long answe-thing',
+			right: false,
+			time_taken: 1681.631,
+			score: 0
+		},
+		{
+			username: 'Mawoka',
+			answer: 'A very long answe-thing',
+			right: false,
+			time_taken: 1681.631,
+			score: 0
+		},
+		{
+			username: 'Mawoka',
+			answer: 'A very long answe-thing',
+			right: false,
+			time_taken: 1681.631,
+			score: 0
+		},
+		{
+			username: 'Mawoka',
+			answer: 'A very long answe-thing',
+			right: false,
+			time_taken: 1681.631,
+			score: 0
+		},
+
+		{
+			username: 'Mawoka',
+			answer: 'A very long answe-thing',
+			right: false,
+			time_taken: 1681.631,
+			score: 0
+		},
+		{
+			username: 'dewads',
+			answer: 'A very long answe-thing',
+			right: false,
+			time_taken: 1681.631,
+			score: 0
+		},
+		{
+			username: 'dsadsa',
+			answer: 'der',
+			right: false,
+			time_taken: 2613.532,
+			score: 0
+		}
+	];
+	const quiz_answers = ['A very long answe-thing', 'dieter', 'moin', 'der'];
+	let sorted_data = {};
+	for (const i of quiz_answers) {
+		sorted_data[i] = 0;
+	}
+	for (const i of data) {
+		sorted_data[i.answer] += 1;
+	}
+</script>
+
+<div class="flex justify-center h-screen w-full">
+	<div
+		class="m-auto grid grid-rows-3 w-fit gap-4"
+		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}
+			<div
+				class="w-20 bg-black self-end flex justify-center"
+				style="height: {(sorted_data[answer] * 20) / data.length}rem"
+			/>
+		{/each}
+		{#each quiz_answers as answer}
+			<div class="w-20">
+				<p class="-rotate-45">{answer}</p>
+			</div>
+		{/each}
+	</div>
+</div>