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

🚧 Progress on new editor

Browse Source
This commit is contained in:
Mawoka
2022-06-16 18:02:01 +02:00
parent 7abf227e8d
commit a22cf647fd
6 changed files with 249 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/editor.svelte
+15 -206
View File
@@ -2,33 +2,18 @@
import { getLocalization } from '$lib/i18n';
import * as yup from 'yup';
import { dataSchema } from '$lib/yupSchemas';
import type { EditorData, Question, Answer } from './quiz_types';
import Sidebar from '$lib/editor/sidebar.svelte';
import SettingsCard from '$lib/editor/settings-card.svelte';
const { t } = getLocalization();
let schemaInvalid = false;
let yupErrorMessage = '';
interface Data {
public: boolean;
title: string;
description: string;
questions: Question[];
}
interface Question {
question: string;
time: string;
image?: string;
answers: Answer[];
}
interface Answer {
right: boolean;
answer: string;
}
export let data: Data;
export let data: EditorData;
export let submit_button_text = 'Create';
let selected_question = -1;
let imgur_links_valid = false;
const empty_question: Question = {
@@ -43,7 +28,7 @@
]
};
const validateInput = async (data: Data) => {
const validateInput = async (data: EditorData) => {
try {
await dataSchema.validate(data, { abortEarly: false });
schemaInvalid = false;
@@ -79,189 +64,13 @@
};
</script>
<label class="pl-2 w-2/6 flex gap-2 flex-row">
<input type="checkbox" class="w-fit" bind:checked={data.public} />
<span class="w-fit">{$t('words.public')}?</span>
</label>
<label class="pl-2 flex flex-row gap-2 w-3/5">
<span class="w-fit">{$t('words.title')}:</span>
<input
type="text"
placeholder={$t('words.title')}
bind:value={data.title}
class="text-black bg-inherit border-dotted border-b-2 border-black w-full dark:text-gray-200"
class:border-red-600={!yup.reach(dataSchema, 'title').isValidSync(data.title)}
class:border-solid={!yup.reach(dataSchema, 'title').isValidSync(data.title)}
class:border-2={!yup.reach(dataSchema, 'title').isValidSync(data.title)}
/>
</label>
<label class="pl-2 flex flex-row gap-2 w-3/5">
{$t('words.description')}:
<textarea
placeholder={$t('words.description')}
bind:value={data.description}
class="text-black w-full dark:text-gray-200 dark:bg-gray-800 rounded-lg p-1"
class:border-red-600={!yup.reach(dataSchema, 'description').isValidSync(data.description)}
class:border-solid={!yup.reach(dataSchema, 'description').isValidSync(data.description)}
class:border-2={!yup.reach(dataSchema, 'description').isValidSync(data.description)}
/>
</label>
{#each data.questions as question, index_question}
<div class="ml-8 grid grid-cols-1 gap-2 m-2 border border-black border-2">
<h1 class="text-3xl m-1">{$t('words.question')} {index_question + 1}</h1>
<label class="m-1 flex flex-row gap-2 w-3/5">
{$t('words.question')}:
<input
type="text"
placeholder={$t('words.question')}
bind:value={question.question}
class="text-black w-full bg-inherit border-dotted border-b-2 border-black dark:text-gray-200"
class:border-red-600={!yup
.reach(dataSchema, 'questions[].question')
.isValidSync(question.question)}
class:border-solid={!yup
.reach(dataSchema, 'questions[].question')
.isValidSync(question.question)}
class:border-2={!yup
.reach(dataSchema, 'questions[].question')
.isValidSync(question.question)}
/>
</label>
<label class="m-1 flex flex-row gap-2 w-3/5">
{$t('words.image')}:
<input
type="text"
placeholder="https://i.imgur.com/kSPCidY.png"
bind:value={question.image}
class="text-black w-full bg-inherit border-dotted border-b-2 border-black dark:text-gray-200"
class:border-red-600={!yup
.reach(dataSchema, 'questions[].image')
.isValidSync(question.image)}
class:border-solid={!yup
.reach(dataSchema, 'questions[].image')
.isValidSync(question.image)}
class:border-2={!yup
.reach(dataSchema, 'questions[].image')
.isValidSync(question.image)}
/>
</label>
<label class="m-1 flex flex-row gap-2 w-3/5 flex-nowrap whitespace-nowrap">
{$t('editor.time_in_seconds')}:
<input
type="text"
placeholder="20"
bind:value={question.time}
class="text-black w-full bg-inherit border-dotted border-b-2 border-black dark:text-gray-200"
class:border-red-600={!yup
.reach(dataSchema, 'questions[].time')
.isValidSync(question.time)}
class:border-solid={!yup
.reach(dataSchema, 'questions[].time')
.isValidSync(question.time)}
class:border-2={!yup
.reach(dataSchema, 'questions[].time')
.isValidSync(question.time)}
/>
</label>
{#each question.answers as answer, index_answer}
<div class="ml-8 grid grid-cols-1 gap-2 m-2 border border-black border-2 m-1">
<h1 class="text-3xl m-1">{$t('words.answer')} {index_answer + 1}</h1>
<p class="m-1">
{$t('words.answer')}: {index_answer + 1}
{$t('words.question')}: {index_question + 1}
</p>
<label class="m-1 flex flex-row gap-2 w-3/5 flex-nowrap whitespace-nowrap">
{$t('words.answer')}:
<input
type="text"
placeholder={$t('words.answer')}
bind:value={data.questions[index_question].answers[index_answer].answer}
class="text-black w-full bg-inherit border-dotted border-b-2 border-black dark:text-gray-200"
class:border-red-600={!yup
.reach(dataSchema, 'questions[].answers[].answer')
.isValidSync(
data.questions[index_question].answers[index_answer].answer
)}
class:border-solid={!yup
.reach(dataSchema, 'questions[].answers[].answer')
.isValidSync(
data.questions[index_question].answers[index_answer].answer
)}
class:border-2={!yup
.reach(dataSchema, 'questions[].answers[].answer')
.isValidSync(
data.questions[index_question].answers[index_answer].answer
)}
/>
</label>
<label class="m-1 flex flex-row gap-2 w-2/6 flex-nowrap whitespace-nowrap">
<input
type="checkbox"
bind:checked={answer.right}
class="text-black w-fit dark:text-gray-200"
/>
<span class="w-fit">{$t('editor.right_or_true?')}</span>
</label>
<button
class="text-left border-yellow-500 border-2 w-fit m-1"
type="button"
on:click={() => {
data.questions[index_question].answers.splice(index_answer, 1);
data.questions[index_question].answers =
data.questions[index_question].answers;
}}
>
{$t('editor.delete_answer')}
</button>
</div>
{/each}
<button
class="text-left border-green-500 border-2 w-fit m-1"
type="button"
on:click={() => {
data.questions[index_question].answers = [
...data.questions[index_question].answers,
{ ...empty_answer }
];
}}
>
{$t('editor.add_new_answer')}
</button>
<button
class="text-left border-red-500 border-2 w-fit m-1"
type="button"
on:click={() => {
data.questions.splice(index_question, 1);
data.questions = data.questions;
}}
>
{$t('editor.delete_question')}
</button>
<div class="grid grid-cols-6 h-screen w-screen">
<div>
<Sidebar bind:data bind:selected_question />
</div>
{/each}
<button
class="text-left"
type="button"
on:click={() => {
data.questions = [...data.questions, { ...empty_question }];
}}
>
{$t('editor.add_new_question')}
</button>
{#if imgur_links_valid}
<p class="text-blue-600 text-xl text-center w-fit mx-auto">
{$t('editor.not_all_links_imgur_links')}
</p>
{/if}
{#if schemaInvalid}
<p class="text-blue-600 text-xl text-center w-fit mx-auto">
{yupErrorMessage}
</p>
{/if}
<button
type="submit"
class="text-xl disabled:cursor-not-allowed disabled:border disabled:border-red-500 w-fit mx-auto"
disabled={imgur_links_valid || schemaInvalid}>{submit_button_text}</button
>
<div class="col-span-5">
{#if selected_question === -1}
<SettingsCard bind:data />
{/if}
</div>
</div>
frontend/src/lib/editor/settings-card.svelte
+32
View File
@@ -0,0 +1,32 @@
<script lang="ts">
import type { EditorData } from '$lib/quiz_types';
export let data: EditorData;
</script>
<div class="w-full h-full p-20">
<div class="rounded-lg bg-white w-full h-full border-gray-500">
<div class="h-fit bg-gray-300 rounded-t-lg">
<div class="flex align-middle p-4 gap-3">
<span
class="inline-block bg-gray-600 w-4 h-4 rounded-full hover:bg-red-400 transition"
/>
<span
class="inline-block bg-gray-600 w-4 h-4 rounded-full hover:bg-yellow-400 transition"
/>
<span
class="inline-block bg-gray-600 w-4 h-4 rounded-full hover:bg-green-400 transition"
/>
</div>
</div>
<div>
<div class="flex justify-center pt-10 w-full">
<input
type="text"
bind:value={data.title}
class="p-3 rounded-lg border-gray-500 border text-center w-1/3"
/>
</div>
</div>
</div>
</div>
frontend/src/lib/editor/sidebar.svelte
+192
View File
@@ -0,0 +1,192 @@
<script lang="ts">
import type { EditorData, Question } from '../quiz_types';
import { reach } from 'yup';
import { dataSchema } from '../yupSchemas';
export let data: EditorData;
export let selected_question = -1;
import { createTippy } from 'svelte-tippy';
import 'tippy.js/animations/perspective-subtle.css';
import 'tippy.js/dist/tippy.css';
const tippy = createTippy({
arrow: true,
animation: 'perspective-subtle',
placement: 'right'
});
let arr_of_cards = Array(data.questions.length);
let propertyCard;
const empty_question: Question = {
question: '',
time: '20',
image: '',
answers: []
};
const setSelectedQuestion = (index: number): void => {
selected_question = index;
if (index === -1) {
propertyCard.scrollIntoView({
behavior: 'smooth'
});
} else {
arr_of_cards[index].scrollIntoView({
behavior: 'smooth'
});
}
};
/* onMount(() => {
propertyCard.scrollIntoView({
behavior: 'smooth'
});
});*/
</script>
<div class="h-screen border-r-2 pt-6 px-6 overflow-scroll">
<div
class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500"
bind:this={propertyCard}
class:bg-green-300={selected_question === -1}
on:click={() => setSelectedQuestion(-1)}
>
<div
use:tippy={{ content: data.title === '' ? "It's empty!" : data.title }}
class="m-1 border border-gray-500 rounded-lg p-0.5"
class:border-red-600={!reach(dataSchema, 'title').isValidSync(data.title)}
class:border-solid={!reach(dataSchema, 'title').isValidSync(data.title)}
class:border-2={!reach(dataSchema, 'title').isValidSync(data.title)}
>
<input
type="text"
class="whitespace-nowrap truncate text-center w-full bg-transparent rounded"
bind:value={data.title}
/>
</div>
<div
use:tippy={{ content: data.description === '' ? "It's empty!" : data.description }}
class="m-1 border border-gray-500 rounded-lg p-0.5"
class:border-red-600={!reach(dataSchema, 'description').isValidSync(data.description)}
class:border-solid={!reach(dataSchema, 'description').isValidSync(data.description)}
class:border-2={!reach(dataSchema, 'description').isValidSync(data.description)}
>
<textarea
bind:value={data.description}
class="bg-transparent resize-none w-full rounded text-sm"
/>
</div>
<button
type="button"
on:click={() => {
data.public = !data.public;
}}
class="text-center w-full"
>
{#if data.public}
<svg
class="w-5 h-5 inline-block"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>Public</span>
{:else}
<svg
class="w-5 h-5 inline-block"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
/>
</svg>
<span>Private</span>
{/if}
</button>
</div>
{#each data.questions as question, index}
<div
class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500"
class:bg-green-300={index === selected_question}
on:click={() => {
setSelectedQuestion(index);
}}
bind:this={arr_of_cards[index]}
>
<div
use:tippy={{ content: question.question === '' ? 'No title' : question.question }}
class="m-1 border border-gray-500 rounded-lg p-0.5"
>
<h1 class="whitespace-nowrap truncate text-center">
{#if question.question === ''}
<span class="italic text-gray-500">No title...</span>
{:else}
{question.question}
{/if}
</h1>
</div>
{#if question.image}
<div class="flex justify-center align-middle">
<img
src={question.image}
class="h-10 border rounded-lg"
alt="Not available"
use:tippy={{
content: `<img src='${question.image}' alt='Not available' class='rounded'>`,
allowHTML: true
}}
/>
</div>
{/if}
<div class="grid grid-cols-2 gap-2">
{#each question.answers as answer}
<span
class="whitespace-nowrap truncate rounded-lg p-0.5 text-sm text-center"
class:bg-green-500={answer.right}
class:bg-red-500={!answer.right}
use:tippy={{ content: answer.answer }}>{answer.answer}</span
>
{/each}
</div>
</div>
{/each}
<div
class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500"
>
<button
type="button"
class="h-full flex justify-center w-full"
on:click={() => {
data.questions = [...data.questions, { ...empty_question }];
}}
>
<svg
class="h-full"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/>
</svg>
</button>
</div>
</div>
frontend/src/lib/quiz_types.ts
+7
View File
@@ -20,6 +20,13 @@ export interface Answer {
answer: string;
}
export interface EditorData {
public: boolean;
title: string;
description: string;
questions: Question[];
}
// TODO Keep an eye on this shit
// export interface Answer {
// username: string;
frontend/src/routes/create.svelte
+2 -1
View File
@@ -11,6 +11,7 @@
if (session.authenticated) {
signedIn.set(true);
}
return {};
}
</script>
@@ -21,7 +22,7 @@
import { navbarVisible } from '$lib/stores';
import { dataSchema } from '$lib/yupSchemas';
navbarVisible.set(true);
navbarVisible.set(false);
const { t } = getLocalization();
frontend/src/routes/edit.svelte
+1 -1
View File
@@ -32,7 +32,7 @@
import { navbarVisible } from '$lib/stores';
import { dataSchema } from '$lib/yupSchemas';
navbarVisible.set(true);
navbarVisible.set(false);
const { t } = getLocalization();