septima
/
silly_qiz


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
							<!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>