A InfoWiki wikiből

A lap 2012. április 13., 14:37-kori változata

Vizsga

Egy megoldás egy zip file (mely tartalmazza a szükséges html, css, js, esetleg php fileokat is). A megoldások maximum annyi pontot érnek, amennyi a feladat mellett megjelölésre került. A 2-eshez szükséges pontszám 20 pont. Utána 5 pontonként van emelkedés. Így az 5-öshöz 35 pontot kell összegyűjteni. A megoldásokat el is kell tudni magyarázni. A "segítettek a megoldásban" a pontszámok megfelelő, 1-nél kisebb szorzójú kalkulációján alapul. Tehát egy 30 pontos megoldás, melyet nagyon nem értünk mi micsoda, nem tudunk hozzányúlni, és mások segítségével írtunk meg, az mondjuk 30*0.7 => 21 pontosnak számít.

A vizsgára hozni kell az egyes megoldásokat. A megoldásokat a saját nevünkre szóló alkönyvtárba fel kell másolni (zip file-ok), ahol a zip fileok nevei a feladat neveire hasonlít (pl. kepek_scroll.zip). A vizsgán az aktuális vizsgázó kicsomagolja az egyes .zip fileokat, betölti a böngészőbe. Közösen ellenőrízzük hogy működik-e a megoldás, majd a forráskódot nézzük át és értelmezzük.

TAB megvalósítása (1)

[5 pont] Készítsünk el egy olyan HTML lapot, amelyen az alábbi három "tab" fül található

• bemutatkozás
• elérhetőségek
• hírek

Az egyes tab fülek tartalma legyen egy kis kép és rövid kis szöveg (minden tartalom más-más legyen). Lehessen váltani a tab fülekre kattintva a tartalmak között. A megvalósítás saját JavaScript megoldás legyen.

TAB megvalósítása (2)

[8 pont] Készítsünk el egy olyan HTML lapot, amelyen az alábbi három "tab" fül található

• reklámok
• társoldalak
• büszkeségeink

Az egyes tab fülek tartalma legyen egy kis kép és rövid kis szöveg (minden tartalom más-más legyen). Lehessen váltani a tab fülekre kattintva a tartalmak között. A megvalósításhoz jQuery TABS -t használjunk. A weboldal első tartalma (reklámok) a html letöltődése után azonnal kerüljön be, de a további tab fülek tartalma csak akkor töltődjön le, ha rákattintanak (content via ajax). A tab fülek tartalma ezért (csak a belső tartalom) külön pici html fileokban tárolódjon a szerveren.

Help panel

[5 pont] Készítsünk olyan beviteli formot, amely függőlegesen két részre tagolható. Bal oldali részen vannak a tényleges beviteli mezők (név, email, város, lakcím, születési év, stb), jobb oldalon egy segítő leírás van. Ezen jobb oldalon mindig az aktuális beviteli mezőhöz tartozó szöveges leírás olvasható (mit kell oda beírni, miért kell beírni, mire kell ügyelni beírás közben, mik a szabályok arra a mezőre vonatkozóan stb).

Dátum bekérés

[6 pont] Készítsünk beviteli formot, amely két dátumot kér be. A dátumokat a YYYY.MM.DD formában kell bevinni. Mindkét dátum mellé a bevitel végén (mező elhagyás) írjuk ki a beírt dátumhoz tartozó hónap nevét, és hogy a dátum a héten belüli melyik napra esik (pl. kedd). A két dátum között maximum 10 nap különbség lehet, az első dátumnak kell a kisebbnek lennie. Mindkét dátumnak munkanapra kell esnie.

F1 segédablak

[10 pont] Készítsünk beviteli formot, melybe más mezők mellett a lakóhelyünk megyéjének nevét, és megyeszékhelyének nevét is be kell írni (pl "heves megye" esetén "eger"). A bevitel során a megye input mező mellé helyezzünk el "help" feliratú gombot, melyre kattintva külön ablak nyílik meg, felsorolva egymás alatt a 19 megye és megyeszékhely nevét. A megfelelő megye nevére kattintva ez a külön ablak bezáródik, de előtte beíródik a form két mezőjébe a kiválasztott érték.

Reguláris kifejezések

[6 pont] Reguláris kifejezések segítségével ellenőrízzük le, hogy a beviteli formunkon

• a születési év valóban pozitív egész szám-e
• az email cím valóban email cím formátumú-e
• a "honlap" részre valóban web url-t írtak-e be

Regisztrációs ablak

[8 pont] Készítsünk regisztrációs ablakot, melyben a választott login nevet AJAX-os JSON script ellenőrzi le, hogy szabad-e. Amennyiben szabad, úgy a beviteli mező mögötti zöld pipa, különben egy piros felkiáltójel jelöli meg. A feladat megoldhato jQuery-vel és saját AJAX rutinokkal is.

Beviteli kiegészítés

