now you can learn from multiple decks, will implement editing the deaks soon!

src/routes/flashcards/+page.svelte

@@ -3,25 +3,68 @@
 	import Card from "./card.svelte";
 	import StatsAndButtons from "./StatsAndButtons.svelte";
 
-	import { stats, resetDeck,SetNewDeck } from "./logic.svelte.js";
+	import { stats, resetDeck, SetNewDeck } from "./logic.svelte.js";
 	import { onMount } from "svelte";
 	import tempelateDeck from "./tempelateDeck.json";
 
 	onMount(() => {
-		SetNewDeck(JSON.parse(localStorage.getItem("deck")) || tempelateDeck);
+		SetNewDeck(JSON.parse(localStorage.getItem("deck")) || tempelateDeck, true);
 	});
+
+	let DemoDeck = [
+		{
+			deckName: "Tech",
+			cards: [
+				{ Q: "What is Svelte?", a: "A modern JavaScript framework for building user interfaces." },
+				{ Q: "What is a component?", a: "A reusable piece of UI in Svelte." },
+				{ Q: "How do you create a reactive variable?", a: "$: variableName = value;" },
+			],
+		},
+		{
+			deckName: "Math Basics",
+			cards: [
+				{ Q: "What is 2 + 2?", a: "4" },
+				{ Q: "What is the square root of 16?", a: "4" },
+				{ Q: "What is 5 * 6?", a: "30" },
+			],
+		},
+		{
+			deckName: "Geography",
+			cards: [
+				{ Q: "What is the capital of France?", a: "Paris" },
+				{ Q: "Which continent is Egypt in?", a: "Africa" },
+				{ Q: "What is the largest ocean?", a: "Pacific Ocean" },
+			],
+		},
+	];
 </script>
 
 <div class="flex h-full flex-col overflow-hidden">
 	{#if stats.isDeckEmpty}
 		<div class="flex flex-1 flex-col items-center justify-center gap-3">
-			<h1 class="text-4xl">Hey, You learned everything!</h1>
-			<button onclick={() => resetDeck()} class="big btn green">Reset Deck</button>
+			<h1 class="text-4xl">Choose a Deck To lean from!</h1>
+			<div>
+				<select
+					id="ChooseTheDeck"
+					onchange={(event) => {
+						const selectedDeck = DemoDeck.find((deck) => deck.deckName === event.target.value);
+						if (selectedDeck) {
+							SetNewDeck(selectedDeck.cards);
+						}
+					}}
+					class="input"
+				>
+					<option value="" disabled selected> goo ahead choose one! </option>
+					{#each DemoDeck as deckOption}
+						<option value={deckOption.deckName}>{deckOption.deckName}</option>
+					{/each}
+				</select>
+			</div>
 		</div>
 	{:else}
-		<div class="flex flex-1 flex-col items-center justify-center gap-2">
+		<div class="flex flex-1 flex-col items-center justify-center">
 			<div class="flex flex-col gap-1 text-center">
-				<div class="flex items-center justify-center p-2">
+				<div class="flex flex-col items-center justify-center gap-5 p-2">
 					<StatsAndButtons />
 				</div>
 				<Card />

src/routes/flashcards/logic.svelte.js

@@ -1,4 +1,3 @@
-
 export let card = $state({ Q: "", a: "" });
 
 export let statusOfCard = $state({
@@ -15,13 +14,14 @@ export let deck = [
 	{ Q: "Will @Shub go totally bankrupt?", a: "yes!" },
 ];
 
-export function SetNewDeck (newDeck) {
+export function SetNewDeck(newDeck, ThisIsOfPageLoad = false) {
 	deck = newDeck;
 	resetDeck();
+	stats.isDeckEmpty = ThisIsOfPageLoad;
 }
 
 export let stats = $state({
-	isDeckEmpty: false,
+	isDeckEmpty: true,
 	AnswerKnown: 0,
 	AnswerNotKnown: 0,
 	AnswerNotChecked: deck.length,

src/routes/flashcards/tempelateDeck.json

@@ -1,5 +1,26 @@
 [
-	{ "Q": "Best programer in the world?", "a": "RezHackXYZ" },
-	{ "Q": "Best coding community?", "a": "HackClub" },
-	{ "Q": "Will @Shub go totally bankrupt?", "a": "yes!" }
+	{
+		"deckName": "Tech",
+		"cards": [
+			{ "Q": "What is Svelte?", "a": "Best web dev Framework ever." },
+			{ "Q": "What is a component?", "a": "A reusable piece of UI in Svelte." },
+			{ "Q": "How do you create a reactive variable?", "a": "$: variableName = value;" }
+		]
+	},
+	{
+		"deckName": "Math Basics",
+		"cards": [
+			{ "Q": "What is 2 + 2?", "a": "4" },
+			{ "Q": "What is the square root of 16?", "a": "4" },
+			{ "Q": "What is 5 * 6?", "a": "30" }
+		]
+	},
+	{
+		"deckName": "Geography",
+		"cards": [
+			{ "Q": "What is the capital of France?", "a": "Paris" },
+			{ "Q": "Which continent is Egypt in?", "a": "Africa" },
+			{ "Q": "What is the largest ocean?", "a": "Pacific Ocean" }
+		]
+	}
 ]

src/routes/nav.svelte

@@ -60,7 +60,7 @@
 	import { colseModal, ShowSeconds } from "./IdleScreen/logic/TimeAndTableData.svelte.js";
 	import EditTimetableDiv from "./IdleScreen/components/timetable/EditTimetable.svelte";
 	import { TabOpen } from "./randomname/+page.svelte";
-	import { resetDeck } from "./flashcards/logic.svelte";
+	import { resetDeck, stats } from "./flashcards/logic.svelte";
 	import EditCards from "./flashcards/editCards.svelte";
 </script>
 
@@ -123,7 +123,7 @@
 					<button class="btn dull mini">Edit Decks</button>
 				</Trigger>
 			</Modal>
-			<button class="btn dull mini" onclick={() => resetDeck}> Reset current Deck </button>
+			<button class="btn dull mini" onclick={() => (stats.isDeckEmpty = true)}> Change Deck</button>
 		{/if}
 	</div>
 </div>