znovu pushovani, hotovy forms
This commit is contained in:
parent
79fc7c87e5
commit
64fa6635d6
|
@ -3,6 +3,7 @@
|
|||
import './main.scss'
|
||||
|
||||
import Game from './routes/game.svelte'
|
||||
import Finish from './lib/Components/Forms/Finish.svelte'
|
||||
import Renderer from './lib/Components/Forms/Renderer.svelte'
|
||||
//import Try from './routes/try.svelte'
|
||||
let gameData
|
||||
|
@ -10,11 +11,11 @@
|
|||
|
||||
<main>
|
||||
<Router>
|
||||
<Route path="/">
|
||||
<Renderer />
|
||||
<Route path="/play">
|
||||
<Renderer {gameData} />
|
||||
</Route>
|
||||
<Route path="/game/:gameurl" let:params>
|
||||
<Game gameurl={params.gameurl} />
|
||||
<Game gameurl={params.gameurl} bind:gameData />
|
||||
</Route>
|
||||
</Router>
|
||||
</main>
|
||||
|
|
|
@ -0,0 +1,14 @@
|
|||
<script>
|
||||
import Overlay from '$lib/Components/Overlay.svelte'
|
||||
export let img
|
||||
</script>
|
||||
|
||||
<Overlay {img}>
|
||||
<div class="h-full w-full flex justify-self-center justify-center relative top-20"><slot /></div>
|
||||
</Overlay>
|
||||
|
||||
<style>
|
||||
div {
|
||||
font-size: var(--fontSize);
|
||||
}
|
||||
</style>
|
|
@ -4,7 +4,7 @@
|
|||
let title = 'title' //exportovat ze zhora
|
||||
|
||||
export let params // { type: 'interval', correct: [0, 3], quesion: 'text otazky', description: '', options: null },
|
||||
let myAnswer
|
||||
let myAnswer = ''
|
||||
export let control = null
|
||||
export let nextQuestion
|
||||
|
||||
|
@ -13,7 +13,15 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Layout {control} {nextQuestion} on:submit={() => (control = myAnswer !== '' ? between(myAnswer, params.correct[0], params.correct[1]) : null)}>
|
||||
<Layout
|
||||
imgSrc={gameData.question.thumbnail}
|
||||
{control}
|
||||
nextQuestion={() => {
|
||||
nextQuestion()
|
||||
myAnswer = ''
|
||||
}}
|
||||
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">
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
<script>
|
||||
import Layout from '../Quiz/Layout.svelte'
|
||||
import CheckBox from '../Quiz/answers/Checkbox.svelte'
|
||||
let title = 'title' //exportovat ze zhora
|
||||
import parseQuestion from '$lib/utils/parseQuestion'
|
||||
|
||||
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 gameData
|
||||
let answers = parseQuestion(gameData.question.answer, gameData.question.type)
|
||||
let myAnswers = new Array(answers.length).fill(false)
|
||||
|
||||
export let control = null
|
||||
export let nextQuestion
|
||||
|
@ -13,12 +13,10 @@
|
|||
const controlMultiForm = () => {
|
||||
for (let i = 0; i < myAnswers.length; i++) {
|
||||
const answer = myAnswers[i]
|
||||
const option = params.options[i]
|
||||
const correct = params.correct
|
||||
const option = answers[i].label
|
||||
const rightValue = answers[i].value
|
||||
|
||||
if (answer && correct.indexOf(option) >= 0) control = null
|
||||
else if (!answer && !(correct.indexOf(option) >= 0)) control = null
|
||||
else {
|
||||
if (rightValue !== answer) {
|
||||
control = false
|
||||
return ''
|
||||
}
|
||||
|
@ -27,20 +25,22 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Layout {nextQuestion} {control} on:submit={controlMultiForm}>
|
||||
<span slot="title">{title}</span>
|
||||
<span slot="about">{params.quesion}</span>
|
||||
<Layout
|
||||
imgSrc={gameData.question.thumbnail}
|
||||
nextQuestion={() => {
|
||||
nextQuestion()
|
||||
myAnswers = new Array(answers.length).fill(false)
|
||||
}}
|
||||
{control}
|
||||
on:submit={controlMultiForm}
|
||||
>
|
||||
<span slot="title">{gameData.name}</span>
|
||||
<span slot="about">{@html gameData.question.question}</span>
|
||||
<div slot="answers">
|
||||
{#each params.options as option, i}
|
||||
{#each answers as { label }, i}
|
||||
<span class="self-baseline">
|
||||
<CheckBox bind:checked={myAnswers[i]}>{option}</CheckBox>
|
||||
<CheckBox bind:checked={myAnswers[i]}>{label}</CheckBox>
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<!--<Input bind:value={myAnswer} style="width: 100%; min-width: 400px; max-width: 500px; height: 50px" />
|
||||
<Input type="number" bind:value={myAnswer} style="width: 100%; min-width: 400px; max-width: 500px; height: 50px" />
|
||||
-->
|
||||
<style lang="scss">
|
||||
</style>
|
||||
|
|
|
@ -1,18 +1,27 @@
|
|||
<script>
|
||||
import Layout from '../Quiz/Layout.svelte'
|
||||
import Input from '../Quiz/answers/Input.svelte'
|
||||
let title = 'title' //exportovat ze zhora
|
||||
import parseQuestion from '$lib/utils/parseQuestion'
|
||||
|
||||
export let params //{ type: 'text', correct: 'jablko', quesion: 'text otazky', description: '', options: null },
|
||||
let myAnswer
|
||||
export let gameData
|
||||
let answers = parseQuestion(gameData.question.answer, gameData.question.type)
|
||||
let myAnswer = ''
|
||||
|
||||
export let nextQuestion
|
||||
export let control = null
|
||||
</script>
|
||||
|
||||
<Layout {nextQuestion} {control} on:submit={() => (control = myAnswer !== '' ? myAnswer === params.correct : null)}>
|
||||
<span slot="title">{title}</span>
|
||||
<span slot="about">{params.about}</span>
|
||||
<Layout
|
||||
imgSrc={gameData.question.thumbnail}
|
||||
nextQuestion={() => {
|
||||
nextQuestion()
|
||||
myAnswer = ''
|
||||
}}
|
||||
{control}
|
||||
on:submit={() => (control = myAnswer !== '' ? myAnswer === answers.answer : null)}
|
||||
>
|
||||
<span slot="title">{gameData.name}</span>
|
||||
<span slot="about">{@html gameData.question.question}</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" />
|
||||
|
@ -20,9 +29,6 @@
|
|||
</div>
|
||||
</Layout>
|
||||
|
||||
<!--<Input bind:value={myAnswer} style="width: 100%; min-width: 400px; max-width: 500px; height: 50px" />
|
||||
<Input type="number" bind:value={myAnswer} style="width: 100%; min-width: 400px; max-width: 500px; height: 50px" />
|
||||
-->
|
||||
<style lang="scss">
|
||||
/*.input::-webkit-inner-spin-button {
|
||||
background: blue;
|
||||
|
|
|
@ -5,46 +5,69 @@
|
|||
import MultiplyForm from './MultiChoiceForm.svelte'
|
||||
import IntervalForm from './IntervalForm.svelte'
|
||||
import QrCode from './QrCode.svelte'
|
||||
import { navigate } from 'svelte-routing'
|
||||
import Finish from './Finish.svelte'
|
||||
import parseQuestion from '$lib/utils/parseQuestion'
|
||||
|
||||
const components = {
|
||||
text: TextForm,
|
||||
number: NumberForm,
|
||||
singlechoice: SingleForm,
|
||||
multichoice: MultiplyForm,
|
||||
TEXT: TextForm,
|
||||
NUMBER: NumberForm,
|
||||
SINGLECHOICE: SingleForm,
|
||||
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)
|
||||
$: console.log(`kontrola: ${control}`)
|
||||
|
||||
$: if (control === true) clientAnswers.points += 2 //body bodování
|
||||
|
||||
const nextQuestion = () => {
|
||||
if (clientAnswers.pos + 1 === clientAnswers.end) {
|
||||
page = components.finish
|
||||
return ''
|
||||
}
|
||||
//další otázka
|
||||
if (control !== null) {
|
||||
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'] },
|
||||
]*/
|
||||
export let gameData
|
||||
let page
|
||||
$: page = components[questions[clientAnswers.pos].type]
|
||||
export let gameData = {} //data
|
||||
|
||||
$: answers = parseQuestion(gameData.questions[clientAnswers.pos].answer, gameData.questions[clientAnswers.pos].type) //delete
|
||||
|
||||
let clientAnswers = {
|
||||
pos: 0,
|
||||
end: questions.length,
|
||||
end: gameData.questions.length, //kolik otázek
|
||||
points: 0, //body
|
||||
}
|
||||
let page
|
||||
$: page = components[gameData.questions[clientAnswers.pos].type]
|
||||
|
||||
/*jen pro tedkon, pozdeji vymazat az bude singlechoise a multichoise oddelene*/
|
||||
$: page = gameData.questions[clientAnswers.pos].type === 'CHOICE' ? components[vals()] : page
|
||||
|
||||
const vals = () => {
|
||||
console.log(answers)
|
||||
let con = false
|
||||
let result
|
||||
answers.forEach((q) => {
|
||||
if (q.value && con) {
|
||||
result = 'MULTICHOICE'
|
||||
return ''
|
||||
}
|
||||
if (q.value && !con) con = true
|
||||
})
|
||||
if (result === undefined) result = 'SINGLECHOICE'
|
||||
return result
|
||||
}
|
||||
/*--------------- -----------------------------------------------------------*/
|
||||
</script>
|
||||
|
||||
<svelte:component this={page} params={questions[clientAnswers.pos]} {nextQuestion} bind:control />
|
||||
{#if page}
|
||||
{#if clientAnswers.pos + 1 !== clientAnswers.end}
|
||||
<svelte:component this={page} gameData={{ question: gameData.questions[clientAnswers.pos], name: gameData.name }} {nextQuestion} bind:control />
|
||||
{:else}
|
||||
<Finish img={gameData.thumbnail}>
|
||||
<span> Získali jste {clientAnswers.points} / {clientAnswers.end * 2} bodů</span>
|
||||
</Finish>
|
||||
{/if}
|
||||
{/if}
|
||||
|
|
|
@ -1,22 +1,36 @@
|
|||
<script>
|
||||
import Radio from '../Quiz/answers/Radio.svelte'
|
||||
import Layout from '../Quiz/Layout.svelte'
|
||||
let title = 'title' //exportovat ze zhora
|
||||
import parseQuestion from '$lib/utils/parseQuestion'
|
||||
|
||||
export let params //{ type: 'singlechoice', correct: 'banan', quesion: 'text otazky', description: '', options: ['banan', 'cokolada', 'mleko'] },
|
||||
let myAnswer
|
||||
export let gameData
|
||||
let answers = parseQuestion(gameData.question.answer, gameData.question.type)
|
||||
let myAnswer = ''
|
||||
|
||||
export let control = null
|
||||
export let nextQuestion
|
||||
|
||||
const rightAnswer = () =>
|
||||
answers.map((item) => {
|
||||
if (item.value) return item.label
|
||||
})
|
||||
</script>
|
||||
|
||||
<Layout {control} {nextQuestion} on:submit={() => (control = typeof myAnswer === 'string' ? myAnswer === params.correct : null)}>
|
||||
<span slot="title">{title}</span>
|
||||
<span slot="about">{params.quesion}</span>
|
||||
<Layout
|
||||
imgSrc={gameData.question.thumbnail}
|
||||
{control}
|
||||
nextQuestion={() => {
|
||||
nextQuestion()
|
||||
myAnswer = ''
|
||||
}}
|
||||
on:submit={() => (control = typeof myAnswer === 'string' && myAnswer !== '' ? myAnswer === rightAnswer() : null)}
|
||||
>
|
||||
<span slot="title">{gameData.name}</span>
|
||||
<span slot="about">{@html gameData.question.question}</span>
|
||||
<div slot="answers">
|
||||
{#each params.options as option}
|
||||
{#each answers as { label }}
|
||||
<span class="self-baseline">
|
||||
<Radio value={option} bind:group={myAnswer}>{option}</Radio>
|
||||
<Radio value={label} bind:group={myAnswer}>{label}</Radio>
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
<script>
|
||||
import Layout from '../Quiz/Layout.svelte'
|
||||
import Input from '../Quiz/answers/Input.svelte'
|
||||
let title = 'title' //exportovat ze zhora
|
||||
import parseQuestion from '$lib/utils/parseQuestion'
|
||||
|
||||
export let params //{ type: 'text', correct: 'jablko', quesion: 'text otazky', description: '', options: null },
|
||||
let myAnswer
|
||||
export let gameData
|
||||
let answers = parseQuestion(gameData.question.answer, gameData.question.type)
|
||||
let myAnswer = ''
|
||||
|
||||
export let control = null
|
||||
export let nextQuestion
|
||||
|
@ -14,9 +15,17 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Layout {control} {nextQuestion} on:submit={() => (control = myAnswer !== '' ? compare(myAnswer, params.correct) : null)}>
|
||||
<span slot="title">{title}</span>
|
||||
<span slot="about">{params.quesion}</span>
|
||||
<Layout
|
||||
imgSrc={gameData.question.thumbnail}
|
||||
{control}
|
||||
nextQuestion={() => {
|
||||
nextQuestion()
|
||||
myAnswer = ''
|
||||
}}
|
||||
on:submit={() => (control = myAnswer !== '' ? compare(myAnswer, answers.answer) : null)}
|
||||
>
|
||||
<span slot="title">{gameData.name}</span>
|
||||
<span slot="about">{@html gameData.question.question}</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" />
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
<script>
|
||||
export let src
|
||||
let className
|
||||
export { className as class }
|
||||
</script>
|
||||
|
||||
<section style="--bg: url({src});" />
|
||||
<section class={className} style="--bg: url({src});" />
|
||||
|
||||
<style lang="scss">
|
||||
section {
|
||||
|
@ -11,7 +13,5 @@
|
|||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 94px;
|
||||
width: 94px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
{#each images as image, i}
|
||||
{#if Math.floor(windowsize / (94 + 10)) >= i + 1}
|
||||
<div>
|
||||
<Image src={image} />
|
||||
<Image src={image} class="w-24 h-24" />
|
||||
{#if Math.floor(windowsize / (94 + 10)) === i + 1 && images.length !== i + 1}
|
||||
<span on:click={nextImages} class="imageCounter">{`+${images.length - Math.floor(windowsize / (94 + 10))}`}</span>
|
||||
{/if}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
export let img
|
||||
export let img = null
|
||||
export let shareData = null
|
||||
export let alt = 'background image'
|
||||
import Tab from './game/Tab.svelte'
|
||||
|
@ -8,7 +8,9 @@
|
|||
|
||||
<Layout>
|
||||
<section class="wraper">
|
||||
{#if img}
|
||||
<img src={img} {alt} />
|
||||
{/if}
|
||||
{#if shareData !== null && shareData !== false}
|
||||
<Tab {shareData} />
|
||||
{/if}
|
||||
|
|
|
@ -4,9 +4,10 @@
|
|||
import Section from '../Section.svelte'
|
||||
import Map from '../game/Map.svelte'
|
||||
import Button from '../Button.svelte'
|
||||
import Image from '../Image.svelte'
|
||||
|
||||
export let control, nextQuestion
|
||||
$: console.log(control)
|
||||
export let imgSrc
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
|
@ -14,7 +15,7 @@
|
|||
<Heading>
|
||||
<div class="flex justify-center items-center flex-col flex-wrap gap-3">
|
||||
<span class="title"><slot name="title" /></span>
|
||||
<span style="width: 85%"><Map /></span>
|
||||
<span style="width: 100%"><Image class="w-full h-[200px]" src={imgSrc} /></span>
|
||||
</div>
|
||||
</Heading>
|
||||
<Section style="height: calc(100% - var(--quizHeader)); position: relative">
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
export default (question, questionType) => {
|
||||
switch (questionType.toLowerCase()) {
|
||||
case 'text':
|
||||
|
@ -6,9 +5,9 @@ export default (question, questionType) => {
|
|||
case 'number':
|
||||
return Number.parseFloat(question)
|
||||
case 'choice':
|
||||
return question.split(/;\s*/).map(item => ({
|
||||
return question.split(/;\s*/).map((item) => ({
|
||||
label: item.startsWith('*') ? item.substring(1) : item,
|
||||
value: item.startsWith('*') ? true : false
|
||||
value: item.startsWith('*') ? true : false,
|
||||
}))
|
||||
default:
|
||||
return null
|
||||
|
|
|
@ -8,29 +8,24 @@
|
|||
import IconPoint from '../lib/Components/Icons/Point.svelte'
|
||||
import Map from '../lib/Components/game/Map.svelte'
|
||||
import ImageSlider from '../lib/Components/ImageSlider.svelte'
|
||||
|
||||
import * as api from '$lib/utils/api'
|
||||
import parseQuestion from '$lib/utils/parseQuestion'
|
||||
import yallist from 'yallist'
|
||||
|
||||
export let gameurl
|
||||
|
||||
let background = '/assets/temp/kar1.png'
|
||||
let assets = Array.from(Array(6).keys()).map((_, i) => `/assets/temp/kar${i + 1}.png`)
|
||||
|
||||
export let gameData = null
|
||||
;(async () => {
|
||||
const gameData = await api.post(`${api.hostName}/game/details`, {
|
||||
gameurl: gameurl,
|
||||
gameData = await api.post(`${api.hostName}/game/details`, {
|
||||
gameurl,
|
||||
})
|
||||
|
||||
const questions = yallist(gameData.questions)
|
||||
console.log(gameData)
|
||||
|
||||
console.log(parseQuestion(gameData.questions[0].answer, gameData.questions[0].type))
|
||||
//console.log(gameData)
|
||||
})()
|
||||
</script>
|
||||
|
||||
<Overlay {shareData} img={gameData.thumbnail}>
|
||||
<Overlay shareData={{}} img={gameData?.thumbnail}>
|
||||
{#if gameData}
|
||||
<Heading>
|
||||
<span>{gameData.name}</span>
|
||||
<div class="bubbles" slot="bubbles">
|
||||
|
@ -55,7 +50,8 @@
|
|||
</Section>
|
||||
<Map />
|
||||
|
||||
<Button href="/game" primary>Hrát</Button>
|
||||
<Button href="/play" primary>Hrát</Button>
|
||||
{/if}
|
||||
</Overlay>
|
||||
|
||||
<!---->
|
||||
|
|
Loading…
Reference in New Issue