|
@@ -1,5 +1,5 @@
|
|
|
<!DOCTYPE html>
|
|
<!DOCTYPE html>
|
|
|
-<html lang="en" x-data="{zacalqiz: false}">
|
|
|
|
|
|
|
+<html lang="en">
|
|
|
<head>
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
@@ -12,20 +12,74 @@
|
|
|
.gjs-blue { background-color: #0055a4; }
|
|
.gjs-blue { background-color: #0055a4; }
|
|
|
.card { border-radius: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
|
|
.card { border-radius: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
|
|
|
</style>
|
|
</style>
|
|
|
|
|
+<script>
|
|
|
|
|
+function quizApp() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ zacalqiz: false,
|
|
|
|
|
+ otazky: [],
|
|
|
|
|
+
|
|
|
|
|
+ async startQuiz() {
|
|
|
|
|
+ this.zacalqiz = ! this.zacalqiz
|
|
|
|
|
+ if (this.zacalqiz && !this.otazky.length) {
|
|
|
|
|
+ const res = await fetch('/api/questions?count=5');
|
|
|
|
|
+ this.otazky = await res.json();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
</head>
|
|
</head>
|
|
|
-<body>
|
|
|
|
|
|
|
|
|
|
|
|
+<body x-data="quizApp()">
|
|
|
<template x-if="!zacalqiz">
|
|
<template x-if="!zacalqiz">
|
|
|
<div>
|
|
<div>
|
|
|
<div >
|
|
<div >
|
|
|
<h1>silly_qiz</h1>
|
|
<h1>silly_qiz</h1>
|
|
|
<h3 class="rainbow">toto bude mega giga silly qiz, aby jste mohli zjistit který z učítelů gimjs jste :3</h3>
|
|
<h3 class="rainbow">toto bude mega giga silly qiz, aby jste mohli zjistit který z učítelů gimjs jste :3</h3>
|
|
|
- <a href="{{ url_for('questions.index') }}">Začít kvíz</a>
|
|
|
|
|
|
|
+ <a href="{{ url_for('index') }}">Začít kvíz</a>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<template x-if="zacalqiz">
|
|
<template x-if="zacalqiz">
|
|
|
-<div class="flex flex-col items-center justify-center min-h-screen p-4">
|
|
|
|
|
|
|
+<div class="flex flex-col items-center justify-center min-h-screen p-4" x-data="{
|
|
|
|
|
+ skoncilqiz: false,
|
|
|
|
|
+ CurrentOtazka: 0,
|
|
|
|
|
+ SvobodaBody: 0,
|
|
|
|
|
+ SvobodovaBody: 0,
|
|
|
|
|
+ ReditelkBody: 0,
|
|
|
|
|
+ PasterikovaBody: 0,
|
|
|
|
|
+ HelgertBody: 0,
|
|
|
|
|
+ DominecBody: 0,
|
|
|
|
|
+ DudilieuxBody: 0,
|
|
|
|
|
+ HlavacekBody: 0,
|
|
|
|
|
+ HolasovaBody: 0,
|
|
|
|
|
+ BesinBody: 0,
|
|
|
|
|
+ JilekBody: 0,
|
|
|
|
|
+ JungovaBody: 0,
|
|
|
|
|
+ HorovaBody: 0,
|
|
|
|
|
+ KarnoltovaBody: 0,
|
|
|
|
|
+ ValdaBody: 0,
|
|
|
|
|
+ KozubekBody: 0,
|
|
|
|
|
+ HrabecBody: 0,
|
|
|
|
|
+ KubiskovaBody: 0,
|
|
|
|
|
+ MarekBody: 0,
|
|
|
|
|
+ LímanováBody: 0,
|
|
|
|
|
+ NajemnikBody: 0,
|
|
|
|
|
+ OrrBody: 0,
|
|
|
|
|
+ AparicioBody: 0,
|
|
|
|
|
+ HornicekBody: 0,
|
|
|
|
|
+ SibaBody: 0,
|
|
|
|
|
+ ToulecBody: 0,
|
|
|
|
|
+ UlrichovaBody: 0,
|
|
|
|
|
+ ZabranskaBody: 0,
|
|
|
|
|
+ ZalskaBody: 0,
|
|
|
|
|
+ SmidBody: 0,
|
|
|
|
|
+ LafreniereBody: 0,
|
|
|
|
|
+ StejskalBody: 0,
|
|
|
|
|
+ EkrtovaBody: 0,
|
|
|
|
|
+ BurdenovaBody: 0,
|
|
|
|
|
+ VavraBody: 0
|
|
|
|
|
+}">
|
|
|
|
|
|
|
|
<div class="card bg-white w-full max-w-lg p-6 border-t-8 border-blue-700">
|
|
<div class="card bg-white w-full max-w-lg p-6 border-t-8 border-blue-700">
|
|
|
|
|
|
|
@@ -34,40 +88,39 @@
|
|
|
</h1>
|
|
</h1>
|
|
|
|
|
|
|
|
<div class="mb-8">
|
|
<div class="mb-8">
|
|
|
- <p class="text-lg font-semibold text-gray-700 mb-4 text-center">
|
|
|
|
|
- Lorem ipsum dolor sit amet, consectetur?
|
|
|
|
|
- </p>
|
|
|
|
|
|
|
+ <p class="text-lg font-semibold text-gray-700 mb-4 text-center" x-text="otazky[CurrentOtazka]['question']"></p>
|
|
|
|
|
|
|
|
<div class="space-y-3">
|
|
<div class="space-y-3">
|
|
|
- <label class="block p-3 border rounded-lg cursor-pointer hover:bg-blue-50 transition">
|
|
|
|
|
- <input type="radio" name="q1" class="mr-2"> Lorem ipsum dolor
|
|
|
|
|
- </label>
|
|
|
|
|
- <label class="block p-3 border rounded-lg cursor-pointer hover:bg-blue-50 transition">
|
|
|
|
|
- <input type="radio" name="q1" class="mr-2"> Sit amet consectetur
|
|
|
|
|
- </label>
|
|
|
|
|
- <label class="block p-3 border rounded-lg cursor-pointer hover:bg-blue-50 transition">
|
|
|
|
|
- <input type="radio" name="q1" class="mr-2"> Adipiscing elit
|
|
|
|
|
- </label>
|
|
|
|
|
- <label class="block p-3 border rounded-lg cursor-pointer hover:bg-blue-50 transition">
|
|
|
|
|
- <input type="radio" name="q1" class="mr-2"> Sed do eiusmod
|
|
|
|
|
- </label>
|
|
|
|
|
|
|
+ <template x-for="(option, index) in otazky[CurrentOtazka]['options']" :key="index">
|
|
|
|
|
+ <label class="block p-3 border rounded-lg cursor-pointer hover:bg-blue-50 transition">
|
|
|
|
|
+ <input
|
|
|
|
|
+ type="radio"
|
|
|
|
|
+ name="q1"
|
|
|
|
|
+ class="mr-2"
|
|
|
|
|
+ :value="option"
|
|
|
|
|
+ >
|
|
|
|
|
+ <span x-text="option"></span>
|
|
|
|
|
+ </label>
|
|
|
|
|
+ </template>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="flex justify-between mt-10">
|
|
<div class="flex justify-between mt-10">
|
|
|
- <button class="px-6 py-2 bg-gray-200 text-gray-700 rounded font-bold hover:bg-gray-300 transition">
|
|
|
|
|
|
|
+ <button class="px-6 py-2 bg-gray-200 text-gray-700 rounded font-bold hover:bg-gray-300 transition" x-on:click="CurrentOtazka = Math.max(CurrentOtazka - 1, 0)" x-bind:disabled="CurrentOtazka === 0">
|
|
|
Předchozí
|
|
Předchozí
|
|
|
</button>
|
|
</button>
|
|
|
- <button class="px-6 py-2 gjs-blue text-white rounded font-bold hover:opacity-90 transition">
|
|
|
|
|
|
|
+ <button class="px-6 py-2 gjs-blue text-white rounded font-bold hover:opacity-90 transition" x-on:click="CurrentOtazka = Math.min(CurrentOtazka + 1, otazky.length - 1)" x-bind:disabled="CurrentOtazka >= otazky.length - 1">
|
|
|
Další
|
|
Další
|
|
|
</button>
|
|
</button>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
- <button @click="zacalqiz = ! zacalqiz">Toggle Content</button>
|
|
|
|
|
-
|
|
|
|
|
|
|
+ <button @click="startQuiz()">Začít kvíz</button>
|
|
|
</body>
|
|
</body>
|
|
|
|
|
|
|
|
-</html>
|
|
|
|
|
|
|
+</html>
|
|
|
|
|
+
|
|
|
|
|
+
|