(X)HTML Form + JavaScript

Okt. 11-16
Határidő: Nov. 6.

Laborházik | Dokumentáció

E laborházi lényege:
- (X)HTML Form elemek ismerete és használata
- kliens oldali JavaScript alapfokú ismerete és használata

Feltölteni két állományt kell:
ahol nn a feladat sorszámát jelzi, xxxxxxx pedig a felhasználóazonosítót.

Laborházik:
Megj.: A feladat I. részében leírtak mindenkire vonatkoznak, a II. részben a feladat egyénre szabott része szerepel (mindenki a sorszáma szerinti feladatot választja).

I.

II.
  1. Teknőcidomítás
    (Azért éppen teknőc, mivel a feladat a, főként -de nem kizárólag- gyerekek számára kitalált, LOGO programozási környezet egy leegyszerűsített HTML-es változata kíván lenni, de amúgy a rajzon szerepelhet "stilizált teknőc", pl. egy nyíl.)

    Egy canvas elemre rajzolt "pálya" közepén jelenítsünk meg egy (alaphelyzetben balról-jobbra irányba néző) teknőcöt.
    Egy űrlapon (form) keresztül az alábbiakat választhatjuk ki:
    - a teknőc rajzol vagy nem rajzol (rádiógomb) - értsd: elmozdulás esetén nyomot (csíkot) hagy maga után vagy sem
    - a teknőc "ceruzájának" a színe (legördülő listából)
    - egy legördülő lista, melyből a parancsot választhatjuk ki, majd a kiválasztott parancstól függően egy (második legördülő lista inkább) szövegdoboz, melyben a parancs paraméterét adjuk meg
         - a parancs az alábbi értékeket veheti fel:
            - előre, hátra, jobbra fordul, balra fordul
         - paraméter: - "előre" vagy "hátra" esetén a lépésszámot adjuk meg
             - fordulás esetén pedig az elfordulás szögét adhatjuk meg
    Ha a teknőc kifut a pályáról, jelenjen meg annak ellentétes oldalán.
    A megadott parancsokkal tetszőlegesen mozgathatjuk/rajzoltathatjuk a teknőcöt, illetve egy gombra kattintva legyen visszaállítható az alaphelyzet.


  2. Hatból négyet játék
    Kérjük be XHTML űrlap (form) segítségével az alábbi adatokat:
    - játékos neve
    - életkora
    Ellenőrizzük, hogy az életkor helyesen van megadva.

    Ha megkezdődött a játék, jelenjenek meg a játékos adatai az oldal egy jól látható helyén.
    A játék lényege a következő: a gép kiválaszt (véletlenszerűen generál) 6 megadott színből 4-et (egyik szín sem ismétlődhet), ezek sorrendjét is meghatározva. Ezt kell a játékos kitalálja. A játékos tippel (pl. négy legördülő listából választja ki a színeket, de tetszés szerint másképp is megoldható), majd a gép kiértékeli a tippet: megmondja, hogy hány pontatlan (a szín talál, de a pozíciója nem) illetve hány pontos találat (a szín is és a pozíció is talál) van. A játékban hagyományosan fekete négyzet jelöli a pontatlan-, illetve fehér négyzet a pontos találatokat (de ezt is megoldhatjuk tetszés szerint másképp).
    Megj.:Lényeges, hogy a gép válaszából csak a helyes vagy helytelen találatok száma derül ki, az, hogy konkrétan melyik színre vonatkozik, az nem.
    Ha a játékos még nem találta ki a színeket a helyes sorrendben, akkor ismét tippelhet. A tippek és válaszok egymás alatt jelenjenek meg. Max. 8-at tippelhet a játékos, ha nem sikerül kitalálnia a 4 színt a helyes sorrendben, akkor veszített, különben nyer.
    A játék végén a gép az eredmény- (kitatlálta vagy sem, ha igen, akkor hány lépésből) és a játékos életkorától függően más-más szöveget írjon ki.
    Tipp: véletlenszám generálása: Math.random segítségével.


  3. Szövegszerkesztő
    Legyen két szövegdoboz (textarea), az egyikbe szóközzel elválasztott szavakat írunk, ezek lesznek a figyelt szavak. A másikba szöveget írunk. A második szövegdoboz alatt megjelenik a beírt szöveg megfelelőképpen kiszínezve, a gépeléssel egyidőben, a következő szabály szerint: ha a második szövegdobozba írt szövegben valamely szó (akár részszóként is) szerepel az első szövegdobozban, akkor azt pirossal jelenítjük meg, a többi karakter színe fekete.
    Ha pl. az első szövegdobozban az aaa és aab szavak szerepelnek, akkor az abaa szó nincs kiszínezve, míg az az aaab teljesen piros.


  4. Kő, papír, olló játék
    Kérjük be XHTML űrlap (form) segítségével az alábbi adatokat:
    - játékos neve
    - mennyi pénze van
    Ha megkezdődött a játék, a játékos neve, illetve pénze legyen feltüntetve jól látható módon.
    A játékos három megfelelő kép (kő, papír vagy olló) közül választva adja meg a saját tippjét, a gép pedig generálja a sajátját. Miután valamelyik képre kattintottunk, csak a kiválasztott kép maradjon látható, illetve a gép tippje is váljon láthatóvá. A nyertes fizet x összeget (a gép kezdeti pénzösszegét generáljuk véletlenszerűen). Az alábbi szabály adja meg, hogy ki a nyertes:
    Tüntessük fel, hogy ki nyert, aktualizáljuk a játékos (és a gép) pénzösszegét, majd egy gombra kattintva folytathatjuk a játékot egy újabb fordulóval mindaddig, amíg óhajtjuk, illetve mindkét félnek van pénze.

  5. Az a) illetve b) pont egymástól független, de legyenek ugyanazon a XHTML oldalon (vízszintes vonallal elválasztott külön részben):
    a) Jelszó formátumának ellenőrzése.
    Kérjünk be egy felhasználónevet és egy jelszónak szánt szöveget egy űrlapon (form) keresztül. Ellenőrizzük, hogy a begépelt jelszó teljesíti-e az alábbi feltételeket, és ha nem, írjuk ki, hogy mi az, ami nem felel meg:
    - legalább egy számjegy kell szerepeljen benne (de ne csak számjegyekből álljon)vagy legyen benne nagy- és kisbetű is
    - legyen legalább 6 karakter hosszúságú
    - 10 karakternél hosszabb nem lehet
    Az ellenőrizhetőség kedvéért írjuk ki apró betűkkel a beírt felhasználónevet és jelszót.

    b) Mandelbrot halmaz
    Jelenítsük meg a Mandelbrot halmazt (lehetőleg felismerhető paramétertartományban), természetesen nem képből betöltve, hanem javascriptben kiszámítva.


  6. Szöveg görgetése (scroll) vízszintes irányban
    Legyen egy szövegdoboz (textarea), ahova beírunk egy szöveget (ezt a szöveget fogjuk a szövegdoboz alatt elhelyezett div elem által kijelölt területen belül görgetni) és egy legördülő lista, amelyből kiválaszthatjuk a görgetés irányát (balra vagy jobbra). Miközben beírjuk a szöveget, az elkezd a megadott irányba gördülni úgy, hogy ha rövidebb a szöveg, mint a görgetés számára kijelölt div szélessége, akkor többször egymás után jelenik meg. Egy gomb megnyomásával újrakezdhető a görgetés. A szöveg mindig a görgetésre szánt területnek a megadott iránnyal ellentétes oldalán indul és legyen olvasható. Úgy kell műkodjon, mint a (nem standard!) marquee tag csak ebben az esetben egy div-ben kell megjelenjen a görgetett szöveg.


Hasznos hivatkozások: