DIPLOMSKO DELO ZSOLT PROŠIĆ

Transcription

1 UNIVERZA V LJUBLJANI PEDAGOŠKA FAKULTETA DIPLOMSKO DELO ZSOLT PROŠIĆ

2

3 UNIVERZA V LJUBLJANI PEDAGOŠKA FAKULTETA Študijski program: Matematika in računalništvo PROGRAMSKO ORODJE ZA SIMULACIJO KARDANSKE REŠETKE DIPLOMSKO DELO Mentorica: doc. dr. IRENA NANČOVSKA ŠERBEC Kandidat: ZSOLT PROŠIĆ Ljubljana, avgust 2016

4

5 Tema diplomskega dela Izdelajte spletno aplikacijo, ki vizualizira in simulira vrtenje kriptografskega modela Kardanske rešetke. Aplikacijo umestite v kontekst večpredstavnega učnega gradiva. To naj omogoča preverjanje znanja pred in po uporabi interaktivne simulacije rešetke in sledi napredku znanja učencev. Obravnavajte lastnosti interaktivnih, večpredstavnih učnih gradiv za simulacijo in animacijo, ki podprejo veščine za razvoj abstraktnega razmišljanja in razumevanje prostorskih predstavitev v skladu s sodobnim kontekstom razvoja računalniškega razmišljanja. S pilotsko raziskavo preizkusite didaktične lastnosti aplikacije med izbranimi učenci srednjih šol. V Ljubljani, Mentorica: doc. dr. Irena Nančovska Šerbec Irena Nančovska Šerbec

6

7 Zahvala Za vso strokovno pomoč in usmeritve ter za dejstvo, da»obljuba dela dolgo«, se zahvaljujem mentorici doc. dr. Ireni Nančovski Šerbec. Hvala vodstvu podjetja Comtrade. Družini in najbližjim se zahvaljujem za podporo in potrpežljivost.

8

9 PROGRAMSKO ORODJE ZA SIMULACIJO KARDANSKE REŠETKE POVZETEK Večpredstavnost, animacija in interaktivnost veljajo za ustaljena in močna orodja v učnem procesu. V diplomskem delu bomo predstavili primer orodja, ki ga uporabimo za aktivno učenje. Razvili smo konceptualni model, spletno aplikacijo Programsko orodje za simulacijo Kardanske rešetke, ki temelji na teh orodjih in predstavlja učno gradivo s področja kriptologije. Struktura aplikacije sledi Mayerjevim načelom za izdelavo večpredstavnostnih gradiv in sloni na kognitivni teoriji učenja z večpredstavnostjo. S simulacijo in nalogami problemskega značaja spletna aplikacija služi kot sredstvo za razvoj abstraktnega razmišljanja in prostorskih predstavitev. Aplikacija je namenjena srednješolcem, ki so jo tudi preizkusili. Analiza rezultatov pilotske raziskave kaže na pozitivne učne učinke, ki so skladni z neo-piagetovo teorijo kognitivnega razvoja KLJUČNE BESEDE spletna aplikacija, simulacija, interaktivnost, kriptografija, steganografija, računalniško razmišljanje, abstraktno in prostorsko razmišljanje I

10 ACM KLASIFIKACIJA K.3 Računalništvo in izobraževanje K.3.1 Uporaba računalnika v izobraževanju K.3.2 Poučevanje računalništva in informatike II

11 WEB APPLICATION FOR SIMULATION OF CARDAN GRILLE ABSTRACT Multimedia, animation and interactivity are common and powerful tools that can be applied in the learning process. In this diploma thesis we present an example of an active-learning tool. We have developed a conceptual model in the form of a web application called Web Application for simulation of Cardan Grille, which is based on the aforementioned tools and consists of learning material from the field cryptography. The application s structure follows Mayer s principles of the cognitive theory of multimedia learning. Based on simulation and problem-solving activities, this web application serves as a tool for developing abstract and spatial reasoning. It is intended for high school students. The analysis of results obtained from the pilot empirical study points toward positive learning outcomes that are consistent with the neo-piagetian theory of cognitive development. KEYWORDS web application, simulation, interactivity, cryptography, steganography, computational thinking, abstract and spatial reasoning III

12 ACM CLASSIFICATION K.3. Computer and Education K.3.1 Computer Uses in Education K.3.2 Computer and Information Science Education IV

13 KAZALO VSEBINE 1. UVOD Cilji diplomskega dela Pregled vsebine ostalih poglavij KRIPTOGRAFIJA Zgodovina Od starega veka do 1. svetovne vojne Od prve svetovne vojne do danes Steganografija Kardansko in vrteče se rešeto Girolamo Cardano Kardansko rešeto Vrteče se rešeto TEORETSKO OZADJE Računalniško razmišljanje PISA Neo-Piagetova teorija kognitivnega razvoja in učenje abstraktnega razmišljanja Učenje z animacijo in simulacijo Kognitivna teorija učenja z večpredstavnostjo TEHNIČNA REALIZACIJA HTML CSS JAVASCRIPT JQUERY AJAX V

14 4.4. PHP MYSQL BOOTSTRAP HEROKU PROGRAMSKO ORODJE ZA SIMULACIJO KARDANSKE REŠETKE Začetno in končno preverjanje Vadnica Rezultati EMPIRIČNA RAZISKAVA Opis vzorca Splošni podatki Analiza odgovorov Delež pravilnih odgovorov Prvi par nalog (1. in 4. naloga) Drugi par nalog (2. in 5. naloga) Tretji par nalog (3. in 6. naloga) Analiza časa Povprečni čas Prvi par nalog (1. in 4. naloga) Drugi par nalog (2. in 5. naloga) Tretji par nalog (3. in 6. naloga) Povzetek analize rezultatov ZAKLJUČEK VIRI VI

15 KAZALO SLIK Slika 1: Scytale... 4 Slika 2: Stroj Enigma... 7 Slika 3: Kardanska rešetka Slika 4: Vrteča se rešetka Slika 5: Model prekrivajočih se valov Slika 6: Shema kognitivne teorije učenja z večpredstavnostjo Slika 7: Zaslonska slika aplikacije med uporabo Slika 8: Z izbiro možnosti med reševanjem naloge se rešetka obarva modro Slika 9: Razkrita Kardanska rešetka v aplikaciji Slika 10: Prekrita Kardanska rešetka v aplikaciji Slika 11: Rešetka v prvi poziciji Slika 12: Rotacija rešetke za 90 stopinj Slika 13: Rešetka v drugi poziciji Slika 14: Uporabnikovo rešeto Slika 15: Izdelovanje svojega šifriranega besedila Slika 16: Prikaz rezultatov končnega preverjanja VII

16 KAZALO GRAFIKONOV Grafikon 1: Delež pravilnih odgovorov pri začetnem preverjanju Grafikon 2: Delež pravilnih odgovorov pri končnem preverjanju Grafikon 3: Odgovori 1. naloga Grafikon 4: Odgovori 4. naloga Grafikon 5: Odgovori 2. naloga Grafikon 6: Odgovori 5. naloga Grafikon 7: Odgovori 3. naloga Grafikon 8: Odgovori 6. naloga Grafikon 9: Čas reševanja nalog pri začetnem preverjanju Grafikon 10: Čas reševanja nalog pri končnem preverjanju Grafikon 11: Čas reševanja 1. naloge Grafikon 12: Čas reševanja 4. naloge Grafikon 13: Čas reševanja 2. naloge Grafikon 14: Čas reševanja 5. naloge Grafikon 15: Čas reševanja 3. naloge Grafikon 16: Čas reševanja 6. naloge KAZALO TABEL Tabela 1: Primerjava klasične Piagetove in neo-piagetove teorije VIII

17 IX

18 AKRONIMI IN OKRAJŠAVE PHP PHP: Hypertext Preprocessor HTML Hyper Text Markup Language CSS Cascading Style Sheets DOM Document Object Model JS JavaScript MySQL sistem za upravljanje s podatkovnimi bazami X

19

20 1. UVOD Živimo v dobi digitalizacije, tehnologija nas spremlja na skoraj vsakem koraku in vseh področjih življenja. Tehnološki napredek, ki ga poganja kolesje družbe in gospodarstva, se odvija pred našimi očmi delamo v poklicih, ki pred desetimi leti še niso obstajali, in uporabljamo tehnologije, katerih si še pred manj kot desetletjem ne bi znali predstavljati. V razvoju posameznika se v vse večji meri kaže potreba po naboru veščin, ki presegajo statično znanje. Da bi v svoji in prihodnjih generacijah vzgojili samostojne, analitično in kritično razmišljujoče posameznike, ki znajo reševati probleme tehnološke družbe, velik del odgovornosti nosimo prav pedagogi in didaktiki. Stroka skupek tovrstnih metodologij povzema v konceptu razvoja računalniškega razmišljanja, ki postaja tako orodje kot cilj v učilnicah. V diplomskem delu smo želeli raziskati, v kakšni meri so slovenski srednješolci vešči abstraktnega razmišljanja in prostorskih predstavitev, ki sta gradnika računalniškega razmišljanja. Področje kriptografije, ki sicer ni del kurikula za računalništvo, nudi odličen poligon, saj je rezultat več kot štiri tisoč let tovrstnega razmišljanja in se razvija še danes v digitalni obliki. Učno gradivo, ki predstavlja simulacijo kriptografskega modela, smo izdelali v obliki interaktivne spletne aplikacije Programsko orodje za simulacijo Kardanske rešetke Cilji diplomskega dela V prvi vrsti je cilj diplomskega dela izdelava spletne aplikacije, ki služi kot večpredstavno učno gradivo. Uporaba večpredstavnosti oz. multimedije s poudarkom na animacijah, simulacijah in interaktivnosti se pogosto uveljavlja pri ustvarjanju učnih gradiv oz. vsebin, s katerimi želimo pri uporabnikih razviti abstraktno ali prostorsko razmišljanje. Spletna aplikacija obravnava problemske situacije uporabe Kardanskega, vrtečega se rešeta na tak način, da med reševanjem problemov od uporabnika zahteva algoritmično, prostorsko in abstraktno razmišljanje, ki so nekateri od gradnikov računalniškega razmišljanja. Skladno z neo-piagetovo teorijo kognitivnega razvoja pričakujemo, da bo uporaba aplikacije merljivo vplivala na 1

21 utrjevanje in razvoj prej omenjenih veščin, ki spadajo med najvišje stopnje kognitivnega razvoja po tej teoriji. Da bi aplikacija najbolje služila svojemu namenu, smo pri izdelavi aplikacije, kjer je to bilo mogoče, sledili Mayerjevim načelom za izdelavo večpredstavnostnih gradiv, ustreznih za učenje Pregled vsebine ostalih poglavij Poglavja tega diplomskega dela se podrobneje dotaknejo gradnikov izdelane spletne aplikacije. V drugem poglavju bomo obravnavali kriptografijo, ki je predmet učnega gradiva izdelka. V tem poglavju bomo predstavili pojem kriptografije v splošnem ter pojme, povezane s kriptografijo. Predstavili bomo zgodovino in sodobno rabo kriptografije ter se dotaknili tehnike steganografije, kamor uvrščamo Kardansko rešetko. V poglavju, ki sledi, bomo predstavili teoretske koncepte, ki bodisi predstavljajo temelj ali motivacijo izdelave spletne aplikacije. Podrobneje bomo predstavili stališče pomembnosti tovrstnih aplikacij ter kakšno je ozadje same konstrukcije aplikacije, da bi izpolnjevala svoj namen. V poglavju Tehnična realizacija bomo predstavili tehnologijo in okolja, s katerimi smo izdelali spletno aplikacijo. Ogledali si bomo uporabljene programske jezike, tehnologije za grafično oblikovanje ter programska okolja s primeri uporabe v našem izdelku. Podrobneje bomo opisali implementirane funkcionalnosti spletne aplikacije in njenega delovanja s konkretnimi primeri programske kode. V sklepnem delu diplomskega dela bomo predstavili ugotovitve in analizo rezultatov empirične raziskave na osnovi podatkov, pridobljenih od uporabnikov, ki so uporabljali spletno aplikacijo Programsko orodje za simulacijo Kardanske rešetke. 2

22 2. KRIPTOGRAFIJA Želja po skrivni komunikaciji je stara skoraj toliko kot sama pisna komunikacija. Že stoletja je vključena v vojaško in politično delovanje. Vojaški generali so med seboj komunicirali o pozicijah svojih ali nasprotnikovih čet in nujno je bilo, da nasprotnik v primeru, da je informacijo prestregel, vsebine ni razumel. Enako je veljalo tudi za politične puče skozi zgodovino. Tudi v današnjem času je kriptografija močen del vojaškega in političnega gibanja, prav tako pa je del vsakdanjika večine ljudi. Spletno bančništvo in nakupovanje, varovanje podatkov, shranjenih na trdem disku, ali varovanje e-pošte temeljijo na kriptiranju (Easttom, 2015). Easttom (2015) je opisal pojem kriptografije kot vedo o spreminjanju sporočila tako, da ga ni mogoče brati brez ustreznega algoritma ali ključa. Za potrebe te diplomske naloge bomo uporabljali Esttomovo terminologijo kriptoloških pojmov: Dešifrirati (dekriptirati) pretvoriti šifrirano besedilo v navadno besedilo. Ključ informacija, po navadi številka, ki jo uporablja algoritem za šifriranje ali dešifriranje sporočila. Kriptoanaliza veda o zakonitostih in metodah za dešifriranje šifre brez poznavanja ključa. Kriptologija velikokrat napačno enačena s kriptografijo. Kriptologija je širši pojem, ki sestoji iz kriptografije in kriptoanalize. Šifra sinonim za algoritem, ki ga uporabimo za transformacijo navadnega besedila v šifrirano besedilo. Šifrirano besedilo besedilo, ki je rezultat šifriranja. Varnost šifriranega besedila je odvisna od kompleksnosti algoritma ali šifre, uporabljene pri šifriranju. Šifrirati (kriptirati) pretvoriti navadno besedilo v šifrirano besedilo. Navadno besedilo izvorno besedilo šifriranega besedila. Besedilo, ki ga želimo zavarovati. 3

