quizizzWebTutorial/index.html at main · FlakeTheSnow/quizizzWebTutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quizizz Videotutoriál</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body class="bg-white text-gray-800 font-sans scroll-smooth">
    <div class="relative">
      <svg class="absolute top-0 left-0 w-full h-full opacity-50 pointer-events-none z-[-1]" viewBox="0 0 1000 6000" xmlns="http://www.w3.org/2000/svg">
        <!-- Čárkovaná cesta -->
        <path
          d="M 500 700
            C 150 1000, 850 1000, 900 2000
            C 850 3000, 150 3000, 100 4000
            C 150 5000, 850 5000, 900 5800"
          fill="none"
          stroke="red"
          stroke-width="4"
          stroke-dasharray="12,12"
        />

        <!-- Vlajky -->
        <text x="500" y="700" font-size="48">🚩</text>
        <text x="900" y="1900" font-size="48">🚩</text>
        <text x="100" y="4000" font-size="48">🚩</text>

        <!-- Konec -->
        <text x="870" y="5828" font-size="56">❌</text>
      </svg>

    <!-- Hero Sekce -->
    <section id="hero" class="relative min-h-screen flex flex-col justify-center items-center text-center bg-gray-50 p-8 bg-opacity-75">
      <h1 class="text-4xl font-bold mb-4">Videotutoriál k práci s platformou Quizizz</h1>
      <p class="text-lg max-w-2xl mb-6">
        Tento videotutoriál vám krok za krokem ukáže, jak efektivně pracovat s platformou Quizizz pro vytváření interaktivních prezentací a testů.
        V pěti tematických sekcích si ukážeme jak importovat prezentaci nebo test, přidávání různých gamifikovaných prvků, zadávání testů nebo práci s výsledky.
      </p>
      <a href="#tema1" class="bg-indigo-600 text-white px-6 py-3 rounded-xl text-lg hover:bg-indigo-700 transition scroll-link">
        Začínáme!
      </a>

      <!-- Poznámka vlevo dole -->
      <div class="absolute bottom-6 right-6 max-w-sm group rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-600 dark:bg-gray-800 transition-all duration-1000">
        <button class="w-full cursor-pointer p-4 text-left text-lg font-bold text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
          💡 Poznámka
        </button>
        <div class="max-h-0 opacity-0 overflow-hidden px-4 pb-4 text-sm text-gray-700 dark:text-gray-400 transition-all duration-[1200ms] ease-in-out group-hover:max-h-96 group-hover:opacity-100 group-focus-within:max-h-96 group-focus-within:opacity-100">
          V případě nejasností doporučuji nahlédnout do metodické příručky, která je součástí praktické části bakalářské práce (viz odkaz v zápatí).
        </div>
      </div>
    </section>

    <!-- Tématické sekce -->
    <section id="tema1" data-next="#tema2" class="relative min-h-screen flex flex-col lg:flex-row items-center gap-8 px-8 py-20 border-b ">
      <iframe class="w-full lg:w-1/2 aspect-video" src="https://www.youtube.com/embed/w7cCFMkrheo?si=zVeHWWF5KOUKmprJ" title="Úvod do Quizizz" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
      <div class="lg:w-1/2">
        <h2 class="text-2xl font-semibold mb-4">Import prezentace do Quizizz</h2>
        <p>V této části si ukážeme, jak jednoduše importovat vlastní prezentaci do platformy Quizizz. Video vás provede krok za krokem celým procesem nahrání souboru a jeho přípravou pro použití v hodině. Nezapomeňte vybrat v nabídce upravitelné snímky (editable slides), pro možnost jejich další úpravy.</p>
      </div>
      <!-- Poznámka vpravo dole -->
      <div class="absolute bottom-6 right-6 max-w-sm group rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-600 dark:bg-gray-800 transition-all duration-1000">
        <button class="w-full cursor-pointer p-4 text-left text-lg font-bold text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
          💡 Poznámka
        </button>
        <div class="max-h-0 opacity-0 overflow-hidden px-4 pb-4 text-sm text-gray-700 dark:text-gray-400 transition-all duration-[1200ms] ease-in-out group-hover:max-h-96 group-hover:opacity-100 group-focus-within:max-h-96 group-focus-within:opacity-100">
          Quizizz umožňuje nahrát prezentaci ve formátu PDF nebo Google Slides. Pokud pracujete v PowerPointu (Office), doporučuji prezentaci nejprve exportovat do PDF formátu. Při převodu se mohou ztratit animace, ale to většinou nevadí.
        </div>
      </div>

    </section>

    <section id="tema2" data-next="#tema3" class="relative min-h-screen flex flex-col-reverse lg:flex-row items-center gap-8 px-8 py-20 border-b">
      <div class="lg:w-1/2">
        <h2 class="text-2xl font-semibold mb-4">Import testu (kvízu)</h2>
        <p>V tomto videu se naučíte, jak naimportovat test do Quizizz z textového nebo excelového (.xls) souboru. Uvidíte, jak systém automaticky rozpozná otázky, zobrazí jejich náhled a jak můžete výsledný test upravit do finální podoby nebo si ho případně i vytisknout pro offline použití.</p>
      </div>
      <!-- Poznámka vlevo nahoře -->
      <div class="absolute top-6 left-6 max-w-sm group rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-600 dark:bg-gray-800 transition-all duration-1000">
        <button class="w-full cursor-pointer p-4 text-left text-lg font-bold text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
          💡 Poznámka
        </button>
        <div class="max-h-0 opacity-0 overflow-hidden px-4 pb-4 text-sm text-gray-700 dark:text-gray-400 transition-all duration-[1200ms] ease-in-out group-hover:max-h-96 group-hover:opacity-100 group-focus-within:max-h-96 group-focus-within:opacity-100">
          Quizizz nabízí možnost importu testových otázek z textového nebo Excel souboru. Po importu je vhodné zkontrolovat otázky v náhledu, zda byly správně rozpoznány. Otevřené otázky nejsou ideální, doporučujeme uzavřené typy otázek pro snadnou práci s výsledky.
        </div>
      </div>
      <iframe class="w-full lg:w-1/2 aspect-video" src="https://www.youtube.com/embed/XlaGO6PobaE?si=NFCUiPOSajHRt0fb" title="Tvorba prezentace" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
    </section>

    <section id="tema3" data-next="#tema4" class="relative min-h-screen flex flex-col lg:flex-row items-center gap-8 px-8 py-20 border-b">
      <iframe class="w-full lg:w-1/2 aspect-video" src="https://www.youtube.com/embed/rgSYiHLfoB4?si=j3vqo4cSRWiva9W3" title="Tvorba testu" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
      <div class="lg:w-1/2">
        <h2 class="text-2xl font-semibold mb-4">Vkládání interaktivních a gamifikovaných prvků</h2>
        <p>Tato část se věnuje způsobům, jak do testu v Quizizz přidat interaktivní a gamifikovené prvky, které podporují zapojení žáků do výuky. Ukážeme si, jak vytvořit otázky typu multiple choice, doplňovačka (fill in the blank), anketa (poll), kreslení (draw), wordcloud a také otevřenou otázku (open-ended).
        Ve videu pracujeme výhradně s neplacenými funkcemi, takže vše, co uvidíte, je dostupné i v bezplatné verzi Quizizz.</p>
      </div>
    </section>

    <section id="tema4" data-next="#tema5" class="relative min-h-screen flex flex-col-reverse lg:flex-row items-center gap-8 px-8 py-20 border-b">
      <div class="lg:w-1/2">
        <h2 class="text-2xl font-semibold mb-4">Možnosti prezentace a testování</h2>
        <p>Ve následujícím videu si ukážeme různé způsoby, jak spustit a zadat připravený obsah studentům. Ukážeme si, jak odprezentovat materiál jako klasickou prezentaci nebo jak zadat test jako hravý kvíz – například s populárním režimem, kde studenti soutěží a postupně šplhají na horu.
        Podíváme se i na možnosti jako student-paced režim (každý si prochází úkol svým tempem) nebo zadání testu přes Google Classroom. Kde samozřejmě lze nastavit, jestli mají studenti jen jeden pokus, nebo si mohou úkol zkusit opakovaně.</p>
            </div>
      <!-- Poznámka vlevo nahoře -->
      <div class="absolute top-6 left-6 max-w-sm group rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-600 dark:bg-gray-800 transition-all duration-1000">
        <button class="w-full cursor-pointer p-4 text-left text-lg font-bold text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
          💡 Poznámka
        </button>
        <div class="max-h-0 opacity-0 overflow-hidden px-4 pb-4 text-sm text-gray-700 dark:text-gray-400 transition-all duration-[1200ms] ease-in-out group-hover:max-h-96 group-hover:opacity-100 group-focus-within:max-h-96 group-focus-within:opacity-100">
          Před zadáním doporučujeme promyslet, zda chcete klást důraz na soutěživost, výkon nebo na procvičení. Například v režimu „pouze jeden pokus“ je větší tlak na výkon, zatímco opakované pokusy podporují učení a objevování správných odpovědí.
        </div>
      </div>
      <iframe class="w-full lg:w-1/2 aspect-video" src="https://www.youtube.com/embed/UExP3iJT0ZE?si=UXbmTyY4N-GFlAX3" title="Prezentace a testování" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>

    </section>

    <section id="tema5" class="relative min-h-screen flex flex-col lg:flex-row items-center gap-8 px-8 py-20 border-b">
      <iframe class="w-full lg:w-1/2 aspect-video" src="https://www.youtube.com/embed/I9Y0w12isR0?si=mRWZJalKX6qvd0mE" title="Hodnocení a výsledky" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
      <div class="lg:w-1/2">
        <h2 class="text-2xl font-semibold mb-4">Hodnocení a výsledky</h2>
        <p>V závěrečné části si ukážeme, jak pracovat s výsledky testu v Quizizz. Dozvíte se, jak si výsledky zobrazit přímo v přehledu nebo jak je stáhnout ve formátu XLS pro další zpracování. Ukážeme si i tipy, jak s tabulkou efektivně pracovat v Excelu.</p>
      </div>
      <!-- Poznámka vpravo nahoře -->
      <div class="absolute bottom-6 right-6 max-w-sm group rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-600 dark:bg-gray-800 transition-all duration-1000">
        <button class="w-full cursor-pointer p-4 text-left text-lg font-bold text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
          💡 Poznámka
        </button>
        <div class="max-h-0 opacity-0 overflow-hidden px-4 pb-4 text-sm text-gray-700 dark:text-gray-400 transition-all duration-[1200ms] ease-in-out group-hover:max-h-96 group-hover:opacity-100 group-focus-within:max-h-96 group-focus-within:opacity-100">
          Pozor na otevřené otázky – Quizizz je automaticky označí jako správné, pokud je ručně neopravíte. Při exportu výsledků do Excelu je třeba přepočítat body ručně (např. pomocí <code>=SUM(...)</code>), jinak zůstane původní.
        </div>
      </div>
    </section>

    <!-- Závěr -->
    <footer class="text-center py-10 px-4 bg-gray-100">
      <p class="text-sm text-gray-500">&copy; 2025 Igor Vujovič | Videotutoriál k metodické příručce pro platformu Quizizz</p>
      <p class="text-sm text-gray-500">Vytvořeno jako součást bakalářské práce: <a class="font-medium text-blue-600 dark:text-blue-500 hover:underline!" href="https://is.cuni.cz/studium/dipl_st/index.php?doo=detail&did=273737">Interaktivní internetové prezentace s gamifikovanou formou testování a jejich využítí</a></p>
    </footer>

    <!-- Scroll Arrow -->
    <a id="next-arrow"
    href="#"
    class="fixed bottom-6 left-1/2 -translate-x-1/2  md:translate-x-0 z-50 text-gray-700 hover:text-black transition hidden scroll-link">
    <svg xmlns="http://www.w3.org/2000/svg" class="md:w-32 md:h-32 w-8 h-8 animate-bounce" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
    </svg>
    </a>
  </div>
  </body>
  <script src="main.js"></script>
</html>