🐛 Fixed the binding thing
This commit is contained in:
Mawoka
@@ -23,6 +23,9 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang='ts'>
|
<script lang='ts'>
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import Editor from '$lib/editor.svelte';
|
||||||
|
|
||||||
interface Data {
|
interface Data {
|
||||||
public: boolean;
|
public: boolean;
|
||||||
title: string;
|
title: string;
|
||||||
@@ -41,97 +44,113 @@
|
|||||||
answer: string;
|
answer: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
let empty_question: Question = {
|
let responseData = {
|
||||||
question: '',
|
open: false
|
||||||
time: '20',
|
|
||||||
answers: [{
|
|
||||||
right: false,
|
|
||||||
answer: ''
|
|
||||||
}]
|
|
||||||
};
|
};
|
||||||
|
|
||||||
let empty_answer: Answer = {
|
|
||||||
right: false,
|
|
||||||
answer: ''
|
|
||||||
};
|
|
||||||
let data: Data;
|
let data: Data;
|
||||||
const from_localstorage = localStorage.getItem('create_game');
|
onMount(() => {
|
||||||
if (from_localstorage === null) {
|
const from_localstorage = localStorage.getItem('create_game');
|
||||||
data = {
|
if (from_localstorage === null) {
|
||||||
description: '',
|
data = {
|
||||||
public: false,
|
description: '',
|
||||||
title: '',
|
public: false,
|
||||||
questions: [{ question: '', time: '20', answers: [{ right: false, answer: '' }] }]
|
title: '',
|
||||||
};
|
questions: [{ question: '', time: '20', answers: [{ right: false, answer: '' }] }]
|
||||||
} else {
|
};
|
||||||
data = JSON.parse(from_localstorage);
|
} else {
|
||||||
}
|
data = JSON.parse(from_localstorage);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
const submit = async () => {
|
const submit = async () => {
|
||||||
const res = await fetch('/api/v1/quiz/create', {
|
const res = await fetch('/api/v1/quiz/create', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: JSON.stringify(data)
|
body: JSON.stringify(data),
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
});
|
});
|
||||||
if (res.status === 401) {
|
if (res.status === 401) {
|
||||||
localStorage.setItem('create_game', JSON.stringify(data));
|
localStorage.setItem('create_game', JSON.stringify(data));
|
||||||
window.location.href = '/account/login';
|
window.location.href = '/account/login';
|
||||||
|
} else if (res.status === 200) {
|
||||||
|
responseData.open = true;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
{#if data !== undefined}
|
||||||
|
<form on:submit|preventDefault={submit} class='grid grid-cols-1 gap-2'>
|
||||||
|
<Editor bind:data />
|
||||||
|
</form>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<form on:submit|preventDefault={submit} class='grid grid-cols-1 gap-2'>
|
<div
|
||||||
<label>
|
class='fixed z-10 inset-0 overflow-y-auto'
|
||||||
<input type='checkbox' bind:checked={data.public}>
|
aria-labelledby='modal-title'
|
||||||
Public?
|
role='dialog'
|
||||||
</label>
|
aria-modal='true'
|
||||||
<label>
|
class:hidden={!responseData.open}
|
||||||
<input type='text' placeholder='Title' bind:value={data.title} class='text-black' />
|
>
|
||||||
Title
|
<div
|
||||||
</label>
|
class='flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0'
|
||||||
<label>
|
>
|
||||||
<textarea placeholder='Description' bind:value={data.description} class='text-black'></textarea>
|
<div
|
||||||
Description
|
class='fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity'
|
||||||
</label>
|
aria-hidden='true'
|
||||||
{#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'>Question {index_question + 1}</h1>
|
|
||||||
|
|
||||||
<label>
|
<span class='hidden sm:inline-block sm:align-middle sm:h-screen' aria-hidden='true'
|
||||||
<input type='text' placeholder='Question' bind:value={question.question} class='text-black' />
|
>​</span
|
||||||
Question
|
>
|
||||||
</label>
|
<div
|
||||||
<label>
|
class='inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full'
|
||||||
<input type='text' placeholder='20' bind:value={question.time} class='text-black' />
|
>
|
||||||
Time in seconds
|
<div class='bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4'>
|
||||||
</label>
|
<div class='sm:flex sm:items-start'>
|
||||||
{#each question.answers as answer, index_answer}
|
<div
|
||||||
<div class='ml-8 grid grid-cols-1 gap-2 m-2 border border-black border-2'>
|
class='mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10'
|
||||||
<h1 class='text-3xl'>Answer {index_answer + 1}</h1>
|
>
|
||||||
<p>Answer: {index_answer} Question: {index_question}</p>
|
<!-- Heroicon name: outline/exclamation -->
|
||||||
<label>
|
<svg
|
||||||
<input type='text' placeholder='Answer'
|
class='w-6 h-6 text-green-600'
|
||||||
bind:value={data.questions[index_question].answers[index_answer].answer}
|
fill='none'
|
||||||
class='text-black' />
|
stroke='currentColor'
|
||||||
Answer
|
viewBox='0 0 24 24'
|
||||||
</label>
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
<label>
|
>
|
||||||
<input type='checkbox' bind:checked={answer.right} class='text-black' />
|
<path
|
||||||
Right?
|
stroke-linecap='round'
|
||||||
</label>
|
stroke-linejoin='round'
|
||||||
<button class='text-left'
|
stroke-width='2'
|
||||||
on:click={() => {data.questions[index_question].answers = [...data.questions[index_question].answers, empty_answer]}}>
|
d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'
|
||||||
Add new answer
|
/>
|
||||||
</button>
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class='mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left'>
|
||||||
|
<h3 class='text-lg leading-6 font-medium text-gray-900' id='modal-title'>
|
||||||
|
Successfully created quiz!
|
||||||
|
</h3>
|
||||||
|
<div class='mt-2'>
|
||||||
|
<p class='text-sm text-gray-500'>
|
||||||
|
Created the quiz successfully!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
</div>
|
||||||
<button class='text-left' on:click={() => {data.questions = [...data.questions, empty_question]}}>Add new
|
<div class='bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse'>
|
||||||
question
|
<button
|
||||||
</button>
|
type='button'
|
||||||
|
on:click={() => {
|
||||||
|
window.location.href = "/overview"
|
||||||
|
}}
|
||||||
|
class='mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm'
|
||||||
|
>Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{/each}
|
</div>
|
||||||
<button type='submit'>Create</button>
|
|
||||||
</form>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user