Ta igra ne vsebuje prav veliko interaktivnih elementov, saj imamo nadzor le nad navigacijo (vsebuje navigacijska gumba naprej in nazaj).
11 Vedež: slovensko podjetje DZS ponuja spletno okolje, preko katerega se učenci lahko učijo spoznavanja okolja. Namenjeno je učencem 1., 2. in 3. razreda osnovne šole (Slika 5) [19].
Slika 5: Vedež
Ob začetku lahko izbiramo med različnimi sklopi. Vsak sklop vključuje različne tipe iger, filme in slike. Povsod imamo navigacijski gumb, ki nas vrne na začetek.
Igra vsebuje tudi zvočne posnetke oziroma govor.
Nauk: ta spletna stran ponuja interaktivna gradiva, s pomočjo katerih lahko učenec poglobi ali usvoji novo snov (Slika 6) [11].
Slika 6: Nauk
Ta gradiva ne temeljijo na igri, ampak so namenjena zgolj učenju. Vsebujejo pa nekaj interaktivnih elementov (premikanje povedi v ustrezne prostore in podobno).
12
7 Teorije učenja
Vse interaktivne izobraţevalne igre, ki smo jih spoznali v prejšnjem poglavju, vključujejo elemente posameznih teorij učenja. Preden začnemo izdelovati interaktivno računalniško igro, je dobro, da spoznamo različne teorije učenja in jih potem uporabimo v igri. Teorije učenja nam pomagajo razumeti proces učenja in s pomočjo le – teh lahko izdelamo igro, ki bo učencem razumljiva in bo prilagojena njihovemu kognitivnemu razvoju. Ogledali si bomo behaviorizem, konstruktivizem in kognitivizem.
7.1 Behaviorizem
7.1.1 Klasično pogojevanje
Ivan Petrovič Pavlov je bil ruski fiziolog, psiholog in zdravnik. Preučeval je, kako sta povezana neki draţljaj in reakcija. Če vzamemo primer psa: ko mu pokaţemo hrano, začne izločati slino. Če bomo vsakič, ko mu bomo pokazali hrano, pozvonili z zvoncem, se bo pes začel sliniti tudi takrat, ko ob zvonjenju zvonca ne bo prisotne hrane. Ta pojav imenujemo klasično pogojevanje. [7]
V poglavju, v katerem smo si ogledali nekaj interaktivnih izobraţevalnih iger, lahko najdemo tudi igro, ki je namenjena razumevanju klasičnega pogojevanja.
Igra se imenuje Pes gospoda Pavlova [13].
7.1.2 Operativno pogojevanje
Burrhus Frederic Skinner je bil ameriški behaviorist. Zanimalo ga je, kako okolje kontrolira vedenje. Njegova teorija pravi, da če nekemu vedenju sledi pozitivna posledica oziroma nagrada, potem se to vedenje ojača. V kolikor pa sledi negativna posledica oziroma kazen, pa se to vedenje zmanjša. [4]
Torej, če učenca ob reševanju vaj nagradimo s točkami in pohvalo, bo njegovo vedenje ojačano. Če pa bo kaznovan z negativnimi točkami in zaradi tega ne bo mogel rešiti igre, pa se bo njegovo vedenje spremenilo.
7.2 Konstruktivizem
Pomembni predstavniki konstruktivizma so bili Vygotsky, Piaget in Bruner. Ta teorija poudarja, da učenec sam gradi svoje znanje. Vse znanje temelji na preteklih izkušnjah, ki smo jih dobili v nekem okolju. Pravijo, da ima vsaka oseba različno razumevanje in vsaka oseba drugače gradi svoje znanje.
13 Njihovo načelo je, da učitelj učencem nikoli ne sme neposredno podati znanja, ampak ga morajo učenci zgraditi sami. [17]
7.3 Kognitivizem
Zelo pomembna teorija na področju učenja pa je tudi kognitivizem. Ta teorija je nadomestila behaviorizem v šestdesetih letih prejšnjega stoletja. Kognitivizem pravi, da je človeški um kot črna škatla. Vsi procesi, kot so mišljenje, spomin, vedenje in reševanje problemov, morajo biti raziskani. Človeški um primerjajo z računalnikom, v katerega prihajajo informacije, nato jih predela in to vodi do nekaterih dejanj. [17]
7.3.1 Kognitivno razvojna teorija
Jean Piaget je bil švicarski psiholog, filozof in naravoslovec. Ukvarjal se je s človeškim psihološkim razvojem. S preučevanjem razvoja mišljenja otrok je razvoj mišljenja razdelil na naslednje stopnje:
senzomotorična stopnja,
predoperativna stopnja,
stopnja konkretno logičnega mišljenja,
stopnja formalno logičnega mišljenja.
Ker je naša igra namenjena učencem od 7. razreda dalje, smo se osredotočili na zadnji dve stopnji.
Stopnja konkretno logičnega mišljenja
V tem obdobju otrok ţe začne uporabljati miselne operacije, kot jih imenuje Piaget.
Ko otrok nekaj vidi ali sliši, lahko s tem manipulira. Vendar pa lahko otroci na tej stopnji uporabljajo miselne operacije le na konkretnih primerih. Niso zmoţni hipotetičnega razmišljanja. Torej je otrok zmoţen manipulirati le s podatki, ki so konkretni, resnični in si jih lahko predstavlja.
V naši igri smo to stopnjo uporabili na tak način, da smo uporabili konkretne, vsakdanje primere.
Stopnja formalno logičnega mišljenja
Na tej stopnji pa lahko otrok ţe razmišlja hipotetično, abstraktno in sistematično rešuje probleme. Za otroka na tej stopnji je značilno razmišljanje o različnih moţnostih, postavljanje domnev in eksperimentalno preverjanje hipotez s pomočjo deduktivnega sklepanja. [8]
14
Otrok na tej stopnji bo igro reševal laţje, saj si bo nekatere hipotetične primere laţje predstavljal, kot otrok na stopnji konkretno logičnega mišljenja.
15
8 Težavnost interaktivne igre
Ob začetku izdelovanja interaktivne izobraţevalne igre se nam je pojavilo vprašanje, kako zahtevna in na kakšni stopnji teţavnosti naj bo igra, da bo učence motivirala, da jim ne bo prelahka ali preteţka, saj bi v slednjih dveh primerih učenec izgubil motivacijo za igranje le – te.
V igri se prepleta zgodba kraljične, ki je ujeta v gradu. Naloga viteza in oprode je, da kraljično rešita z gradu. S tem smo ţeleli učenca motivirati, saj ima skozi celotno igro pred seboj nek problem oziroma izziv, ki ga mora uspešno rešiti.
Pri vajah učenec sproti dobiva povratno informacijo o doseţenih točkah in pravilnih odgovorih. V primeru, da mu ne bi podali pravilnih odgovorov, bi se lahko zgodilo, da bi učenec izgubil motivacijo, saj ne bi izvedel kaj je naredil narobe in kaj prav. Če ţeli učenec določen sklop vaj reševati še enkrat, se mu ob vsakem ponovnem poskusu reševanja točke postavijo na nič in tako jih mora učenec ponovno zbirati.
Učenec ima v uvodni sobi tudi moţnost obiska trgovine. V njej lahko kupi elemente, s pomočjo katerih lahko vitez in oproda zgradita lestev in rešita kraljično. V kolikor je učenec pri vajah dosegel premalo točk, ne bo mogel kupiti vseh elementov in tako ne bo mogel uspešno dokončati igre. Njegova naloga je, da ponovno reši vaje, pri katerih je dosegel malo točk. V kolikor pa je dosegel zadostno število točk, lahko nakupi vse potrebne elemente ter vitez in oproda lahko rešita kraljično.
Učna snov je razloţena sistematično in podkrepljena s konkretnimi primeri. Ob koncu učne snovi so vaje, s pomočjo katerih lahko učenec preveri, ali je prebrano snov razumel. Če ţeli, si lahko snov prebere večkrat.
16
9 Izdelava interaktivne igre
9.1 Specifikacija
Interaktivna igra je namenjena vsem učencem 7. razreda, dijakom srednjih šol in ostalim, ki ţelijo pridobiti ali poglobiti znanje o logičnih operatorjih.
Igra zajema dva večja sklopa. V prvem so predstavljeni vsi logični operatorji (negacija, konjunkcija, disjunkcija, implikacija, ekvivalenca, xor, nand, nor) in pa prioritetni vrstni red operatorjev. V drugem sklopu pa so vaje namenjene samostojnemu reševanju.
Igro lahko igra tako uporabnik, ki ţe ima predznanje o logičnih operatorjih, kot tudi uporabnik, ki tega predznanja še nima. Na začetku igre je pregleden test, s pomočjo katerega preverimo, ali ima uporabnik ţe kaj znanja na področju logičnih operatorjev.
Uporabnik zna po končanem delu z aplikacijo:
- našteti logične operatorje,
- pozna pravilnostne tabele za logične operatorje,
- pozna veznike, ki predstavljajo posamezen logičen operator (konjunkcija – in, disjunkcija – ali,…),
- pozna prioritetni vrstni red logičnih operatorjev.
Grafična podoba je atraktivna in zanimiva za uporabnika. Vsebina je jasno strukturirana, primerno barvno usklajena in primerna za različne učne stile.
17
Ţeleli smo narediti igro, ki bo učence motivirala in jim bila v izziv. To smo dosegli tako, da smo v igro vpletli zgodbo kraljične, ki je ujeta v gradu. Učenec mora s pomočjo prisluţenih točk pri vajah v trgovini nakupiti potrebne elemente, s pomočjo katerih lahko vitez in oproda zgradita lestev in rešita kraljično.
Učno snov smo ţeleli narediti bolj zabavno tako, da smo vključili nekaj zabavnih slik, ki so se povezovale z učno snovjo. Pri reševanju vaj smo ţeleli, da učenec
18
9.2 Izdelava igre
Igre smo se lotili tako, da smo najprej narisali vse grafične elemente, ki smo jih potrebovali v igri. Potem pa je sledilo programiranje v programskem jeziku Action Script 3.
9.2.1 Grafični elementi
Objekte smo narisali s pomočjo programa Adobe Illustrator.
9.2.1.1 Program Adobe Illustrator
Program Adobe Illustrator je profesionalni grafični računalniški program za risanje vektorskih grafik (Slika 8).
Slika 8: Adobe Illustrator
19 Na levi strani zaslona so nam na voljo najrazličnejša orodja za risanje, oblikovanje ter kreiranje objektov (Slika 9). Najbolj pogosto se uporablja orodje za risanje krivulj, ravnih linij ter čopič, ki je namenjen risanju poljubnih linij.
Slika 9: Orodja
Za risanje objektov smo si pomagali s plastmi, ki jih najdemo v spodnjem desnem delu zaslona (Slika 10).
Slika 10: Sloji
Ko nek del objekta narišemo, vstavimo novo plast in nadaljujemo z risanjem objekta. Posamezne plasti lahko poimenujemo, zaklenemo (da je ne moremo spreminjati) ali odstranjujemo. Gumbe za te operacije najdemo v spodnjem desnem delu zaslona (Slika 10).
20
9.2.1.2 Objekti
Objekti, ki nastopajo v igri, so bili narisani s pomočjo programa Adobe Illustrator.
Narisali smo jih tako, da smo vsak sklop oziroma del objekta narisali na svojo plast. Oglejmo si primer kraljične.
Tu je ena plast zajemala obleko, druga lase, tretja obroč, četrta roke itn. (Slika 11).
Slika 11: Sloji kraljične
Ker je bil vsak del kraljične narisan na svoji plasti, smo jih lahko kasneje poljubno premikali eno nad drugo. Ko je bila slika v celoti zgrajena, smo plasti zdruţili in dobili objekt kraljične. Objekt smo potem shranili in ga uporabili v igri.
Spodaj imamo nekaj primerov takih objektov (Slika 12, Slika 13, Slika 14, Slika 15).
Slika 12: Kraljična Slika 13: Vitez Slika 14: Cvetlica Slika 15: Lestev
21 9.2.2 Programska koda
9.2.2.1 Program Adobe Flash Professional CS5
Igra je bila izdelana s pomočjo računalniškega programa Adobe Flash Professional. Ta program se uporablja za izdelovanje animacij ter tako omogoči kreiranje interaktivne spletne strani. Animiramo lahko tudi besedilo in objekte ali pa v animacije dodajamo glasbo ter video posnetke. V tem programu se programira s pomočjo objektnega jezika ActionScript.
Če si ţelimo ogledati izdelke, narejene v programu Adobe Flash, potrebujemo Adobe Flash Player, ki je brezplačen.
9.2.2.2 Opis programa
Program Adobe Flash Professional (v nadaljevanju Flash) je razdeljen na 3 sklope (Slika 16). V osrednjem delu imamo glavno okno, v katerem urejamo našo animacijo. V spodnjem delu imamo časovni trak, s pomočjo katerega ustvarjamo animacije. V desnem delu pa najdemo najrazličnejša orodja (čopič, polnilo, vstavljanje besedila) ter knjiţnico vseh objektov, ki smo jih v danem oknu ustvarili.
Slika 16: Adobe Flash Professional
22
9.2.3 Uvodna soba
Najprej smo kreirali uvodno sobo, ki je izhodišče za vse nadaljnje sobe (Slika 17). V programu Adobe Illustrator smo pred tem narisali vse objekte, ki jih potrebujemo za izgradnjo te sobe. Ozadje smo narisali s pomočjo orodja za risanje krivulj, drevesa pa s pomočjo orodja Deco Tool. Potem smo dodali novo plast, na katero smo dodali vse ostale objekte (šola, trgovina, grad, vitez, oproda), ki smo jih uvozili s pomočjo menijskega ukaza Uvozi v knjiţnico (ang. Import to Library).
Slika 17: Osnovna soba
Vse uvoţene objekte smo pretvorili v simbole. To smo storili tako, da smo izbrali posamezen objekt ter pritisnili funkcijsko tipko F8. V pogovornem oknu, ki se je odprlo, smo morali določiti ime objekta. To ime nam omogoča, da lahko do tega objekta dostopamo preko kode (npr. šoli smo dali ime sola) (Slika 18).
23
Slika 18: Pretvorba v simbol
Tako smo storili za vse objekte, ki smo jih potrebovali v kodi.
Potem pa smo začeli s pisanjem programske kode. Vso programsko kodo smo pisali v svoji plasti z imenom koda (Slika 19).
Slika 19: Plasti
Do kode smo dostopali tako, da smo pritisnili funkcijsko tipko F9.
24
Oglejmo si primer objekta šole: v programski kodi je bilo najprej potrebno določiti, da se ob kliku na objekt šole, vitez začne premikati. To smo storili s spodnjo kodo.
Ko pa je vitez prišel do drugega okvirja (ang. frame), se je izvedla naslednja koda.
Naloţila se je datoteka v_soli.swf. V tej datoteki pa je bila narisana notranjost šole, v kateri lahko učenec izbira med vajami in učilnico.
Podobno kodo smo uporabili tudi za trgovino in grad.
function vstopi_sola(evt:MouseEvent){
vitez.gotoAndPlay(2);
oblacek1.alpha=0;
oblacek2.alpha=0;
}
function pojdi_sola(){
myLC.send("connectionName", "nalozi", "v_soli.swf");
}
25 9.2.4 Test
Slika 20: Test
Ob začetku igre smo naredili test, ki nam omogoča, da preverimo, koliko znanja je učenec ţe usvojil in mu na podlagi njegovih odgovorov omogočimo dostop do reševanja vaj. Najprej smo uvozili vse grafične elemente, ki jih potrebujemo v testu ter dodali potrebno besedilo in gumbe. S klikom na gumb Začni se je naloţila datoteka s prvim vprašanjem. To smo storili tako, da smo v kodi zapisali, naj se ob kliku na ta gumb odpre datoteka s prvim vprašanjem.
S kodo addEventListener lahko določimo, da se ob kliku (MouseEvent.Click) na gumb Začni izvede funkcija pojdi. V funkciji pojdi pa smo zagnali datoteko test1.swf, v kateri je shranjeno prvo vprašanje.
zacni.addEventListener(MouseEvent.CLICK, pojdi);
function pojdi(evt:MouseEvent){
myLC.send("connectionName", "nalozi", "test1.swf");
}
26
V nadaljevanju testa so naloge, ki preverjajo znanje o vseh operatorjih. Odgovore smo shranjevali v spremenljivke za vsako vprašanje posebej.
Spodaj vidimo primer shranjevanja odgovora prvega vprašanja v spremenljivko test1. Odgovor učenca je bil shranjen v spremenljivko rezultat.
Ob koncu testa smo preverili, ali je učenec na posamezno vprašanje odgovoril pravilno. Oglejmo si primer. Če je učenec na vsa vprašanja, ki so bila povezana z operatorjem konjunkcije, odgovoril pravilno, je lahko v sobi z vajami začel z reševanjem vaj iz konjunkcije. V kolikor na vprašanja ni odgovoril pravilno, vaj ni mogel reševati. Z reševanjem vaj je lahko pričel šele zatem, ko si je v učilnici prebral snov konjunkcije.
Ob koncu je učenec dobil še povratno informacijo o reševanju testa (Slika 21).
var mySharedObject: SharedObject;
mySharedObject=SharedObject.getLocal("test1","/");
mySharedObject.clear();
mySharedObject.data.score=rezultat;
mySharedObject.flush();
27
Slika 21: Rezultati testa
Po rešenem testu se igra nadaljuje v uvodni sobi. Tam lahko učenec izbira med tremi različnimi sobami: trgovina, grad in šola. Vsaka izmed sob ima svojo funkcijo: v šoli se učenec nauči snov in reši vaje, v trgovini lahko nakupi potrebne elemente za izgradnjo lestve, v gradu pa lahko s pomočjo viteza in oprode reši kraljično.
9.2.4.1 Šola
Šolo smo razdelili na dva sklopa, ki smo ju ponazorili z vrati (Slika 22). Prva vrata so namenjena reševanju vaj in posledično zbiranju točk, druga vrata pa učenju logike.
Slika 22: V šoli
28
V učilnici si učenec lahko prebere snov za naslednje operatorje: negacija, konjunkcija, disjunkcija, implikacija, ekvivalenca, xor, nand, nor in pa prioritetni vrstni red operatorjev (Slika 23). V zgornjem desnem kotu se nahaja legenda. V kolikor učenec nek sklop prebere do konca, se gumb obarva zeleno (tako ima stalen nadzor nad tem, koliko snovi mora še prebrati oz. koliko snovi je ţe prebral).
Slika 23: Učilnica
Vsak operator ima svoj gumb, s katerim lahko učenec poljubno izbere snov, ki bi jo rad prebral. S tem smo mu ponudili moţnost izbire snovi in ga skušali motivirati. Če bi učencu določili katero snov mora najprej prebrati, bi najverjetneje njegovo motiviranost za učenje izgubili.
29 Oglejmo si primer učne sobe za operator ekvivalence.
Slika 24: Učilnica - ekvivalenca
Najprej operator predstavimo na konkretnem primeru s pomočjo besedne zveze, ki ga določa (v našem primeru je to 'če in samo če') (Slika 24) . Zatem sledijo primeri, v katerih nastopa operator. Tu smo dodali slikovne primere, ki učno snov popestrijo (Slika 25).
Slika 25: Slikovni primer
Snov je razloţena sistematično in na konkretnih primerih tako, da jo učenec laţje razume.
30
Sledi ponazoritev operatorja s simbolom in njegova pravilnostna tabela. Ker smo ţeleli, da bi učenec razumel, kako je sestavljena pravilnostna tabela, smo mu ponudili še interaktivno tabelo, ki mu omogoča, da s premikanjem drsnika ugotovi, kdaj je posamezna izjava resnična oziroma neresnična (Slika 26).
Slika 26: Pravilnostna tabela
Ob koncu mora učenec še dopolniti pravilnostno tabelo. V primeru, da je ne dopolni pravilno, mora ponovno rešiti nalogo. Šele ko jo uspešno dopolni, lahko nadaljuje z igro.
Pri vsakem posameznem operatorju smo v učno sobo dodali meni (Slika 27) in tri navigacijske gumbe (Slika 28), s pomočjo katerih se lahko premika po učni vsebini. Meni mu ponuja moţnost, da se vrne na del snovi, ki je ni razumel oziroma jo ţeli prebrati ponovno.
Slika 28: Navigacijski gumbi Slika 27: Meni
31 Oglejmo si še sobo z vajami, v katero smo vključili viteza. V zgornjem desnem kotu se podobno kot v učilnici nahaja legenda, ki prikazuje kakšen gumb se lahko pojavi. Če je gumb sive barve pomeni, da si mora učenec najprej prebrati učno snov in šele kasneje bo lahko reševal vaje. V kolikor pa je gumb zelene barve, lahko učenec prične z reševanjem vaj. Velikokrat se namreč zgodi, da se učencem v interaktivnih izobraţevalnih igrah učne snovi ne da prebrati. Učenci takoj pričnejo z reševanjem vaj, toda ker tam ne doseţejo zadostno število točk, igre ne morejo uspešno dokončati in tako izgubijo motivacijo za učenje. Zato smo jih v tej igri motivirali tako, da mora učenec pred reševanjem vaj prebrati učno snov.
Vsak logični operator ima svoj gumb (Slika 29). S klikom na puščico poleg operatorja, se učencu odprejo vaje za reševanje. Na gumbe smo dodali tudi izpis rezultata, ki ga je učenec dosegel pri reševanju vaj. Tako lahko učenec spremlja, katerih vaj ni rešil dobro. Programsko kodo za izpis doseţenih točk smo zgradili tako, da smo v zadnji sobi z vajami shranili točke v določeno spremenljivko in jo v tej sobi prebrali ter izpisali.
Slika 29: Vaje
32
V zgornjem levem delu zaslona smo učencu ponudili moţnost, da si ogleda, koliko točk je dosegel pri reševanju posameznega sklopa vaj ter koliko točk je moţno doseči pri posameznem sklopu (Slika 30).
Slika 30: Končni rezultat
Če učenec kasneje ugotovi, da je dosegel premalo točk in da igre ne more uspešno dokončati, lahko izbrane sklope vaj ponovno rešuje. Točke, ki jih je dosegel pri prejšnjem reševanju vaj, se ne ohranijo (zbirati jih mora ponovno).
Vaje smo sestavili tako, da se mu v primeru napačnega odgovora točke odštejejo. S tem smo ţeleli učence motivirati ter preprečiti naključno izbiranje pravilnih odgovorov.
33 Oglejmo si primer vaje za operator konjunkcije (Slika 31). Učencu je podana slika, na podlagi katere mora izbrati resnične izjave. Gumb Potrdi se mu pojavi šele takrat, ko izbere najmanj eno izjavo.
Slika 31: Vaje za operator konjunkcije
34
Ko izbere resnične izjave in klikne na gumb Potrdi, dobi povratno informacijo o tem, kateri odgovori so pravilni in kateri napačni (Slika 32). S tem smo dosegli večjo interaktivnost v igri, hkrati pa učenec takoj izve, kaj je naredil narobe in kaj prav. V kolikor mu te povratne informacije ne bi podali, bi bil učenec postavljen pred kar teţko nalogo, saj nikoli ne bi izvedel, kateri odgovori so bili pravilni in kateri napačni. S tem bi učenec izgubil motivacijo za reševanje ostalih vaj.
Slika 32: Povratna informacija
35 9.2.4.2 Trgovina
V uvodni sobi je na voljo tudi trgovina. S klikom nanjo se prestavimo v njeno notranjost (Slika 33). Glavni namen trgovine je, da učenec lahko v njej kupi elemente, s pomočjo katerih lahko vitez in oproda zgradita lestev ter rešita kraljično. Da igra ni preveč enostavna, smo na police dali tudi elemente, ki jih ni potrebno kupiti za dokončanje igre. Seveda pa mora učenec sam ugotoviti, katere potrebuje in katerih ne.
Slika 33: Trgovina
Elemente lahko kupi s točkami, ki si jih je prisluţil pri reševanju vaj. Če pri vajah
Elemente lahko kupi s točkami, ki si jih je prisluţil pri reševanju vaj. Če pri vajah