Madmin
/
Erant-OldApp
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

preparation

This commit is contained in:
ota-prokopec 2022-09-02 21:07:32 +02:00
parent 1e2883c105
commit d04da456ab
11 changed files with 118 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
package-lock.json generated
View File

@ -19,7 +19,7 @@
"svelte": "^3.49.0",
"svelte-preprocess": "^4.10.7",
"tailwindcss": "^3.1.8",
"vite": "^3.0.0"
"vite": "^3.0.9"
}
},
"node_modules/@nodelib/fs.scandir": {
@ -1842,15 +1842,15 @@
"dev": true
},
"node_modules/vite": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/vite/-/vite-3.0.3.tgz",
"integrity": "sha512-sDIpIcl3mv1NUaSzZwiXGEy1ZoWwwC2vkxUHY6yiDacR6zf//ZFuBJrozO62gedpE43pmxnLATNR5IYUdAEkMQ==",
"version": "3.0.9",
"resolved": "https://registry.npmjs.org/vite/-/vite-3.0.9.tgz",
"integrity": "sha512-waYABTM+G6DBTCpYAxvevpG50UOlZuynR0ckTK5PawNVt7ebX6X7wNXHaGIO6wYYFXSM7/WcuFuO2QzhBB6aMw==",
"dev": true,
"dependencies": {
"esbuild": "^0.14.47",
"postcss": "^8.4.14",
"postcss": "^8.4.16",
"resolve": "^1.22.1",
"rollup": "^2.75.6"
"rollup": ">=2.75.6 <2.77.0 || ~2.77.0"
},
"bin": {
"vite": "bin/vite.js"
@ -3047,16 +3047,16 @@
"dev": true
},
"vite": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/vite/-/vite-3.0.3.tgz",
"integrity": "sha512-sDIpIcl3mv1NUaSzZwiXGEy1ZoWwwC2vkxUHY6yiDacR6zf//ZFuBJrozO62gedpE43pmxnLATNR5IYUdAEkMQ==",
"version": "3.0.9",
"resolved": "https://registry.npmjs.org/vite/-/vite-3.0.9.tgz",
"integrity": "sha512-waYABTM+G6DBTCpYAxvevpG50UOlZuynR0ckTK5PawNVt7ebX6X7wNXHaGIO6wYYFXSM7/WcuFuO2QzhBB6aMw==",
"dev": true,
"requires": {
"esbuild": "^0.14.47",
"fsevents": "~2.3.2",
"postcss": "^8.4.14",
"postcss": "^8.4.16",
"resolve": "^1.22.1",
"rollup": "^2.75.6"
"rollup": ">=2.75.6 <2.77.0 || ~2.77.0"
}
},
"wrappy": {

2
package.json
View File

@ -17,7 +17,7 @@
"svelte": "^3.49.0",
"svelte-preprocess": "^4.10.7",
"tailwindcss": "^3.1.8",
"vite": "^3.0.0"
"vite": "^3.0.9"
},
"dependencies": {
"svelte-routing": "^1.6.0"

0
src/routes/finish.svelte → src/lib/Components/Forms/Finish.svelte
View File

18
src/lib/Components/Forms/IntervalForm.svelte
View File

@ -1,27 +1,21 @@
<script>
import Layout from '../Quiz/Layout.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: {
min: 1.2,
max: 4.4,
},
}
export let params // { type: 'interval', correct: [0, 3], quesion: 'text otazky', description: '', options: null },
let myAnswer
export let control = null
export let nextQuestion
function between(number, min, max) {
return number >= min && number <= max
}
</script>
<Layout on:submit={() => (control = myAnswer !== '' ? between(myAnswer, answers.right.min, answers.right.max) : null)}>
<span slot="title">{answers.title}</span>
<span slot="about">{answers.about}</span>
<Layout {control} {nextQuestion} on:submit={() => (control = myAnswer !== '' ? between(myAnswer, params.correct[0], params.correct[1]) : null)}>
<span slot="title">{title}</span>
<span slot="about">{params.quesion}</span>
<div slot="answers">
<span class="self-baseline">
<Input type="number" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />

39
src/lib/Components/Forms/MultiChoiceForm.svelte
View File

