zobrazeni vysledku

zobrazí se fotka, jméno a percentage score. Jméno a percentage je brán z x-data fotka je tam natvrdo to je třeba dodělat

chybí také bonus v úkolu a to posílání score na /api/summary

ref #14

templates/home.html

@@ -81,7 +81,7 @@ function quizApp() {
   VavraBody: 0
 }">
 
-    <div class="card bg-white w-full max-w-lg p-6 border-t-8 border-blue-700">
+    <div class="card bg-white w-full max-w-lg p-6 border-t-8 border-blue-700" x-show="!skoncilqiz">
         
         <h1 class="text-2xl font-bold text-center text-gray-800 mb-8">
             Který učitel na GJS jsi ty?
@@ -109,18 +109,38 @@ function quizApp() {
             <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">
+            <button 
+            class="px-6 py-2 gjs-blue text-white rounded font-bold hover:opacity-90 transition"
+            x-on:click="CurrentOtazka >= otazky.length - 1 ? skoncilqiz = true : CurrentOtazka = Math.min(CurrentOtazka + 1, otazky.length - 1)"
+            x-text="CurrentOtazka >= otazky.length - 1 ? 'Odeslat' : 'Další'">
                 Další
             </button>
         </div>
 
     </div>
 
+    <div class="card bg-white w-full max-w-lg p-6 border-t-8 border-blue-700" x-show="skoncilqiz">
+        <h1 class="text-2xl font-bold text-center text-gray-800 mb-8">
+            Výsledky kvízu
+        </h1>
+        <p class="text-lg text-gray-700 mb-4 justify-center flex flex-col items-center">
+            <span x-text="getSummary().teacher" class="text-xl font-bold"></span>
+            <img src="/static/images/Ambroz.jfif" alt="getSummary().teacher" class="w-24 h-24 rounded-full mx-auto my-4">
+            <span x-text="getSummary().similarityPercent + '%'" class="text-xl font-bold"></span>
+        </p>
+    </div>
+
 </div>
 </template>
     <button @click="startQuiz()">Začít kvíz</button>
 </body>
 
+<script>
+    function getSummary() {
+        return { teacher: "Ambroz", similarityPercent: 87 }
+    }
+</script>
+
 </html>