23 2.1. Zgodovina Od starega veka do 1. svetovne vojne Najstarejše besedilo, ki vsebuje osnovni element kriptografije spreminjanje zapisa, je nastalo pred približno 4000 leti v Egiptu, v mestu Menet Khufu. Gre za hieroglifski zapis na grobnici plemeniteža Khnumhotepa II, ki je zapisan z vrsto nenavadnih simbolov, in sicer z namenom, da vsebino in pomen zapisa otežijo oziroma zakrijejo (Kahn, 1996). Približno v 5. stoletju pred našim štetjem so Špartanci, slovita antična vojaška družba, znana po strogem načinu vzgoje, pogumu in bojevitosti, razvili kriptografsko sredstvo za šifriranje in dešifriranje sporočil. Scytale (Slika 1) je naprava cilindrične oblike, na katero so navili ozek trak pergamenta ali usnja. Ko je bil trak navit, so nanj zapisali sporočilo, ki ga ni bilo mogoče prebrati, ko se je trak odvil. Pisec in bralec sporočila sta morala imeti enako širok scytale za uspešno prenašanje sporočila. Takšno tehniko šifriranja uvrščamo med transpozicijske šifre, značilnost katerih je, da so uporabljene črke nespremenjene, spremeni pa se vrstni red oziroma položaj zapisanih črk. Slika 1: Scytale (Easttom, C., 2015) Še ena antična tehnika šifriranja je adicija substitucija. Opisal jo je grški pisec Polibij, prvi pa jo je uporabljal Julij Cesar. Sporočilo se je šifriralo tako, da se je vsaka črka zamenjala s črko, ki je po abecednem vrstnem redu bila tri mesta naprej. Črka»A«se je spremenila v črko»d«,»v«v črko»y«in tako naprej. V eseju iz leta 1466 je italijanski avtor Leon Battista Alberti, ki velja za očeta zahodne kriptografije, opisal disk za šifriranje, ki je temelj polialfabetske šifre. Čeprav je njegov koncept 4

24 bil prvi večji zgodovinski kriptografski napredek, ga je v celoti razvil in v praksi uporabil francoski kriptograf Blaise De Vigenere, po katerem šifra nosi ime Vigenerjev kvadrat oz. Vigenerjeva šifra. Dolgo je veljalo prepričanje, da te šifre ni mogoče razbiti. Predvidoma leta 1845 je Charles Babbage razvil metodo statistične analize, s katero je uspešno dešifriral Vigenerjevo šifro. Ker Babbage ni vestno dokumentiral svojega dela ali pa zato, ker bi ta informacija lahko ogrozila položaj Združenega kraljestva v krimski vojni, je bilo to dejstvo odkrito šele v 20. stoletju. Zasluge za razvoj tehnike statističnega napada za razbitje Vigenerjeve šifre se pripisuje Prusu Kasiskemu, ki je tehniko odkril leta Danes jo poznamo kot Kasiskijev test (Easttom, 2015; Kahn, 1996) Od prve svetovne vojne do danes Prvi dan vojne je britanska ladja Telconia odkrila in uničila nemške čezoceanske komunikacijske kable in s tem Nemce prisilila v uporabo komunikacijskih kablov v lasti Švedov ali Američanov. Te kanale je rutinsko prestregala in pregledovala organizacija»room 40«, šifrirna organizacija britanske kraljeve mornarice. 16. januarja 1917 sta člana»room 4O«, William Montgomery in Nigel De Gray, prestregla sporočilo Nemcev, šifrirano s šifro Do naslednjega dne sta dešifrirala sporočilo, ki ga je nemški zunanji minister Zimmermann poslal mehiškemu predsedniku, v katerem je razkril načrt napada na ameriške podmornice in ga pozval naj se mu, skupaj z Japonci, pridruži v napadu. Razkrito sporočilo je bilo predano ameriškemu predsedniku Wilsonu, ki je 2. aprila 1917 vstopil v vojno z Nemčijo. Proti koncu prve svetovne vojne je vodja ameriških vojnih kriptografov Joseph Mauborgne razvil prvo šifriranje, ki je slonelo na naključno generiranih ključih. Za šifriranje in dešifriranje so uporabili dve enaki knjižici, v katerih so natisnjene naključno izbrane črke. Z Vigenerjevo šifro so šifrirali sporočila tako, da je vsaka stran knjižice bila uporabljena za šifriranje samo enega sporočila. Ranljivost Vigenerjeve šifre je en sam ključ. Z novo tehniko, ki je vpeljala naključno generirane ključe šifriranja, v šifriranem besedilu ni bilo mogoče odkriti enovitega ključa za dešifriranje. 5

25 Za dešifriranje sporočila, šifriranega s ključem dolžine 21 črk, s preizkušanjem, bi morali preizkusiti do 500 x ključev, pri čemer bi se utegnilo več dešifriranih sporočil zdeti berljivih. Tehnika se je ohranila do današnjega dne, imenujemo pa jo OTLP (One Time Letter Pad) in se uporablja za šifriranje strogo zaupnih podatkov. Nedvomno je čas vojne krojil in pospeševal družbeni in tehnološki napredek. V prvi svetovni vojni se je pokazala pomembna vloga kriptografije in teža posledic šibkega šifriranja, kar je botrovalo odkritju OTLP. Druga svetovna vojna pa je vlogo kriptografije postavila v samo središče vojaških in političnih strategij, kjer je ostala vse do danes (Bleakley, 1991; Richelson, 1999). Zgodovinsko znano je tudi delovanje tajnega projekta Ultre, skupine kriptografskih strokovnjakov, ki so prestregali in dešifrirali sporočila sil osi. Med najbolj znane dosežke štejemo prispevke k razbitju kode nemške Enigme. Enigma je bila družina kriptografskih strojev. Prvo različico je razvil Nemec Arthur Scherbius in jo patentiral leta Enigmo so za kriptirano komunikacijo uporabljale številne vojske, ne le nemška. Tekste, kriptirane z eno različico Enigme, so dešifrirali poljski kriptoanalitiki Marian Rejewski, Jerzy Różycki in Henryk Zygalski. Trojica je z dostopom do delujoče Enigme z obratnim inženirstvom razvila orodja za razbitje šifre Enigme, eno teh orodij pa je kriptološka bomba. Enigmo so sestavljali rotorji, medsebojno povezani diski s 26 črkami, razvrščenimi krožno po disku. Vsak od diskov je predstavljal drugačno substitucijsko šifro, torej lahko Enigmo razumemo kot mehansko polialfabetsko šifro. Operater Enigme je besedilo, ki ga je bilo treba šifrirati, vnašal preko tipkovnice. Enigma je vsak vnesen znak šifrirala z drugim substitucijskim ključem. Na drugi strani je prejemnik v Enigmo vnesel šifrirano besedilo, ki ga je lahko razbil le, če je Enigma imela enako konfiguracijo rotorjev kot stroj, ki je besedilo šifriral. 6

26 Slika 2: Stroj Enigma (Easttom, 2015) Družino Enigme so sestavljali različni modeli; (1) Enigma A, prva različica, (2) Enigma B, (3) Enigma C, (4) Enigma B, ki so jo uporabljali Združeno kraljestvo, Japonska, Švedska in ostali, (5) Mornariška šifra D, ki jo je uporabljala italijanska mornarica, (6) Funkschlüssel C, ki jo je uporabljala nemška mornarica v začetku leta 1926, (7) Enigma G, ki jo je uporabljala nemška vojska, (8) Wehrmacht Enigma I, razširitev Enigme G, različica, ki jo je nemška vojska uporabljala najpogosteje, in (9) M3 izboljšana Enigma, ki jo je leta 1930 začela uporabljati nemška vojska. Ostali sistemi so bodisi izhajali iz Enigme ali bili konceptualno podobni, med njimi japonski GREEN, sistem SIGABA, NEMA in drugi. Pomembno vlogo pri razbitju šifre je igral Alan Turing, angleški matematik in kriptolog, ki velja za pionirja modernega računalništva. V času druge svetovne vojne je Turing delal za skrivni vladni projekt Ultra, ki je deloval v Bletchley Parku pod okriljem MI6 (britanske obveščevalne službe). Na podlagi dognanj poljskih kolegov je razvil elektromehanski stroj, ki ga danes poznamo kot Turingovo bombo, ki je dešifrirala inačico Enigme. Turing je vodil ekipo, ki je uspešno razbila šifro Enigme, ki jo je uporabljala nemška mornarica. Delo, ki so ga opravljali, je bilo strogo zaupno. Predvideva se, da se je na račun Turingovega uspeha vojna skrajšala za dve leti, s čimer je Turing posredno rešil milijone življenj (Easttom, 2015; Smith, 1998). 7

27 Z digitalizacijo sveta in porastom uporabe osebnih računalnikov v vsakdanji rabi se je pojavila potreba po varni digitalni komunikaciji. Leta 1976 je ameriški inštitut za standard in tehnologijo na javnem natečaju izbral DES (DATA ENCRYPTION STANDARD), algoritem šifriranja, ki temelji na IBM-ovem algoritmu iz leta Algoritem DES temelji na simetrični kriptografiji, ključa za šifriranje in dešifriranje podatkov sta enaka. Šifrirajo se bloki podatkov velikosti 64 bitov, in sicer s 64-bitnim ključem, ki ga morata poznati tako pošiljatelj kot prejemnik. Hkrati je leta 1975 Whitfield Diffie s kolegoma Martinom Hellmanom in Ralphom Merklom razvil koncept šifriranja z uporabo asimetričnega ključa, kar je odprlo poligon za razvoj kriptiranja podatkov z javnim in zasebnim ključem. V prakso so njihovo delo vpeljali Ron Rivest, Adi Shamir in Leonard Adleman, po katerih algoritem RSA nosi ime. Gre za asimetrično šifriranje, torej uporablja javni in zasebni ključ. Varnost algoritma temelji na zahtevnosti iskanja faktorjev velikih števil. Javni in zasebni ključ sta lahko sestavljena iz velikih ( števk) praštevil. Kljub temu da je sam postopek kreiranja ključev znan, je dešifriranje sporočila z javnim ključem izjemno zahtevna računska naloga, ki ji tudi sodobni računalniki niso kos (Schneier, 1996; Beckett, 1997) Steganografija Za razliko od kriptografije, ki za prikrivanje informacij uporablja šifre, steganografija zavaruje podatke tako, da jih skrije v drug medij in prikrije obstoj samega skritega sporočila. Nihče razen pošiljatelja in prejemnika ne ve, da medij vsebuje prikrito sporočilo. Prednost, s katero se steganografija ponaša pred kriptografijo, je, da je sporočilo skrito v povsem običajen medij, ki ne vzbuja pozornosti. Ker je sam obstoj sporočila skrit, je verjetnost, da je izpostavljeno razkritju, majhna. Za dodatno varnost so sporočila, skrita z metodo steganografije, velikokrat tudi kriptirana. Korenine steganografije segajo daleč v zgodovino. Kitajci so na kos svile zapisali sporočilo, nato pa svilo zvili v majhen klobčič in prelili z voskom. Voščeno kroglico je pogoltnil sel. Tudi, če je nasprotnih prestregel sla in ga temeljito preiskal, sporočila ni odkril zlahka. 8

