💄 Show quiz stats on listing page

Malte2036 · Jul 1, 2024 · 493cc6e · 493cc6e
1 parent 150de02
commit 493cc6e
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 21 deletions.
diff --git a/...b/quiz/question/QuestionStatistics.svelte → ...tion/QuestionStatisticsForQuestion.svelte b/...b/quiz/question/QuestionStatistics.svelte → ...tion/QuestionStatisticsForQuestion.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 	import type { AnsweredCountData } from '../../../routes/(main)/quiz/[type]/[questionId]/+page.server';
+	import QuestionsStatistics from './QuestionsStatistics.svelte';
 
 	export let answeredCountData: AnsweredCountData | undefined;
 	export let currentQuestionAnsweredCountData: AnsweredCountData | undefined;
 </script>
 
-<div class="flex flex-col gap-2 text-base font-normal text-gray-400">
-	<h3>
+<div class="flex flex-col gap-2">
+	<h3 class="text-base font-normal text-gray-400">
 		(zu {currentQuestionAnsweredCountData !== undefined &&
 		currentQuestionAnsweredCountData.right + currentQuestionAnsweredCountData.wrong != 0
 			? (
@@ -18,21 +19,5 @@
 					.replace(/\.0+$/, '')
 			: ''}% wurde diese Frage richtig beantwortet)
 	</h3>
-
-	<div>
-		Fragen beantwortet:
-		{#if answeredCountData}
-			{answeredCountData.right + answeredCountData.wrong}
-		{/if}
-		<br />
-		Richtig beantwortet:
-		{#if answeredCountData}
-			{answeredCountData.right}
-		{/if}
-		<br />
-		Falsch beantwortet:
-		{#if answeredCountData}
-			{answeredCountData.wrong}
-		{/if}
-	</div>
+	<QuestionsStatistics {answeredCountData} />
 </div>
diff --git a/src/lib/quiz/question/QuestionsStatistics.svelte b/src/lib/quiz/question/QuestionsStatistics.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { AnsweredCountData } from '../../../routes/(main)/quiz/[type]/[questionId]/+page.server';
+
+	export let answeredCountData: AnsweredCountData | undefined;
+</script>
+
+<div class="text-base font-normal text-gray-400">
+	Fragen beantwortet:
+	{#if answeredCountData}
+		{answeredCountData.right + answeredCountData.wrong}
+	{/if}
+	<br />
+	Richtig beantwortet:
+	{#if answeredCountData}
+		{answeredCountData.right}
+	{/if}
+	<br />
+	Falsch beantwortet:
+	{#if answeredCountData}
+		{answeredCountData.wrong}
+	{/if}
+</div>
diff --git a/src/routes/(main)/quiz/[type]/[questionId]/+page.svelte b/src/routes/(main)/quiz/[type]/[questionId]/+page.svelte
@@ -3,7 +3,7 @@
 	import { afterNavigate, goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 	import { randomInt, shuffle } from '$lib/utils';
-	import QuestionStatistics from '$lib/quiz/question/QuestionStatistics.svelte';
+	import QuestionStatisticsForQuestion from '$lib/quiz/question/QuestionStatisticsForQuestion.svelte';
 	import CheckboxAnswer from '$lib/quiz/answer/CheckboxAnswer.svelte';
 	import AnswerButton from '$lib/quiz/AnswerButton.svelte';
 	import type { AnsweredCountData } from './+page.server';
@@ -143,6 +143,6 @@
 				/>
 			</div>
 		</div>
-		<QuestionStatistics {answeredCountData} {currentQuestionAnsweredCountData} />
+		<QuestionStatisticsForQuestion {answeredCountData} {currentQuestionAnsweredCountData} />
 	</div>
 </div>
diff --git a/src/routes/(main)/quiz/[type]/listing/+page.svelte b/src/routes/(main)/quiz/[type]/listing/+page.svelte
@@ -2,10 +2,28 @@
 	import LinkButton from '$lib/LinkButton.svelte';
 	import { QuestionType } from '$lib/model/question';
 	import QuizHead from '$lib/quiz/QuizHead.svelte';
+	import { onMount } from 'svelte';
+	import type { AnsweredCountData } from '../[questionId]/+page.server';
 	import type { PageData } from './$types';
+	import QuestionsStatistics from '$lib/quiz/question/QuestionsStatistics.svelte';
 
 	export let data: PageData;
 
+	let answeredCountData: AnsweredCountData | undefined;
+	let questionType: QuestionType;
+
+	$: questionType = data.questionType;
+
+	onMount(() => {
+		try {
+			fetch(`/api/quiz/${questionType}/count`).then((res) =>
+				res.json().then((data) => (answeredCountData = data))
+			);
+		} catch (error) {
+			console.warn('Could not add count');
+		}
+	});
+
 	function getDescriptionForQuestionType(questionType: QuestionType) {
 		const count = data.allQuestions.length;
 		switch (questionType) {
@@ -44,4 +62,5 @@
 			</LinkButton>
 		{/each}
 	</div>
+	<QuestionsStatistics {answeredCountData} />
 </div>