Projekt követelmények

• Az alapvető követelmények a tárgy teljesítési feltételeiben le vannak írva, azokat is be kell tartani.
• A projektnek azokat a követelményeket hiánytalanul és hibátlanul tartalmaznia kell, melyek mellett nincs feltűntetve pontszám. Ezek összességében 50 pontot érnek, tehát a projekt teljesítésének szükséges és elégséges feltételét képezik. Ha ezekből bármi is hiányzik vagy nincs megfelelően megvalósítva, akkor a projekt el lesz utasítva! A többi feladat megoldása nem kötelező, ezekből választani lehet további legfeljebb 50 pontnyi feladat megoldását (ha valaki ezekből ennél többet old meg, akkor is 50 pont lesz, mert a gyakorlatra összesen legfeljebb 100 pont szerezhető).
• A html, css és szkript kódokat külön fájlokban kell elhelyezni. A forráskódoknak (html, js) átláthatóknak kell lenni. A projekt cálja, hogy a tanult elemek ismeretét felmérje, ezért a felesleges elemeket, automatikus genarálásból eredő túlbonyolított megoldásokat tartalmazó megoldások el lesznek utasítva!
• A projektben használt minden megvalósításnak különböznie kell annyira a kurzus példáitól, hogy megállapítható legyen annak megértése. Tehát nem elegendő pl. a bemásolt kódban a szövegek módosítása, vagy a bemásolt szkript mellé más HTML kód beszúrása, a példa kódját lényeges elemeiben módosítani kell.
• A projekteknek különbözniük kell annyira egymástól, hogy ne merüljön fel a másolás gyanúja. Túl hasonló projektek esetén javítás jelleggel azok módosítását fogom kérni. Amennyiben javítás után is túl hasonlók lesznek, mindkét projekt el lesz utasítva.
• A követelmények megvalósításához néhány kis méretű kép is elegendő, ne használjunk sok, nagy méretű képet.
• A projektet egyetlen zip állományba tömörítve kell feltölteni a kurzushoz tartozó CooSpace színtérben erre kialakított Feladat eszköz használatával. A feltöltött fájl neve a hallgató neve kell legyen Családnév_Keresztnév formában, és ne tartalmazzon speciális karaktereket.
• Készíteni kell egy tartalom.html fájlt, mely jelen fájlnak a másolata annyi változtatással, hogy minden megvalósított követelmény hivattkozássá van alakítva, mely a megvalósítást tartalmazó oldalon belül a megvalósítást tartalmazó részre mutat (nem a forráskódra, hanem a .html fájlra !!!), illetve ki lehet egészítve további megvalósításokra mutatotó hivatkozásokkal. Az A pontot a főoldalon is ki lehet egészíteni (ebben az esetben nem kellenek linkek), a B. és C. pontok esetében elegendő csak azok címeit (Űrlap és Kirakó) és azon választható alpontjait linkekké alakítani, amelyeket a hallgató megvalósított. Nem megvalósított pontok linkekre alakítása pontlevonással jár.
  • Csak a linkre alakított követelmények meglétét ellenőrzöm, ezért fontos, hogy a követelmény megvalósítása akkor is legyen linkre alakítva, ha nem tud az adott oldalon belül pontosan a kívánt helyre mutatni vagy ott önállóan nem múködne (akkor a hozzá legközelebbi beazonosítható helyre mutasson), különben nem fog pontot kapni.
• A feladat kizárólag JavaScript használatával oldható meg, ettől eltérő megoldás, pl. PHP nem fogadható el.
• A JavaScript megoldásoknak a böngészők legújabb verzióinak tekintetében böngészőfüggetlenek kell legyenek, azaz minden elterjedt böngészőben jól kell működniük. A böngészők akkor sem adhatnak hibajelzést, ha ezek megjelenítése be van kapcsolva (egyébként ezek bekapcsolása segít a hibák megtalálásában).
• Elvárt továbbá a progresszív fejlesztés betartása is, így ami szkript nélkül megvalósítható, annak szkript nélkül is működnie kell.
• A projekt minden oldala meg kell feleljen az XHTML 1.0 szigorú (strict) vagy a HTML5 követelményrendszerének. Ennek ellenőrzése a http://validator.w3.org/ oldalon lehetséges. Segítségként természetesen használhatók érvényesség ellenőrző böngésző kiegészítők is (pl. Firefoxban a HTML Validator soros algoritmussal), de vitás esetben a http://validator.w3.org/ oldal eredménye lesz a döntő.

1. Személyes adatok
   1. név
   2. szak, évfolyam
   3. tagozat (nappali/levelező)
   4. e-mail cím
