CUPRINS
INTRODUCERE.................................................................................................................... 3 1. ACCESAREA JOCULUI ................................................................................................. 5 2. DESFĂȘURAREA JOCULUI ......................................................................................... 8 3. BARA DE MENIURI A JOCULUI .............................................................................29
2
INTRODUCERE
Calculatorul este utilizat de către cadrele didactice în procesul de predare-învăţare, el a devenit, astfel, indispensabil în educaţia modernă, fiind un mijloc modern de educaţie datorită virtuţilor foarte atractive pentru elevi, accesibilităţii pentru aceştia şi facilitării prezentării informaţiilor. Utilizarea calculatorului în educaţie are avantajul de a facilita trecerea de la acumularea pasivă de informaţii de către elevi la învăţarea prin descoperire, dezvoltându-şi în acest mod abilităţile şi strategiile cognitive pe care le vor folosi şi adapta în diverse alte situaţii. Acest fapt aduce o mare flexibilitate în învăţare şi la stimularea elevilor de a se implica în procesul educaţional şi de a deveni parteneri ai profesorului în cadrul clasei. Soft-ul educaţional poate reprezenta totodată şi un instrument cu ajutorul căruia elevul să înveţe prin explorare. Simulările utilizate în cadrul lecţiilor virtuale sunt de multe ori spectaculoase pentru elevi. Înţelegerea diferitelor procese şi fenomene este mult uşurată prin oferirea unui suport vizual elevilor, iar aceştia devin mult mai motivaţi să participe la lecţie şi să înveţe. Pentru a-i atrage pe tineri către şcoală se poate realiza o ambianţă care să înlocuiască, oarecum, pasiune lor pentru jocul pe calculator, adică putem decide ca pentru o anumită temă să utilizăm jocuri video în activitatea de predare-învăţare evaluare. Conceptul de inovare în acest proiect este definit ca o schimbare ce va fi introdusă în contextul educaţional, cu scopul de a îmbunătăţi livrarea curriculum-ului disciplinei Tehnologia informaţiei şi comunicaţiilor, performanţa şi satisfacţia percepută de principalii actori (studenţi, formatori şi angajatori). Se înţelege că inovarea se dezvoltă dinamic, iar proiectul construit va avea flexibilitate pentru a se asigura că produsele finale satisfac cererea percepută curent şi poate fi adaptată şi dezvoltată pentru a asigura durabilitatea.
3
Există beneficii datorită colaborării pe domeniile de interes convenite, nu în ultimul rând pentru că colegii vor înţelege contextul şi provocările pe care o astfel de inovaţie este în curs de implementare. Acest lucru este posibil datorită provocării cu care continuă să se confrunte sectorul tehnic în Europa: unităţile de învăţământ sunt încurajate să fie inovatoare, să se adapteze la mediul în schimbare în care lucrează, nu în ultimul rând ca urmare a ritmului rapid de schimbare a tehnologiei şi mediului social, care necesită imperios o astfel de flexibilitate. În acest sens a fost creat, în cadrul Proiectului ERASMUS+ 2014 KA2: Strategic Partnership: 2014-1-UK01-KA202-001658 cu titlul Vocational Training in Programming Skills Using a Game-based Approach: V-Game, un joc educațional care are rolul de a ajuta elevii de liceu, care au în curriculum-ul de la Tehnologia informației și comunicațiilor, să înțeleagă noțiunile necesare pentru crearea paginilor web, utilizînd HTML5, CSS și JAVA. Ghidul de mai jos cuprinde cele mai importante instrucțiuni legate de modul de accesare și utilizare a jocului pentru învățarea creării paginilor web, numit V-Game.
4
1. ACCESAREA JOCULUI Jocul poate fi accesat de pe orice calculator care are un sistem de operare Windows și conexiune internet. De asemenea, este necesar un browser de internet, preferabil Google Chrome. Adresa de internet a jocului este: http://www.pyvi.eu/v-game9.1/ Jocul V-Game se deschide cu pagina de înregistrare a utilizatorilor, așa cum se vede mai jos, în figura 1. Acestia pot fi: cadre didactice, elevi, sau oricare alt stakeholder care doreste să învețe noțiuni de bază pentru crearea paginilor web.
Figura 1. Pentru crearea contului, în vederea accesării jocului, se accesează Register și va apărea o nouă pagină (așa cum se vede în Figura 2) în care sunt solicitate numele, prenumele, adresa de e-mail, se poate selecta țara (va apărea o listă cu țările participante în proiect), se va tasta parola și reconfirmarea acesteia.
5
Apoi se solicită alegerea unui personaj (fată sau băiat), pe care utilizatorul trebuie să îl aleagă printr-un click de mouse. După ce au fost furnizate toate datele se acceseaza butonul Register for user.
Figura 2. Se introduc apoi adresa de e-mail și parola în pagina de început a jocului și se apasă butonul Login, realizând astfel logarea în joc, respectiv accesul la pagina principală. Va apărea mesajul „Welcome, please enter”, așa cum se vede în Figura 3 și se apasă butonul Welcome.
6
Figura 3. După acest mesaj apare interfața jocului V-Game, iar acesta se poate parcurge pas cu pas, nivel după nivel.
7
2. DESFĂȘURAREA JOCULUI
După ce au fost parcurși pașii anteriori, privind înregistrarea și logarea la joc, urmează parcurgerea, pas cu pas a celor cinci nivele ale jocului, specifice a cinci etape de învățare. Aceste cinci nivele sunt:
Nivelul 1 – HTML 5
Nivelul 2 – CSS
Nivelul 3 – JAVASCRIPT ÎNCEPĂTOR
Nivelul 4 – JAVASCRIPT INTERMEDIAR
Nivelul 3 – JAVASCRIPT AVANSAT
Figura 4. După cum se poate vedea din Figura 4, apare un ecran cu sigla jocului V-GAME și numărul de identificare al proiectului Erasmus+. Din acest moment, jocul începe cu primul nivel al jocului, respectiv Nivelul 1 – HTML 5.
8
Din Figura 5, se observă că jocul începe cu un dialog între profesor și elev, în care profesorul îi introduce în tematica jocului, respectiv le spune că vor învăța HTML, CSS și JavaScript.
Figura 5. Dialogul continuă cu prezentarea, din partea profesorului, a faptului că este vorba de un joc interactiv care le va dezvolta competențe și îi va învăța pe elevi să creeze propriile pagini web. Acest joc poate fi parcurs atat cu mai mulți utilizatori în același timp dar și de către un singur utilizator. De asemenea, profesorul le prezintă faptul că trebuie să parcurgă, până la finalul jocului, cinci nivele, în care aceștia vor învăța despre:
HTML 5 – Nivelul 1
CSS – Nivelul 2
JAVASCRIPT ÎNCEPĂTOR – Nivelul 3
JAVASCRIPT INTERMEDIAR – Nivelul 4
JAVASCRIPT AVANSAT – Nivelul 3 Toate acestea sunt prezentate în Figura 6. 9
Figura 6. În Figura 7 se poate vedea un dialog între elevii care se gândesc că acest joc, care defapt este o lecție de programare pentru crearea paginilor web, poate să-i ajute la dezvoltarea personală și poate contribui la obținerea de beneficii financiare. Ei sunt entuziasmați și nerăbdători să vadă cum se parcurge acest joc.
Figura 7.
10
Tot ce trebuie pentru a crea pagini web, pentru cineva care nu are cunoștințe de bază în acest domeniu, este învățat prin V-Game descoperit de elevi. Entuziasmul lor este prezentat în figura 8.
Figura 8. Eleva este nerăbdătoare să parcurgă prima zi în care să învețe limbajul HTML. Cu acesta începe nivelul 1 al jocului V-Game (Figura 9).
Figura 9. 11
Figura 10. Primul nivel începe cu câteva noțiuni introductive despre limbajul HTML, așa cum este prezentat în Figura 10. Toate lecțiile sunt prezentate sub formă de filmulețe, care pot fi oprite la un anumit moment al prezentării.
Figura 11.
12
Jocul continuă cu un minitest care utilizeaza două din noțiunile prezentate anterior. Elevii trebuie sa completeze spațiile libere cu raspunsurile corecte. (Figura 11) Pentru fiecare răspuns corect, la apăsarea butonului Next, elevul primește puncte și trece la lectia urmatoare. În Figura 12 este prezentat modul de completare al spațiilor libere.
Figura 12. Elevul poate să revină la test dacă apasă butonul Back din bara de meniuri și poate relua testul sau poate apăsa butonul Hint și va apărea mesajul din Figura 13.
Figura 13. 13
După ce se apasă butonul Next (dacă am terminat testul) sau Skip (în cazul în care nu se dorește completarea testului), va apărea mesajul în care sunt precizate punctele și monedele acumulate și răspunsurile corecte (Figura 14). Aceste răspunsuri au rolul de a fixa cunoștințele acumulate până în prezent. Pentru lecția următoare se apasă butonul Next.
Figura 14. Jocul continuă cu prezentarea câtorva taguri esențiale pentru limbajul HTML, așa cum se poate abserva în Figura 15, precum și modul de ordonare al acestora în crearea unui program HTML. Sunt prezentate în filmuleț dar și sub ecran tagurile HTML, HEAD, TITLE și BODY, cu specificații privind utilizarea acestora în limbajul de programare. Pentru a merge mai departe se acționează butonul Next, iar daca vrem să ne întoarcem la informațiile anterioare se acționează butonul Back.
14
Figura 15. Pasul următor, așa cum se vede în Figura 16, este din nou un minitest în care se solicită ordonarea tagurilor învățate anterior. Acestea se pot ordona prin efectul „drag and drop”, adică cu tasta stangă a mouse-ului apăsată se mută un buton mai sus sau mai jos și se eliberează tasta. La fel se procedează cu toate butoanele până se consideră că este corect. Se apasă butonul Next pentru a vedea rezultatul acțiunii.
Figura 16. 15
Dacă este greșit va apărea mesajul din Figura 17, iar în acest caz există două posibilități și anume să se reia textul apăsând butonul Next sau să se treacă peste acest test cu ajutorul butonului Skip, în ultimul caz nu se pot acumula puncte sau monede.
Figura 17. Lecția următoare se referă la tagul Paragraph și modul de utilizare a acestuia în program. (Figura 18)
Figura 18. 16
Această lecție se finalizează cu două miniteste. Primul minitest (Figura 19) care are două întrebări cu patru variante de răspuns, una singură fiind varianta corectă, la se poate se poate răspunde alegând una din variante cu click de mouse. Dacă se acționează butonul Skip se poate trece la lecția următoare fără să se parcurgă testul.
Figura 19. Dacă se acționează butonul Next va apărea mesajul care afișează punctele acumulate precum și răspunsurile corecte, așa cum se poate vedea în Figura 20.
Figura 20. 17
Al doilea minitest se referă la toate noțiunile învățate până acum, iar în Figura 21 este prezentat modul în care se completează aceste teste cu variante de răspuns multiple.
Figura 21. Așa cum se poate vedea în Figura 22, dacă se acționează butonul Next va apărea mesajul care afișează punctele acumulate precum și răspunsurile corecte, la fel ca și la testele anterioare.
Figura 22. 18
Pe măsură ce se parcurge jocul, din când în când, apar elevii cu dialoguri privind modul în care s-au simțit învățând HTML. Din Figura 23 se poate observa și progresul privind lecțiile parcurse, respectiv numărul de puncte acumulate, pe ecranul din dreapta jos și numărul de monede, pe ecranul din stânga jos. Acestea sunt egale ca număr. Monedele pot fi utilizate pentru cumpărarea de haine pentru schimbarea ținutei fetei sau băiatului ales, așa cum se va putea vedea ceva mai târziu.
Figura 23. În lecția următoare este prezentat două noi tag-uri din limbajul de programare HTML și anume br pentru crearea unei linii libere in cadrul unui text și hr pentru trasarea unei linii orizontale. (Figura 24) Este prezentat și modul de ordonare al acestora în programul HTML.
19
Figura 24. După fiecare lecție se parcurge un test care are răspunsurile prezentate într-un cadran verde și unde se specifică numărul de puncte acumulate la fiecare test, așa cum se vede în Figura 25.
Figura 25. În Figura 26 se prezintă un nou dialog între elevi privind lecțiile parcurse. 20
Figura 26. Pas cu pas, lecțiile sunt prezentate succesiv, asfel încât, de la cele mai simple taguri până la cele mai complexe, acestea sunt parcurse de elevi. Se observă în bara de progres că nivelul 1 a fost parcurs în proporție de 67%. În Figura 27 deja elevul învață cum să facă un hyperlink la o fotografie, de exemplu, cu referințe la o pagină web.
Figura 27. 21
Elevii se apropie de finalul nivelului 1, cu instrucțiuni tot mai complexe (Figura 28), instrucțiuni cu privire la tipul de html utilizat pentru scrierea programului, astfel încât să poată fi recunoscut de browser.
Figura 28. În Figura 29 este prezentat modul în care elevul este informat cu privire la finalizarea nivelului parcurs. Un astfel de mesaj apare după fiecare nivel parcurs.
Figura 29. 22
Din acest moment începe nivelul 2, parcurgerea programului CSS (Cascading Style Sheets). Nivelul 2, așa cum am fost deja obișnuiți, începe cu un dialog între elevi, care cred că acesta este mai dificil. (Figura 30)
Figura 30. Nivelul 2 începe cu câteva noțiuni introductive despre ceea ce înseamnă CSS pentru crearea paginilor web, așa cum este prezentat în Figura 31.
Figura 31. 23
În figura 32 se prezintă noțiuni privind stilurile în limbajul CSS, este vorba despre embedded style.
Figura 32. În prezentarea următoare (Figura 33), este evidențiat modul în care sunt introduse în programul paginii web creat a stilului internal style.
Figura 33. 24
În Figura 34 următoare este introdus stilul external style într-un program web creat.
Figura 34. Un alt element din programul CSS sunt selectorii, unul dintre ei fiind prezentat în figura de mai jos (Figura 35).
Figura 35.
25
Figura 36 prezintă modul de grupare a selectorilor de același tip.
Figura 36. În crearea paginilor web sunt utilizate fonturi, acestea fiind definite prin anumite proprietăți așa um sunt prezentate în figura 37.
Figura 37.
26
În figura 38 este prezentat modul de creare a unei casete text cu anumite specificații.
Figura 38. Spre finalul nivelului 2 elevii pot aranja și alinia casetele dintr-o pagină web (Figura 39) și vor parcurge un text care, la fel ca și la nivelul anterior, arată numărul de puncte obținut (Figura 40).
Figura 39.
27
Figura 40. După testul final se finalizează Nivelul 2 și va începe Nivelul 3. Modul de parcurgere a nivelelor următoare este similar celor prezentate anterior. Fiecare dintre acestea au în conținut filmulețe de prezentare a conținuturilor teoretice precum și miniteste dupa lecțiile parcurse și teste ample și aplicații la final de nivel. Și elevii se întâlnesc cu profesorul sau au conversații între ei cu privire la conținuturile acestor cinci nivele ale jocului.
28
3. BARA DE MENIURI A JOCULUI
Jocul V-Game prezentat, fiind creat ca o pagină web, conține o bară de meniuri care va fi prezentată în imaginile care urmează. Butonul de Start din bara de meniuri pornește jocul sau pornește de acolo de unde utilizatorul s-a oprit. Așa cum a fost prezentat și anterior, jocul începe cu prezentarea logo-ului proiectului, respectiv al jocului V-Game (Figura 41) și continuă cu Nivelul 1 al acestuia.
Figura 41.
29
Butonul Statistic prezintă statistica privind utilizatorii care au accesat acest joc precum și numărul de puncte acumulat de către aceștia. Este prezentat sub forma unui tabel care conține numele utilizatorului, numărul de puncte acumulat și țara de proveniență a utilizatorului. Acest meniu poate fi accesat oricând în timpul parcurgerii jocului.
Figura 42. Cu un click de mouse se poate selecta o anumită persoană, iar cu ajutorul săgeților stânga-dreapta se poate trece de la o pagină la alta, iar cu săgeata orientată în sus se revine la prima pagină de utilizatori. Acest lucru este prezentat în Figura 43, unde se observă că persoana selectată este evidențiată în albastru.
30
Figura 43. Dacă se dorește la un moment dat să se revină la o pagină anterioară se poate realiza acest lucru cu ajutorul butonului Back din bara de meniuri. În acest caz va apărea mesajul din Figura 44, care menționează faptul că a fost făcută o mișcare înapoi și că se poate continua acționând butonul Start.
Figura 44. 31
Cu ajutorul butonului Groups din bara de meniuri, din Figura 45, se poate crea un grup de utilizatori.
Figura 45. De exemplu, dacă un profesor dorește să utilizeze acest joc la clasă și dorește să vadă parcursul acestuia de către elevii săi, poate să îi introducă acționând butonul Add. La finalizarea introducerii utilizatorilor va apărea mesajul de finalizare în chenarul verde, Figura 46. Astfel, profesorul, poate introduce câți utilizatori dorește și poate avea informații cu privire la numărul de puncte acumulat de către fiecare dintre aceștia, numărul de monede dobândite, acestea fiind egale cu numărul de puncte, nivelul la care a ajuns utilizatorul, precum și numărul de lecții parcurse.
32
Figura 46. Acționarea butonului Last level reset din bara de meniuri va produce revenirea la nivelul anterior și ștergerea tuturor punctelor și monedelor acumulate la nivelul șters. Acest nivel va porni de la început și va acumula din nou, pe măsura parcurgerii acestuia, puncte și monede.
Figura 47. 33
Butonul Shop din bara meniurilor, deschide o fereastră în care se află un magazin. Cu ajutorul monedelor acumulate, utilizatorul poate să cumpere diverse haine, atât pentru fete cât și pentru băieți, cu ajutorul cărora personajul ales își poate modifica aparența pe ecran, numărul monedelor scade în funcție de numărul de produse cumpărate. Dacă se apasă butonul Mystuff sunt arătate pe exran produsele achiziționate din magazin. (Figura 48)
Figura 48. 34
Un alt buton în bara de meniuri este Award board, cu ajutorul căruia se poate vedea câte nivele au fost parcurse, acestea fiind evidențiate prin medaliile V-GAME. Dacă se apasă butonul Print certificate se va putea salva o pagină web de unde se pot tipării certificatele de competențe. Aceste certificate pot fi tipărite după parcurgerea fiecărui nivel, putând demonstra competențele obținute la un anumit moment, pe ele apărând data tipăririi acestora și oferă informații privind nivelele parcurse, numărul de resetări ale fiecărui nivel, numărul de lecții parcurse, numărul de puncte obținute, nivelele rămase de parcurs. Acțiunea butonului Award board precum și modul în care arată certificatul tipărit sunt prezentate în Figurile 49 și 50.
Figura 49.
35
Figura 50. Un alt buton din bara de meniuri este butonul Help care deschide un submeniu, de unde se pot accesa, prin butonul Video, toate filmulețele video din joc pentru fiecare nivel în parte, utilizatorul putând parcurge aspectele teoretice ori de câte ori consideră că este necesar. (Figura 51)
Figura 51. 36
Prin butonul Help se poate accesa, prin butonul E-book, cartea electronică E-book, creată în acest proiect Erasmus+, în care sunt prezentate aspecte teoretice privind crearea paginilor web utilizând HTML 5, CSS și JAVASCRIPT. (Figura 52)
Figura 52. Tot prin butonul Help se poate accesa, prin butonul User manual, acest manual electronic, în care sunt descriși pașii prin care se poate utiliza acest joc V-Game. (Figura 53)
Figura 53. 37
Prin butonul Help se poate accesa, de asemenea, prin butonul About, pagina web oficială a proiectului V-Game – Vocational Training in Programming Skills Using a GameBased Approach, în care sunt prezentate obiectivele proiectului, partenerii și activitățile derulate în acest proiect. (Figura 54)
Figura 54.
38
Ultimul buton din bara de meniuri este butonul Logout, prin care utilizatorul se deconectează de la joc. (Figura 55) Revenirea se face prin logare cu adresa de e-mail și parola pe care le are fiecare utilizator (Figura 1).
Figura 55.
TUTUROR UTILIZATORILOR V-GAME LE DORIM MULT SUCCES!
39