HTML Form + JavaScript

Okt. 8-14
Határidő: Nov. 4.

Követelmények | Laborházik | Dokumentáció


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

Követelmények:

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. Fényképalbum képeinek lejátszása
    Szükséges: legalább 2 fényképalbum, albumonként min. 3 képpel.
    Kérjük be HTML form segítségével az alábbi adatokat:
    - fenyképalbum neve (legördülő listából legyen kiválasztható)
    - megtekintés módja (rádiógomb csoport két értékkel: automatikus/kézzel irányított)

    A kiválasztott fényképalbum képeit lehessen megtekinteni a kiválasztott mód alapján:
    - automatikusan
        - a képek lejátszása gombnyomásra induljon
        - ekkor lehessen a lejátszás sebességét módosítani (növelni/csökkenteni bizonyos korlátok között)
        - a lejátszás az album képei közt körkörösen haladva történjen (az utolsóról ismét az elsőre ugorjon)
    vagy
    - kézzel irányítva a lejátszást (előző/következő gombok segítségével)
        - ekkor ne legyen látható az "előző" gomb az első kép esetén, illetve a "következő" gomb az utolsó kép esetén.
    Tipp: időzítésre a setTimeout használható.


  2. Memóriajáték
    Kérjük be HTML form segítségével az alábbi adatokat:
    - négyzetrács mérete (a sorok illetve oszlopok számának minimális illetve maximális értéke rögzített.)
    - játékos neve
    Rajzoljunk ki egy nxm-es négyzetrácsot (ahol n és m a megadott sor- illetve oszlopszám), melynek mindenikében ugyanaz a (pl. kérdőjelet ábrázoló) kép jelenik meg kezdetben.
    A négyszetrácsban kép-párok vannak elrejtve (ezek pozícióját véletlenszerűen generáljuk), vagyis minden kép pontosan kétszer jelenik meg a négyzetrácsban, de ezeknek a pozíciója a játékos számára nem ismert.

    A játékos kattintással két különböző képet fordíthat fel egymás után (a kérdőjelre kattintva megjelenik az elrejtett kép). Ha a két kép azonos, mindkettő látható marad mindvégig, különben visszafordulnak és ismét a kérdőjel lesz látható.

    Ha a játékosnak sikerült minden kép-párt megtalálnia gratuláljunk neki.
    Tipp: véletlenszám generálása: Math.random segítségével.


  3. Itt a piros hol a piros játék
    Kérjük be HTML form segítségével az alábbi adatokat:
    - játékos neve
    - életkora
    - mennyi pénze van...
    - pénznem kiválasztása egy legördülő listából
    Ellenőrizzük, hogy minden adat helyesen van megadva, illetve a játékot csak 18 éven felüli, egy bizonyos minimális pénzösszeggel rendelkező egyénnek engedjük meg.

    Ha megkezdődött a játék, jelenjen meg a játékos neve az oldal egy jól látható helyén.
    A játékos 3 gomb közül választva tippelhet arra, hogy "hol a piros". Ha eltalálta a helyes (véletlenszerűen generált) pozíciót, (a pénznemtől függő) x összeget nyer, különben kétszer annyit veszít. A játék addig ismétlődik, míg a játékos meg nem unja ("meguntam" gombra kattintva) vagy a pénze a minimális alá csökken.
    Mindig legyen kiírva, hogy a játékosnak mennyi pénze maradt, illetve a nyerés vagy vesztés függvényében más-más kép jelenjen meg.
    Tipp: véletlenszám generálása: Math.random segítségével.


  4. 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 igen-igen leegyszerűsített HTML-es változata kíván lenni, de amúgy a rajzon szerepelhet a teknőcön kívül bármi egyéb, pl. egy nyíl is.)

    Egy x szer y-os "pálya" közepén jelenítsünk meg egy (alaphelyzetben balról-jobbra irányba néző) teknőcöt. A pálya szélei legyenek láthatóak.
    Egy Form-on 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
    (- opcionális: a teknőc "ceruzájának" a színe)
    - 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 vagy 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 választhatjuk ki (elég 90, 180, 270, de lehetnek 45 többszörösei is)
    Ha a teknőc kifut a pályáról, jelenjen meg annak ellentétes oldalán.
    A megadott parancsokkal tetszőlegesen mozgathassuk/rajzoltathassuk a teknőcöt, illetve egy gombra kattintva legyen visszaállítható az alaphelyzet.


  5. Szám kitalálósdi
    Feladat: a játékosnak egy min. illetve max. érték közötti, vélrtlenszerűen generált számot kell kitalálnia korlátozott idő alatt.
    Kérjük be HTML form segítségével az alábbi adatokat:
    - min. illetve max. érték
    - játékos neve
    - nehézség: 3 fokozat közül lehessen választani (rádiógomb)
    A nehézségi fok növekedése abban áll, hogy kevesebb idő áll rendelkezésre, illetve hibás adat begépelése esetén (nem szám vagy a min.-max. értéktartományon kívül eső érték megadása) nagyobb büntetés jár (levonás a hátralevő időből).
    A képernyőn jelenjen meg a hátralevő idő, amit másodpercenként frissítünk.
    Minden egyes találat beírása után írjuk ki, hogy a szám, amit a játékosnak ki kell találnia kisebb vagy nagyobb-e, mint a játékos által beírt tipp. Ha sikerült kitalálni a számot, gratuláljunk a játékosnak, egyébként "vígasztaljuk meg" egy (adott képek közül) véletlenszerűen kiválasztott kép megjelenítésével.

    A játékot lehessen újrakezdeni.
    Tipp: időzítésre setTimeout, véletlenszám generálásra Math.random használható.


  6. Az a) illetve b) pont egymástól független, de legyenek ugyanazon a HTML 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 Form-on 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
    - legyen benne legalább egy nagybetű illetve legalabb egy kisbetű
    - 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) Képvariációk
    Az alábbi kép 4 különböző szakaszból áll: bal szél, jobb szél, felső szél, illetve alsó szél

    Rajzoljunk ki egy üres fehér négyzetet, alá pedig a 4 elemnek megfelelő gombot (|,_ , stb.) Mindenik gombnak két állapota lehet: lenyomva vagy felengedve (látszodjon a különbség). Kezdetben egyetlen gomb sincs lenyomva (ezt jelenti az üres kép). A gombokat rákattintással ki-be kapcsolhatjuk, és a gombok feletti négyzetben mindig a megfelelő kép jelenjen meg, aszerint, hogy melyik elemek vannak bekapcsolva.

Hasznos hivatkozások: