|
|
@@ -9,8 +9,194 @@
|
|
|
.gjs-blue { background-color: #0055a4; }
|
|
|
.card { border-radius: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
|
|
|
</style>
|
|
|
+ <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
|
</head>
|
|
|
-<body class="flex flex-col items-center justify-center min-h-screen p-4">
|
|
|
+<body 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">
|
|
|
|
|
|
@@ -19,31 +205,28 @@
|
|
|
</h1>
|
|
|
|
|
|
<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="ZvoleneOtazky[CurrentOtazka]['question']"></p>
|
|
|
|
|
|
<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 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">
|
|
|
+ <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">
|
|
|
+ <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>
|
michal.korcak