Skip to content

Commit 0e8ea59

Browse files
bukhosi-eugene-mpandebukhosi-eugene-mpande
authored
Merge pull request #282 from COS301-SE-2024/develop
Develop
2 parents 8d7ac67 + 0193ae2 commit 0e8ea59

File tree

35 files changed

+865
-575
lines changed

35 files changed

+865
-575
lines changed

‎.github/workflows/deploy.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ jobs:
1313
- uses: actions/checkout@v2
1414
- uses: actions/setup-node@v2
1515
with:
16-
node-version: 18.17.0
16+
node-version: 20.11.1
1717
- uses: oven-sh/setup-bun@v1
1818
with:
1919
bun-version: latest

‎.github/workflows/peformance.yml

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
name: Run Performance Check
2+
on:
3+
pull_request:
4+
branches:
5+
- main
6+
- develop
7+
8+
jobs:
9+
lighthouse:
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@master
13+
- name: Lighthouse
14+
uses: foo-software/lighthouse-check-action@master
15+
with:
16+
urls: 'https://www.class-connect.online/'

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@ build
1010
coverage
1111
.svelte-kit
1212
node_modules
13-
.DS_Store
13+
.DS_Store
14+
.unlighthouse

‎src/.prettierignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,5 @@ static
88
.vercel
99
coverage
1010
.svelte-kit
11-
node_modules
11+
node_modules
12+
.unlighthouse

‎src/bun.lockb

118 KB
Binary file not shown.

‎src/src/lib/components/forms/interactive/viewers/Mover.svelte

Lines changed: 140 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
<script lang="ts">
22
import { onMount } from 'svelte';
3-
import MCQ from '$lib/components/forms/interactive/viewers/MCQ.svelte';
4-
import Note from '$lib/components/forms/interactive/viewers/Notes.svelte';
5-
import ThreeDMaterial from '$lib/components/forms/interactive/viewers/ThreeDMaterial.svelte';
3+
import { Input, Label, Button, Select } from 'flowbite-svelte';
4+
import toast, { Toaster } from 'svelte-french-toast';
5+
import { enhance } from '$app/forms';
66
77
export let content: any[] = [];
88
let currItem: any;
99
let currIndex = 0;
10+
let error: string;
11+
let selected: any;
12+
let id: string;
1013
1114
onMount(async () => {
1215
currItem = content[0];
@@ -27,10 +30,35 @@
2730
}
2831
}
2932
33+
function checkanswer() {
34+
if (selected == currItem.answer) {
35+
toast.success('Correct Answer');
36+
} else {
37+
toast.error('Wrong Answer');
38+
}
39+
}
40+
41+
function save() {
42+
const toastId = toast.loading('Answering question...');
43+
return async ({ result }: any) => {
44+
if (result.type === 'success') {
45+
toast.dismiss(toastId);
46+
toast.success('Answered correctlly');
47+
} else {
48+
error = result.data?.error;
49+
toast.dismiss(toastId);
50+
toast.error(error);
51+
}
52+
};
53+
}
54+
3055
$: currItem = content[currIndex];
3156
$: stepsAhead = Math.min(3, content.length - currIndex);
57+
$: options = currItem.options;
3258
</script>
3359

60+
<Toaster />
61+
3462
<div class="space-y-4">
3563
<div class="flex flex-col items-center gap-4 sm:grid sm:grid-cols-12">
3664
<!-- Previous Button -->
@@ -96,11 +124,117 @@
96124
<div class="flex justify-center">
97125
<div class="w-full px-4 sm:px-0">
98126
{#if currItem.type == 'MCQ'}
99-
<MCQ question={currItem} />
127+
<main class="container mx-auto p-4 sm:w-[100vw]">
128+
<div class="p-2 md:px-5 md:py-2">
129+
<form method="POST" action="?/answerMCQ" use:enhance={save}>
130+
<div class="grid grid-cols-12 gap-6">
131+
<div class="col-span-10">
132+
<div>
133+
<p class="m-2 text-center text-3xl">
134+
{currItem.question}
135+
</p>
136+
<p class="m-2 text-center text-xl text-gray-500">
137+
{currItem.description}
138+
</p>
139+
<div class="mt-4">
140+
{#each options as option, i}
141+
<p class="mb-2">Option {i + 1}</p>
142+
<div class="mb-6 grid grid-cols-12 gap-6">
143+
<div class="col-span-11">
144+
<p
145+
id="option-{currItem.id}-{i}"
146+
placeholder={option}
147+
class="mb-2 w-full"
148+
>
149+
{option}
150+
</p>
151+
</div>
152+
</div>
153+
{/each}
154+
</div>
155+
<Label>
156+
Select an answer:
157+
<Select class="m-2" bind:value={selected}>
158+
{#each currItem.options as option}
159+
<option value={option}>{option}</option>
160+
{/each}
161+
</Select>
162+
</Label>
163+
<Input type="hidden" id="answer" name="answer" value={selected} />
164+
<Input type="hidden" id="id" name="id" value={id} />
165+
<Button type="button" on:click={checkanswer} class="mt-4 w-full">Answer</Button>
166+
</div>
167+
</div>
168+
</div>
169+
</form>
170+
</div>
171+
</main>
100172
{:else if currItem.type == 'Note'}
101-
<Note note={currItem} />
173+
<main class="container mx-auto px-2 py-4 sm:px-4 md:px-6 lg:px-8">
174+
<div class="mx-auto w-full max-w-4xl">
175+
<div class="flex flex-col items-center">
176+
<div class="mb-4 w-full">
177+
<h2 class="text-center text-xl font-semibold sm:text-2xl md:text-3xl">
178+
{currItem.title}
179+
</h2>
180+
</div>
181+
<div class="w-full">
182+
<div class="p-2 sm:p-3">
183+
<section
184+
class="flex flex-col space-y-2 rounded-lg bg-gray-200 p-2 shadow-md ring dark:bg-gray-700"
185+
>
186+
<div class="w-full flex-1">
187+
<iframe
188+
id="google-pdf-viewer"
189+
class="h-[50vh] w-full sm:h-[60vh] md:h-[70vh] lg:h-[80vh]"
190+
src={currItem.content}
191+
frameborder="0"
192+
title="Study Material"
193+
></iframe>
194+
</div>
195+
</section>
196+
</div>
197+
</div>
198+
</div>
199+
</div>
200+
</main>
102201
{:else if currItem.type == 'ThreeDMaterial'}
103-
<ThreeDMaterial material={currItem} />
202+
<main class="container mx-auto p-4 sm:w-[100vw]">
203+
<div class="p-2 md:px-5 md:py-2">
204+
<div class="grid grid-cols-12 justify-center gap-6 text-center">
205+
<div class="col-span-10">
206+
<div class="mb-6">
207+
<h2 class="mb-2 text-2xl">
208+
{currItem.title}
209+
</h2>
210+
</div>
211+
<div>
212+
<div class="flex justify-center p-3">
213+
<section
214+
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"
215+
>
216+
<div class="flex-1">
217+
<!-- Use it like any other HTML element -->
218+
<model-viewer
219+
class="h-[100vh] w-full flex-grow"
220+
alt={currItem.description}
221+
src={currItem.link}
222+
ar
223+
environment-image="/moon_1k.hdr"
224+
poster="/poster.svg"
225+
shadow-intensity="1"
226+
camera-controls
227+
touch-action="pan-y"
228+
>
229+
</model-viewer>
230+
</div>
231+
</section>
232+
</div>
233+
</div>
234+
</div>
235+
</div>
236+
</div>
237+
</main>
104238
{/if}
105239
</div>
106240
</div>

‎src/src/lib/components/forms/interactive/viewers/Notes.svelte

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
window.removeEventListener('resize', checkIfMobile);
2020
};
2121
});
22+
23+
$: note = note;
2224
</script>
2325

2426
<main class="container mx-auto px-2 py-4 sm:px-4 md:px-6 lg:px-8">

0 commit comments

Comments
 (0)