septima
/
silly_qiz


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
							<!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="{
  zacalqiz: false,
  skoncilqiz: false,
  CurrentOtazka: 0,
  ZvoleneOtazky: [
    {
      id: 1,
      question: 'Jak nejraději strávíš svůj volný čas?',
      options: [
        'Studium biologie',
        'Diskuse o dějinách a filmech',
        'Řešení matematických rovnic',
        'Hokejový trénink'
      ],
      results: [
        'Svobodová',
        'Nájemník',
        'Stejskal',
        'Ambroz'
      ]
    },
    {
      id: 2,
      question: 'jakého eventu se zúčastníš?',
      options: [
        'čtenářská čajovna',
        'fotbalový zápas',
        'chemická exkurze',
        'turnaj v poítačových hrách'
      ],
      results: [
        'Jílek',
        'Orr',
        'Ekrtová',
        'Helgert'
      ]
    },
    {
      id: 3,
      question: 'Co uděláš když student nepochopí látku?',
      options: [
        'trpělivě mu to několikrát vysvětlíš na příkladech',
        'nechápeš co na tom nechápe',
        'odběhneš od tématu a pak nestíháš',
        'začneš diskuzi'
      ],
      results: [
        'Ekrtová',
        'Stejskal',
        'Nájemník',
        'Jílek'
      ]
    },
    {
      id: 4,
      question: 'Co uděláš když studenti hlučí?',
      options: [
        'začneš šeptat',
        'napomeneš je, s dotazem jestli je to nezajímá',
        'je ti to jedno',
        'poprosíš o klid'
      ],
      results: [
        'Ambroz',
        'Nájemník',
        'Stejskal',
        'Ekrtová'
      ]
    },
    {
      id: 5,
      question: 'jak často po tobě někdo něco potřebuje?',
      options: [
        'Každou chvíli pomáháš s technikou',
        'víš všechno a o všech, pořád se někdo ptá',
        'Občas odpískáš fotbal, nebo organizuješ jazykové certifikáty',
        'každou volnou chvíli někoho doučuješ'
      ],
      results: [
        'Helgert',
        'Svobodová',
        'Orr',
        'Ekrtová'
      ]
    },
    {
      id: 6,
      question: 'Jak často jsi ve škole?',
      options: [
        'nikdy',
        'každý den',
        'téměř každý den',
        'několikrát týdně'
      ],
      results: [
        'Ambroz',
        'Svobodová',
        'Ekrtová',
        'Stejskal'
      ]
    },
    {
      id: 7,
      question: 'Máš vlasy?',
      options: [
        'Ne',
        'Ano a hodně',
        'Normální množství',
        'nechávám si je narůst a pak na ježka'
      ],
      results: [
        'Ambroz',
        'Svobodová',
        'Ekrtová',
        'Jílek'
      ]
    },
    {
      id: 8,
      question: 'Jaký kroužek zorganizuješ?',
      options: [
        'Basketbal',
        'studium mikoživočichů',
        'nezorganizuješ',
        'turnaje v počítačových hrách'
      ],
      results: [
        'Nájemník',
        'Svobodová',
        'Stejskal',
        'Helgert'
      ]
    },
    {
      id: 9,
      question: 'Co je tvoje fav zvíře?',
      options: [
        'Panda',
        'Lochneska',
        'asi nemáš',
        'něco hrozně mikro a exotického'
      ],
      results: [
        'Ekrtová',
        'Orr',
        'Stejskal',
        'Svobodová'
      ]
    }
  ],
  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="ZvoleneOtazky[CurrentOtazka]['question']"></p>

            <div class="space-y-3">
                <template x-for="(option, index) in ZvoleneOtazky[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, ZvoleneOtazky.length - 1)" x-bind:disabled="CurrentOtazka >= ZvoleneOtazky.length - 1">
                Další
            </button>
        </div>

    </div>

</div>
</template>
    <button @click="startQuiz()">Začít kvíz</button>
</body>

</html>