2024. szeptember 2., hétfő

13 évf. Frontend - 1. Interaktív Kvíz Alkalmazás

Készítsetek egy egyszerű, de teljes funkcionalitású interaktív kvíz alkalmazást, amely több kérdést tartalmaz és visszajelzést ad a felhasználónak a válaszai alapján.

Feladat követelményei:

  1. HTML - Alapstruktúra:

    • Hozz létre egy HTML oldalt, amely tartalmazza a kvíz kérdéseit.
    • Minden kérdéshez tartozzon egy kérdés szöveg (például: "Mi Magyarország fővárosa?") és legalább három válaszlehetőség (radio button vagy checkbox formájában).
    • Helyezz el egy gombot az oldal alján, amely a kvíz kiértékelésére szolgál (például: "Eredmény megtekintése").
  2. CSS - Stílusok:

    • Formázd meg az oldal kinézetét úgy, hogy az esztétikus és könnyen használható legyen.
    • Használj legalább három különböző CSS tulajdonságot (például: színek, betűtípusok, margók, padding).
    • Készíts egy reszponzív dizájnt, amely jól néz ki különböző eszközökön (mobil, tablet, asztali gép).
  3. JavaScript - Interaktivitás:

    • Készíts egy JavaScript kódot, amely kezeli a válaszok kiértékelését.
    • Amikor a felhasználó rákattint az "Eredmény megtekintése" gombra, a JavaScript számolja ki, hány helyes választ adott, és jelenítse meg az eredményt az oldalon.
    • Adj visszajelzést a felhasználónak a teljesítményéről (például: "Gratulálok, 3/5 kérdésre helyesen válaszoltál!").
    • (Opcionális) Adj lehetőséget a felhasználónak a kvíz újrakezdésére anélkül, hogy frissítené az oldalt.

Extra kihívások (opcionális):

  • Készíts egy időzítőt, amely korlátozza a kvíz kitöltésére rendelkezésre álló időt.
  • Tárolj kérdéseket és válaszokat egy külön JavaScript objektumban vagy JSON formátumban, és dinamikusan generáld a kérdéseket az oldal betöltésekor.
  • Adj hozzá animációkat CSS-sel, például a kérdések megjelenítésekor vagy a válaszok kiértékelésekor.


Nincsenek megjegyzések:

Megjegyzés küldése

<<< szintaxis

 A <<< szintaxist a PHP-ban "heredoc" vagy "nowdoc" szintaxisnak nevezzük. Ez nem pontosan olyan, mint a Jav...