Alternativy seminářového úkolu 1

Zadání 1 – Procvičovací kartičky

Vytvoř mini aplikaci „Kartičky HTML“, kde se zobrazuje otázka (pojem) a uživatel může tlačítkem Zobrazit odpověď vypnout/zapnout zobrazení vysvětlení. Tlačítkem Další karta se přejde na další pojem v seznamu (po dojetí na konec se začne znovu od první).

Cíl úlohy

• Ovládnutí událostí kliknutí (onclick).

• Práce s indexem v poli a jednoduchým cyklením.

• Přepínání viditelnosti pomocí třídy a podmínky if (stav == true/false).

• Změna textového obsahu prvků (ne obrázků).

Vstupní podmínky

• Připraven základní HTML dokument.

• Vytvoř soubory: index.html, style.css, main.js (pro tento variantní projekt).

Požadovaný výstup

• Na stránce je nadpis, box s otázkou a skrytou odpovědí.

• Dvě tlačítka: „Zobrazit odpověď“ a „Další karta“.

• Minimálně 3 kartičky (pojem + odpověď) v poli v JS.

• Při kliknutí na „Zobrazit odpověď“ se odpověď střídavě ukáže/schová.

• Při kliknutí na „Další karta“ se změní otázka (a odpověď se automaticky skryje).

• V kódu jsou krátké české komentáře.

Doplňující pokyny

• Použij sémantické tagy (main, section, h1, p, button).

• Jednoduché, čitelné názvy proměnných a tříd.

• Odsazení a validní HTML/CSS.

• Žádné čistě vizuální efekty bez funkčního významu.

Kartičky HTML

Řešení úlohy – Kartičky HTML

Zadaní 2 – Mini Kvíz

Vytvoř mini kvíz o 3 otázkách. U každé otázky se zobrazí text a tři možnosti (radio). Uživatel vybere odpověď a klikne na Ověřit – zobrazí se krátká zpětná vazba. Poté tlačítkem Další otázka přejde na další položku. Po poslední otázce se zobrazí souhrn bodů a nabídka Začít znovu.

Cíl úlohy

• Ovládnutí onclick a práce s formulářovými prvky (radio).

• Použití podmínky k vyhodnocení správnosti.

• Práce s indexem a postupné zobrazování otázek.

• Základní „validace“: pokud není vybrána žádná možnost, upozornit uživatele.

Vstupní podmínky

• Základní HTML kostra.

• Soubory index.html, style.css, main.js (pro tento variantní projekt B).

Požadovaný výstup

• Zobrazí se alespoň 3 otázky v poli v JS, každá se 3 možnostmi.

• Tlačítka Ověřit a Další otázka (to druhé je na začátku neaktivní).

• Textová zpětná vazba „Správně!“ / „Nesprávně.“ a průběžné skóre.

• Pokud uživatel nevybere možnost a klikne na Ověřit, zobraz informaci.

• Po dojetí na konec vypiš celkové body a ukaž tlačítko Začít znovu.

Doplňující pokyny

• Sémantické tagy (form, fieldset, legend).

• Jednoduché třídy/ID, čisté odsazení.

• Žádné zbytečné vizuální efekty.

Mini Kvíz

Řešení úlohy 2 – Pětihvězdičkové hodnocení s rolováním