[8 pont] A beviteli formon a "legközelebbi nagyváros" rovatba egy nagyváros, pl. megyeszékhely nevét kell írni. A gépelés során adjunk gépelési segítséget (autocomplete), amennyiben pl. már begépelte hogy "mi" akkor kínáljuk fel neki a "miskolc" lehetőséget. Amennyiben legalább 2 betűt begépelt, akkor kell az aktuális input mező értéket ("mi") elküldeni a szervernek AJAX-al, aki visszaküldi a lehetséges kiegészítéseket (akár adatbázisból kiválasztva select-el a szóba jöhető városok neveit). A kommunikáció JSON-el működjön. A megoldásnak nem kell feltétlenül sql adatbázison alapulni, néhány betűre működjön akár "if"-ek segítségével is. A megoldáshoz használható saját AJAX megoldás, és jQuery is.

Sok file upload

[14 pont] A beviteli formunkra helyezzünk el file upload mezőt. Amennyiben kitöltik a file upload mezőt, úgy lehessen lenyomni egy "add" feliratú gombot. Ekkor egy új file upload mező jelenjen meg. Igy maximum 10 file upload mezőt lehessen felrakni a formra. Természetesen submit-kor akár mind a 10 file upload feltöltődjön (érdemes ekkor kis méretű fileokat kiválasztani, mivel a fileok tartalma ténylegesen feltöltésre kerül). Azt is oldjuk meg, hogy amennyiben valamelyik file upload mezőt kitöltöttük, de meggondoltuk magunk, és mégsem akarjuk feltölteni a filet, akkor az adott file upload melletti "töröl" gombra kattintva azt a file upload mezőt ki lehessen törölni a formról.

Környezetérzékeny form

[7 pont] Amennyiben a regisztráció során egyszerűsített vagy teljes közül választanánk, a megfelelő mezőkből épüljön fel a form. A megfelelő form a szerverről töltődjön le a kiválasztás után AJAX-osan. A megoldáshoz használható saját AJAX megoldás, és jQuery is.

Listbox-ok közötti átrakás

[16 pont] Egy form-on helyezzünk el egymás mellett két listbox-t. Az egyik (bal oldali) legyen feltöltve, pl együttesek neveivel. A jobb oldali induláskor legyen üres. Mindkét listbox-ban lehessen egyszerre több elemet is kiválasztani (multiselect). A két listbox között helyezzünk el 4 gombot:

• egy elem átrak balról jobbra (ekkor ha bal oldalon kiválasztunk egy item-t, és lenyomjuk ezt a gombot, akkor az item balról törlődjön, és jelenjen meg jobb oldalon).
• minden kiválasztott elem átrak balról jobbra (ugyanez csak több elemre)
• egy elem visszarak jobbról balra (értelemszerűen)
• minden kiválasztott elem átrak jobbról balra (értelemszerűen)

A bal oldali listbox alatt legyen még három gomb:

• minden elem kiválasztása (értelemszerűen)
• kiválasztások törlése (egyik elem se legyen kiválasztva)
• kiválasztás invertálása (amik ki vannak választva azok ne legyenek, és fordítva)

Listboxba elemek felvétele és törlése

[12 pont] Helyezzünk el egy formon egy checkboxot, egy textbox-t (input type text), és alatt egy listboxot. A listbox induláskor legyen üres. A textboxba adatokat (pl számok, neve) írhatunk be. A checkbox azt szabályozza, hogy a lista elemei egyediek kell legyenek-e vagy sem. A textbox mellett legyen "felvesz" gomb. Ezen gomb lenyomásakor a textboxba beírt érték kerüljön be a listbox-ba. Amennyiben a checkbox épp be van pipálva (egyedi értékek), úgy csak akkor kerülhet be az érték a listboxba, ha ott még ez az érték nem szerepelt volna. Chekcbox nem kipipált esetben mindenképp kerüljön be a listboxba az érték.

A listbox alatt legyen egy "törlés" gomb, melyre kattintva a listboxba kiválasztott elem törlődjön ki a listboxból. Legyen ezen felül szintén alatta egy "mindent töröl" gomb, melyre kattintva a listbox minden eleme törlődjön ki.

Képek cserélve

[6 pont] Egy div-ben helyezzünk el legalább egy img elemet. Ez az elem a weblapunk banner képét fogja tartalmazni. A weblapnak azonban több banner képe is van (legalább három). Oldjuk meg, hogy a banner képek cserélődjenek 5 másodpercenként az oldal újratöltődése nélkül is. A megoldáshoz használható jQuery is.

Képek scroll

[8 pont] A feladat ugyanaz mint a "képek cserélve", de itt a banner képek úgy cserélődjenek, hogy miközben az aktuális bannerkép kiúszik balra, a következő beússzon jobbról (mint a diavetítős képek esetén). Az utolsó kép után újra az első következzen. A megoldáshoz használható jQuery is. Konkrétan 3 képre: [8 pont], tetszőlegesen sok képre: [10 pont].