bug fixes on the interactive lessons

COS301-SE-2024 · Sep 30, 2024 · b75be9d · b75be9d
1 parent c6eb4b8
commit b75be9d
Show file tree

Hide file tree

Showing 8 changed files with 161 additions and 15 deletions.
diff --git a/src/bun.lockb b/src/bun.lockb
diff --git a/src/src/lib/components/forms/interactive/viewers/Mover.svelte b/src/src/lib/components/forms/interactive/viewers/Mover.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import MCQ from '$lib/components/forms/interactive/viewers/MCQ.svelte';
-	import Note from '$lib/components/forms/interactive/viewers/Notes.svelte';
-	import ThreeDMaterial from '$lib/components/forms/interactive/viewers/ThreeDMaterial.svelte';
+	import { Input, Label, Button, Select } from 'flowbite-svelte';
+	import toast, { Toaster } from 'svelte-french-toast';
+	import { enhance } from '$app/forms';
 
 	export let content: any[] = [];
 	let currItem: any;
 	let currIndex = 0;
+	let error: string;
+	let selected: any;
+	let id: string;
 
 	onMount(async () => {
 		currItem = content[0];
@@ -27,10 +30,35 @@
 		}
 	}
 
+	function checkanswer() {
+		if (selected == currItem.answer) {
+			toast.success('Correct Answer');
+		} else {
+			toast.error('Wrong Answer');
+		}
+	}
+
+	function save() {
+		const toastId = toast.loading('Answering question...');
+		return async ({ result }: any) => {
+			if (result.type === 'success') {
+				toast.dismiss(toastId);
+				toast.success('Answered correctlly');
+			} else {
+				error = result.data?.error;
+				toast.dismiss(toastId);
+				toast.error(error);
+			}
+		};
+	}
+
 	$: currItem = content[currIndex];
 	$: stepsAhead = Math.min(3, content.length - currIndex);
+	$: options = currItem.options;
 </script>
 
+<Toaster />
+
 <div class="space-y-4">
 	<div class="flex flex-col items-center gap-4 sm:grid sm:grid-cols-12">
 		<!-- Previous Button -->
@@ -96,11 +124,117 @@
 	<div class="flex justify-center">
 		<div class="w-full px-4 sm:px-0">
 			{#if currItem.type == 'MCQ'}
-				<MCQ question={currItem} />
+				<main class="container mx-auto p-4 sm:w-[100vw]">
+					<div class="p-2 md:px-5 md:py-2">
+						<form method="POST" action="?/answerMCQ" use:enhance={save}>
+							<div class="grid grid-cols-12 gap-6">
+								<div class="col-span-10">
+									<div>
+										<p class="m-2 text-center text-3xl">
+											{currItem.question}
+										</p>
+										<p class="m-2 text-center text-xl text-gray-500">
+											{currItem.description}
+										</p>
+										<div class="mt-4">
+											{#each options as option, i}
+												<p class="mb-2">Option {i + 1}</p>
+												<div class="mb-6 grid grid-cols-12 gap-6">
+													<div class="col-span-11">
+														<p
+															id="option-{currItem.id}-{i}"
+															placeholder={option}
+															class="mb-2 w-full"
+														>
+															{option}
+														</p>
+													</div>
+												</div>
+											{/each}
+										</div>
+										<Label>
+											Select an answer:
+											<Select class="m-2" bind:value={selected}>
+												{#each currItem.options as option}
+													<option value={option}>{option}</option>
+												{/each}
+											</Select>
+										</Label>
+										<Input type="hidden" id="answer" name="answer" value={selected} />
+										<Input type="hidden" id="id" name="id" value={id} />
+										<Button type="button" on:click={checkanswer} class="mt-4 w-full">Answer</Button>
+									</div>
+								</div>
+							</div>
+						</form>
+					</div>
+				</main>
 			{:else if currItem.type == 'Note'}
-				<Note note={currItem} />
+				<main class="container mx-auto px-2 py-4 sm:px-4 md:px-6 lg:px-8">
+					<div class="mx-auto w-full max-w-4xl">
+						<div class="flex flex-col items-center">
+							<div class="mb-4 w-full">
+								<h2 class="text-center text-xl font-semibold sm:text-2xl md:text-3xl">
+									{currItem.title}
+								</h2>
+							</div>
+							<div class="w-full">
+								<div class="p-2 sm:p-3">
+									<section
+										class="flex flex-col space-y-2 rounded-lg bg-gray-200 p-2 shadow-md ring dark:bg-gray-700"
+									>
+										<div class="w-full flex-1">
+											<iframe
+												id="google-pdf-viewer"
+												class="h-[50vh] w-full sm:h-[60vh] md:h-[70vh] lg:h-[80vh]"
+												src={currItem.content}
+												frameborder="0"
+												title="Study Material"
+											></iframe>
+										</div>
+									</section>
+								</div>
+							</div>
+						</div>
+					</div>
+				</main>
 			{:else if currItem.type == 'ThreeDMaterial'}
-				<ThreeDMaterial material={currItem} />
+				<main class="container mx-auto p-4 sm:w-[100vw]">
+					<div class="p-2 md:px-5 md:py-2">
+						<div class="grid grid-cols-12 justify-center gap-6 text-center">
+							<div class="col-span-10">
+								<div class="mb-6">
+									<h2 class="mb-2 text-2xl">
+										{currItem.title}
+									</h2>
+								</div>
+								<div>
+									<div class="flex justify-center p-3">
+										<section
+											class="flex h-[100%] w-[100%] flex-col space-y-4 rounded-lg bg-gray-200 p-2 shadow-md ring dark:bg-gray-700"
+										>
+											<div class="flex-1">
+												<!-- Use it like any other HTML element -->
+												<model-viewer
+													class="h-[100vh] w-full flex-grow"
+													alt={currItem.description}
+													src={currItem.link}
+													ar
+													environment-image="/moon_1k.hdr"
+													poster="/poster.svg"
+													shadow-intensity="1"
+													camera-controls
+													touch-action="pan-y"
+												>
+												</model-viewer>
+											</div>
+										</section>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</main>
 			{/if}
 		</div>
 	</div>

diff --git a/src/src/lib/components/forms/interactive/viewers/Notes.svelte b/src/src/lib/components/forms/interactive/viewers/Notes.svelte
@@ -19,6 +19,8 @@
 			window.removeEventListener('resize', checkIfMobile);
 		};
 	});
