Otázka a odpovědi

Čas na další projekt! Tento miniprojekt využije stav, události a podmínky a k tomu všechno, co jste se naučili předtím. Stejně jako v minulém miniprojektu pokyny říkají, co má stránka dělat, a jak to napíšete, je na vás.

Projekt. Stavíte kvízovou hru o zvířatech. Aplikace položí otázku, hráč klikne na jednu z odpovědí a aplikace řekne, jestli odpověděl správně. Ve třech cvičeních ukážete otázku a zkontrolujete odpověď, potom budete počítat skóre a přecházet na další otázku a nakonec hru ukončíte výsledkem a tlačítkem pro novou hru.

Soubory. Otázky jsou v otazky.js, v poli objektů se zněním otázky zneni, jejími odpověďmi odpovedi a tou správnou, spravna. App.jsx je už importuje: otazky[0] je první otázka. style.css má styly pro třídy, které najdete níže.

Úkol. Ukažte první otázku: její znění v h2 a pod ním každou z jejích odpovědí jako tlačítko, v pořadí podle pole. Tlačítka dejte do div s třídou odpovedi.

Když hráč klikne na odpověď, ukažte v odstavci s třídou hodnoceni text Správně!, když je odpověď správná, a jinak Špatně! Správná odpověď je 8., se správnou odpovědí té otázky místo 8. Pak už si to hráč nesmí rozmyslet: vypněte všechna tlačítka s odpověďmi.

Tip: kliknutí mění, kterou odpověď hráč vybral. Tu mějte ve stavu, na začátku null, tedy zatím žádnou. Jestli se hodnocení ukáže, co v něm bude a jestli jsou tlačítka vypnutá, se pak dá při vykreslení spočítat z ní.