Merge pull request #282 from COS301-SE-2024/develop

Develop

.github/workflows/deploy.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 18.17.0
+          node-version: 20.11.1
       - uses: oven-sh/setup-bun@v1
         with:
           bun-version: latest

.github/workflows/peformance.yml

@@ -0,0 +1,16 @@
+name: Run Performance Check
+on:
+  pull_request:
+    branches:
+      - main
+      - develop
+
+jobs:
+  lighthouse:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@master
+    - name: Lighthouse
+      uses: foo-software/lighthouse-check-action@master
+      with:
+        urls: 'https://www.class-connect.online/'

.gitignore

@@ -10,4 +10,5 @@ build
 coverage
 .svelte-kit
 node_modules
-.DS_Store
+.DS_Store
+.unlighthouse

src/.prettierignore

@@ -8,4 +8,5 @@ static
 .vercel
 coverage
 .svelte-kit
-node_modules
+node_modules
+.unlighthouse

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>

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">