preparation
This commit is contained in:
parent
1e2883c105
commit
d04da456ab
|
@ -19,7 +19,7 @@
|
||||||
"svelte": "^3.49.0",
|
"svelte": "^3.49.0",
|
||||||
"svelte-preprocess": "^4.10.7",
|
"svelte-preprocess": "^4.10.7",
|
||||||
"tailwindcss": "^3.1.8",
|
"tailwindcss": "^3.1.8",
|
||||||
"vite": "^3.0.0"
|
"vite": "^3.0.9"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@nodelib/fs.scandir": {
|
"node_modules/@nodelib/fs.scandir": {
|
||||||
|
@ -1842,15 +1842,15 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/vite": {
|
"node_modules/vite": {
|
||||||
"version": "3.0.3",
|
"version": "3.0.9",
|
||||||
"resolved": "https://registry.npmjs.org/vite/-/vite-3.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/vite/-/vite-3.0.9.tgz",
|
||||||
"integrity": "sha512-sDIpIcl3mv1NUaSzZwiXGEy1ZoWwwC2vkxUHY6yiDacR6zf//ZFuBJrozO62gedpE43pmxnLATNR5IYUdAEkMQ==",
|
"integrity": "sha512-waYABTM+G6DBTCpYAxvevpG50UOlZuynR0ckTK5PawNVt7ebX6X7wNXHaGIO6wYYFXSM7/WcuFuO2QzhBB6aMw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"esbuild": "^0.14.47",
|
"esbuild": "^0.14.47",
|
||||||
"postcss": "^8.4.14",
|
"postcss": "^8.4.16",
|
||||||
"resolve": "^1.22.1",
|
"resolve": "^1.22.1",
|
||||||
"rollup": "^2.75.6"
|
"rollup": ">=2.75.6 <2.77.0 || ~2.77.0"
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
"vite": "bin/vite.js"
|
"vite": "bin/vite.js"
|
||||||
|
@ -3047,16 +3047,16 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"vite": {
|
"vite": {
|
||||||
"version": "3.0.3",
|
"version": "3.0.9",
|
||||||
"resolved": "https://registry.npmjs.org/vite/-/vite-3.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/vite/-/vite-3.0.9.tgz",
|
||||||
"integrity": "sha512-sDIpIcl3mv1NUaSzZwiXGEy1ZoWwwC2vkxUHY6yiDacR6zf//ZFuBJrozO62gedpE43pmxnLATNR5IYUdAEkMQ==",
|
"integrity": "sha512-waYABTM+G6DBTCpYAxvevpG50UOlZuynR0ckTK5PawNVt7ebX6X7wNXHaGIO6wYYFXSM7/WcuFuO2QzhBB6aMw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"esbuild": "^0.14.47",
|
"esbuild": "^0.14.47",
|
||||||
"fsevents": "~2.3.2",
|
"fsevents": "~2.3.2",
|
||||||
"postcss": "^8.4.14",
|
"postcss": "^8.4.16",
|
||||||
"resolve": "^1.22.1",
|
"resolve": "^1.22.1",
|
||||||
"rollup": "^2.75.6"
|
"rollup": ">=2.75.6 <2.77.0 || ~2.77.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"wrappy": {
|
"wrappy": {
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
"svelte": "^3.49.0",
|
"svelte": "^3.49.0",
|
||||||
"svelte-preprocess": "^4.10.7",
|
"svelte-preprocess": "^4.10.7",
|
||||||
"tailwindcss": "^3.1.8",
|
"tailwindcss": "^3.1.8",
|
||||||
"vite": "^3.0.0"
|
"vite": "^3.0.9"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"svelte-routing": "^1.6.0"
|
"svelte-routing": "^1.6.0"
|
||||||
|
|
|
@ -1,27 +1,21 @@
|
||||||
<script>
|
<script>
|
||||||
import Layout from '../Quiz/Layout.svelte'
|
import Layout from '../Quiz/Layout.svelte'
|
||||||
import Input from '../Quiz/answers/Input.svelte'
|
import Input from '../Quiz/answers/Input.svelte'
|
||||||
|
let title = 'title' //exportovat ze zhora
|
||||||
|
|
||||||
let answers = {
|
export let params // { type: 'interval', correct: [0, 3], quesion: 'text otazky', description: '', options: null },
|
||||||
title: 'title',
|
|
||||||
about: 'tohel dklfsdja fdsaj jklfdas fsadj lkjdfsa kl dsajfklasj asdlfkjaslk fasdklfj l',
|
|
||||||
right: {
|
|
||||||
min: 1.2,
|
|
||||||
max: 4.4,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
let myAnswer
|
let myAnswer
|
||||||
|
|
||||||
export let control = null
|
export let control = null
|
||||||
|
export let nextQuestion
|
||||||
|
|
||||||
function between(number, min, max) {
|
function between(number, min, max) {
|
||||||
return number >= min && number <= max
|
return number >= min && number <= max
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout on:submit={() => (control = myAnswer !== '' ? between(myAnswer, answers.right.min, answers.right.max) : null)}>
|
<Layout {control} {nextQuestion} on:submit={() => (control = myAnswer !== '' ? between(myAnswer, params.correct[0], params.correct[1]) : null)}>
|
||||||
<span slot="title">{answers.title}</span>
|
<span slot="title">{title}</span>
|
||||||
<span slot="about">{answers.about}</span>
|
<span slot="about">{params.quesion}</span>
|
||||||
<div slot="answers">
|
<div slot="answers">
|
||||||
<span class="self-baseline">
|
<span class="self-baseline">
|
||||||
<Input type="number" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />
|
<Input type="number" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />
|
||||||
|
|
|
@ -1,38 +1,39 @@
|
||||||
<script>
|
<script>
|
||||||
import Layout from '../Quiz/Layout.svelte'
|
import Layout from '../Quiz/Layout.svelte'
|
||||||
import CheckBox from '../Quiz/answers/Checkbox.svelte'
|
import CheckBox from '../Quiz/answers/Checkbox.svelte'
|
||||||
|
let title = 'title' //exportovat ze zhora
|
||||||
|
|
||||||
const popis = 'tohel dklfsdja fdsaj jklfdas fsadj lkjdfsa kl dsajfklasj asdlfkjaslk fasdklfj l'
|
export let params //{ type: 'multichoice', correct: ['banan', 'cokolada'], quesion: 'text otazky', description: '', options: ['banan', 'cokolada', 'mleko'] },
|
||||||
const title = 'Nadpis úkolu'
|
let myAnswers = new Array(params.options.length).fill(false)
|
||||||
|
$: console.log(myAnswers)
|
||||||
let answers = [
|
|
||||||
{ label: '1 answerf adfds', checked: false, right: false },
|
|
||||||
{ label: '1 answerfda sfd', checked: false, right: true },
|
|
||||||
{ label: '1 answerafsd asdf', checked: false, right: false },
|
|
||||||
{ label: '1 answefdsa ffas dr', checked: false, right: true },
|
|
||||||
]
|
|
||||||
|
|
||||||
export let control = null
|
export let control = null
|
||||||
|
export let nextQuestion
|
||||||
|
|
||||||
const controlMultiForm = () => {
|
const controlMultiForm = () => {
|
||||||
control = true
|
for (let i = 0; i < myAnswers.length; i++) {
|
||||||
answers.forEach((answer) => {
|
const answer = myAnswers[i]
|
||||||
const equal = answer.checked === answer.right
|
const option = params.options[i]
|
||||||
if (!equal) {
|
const correct = params.correct
|
||||||
|
|
||||||
|
if (answer && correct.indexOf(option) >= 0) control = null
|
||||||
|
else if (!answer && !(correct.indexOf(option) >= 0)) control = null
|
||||||
|
else {
|
||||||
control = false
|
control = false
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
|
if (control === null) control = true
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout on:submit={controlMultiForm}>
|
<Layout {nextQuestion} {control} on:submit={controlMultiForm}>
|
||||||
<span slot="title">title</span>
|
<span slot="title">{title}</span>
|
||||||
<span slot="about">about</span>
|
<span slot="about">{params.quesion}</span>
|
||||||
<div slot="answers">
|
<div slot="answers">
|
||||||
{#each answers as { label, checked }}
|
{#each params.options as option, i}
|
||||||
<span class="self-baseline">
|
<span class="self-baseline">
|
||||||
<CheckBox bind:checked>{label}</CheckBox>
|
<CheckBox bind:checked={myAnswers[i]}>{option}</CheckBox>
|
||||||
</span>
|
</span>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,16 +1,18 @@
|
||||||
<script>
|
<script>
|
||||||
import Layout from '../Quiz/Layout.svelte'
|
import Layout from '../Quiz/Layout.svelte'
|
||||||
import Input from '../Quiz/answers/Input.svelte'
|
import Input from '../Quiz/answers/Input.svelte'
|
||||||
|
let title = 'title' //exportovat ze zhora
|
||||||
|
|
||||||
let answers = { title: 'title', about: 'about', right: '4' }
|
export let params //{ type: 'text', correct: 'jablko', quesion: 'text otazky', description: '', options: null },
|
||||||
let myAnswer
|
let myAnswer
|
||||||
|
|
||||||
|
export let nextQuestion
|
||||||
export let control = null
|
export let control = null
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout on:submit={() => (control = myAnswer !== '' ? myAnswer === answers.right : null)}>
|
<Layout {nextQuestion} {control} on:submit={() => (control = myAnswer !== '' ? myAnswer === params.correct : null)}>
|
||||||
<span slot="title">{answers.title}</span>
|
<span slot="title">{title}</span>
|
||||||
<span slot="about">{answers.about}</span>
|
<span slot="about">{params.about}</span>
|
||||||
<div slot="answers">
|
<div slot="answers">
|
||||||
<span class="self-baseline">
|
<span class="self-baseline">
|
||||||
<Input type="number" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />
|
<Input type="number" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />
|
||||||
|
|
|
@ -5,23 +5,8 @@
|
||||||
import MultiplyForm from './MultiChoiceForm.svelte'
|
import MultiplyForm from './MultiChoiceForm.svelte'
|
||||||
import IntervalForm from './IntervalForm.svelte'
|
import IntervalForm from './IntervalForm.svelte'
|
||||||
import QrCode from './QrCode.svelte'
|
import QrCode from './QrCode.svelte'
|
||||||
|
import { navigate } from 'svelte-routing'
|
||||||
let control = null // if true => spravne if false spatne
|
import Finish from './Finish.svelte'
|
||||||
$: console.log(control)
|
|
||||||
|
|
||||||
/*
|
|
||||||
let questions = [
|
|
||||||
{ type: 'text', correct: 'jablko', quesion: 'text otazky', description: '', options: null },
|
|
||||||
{ type: 'multichoice', correct: ['banan', 'cokolada'], quesion: 'text otazky', description: '', options: ['banan', 'cokolada', 'mleko'] },
|
|
||||||
{ type: 'singlechoice', correct: 'jablko', quesion: 'text otazky', description: '', options: ['banan', 'cokolada', 'mleko'] },
|
|
||||||
{ type: 'interval', correct: [0, 3], quesion: 'text otazky', description: '', options: null },
|
|
||||||
]
|
|
||||||
*/
|
|
||||||
|
|
||||||
const answers = {
|
|
||||||
type: 'singlechoice',
|
|
||||||
//... answers
|
|
||||||
}
|
|
||||||
|
|
||||||
const components = {
|
const components = {
|
||||||
text: TextForm,
|
text: TextForm,
|
||||||
|
@ -30,7 +15,35 @@
|
||||||
multichoice: MultiplyForm,
|
multichoice: MultiplyForm,
|
||||||
interval: IntervalForm,
|
interval: IntervalForm,
|
||||||
qrcode: QrCode,
|
qrcode: QrCode,
|
||||||
|
|
||||||
|
finish: Finish,
|
||||||
|
}
|
||||||
|
|
||||||
|
let control = null // if true => spravne if false spatne
|
||||||
|
$: console.log(control ? 'správně' : !control ? 'špatně' : null)
|
||||||
|
|
||||||
|
const nextQuestion = () => {
|
||||||
|
if (clientAnswers.pos + 1 === clientAnswers.end) {
|
||||||
|
page = components.finish
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
control = null
|
||||||
|
clientAnswers.pos++
|
||||||
|
}
|
||||||
|
|
||||||
|
let questions = [
|
||||||
|
{ type: 'singlechoice', correct: 'banan', quesion: 'text otazky', description: '', options: ['banan', 'cokolada', 'mleko'] },
|
||||||
|
{ type: 'interval', correct: [0, 3], quesion: 'text otazky', description: '', options: null },
|
||||||
|
{ type: 'text', correct: 'jablko', quesion: 'text otazky', description: '', options: null },
|
||||||
|
{ type: 'multichoice', correct: ['banan', 'cokolada'], quesion: 'text otazky', description: '', options: ['banan', 'cokolada', 'mleko'] },
|
||||||
|
]
|
||||||
|
let page
|
||||||
|
$: page = components[questions[clientAnswers.pos].type]
|
||||||
|
|
||||||
|
let clientAnswers = {
|
||||||
|
pos: 0,
|
||||||
|
end: questions.length,
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:component this={components[answers.type]} bind:control />
|
<svelte:component this={page} params={questions[clientAnswers.pos]} {nextQuestion} bind:control />
|
||||||
|
|
|
@ -1,25 +1,22 @@
|
||||||
<script>
|
<script>
|
||||||
import Radio from '../Quiz/answers/Radio.svelte'
|
import Radio from '../Quiz/answers/Radio.svelte'
|
||||||
import Layout from '../Quiz/Layout.svelte'
|
import Layout from '../Quiz/Layout.svelte'
|
||||||
|
let title = 'title' //exportovat ze zhora
|
||||||
|
|
||||||
const about = 'tohel dklfsdja fdsaj jklfdas fsadj lkjdfsa kl dsajfklasj asdlfkjaslk fasdklfj l'
|
export let params //{ type: 'singlechoice', correct: 'banan', quesion: 'text otazky', description: '', options: ['banan', 'cokolada', 'mleko'] },
|
||||||
const title = 'jdfsafsd'
|
|
||||||
|
|
||||||
let answers = {
|
|
||||||
labels: ['label 1', 'label 2', 'label 3', 'label 4'],
|
|
||||||
right: 'label 1',
|
|
||||||
}
|
|
||||||
let myAnswer
|
let myAnswer
|
||||||
|
|
||||||
export let control = null
|
export let control = null
|
||||||
|
export let nextQuestion
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout on:submit={() => (control = myAnswer !== undefined ? myAnswer === answers.right : null)}>
|
<Layout {control} {nextQuestion} on:submit={() => (control = typeof myAnswer === 'string' ? myAnswer === params.correct : null)}>
|
||||||
<span slot="title">{title}</span>
|
<span slot="title">{title}</span>
|
||||||
<span slot="about">{about}</span>
|
<span slot="about">{params.quesion}</span>
|
||||||
<div slot="answers">
|
<div slot="answers">
|
||||||
{#each answers.labels as label}
|
{#each params.options as option}
|
||||||
<span class="self-baseline">
|
<span class="self-baseline">
|
||||||
<Radio value={label} bind:group={myAnswer}>{label}</Radio>
|
<Radio value={option} bind:group={myAnswer}>{option}</Radio>
|
||||||
</span>
|
</span>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,20 +1,22 @@
|
||||||
<script>
|
<script>
|
||||||
import Layout from '../Quiz/Layout.svelte'
|
import Layout from '../Quiz/Layout.svelte'
|
||||||
import Input from '../Quiz/answers/Input.svelte'
|
import Input from '../Quiz/answers/Input.svelte'
|
||||||
|
let title = 'title' //exportovat ze zhora
|
||||||
|
|
||||||
let answers = { title: 'title', about: 'tohel dklfsdja fdsaj jklfdas fsadj lkjdfsa kl dsajfklasj asdlfkjaslk fasdklfj l', right: 'domov' }
|
export let params //{ type: 'text', correct: 'jablko', quesion: 'text otazky', description: '', options: null },
|
||||||
let myAnswer
|
let myAnswer
|
||||||
|
|
||||||
export let control = null
|
export let control = null
|
||||||
|
export let nextQuestion
|
||||||
const compare = (a, b) => {
|
const compare = (a, b) => {
|
||||||
if (a.localeCompare(b, 'cz', { sensitivity: 'variant' }) === 0) return true
|
if (a.localeCompare(b, 'cz', { sensitivity: 'variant' }) === 0) return true
|
||||||
else return false
|
else return false
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout on:submit={() => (control = myAnswer !== '' ? compare(myAnswer, answers.right) : null)}>
|
<Layout {control} {nextQuestion} on:submit={() => (control = myAnswer !== '' ? compare(myAnswer, params.correct) : null)}>
|
||||||
<span slot="title">{answers.title}</span>
|
<span slot="title">{title}</span>
|
||||||
<span slot="about">{answers.about}</span>
|
<span slot="about">{params.quesion}</span>
|
||||||
<div slot="answers">
|
<div slot="answers">
|
||||||
<span class="self-baseline">
|
<span class="self-baseline">
|
||||||
<Input type="text" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />
|
<Input type="text" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />
|
||||||
|
|
|
@ -4,6 +4,9 @@
|
||||||
import Section from '../Section.svelte'
|
import Section from '../Section.svelte'
|
||||||
import Map from '../game/Map.svelte'
|
import Map from '../game/Map.svelte'
|
||||||
import Button from '../Button.svelte'
|
import Button from '../Button.svelte'
|
||||||
|
|
||||||
|
export let control, nextQuestion
|
||||||
|
$: console.log(control)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
|
@ -14,7 +17,7 @@
|
||||||
<span style="width: 85%"><Map /></span>
|
<span style="width: 85%"><Map /></span>
|
||||||
</div>
|
</div>
|
||||||
</Heading>
|
</Heading>
|
||||||
<Section style={'height: calc(100% - var(--quizHeader)); position: relative'}>
|
<Section style="height: calc(100% - var(--quizHeader)); position: relative">
|
||||||
<div class="flex items-center justify-center flex-col w-full gap-24 p-4">
|
<div class="flex items-center justify-center flex-col w-full gap-24 p-4">
|
||||||
<div class="popis">
|
<div class="popis">
|
||||||
<span> Popis úkolu: </span>
|
<span> Popis úkolu: </span>
|
||||||
|
@ -22,9 +25,20 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center justify-center flex-col w-full gap-6">
|
<div class="flex items-center justify-center flex-col w-full gap-6">
|
||||||
<span class="relative"> <slot name="answers" /> </span>
|
<span class="relative"> <slot name="answers" /> </span>
|
||||||
<Button on:submit primary class="w-3/4 max-w-sm min-w-[400px] h-16 bottom-0 fixed m-10 relative">commit</Button>
|
{#if control !== null}<!--jestli jsem už odpověděl-->
|
||||||
|
<Button on:submit={nextQuestion} primary class="w-3/4 max-w-sm min-w-[400px] h-16 bottom-0 fixed m-10 relative">Na další otázku</Button>
|
||||||
|
{:else}<!--čeká na odpověd, na sejmutí-->
|
||||||
|
<Button on:submit primary class="w-3/4 max-w-sm min-w-[400px] h-16 bottom-0 fixed m-10 relative">Vyhodnotit</Button>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="w-full flex justify-center h-fit size">
|
||||||
|
{#if control}
|
||||||
|
<span>správně</span>
|
||||||
|
{:else if control !== null}
|
||||||
|
<span>špatně</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
</Section>
|
</Section>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
import { idGenerator } from '../../../jsLibrari/IdGenerator'
|
import { idGenerator } from '$lib/jsLibrari/IdGenerator'
|
||||||
|
|
||||||
const id = idGenerator()
|
const id = idGenerator()
|
||||||
export let checked = false
|
|
||||||
|
export let checked = true
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="cover h-14">
|
<div class="cover h-14">
|
||||||
|
@ -17,7 +17,7 @@
|
||||||
<label for={id}><slot /></label>
|
<label for={id}><slot /></label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
.cover {
|
.cover {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
@ -26,6 +26,7 @@
|
||||||
grid-template-columns: 56px auto;
|
grid-template-columns: 56px auto;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
|
@ -35,8 +36,4 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 140%;
|
font-size: 140%;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
/*border: 4px solid var(--blue);
|
|
||||||
box-shadow: 0 0 4px var(--blue), 0 0 1px var(--blue) inset;
|
|
||||||
border-radius: var(--border-radius);*/
|
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue