✨ Basic Quiztivity working

frontend/src/lib/quiztivity/components/markdown/edit.svelte

@@ -5,13 +5,9 @@
   -->
 <script lang="ts">
 	import type { Markdown } from '../../types';
-	import { getLocalization } from '$lib/i18n';
-	import BrownButton from '$lib/components/buttons/brown.svelte';
 	import { marked } from 'marked';
 	import { browser } from '$app/environment';
 
-	const { t } = getLocalization();
-
 	export let data: Markdown | undefined;
 
 	if (!data) {

frontend/src/lib/quiztivity/components/markdown/play.svelte

@@ -0,0 +1,21 @@
+<!--
+  - 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 { Markdown } from '$lib/quiztivity/types';
+	import DOMPurify from 'dompurify';
+	import { marked } from 'marked';
+	import { browser } from '$app/environment';
+
+	export let data: Markdown | undefined;
+
+	let rendered_html = '';
+
+	$: rendered_html = browser ? DOMPurify.sanitize(marked.parse(data.markdown ?? '')) : '';
+</script>
+
+<div class="prose dark:prose-invert">
+	{@html rendered_html}
+</div>

frontend/src/lib/quiztivity/components/memory/edit.svelte

@@ -7,6 +7,7 @@
 	import type { Memory } from '../../types';
 	import { getLocalization } from '$lib/i18n';
 	import BrownButton from '$lib/components/buttons/brown.svelte';
+	import { flip } from 'svelte/animate';
 
 	const { t } = getLocalization();
 
@@ -21,6 +22,20 @@
 			cards: []
 		};
 	}
+	const arraymove = (arr: any[], fromI: number, toI: number) => {
+		const el = arr[fromI];
+		arr.splice(fromI, 1);
+		arr.splice(toI, 0, el);
+	};
+	const move_card_left = (selected_slide: number) => {
+		arraymove(data.cards, selected_slide, selected_slide - 1);
+		data.cards = data.cards;
+	};
+
+	const move_card_right = (selected_slide: number) => {
+		arraymove(data.cards, selected_slide, selected_slide + 1);
+		data.cards = data.cards;
+	};
 
 	const add_card = () => {
 		if (!new_pair_data.text_1 || !new_pair_data.text_2) {
@@ -81,8 +96,11 @@
 				>
 			</div>
 		</div>
-		{#each data.cards as card_pair}
-			<div class="border-[#B07156] border-2 rounded">
+		{#each data.cards as card_pair, i (card_pair[0].id)}
+			<div
+				class="border-[#B07156] border-2 rounded group flex flex-col"
+				animate:flip={{ duration: 200 }}
+			>
 				<div class="grid grid-cols-2 py-2 h-full">
 					{#each card_pair as card}
 						<div class="px-2 flex h-full">
@@ -90,6 +108,21 @@
 						</div>
 					{/each}
 				</div>
+				<div class="grid grid-cols-2 p-2 gap-2">
+					<BrownButton
+						on:click={() => {
+							move_card_left(i);
+						}}
+						disabled={i === 0}>{$t('quiztivity.editor.move_left')}</BrownButton
+					>
+					<BrownButton
+						on:click={() => {
+							move_card_right(i);
+						}}
+						disabled={i + 1 === data.cards.length}
+						>{$t('quiztivity.editor.move_right')}</BrownButton
+					>
+				</div>
 			</div>
 		{/each}
 	</div>

frontend/src/lib/quiztivity/components/memory/play.svelte

@@ -0,0 +1,101 @@
+<!--
+  - 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 { Memory, MemoryCard } from '$lib/quiztivity/types';
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
+	export let data: Memory | undefined;
+
+	const shuffle = <Type>(a: Array<Type>): Array<Type> => {
+		for (let i = a.length - 1; i > 0; i--) {
+			const j = Math.floor(Math.random() * (i + 1));
+			[a[i], a[j]] = [a[j], a[i]];
+		}
+		return a;
+	};
+
+	let card_opened = {};
+
+	const get_all_cards_as_single_array = (): MemoryCard[] => {
+		console.log('data', data.cards);
+		let final_arr: MemoryCard[] = [];
+		for (let i = 0; i < data.cards.length; i++) {
+			const pair = data.cards[i];
+			console.log('pair', pair);
+			for (let c = 0; c < pair.length; c++) {
+				final_arr.push({ ...pair[c], id: `${i}:${c}` });
+				card_opened[`${i}:${c}`] = false;
+			}
+		}
+		console.log(final_arr);
+		return final_arr;
+	};
+
+	const all_cards_array: MemoryCard[] = get_all_cards_as_single_array();
+
+	const random_card_order = shuffle(all_cards_array);
+	console.log(random_card_order);
+
+	const found_cards: string[] = [];
+	let opened_active_cards: string[] = [];
+	let try_count = 0;
+	let game_finished = false;
+	const flip_card = (id: string) => {
+		if (found_cards.includes(id) || game_finished) {
+			return;
+		}
+		card_opened[id] = true;
+		opened_active_cards.push(id);
+
+		if (opened_active_cards.length === 2) {
+			const [pair_1_id, card_1_id] = opened_active_cards[0].split(':');
+			if (!pair_1_id || !card_1_id) {
+				throw "Mustn't happen";
+			}
+			const [pair_2_id, card_2_id] = opened_active_cards[1].split(':');
+			if (!pair_2_id || !card_2_id) {
+				throw "Mustn't happen";
+			}
+			if (pair_2_id === pair_1_id) {
+				found_cards.push(opened_active_cards[0]);
+				found_cards.push(opened_active_cards[1]);
+				opened_active_cards = [];
+			}
+		}
+		if (opened_active_cards.length === 3) {
+			card_opened[opened_active_cards[0]] = false;
+			card_opened[opened_active_cards[1]] = false;
+			opened_active_cards.splice(0, 2);
+			try_count += 1;
+		}
+		game_finished = random_card_order.length === found_cards.length;
+	};
+</script>
+
+<div>
+	<p class="text-center">{$t('quiztivity.play.memory.try_count', { try_count })}</p>
+	<div class="grid lg:grid-cols-6 grid-cols-2 gap-2 m-4">
+		{#each random_card_order as card}
+			<button
+				class="aspect-square flex border-[#B07156] border-2 rounded"
+				on:click={() => {
+					flip_card(card.id);
+				}}
+			>
+				{#if card_opened[card.id]}
+					<p class="m-auto transition-all">{card.text}</p>
+				{:else}
+					<img
+						src="/android-chrome-512x512.png"
+						alt="ClassQuiz logo"
+						class="m-4 opacity-50 hover:opacity-80 transition-all"
+					/>
+				{/if}
+			</button>
+		{/each}
+	</div>
+</div>

frontend/src/lib/quiztivity/editor.svelte

@@ -109,7 +109,7 @@
 			</div>
 		</div>
 		<div class="flex justify-center mt-6">
-			<div class="grid grid-cols-6  gap-6 w-11/12">
+			<div class="grid grid-cols-6 gap-6 w-11/12">
 				{#each data.pages as page, i (page.id)}
 					<div
 						class="border-[#B07156] border-2 rounded aspect-square flex flex-col group"

frontend/src/lib/quiztivity/types.ts

@@ -19,7 +19,7 @@ export interface Pdf {
 	url: string;
 }
 
-interface MemoryCard {
+export interface MemoryCard {
 	image?: string;
 	text?: string;
 	id: string;