Merge pull request #193 from mawoka-myblock/slides
This commit is contained in:
Mawoka
GitHub
+12
-1
@@ -112,13 +112,22 @@ class QuizQuestionType(str, Enum):
|
||||
ABCD = "ABCD"
|
||||
RANGE = "RANGE"
|
||||
VOTING = "VOTING"
|
||||
SLIDE = "SLIDE"
|
||||
|
||||
|
||||
class SlideElementTypes(str, Enum):
|
||||
TEXT = "TEXT"
|
||||
HEADLINE = "HEADLINE"
|
||||
IMAGE = "IMAGE"
|
||||
RECTANGLE = "RECTANGLE"
|
||||
CIRCLE = "CIRCLE"
|
||||
|
||||
|
||||
class QuizQuestion(BaseModel):
|
||||
question: str
|
||||
time: str # in Secs
|
||||
type: None | QuizQuestionType = QuizQuestionType.ABCD
|
||||
answers: list[ABCDQuizAnswer] | RangeQuizAnswer | list[VotingQuizAnswer]
|
||||
answers: list[ABCDQuizAnswer] | RangeQuizAnswer | list[VotingQuizAnswer] | str
|
||||
image: str | None = None
|
||||
|
||||
@validator("answers")
|
||||
@@ -129,6 +138,8 @@ class QuizQuestion(BaseModel):
|
||||
raise ValueError("Answer must be from type RangeQuizAnswer if type is RANGE")
|
||||
if values["type"] == QuizQuestionType.VOTING and type(v[0]) != VotingQuizAnswer:
|
||||
raise ValueError("Answer must be from type VotingQuizAnswer if type is VOTING")
|
||||
if values["type"] == QuizQuestionType.SLIDE and type(v[0]) != str:
|
||||
raise ValueError("Answer must be from type SlideElement if type is SLIDE")
|
||||
return v
|
||||
|
||||
|
||||
|
||||
@@ -230,6 +230,8 @@ async def set_question_number(sid, data: str):
|
||||
await redis.set(f"game:{session['game_pin']}", game_data.json())
|
||||
await redis.set(f"game:{session['game_pin']}:current_time", datetime.now().isoformat())
|
||||
temp_return = game_data.dict(include={"questions"})["questions"][int(float(data))]
|
||||
if game_data.questions[int(float(data))].type == QuizQuestionType.SLIDE:
|
||||
return
|
||||
if game_data.questions[int(float(data))].type == QuizQuestionType.VOTING:
|
||||
for i in range(len(temp_return["answers"])):
|
||||
temp_return["answers"][i] = VotingQuizAnswer(**temp_return["answers"][i])
|
||||
|
||||
@@ -65,6 +65,7 @@
|
||||
"luxon": "^3.1.1",
|
||||
"mapbox-gl": "^2.11.0",
|
||||
"minisearch": "^5.1.0",
|
||||
"pikaso": "^2.7.4",
|
||||
"plausible-tracker": "^0.3.8",
|
||||
"postcss": "^8.4.19",
|
||||
"postcss-import": "^14.1.0",
|
||||
|
||||
Generated
+20
@@ -53,6 +53,7 @@ specifiers:
|
||||
luxon: ^3.1.1
|
||||
mapbox-gl: ^2.11.0
|
||||
minisearch: ^5.1.0
|
||||
pikaso: ^2.7.4
|
||||
plausible-tracker: ^0.3.8
|
||||
postcss: ^8.4.19
|
||||
postcss-import: ^14.1.0
|
||||
@@ -132,6 +133,7 @@ devDependencies:
|
||||
luxon: 3.1.1
|
||||
mapbox-gl: 2.11.1
|
||||
minisearch: 5.1.0
|
||||
pikaso: 2.7.4
|
||||
plausible-tracker: 0.3.8
|
||||
postcss: 8.4.20
|
||||
postcss-import: 14.1.0_postcss@8.4.20
|
||||
@@ -3433,6 +3435,13 @@ packages:
|
||||
engines: { node: '>=6' }
|
||||
dev: true
|
||||
|
||||
/konva/8.3.14:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-6I/TZppgY3Frs//AvZ87YVQLFxLywitb8wLS3qMM+Ih9e4QcB5Yy8br6eq7DdUzxPdbsYTz1FQBHzNxs08M1Tw==
|
||||
}
|
||||
dev: true
|
||||
|
||||
/levn/0.4.1:
|
||||
resolution:
|
||||
{
|
||||
@@ -3982,6 +3991,17 @@ packages:
|
||||
engines: { node: '>=0.10.0' }
|
||||
dev: true
|
||||
|
||||
/pikaso/2.7.4:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-30nqF5+xBUIBKiHHfDfjA3oZChjirN3AmhfWb456iUvTpMY2D51PKjGHfgF2SoQP5Jad7i4Zv+wrQAp7BhcNmQ==
|
||||
}
|
||||
dependencies:
|
||||
deepmerge: 4.2.2
|
||||
konva: 8.3.14
|
||||
typescript: 4.7.4
|
||||
dev: true
|
||||
|
||||
/plausible-tracker/0.3.8:
|
||||
resolution:
|
||||
{
|
||||
|
||||
@@ -27,16 +27,21 @@
|
||||
let timer_res: string;
|
||||
let shown_question_now: number;
|
||||
let final_results_clicked = false;
|
||||
let timer_interval;
|
||||
|
||||
export let player_scores;
|
||||
|
||||
export const set_question_number = (q_number: number) => {
|
||||
timer_res = '0';
|
||||
clearInterval(timer_interval);
|
||||
// setTimeout(() => {
|
||||
question_results = null;
|
||||
socket.emit('set_question_number', q_number.toString());
|
||||
shown_question_now = q_number;
|
||||
timer_res = quiz_data.questions[q_number].time;
|
||||
selected_question = selected_question + 1;
|
||||
timer(timer_res);
|
||||
// }, 1000);
|
||||
};
|
||||
const get_question_results = () => {
|
||||
socket.emit('get_question_results', {
|
||||
@@ -53,6 +58,7 @@
|
||||
const get_final_results = () => {
|
||||
socket.emit('get_final_results', {});
|
||||
final_results_clicked = true;
|
||||
timer_res = '0';
|
||||
};
|
||||
|
||||
socket.on('final_results', (data) => {
|
||||
@@ -75,7 +81,7 @@
|
||||
|
||||
const timer = (time: string) => {
|
||||
let seconds = Number(time);
|
||||
let timer_interval = setInterval(() => {
|
||||
timer_interval = setInterval(() => {
|
||||
if (timer_res === '0') {
|
||||
clearInterval(timer_interval);
|
||||
// socket.emit('show_solutions', {});
|
||||
@@ -87,14 +93,14 @@
|
||||
timer_res = seconds.toString();
|
||||
}, 1000);
|
||||
};
|
||||
let circular_prgoress = 0;
|
||||
let circular_progress = 0;
|
||||
$: {
|
||||
try {
|
||||
circular_prgoress =
|
||||
circular_progress =
|
||||
1 -
|
||||
((100 / quiz_data.questions[selected_question].time) * parseInt(timer_res)) / 100;
|
||||
} catch {
|
||||
circular_prgoress = 0;
|
||||
circular_progress = 0;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -109,7 +115,7 @@
|
||||
/{quiz_data.questions.length}
|
||||
</p>
|
||||
<div class="justify-self-end ml-auto mr-0 col-start-3 col-end-3">
|
||||
{#if selected_question + 1 === quiz_data.questions.length && timer_res === '0' && question_results !== null}
|
||||
{#if selected_question + 1 === quiz_data.questions.length && ((timer_res === '0' && question_results !== null) || quiz_data?.questions?.[selected_question]?.type === QuizQuestionType.SLIDE)}
|
||||
{#if JSON.stringify(final_results) === JSON.stringify([null])}
|
||||
<button on:click={get_final_results} class="admin-button"
|
||||
>Get final results
|
||||
@@ -126,12 +132,34 @@
|
||||
</button>
|
||||
{/if}
|
||||
{#if question_results === null && selected_question !== -1}
|
||||
<button on:click={get_question_results} class="admin-button">Show results </button>
|
||||
{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
|
||||
<button
|
||||
on:click={() => {
|
||||
set_question_number(selected_question + 1);
|
||||
}}
|
||||
class="admin-button"
|
||||
>Next Question ({selected_question + 2})
|
||||
</button>
|
||||
{:else}
|
||||
<button on:click={get_question_results} class="admin-button"
|
||||
>Show results</button
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
{:else if selected_question !== -1}
|
||||
<button on:click={show_solutions} class="admin-button"
|
||||
>Stop time and show solutions
|
||||
</button>
|
||||
{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
|
||||
<button
|
||||
on:click={() => {
|
||||
set_question_number(selected_question + 1);
|
||||
}}
|
||||
class="admin-button"
|
||||
>Next Question ({selected_question + 2})
|
||||
</button>
|
||||
{:else}
|
||||
<button on:click={show_solutions} class="admin-button"
|
||||
>Stop time and show solutions
|
||||
</button>
|
||||
{/if}
|
||||
{:else}
|
||||
<!-- <button
|
||||
on:click={() => {
|
||||
@@ -153,50 +181,62 @@
|
||||
|
||||
<div class="w-full h-full pt-28">
|
||||
{#if timer_res !== undefined && !final_results_clicked && !question_results}
|
||||
<div class="flex flex-col justify-center w-screen h-1/6">
|
||||
<h1 class="text-6xl text-center">
|
||||
{@html quiz_data.questions[selected_question].question}
|
||||
</h1>
|
||||
<!-- <span class='text-center py-2 text-lg'>{$t('admin_page.time_left')}: {timer_res}</span>-->
|
||||
<div class="mx-auto my-2">
|
||||
<CircularTimer
|
||||
bind:text={timer_res}
|
||||
bind:progress={circular_prgoress}
|
||||
color="#ef4444"
|
||||
{#if quiz_data.questions[selected_question].type === QuizQuestionType.SLIDE}
|
||||
{#await import('$lib/play/admin/slide.svelte')}
|
||||
<Spinner my_20={false} />
|
||||
{:then c}
|
||||
<svelte:component
|
||||
this={c.default}
|
||||
bind:question={quiz_data.questions[selected_question]}
|
||||
/>
|
||||
{/await}
|
||||
{:else}
|
||||
<div class="flex flex-col justify-center w-screen h-1/6">
|
||||
<h1 class="text-6xl text-center">
|
||||
{@html quiz_data.questions[selected_question].question}
|
||||
</h1>
|
||||
<!-- <span class='text-center py-2 text-lg'>{$t('admin_page.time_left')}: {timer_res}</span>-->
|
||||
<div class="mx-auto my-2">
|
||||
<CircularTimer
|
||||
bind:text={timer_res}
|
||||
bind:progress={circular_progress}
|
||||
color="#ef4444"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if quiz_data.questions[selected_question].image !== null}
|
||||
<div>
|
||||
<img
|
||||
src={quiz_data.questions[selected_question].image}
|
||||
class="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
|
||||
alt="Content for Question"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD || quiz_data.questions[selected_question].type === QuizQuestionType.VOTING}
|
||||
<div class="grid grid-cols-2 gap-2 w-full p-4">
|
||||
{#each quiz_data.questions[selected_question].answers as answer, i}
|
||||
<div
|
||||
class="rounded-lg h-fit flex"
|
||||
style="background-color: {answer.color ?? '#B45309'}"
|
||||
class:opacity-50={!answer.right &&
|
||||
timer_res === '0' &&
|
||||
quiz_data.questions[selected_question].type === QuizQuestionType.ABCD}
|
||||
>
|
||||
<img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} />
|
||||
<span class="text-center text-2xl px-2 py-4 w-full text-black"
|
||||
>{answer.answer}</span
|
||||
{#if quiz_data.questions[selected_question].image !== null}
|
||||
<div>
|
||||
<img
|
||||
src={quiz_data.questions[selected_question].image}
|
||||
class="max-h-[20vh] object-cover mx-auto mb-8 w-auto"
|
||||
alt="Content for Question"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if quiz_data.questions[selected_question].type === QuizQuestionType.ABCD || quiz_data.questions[selected_question].type === QuizQuestionType.VOTING}
|
||||
<div class="grid grid-cols-2 gap-2 w-full p-4">
|
||||
{#each quiz_data.questions[selected_question].answers as answer, i}
|
||||
<div
|
||||
class="rounded-lg h-fit flex"
|
||||
style="background-color: {answer.color ?? '#B45309'}"
|
||||
class:opacity-50={!answer.right &&
|
||||
timer_res === '0' &&
|
||||
quiz_data.questions[selected_question].type ===
|
||||
QuizQuestionType.ABCD}
|
||||
>
|
||||
<span class="pl-4 w-10" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<img class="w-14 inline-block pl-4" alt="icon" src={kahoot_icons[i]} />
|
||||
<span class="text-center text-2xl px-2 py-4 w-full text-black"
|
||||
>{answer.answer}</span
|
||||
>
|
||||
<span class="pl-4 w-10" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
<br />
|
||||
{#if timer_res === '0' && JSON.stringify(final_results) === JSON.stringify([null])}
|
||||
{#if timer_res === '0' && JSON.stringify(final_results) === JSON.stringify( [null] ) && quiz_data.questions[selected_question].type !== QuizQuestionType.SLIDE}
|
||||
{#if question_results === null}{:else if question_results === undefined}
|
||||
{#if !final_results_clicked}
|
||||
<div class="w-full flex justify-center">
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
import StartGamePopup from './start_game.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import viewport from './useViewportAction.js';
|
||||
import Spinner from '$lib/Spinner.svelte';
|
||||
|
||||
let copy_toast_open = false;
|
||||
let start_game = null;
|
||||
@@ -350,6 +351,28 @@
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if question.type === QuizQuestionType.SLIDE}
|
||||
<div
|
||||
use:viewport
|
||||
on:enterViewport={() => {
|
||||
visibleImages[i][q] = true;
|
||||
}}
|
||||
on:exitViewport={() => {
|
||||
visibleImages[i][q] = false;
|
||||
}}
|
||||
class="flex justify-center align-middle items-center"
|
||||
>
|
||||
{#await import('$lib/play/admin/slide.svelte')}
|
||||
<Spinner my={false} />
|
||||
{:then c}
|
||||
<div class="max-h-[50%] max-w-[60%]">
|
||||
<svelte:component
|
||||
this={c.default}
|
||||
bind:question
|
||||
/>
|
||||
</div>
|
||||
{/await}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
|
||||
@@ -37,11 +37,13 @@
|
||||
}
|
||||
|
||||
const validateInput = async (data: EditorData) => {
|
||||
// console.log("input", data)
|
||||
try {
|
||||
await dataSchema.validate(data, { abortEarly: false });
|
||||
schemaInvalid = false;
|
||||
yupErrorMessage = '';
|
||||
} catch (err) {
|
||||
console.log('erro!', err.errors);
|
||||
schemaInvalid = true;
|
||||
yupErrorMessage = err.errors ? err.errors[0] : '';
|
||||
}
|
||||
|
||||
+114
-103
@@ -51,9 +51,9 @@
|
||||
*/
|
||||
</script>
|
||||
|
||||
<div class="w-full h-full pb-20 px-20">
|
||||
<div class="w-full max-h-full pb-20 px-20 h-full">
|
||||
<div class="rounded-lg bg-white w-full h-full border-gray-500 drop-shadow-2xl dark:bg-gray-700">
|
||||
<div class="h-fit bg-gray-300 rounded-t-lg dark:bg-gray-500">
|
||||
<div class="h-12 bg-gray-300 rounded-t-lg dark:bg-gray-500">
|
||||
<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"
|
||||
@@ -66,113 +66,124 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex justify-center pt-10 w-full">
|
||||
{#await import('$lib/inline-editor.svelte')}
|
||||
<Spinner my_20={false} />
|
||||
{:then c}
|
||||
<div
|
||||
class="rounded-lg placeholder:italic placeholder:font-normal dark:bg-gray-500"
|
||||
class:bg-yellow-500={!reach(dataSchema, 'questions[].question').isValidSync(
|
||||
data.questions[selected_question].question
|
||||
)}
|
||||
>
|
||||
<svelte:component
|
||||
this={c.default}
|
||||
bind:text={data.questions[selected_question].question}
|
||||
{#if data.questions[selected_question].type === QuizQuestionType.SLIDE}
|
||||
{#await import('./slide.svelte')}
|
||||
<Spinner my_20={false} />
|
||||
{:then c}
|
||||
<svelte:component this={c.default} bind:data={data.questions[selected_question]} />
|
||||
{/await}
|
||||
{:else}
|
||||
<div class="flex flex-col">
|
||||
<div class="flex justify-center pt-10 w-full">
|
||||
{#await import('$lib/inline-editor.svelte')}
|
||||
<Spinner my_20={false} />
|
||||
{:then c}
|
||||
<div
|
||||
class="rounded-lg placeholder:italic placeholder:font-normal dark:bg-gray-500"
|
||||
class:bg-yellow-500={!reach(
|
||||
dataSchema,
|
||||
'questions[].question'
|
||||
).isValidSync(data.questions[selected_question].question)}
|
||||
>
|
||||
<svelte:component
|
||||
this={c.default}
|
||||
bind:text={data.questions[selected_question].question}
|
||||
/>
|
||||
</div>
|
||||
{/await}
|
||||
</div>
|
||||
{#if data.questions[selected_question].image != undefined && data.questions[selected_question].image !== ''}
|
||||
<div class="flex justify-center pt-10 w-full max-h-72 w-full">
|
||||
<img
|
||||
src={data.questions[selected_question].image}
|
||||
alt="not available"
|
||||
class="max-h-72 h-auto w-auto"
|
||||
on:contextmenu|preventDefault={() => {
|
||||
data.questions[selected_question].image = '';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/await}
|
||||
</div>
|
||||
{#if data.questions[selected_question].image != undefined && data.questions[selected_question].image !== ''}
|
||||
<div class="flex justify-center pt-10 w-full max-h-72 w-full">
|
||||
<img
|
||||
src={data.questions[selected_question].image}
|
||||
alt="not available"
|
||||
class="max-h-72 h-auto w-auto"
|
||||
on:contextmenu|preventDefault={() => {
|
||||
data.questions[selected_question].image = '';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{:else if pow_data === undefined}
|
||||
<a
|
||||
href="/docs/pow"
|
||||
target="_blank"
|
||||
use:tippy={{ content: "Click to learn why it's loading so long." }}
|
||||
class="cursor-help"
|
||||
>
|
||||
<Spinner my_20={false} />
|
||||
</a>
|
||||
{:else}
|
||||
{#await import('$lib/editor/uploader.svelte')}
|
||||
<Spinner my_20={false} />
|
||||
{:then c}
|
||||
<svelte:component
|
||||
this={c.default}
|
||||
bind:modalOpen={uppyOpen}
|
||||
bind:edit_id
|
||||
bind:data
|
||||
bind:selected_question
|
||||
bind:pow_data
|
||||
bind:pow_salt
|
||||
/>
|
||||
{/await}
|
||||
{/if}
|
||||
<div class="flex justify-center pt-10 w-full">
|
||||
<div>
|
||||
<svg
|
||||
class="w-8 h-8 inline-block"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{:else if pow_data === undefined}
|
||||
<a
|
||||
href="/docs/pow"
|
||||
target="_blank"
|
||||
use:tippy={{ content: "Click to learn why it's loading so long." }}
|
||||
class="cursor-help"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
<Spinner my_20={false} />
|
||||
</a>
|
||||
{:else}
|
||||
{#await import('$lib/editor/uploader.svelte')}
|
||||
<Spinner my_20={false} />
|
||||
{:then c}
|
||||
<svelte:component
|
||||
this={c.default}
|
||||
bind:modalOpen={uppyOpen}
|
||||
bind:edit_id
|
||||
bind:data
|
||||
bind:selected_question
|
||||
bind:pow_data
|
||||
bind:pow_salt
|
||||
/>
|
||||
</svg>
|
||||
<input
|
||||
type="number"
|
||||
max="999"
|
||||
min="1"
|
||||
class="w-20 bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1"
|
||||
bind:value={data.questions[selected_question].time}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center pt-10">
|
||||
<select
|
||||
class="p-2 rounded-lg bg-gray-800 focus:ring-2 ring-blue-600 text-white"
|
||||
name="Answer-Type"
|
||||
bind:value={data.questions[selected_question].type}
|
||||
>
|
||||
<option value={QuizQuestionType.RANGE}>{$t('words.range')}</option>
|
||||
<option value={QuizQuestionType.ABCD}>{$t('words.multiple_choice')}</option>
|
||||
<option value={QuizQuestionType.VOTING}>{$t('words.voting')}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex justify-center pt-10 w-full">
|
||||
{#if data.questions[selected_question].type === QuizQuestionType.ABCD}
|
||||
{#await import('$lib/editor/ABCDEditorPart.svelte')}
|
||||
<Spinner my_20={false} />
|
||||
{:then c}
|
||||
<svelte:component this={c.default} bind:data bind:selected_question />
|
||||
{/await}
|
||||
{:else if data.questions[selected_question].type === QuizQuestionType.RANGE}
|
||||
<RangeEditor bind:selected_question bind:data />
|
||||
{:else if data.questions[selected_question].type === QuizQuestionType.VOTING}
|
||||
{#await import('$lib/editor/VotingEditorPart.svelte')}
|
||||
<Spinner my_20={false} />
|
||||
{:then c}
|
||||
<svelte:component this={c.default} bind:data bind:selected_question />
|
||||
{/await}
|
||||
{/if}
|
||||
<div class="flex justify-center pt-10 w-full">
|
||||
<div>
|
||||
<svg
|
||||
class="w-8 h-8 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<input
|
||||
type="number"
|
||||
max="999"
|
||||
min="1"
|
||||
class="w-20 bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1"
|
||||
bind:value={data.questions[selected_question].time}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center pt-10">
|
||||
<select
|
||||
class="p-2 rounded-lg bg-gray-800 focus:ring-2 ring-blue-600 text-white"
|
||||
name="Answer-Type"
|
||||
bind:value={data.questions[selected_question].type}
|
||||
>
|
||||
<option value={QuizQuestionType.RANGE}>{$t('words.range')}</option>
|
||||
<option value={QuizQuestionType.ABCD}>{$t('words.multiple_choice')}</option>
|
||||
<option value={QuizQuestionType.VOTING}>{$t('words.voting')}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex justify-center pt-10 w-full">
|
||||
{#if data.questions[selected_question].type === QuizQuestionType.ABCD}
|
||||
{#await import('$lib/editor/ABCDEditorPart.svelte')}
|
||||
<Spinner my_20={false} />
|
||||
{:then c}
|
||||
<svelte:component this={c.default} bind:data bind:selected_question />
|
||||
{/await}
|
||||
{:else if data.questions[selected_question].type === QuizQuestionType.RANGE}
|
||||
<RangeEditor bind:selected_question bind:data />
|
||||
{:else if data.questions[selected_question].type === QuizQuestionType.VOTING}
|
||||
{#await import('$lib/editor/VotingEditorPart.svelte')}
|
||||
<Spinner my_20={false} />
|
||||
{:then c}
|
||||
<svelte:component this={c.default} bind:data bind:selected_question />
|
||||
{/await}
|
||||
{/if}
|
||||
</div>
|
||||
<p class="italic text-center mt-auto pt-4">
|
||||
{$t('editor_page.right_click_to_delete')}
|
||||
</p>
|
||||
</div>
|
||||
<p class="italic text-center mt-auto pt-4">{$t('editor_page.right_click_to_delete')}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -28,6 +28,14 @@
|
||||
type: QuizQuestionType.ABCD
|
||||
};
|
||||
|
||||
const empy_slide: Question = {
|
||||
type: QuizQuestionType.SLIDE,
|
||||
time: '120',
|
||||
question: 'Slide',
|
||||
image: undefined,
|
||||
answers: ''
|
||||
};
|
||||
|
||||
const setSelectedQuestion = (index: number): void => {
|
||||
selected_question = index;
|
||||
if (index === -1) {
|
||||
@@ -242,15 +250,39 @@
|
||||
</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 dark:bg-gray-600"
|
||||
class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 grid grid-cols-2"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="h-full flex justify-center w-full dark:text-black"
|
||||
class="h-full flex justify-center w-full dark:text-black flex-col border-r border-black"
|
||||
on:click={() => {
|
||||
data.questions = [...data.questions, { ...empty_question }];
|
||||
}}
|
||||
>
|
||||
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>
|
||||
<button
|
||||
type="button"
|
||||
class="h-full flex justify-center w-full dark:text-black flex-col"
|
||||
on:click={() => {
|
||||
data.questions = [...data.questions, { ...empy_slide }];
|
||||
}}
|
||||
>
|
||||
Slide
|
||||
<svg
|
||||
class="h-full"
|
||||
fill="none"
|
||||
|
||||
@@ -0,0 +1,245 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type { Question } from '$lib/quiz_types';
|
||||
import { ElementTypes, QuizQuestionType } from '$lib/quiz_types';
|
||||
import ElementSelection from './slides/element_selection.svelte';
|
||||
import SettingsMenu from './slides/settings_menu.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import Pikaso from 'pikaso';
|
||||
import EditMenu from './slides/edit_menu.svelte';
|
||||
import type { Konva, ShapeModel } from 'pikaso';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
export let data: Question = {
|
||||
type: QuizQuestionType.SLIDE,
|
||||
time: '120',
|
||||
question: '',
|
||||
image: undefined,
|
||||
answers: ''
|
||||
};
|
||||
let selected_element = undefined;
|
||||
let canvas_el: HTMLDivElement | undefined;
|
||||
let canvas: Pikaso;
|
||||
let selected_el: null | ShapeModel<Konva.Shape | Konva.Group, Konva.ShapeConfig> = null;
|
||||
|
||||
let elements_binds: Array<HTMLElement> | undefined = [];
|
||||
let main_el: undefined | HTMLElement;
|
||||
let settings_menu_open = false;
|
||||
|
||||
const set_correct_height = new ResizeObserver((e) => {
|
||||
for (const i of e) {
|
||||
const id = parseInt(i.target.getAttribute('el_id'));
|
||||
data.answers[id].width = i.contentRect.width / main_el.offsetWidth;
|
||||
data.answers[id].height = i.contentRect.height / main_el.offsetHeight;
|
||||
}
|
||||
});
|
||||
|
||||
let darkMode = false;
|
||||
if (browser) {
|
||||
darkMode =
|
||||
localStorage.theme === 'dark' ||
|
||||
(!('theme' in localStorage) &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||
}
|
||||
const add_text_field = () => {
|
||||
if (selected_element === ElementTypes.Text) {
|
||||
canvas.shapes.label.insert({
|
||||
container: {
|
||||
x: 40,
|
||||
y: 40
|
||||
},
|
||||
text: {
|
||||
text: 'Text',
|
||||
fontSize: 20
|
||||
}
|
||||
});
|
||||
} else if (selected_element === ElementTypes.Headline) {
|
||||
canvas.shapes.label.insert({
|
||||
container: {
|
||||
x: 40,
|
||||
y: 40
|
||||
},
|
||||
text: {
|
||||
text: 'Headline',
|
||||
fontSize: 35
|
||||
}
|
||||
});
|
||||
} else if (selected_element === ElementTypes.Circle) {
|
||||
canvas.shapes.circle.insert({
|
||||
x: 40,
|
||||
y: 40,
|
||||
radius: 50,
|
||||
fill: '#ff000d'
|
||||
});
|
||||
} else if (selected_element === ElementTypes.Rectangle) {
|
||||
canvas.shapes.rect.insert({
|
||||
x: 40,
|
||||
y: 40,
|
||||
width: 50,
|
||||
height: 50,
|
||||
fill: '#ff000d'
|
||||
});
|
||||
}
|
||||
console.log(canvas.export.toJson());
|
||||
};
|
||||
|
||||
$: {
|
||||
if (selected_element) {
|
||||
add_text_field();
|
||||
}
|
||||
}
|
||||
const assign_resize_handlers = () => {
|
||||
for (let i = 0; i < elements_binds.length; i++) {
|
||||
set_correct_height.observe(elements_binds[i]);
|
||||
}
|
||||
};
|
||||
|
||||
/* if (data.answers.length !== 0) {
|
||||
for (let i = 0; i < data.answers.length; i++) {
|
||||
data.answers[i].width = data.answers[i].width * main_el.offsetWidth;
|
||||
data.answers[i].height = data.answers[i].height * main_el.offsetHeight;
|
||||
}
|
||||
}*/
|
||||
|
||||
$: {
|
||||
elements_binds;
|
||||
assign_resize_handlers();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
/* setTimeout(() => {
|
||||
for (let i = 0; i < data.answers.length; i++) {
|
||||
elements_binds[i].style.height = `${
|
||||
data.answers[i].height * main_el.offsetHeight
|
||||
}px`;
|
||||
elements_binds[i].style.width = `${data.answers[i].width * main_el.offsetWidth}px`;
|
||||
}
|
||||
}, 200);*/
|
||||
canvas = new Pikaso({
|
||||
container: canvas_el,
|
||||
snapToGrid: {},
|
||||
/* transformer: {
|
||||
borderStroke: "#00ff00",
|
||||
anchorStroke: "#00ff00"
|
||||
},
|
||||
cropper: {
|
||||
transformer: {
|
||||
borderStroke: "#00ff00",
|
||||
// anchorFill: "#00ff00",
|
||||
anchorStroke: "#00ff00"
|
||||
},
|
||||
guides: {
|
||||
color: "#00ff00"
|
||||
}
|
||||
},*/
|
||||
selection: {
|
||||
transformer: {
|
||||
borderStroke: darkMode ? '#fff' : '#000000',
|
||||
anchorStroke: darkMode ? '#fff' : '#000000'
|
||||
}
|
||||
}
|
||||
/* selection: {
|
||||
interactive: false
|
||||
}*/
|
||||
});
|
||||
console.log(data.answers);
|
||||
if (data.answers) {
|
||||
if (typeof data.answers === 'string') {
|
||||
canvas.import.json(JSON.parse(data.answers));
|
||||
}
|
||||
}
|
||||
canvas.on('*', () => {
|
||||
data.answers = JSON.stringify(canvas.export.toJson());
|
||||
});
|
||||
canvas.on('selection:change', (data) => {
|
||||
/* data.shapes[0].update({fill: "#ffffff"})
|
||||
console.log(data.shapes[0])*/
|
||||
// console.log(canvas.board.shapes)
|
||||
if (data.shapes.length > 0) {
|
||||
selected_el = data.shapes[0];
|
||||
} else {
|
||||
selected_el = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex h-full relative w-full" bind:this={main_el}>
|
||||
<div class="absolute top-0 left-0 grid grid-cols-6 w-full">
|
||||
<div class="flex flex-col pl-2 rounded-t-lg z-40 pt-2">
|
||||
<button
|
||||
class="mr-auto"
|
||||
on:click={() => {
|
||||
settings_menu_open = !settings_menu_open;
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
color="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M12 15a3 3 0 100-6 3 3 0 000 6z"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M19.622 10.395l-1.097-2.65L20 6l-2-2-1.735 1.483-2.707-1.113L12.935 2h-1.954l-.632 2.401-2.645 1.115L6 4 4 6l1.453 1.789-1.08 2.657L2 11v2l2.401.655L5.516 16.3 4 18l2 2 1.791-1.46 2.606 1.072L11 22h2l.604-2.387 2.651-1.098C16.697 18.831 18 20 18 20l2-2-1.484-1.75 1.098-2.652 2.386-.62V11l-2.378-.605z"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{#if settings_menu_open}
|
||||
<SettingsMenu bind:time={data.time} bind:title={data.question} />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-start-2 col-end-6 transition bg-transparent pt-2">
|
||||
<EditMenu bind:selected_el />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col pr-2 rounded-t-lg z-40 pt-2">
|
||||
<button
|
||||
class="ml-auto"
|
||||
on:click={() => {
|
||||
selected_element = selected_element === null ? undefined : null;
|
||||
}}
|
||||
type="button"
|
||||
class:add-button={selected_element === null}
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
color="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9 12h3m3 0h-3m0 0V9m0 3v3M21 3.6v16.8a.6.6 0 01-.6.6H3.6a.6.6 0 01-.6-.6V3.6a.6.6 0 01.6-.6h16.8a.6.6 0 01.6.6z"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{#if selected_element === null}
|
||||
<ElementSelection bind:selected_element />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div bind:this={canvas_el} class="w-full h-full block" />
|
||||
</div>
|
||||
@@ -0,0 +1,205 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type { Konva, ShapeModel } from 'pikaso';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
export let selected_el: null | ShapeModel<Konva.Shape | Konva.Group, Konva.ShapeConfig>;
|
||||
|
||||
let opened_dropdown = null;
|
||||
|
||||
let available_modifiers: Array<string> = [];
|
||||
|
||||
const set_available_modifiers = () => {
|
||||
available_modifiers = [];
|
||||
console.log(selected_el, 'sel_el');
|
||||
if (!selected_el) {
|
||||
return;
|
||||
}
|
||||
switch (selected_el.type) {
|
||||
case 'label':
|
||||
available_modifiers.push('font_size', 'text_color');
|
||||
break;
|
||||
case 'circle' || 'rectangle':
|
||||
available_modifiers.push('fill_color');
|
||||
}
|
||||
};
|
||||
|
||||
$: {
|
||||
selected_el;
|
||||
set_available_modifiers();
|
||||
}
|
||||
|
||||
const toggle_switch = (el: string) => {
|
||||
if (opened_dropdown) {
|
||||
opened_dropdown = null;
|
||||
} else {
|
||||
opened_dropdown = el;
|
||||
}
|
||||
};
|
||||
|
||||
const change_color = (e: Event) => {
|
||||
if (available_modifiers.includes('text_color')) {
|
||||
console.log('text color');
|
||||
selected_el.updateText({
|
||||
fill: e.target.value
|
||||
});
|
||||
} else if (available_modifiers.includes('fill_color')) {
|
||||
console.log('fill color');
|
||||
selected_el.update({ fill: e.target.value });
|
||||
}
|
||||
opened_dropdown = null;
|
||||
};
|
||||
|
||||
const change_fontsize = (e: Event) => {
|
||||
console.log(selected_el.node.children[1].attrs.fontSize);
|
||||
selected_el.updateText({
|
||||
fontSize: e.target.value
|
||||
});
|
||||
};
|
||||
|
||||
$: if (!selected_el) {
|
||||
opened_dropdown = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-row justify-evenly z-40">
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="disabled:opacity-50 transition"
|
||||
disabled={!(
|
||||
available_modifiers.includes('fill_color') ||
|
||||
available_modifiers.includes('text_color')
|
||||
)}
|
||||
on:click={() => {
|
||||
toggle_switch('color');
|
||||
}}
|
||||
>
|
||||
<!-- iconoir/color-picker -->
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
color="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M7 13.161l5.464-5.464a1 1 0 011.415 0l2.12 2.12a1 1 0 010 1.415l-1.928 1.929m-7.071 0l-2.172 2.172a.999.999 0 00-.218.327l-1.028 2.496c-.508 1.233.725 2.466 1.958 1.959l2.497-1.028c.122-.05.233-.125.326-.218l5.708-5.708m-7.071 0h7.071M13.878 3.454l2.121 2.121m4.243 4.243l-2.121-2.121m-2.122-2.122l1.414-1.414a1 1 0 011.415 0l.707.707a1 1 0 010 1.414L18.12 7.697m-2.122-2.122l2.122 2.122"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{#if opened_dropdown === 'color'}
|
||||
<div
|
||||
class="bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex absolute z-40"
|
||||
transition:fade={{ duration: 100 }}
|
||||
>
|
||||
<input type="color" on:change={change_color} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="disabled:opacity-50 transition"
|
||||
on:click={() => {
|
||||
toggle_switch('font_size');
|
||||
}}
|
||||
disabled={!available_modifiers.includes('font_size')}
|
||||
>
|
||||
<!-- iconoir/font-size -->
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
color="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M18 21V11m0 10l-2-2.5m2 2.5l2-2.5M18 11l-2 2m2-2l2 2M9 5v12m0 0H7m2 0h2M15 7V5H3v2"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{#if opened_dropdown === 'font_size'}
|
||||
<div
|
||||
class="bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex absolute z-40"
|
||||
transition:fade={{ duration: 100 }}
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
on:change={change_fontsize}
|
||||
value={selected_el?.node?.children?.[1]?.attrs?.fontSize}
|
||||
min="10"
|
||||
max="250"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="disabled:opacity-50 transition"
|
||||
on:click={() => {
|
||||
selected_el.update({ zIndex: selected_el.node.getZIndex() + 1 });
|
||||
}}
|
||||
disabled={!selected_el}
|
||||
>
|
||||
<!-- iconoir/priority-up -->
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
color="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M11.576 1.424a.6.6 0 01.848 0l10.152 10.152a.6.6 0 010 .848L12.424 22.576a.6.6 0 01-.848 0L1.424 12.424a.6.6 0 010-.848L11.576 1.424zM12 7l4 4m-4-4l-4 4.167M12 7v9"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="disabled:opacity-50 transition"
|
||||
on:click={() => {
|
||||
selected_el.update({ zIndex: selected_el.node.getZIndex() - 1 });
|
||||
}}
|
||||
disabled={!selected_el}
|
||||
>
|
||||
<!-- iconoir/priority-down -->
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
color="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M11.576 1.424a.6.6 0 01.848 0l10.152 10.152a.6.6 0 010 .848L12.424 22.576a.6.6 0 01-.848 0L1.424 12.424a.6.6 0 010-.848L11.576 1.424zM12 16l4-4m-4 4l-4-4.167M12 16V7"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { ElementTypes } from '$lib/quiz_types';
|
||||
import { onMount } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
export let selected_element;
|
||||
const keybinding_list = {
|
||||
t: ElementTypes.Text,
|
||||
h: ElementTypes.Headline,
|
||||
r: ElementTypes.Rectangle,
|
||||
c: ElementTypes.Circle
|
||||
// "i": ElementTypes.Image
|
||||
};
|
||||
|
||||
const keypress_listener = (key: KeyboardEvent) => {
|
||||
if (selected_element !== null) {
|
||||
return;
|
||||
}
|
||||
const sel_type = keybinding_list[key.key];
|
||||
if (sel_type) {
|
||||
selected_element = sel_type;
|
||||
} else if (key.code === 'Escape') {
|
||||
selected_element = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
document.body.addEventListener('keydown', keypress_listener);
|
||||
});
|
||||
const element_list: Array<{
|
||||
name: string;
|
||||
description: string;
|
||||
type: ElementTypes;
|
||||
icon: string | undefined;
|
||||
shortcut: string;
|
||||
}> = [
|
||||
{
|
||||
name: 'Headline',
|
||||
description: 'A bold text for headlines',
|
||||
type: ElementTypes.Headline,
|
||||
icon: undefined,
|
||||
shortcut: 'h'
|
||||
},
|
||||
{
|
||||
name: 'Text',
|
||||
description: 'Smaller longer text',
|
||||
type: ElementTypes.Text,
|
||||
icon: undefined,
|
||||
shortcut: 't'
|
||||
},
|
||||
{
|
||||
name: 'Rectangle',
|
||||
description: 'Just a rectangle',
|
||||
type: ElementTypes.Rectangle,
|
||||
icon: undefined,
|
||||
shortcut: 'r'
|
||||
},
|
||||
{
|
||||
name: 'Circle',
|
||||
description: 'Just a circle',
|
||||
type: ElementTypes.Circle,
|
||||
icon: undefined,
|
||||
shortcut: 'c'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="bg-white m-auto rounded-lg shadow-lg p-4 flex flex-col dark:bg-gray-600 h-fit"
|
||||
transition:fade={{ duration: 100 }}
|
||||
>
|
||||
<ul>
|
||||
{#each element_list as el}
|
||||
<li
|
||||
class="flex flex-row mt-4 w-full bg-gray-200 shadow-xl rounded-lg p-2 hover:bg-gray-300 hover:shadow-2xl hover:cursor-pointer transition dark:bg-gray-800"
|
||||
on:click={() => {
|
||||
selected_element = el.type;
|
||||
}}
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<h3 class="text-xl">{el.name}</h3>
|
||||
<p>{el.description}</p>
|
||||
</div>
|
||||
<kbd class="my-auto ml-auto">{el.shortcut}</kbd>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<!-- heroicons/x-circle -->
|
||||
<svg 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
|
After Width: | Height: | Size: 497 B |
@@ -0,0 +1,39 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
export let title;
|
||||
export let time;
|
||||
let time_local = 120;
|
||||
/*eslint no-unused-vars: ["error", { "argsIgnorePattern": "^_" }]*/
|
||||
$: time = String(time_local);
|
||||
if (time) {
|
||||
time_local = parseInt(time);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex"
|
||||
transition:fade={{ duration: 100 }}
|
||||
>
|
||||
<label class="w-fit">
|
||||
Time
|
||||
<input
|
||||
bind:value={time}
|
||||
type="number"
|
||||
class="w-20 bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1 outline-none"
|
||||
/>
|
||||
</label>
|
||||
<label class="w-fit">
|
||||
Title
|
||||
<input
|
||||
bind:value={title}
|
||||
type="text"
|
||||
class="bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1 transition outline-none"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<script lang="ts">
|
||||
export let data: string;
|
||||
export let editor = true;
|
||||
|
||||
if (!data) {
|
||||
data = '#ed333b';
|
||||
}
|
||||
$: console.log(data);
|
||||
</script>
|
||||
|
||||
<div class="rounded-full w-full h-full flex justify-center p-2" style="background-color: {data}">
|
||||
{#if editor}
|
||||
<input type="color" bind:value={data} class="m-auto hover:cursor-pointer" />
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,21 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<script lang="ts">
|
||||
export let data;
|
||||
export let editor = true;
|
||||
</script>
|
||||
|
||||
{#if editor}
|
||||
<input
|
||||
bind:value={data}
|
||||
type="text"
|
||||
class="w-full h-full dark:text-black text-center text-3xl min-h-fit"
|
||||
/>
|
||||
{:else}
|
||||
<h2 class="w-full h-full text-center text-3xl min-h-fit">
|
||||
{data}
|
||||
</h2>
|
||||
{/if}
|
||||
@@ -0,0 +1,20 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<script lang="ts">
|
||||
export let data: string;
|
||||
export let editor = true;
|
||||
|
||||
if (!data) {
|
||||
data = '#ed333b';
|
||||
}
|
||||
$: console.log(data);
|
||||
</script>
|
||||
|
||||
<div class="w-full h-full flex justify-center p-2" style="background-color: {data}">
|
||||
{#if editor}
|
||||
<input type="color" bind:value={data} class="m-auto hover:cursor-pointer" />
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,15 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<script lang="ts">
|
||||
export let data;
|
||||
export let editor = true;
|
||||
</script>
|
||||
|
||||
{#if editor}
|
||||
<textarea bind:value={data} class="w-full h-full dark:text-black resize-none" />
|
||||
{:else}
|
||||
<p>{data}</p>
|
||||
{/if}
|
||||
@@ -0,0 +1,40 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type { Question } from '$lib/quiz_types';
|
||||
import { onMount } from 'svelte';
|
||||
import Pikaso from 'pikaso';
|
||||
|
||||
export let question: Question;
|
||||
|
||||
let canvas_el: HTMLDivElement | undefined;
|
||||
let canvas: Pikaso;
|
||||
let img_src = '';
|
||||
|
||||
onMount(() => {
|
||||
canvas = new Pikaso({
|
||||
container: canvas_el,
|
||||
snapToGrid: {},
|
||||
selection: {
|
||||
interactive: false
|
||||
}
|
||||
});
|
||||
if (typeof question.answers === 'string') {
|
||||
const data = JSON.parse(question.answers);
|
||||
canvas.import.json(data);
|
||||
img_src = canvas.export.toImage();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="w-full h-full">
|
||||
<div class="hidden">
|
||||
<div bind:this={canvas_el} class="w-full h-full block" />
|
||||
</div>
|
||||
<div class="w-full h-full flex justify-center">
|
||||
<img src={img_src} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -150,5 +150,13 @@
|
||||
{#if timer_res === '0'}
|
||||
<p>No correct answers, since this is a poll-question</p>
|
||||
{/if}
|
||||
{:else if question.type === QuizQuestionType.SLIDE}
|
||||
{#await import('$lib/play/admin/slide.svelte')}
|
||||
<Spinner my={false} />
|
||||
{:then c}
|
||||
<div class="max-h-[90%] max-w-[90%]">
|
||||
<svelte:component this={c.default} bind:question />
|
||||
</div>
|
||||
{/await}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,14 @@
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
export enum ElementTypes {
|
||||
Text = 'TEXT', // eslint-disable-line no-unused-vars
|
||||
Headline = 'HEADLINE', // eslint-disable-line no-unused-vars
|
||||
Image = 'IMAGE', // eslint-disable-line no-unused-vars
|
||||
Rectangle = 'RECTANGLE', // eslint-disable-line no-unused-vars
|
||||
Circle = 'CIRCLE' // eslint-disable-line no-unused-vars
|
||||
}
|
||||
|
||||
export interface QuizData {
|
||||
title: string;
|
||||
description: string;
|
||||
@@ -19,7 +27,8 @@ export interface QuizData {
|
||||
export enum QuizQuestionType {
|
||||
ABCD = 'ABCD', // eslint-disable-line no-unused-vars
|
||||
RANGE = 'RANGE', // eslint-disable-line no-unused-vars
|
||||
VOTING = 'VOTING' // eslint-disable-line no-unused-vars
|
||||
VOTING = 'VOTING', // eslint-disable-line no-unused-vars
|
||||
SLIDE = 'SLIDE' // eslint-disable-line no-unused-vars
|
||||
}
|
||||
|
||||
export interface RangeQuizAnswer {
|
||||
@@ -34,7 +43,7 @@ export interface Question {
|
||||
question: string;
|
||||
type?: QuizQuestionType;
|
||||
image?: string;
|
||||
answers: Answer[] | RangeQuizAnswer | VotingAnswer[];
|
||||
answers: Answer[] | RangeQuizAnswer | VotingAnswer[] | string;
|
||||
}
|
||||
|
||||
export interface Answer {
|
||||
@@ -42,6 +51,7 @@ export interface Answer {
|
||||
answer: string;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
export interface VotingAnswer {
|
||||
answer: string;
|
||||
image?: string;
|
||||
|
||||
@@ -34,6 +34,18 @@ export const RangeQuestionSchema = yup.object({
|
||||
min_correct: yup.number(),
|
||||
max_correct: yup.number()
|
||||
});
|
||||
|
||||
export const SlideQuestionSchema = yup.array().of(
|
||||
yup.object({
|
||||
type: yup.string().required(),
|
||||
x: yup.number(),
|
||||
y: yup.number(),
|
||||
height: yup.number(),
|
||||
width: yup.number(),
|
||||
data: yup.string().optional(),
|
||||
id: yup.number().required()
|
||||
})
|
||||
);
|
||||
export const dataSchema = yup.object({
|
||||
public: yup.boolean().required(),
|
||||
type: yup.string(),
|
||||
@@ -63,12 +75,23 @@ export const dataSchema = yup.object({
|
||||
.lowercase(),
|
||||
answers: yup.lazy((v) => {
|
||||
if (Array.isArray(v)) {
|
||||
if (typeof v[0].right === 'boolean') {
|
||||
return ABCDQuestionSchema;
|
||||
} else {
|
||||
return VotingQuestionSchema;
|
||||
try {
|
||||
if (typeof v[0].right === 'boolean') {
|
||||
// console.log('ABCDQuestionSchema');
|
||||
return ABCDQuestionSchema;
|
||||
} else if (v[0].answer !== undefined) {
|
||||
// console.log('VotingQuestionSchema');
|
||||
return VotingQuestionSchema;
|
||||
} else {
|
||||
// console.log('SlideQuestionSchema');
|
||||
return yup.string().required();
|
||||
}
|
||||
} catch {
|
||||
// console.log('SlideQuestionSchema');
|
||||
return yup.string().required();
|
||||
}
|
||||
} else {
|
||||
// console.log('RangeQuestionSchema');
|
||||
return RangeQuestionSchema;
|
||||
}
|
||||
})
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
import { QuizQuestionType } from '$lib/quiz_types.js';
|
||||
import StartGamePopup from '$lib/dashboard/start_game.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import Spinner from '$lib/Spinner.svelte';
|
||||
|
||||
const tippy = createTippy({
|
||||
arrow: true,
|
||||
@@ -228,6 +229,14 @@
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if question.type === QuizQuestionType.SLIDE}
|
||||
{#await import('$lib/play/admin/slide.svelte')}
|
||||
<Spinner my={false} />
|
||||
{:then c}
|
||||
<div class="max-h-[90%] max-w-[90%]">
|
||||
<svelte:component this={c.default} bind:question />
|
||||
</div>
|
||||
{/await}
|
||||
{/if}
|
||||
</div>
|
||||
</CollapsSection>
|
||||
|
||||
Reference in New Issue
Block a user