@ -1,38 +1,39 @@
<script>
import Layout from '../Quiz/Layout.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'
const title = 'Nadpis úkolu'
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 params //{ type: 'multichoice', correct: ['banan', 'cokolada'], quesion: 'text otazky', description: '', options: ['banan', 'cokolada', 'mleko'] },
let myAnswers = new Array(params.options.length).fill(false)
$: console.log(myAnswers)
export let control = null
export let nextQuestion
const controlMultiForm = () => {
control = true
answers.forEach((answer) => {
const equal = answer.checked === answer.right
if (!equal) {
for (let i = 0; i < myAnswers.length; i++) {
const answer = myAnswers[i]
const option = params.options[i]
const correct = params.correct
if (answer && correct.indexOf(option) >= 0) control = null
else if (!answer && !(correct.indexOf(option) >= 0)) control = null
else {
control = false
return ''
}
})
}
if (control === null) control = true
}
</script>
<Layout on:submit={controlMultiForm}>
<span slot="title">title</span>
<span slot="about">about</span>
<Layout {nextQuestion} {control} on:submit={controlMultiForm}>
<span slot="title">{title}</span>
<span slot="about">{params.quesion}</span>
<div slot="answers">
{#each answers as { label, checked }}
{#each params.options as option, i}
<span class="self-baseline">
<CheckBox bind:checked>{label}</CheckBox>
<CheckBox bind:checked={myAnswers[i]}>{option}</CheckBox>
</span>
{/each}
</div>

10
src/lib/Components/Forms/NumberForm.svelte
View File

@ -1,16 +1,18 @@
<script>
import Layout from '../Quiz/Layout.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
export let nextQuestion
export let control = null
</script>
<Layout on:submit={() => (control = myAnswer !== '' ? myAnswer === answers.right : null)}>
<span slot="title">{answers.title}</span>
<span slot="about">{answers.about}</span>
<Layout {nextQuestion} {control} on:submit={() => (control = myAnswer !== '' ? myAnswer === params.correct : null)}>
<span slot="title">{title}</span>
<span slot="about">{params.about}</span>
<div slot="answers">
<span class="self-baseline">
<Input type="number" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />

49
src/lib/Components/Forms/Renderer.svelte
View File

@ -5,23 +5,8 @@
import MultiplyForm from './MultiChoiceForm.svelte'
import IntervalForm from './IntervalForm.svelte'
import QrCode from './QrCode.svelte'
let control = null // if true => spravne if false spatne
$: 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
}
import { navigate } from 'svelte-routing'
import Finish from './Finish.svelte'
const components = {
text: TextForm,
@ -30,7 +15,35 @@
multichoice: MultiplyForm,
interval: IntervalForm,
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>
<svelte:component this={components[answers.type]} bind:control />
<svelte:component this={page} params={questions[clientAnswers.pos]} {nextQuestion} bind:control />

19
src/lib/Components/Forms/SingleChoiceForm.svelte
View File

@ -1,25 +1,22 @@
<script>
import Radio from '../Quiz/answers/Radio.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'
const title = 'jdfsafsd'
let answers = {
labels: ['label 1', 'label 2', 'label 3', 'label 4'],
right: 'label 1',
}
export let params //{ type: 'singlechoice', correct: 'banan', quesion: 'text otazky', description: '', options: ['banan', 'cokolada', 'mleko'] },
let myAnswer
export let control = null
export let nextQuestion
</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="about">{about}</span>
<span slot="about">{params.quesion}</span>
<div slot="answers">
{#each answers.labels as label}
{#each params.options as option}
<span class="self-baseline">
<Radio value={label} bind:group={myAnswer}>{label}</Radio>
<Radio value={option} bind:group={myAnswer}>{option}</Radio>
</span>
{/each}
</div>

10
src/lib/Components/Forms/TextForm.svelte
View File

@ -1,20 +1,22 @@
<script>
import Layout from '../Quiz/Layout.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
export let control = null
export let nextQuestion
const compare = (a, b) => {
if (a.localeCompare(b, 'cz', { sensitivity: 'variant' }) === 0) return true
else return false
}
</script>
<Layout on:submit={() => (control = myAnswer !== '' ? compare(myAnswer, answers.right) : null)}>
<span slot="title">{answers.title}</span>
<span slot="about">{answers.about}</span>
<Layout {control} {nextQuestion} on:submit={() => (control = myAnswer !== '' ? compare(myAnswer, params.correct) : null)}>
<span slot="title">{title}</span>
<span slot="about">{params.quesion}</span>
<div slot="answers">
<span class="self-baseline">
<Input type="text" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />

18
src/lib/Components/Quiz/Layout.svelte
View File

@ -4,6 +4,9 @@
import Section from '../Section.svelte'
import Map from '../game/Map.svelte'
import Button from '../Button.svelte'
export let control, nextQuestion
$: console.log(control)
</script>
<Layout>
@ -14,7 +17,7 @@
<span style="width: 85%"><Map /></span>
</div>
</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="popis">
<span> Popis úkolu: </span>
@ -22,9 +25,20 @@
</div>
<div class="flex items-center justify-center flex-col w-full gap-6">
<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 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>
</div>
</Layout>

29
src/lib/Components/Quiz/answers/CheckBox.svelte
View File

@ -1,8 +1,8 @@
<script>
import { idGenerator } from '../../../jsLibrari/IdGenerator'
import { idGenerator } from '$lib/jsLibrari/IdGenerator'
const id = idGenerator()
export let checked = false
export let checked = true
</script>
<div class="cover h-14">
@ -17,7 +17,7 @@
<label for={id}><slot /></label>
</div>
<style lang="scss">
<style>
.cover {
height: 100%;
width: fit-content;
@ -26,17 +26,14 @@
grid-template-columns: 56px auto;
gap: 20px;
padding: 4px;
label {
font-size: 100%;
width: 100%;
height: 100%;
display: flex;
align-items: center;
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);*/
label {
font-size: 100%;
width: 100%;
height: 100%;
display: flex;
align-items: center;
font-size: 140%;
}
</style>