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

✨ Added cover-image (Closes #103)

Browse Source
This commit is contained in:
Mawoka
2022-09-08 17:47:29 +02:00
parent 603e2834d6
commit 2ab9d14d3e
15 changed files with 186 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/dashboard/main_slider.svelte
+21 -3
View File
@@ -71,9 +71,25 @@
>
{quiz.title}
</p>
<p class="text-center col-start-2 col-end-6">
{quiz.description}
</p>
<div class="col-start-2 col-end-6">
<p class="text-center">
{quiz.description}
</p>
{#if quiz.cover_image}
<div
class="flex justify-center align-middle items-center"
>
<div class="h-[20vh] m-auto w-auto">
<img
class="max-h-full max-w-full block"
src={quiz.cover_image}
alt="Not provided"
/>
</div>
</div>
{/if}
</div>
<div class="flex justify-end">
<p
style="writing-mode: sideways-lr"
@@ -83,10 +99,12 @@
</p>
</div>
</div>
<p class="text-center">
{quiz.questions.length}
{$t('words.question', { count: quiz.questions.length })}
</p>
<div class="flex justify-center mt-8">
{#if quiz.public}
<svg
frontend/src/lib/editor.svelte
+24 -2
View File
@@ -19,6 +19,22 @@
export let quiz_id: string | null;
let selected_question = -1;
let imgur_links_valid = false;
let pow_salt;
const computePOW = async (salt: string) => {
if (pow_salt === undefined) {
return;
}
console.log('Computing POW');
pow_data = await mint(salt, 16, '', 8, false);
pow_salt = undefined;
return;
};
$: {
pow_salt;
computePOW(pow_salt);
}
const validateInput = async (data: EditorData) => {
try {
@@ -156,9 +172,15 @@
</div>
<div class="w-full h-full">
{#if selected_question === -1}
<SettingsCard bind:data />
<SettingsCard bind:data bind:pow_salt bind:edit_id bind:pow_data />
{:else}
<QuizCard bind:data bind:selected_question bind:edit_id bind:pow_data />
<QuizCard
bind:data
bind:selected_question
bind:edit_id
bind:pow_data
bind:pow_salt
/>
{/if}
</div>
</div>
frontend/src/lib/editor/card.svelte
+1 -17
View File
@@ -10,7 +10,6 @@
import { reach } from 'yup';
import { dataSchema } from '$lib/yupSchemas';
import Spinner from '../Spinner.svelte';
import { mint } from '$lib/hashcash';
import { createTippy } from 'svelte-tippy';
import { getLocalization } from '$lib/i18n';
@@ -26,25 +25,10 @@
export let selected_question: number;
export let edit_id: string;
export let pow_data;
let pow_salt: string;
export let pow_salt: string;
let uppyOpen = false;
const computePOW = async (salt: string) => {
if (pow_salt === undefined) {
return;
}
console.log('Computing POW');
pow_data = await mint(salt, 16, '', 8, false);
pow_salt = undefined;
return;
};
$: {
pow_salt;
computePOW(pow_salt);
}
/*eslint no-unused-vars: ["error", { "argsIgnorePattern": "^_" }]*/
const correctTimeInput = (_) => {
let time = data.questions[selected_question].time;
frontend/src/lib/editor/settings-card.svelte
+37
View File
@@ -6,9 +6,16 @@
<script lang="ts">
import type { EditorData } from '$lib/quiz_types';
import { getLocalization } from '$lib/i18n';
import Spinner from '$lib/Spinner.svelte';
export let pow_data;
export let pow_salt;
const { t } = getLocalization();
let uppyOpen = false;
export let edit_id: string;
export let data: EditorData;
</script>
@@ -42,6 +49,36 @@
class="p-3 rounded-lg border-gray-500 border text-center w-1/3 h-20 resize-none dark:bg-gray-500"
/>
</div>
{#if data.cover_image != undefined && data.cover_image !== ''}
<div class="flex justify-center pt-10 w-full max-h-72 w-full">
<img
src={data.cover_image}
alt="not available"
class="max-h-72 h-auto w-auto"
on:contextmenu|preventDefault={() => {
data.cover_image = '';
}}
/>
</div>
{:else if pow_data === undefined}
<a href="/docs/pow" target="_blank" class="cursor-help">
<Spinner />
</a>
{:else}
{#await import('$lib/editor/uploader.svelte')}
<Spinner />
{:then c}
<svelte:component
this={c.default}
bind:modalOpen={uppyOpen}
bind:edit_id
bind:data
bind:pow_data
bind:pow_salt
/>
{/await}
{/if}
<div class="pt-10 w-full flex justify-center">
<button
type="button"
frontend/src/lib/editor/uploader.svelte
+9 -3
View File
@@ -61,9 +61,15 @@
});
uppy.on('complete', (_) => {
console.log(pow_data);
data.questions[
selected_question
].image = `${window.location.origin}/api/v1/storage/download/${image_id}`;
if (selected_question === undefined) {
data.cover_image = `${window.location.origin}/api/v1/storage/download/${image_id}`;
} else {
data.questions[
selected_question
].image = `${window.location.origin}/api/v1/storage/download/${image_id}`;
}
console.log(selected_question, data);
modalOpen = false;
});
console.log(edit_id);
frontend/src/lib/play/title.svelte
+8
View File
@@ -6,9 +6,17 @@
<script lang="ts">
export let title: string;
export let description: string;
export let cover_image: string | undefined;
</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>
{#if cover_image}
<div class="flex justify-center align-middle items-center">
<div class="h-[30vh] m-auto w-auto mt-12">
<img class="max-h-full max-w-full block" src={cover_image} alt="Not provided" />
</div>
</div>
{/if}
</div>
frontend/src/lib/quiz_types.ts
+2
View File
@@ -12,6 +12,7 @@ export interface QuizData {
game_id: string;
game_pin: string;
started: boolean;
cover_image?: string;
}
export enum QuizQuestionType {
@@ -44,4 +45,5 @@ export interface EditorData {
title: string;
description: string;
questions: Question[];
cover_image?: string;
}
frontend/src/routes/+page.svelte
+4 -2
View File
@@ -200,10 +200,12 @@
</div>
</section>
<section>
<h2 class="text-center text-5xl mb-6">How does ClassQuiz even work?</h2>
<div class="flex justify-center w-full">
<h2 class="text-center text-3xl rounded-t-lg bg-opacity-40 bg-white py-2 px-6">
<h3 class="text-center text-3xl rounded-t-lg bg-opacity-40 bg-white py-2 px-6">
{$t('index_page.get_a_quiz')}
</h2>
</h3>
</div>
<div
class="grid grid-rows-2 lg:grid-rows-1 lg:grid-cols-2 bg-opacity-40 bg-white shadow-lg mb-12 lg:mx-12 mx-4 rounded-lg"
frontend/src/routes/play/+page.svelte
+5 -1
View File
@@ -122,7 +122,11 @@
{:else if JSON.stringify(final_results) !== JSON.stringify([null])}
<ShowEndScreen bind:final_results bind:quiz_data={gameData} />
{:else if gameData !== undefined && question_index === ''}
<ShowTitle bind:title={gameData.title} bind:description={gameData.description} />
<ShowTitle
bind:title={gameData.title}
bind:description={gameData.description}
bind:cover_image={gameData.cover_image}
/>
{:else if gameMeta.started && gameData !== undefined && question_index !== '' && answer_results === undefined}
{#key unique}
<Question
frontend/src/routes/view/[quiz_id]/+page.svelte
+11 -1
View File
@@ -55,6 +55,17 @@
<div class="text-center">
<p>{quiz.description}</p>
</div>
{#if quiz.cover_image}
<div class="flex justify-center align-middle items-center">
<div class="h-[15vh] m-auto w-auto my-3">
<img
class="max-h-full max-w-full block"
src={quiz.cover_image}
alt="Not provided"
/>
</div>
</div>
{/if}
<div class="text-center text-sm pt-1">
<ImportedOrNot imported={quiz.imported_from_kahoot} />
</div>
@@ -98,7 +109,6 @@
<!-- </label>-->
{#if question.image}
<span>
{$t('words.image')}:
<img class="pl-8" src={question.image} alt="Not provided" />
</span>
{/if}