preparation

package-lock.json

@@ -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",
+			"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,
 			"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",
+			"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,
 			"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": {

package.json

@@ -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"

src/lib/Components/Forms/IntervalForm.svelte

@@ -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 = {
+	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
-
 	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)}>
+<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">
 		<span class="self-baseline">
 			<Input type="number" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />

src/lib/Components/Forms/MultiChoiceForm.svelte

@@ -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'
+	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 nextQuestion
 
 	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
 				return ''
 			}
-		})
+		}
+		if (control === null) control = true
 	}
 </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">
-		{#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>

src/lib/Components/Forms/NumberForm.svelte

@@ -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)}>
+<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">
 		<span class="self-baseline">
 			<Input type="number" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />

src/lib/Components/Forms/Renderer.svelte

@@ -5,23 +5,8 @@
 	import MultiplyForm from './MultiChoiceForm.svelte'
 	import IntervalForm from './IntervalForm.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 = {
 		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 />

src/lib/Components/Forms/SingleChoiceForm.svelte

@@ -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'
+	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
+
 	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>

src/lib/Components/Forms/TextForm.svelte

@@ -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)}>
+<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">
 		<span class="self-baseline">
 			<Input type="text" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />

src/lib/Components/Quiz/Layout.svelte

@@ -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>

src/lib/Components/Quiz/answers/CheckBox.svelte

@@ -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;
+	label {
-			border-radius: var(--border-radius);*/
+		font-size: 100%;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		font-size: 140%;
+	}
 </style>