2. Űrlap. Készítsünk egy matematikai feladatsort tartalmazó űrlapot (urlap.html) és egy hozzá tartozó űrlapot feldolgozó oldalt (feldolgoz.html) az alábbiak szerint. Az űrlap tartalma más témájú is lehet, de technikailag akkor is tartalmaznia kell az alábbiakat.
   1. Az űrlapon legyen:
      1. beviteli mező a feladatokat megoldó nevének
      2. 1960 és 2005 között minden évszámot tartalmazó, szkriptből dinamikusan generált lista a születési év kiválasztására
      3. Négy feladat az alábbi típusú válaszlehetőségekkel:
         1. adott 3 választási lehetőség, amelyek közül kezdetben egy sincs bejelölve, és csak egyet lehet kiválasztani (választógomb)
         2. sok választási lehetőség közül többet is ki lehet, helyes válaszhoz legalább kettőt ki is kelljen választani, jelölőnégyzetekkel megvalósítva
         3. beviteli mezőbe kell beírni a szám típusú választ
         4. többsoros beviteli mezőbe kell beírni a szöveg típusú választ
      4. minden mezőhöz elemfelirat
      5. mezőcsoportosítás
      6. egy Küldés gomb, amelyet megnyomva az űrlap adatait elküldjük a feldolgozó fájlnak
      7. egy Töröl gomb, amelyet megnyomva az addig megadott adatokat törli
   2. Szám típusú válasz esetén, amikor ellépünk a beviteli mezőről, történjen ellenőrzés, hogy valóban szám van-e a mezőben és ha nem, akkor jelenjen meg egy figyelmeztetés és ne engedjen továbbmenni másik mezőbe.
   3. A Küldés gombra kattintva történjen ellenőrzés: ha valamely beviteli mező üresen maradt, vagy valamelyik kérdésnél egyik választógomb sem lett bejelölve, figyelmeztetés jelenjen meg, az űrlap adatai ekkor ne kerüljenek elküldésre.
   4. A feldolgoz.html:
      • jelenítse meg a feladatokat megoldó nevét, az életkorát (számítsa ki a születési év alapján), a kérdéseket, a kérdésekre adott illetve bejelölt válaszokat és azt, hogy mik lettek volna a helyes válaszok
      • helyes válasz esetén zöld színnel, helytelen válasz esetén piros színnel jelenjen meg az adott válasz
      • (2 pont) szöveges válasz esetén akkor lesz helyes a válasz, ha előre megadott szavak szerepelnek benne, a kis- és nagybetűk ne legyenek megkülönböztetve
      • (4 pont) reklámcsíkban futó szövegként jelenjen meg a helyes válaszok száma és az összes feladathoz viszonyított aránya százalékosan.
      • (4 pont) a legutóbbi feladatsormegoldás dátuma és a feladatot megoldó neve websütiből jelenjenek meg (ha létezik a süti), az űrlap elküldésekor ezeket az adatokat websütiként helyezzük el.
   5. (0-6 pont) JavaScriptben a kérdéseket egyedi objektumokként hozzuk létre a megfelelő saját (!!!) tulajdonságokkal és metódusokkal (pl. kerdes, valasz1, valasz2 tulajdonságok, kiir metódus stb.). Tehát ez nem a DOM2, hanem az objektumorientáltság fogalmainak használatát kell mutassa JavaScript-ben (saját objektumok, metódusok létrehozása, öröklődés stb.).
3. Kirakó. Készítsünk kirakó (puzzle) játékot az alábbiak szerint:
   1. A játékhoz szükségünk lesz egy vagy több képre, melyek közül majd a felhasználó választhat, hogy melyikkel akar játszani. Minden kiválasztható képet képszerkesztő programmal daraboljunk fel n*m (n,m>=2) részre. Ha ezt nem tudjuk, hogy hogyan kell, akkor a darabok egymástól független képek is lehetnek, hiszen kötelezőként csak azt kell tudni, hogy ezeket hogyan lehet elhelyezni és mozgatni.
   2. Az első oldalon legyen részletesen leírva a játék menete (feladat, billentyűk funkciója stb.), továbbá jelenítsük meg a kirakható képeket és (alattuk, fölöttük, vagy melletük) azok neveit.
   3. (4 pont) A felhasználó több kép közül választhassa ki azt, hogy melyiket szeretné kirakni.
   4. (4 pont) A kiválasztott kép darabjai véletlenszerű sorrendben jelenjenek meg (például a képernyő bal felső sarkában).
   5. Kijelölünk továbbá a képernyő közepén egy n*m mezőt tartalmazó területet (azaz egy n*m-es táblázatot), a darabokat abba kell majd a felhasználónak áthuzogatni.
   6. A kirakó darabjait tetszőleges helyre lehessen húzni oly módon, hogy a darab fölött az egér bal gonbját lenyomjuk, majd az egeret lenyomott gommbal húzva a kép is az egérrel együtt mozog. Az egér gombjának felengedésekor a képet igazítsuk be az elhelyezéséhez legközelebbi üres helyre, akkor is, ha nem az a képdarab megfelelő helye (hiszen a felhasználótól túlzás lenne elvárni, hogy pixel pontosan helyezze el a képet).
   7. (4 pont) Írassuk ki, hogy hány kép van a megfelelő helyén, és minden képelhelyezés után ezt az értéket frissítsük.
   8. A kirakó legalább egy darabját billentyűkkel is lehessen mozgatni, több darab esetén mindegyiket mozgatás előtt kijelölni (kiválasztani) és utána lerakni (4 pont).
   9. (4 pont) A játék megkezdésekor induljon el egy stopperóra, ennek működése a játék során folyamatosan látszódjon és a játék végén automatikusan álljon meg.
   10. (4 pont) A játék végét egy formázott szöveget tartalmazó kisméretű ablak jelezze, amely 5 másodperc múlva automatikusan bezárul.
4. (0-10 pont) További JavaScript ismeretek bemutatása (linkre alakítás esetén pontosítandó, szükség esetén akár felsorolással).
5. (0-20 pont) A megvalósítások minősége, rendszeressége, gondossága, design elemek betartása.
6. Videó feliratozása, min. 2 perc
7. Dramatizált elektronikus könyv készítése, legalább 3 szereplő, legalább 2 perc.

Közzétéve: 2019. 02.05.