LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Small changes (kidding)

Browse Source
This commit is contained in:
Mawoka
2022-02-28 17:14:47 +01:00
parent 4f668748e1
commit 805258c5ff
19 changed files with 4008 additions and 2647 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/play/join.svelte
+106
View File
@@ -0,0 +1,106 @@
<script lang="ts">
import { socket } from '$lib/socket';
import { onDestroy, onMount } from 'svelte';
import { browser } from '$app/env';
export let game_pin: string;
let username = '';
let hcaptchaSitekey = 'ee81b2a1-acf3-4d20-b2a4-a7ea94c7eba5';
let hcaptcha = {
execute: async (_a, _b) => ({ response: '' }),
render: (_a, _b) => {}
};
let hcaptchaWidgetID;
onMount(() => {
if (browser) {
hcaptcha = window.hcaptcha;
if (hcaptcha.render) {
hcaptchaWidgetID = hcaptcha.render('hcaptcha', {
sitekey: hcaptchaSitekey,
size: 'invisible',
theme: 'dark'
});
}
}
});
onDestroy(() => {
if (browser) {
hcaptcha = {
execute: async () => ({ response: '' }),
render: () => {}
};
}
});
const setUsername = async () => {
if (username.length <= 3) {
return;
}
const { response } = await hcaptcha.execute(hcaptchaWidgetID, {
async: true
});
socket.emit('join_game', {
username: username,
game_pin: game_pin,
captcha: response
});
};
socket.on('game_not_found', () => {
alert('Game not found');
});
</script>
<svelte:head>
<script src="https://js.hcaptcha.com/1/api.js?render=explicit" async defer></script>
</svelte:head>
{#if game_pin === '' || game_pin.length <= 7}
<div class="flex flex-col justify-center align-center w-screen h-screen">
<form
on:submit|preventDefault={() => {}}
class="flex-col flex justify-center align-center mx-auto"
>
<h1 class="text-lg text-center">Game Pin</h1>
<input
class="border border-amber-800 self-center text-center"
bind:value={game_pin}
maxlength="8"
/>
<br />
<button
class="bg-amber-800 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded"
type="submit"
>
Submit
</button>
</form>
</div>
{:else}
<div class="flex flex-col justify-center align-center w-screen h-screen">
<form
on:submit|preventDefault={setUsername}
class="flex-col flex justify-center align-center mx-auto"
>
<h1 class="text-lg text-center">Username</h1>
<input class="border border-amber-800" bind:value={username} />
<button
class="bg-amber-800 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded disabled:cursor-not-allowed disabled:opacity-50"
type="submit"
disabled={username.length <= 3}
>
Submit
</button>
</form>
</div>
{/if}
<div
id="hcaptcha"
class="h-captcha"
data-sitekey={hcaptchaSitekey}
data-size="invisible"
data-theme="dark"
/>
frontend/src/lib/play/question.svelte
+25 -23
View File
@@ -1,4 +1,4 @@
<script lang='ts'>
<script lang="ts">
import type { Question } from '../../app';
import { socket } from '$lib/socket';
@@ -11,13 +11,10 @@
throw new Error('question_index must be a string or number');
}
let timer_res = question.time;
let selected_answer: string;
// Stop the timer if the question is answered
let timer_interval;
const timer = (time: string) => {
let seconds = Number(time);
let timer_interval = setInterval(() => {
@@ -31,8 +28,7 @@
timer_res = seconds.toString();
}, 1000);
};
console.log(selected_answer)
console.log(selected_answer);
timer(question.time);
@@ -44,34 +40,40 @@
answer: answer
});
};
</script>
<div class='flex flex-col justify-center w-screen h-1/6'>
<h1 class='text-6xl text-center'>
<div class="flex flex-col justify-center w-screen h-1/6">
<h1 class="text-6xl text-center">
{question.question}
</h1>
<span class='text-center py-2 text-lg'>{timer_res}</span>
<span class="text-center py-2 text-lg">{timer_res}</span>
</div>
{#if timer_res !== "0"}
<div class='flex flex-wrap'>
{#if timer_res !== '0'}
<div class="flex flex-wrap">
{#each question.answers as answer}
<button class='w-1/2 text-3xl bg-amber-700 my-2 disabled:opacity-60 border border-white' disabled={selected_answer !== undefined}
on:click={() => selectAnswer(answer.answer)}>{answer.answer}</button>
<button
class="w-1/2 text-3xl bg-amber-700 my-2 disabled:opacity-60 border border-white"
disabled={selected_answer !== undefined}
on:click={() => selectAnswer(answer.answer)}>{answer.answer}</button
>
{/each}
</div>
{:else}
<div class='flex flex-wrap'>
<div class="flex flex-wrap">
{#each question.answers as answer}
{#if answer.right}
<button class='w-1/2 text-3xl bg-green-600 border border-white' disabled
class:opacity-30={answer.answer !== selected_answer}
>{answer.answer}</button>
{:else }
<button class='w-1/2 text-3xl bg-red-500 border border-white' disabled
class:opacity-30={answer.answer !== selected_answer}
>{answer.answer}</button>
<button
class="w-1/2 text-3xl bg-green-600 border border-white"
disabled
class:opacity-30={answer.answer !== selected_answer}>{answer.answer}</button
>
{:else}
<button
class="w-1/2 text-3xl bg-red-500 border border-white"
disabled
class:opacity-30={answer.answer !== selected_answer}>{answer.answer}</button
>
{/if}
{/each}
</div>
{/if}
{/if}
frontend/src/lib/play/show_results.svelte
+87
View File
@@ -0,0 +1,87 @@
<script lang="ts">
import type { Answer, QuizData } from '../../app';
export let results: Array<Answer>;
export let game_data: QuizData;
export let question_index: number;
let data_store = {};
const question = game_data.questions[question_index].answers;
for (let i = 0; i < question.length; i++) {
console.log(question[i].answer, 'HI!!!');
data_store[question[i].answer] = 0;
}
console.log(data_store);
for (let i = 0; i < results.length; i++) {
console.log(results[i].answer);
data_store[results[i].answer] += 1;
}
console.log(data_store);
</script>
<!-- Show the results from the results object -->
<!-- Language: SvelteHTML -->
<!-- Path: frontend/src/lib/play/show_results.svelte -->
<div>
<h2>Results</h2>
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block py-2 min-w-full sm:px-6 lg:px-8">
<div class="overflow-hidden shadow-md sm:rounded-lg">
<table class="min-w-full">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th
scope="col"
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
>
Answer
</th>
<th
scope="col"
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
>
Count
</th>
<th
scope="col"
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
>
Right
</th>
</tr>
</thead>
<tbody>
<!-- Product 1 -->
{#each game_data.questions[question_index].answers as answer}
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<td
class="py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
{answer.answer}
</td>
<td
class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"
>
{data_store[answer.answer]}
</td>
<td
class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"
>
{#if answer.right}
✅
{:else}
❌
{/if}
</td>
</tr>{/each}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
frontend/src/lib/play/title.svelte
+4 -5
View File
@@ -3,8 +3,7 @@
export let description: string;
</script>
<div class='flex flex-col justify-center w-screen h-screen'>
<h1 class='text-7xl text-center'>{title}</h1>
<p class='text-3xl pt-8 text-center'>{description}</p>
</div>
<div class="flex flex-col justify-center w-screen h-screen">
<h1 class="text-7xl text-center">{title}</h1>
<p class="text-3xl pt-8 text-center">{description}</p>
</div>
frontend/src/lib/socket.ts
+1 -1
View File
@@ -1,3 +1,3 @@
import { io } from 'socket.io-client';
export const socket = io();
export const socket = io();