|
|
@@ -0,0 +1,97 @@
|
|
|
+<!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: [],
|
|
|
+ // answers: { [otazka.id]: index vybrané možnosti }
|
|
|
+ // Slovník místo samostatných XxxBody proměnných – getSummary() pak
|
|
|
+ // nepotřebuje hardcoded seznam učitelů a funguje pro libovolná data.
|
|
|
+ answers: {},
|
|
|
+
|
|
|
+ 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();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ getSummary() {
|
|
|
+ const scores = {};
|
|
|
+ for (const otazka of this.otazky) {
|
|
|
+ const i = this.answers[otazka.id];
|
|
|
+ if (i !== undefined)
|
|
|
+ scores[otazka.results[i]] = (scores[otazka.results[i]] ?? 0) + 1;
|
|
|
+ }
|
|
|
+ const top = Object.entries(scores).sort((a, b) => b[1] - a[1])[0];
|
|
|
+ return top
|
|
|
+ ? { teacher: top[0], similarityPercent: Math.round(top[1] / Object.keys(this.answers).length * 100), scores }
|
|
|
+ : { teacher: null, similarityPercent: 0, scores };
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+document.addEventListener('alpine:init', () => {
|
|
|
+ window.getSummary = () => Alpine.$data(document.querySelector('[x-data]')).getSummary();
|
|
|
+});
|
|
|
+</script>
|
|
|
+</head>
|
|
|
+<body x-data="quizApp()">
|
|
|
+
|
|
|
+<template x-if="!zacalqiz">
|
|
|
+<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>
|
|
|
+</template>
|
|
|
+
|
|
|
+<template x-if="zacalqiz">
|
|
|
+<div class="flex flex-col items-center justify-center min-h-screen p-4" x-data="{ CurrentOtazka: 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="'q' + otazky[CurrentOtazka].id"
|
|
|
+ :value="index"
|
|
|
+ :checked="answers[otazky[CurrentOtazka].id] === index"
|
|
|
+ @change="answers[otazky[CurrentOtazka].id] = index"
|
|
|
+ class="mr-2">
|
|
|
+ <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"
|
|
|
+ @click="CurrentOtazka = Math.max(CurrentOtazka - 1, 0)"
|
|
|
+ :disabled="CurrentOtazka === 0">Předchozí</button>
|
|
|
+ <button class="px-6 py-2 gjs-blue text-white rounded font-bold hover:opacity-90 transition"
|
|
|
+ @click="CurrentOtazka = Math.min(CurrentOtazka + 1, otazky.length - 1)"
|
|
|
+ :disabled="CurrentOtazka >= otazky.length - 1">Další</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<button @click="startQuiz()">Začít kvíz</button>
|
|
|
+</body>
|
|
|
+</html>
|