28 V Grčiji so slu obrili glavo in sporočilo zapisali na golo kožo, nato pa počakali, da lasje zrasejo nazaj. O tej metodi steganografije je pisal grški zgodovinar Herodot, z njo pa naj bi Grke posvarili o načrtovanem napadu Perzijcev. Še ena metoda steganografije, ki izvira iz Grčije, je zapis na zložljivo leseno mizo, ki so jo nato prekrili z voskom, da bi zakrili sporočilo. Prejemnik je nato odstranil voščeno plast, da je prišel do sporočila. To metodo naj bi uporabil Demarat, ki je posvaril Špartance pred invazijo Kserksesa. V 4. stoletju pred našim štetjem je Grk Enej (z vzdevkom Taktik) pisal o vojnih strategijah in velja za enega prvih strategov, ki je pisal o varovani vojaški komunikaciji.»tisti, ki sodelujejo z izdajalci, morajo vedeti, kako pošiljati sporočila. Sel naj odkrito nosi sporočilo o nekih drugih stvareh. Skrito sporočilo naj bo všito v podplat sandalov, ki jih sel nosi, da bo varovano od vode in blata, brez njegovega vedenja. Ko sel doseže cilj, naj preda odkrito sporočilo. Ponoči, ko bo sel spal, naj prejemnik sporočila odstrani šive na podplatu sandalov in vzame skrito sporočilo, na njegovo mesto pa postavi svoj odgovor in popravi šive. Naslednji dan naj prejemnik sporočila slu preda odprto sporočilo, ki ga naj vrne kot odgovor pošiljatelju. Tako nihče, tudi sel, ne bo vedel za obstoj skritega sporočila (Enej, 4. st. pr. n. š.)«(kahn, 1996). Leta 1499 je Johannes Trithemius ( ) napisal delo v treh knjigah z naslovom Steganographia, v katerih je ta pojem prvič omenjen. Delo govori o okultizmu, med vrstice dela pa so skriti teksti o kriptografiji in steganografiji (Easttom, 2015). Steganografske metode prikrivanja skritega sporočila se uporabljajo tudi v modernih časih. Vrsta programskih orodij in metod nam omogoča, da želeno sporočilo skrijemo v digitalne medije, kot so slike, videi, zvočni posnetki in drugi. Primer steganografije je tudi Kardansko rešeto, ki ga bomo natančneje obravnavali v naslednjem poglavju. 9

29 2.3. Kardansko in vrteče se rešeto Girolamo Cardano Girolamo Cardano, rojen leta 1501 v Milanu, je bil italijanski fizik in matematik, znan po tem, da je v svojih delih znanost približal ljudem, prav tako pa je avtor prvega pisnega dela, ki obravnava teorijo verjetnosti. Svoje delo je izdal v 131 knjigah in 111 rokopisih, v katerih je pisal o matematiki, astronomiji, astrologiji, fiziki, šahu, kockanju (kjer se je prvič ukvarjal z verjetnostnim izračunom), nesmrtnosti duše, čudežnih zdravilih, dialektih, smrti, Neronu, dragih kamnih in barvah, strupih, zraku, vodi, sanjah, urinu, zobeh, glasbi, morali in modrosti. Kljub vsem obravnavanim tematikam svojih razmišljanj in dognanj o kriptologiji ni izdal v posebni knjigi, temveč jih je strnil v dveh delih, s katerima je populariziral znanost, De Subtilitate in De Rerum Varietate. Deli sta bili opremljeni s številnimi ilustracijami in vsebovali tako znanstvena dognanja tistega časa kakor tudi veliko ugibanj. Prevedeni sta bili v več jezikov in tiskani širom Evrope (Kahn, 1996) Kardansko rešeto Med Cardanova najbolj znana odkritja na področju kriptografije in steganografije uvrščamo Kardansko rešeto. Kardansko rešeto (Slika 3) je steganografsko orodje pravokotne oblike iz tršega materiala, na primer kartona, usnja ali kovine, v katerega so vrezane pravokotne luknje višine pisane vrstice besedila. Vrezane luknje so poljubne dolžine in poljubne razporeditve. Rešeto se položi na papir in v luknje rešeta se zapiše skrivno sporočilo. Rešeto se nato umakne in na papir zapiše preostanek besedila tako, da tvori smiselno celoto in zakrije obstoj skritega sporočila. Cardanov predlog je bil, naj se tako sestavljeno besedilo prepiše vsaj trikrat, da se zakrijejo morebitne nepravilnosti. Da bi sporočilo dešifrirali, rešeto preprosto položimo na besedilo in skrito sporočilo se razkrije skozi luknje rešeta. 10

30 To metodo steganografije je uporabljalo več držav za diplomatsko korespondenco v 16. in 17. stoletju (Kahn, 1996). Slika 3: Kardanska rešetka (Easttom, C., 2015) Vrteče se rešeto S časom se je tehnika rešeta spreminjala in razvijala. Na začetku 20. stoletja so uporabljali t. i. vrteče se rešeto (angl. Turning Grille). V tem primeru gre za rešeto kvadratne oblike, ki je deljeno na kvadratne celice. Četrtina celic je izluknjanih v vzorec, ki, ko obračamo rešeto skozi vse štiri pozicije, razkrije vsako celico na papirju pod rešetom natanko enkrat. Čeprav sta si Kardansko rešeto in vrteče se rešeto zelo različni, je v literaturi pogosto moč zaslediti enako imenovanje (Kahn, 1996). Slika 4: Vrteča se rešetka (Kahn, D., 1996) 11