+
+	$: note = note;
 </script>
 
 <main class="container mx-auto px-2 py-4 sm:px-4 md:px-6 lg:px-8">

diff --git a/src/src/lib/components/modals/materials/Preview.svelte b/src/src/lib/components/modals/materials/Preview.svelte
@@ -64,10 +64,10 @@
 					class="flex h-[500px] w-[500px] flex-col space-y-4 rounded-lg bg-gray-200 p-2 shadow-md ring dark:bg-gray-700"
 				>
 					<div class="flex-1">
-						<object
+						<iframe
 							id="pdf-file"
 							class="h-full w-full flex-grow"
-							data={url}
+							src={url}
 							title="Study Material"
 						/>
 					</div>

diff --git a/src/src/lib/components/modals/materials/PreviewMaterial.svelte b/src/src/lib/components/modals/materials/PreviewMaterial.svelte
@@ -133,10 +133,10 @@
 					class="flex h-[500px] w-[500px] flex-col space-y-4 rounded-lg bg-gray-200 p-2 shadow-md ring dark:bg-gray-700"
 				>
 					<div class="flex-1">
-						<object
+						<iframe
 							id="pdf-file"
 							class="h-full w-full flex-grow"
-							data={url}
+							src={url}
 							title="Study Material"
 						/>
 					</div>

diff --git a/src/src/lib/server/utils/interactive.ts b/src/src/lib/server/utils/interactive.ts
@@ -15,7 +15,12 @@ async function AddContentToLesson(lesson: any, content: any) {
 }
 
 async function RemoveContentFromLesson(lesson: any, content: any) {
-	lesson.content = lesson.content.filter((id: any) => id !== content._id.toString());
+	const contentArray = lesson.content;
+	const index = contentArray.indexOf(content._id);
+	if (index > -1) {
+		contentArray.splice(index, 1);
+	}
+	lesson.content = contentArray;
 	await lesson.save();
 }
 
@@ -361,8 +366,11 @@ export async function deleteContent(data: FormData) {
 	if (content.type === 'MCQ') {
 		await MCQs.findByIdAndDelete(id);
 	}
+	if (content.type === 'ThreeDMaterial') {
+		await ThreeDMaterial.findByIdAndDelete(id);
+	}
 
-	await RemoveContentFromLesson(lessonData, content);
+	await RemoveContentFromLesson(lessonData, content.data);
 }
 
 export async function editContent(data: FormData) {

diff --git a/src/src/routes/(app)/workspaces/[workspace]/interactive/[interactive]/+page.server.ts b/src/src/routes/(app)/workspaces/[workspace]/interactive/[interactive]/+page.server.ts
@@ -128,10 +128,11 @@ export const actions: Actions = {
 			return fail(500, { message: 'Failed to save question' });
 		}
 	},
-	deleteContent: async ({ request, locals }) => {
+	deleteContent: async ({ request, locals, params }) => {
 		try {
 			validateLecturer(locals);
 			const data = await request.formData();
+			data.append('lesson', params.interactive as string);
 			await deleteContent(data);
 		} catch (e) {
 			console.error('Error deleting content:', e);

diff --git a/src/src/routes/(app)/workspaces/[workspace]/materials/material/+page.svelte b/src/src/routes/(app)/workspaces/[workspace]/materials/material/+page.svelte
@@ -7,6 +7,7 @@
 	}
 </script>
 
-<main class="flex h-full flex-col">
-	<object class="w-full flex-grow" data={pdf_data} title="Study Material" />
+<main class="flex h-full items-center justify-center">
+	<iframe class="h-[100vh] w-full flex-grow" src={pdf_data} frameborder="0" title="Study Material"
+	></iframe>
 </main>