|
|
@@ -1,126 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
|
- <title>Kvíz: Který učitel na GJS jsi ty?</title>
|
|
|
- <script src="https://cdn.tailwindcss.com"></script>
|
|
|
- <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
|
- <style>
|
|
|
- body { background-color: #f0f4f8; }
|
|
|
- .gjs-blue { background-color: #0055a4; }
|
|
|
- .card { border-radius: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
|
|
|
- </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>
|
|
|
-
|
|
|
-<body x-data="quizApp()">
|
|
|
-<template x-if="!zacalqiz">
|
|
|
-<div>
|
|
|
- <div >
|
|
|
- <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>
|
|
|
- <a href="{{ url_for('index') }}">Začít kvíz</a>
|
|
|
- </div>
|
|
|
-</div>
|
|
|
-</template>
|
|
|
-<template x-if="zacalqiz">
|
|
|
-<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">
|
|
|
-
|
|
|
- <h1 class="text-2xl font-bold text-center text-gray-800 mb-8">
|
|
|
- Který učitel na GJS jsi ty?
|
|
|
- </h1>
|
|
|
-
|
|
|
- <div class="mb-8">
|
|
|
- <p class="text-lg font-semibold text-gray-700 mb-4 text-center" x-text="otazky[CurrentOtazka]['question']"></p>
|
|
|
-
|
|
|
- <div class="space-y-3">
|
|
|
- <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 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" x-on:click="CurrentOtazka = Math.max(CurrentOtazka - 1, 0)" x-bind:disabled="CurrentOtazka === 0">
|
|
|
- Předchozí
|
|
|
- </button>
|
|
|
- <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ší
|
|
|
- </button>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
-</div>
|
|
|
-</template>
|
|
|
- <button @click="startQuiz()">Začít kvíz</button>
|
|
|
-</body>
|
|
|
-
|
|
|
-</html>
|
|
|
-
|
|
|
-
|