31 Položaj celice rešeta po rotaciji za 90 v smeri urinega kazalca lahko opišemo s funkcijo: x = n y + 1 f(x, y) = { y = x, pri čemer je n naravno število, ki predstavlja število celic na stranici rešeta. V spletni aplikaciji, ki smo jo izdelali v sklopu tega diplomskega dela, obravnavamo pojem steganografije in Kardansko rešetko, vrtečo se rešetko, na kateri temeljijo naloge v aplikaciji. 12

32 3. TEORETSKO OZADJE V tem poglavju bomo obravnavali teoretična izhodišča, ki pojasnjujejo didaktične modele za poučevanje abstraktnega razmišljanja, kar je namen spletne aplikacije Programsko orodje za simulacijo Kardanske rešetke. Ta spodbuja učence k računalniškemu, abstraktnemu in problemskemu razmišljanju, ki postaja temelj sodobnih pristopov za poučevanje računalništva. Opisali bomo učenje s pomočjo animacij in simulacij ter poglavje zaključili z Mayerjevo kognitivno teorijo za učenje z večpredstavnostjo, saj smo omenjena teoretična izhodišča upoštevali pri snovanju spletne aplikacije Računalniško razmišljanje V preteklosti se je pri poučevanju računalništva veliko poudarka namenilo obravnavi nekega problema iz stališča»kako«(npr. kako uporabljati nek program) ali»kaj«(npr. kaj je končni izdelek). Način poučevanja je deloma pogojen z ekonomskimi potrebami družbe. Tak pristop k poučevanju ima slabosti, saj ekonomske potrebe družbe čedalje močneje slonijo na tehnoloških inovacijah in ne le spretni uporabi tehnologije. Obenem se tehnologija spreminja s tako hitrostjo, da utegnejo priučena znanja zastarati, preden učenec zaključi s šolanjem, prav tako pa tehnologija prodira v domala vsa področja življenja, zaradi česar konkretno aplikativna znanja predstavljajo le majhen nabor računalniških znanj. Sodobnejši pristop k poučevanju računalništva si prizadeva učencem priučiti veščine, ki bi jih delale neodvisne pri učenju in kritični obravnavi problemov ali morda celo snovanju novih tehnologij. Skozi pouk računalništva bi učenec moral pridobiti konkretna znanja ter se naučiti odprtega pristopa k problemskemu razmišljanju oziroma razviti t. i. računalniško razmišljanje. Da bi učenci razumeli tehnologijo in njeno spreminjanje, jo znali uporabljati in razvijati, morajo poznati odgovore ne le na vprašanji»kaj«in»kako«, temveč tudi»zakaj«. Tak pristop k obravnavi nekega kompleksnega problema nudi računalniško razmišljanje, nabor kognitivnih veščin, s katerimi problem razbijemo na enostavnejše enote, ki jih lahko obravnavamo tudi z računalnikom (Curzon, Dorling, Ng, Selby in Woollard, 2014). 13

33 J. Wing, ki je zaslužna za popularizacijo ideje računalniškega razmišljanja, je termin definirala kot miselne procese,»ki so vključeni pri formuliranju problemov in njihovih rešitev, pri čemer so rešitve v taki obliki, da jih lahko učinkovito izvaja informacijsko-procesni agent.«ta agent je lahko človek, računalnik ali kombinacija obojega (Cuny, Snyder in Wing, 2010, v Curzon idr., 2014) Računalniško razmišljanje je vrsta analitičnega razmišljanja, povezujemo pa ga z logičnim, sistemskim, algoritmičnim in vzporednim razmišljanjem. Računalniško razmišljanje je deloma matematično razmišljanje v smislu pristopa k reševanju problemov, deloma inženirsko razmišljanje v smislu pristopa k ustvarjanju in evalvaciji kompleksnih sistemov, ki v realnosti delujejo, in deloma znanstveno razmišljanje v smislu pristopa k razumevanju izračunljivosti, inteligence, uma in človekovega vedenja (Wing, 2011). Selby in Woollard (2013) strneta pet temeljnih konceptov, ki nastopajo pri računalniškem razmišljanju, podrobneje pa so razloženi v Curzon idr. (2014): Algoritmično razmišljanje iskanje rešitve z jasno definiranimi koraki. Posameznik ne išče enega samega odgovora, temveč množico sistematiziranih postopkov in pravil, ki jim je treba natančno slediti, da bi prišli do rešitve dotičnega ali podobnega problema. Vrednotenje proces, v katerem se posameznik prepriča, da je izdelan algoritem pravilen služi namenu. Sem spada vrednotenje algoritma z vidika pravilnosti, hitrosti, učinkovitosti in razumljivosti. V procesu vrednotenja se mogoče algoritem spreminja na podlagi ugotovljenih rezultatov. Razčlenitev način obravnave problemske situacije, algoritma, procesov in sistemov kot sestavljenih celot. Dele, ki sestavljajo celoto, je mogoče razumeti, reševati, razvijati in vrednotiti ločeno. S tem kompleksno problemsko situacijo razbijemo na manjše, lažje rešljive dele. Abstrakcija sodi med načine, s katerimi problem ali sistem poenostavimo. Pri abstrakciji govorimo o prikrivanju odvečne kompleksnosti. Ključno je izbrati pravilno podrobnost, ki jo namensko skrijemo, da problem poenostavimo, brez izgube informacij. Z abstrakcijo lažje snujemo kompleksne algoritme ali celotne sisteme. 14

34 Posplošitev s posplošitvijo hitreje pridemo do rešitve problemov na podlagi rešitev, ki smo jih že poiskali pri podobnih problemih. Izdelan algoritem, ki predstavlja rešitev neke določene problemske situacije, priredimo tako, da ga je mogoče uporabiti za niz sorodnih problemskih situacij. Z računalniškim razmišljanjem povezujemo različne načine razmišljanja in spretnosti, ki jih učenci razvijajo pri različnih predmetih in ne le tistih, ki so povezani z računalništvom. S ciljem, da bi ostale pismenosti (bralne, matematične, naravoslovne) povezali z računalniško pismenostjo oziroma razvojem zmožnosti za reševanje kompleksnih problemov, kot pri računalniškem razmišljanju, bomo opisali rezultate zadnjih PISA raziskav na nivoju OECD PISA Program mednarodne primerjave dosežkov učencev PISA (Programme for International Student Assessment) je dolgoročen projekt primerjanja znanja ter spretnosti učenk in učencev v državah članicah Organizacije za ekonomsko sodelovanje in razvoj (OECD) in državah partnericah. Raziskava je bila v mednarodnem prostoru prvič izvedena leta 2000 in od takrat države na tri leta ugotavljajo ravni bralne, matematične in naravoslovne pismenosti učenk in učencev, starih 15 let, kar je za večino držav približno ob koncu obveznega izobraževanja. V Sloveniji so v raziskavo vključeni praviloma dijakinje in dijaki prvih letnikov srednjih šol in gimnazij. Skupaj s šolami raziskavo PISA v Sloveniji izvaja Pedagoški inštitut. Leta 2012, ko je bila raziskava osredotočena na matematično pismenost, je v raziskavi sodelovalo okoli učenk in učencev iz 65 držav, kar predstavlja reprezentativno skupino za okoli 28 milijonov 15-letnikov. V Sloveniji je v raziskavi sodelovalo 8405 dijakinj in dijakov ter učenk in učencev. Sodelovale so vse slovenske gimnazije in srednje šole oz. 327 srednješolskih izobraževalnih programov, ob tem pa še 24 osnovnih šol in ena ustanova za izobraževanje odraslih. V raziskavi PISA so zbrani tudi spremljajoči podatki iz osebnega in šolskega okolja sodelujočih učenk, učencev, dijakinj in dijakov. Na področju matematične pismenosti so slovenski učenci in učenke v poprečju dosegli 501 točko, dosežek je pomembno višji od povprečja OECD (494 točk). Dosežek slovenskih učenk in 15

35 učencev je statistično podoben dosežkom učencev v Avstriji, Avstraliji, Irski, Danski, Češki in Novi Zelandiji (Štraus, Šterman Ivančič in Štigl, 2013). Na področju problemskega razmišljanja oziroma reševanja nalog, ki zahtevajo kompleksnejše problemsko razmišljanje, izviren pristop ter abstraktno razmišljanje in prostorsko predstavo, so slovenski učenci in učenke v povprečju dosegli 476 točk, kar je pomembno nižje od povprečja OECD (500 točk). Zanimiva ugotovitev je, da so učenci držav, s katerimi so slovenski učenci imeli primerljiv dosežek na področju matematične pismenosti, na področju problemskega razmišljanja vsi dosegli povprečen ali nadpovprečen rezultat. Slednje ne velja za Novo Zelandijo, za katero za področje problemskega razmišljanja ni podatka o doseženem povprečju. PISA 2012 definira kompetenco problemskega razmišljanja kot» sposobnost posameznika, da miselno obravnava situacijo ali problem, katerega rešitev je sistematizirana in ne očitna. V kompetenco je vključena tudi želja po tovrstnem delovanju s ciljem razvoja posameznikovega potenciala (PISA 2012 Results, 2014).«Miselni procesi, ki so vključeni v problemsko razmišljanje, so povzeti v štirih sklopih: Raziskovanje in razumevanje sem spada raziskovanje problemske situacije z opazovanjem, interakcijo in iskanjem informacij ter morebitnih omejitev in ovir. Razumevanje podanih in z odkrivanjem pridobljenih informacij. Predstavitev in formulacija uporaba tabel, grafov, simbolov in besed za predstavitev celote ali delov problemske situacije, formuliranje hipotez z relevantnimi parametri problemske situacije in formuliranje odnosov med njimi za ustvarjanje koherentne miselne predstave o problemski situaciji. Načrtovanje in izvedba izdelava načrta ali strategije za rešitev problemske situacije in izvedba. V tem sklopu lahko govorimo o razjasnitvi celostnega cilja, razdelavi kompleksnega primera na manjše in manj kompleksnejše probleme itn. Preverjanje in vrednotenje preverjanje procesa rešitve in odzivanje na ugotovitve. Vrednotenje pridobljenih informacij ali izdelane rešitve oziroma strategije. Za razumevanje problemskih situacij so učenci morali prepoznati razliko med dejstvi in mnenji, pri formulaciji rešitve so morali prepoznati odnose med spremenljivkami, pri izbiri strategije 16

36 za rešitev so morali upoštevati vzroke in posledice strategije in pri vrednotenju rešitve kritično vrednotiti hipoteze in obravnavati alternativne rešitve. Med drugim v procesu spopadanja s problemskimi nalogami v PISI učenci uporabljajo deduktivno, induktivno, analitično in kombinatorično razmišljanje (OECD, 2014). Opisane kompetence za uspešno reševanje problemskih nalog v PISA 2012 imajo torej močne vzporednice s temeljnimi koncepti računalniškega razmišljanja: Formuliranje hipotez in algoritmov Načrtovanje, razčlenjevanje Preverjanje in vrednotenje V naslednjem podpoglavju bomo opisali osnove kognitivne teorije, s pomočjo katere učitelji snujejo didaktične modele za razvoj abstraktnega razmišljanja ter posledično med učenci razvijajo zmožnosti za reševanje kompleksnih problemov. Opisali bomo neo-piagetovo teorijo kognitivnega razvoja, ki je v zadnjih časih najbolj popularna teoretična osnova za uvodno poučevanje programiranja Neo-Piagetova teorija kognitivnega razvoja in učenje abstraktnega razmišljanja Izkušen programer je tisti, ki si je zmožen zapomniti, razumeti in aplicirati programerske koncepte, analizirati in vrednotiti delovanje programa in nenazadnje samostojno izdelati program (Krathwohl, 2002). Za izkušenega programerja je značilna visoka stopnja abstraktnega razmišljanja, katerega razvoj na tem področju in tranzicijo učencev iz nižjih do višjih kognicijskih stopenj raziskuje Donna Teague, strokovnjakinja na področju poučevanja računalništva. Razlog, da imajo učenci težave z učenjem programiranja, ne leži v predpostavki, da za to niso dovolj pametni, da preprosto niso rojeni s talentom ali da je programiranje prezahtevna domena. Programiranje zahteva abstraktno razmišljanje, ki se razvija sekvenčno in kumulativno. To zavedanje je pomembno pri poučevanju programiranja, pri čemer naj bi 17

37 učitelj prepoznal kognitivno stopnjo učenca in na podlagi te pripravljal dejavnosti za napredovanje v višjo kognitivno stopnjo (Teague, 2015). V številnih raziskavah so strokovnjaki raziskovali programerske kompetence učencev skozi klasično Piagetovo teorijo kognitivnega razvoja, vendar nobena raziskava ne nudi jasnih vzporednic med proučevanimi kompetencami in modelom, ki ga ta teorija narekuje. Piaget je raziskoval kognitivni razvoj otrok in svoje ugotovitve strnil v konstruktivistično teorijo z diskretno ločenimi razvojnimi stopnjami, skozi katere posameznik prehaja od rojstva do odraslosti. Piaget trdi, da posameznikovo doživljanje sveta temelji na miselnih shemah, temeljnih enotah inteligentnega vedenja in operacijah, ki so logični postopki ravnanja z odnosi med shemami. Stopnje si sledijo v točno določenem vrstnem redu, teorija predvideva okvirno starost posameznika, ko dosega stopnje, in vsaka stopnja je opredeljena s svojimi značilnostmi (Helmore, 1969; Flavell, 1977; Shayer in Adey, 1981; Huber, 1988; Ojose, 2008): Senzomotorična stopnja (0 do 2 leti) Stopnja pred samozavedanjem Koordinacija vida in giba Začetek razvoja govora Manipulacija z objekti s poskušanjem Učenje z interakcijo Začetek razumevanja koncepta objekta, začetek razlikovanja sebe in objekta Povezovanje objektov in števil Predoperativna stopnja (2 do 7 let) Dominantno zaznavno doživljanje (npr. več vode je v ožjem kozarcu, ker je gladina višje) Centracija mišljenja (osredotočenost na en sam vidik situacije) Stadijska centracija (osredotočenost na statično stanje dogodka, navadno sedanjosti) Nepovratnost (mišljenje v eno smer, ki ga otrok ni sposoben preveriti v nasprotni smeri) Pomanjkanje konzervacije Mešanje objektov in simbolov, ki objekte predstavljajo 18

38 Pomanjkanje miselnih predstav Transduktivno razmišljanje Egocentrizem Težave pri razredni vključitvi (ne razumevanje odnosov med celimi razredi in podrazredi) Doživljanje situacije skozi en sam pojem (spremenljivko, dimenzijo) hkrati Stopnja konkretno logičnega mišljenja (7 do 11 let) Sklepanje Decentralizacija Razumevanje transformacije objektov Obrnljivost mišljenja Začetek logičnega mišljenja Tvorjenje miselnih predstav Multipla klasifikacija Konzervacija Seriacija Razredna vključitev Pomanjkanje kritične obravnave Stopnja formalno logičnega mišljenja (11 let in naprej) Prepoznavanje objektov in ne sestavnih delov objekta Sposobnost opredelitve ključnih gradnikov situacije Razmišljanje je zunaj okvirjev zaznavnega in ni osredotočeno na konkretno situacijo Kritično in logično razmišljanje Izdelava hipotez, organizacija zaključkov in induktivno ter deduktivno razmišljanje Doživljanje situacije skozi več pojmov (spremenljivk, dimenzij) hkrati Razvoj abstraktnega razmišljanja Neo-Piagetova teorija je razširitev klasične Piagetove teorije. Knight in Sutton (2004) povzemata naslednje koncepte, ki izhajajo iz klasične Piagetove teorije in se ohranjajo v neo- Piagetovi: 19

39 Organizacija miselnih značilnosti, kot so stopnje in sheme Konstruktivizem Miselne strukture postajajo kompleksnejše z odraščanjem in izkušnjami Kompleksnejše in bolj abstraktno razmišljanje je grajeno na prej osvojenem znanju in razmišljanju na prejšnji stopnji Razvojne stopnje si sledijo zaporedno, a niso pogojene s starostjo Večina stroke, ki se ukvarja s klasično Piagetovo teorijo, meni, da razvoj posameznika skozi razvojne stopnje poteka sinhrono na vseh področjih (Beard, 1969; Boden, 1979; Fischer in Kenny, 1986). Neo-Piagetova teorija temelji na predpostavki, da je miselni razvoj pogojen s konkretnim predznanjem. V tem primeru je povsem mogoče, da je posameznik na različnih stopnjah miselnega razvoja na različnih področjih, denimo oseba, ki je na stopnji formalno logičnega razmišljanja na nekem področju (npr. igranje šaha), ni nujno na enaki stopnji na nekem drugem področju (npr. glasba). 20

40 Primerjavo med klasično in Neo-Piagetovo teorijo Teaguejeva povzema v spodnji tabeli: Klasična Piagetova teorija Se ukvarja s splošnim miselnim razvojem otrok Otrok na določeni razvojni stopnji kaže enako stopnjo razmišljanja na vseh miselnih področjih Poznamo konkretna preverjanja in preizkuse za določitev posameznikove stopnje miselnega razvoja. Predvideva umestitev v določeno razvojno stopnjo glede na starost, kljub empiričnim dokazom, ki kažejo na močna odstopanja zaradi kulturnih in okoljskih dejavnikov (Cole, 1996) Otrok je dlje časa na določeni stopnji miselnega razvoja, za tem naglo preide v naslednjo. Neo-Piagetova teorija Se ukvarja z miselnim razvojem posameznikov, ne glede na starost, pri učenju novih znanj Ker so miselne zmožnosti posameznika pogojene z njegovim znanjem in izkušnjami na konkretnem področju, lahko na drugem področju izkazuje drugačno Piagetovo stopnjo miselnega razvoja, zato <nadaljevanje v spodnji vrstici> ni mogoče posplošiti preizkusov ali preverjanj, ki bi posameznika enovito umestila v neko stopnjo miselnega razvoja. Umeščenost posameznika v določeno stopnjo in napredovanje v naslednjo ni pogojeno s starostjo, temveč konkretnim predznanjem na določenem področju. Prehajanje iz nižje v višjo stopnjo miselnega razvoja ni diskretno, temveč prekrivajoče se in valovito. Tabela 1: Primerjava klasične Piagetove in neo-piagetove teorije Po neo-piagetovi teoriji je čas, ki ga posameznik potrebuje, da s senzomotorične stopnje preide na stopnjo formalno logičnega mišljenja, različen od posameznika do posameznika. Po klasični teoriji je posameznik dlje časa na določeni stopnji miselnega razvoja, za tem pa naglo preide v naslednjo. Ko enkrat preidejo v višjo stopnjo, se ne vračajo več na nižjo. Ta predpostavka ima dve šibkosti, in sicer empirično raziskave ugotavljajo, da posamezniki hkrati kažejo značilnosti razmišljanja, ki jih povezujemo z različnimi miselno razvojnimi stopnjami, ter filozofsko kako in zakaj posameznik naenkrat preide v višjo stopnjo miselnega razvoja. Nekateri neo-piagetovski teoretiki pojasnjujejo prehode med stopnjami z modelom prekrivajočih se valov. Ko oseba usvaja nova znanja novega področja, prevladujejo značilnosti nižje miselno razvojne stopnje. S spreminjanjem in nadgrajevanjem miselnih shem se veča prisotnost značilnosti višje miselno razvojne stopnje in niža prisotnost značilnosti nižje. S tem na neki točki oseba hkrati kaže značilnosti dveh različnih miselno razvojnih stopenj (Siegler, 1996; Boom, 2004; Feldman, 2004; Teague, 2015). Ilustracija modela prekrivajočih se valov na spodnji sliki (Slika 5): 21

41 Slika 5: Model prekrivajočih se valov (Siegler, 1996) V svojih raziskavah Teague (2015) odkriva, da imajo učenci pri učenju programiranja težave že na zelo zgodnji stopnji učenja, še preden se vpeljujejo netrivialni koncepti. Ugotavlja, da se miselni razvoj učencev pri učenju programiranja razvija skladno s stopnjami miselnega razvoja neo-piagetove teorije, prav tako se jasno kažejo značilnosti posameznih stopenj kot na primer nerazumevanje, nezmožnost sledenja in pisanja kode, ozka ali napačna osredotočenost, nezmožnost abstraktnega razmišljanja. Zaključuje, da učenci, ki se učijo programiranja in se uvrščajo v senzomotorično miselno razvojno stopnjo, napredujejo na predoperativno stopnjo, nato na stopnjo konkretnega logičnega mišljenja in nazadnje na stopnjo formalnega logičnega mišljenja po modelu prekrivajočih se valov. Programerji začetniki razvijajo razmišljanje v različnih tempih, ključnega pomena pa je zadostna izpostavljenost problemskim situacijam, ki razvijajo razmišljanje določene miselno razvojne stopnje, preden lahko napredujejo na naslednjo. Prav to dognanje je motiv za strukturo učnega gradiva, ki je predmet te diplomske naloge. Naloge spletne aplikacije, ki smo jo izdelali, od uporabnika zahtevajo razmišljanje na stopnji konkretno logičnega in formalno logičnega razmišljanja. Ključni del spletne aplikacije je vadnica, ki predstavlja poligon, na katerem uporabnik utrjuje in gradi prostorske in abstraktne miselne sheme z namenom polnega napredovanja na stopnjo formalno logičnega razmišljanja. 22

42 3.4. Učenje z animacijo in simulacijo Wilensky vidi računalniško razmišljanje ter računalniško simulacijo kot močni in univerzalni orodji pri učenju, neodvisni od znanstvenega področja. Prednost računalniške simulacije informacij v primerjavi z običajnimi predstavitvami je ta, da računalniška simulacija lahko oriše proces in obnašanje nekega pojava, dejstva predstavi na preverljiv način, lahko je skalabilna in mogoče jo je predstaviti grafično (Wilensky, 2014). Računalniške simulacije so interaktivna programska orodja, s pomočjo katerih posamezniki raziskujejo neko novo situacijo in odnose med spremenljivkami, ki to situacijo tvorijo v resničnem svetu. Učenci s pomočjo simuliranega okolja lahko preverjajo in preizkušajo svoje hipoteze s spreminjanjem parametrov in opazovanjem učinka, ki ga sprememba povzroči (Homer, Lee in Plass, 2006). Zaradi lastnosti simulacije, da prikazuje informacije dinamično in vizualizira kompleksne koncepte, med pedagogi služi kot pogosto izbrano sredstvo za poučevanje zahtevnejših in kompleksnejših tem, za poučevanje reševanja problemskih situacij ter pojavov, ki so človeškemu očesu nevidni (Reigeluth in Schwartz, 1989). O vlogi animacije pri učenju pišeta tudi Mayer in Moreno, 2002, ki jo opisujeta kot močno učno orodje. Njuno delo se ukvarja z vprašanjem, kako in kdaj uporabiti animacijo, da vzpodbudimo proces učenja. Ugotavljata, da je animacijo oz. simulacijo treba oblikovati na način, ki spoštuje postopek učenja. Svoja dognanja utemeljita s kognitivno teorijo učenja z večpredstavnostjo: 23

43 Kognitivna teorija učenja z večpredstavnostjo Do učinkovitega učenja pride, kadar učenec aktivno oblikuje pridobljene informacije v medsebojno odvisno miselno predstavo celote. Teorija sloni na treh predpostavkah, ki izhajajo iz dosedanjih dognanj na področju raziskav kognicije: Dvojni kanali procesiranja Pri učenju informacije prejemamo preko dveh kanalov. Preko prvega doživljamo slikovne informacije in preko drugega zvočne informacije (Baddeley, 1998; Paivio, 1986) Končna kapaciteta, kognitivno breme Pri učenju je vsak od kanalov zmožen hkrati obravnavati končno omejeno količino informacij (Baddeley, 1998; Sweller, 1999) Aktivno procesiranje Učenje je najučinkovitejše, kadar je učenec aktivno vključen v miselni proces, na primer z izbiro in prepoznavanjem relevantnih informacij, organizacijo teh v povezano miselno predstavitev celote in vključevanjem naučenega v že obstoječe znanje (Mayer v Wittrock, 1974). Spodnja slika (Slika 6) povzema proces učenja po kognitivni teoriji učenja z večpredstavnostjo. Govorjeno navodilo posameznik sliši, iz navodila izbere relevantne besede za nadaljnjo obdelavo v verbalnem sistemu. Besede organizira po načelu vzročno-posledičnosti in nazadnje to združi z informacijami vizualnega sistema ter z že obstoječimi informacijami. Animacijo posameznik zazna z vidom, zgodi se postopek izbire relevantnih slikovnih informacij za nadaljnjo obdelavo v vizualnem sistemu. Slikovne informacije spet organizira po načelu vzročno-posledičnosti in to združi z informacijami verbalnega sistema ter z že obstoječimi informacijami. Implikacija te teorije je, da je večpredstavnostno gradivo najbolj učinkovito, če so vsebinsko povezane enote predstavljene preko vizualnega in verbalnega medija. 24

44 Slika 6: Shema kognitivne teorije učenja z večpredstavnostjo (Mayer E. R., 2002) Rezultate raziskav, ki sta jih izvajala Mayer in Moreno pri proučevanju, kdaj in v kakšnih pogojih večpredstavna gradiva vzpodbujajo učenje, strneta v sedem načel, ki so skladna s kognitivno teorijo učenja z večpredstavnostjo (Mayer in Moreno, 2002): 1. Načelo večpredstavnosti Učenje je učinkovitejše, če so informacije podane z animacijo in besedilom, kakor če so podane samo z besedilom. Načelo sloni na ugotovitvi, da učenci lažje gradijo miselno predstavo o nekem pojmu, če je ta predstavljen preko več medijev. Da bi učenec zgradil celostno miselno predstavo pojma, mora sam graditi predstavo segmenta pojma, ki ga ne predstavimo z večpredstavnostjo. Načelo ne drži brezpogojno za vsako animacijo, kar je začrtalo naslednja načela. 2. Načelo prostorske usklajenosti Da bi učenje s pomočjo animacije bilo učinkovito, mora animacija oz. simulacija biti prostorsko umeščena v bližini opisa pojma, ki ga animira. V nasprotnem primeru se po nepotrebnem izgublja kognitivna kapaciteta, ko učenec išče animacijo ali del te, ki simulira pojem. 3. Načelo časovne usklajenosti Učenje je učinkovitejše, če so verbalne in vizualne informacije podane hkrati. Učenec lažje gradi miselno predstavo o pojmu, če sta dva tipa informacij hkrati v delovnem spominu. 25

45 4. Načelo koherence Učenje je učinkovitejše ob odsotnosti zunanjih oziroma s pojmom nepovezanih verbalnih, vizualnih ali avditornih dejavnikov (npr. glasba). Načelo sloni na ugotovitvi, da učenci v primeru prisotnosti prej navedenih dejavnikov del pozornosti in kognitivne kapacitete preusmerijo v te dejavnike, zaradi česar grajenje miselne predstave pojma poteka bistveno počasneje. 5. Načelo modalnosti Učenje s pomočjo animacije je učinkovitejše, kadar so informacije podane v kombinaciji animacija avditorna informacija (učenec sliši informacijo), kakor v primeru animacija vizualna informacija (učenec bere informacijo). Načelo sloni na ugotovitvi, da lahko pride do preobremenitve vizualnega sistema obdelave informacij, kar povzroči pomanjkanje miselne kapacitete za povezovanje besed in slik, ki pojem opisujejo. 6. Načelo redundance Učenje je učinkovitejše, kadar so informacije podane v kombinaciji animacija avditorna informacija, kakor v primeru animacija avditorna informacija vizualna (pisana) informacija. Teoretsko ozadje je enako kot pri načelu modalnosti. 7. Načelo poosebljenosti Učenje je učinkovitejše, kadar je jezikovni slog, s katerim se predaja verbalna informacija, neformalen oz. oseben (uporaba zaimkov»jaz«in»ti«). Načelo sloni na ugotovitvi, da je učenčev fokus močnejši, kadar se čuti osebno vključenega v proces. Načela smo upoštevali pri izdelavi spletne aplikacije Programsko orodje za simulacijo Kardanske rešetke, ki hkrati predstavlja model za simulacijo, s katerim želimo vplivati na razvoj abstraktnega razmišljanja med učenci. 26

46 4. TEHNIČNA REALIZACIJA V tem poglavju bomo obravnavali tehnologijo, s katero je bila realizirana spletna aplikacija Programsko orodje za simulacijo Kardanskega rešeta. Povzeli bomo lastnosti HTML5, na katerem temelji naša aplikacija, ter opisali pojme, tehnologije, knjižnice in okolja, s pomočjo katerih je bila ta realizirana, to so CSS3, PHP, JavaScript, JQuery, Ajax, MySql, Bootstrap in Heroku HTML5 HTML5 je trenutna in peta verzija tega standarda. HTML (Hyper Text Markup Language, slovensko jezik za označevanje nadbesedila) je označevalni jezik za izdelavo spletnih strani. Predstavlja osnovo spletnega dokumenta. S HTML določamo zgradbo in semantični pomen delov dokumenta. Programski razčlenjevalnik v brskalniku (angl.»parser«) dokument razčleni in brskalnik dokument prikaže. HTML dokument se lahko izdela v poljubnem urejevalniku besedil, saj je zapisan v obliki elementov HTML, ki so sestavljeni iz značk v kotnih oklepajih (npr. <p>) znotraj vsebine spletne strani. Značke HTML so običajno zapisane v parih, npr. <p> in </p>. Prva značka se imenuje tudi začetna značka, druga pa končna značka. Znotraj para značk lahko oblikovalec spletne strani vpiše poljubno besedilo in tudi druge značke gnezdenje značk (HTML5 Reference, ). 27

47 Preprost primer sintakse HTML5 dokumenta: <!DOCTYPE html> <html lang="en"> <head> <title>kardanska rešetka</title> </head> <body> <p>"pozdravljen svet!"</p> </body> </html> Peta verzija standarda je izšla oktobra 2014 in predstavlja večji mejnik v razvoju HTML-ja, saj za razliko od prejšnjih inačic vključuje natančne modele procesov, ki omogočajo povezovanje različnih operacij; razširja ter z optimizacijo izboljšuje pretekle operacije s HTML dokumenti in prinaša programske vmesnike (angl.»api«), ki omogočajo razvoj kompleksnih spletnih aplikacij. Prav zato je tudi odlično sredstvo za razvijanje spletnih aplikacij, ki jih podpirajo različne platforme in mobilne naprave. Prinaša nabor novih elementov, ki lahko v številnih primerih nadomestijo funkcionalnost JavaScripta, pa tudi funkcije za delo z multimedijskimi vsebinami, shranjevanje podatkov brez povezave, povleci in spusti ter druge. Standard prinaša tudi določene sintaktične spremembe, katerih posledica je bolj strnjena koda. V spodnjem primeru je navedena značka, ki brskalniku sporoči, da obravnava HTML dokument: <!DOCTYPE html>, ki se je v prejšnjih verzijah HTML-ja zapisal v precej daljši obliki: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Standard je univerzalen in nudi podporo za vse jezike (Gornik, 2012). 28

48 Uporaba v aplikaciji: Aplikacija, ki smo jo izdelali, zajema novosti sintakse petega standarda HTML. Ogrodje vsake strani aplikacije je samostojen HTML dokument. Aplikacija vsebinsko in funkcionalno ne upošteva novosti, ki jih prinaša HTML CSS3 CSS (Cascading Style Sheets, slovensko kaskadne stilske podloge) je nabor kaskadnih stilov, ki ga uporabljamo pri oblikovnem snovanju dokumentov, zapisanih v označevalnem jeziku (največkrat HMTL in XHTML). S CSS definiramo stil označevalnih elementov v smislu pravil, kako naj se ti prikažejo na strani. Določamo lahko barve, velikosti, odmike, poravnave, obrobe, pozicije in vrsto drugih atributov, prav tako pa lahko nadziramo aktivnosti, ki jih uporabnik nad elementi strani izvaja (npr. prekritje povezave z miško). Bistvo uporabe CSS je, poleg definiranja pravil, predvsem ločitev strukture strani ki jo podaja označevalni jezik skupaj z vsebino od njenega videza. S tem omogočimo lažje urejanje in dodajanje stilov ter poskrbimo za večjo preglednost dokumentov, ki temeljijo na HTML sintaksi. Prav tako zmanjšamo ponavljanja kode, saj množici strani omogočimo uporabo istih podlog, kar lahko bistveno zmanjša njihovo velikost. Pravila za označevanje in predstavitev predmeta je mogoče zapisati v različne vire, zato CSS prepoznava pravila, kateri izmed stilov naj se predpiše. Omogočeno je tudi zlivanje oz. prepisovanje pravil iz več virov, kar imenujemo kaskadiranje. Vrednosti pravil z višjo prioriteto bodo prepisala tiste z nižjo, kar je predstavljeno v spodnjem seznamu prioritet, razvrščenem od najvišje do najnižje. 29

49 Avtorjev stil pridobljen s spletnega mesta, ki smo ga obiskali: Vrstični stil je definiran v notranjosti HTML elementa pod atributom style: <p style="color: red;">vsebina odstavka</p> Vgrajen stil je definiran znotraj HTML dokumenta med značkami style: <style type="text/css"> p { color: red; } </style> Zunanji stil je definiran znotraj CSS dokumenta (končnica.css) in je vključen v HTML stran vsebina dokumenta stil.css p{color: red;} vsebina dokumenta stran.html <head> <link rel="stylesheet" href=" type="text/css" /> </head> Uporabnikov stil uporabnik lokalno definira stil in prepiše brskalnikovega Brskalnikov stil brskalniki imajo privzet stil za vsakega izmed HTML elementov (CSS, Wikipedija, prosta enciklopedija, 2015) CSS3 med drugimi spremembami prinaša tudi 2D in 3D transformacije elementov. 30

50 Uporaba v aplikaciji: Aplikacija, ki smo jo izdelali, močno sloni na CSS3 in njegovi funkcionalnosti. Oblikovanje spletne strani (barva ozadja, oblika pisave, oblika slik, barva in oblika posameznih elementov) Postavitev elementov na spletni strani Transformacije in animacije elementov na spletni strani (drsenje in rotacija rešet) Posebni učinki (povečanje elementa, kadar smo z miško nad njim, spreminjanje barve na klik) 4.3. JAVASCRIPT JavaScript je objektni skriptni programski jezik. Skupaj s HTML in CSS velja za osnovni gradnik dinamičnih spletnih strani. Podprt je v večini novodobnih spletnih brskalnikov. Največkrat se uporablja za implementacijo funkcionalnosti na odjemalčevi strani HTML dokumenta za interakcijo z DOM elementi. Med najbolj značilne funkcionalnosti, ki jih lahko dosežemo z JavaScriptom, spadajo animacija elementov na strani (prikaz, skrivanje, spreminjanje velikosti, premikanje itn.), uporabniška interakcija (igre, uporabnikov nadzor elementov na strani), validacija vnesenih podatkov, preden so ti poslani strežniku. Jezik se uporablja tudi zunaj spletnega razvoja v dokumentih PDF in namiznih dodatkih. Pri rabi jezika v spletni strani se koda izvaja lokalno v uporabnikovem brskalniku, zato se brskalnik na uporabnikove vnose lahko odziva relativno hitro, kar dela JavaScript aplikacije odzivne. Skript v spletni dokument vključimo z oznako <script>. S to oznako brskalniku sporočimo, da želimo vdelano kodo izvajati in ne prikazati. Z dodatnim atributom <type> povemo, v katerem jeziku je vdelana koda zapisana (JavaScript, Wikipedija, prosta enciklopedija, 2016). 31

51 Primer vdelave v spletni dokument: <!DOCTYPE html> <html lang = "en" > < head > < meta charset="utf-8"> <title>primer</title> </head> <body> <h1 id = "header" > JavaScript </ h1 > </body> </html> < script type="text/javascript"> //Vdelana JavaScript koda </script> Uporaba v aplikaciji: Z JavaScriptom so realizirane interaktivne lastnosti aplikacije na strani odjemalca JQUERY jquery je najpogosteje uporabljana JavaScript knjižnica, ustvarjena z namenom, da poenostavi skriptiranje HTML dokumentov na odjemalčevi strani. Je brezplačen in licenciran z MIT licenco. Oblika jquery sintakse poenostavi navigacijo skozi spletni dokument in dostopanje do DOM elementov dokumenta, omogoča ustvarjanje animacij in poenostavi rokovanje z dogodki. Z jquery knjižnico enostavno iščemo, izbiramo in manipuliramo DOM elemente. Na primer, z jquery lahko poiščemo element v dokumentu glede na določene atribute elementa (recimo vse značke h1) in elementu prirejamo različne lastnosti, kot so stilna prezentacija, vsebina, položaj. JQuery omogoča omenjene manipulacije v kontekstu dogodkov na spletni strani (klik na gumb). Prednosti uporabe jquery: 32

52 Razdruževanje JavaScripta in HTML: jquery omogoča preprosto sintakso za dodajanje odzivov na dogodke na DOM elementih z JavaScriptom, kar je preprostejša alternativa za uporabo HTML dogodkov, ki nato prožijo določene JavaScript funkcije. Na ta način usmerja razvijalca, da skripte razvije ločeno od HTML dokumenta. Jedrnatost in jasnost. Združljivost z brskalniki: določene komponente JavaScripta ne delujejo ali ne delujejo enako v vseh brskalnikih jquery to pomanjkljivost odpravlja. Razširljivost: preprosto dodajanje dogodkov, elementov in metod, ki jih lahko ponovno uporabimo kot vtičnik. (jquery API, ) Knjižnico v svoj dokument vključimo z naslednjima zapisoma: <script src = "jquery.js" ></ script > <script src = " ></ script > V primeru prvega zapisa moramo knjižnico shraniti lokalno, z drugim zapisom pa do knjižnice dostopamo neposredno preko spleta (jquery, ). Uporaba v aplikaciji: S pomočjo jqueryja v JavaScript logiki iščemo in manipuliramo z DOM objekti AJAX Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih tehnik, uporabljenih za ustvarjanje interaktivnih spletnih aplikacij. Z Ajaxom si lahko spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju, brez potrebe po ponovnem nalaganju strani. Ajax vključuje naslednje tehnologije: HTML, CSS, DOM, XML, XMLHttpRequest ter JavaScript, ki povezuje vse te tehnologije. Ajax aplikacije dajejo vtis, kot da v celoti tečejo na računalniku uporabnika. Običajna spletna aplikacija namreč za vsako spremembo na strani pošlje zahtevo HTTP, strežnik pa kot odgovor pošlje celotno stran. Brskalnik mora zato osvežiti celotno stran, s tem pa pride do motečega obnavljanja strani. Spletna aplikacija je zato počasna in čisto nič podobna namiznim. 33

53 Aplikacije Ajax so prirejene za generiranje poizvedb za strežnik, tako da pošljejo samo tiste podatke, ki jih dejansko potrebujejo. Klic se opravi kot asinhrona komunikacija, torej lahko, medtem ko aplikacija čaka podatke iz strežnika, uporabnik nemoteno uporablja spletno stran. Ko so podatki pripravljeni, določena funkcija v JavaScriptu prikaže podatke na strani, brez potrebe po ponovnem nalaganju. Posledica tega je uporabniški vmesnik, ki se veliko hitreje odziva na vnose uporabnika. Razlog za vpeljavo te tehnologije je tudi dejstvo, da se med odjemalcem (brskalnikom) in strežnikom prenese veliko manj podatkov ter da poteka nalaganje podatkov asinhrono. Poleg tega se zmanjša obremenitev spletnega strežnika, ker se veliko obdelave lahko naredi na strani odjemalca. S tem je mogoče tekoče in hitrejše spremljanje ter spreminjanje vsebine na spletni strani. Podatki se prenašajo s pomočjo objektov XMLHttpRequest ali s pomočjo Remote Scriptinga (Ajax ). Uporaba v aplikaciji: Tehnologijo Ajax uporabljamo za asinhrono pošiljanje uporabnikovih odgovorov strežniku PHP PHP (PHP: Hypertext Preprocessor) je odprtokodni objektni skriptni programski jezik za spletni razvoj, ki se pogosto izvaja na strežniški strani. Ustvaril ga je Rasmus Lerdorf leta Za razvoj skrbi PHP Group, zaščiten je s PHP licenco, ki prepoveduje uporabo besede PHP v imenovanju kode, izdelane s PHP, kar je razlog, da jezik ni licenciran z licenco GPL. Gre za vsestranski programski jezik, ki je najpogosteje uporabljen za implementacijo logike in dinamičnega ustvarjanja strani na strežniški strani, kjer se PHP izvaja. Funkcija PHP-ja v spletnem razvoju je po navadi posredniška, saj prestreza podatke iz datotek s PHP ukazi ali tekstom, nad podatki izvede operacije in jih vrne kot rezultat, največkrat v obliki HTML. 34

54 PHP je mogoče uporabljati tudi kot skriptni jezik v znakovnem uporabniškem vmesniku in v grafičnih vmesnikih aplikacij na odjemalčevi strani. Namestimo ga lahko na širok nabor spletnih strežnikov, operacijskih sistemov in platform ter ga uporabimo za komunikacijo s podatkovno baznimi strežniškimi sistemi, kot so PostreSQL, MySQL, MS SQL Server in SQLite. Nameščen je lahko kot samostojna komponenta ali pa kot del predpripravljenih razvojnih arhitektur, kot so LAMP, WAMP, MAMP in drugi (PHP, ). Primer uporabe PHP v HTML dokumentu: <!DOCTYPE html> <html> <head> <title>php Test</title> </head> <body> <?php echo '<p>pozdravljen svet!</p>';?> </body> </html> Uporaba v aplikaciji: S PHP-jem je realizirana celotna logika aplikacije na strežniški strani ter dinamično generiranje strani aplikacije MYSQL MySQL je sistem za upravljanje s podatkovnimi bazami. Je odprtokodna implementacija relacijske podatkovne baze, ki za delo s podatki uporablja jezik SQL. Julija 2013 je bil drugi najpogosteje uporabljen sistem za upravljanje s podatkovnimi bazami. Izvorna koda je licencirana z GNU GPL licenco in je v lasti Oracle Corporation. MySQL je priljubljena izbira za spletne aplikacije. Nameščen je lahko samostojno ali kot del predpripravljenih razvojnih arhitektur, kot so LAMP in ostale»amp«arhitekture. Nekatere izmed najbolj prepoznavnih spletnih aplikacij, ki uporabljajo MySQL, so TYPO3, MODx, Joomla, WordPress, phpbb, MyBB, Drupal, Google, Facebook, Twitter, Flick, YouTube. 35

55 Do baze lahko dostopamo in z njo operiramo preko znakovnega uporabniškega vmesnika, a pogostejša praksa je uporaba grafičnih vmesnikov, saj so, sploh za začetnega uporabnika, bolj intuitivni in obvladljivi. Med najbolj priljubljene grafične vmesnike za delo z MySQL sodijo My SQL Workbech, Adminer, Database Workbench, DBEdit, HeidiSQL, LibreOffice Base, Navicat, OpenOffice.org Base, phpmyadmin idr. (MySQL ). Uporaba v aplikaciji: Aplikacija uporablja MySQL za shranjevanje podatkov uporabnikov aplikacije BOOTSTRAP Bootstrap je brezplačno odprtokodno spletno ogrodje za oblikovanje spletnih strani in spletnih aplikacij. Prinaša oblikovne predloge za tipografijo, obrazce, gumbe, navigacijske in ostale elemente, ki slonijo na HTML in CSS oblikovanju. Bootstrap, ki se je najprej imenoval Twitter Blueprint, sta razvila Mark Otto in Jacob Thornton pri Twitterju. V svojih začetkih je šlo za oblikovno ogrodje, namenjeno interni rabi v Twitterju za oblikovno enotnost. Interno ogrodje je raslo ter se razvijalo in avgusta 2011 bilo objavljeno za javno uporabo. Ogrodje je združljivo z novejšimi verzijami brskalnikov Google Chrome, Firefox, Internet Explorer, Opera in Safari. Druga verzija ogrodja podpira odzivno oblikovanje oblikovanje, ki se dinamično prilagaja velikosti zaslona, ki aplikacijo ali stran prikazuje (klasično namizje, tablice, telefoni). Razvijalec lahko prikaže in funkcionalnost prilagaja svojim potrebam tako, da spreminja oz. nadgrajuje izvorne Less in CSS podloge. Ogrodje vsebuje tudi JavaScript vtičnike za spletne elemente: načinovna okna, spustni meniji, zavihki, pojavna okna, gumbi in drugi (Bootstrap, ). Uporaba v aplikaciji: Celotna grafična podoba aplikacije in njenih gradnikov sloni na Bootstrap. 36

56 4.7. HEROKU Heroku je storitev v oblaku, ki uporabnikom na preprost način nudi infrastrukturo in okolje za spletne aplikacije. Začetki platforme segajo v leto 2007, leta 2010 pa jo je kupil Salesforce.com. S preprostimi koraki razvijalcem nudi okolje za razvoj spletnih aplikacij, platforma sama skrbi za namestitev in vzdrževanje infrastrukture strežnika, baze, operacij in skaliranja. Trenutno je podprta z naslednjimi programskimi jeziki: Node.js, Ruby, Java, PHP, Python, Go, Scala in Clojure. Omogoča uporabo baz MySQL, PostgreSQL in SQLite. Uporaba platforme Heroku je v osnovi brezplačna, z različnimi paketi pa je mogoče zakupiti zmogljivejše okolje (Heroku, ). Uporaba v aplikaciji: Spletna aplikacija Programsko orodje za simulacijo Kardanskega rešeta je bilo razvita lokalno in v zadnjem stadiju prenesena na platformo Heroku, kjer je dostopna na povezavi: 37

57 5. PROGRAMSKO ORODJE ZA SIMULACIJO KARDANSKE REŠETKE V tem poglavju bomo natančneje obravnavali izdelano spletno aplikacijo Programsko orodje za simulacijo Kardanske rešetke s konkretnimi primeri iz same aplikacije in primeri kode implementiranih funkcionalnosti. Realizacijo delov aplikacije bomo opisali glede na njeno strukturo Začetno in končno preverjanje Po nagovorni strani aplikacije uporabnik vstopi na stran začetnega preverjanja. V trenutku, ko se stran naloži, se v ozadju sproži JS funkcija, ki ustvari enolično identifikacijsko številko za uporabnika in jo shrani v lokalno shrambo brskalnika. Identifikacijska številka bo skozi celotno aplikacijo referenca, ki bo uporabljena, da bodo podatki v bazi aplikacije shranjeni pravilno oz. bodo pripadali pravilnemu uporabniku. Izsek kode, ki generira identifikacijsko številko uporabnika in jo shrani v lokalno shrambo brskalnika: 38

58 // funkcija guid(), ki ustvari niz znakov // (primer: 'a13d f8cd-14c2-921baef3d4c0') // pridobljeno s function guid() { function s4() { return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1); } return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); } // ustvarjeno identifikacijski niz shranimo v spremenljivko uporabnikovid var uporabnikovid = guid(); // spremenljivko shranimo v lokalno shrambo brskalnika localstorage.setitem("uporabnikovid", uporabnikovid); Hkrati aplikacija zabeleži čas, ko se je stran naložila. Informacijo o času in uporabnikovem identifikacijskem nizu pošlje na strežnik, kjer se podatka zapišeta v podatkovno bazo. Dogodek se ponovi, ko uporabnik aplikacije vstopi na stran končnega preverjanja. Beleženje trenutnega časa, pridobitev uporabnikovega identifikacijskega niza in pošiljanje podatkov strežniku (JS, odjemalec): //pridobivanje trenutnega časa var zacetni_cas = Math.floor(Date.now() / 1000).toString(); // pridobivanje uporabnikovega ID iz lokalne shrambe brskalnika var uporabnikov_id = localstorage.getitem("uporabnikovid"); //Ustvarjanje Http klica, pošiljanje podatkov skriptu shrani_sejo.php na strežniku var http = new XMLHttpRequest(); http.open("post", "shrani_sejo.php", true); http.setrequestheader("content-type", "application/x-www-form-urlencoded"); http.send("uporabnikov_id=" + uporabnikov_id + "&zacetni_cas=" + zacetni_cas); 39

59 Na strežniški strani se izvede koda skripta»shrani_sejo.php«: <?php //ustvarimo povezavo z bazo definirano v datoteki 'connect.php' include 'connect.php'; //prestrežemo podatke, ki jih je poslal odjemalec if (isset($_post['uporabnikov_id'])) { uporabnikov_id = $_POST['uporabnikov_ID']; } if (isset($_post['zacetni_cas'])) { zacetni_cas = $_POST['zacetni_cas']; } //podatke shranimo v podatkovno bazo $stmt = $db ->prepare("insert INTO `results` (sessionid) VALUES (?)"); $stmt ->bind_param('s', uporabnikov_id); $stmt->execute(); $stmt->close(); $sql = "UPDATE results SET field0 =? WHERE sessionid =?"; $stmt = $db->prepare($sql); $stmt ->bind_param('ss', zacetni_cas, uporabnikov_id); $stmt->execute(); $stmt->close();?> Vsebinsko je stran sestavljena iz treh nalog, ki od uporabnika terjajo odgovor. Prva in druga naloga temeljita na prikazani sliki (Slika 7): Slika 7: Zaslonska slika aplikacije med uporabo 40

60 Na levi strani je vidna matrika črk in na desni rešeto z izluknjanimi oziroma razkritimi celicami. Uporabnik mora v prvo besedilno polje zapisati geslo, ki bi ga videl, če bi matriko črk prekril z rešetom, zasukanim za 90 v smeri urinega kazalca, in v drugo besedilno polje geslo, ki bi se prikazalo, če bi rešeto zavrtel za 90 v nasprotni smeri urinega kazalca. Matrika črk in rešeto sta definirana v HTML obliki. Vsaka celica je element zase, ki mu je mogoče pripisati oblikovne ali druge lastnosti. Izsek kode prve vrstice matrike črk iz slike 7: <!-- row 1 --> <div class="code c-1-1"><p>a</p></div> <div class="code c-1-2" style=" border-style solid; border-width 5px; border-color #1abc9c;"><p>C</p></div> <div class="code c-1-3"><p>t</p></div> <div class="code c-1-4"><p>i</p></div> <div class="code c-1-5"><p>p</p></div> <div class="code c-1-6"><p>s</p></div> V tretji nalogi preverjanja mora uporabnik med štirimi rešeti izbrati tista, ki so veljavna. S klikom in izbiro nekega rešeta, se to obarva modro (Slika 8). Slika 8: Z izbiro možnosti med reševanjem naloge se rešetka obarva modro Skript se odziva na dejanja uporabnika. Kadar uporabnik s kurzorjem miške potuje čez katero od rešet, se to nekoliko poveča. Kadar na rešeto klikne, ga izbere. Če klikne isto rešeto še enkrat, ga umakne iz svoje izbire, rešeto pa se znova obarva sivo. Ob uporabnikovi izbiri nekega rešeta skript z jquery sintakso razbere, za katero rešeto gre in podatek shrani v spremenljivko, ki je kasneje poslana strežniku. Za opisano delovanje torej uporabnikovo 41

61 izbiranje rešet in manipulacijo spremenljivke, v katero shranjujemo uporabnikov izbor, skrbi spodnji del kode: //prazna tabela, v katero bomo shranjevali uporabnikovo izbiro selected_grilles = []; //dogodek, kadar uporabnik klike na katero od rešet $('.grille3_wrapper').click(function () { $(this).children('.grille3').each(function (i, obj) { var grille_color = $(this).css("background-color"); // označevanje oz. odznačevanje izbranega rešeta switch (grille_color) { case "rgb(128, 128, 128)": $(this).css({ 'background-color': 'rgb(0, 115, 153)' }); break; }); } case "rgb(0, 115, 153)": $(this).css('background-color', 'rgb(128, 128, 128)'); break; }); var retrieved_text = $(this).find(".box_text").text() // shranjevanje podatkov izbire, ki bodo poslani strežniku if (selected_grilles.indexof(retrieved_text) >= 0) { selected_grilles.splice(selected_grilles.indexof(retrieved_text), 1); } else { selected_grilles.push(retrieved_text); } Ko uporabnik v besedilno polje zapiše svoj odgovor ali ga izbere, svoj odgovor oz. izbiro potrdi s klikom na gumb»potrdi«. To dejanje sproži dogodek, ki shrani čas, ko je bil gumb pritisnjen, spremeni barvo in besedilo gumba ter podatke pošlje na strežnik: 42

62 var sent2 = false; $(document).ready(function () { //dogodek ob pritisku na gumb $(document).on('submit', '#shrani_drugo', function () { //branje podatkov, ki jih je uporabnik vnesel var form = $("#shrani_drugo"); var druga_naloga = $("[name='druga_naloga']", form).val(); var user_id = localstorage.getitem("userid"); //čas, ko je gumb bil pritisnjen var currenttime = Math.floor(Date.now() / 1000).toString(); //pošiljanje podatkov na strežnik $.ajax({ type: 'POST', url: 'store_to_db2.php', data: { druga_naloga: druga_naloga, userid: user_id, currenttime: currenttime }, success: function (data) { $("#reg-form").fadeout(500).hide(function () { $(".result").fadein(500).show(function () { $(".result").html(data); }); }); }); } }); }); //spreminjanje lastnosti gumba po kliku nanj $("#potrdi2").html('poslano'); $("#potrdi2").css({ 'background-color': 'rgb(26, 188, 156)', 'border-color': 'rgb(12, 90, 74)' }); sent2 = true; //šele, ko uporabnik potrdi vse odgovore na strani, //se prikaže na dnu strani gumb, s katerim nadaljuje //na naslednjo stran if (sent1 && sent2 && sent3) { $("#first_pager").css({ 'visibility': 'visible' }); } return false; 43

63 5.2. Vadnica V delu vadnice se uporabnikovi odgovori ne pošiljajo na strežnik. Za razliko od začetnega in končnega preverjanja so elementi (matrike črk in rešeta) interaktivni in animirani. Pri prvi nalogi uporabnik spozna Kardansko rešeto in metodo steganografije. Slika 9: Razkrita Kardanska rešetka v aplikaciji S klikom na gumb se rešeto pomakne navzgor in prekrije zapisano besedilo. Skozi luknje rešeta se prikaže skrito sporočilo (Slika 10): Slika 10: Prekrita Kardanska rešetka v aplikaciji 44

64 Rešeto in besedilo sta slikovna elementa, vključena v HTML dokument, animacijo pa dosežemo z JavaScript funkcijo: HTML: <!--slika besedila--> <img src="cardan_text2.png" class="img-responsive center-block" alt="cardan text"> <!--transparentna slika rešeta--> <img src="transparent_grille.png" class="img-responsive center-block" alt="original cardan grille"> <!--gumb, ki sproži akcijo--> <button class="btn btn-primary" id="together4">klik</button> Iz zgornje kode je razvidno, da smo atributu»id«, ki ga ima gumb, pripisali vrednost»together4«. To lastnost bomo uporabili v skriptu: JS: //dogodek, ki se sproži ob kliku na element // z atributom id=together4 $("#together4").click(function () { switch (together4) { //če elementa nista združena, ju združimo case 0: //s spreminjanjem CSS lastnosti rešeta, ga s funkcijo 'translate' //pomaknemo navzgor document.getelementbyid('original_grille').style[prop] = "translate(0,220px)"; together4 = 1; break; }; //če sta elementa združena, ju ločimo case 1: //s spreminjanjem CSS lastnosti rešeta, ga s funkcijo 'translate' //pomaknemo v prvotno pozicijo document.getelementbyid('original_grille').style[prop] = "translate(0, 0px)"; together4 = 0; break; }); V drugi in tretji nalogi uporabnik vidi v prvem primeru matriko črk in rešeto velikosti 4 x 4, v drugem primeru pa 6 x 6. Podobno kot pri prvi nalogi, s klikom na gumb združi ali razdruži par matrike in rešeta. S pritiskom na levo ali desno puščico na tipkovnici lahko uporabnik poljubno vrti rešeto in s tem pozicijo za pozicijo razkriva šifrirano besedilo vrtečega se rešeta. Besedilo, 45

65 ki se razkrije, uporabnik vnese v besedilno polje in svoj odgovor potrdi s pritiskom na gumb»potrdi«. Aplikacija na mestu preveri pravilnost odgovora in nudi uporabniku povratno informacijo. Rotacija rešeta iz prve v drugo pozicijo, ki jo uporabnik doseže s pritiskom na desno puščico na tipkovnici: Slika 11: Rešetka v prvi poziciji Slika 12: Rotacija rešetke za 90 stopinj Slika 13: Rešetka v drugi poziciji 46

66 Rotacijo rešeta dosežemo s skriptom: JS: var xangle = 0 //dogodek ob pritisku gumba na tipkovnici $('body').keydown(function (evt) { }); switch (evt.keycode) { //če je pritisnjena leva puščica, //spremenljivki xangle odštejemo 90 case 37: xangle -= 90; break; }; //če je pritisnjena desna puščica, //spremenljivki xangle prištejemo 90 case 39: xangle += 90; break; //element z atributom class=cube3 (rešeto) zavrtimo za vrednost spremenljivke //xangle document.getelementbyid('cube3').style[prop] = "rotatez(" + xangle + "deg)"; V zadnjem sklopu vadnice uporabnik izdela svoje vrteče se rešeto velikosti 6 x 6 in poljubno besedilo s pomočjo aplikacije vnese v matriko črk tako, da ga je mogoče razbrati le z rešetom, ki ga je izdelal. V prvem koraku se uporabniku prikaže neizluknjano rešeto (sive barve). Uporabnik s pomočjo aplikacije izdela rešeto, ki je veljavno. To pomeni, da se nobena luknja rešeta v vseh štirih pozicijah rešeta ne sme prekriti z neko drugo luknjo. Ko uporabnik klikne na celico rešeta, ga izluknja. Izbrana celica se obarva temno zeleno, s svetlo zeleno barvo pa se obarvajo pozicije izluknjane celice v ostalih treh pozicijah rešeta, ki jih uporabnik, da bi rešeto bilo veljavno, ne more izluknjati. Svojo izbiro uporabnik razveljavi s ponovnim klikom na izluknjano celico v prvi poziciji, torej celico temno zelene barve. 47

67 Primer uporabnikovega izdelanega rešeta (Slika 14): Slika 14: Uporabnikovo rešeto Vsaka od 36 celic rešeta je samostojen HTML element z drugačnim imenom atributa»class«, vsa imenovanja pa sledijo isti konvenciji: <div class="grille diy g-y_koordinata-x_koordinata"></div> Primer imenovanja celice rešeto skrajno levo zgoraj in skrajno desno spodaj: <!--skrajno levo zgoraj, koordinati (1,1)--> <div class="grille diy g-1-1"></div> <!--skrajno desno spodaj, koordinati (6,6)--> <div class="grille diy g-6-6"></div> S klikom na neko celico rešeta skript celico obarva temno zeleno, preko imena celice pridobi koordinate celice, ki jih uporabi za izračun položaja celice v ostalih treh pozicijah. Slednje obarva s svetlo zeleno barvo. Če poznamo koordinate neke celice (x, y), njen položaj po rotaciji za 90 v smeri urinega kazalca izračunamo s funkcijo: f(x, y) = { x = n y + 1 y = x 48

68 Opisano obnašanje dosežemo s skriptom: JS: //funkcija, ki kot argument sprejme objekt koordinat celice in barvo function highlightblockfinal(block, color){ //koordinate objekta spremenimo v niz imena var blockclass = "grille final g-" + parseint(block.y) + "-" + parseint(block.x); //z jqueryjem pridobimo element na podlagi imena var elt = document.getelementsbyclassname(blockclass); var jquery_elt = $(elt); } //elementu spremenimo barvo $(jquery_elt).css( 'background-color', color); //funkcija, ki za argument sprejme niz znakov (vrednost attributa class) //Iz imena razbere koordinate celice in ustvari objekt 'block' function getblock(classstring) { var x_coordinate = parseint(classstring.charat(15)); var y_coordinate = parseint(classstring.charat(13)); } var block = { "x": x_coordinate, "y": y_coordinate, }; return block; $(document).ready(function() { $(function () { //dogodek ob kliku na celico rešeta $('[class^="grille diy"]').click(function () { //v spremenjljivko gotclass shranimo vrednost atrributa class izbrane //celice var gotclass = this.classname; //iz pridobljenega imena s fukncijo getblock() ustvarimo objekt //koordinat var clicked_block = getblock(gotclass); //s fukncijo highlightblock() obarvamo izbrano celico temno zeleno highlightblock(clicked_block, SELECTION_COLOR) }); } }); for (i = 0; i < 3; i++) { //s fukncijo rotatecoordinates() pridobimo koordinate //celice v naslednji poziciji in jo obarvamo svetlo zeleno var rotated_block = rotatecoordinates(clicked_block); highlightblock(rotated_block, ROTATED_SELECTION_COLOR); clicked_block = rotated_block; } 49

69 Celice, ki jih uporabnik izluknja, aplikacija shranjuje v podatkovno tabelo elementov koordinat izluknjanih celic rešeta. V zadnjem koraku izdelave se pred uporabnikom prikaže prazna matrika črk, prikrita z rešetom, ki ga je izdelal (Slika 15). Uporabnik lahko rešeto poljubno vrti ali ga v celoti skrije tako, da vidi samo matriko črk. V besedilno polje vnaša besedilo, ki ga aplikacija črko za črko vnaša na prazno matriko črk, na pozicije lukenj rešeta, ki ga je izdelal. Ko dolžina vnesenega niza zapolni vse luknje rešeta v neki poziciji, se rešeto samodejno zavrti v naslednjo pozicijo. Če uporabnik vnesen niz briše, aplikacija izbrisane črke odstrani iz matrike črk in samodejno prilagaja pozicijo rešeta. Slika 15: Izdelovanje svojega šifriranega besedila 50

70 Vpisovanje uporabnikovega vnosa na matriko črk dosežemo z JavaScript funkcijo: JS: //funkcija za argumente sprejme vneseno besedilo, //koordinate celice v katero mora črko vpisati, //informacijo če gre za novo črko, ali brisanje stare function writeblock(input_str, block, action) { //iz koordinat celice ustvarimo ime elementa, ki bo spremenjen var blockclass = "code diy c-" + parseint(block.y) + "-" + parseint(block.x); //s pomočjo imena z jqeryjem pridobimo element var elt = document.getelementsbyclassname(blockclass); var jelt = $(elt); var paraghraph = jelt.find("p"); } if (action == 0) { //če gre za nov vnos, pridobimo zadnjo črko vnosa in jo zapišemo var last_input = input_str.slice(-1); paraghraph.text(last_input); } else { //če gre za brisanje, izbrišemo obstoječ vnos paraghraph.text(""); } 5.3. Rezultati Na zadnji strani aplikacije se izrišeta tabeli z rezultati uporabnikovega začetnega in končnega preverjanja. V tabeli je prikazan uporabnikov odgovor, pravilen odgovor in čas, ki ga je uporabnik potreboval za reševanje naloge. Tik preden se naloži stran z rezultati, skript na odjemalčevi strani še zadnjič iz lokalne shrambe prebere uporabnikov identifikacijski niz in ga pošlje na strežnik. Na strežniku PHP skript prestreže uporabnikov identifikacijski niz, se poveže na bazo in pridobi vrstico, v kateri so shranjeni odgovori uporabnika in čas, ko je odgovore poslal: 51

71 PHP: <?php //povezava z bazo podatkov include 'connect.php'; //branje uporabnikovega identifikacijskega niza if (isset($_post['userid'])) { $userid = $_POST['userID']; } // SQL poizvedba, ki pridobi podatke celotne baze $sql = "SELECT * FROM results"; $result=$db->query($sql); //pridobivanje podatkov za določenega uporabnika while ($row=$result->fetch_object()) { $sessionid = $row->sessionid; }?> //shranjevanje uporabnikovih podatkov v spremenjljivke if ($sessionid == $userid) { $sessionid = htmlentities($row->sessionid, ENT_QUOTES, "UTF-8"); $field0 = htmlentities($row->field0,ent_quotes,"utf-8"); $field1 = htmlentities($row->field1,ent_quotes,"utf-8"); $field2 = htmlentities($row->field2,ent_quotes,"utf-8"); $field3 = htmlentities($row->field3,ent_quotes,"utf-8"); $field4 = htmlentities($row->field4,ent_quotes,"utf-8"); $field5 = htmlentities($row->field5,ent_quotes,"utf-8"); $field6 = htmlentities($row->field6,ent_quotes,"utf-8"); $field7 = htmlentities($row->field7,ent_quotes,"utf-8"); $field8 = htmlentities($row->field8,ent_quotes,"utf-8"); $field9 = htmlentities($row->field9,ent_quotes,"utf-8"); $field10 = htmlentities($row->field10,ent_quotes,"utf-8"); $field11 = htmlentities($row->field11,ent_quotes,"utf-8"); $field12 = htmlentities($row->field12,ent_quotes,"utf-8"); $field13 = htmlentities($row->field13,ent_quotes,"utf-8"); } Podatke, ki smo jih pridobili in shranili v spremenljivke, uporabimo za izračun trajanja reševanja posamezne naloge in preverjanja pravilnosti vnesenih odgovorov. Če je uporabnik nalogo, ki preverja iste učne cilje, pri drugem reševanju izpolnil hitreje, se bo prikazan čas reševanja naloge v tabeli obarval zeleno, sicer rdeče. Z izračunanimi vrednostmi, z vdelanimi PHP segmenti, dinamično ustvarimo tabelo. 52

72 Dinamično kreiranje prve vrstice druge table: <tr> <td>1</td> <!--1. naloga--> <td> <?php echo $field7;?> <!--uporabnikov odgovor--> </td> <td>luknjasta</td> <!--previlen odgovor--> <!--dinamično obarvanje potrebovanega časa za dokončanje naloge--> <td <?php if ($time4 <= $time1){?> style="color: green; font-weight: bold;" <?php } else{?> style="color: red;" <?php }?>> <?php echo $time4?> </td> <!--preverjanje pravilnosti uporabnikovega odgovora in dinamična izbira grafičnega prikaza pravilnosti ali nepravilnosti--> <td> <?php $field7_no_space = str_replace(' ', '', $field7); $field7_upper = strtoupper($field7_no_space); if($field7_upper == "LUKNJASTA") {?> <img src="correct5.png" /> <?php } else {?> <img src="wrong5.png" /> <?php } </tr>?> </td> Primer dinamično ustvarjene tabele, ki se prikaže uporabniku: Slika 16: Prikaz rezultatov končnega preverjanja 53

73 6. EMPIRIČNA RAZISKAVA Spletna aplikacija Programsko orodje za simulacijo Kardanske rešetke je bila javno dostopna na spletnem naslovu S pilotsko raziskavo smo želeli oceniti uporabo modela Kardanskega rešeta oziroma njegove interaktivne simulacije za izboljšanje abstraktnih oziroma prostorskih predstav uporabnikov. Spletna aplikacija sestoji iz treh sklopov; začetnega preverjanja, vadnice in končnega preverjanja. Začetno in končno preverjanje (imenovano tudi predtest in potest) sestavljajo tri naloge, ki v parih (1. in 4. naloga, 2. in 5. naloga ter 3. in 6. naloga) preverjajo iste učne cilje. Aplikacija samodejno shranjuje uporabnikove odgovore in čas, ki ga je uporabnik potreboval, da je na vprašanje odgovoril oziroma rešil nalogo. V tej raziskavi nas zanima, v kolikšni meri so odgovori uporabnikov aplikacije pravilni in koliko časa so potrebovali za posamezne odgovore ter predvsem, ali je mogoče opaziti spremembe v rezultatih začetnega in končnega preverjanja po uporabi vadnice v spletni aplikaciji Opis vzorca Ciljna skupina uporabnikov aplikacije so bili slovenski srednješolci. Ta skupina je bila izbrana na podlagi podobne ciljne skupine v raziskavi PISA. K preizkusu spletne aplikacije smo uporabnike povabili preko spletnega portala dijaski.net in spletnega družbenega omrežja Facebook. Na Facebooku smo povabili k sodelovanju srednješolce v skupini»matura 2016«ter skupini, ki združuje dijake Dvojezične srednje šole Lendava. Ker je vabilo bilo javno, sklepamo, da uporabniki aplikacije niso bili izključno srednješolci. 54

74 6.2. Splošni podatki Aplikacija je od trenutka, ko je postala javno dostopna, do časa analize, zabeležila 425 obiskov. V analizi empirične raziskave smo uporabili le koherentne rezultate, ki sledijo naslednjim kriterijem: Čas reševanja nalog je krajši od 1 ure Uporabnikov, ki so naloge v spletni aplikaciji reševali dlje, je bilo 8. Noben odgovor ni prazen Uporabnik obišče spletno aplikacijo, vendar ne rešuje nalog ali nalog ne reši v celoti. Takšnih uporabnikov je bilo 359. Odgovori so umestni V analizo niso vključeni rezultati, pri katerih so odgovori zaporedje znakov ali besed, ki niso prisotni v matriki črk nalog, ki so jih uporabniki reševali. Primeri takšnih vnosov so:»?«,»qwert«... Uporabnikov, ki so vnašali tovrstne znake ali besede, je bilo 10. V analizi smo uporabili rezultate 48 uporabnikov. 55

75 6.3. Analiza odgovorov Delež pravilnih odgovorov Pri začetnem preverjanju so uporabniki pravilno rešili nalogo 89-krat, kar predstavlja 62 odstotkov pravilnih odgovorov med vsemi podanimi odgovori. Pri končnem preverjanju so uporabniki oddali pravilen odgovor 105-krat, kar predstavlja 73 odstotkov pravilnih odgovorov med vsemi podanimi odgovori. Grafikon 1: Delež pravilnih odgovorov pri začetnem preverjanju Grafikon 2: Delež pravilnih odgovorov pri končnem preverjanju Ugotavljamo, da so uporabniki po uporabi vadnice v aplikaciji oddali 16 pravilnih odgovorov več oziroma je bilo število pravilnih odgovorov višje za 11 odstotkov. 56

76 Prvi par nalog (1. in 4. naloga) Prvi par nalog preverja zmožnost prostorske predstavitve rešetke, ki smo jo zavrteli za pravi kot v nasprotni smeri urinega kazalca, in zmožnost pravilnega branja razkritega besedila po vrsticah po vrtenju rešetke. Pri 1. nalogi (začetno preverjanje) je pravilen odgovor (»ISAWESOME«) podalo 33 uporabnikov oziroma 69 odstotkov uporabnikov. Pri enaki 4. nalogi (končno preverjanje) je pravilno (»LUKNJASTA«) odgovorilo 39 uporabnikov oziroma 81 odstotkov uporabnikov. Grafikon 3: Odgovori 1. naloga Grafikon 4: Odgovori 4. naloga Ugotavljamo, da je po uporabi vadnice v aplikaciji pravilen odgovor podalo 6 uporabnikov več oziroma 12 odstotkov več kot pri začetnem preverjanju. 57

77 Drugi par nalog (2. in 5. naloga) Drugi par nalog preverja zmožnost prostorske predstavitve rešetke, ki smo jo zavrteli za pravi kot v smeri urinega kazalca, in zmožnost pravilnega branja razkritega besedila po vrsticah po vrtenju rešetke. Pri 2. nalogi (začetno preverjanje) je pravilen odgovor (»THINGTODO«) podalo 39 uporabnikov oziroma 81 odstotkov uporabnikov. Pri enaki 5. nalogi (končno preverjanje) je pravilno odgovorilo (»JERESETKA«) 40 uporabnikov oziroma 83 odstotkov uporabnikov. Odgovori 2. naloga NEVEM NIOGTOTH NIOGTOTHD NWM SOAEEIWMS THINGTO DO; 81% THINGTODO UNOCPIMGT Grafikon 5: Odgovori 2. naloga Grafikon 6: Odgovori 5. naloga Ugotavljamo, da je po uporabi vadnice v aplikaciji pravilen odgovor podal 1 uporabnik več oziroma 2 odstotka več kot pri začetnem preverjanju. 58

78 Tretji par nalog (3. in 6. naloga) Tretji par nalog preverja zmožnost sledenju pravil za izgradnjo rešetke, kar pomeni med rešetkami prepoznati tiste, ki so veljavne oz. ki ob upoštevanju pravil štejejo za veljavno rešetko. Pri 3. nalogi (začetno preverjanje) je pravilen odgovor (»A, D«) podalo 17 uporabnikov oziroma 35 odstotkov uporabnikov. Pri enaki 6. nalogi (končno preverjanje) je pravilen odgovor (»B, D«) podalo 26 uporabnikov oziroma 54 odstotkov uporabnikov. Grafikon 7: Odgovori 3. naloga Grafikon 8: Odgovori 6. naloga Ugotavljamo, da je po uporabi vadnice v aplikaciji pravilen odgovor podalo 9 uporabnikov več oziroma 19 odstotkov več kot pri začetnem preverjanju Ugotavljamo, da je bil najbolje reševan 2. par nalog (pravilnih je povprečno 82 % odgovorov), najslabše pa 3. par nalog (pravilnih je povprečno 44,5 % odgovorov). V primeru vseh treh parov opažamo več pravilnih odgovorov pri končnem preverjanju. Največji napredek opažamo v primeru 3. para nalog (izboljšanje za 19 %). 59