uporabniku prijazen sistem za e- uČenje in …pomeni, da klasična predavanja ne pomagajo pri...

Uroš Orešič

UPORABNIKU PRIJAZEN SISTEM ZA E-UČENJE IN E-GRADIVA

USER-FRIENDLY LCMS SYSTEM AND E-LEARNING MATERIALS

Diplomsko delo

Maribor, september 2012



Diplomsko delo

Študent(ka): Uroš Orešič

Študijski program: Univerzitetni študijski program

Računalništvo in informacijske tehnologije

Smer: Računalništvo in informacijske tehnologije

Mentor: Red. prof. dr. Milan Zorman

Somentor: Doc. dr. Tomaž Kramberger

Lektorica: Karmen Hozjan, univ. Dipl. slovenistka

Številka: BIT-83 Datum in kraj: 09.06.2011, Maribor

Na osnovi 330. člena Statuta Univerze v Mariboru (Ur. l. RS, št. 01/2010) izdajam

naslednji

SKLEP O DIPLOMSKEM DELU

1. Uroš Orešič, študentu univerzitetnega študijskega programa RAČUNALNIŠTVO

IN INFORMACIJSKE TEHNOLOGIJE, se dovoljuje izdelati diplomsko delo pri predmetu Osnove računalniških sistemov.

2. MENTOR red. prof. dr. Milan Zorman

SOMENTOR doc. dr. Tomaž Kramberger

3. Naslov diplomskega dela:


4. Naslov diplomskega dela v angleškem jeziku:


5. Diplomsko delo je treba izdelati skladno z “Navodili za pisanje diplomskih del na dodiplomskih študijskih programih UM FERI ” in ga oddati v treh izvodih (dva trdo vezana izvoda in en v spiralo vezan izvod) ter en izvod elektronske verzije do 12. 09. 2012.

Pravni pouk: Zoper ta sklep je možna pritožba na senat članice v roku 3 delovnih dni.

Dekan:

Obvestiti:

• kandidata/ko, • mentorja, • somentorja, • odložiti v arhiv.

1

Uporabniku prijazen sistem za e-učenje in e-gradiva

Ključne besede: Uporabniku prijazen, e-učenje, LCMS, PLE, Blend.Fl

UDK: 37:004.738.5(043.2)

Povzetek

Sistem Blend.Fl, ki smo ga razvili na Fakulteti za logistiko, vsebuje module, ki so bili

oblikovani v namen izboljšave uporabnikove interakcije z učnimi viri na spletu.

Funkcionalnosti kot so označevalec vsebine, shranjevanje napredka, viri v povezavi,

tiskanje z označbami in interaktivne naloge omogočajo uporabniku personalizacijo učnega

procesa. V tej diplomski nalogi obravnavamo ideje in implementacijo teh modulov.

2

User-friendly LCMS system and e-learning materials

Key words: User friendly, e-learning, LCMS, PLE, Blend.Fl

UDK: 37:004.738.5(043.2)

Abstract

System Blend.Fl, developed on the Faculty of logistics, has modules that were designed

to improve the users experiance with online learning resources. Functionalities like

highlighting, saving current position, related links, printing with highlights and interactive

exercises enable personalization of each users learning process. In this thesis we will

explain the ideas and implementation of these modules.

i

KAZALO

1 UVOD ....................................................................................................................................... 1

2 PREGLED PODROČJA .......................................................................................................... 2

3 PREDSTAVITEV BLEND.FL ................................................................................................ 4

4 MODULI ZA PERSONALIZACIJO E-‐GRADIV .................................................................. 8

4.1 Označevalec vsebine ....................................................................................................................... 8

4.2 Funkcija »Shrani moj napredek« .................................................................................................... 12

4.3 Tiskanje z označbami ...................................................................................................................... 13

5 INTERAKTIVNE NALOGE ................................................................................................. 16

5.1 Uporabniški vmesnik ...................................................................................................................... 16

5.2 Vstavi manjkajočo besedo (Gapfill) ................................................................................................. 17 5.2.1 Matematične naloge ....................................................................................................................... 19

5.3 Povleci in spusti (Drag&Drop) ......................................................................................................... 20

5.4 Kviz ................................................................................................................................................ 21

5.5 Spustni sezam (dropdown) ............................................................................................................. 22

6 ZAKLJUČEK .......................................................................................................................... 25

7 VIRI ........................................................................................................................................ 26

ii

KAZALO SLIK

SLIKA 1: UVODNA STRAN SISTEMA BLEND.FL LCMS ...................................................................................................... 4 SLIKA 2: SHEMA DODELJEVANJA PRAVIC DO PRIKAZA GRADIV PREKO MOODLE PREDMETOV .................................................... 5 SLIKA 3: PRIMER PRETVORBE LATEX V HTML .............................................................................................................. 6 SLIKA 4: VMESNIK ZA PRIKAZ GRADIV Z MINI KAZALOM ................................................................................................... 6 SLIKA 5: OZNAČEVALEC IN NJEGOVI ELEMENTI .............................................................................................................. 9 SLIKA 6: PRIMER OZNAČENE INTERAKTIVNE FLASH NALOGE .............................................................................................. 9 SLIKA 7: PREDLOG IZBOLJŠAVE OZNAČEVALCA ............................................................................................................. 11 SLIKA 8: GUMB ZA SHRANJEVANJE NAPREDKA ............................................................................................................. 12 SLIKA 9: SHRANJENA GRADIVA NA PRVI STRANI ........................................................................................................... 12 SLIKA 10: PREDOGLED TISKANJA .............................................................................................................................. 14 SLIKA 11: NAVIGACIJSKI ELEMENTI INTERAKTIVNIH NALOG ............................................................................................ 17 SLIKA 12: VPIS REŠITEV NEPOSREDNO V ELEMENT NA SCENI .......................................................................................... 18 SLIKA 13: PRIMER DRAG&DROP NALOGE .................................................................................................................. 21 SLIKA 14: PRIMER KVIZA ........................................................................................................................................ 22

KAZALO TABEL

TABELA 1: PREDNOSTI IN SLABOSTI TISKANJA E-‐GRADIV ................................................................................................ 13


1

1 UVOD

Learning (Content) Management Systems (v nadaljevanju LCMS) so zdaj že odrasli in

zelo razširjeni sistemi; med drugimi je tudi Moodle, ki je prisoten v večini slovenskih

izobraževalnih ustanov. Ob pregledu alternativ je opaziti trend razvoja vedno bolj

avtomatizirane administracije, boljšega nadzora nad udeležencem v učnem procesu (v

nadaljevanju uporabnik), ipd., kar z uporabo sistema lajša delo izobraževalnim

ustanovam. A organizacije niso edine, ki bi naj pridobile z LCMS - uporabnik bi naj bil

deležen bolj dostopnega in zanimivejšega izobraževanja. Čeprav bi naj bili LCMS sistemi

osredotočeni na učenca (learner-centric), v uporabniškem vmesniku zadnja leta ni videti

večjih izboljšav.

Osebna učna okolja - Personal Learning Environment (v nadaljevanju PLE) so dokaj

sveža ideja, a viden premik proti uporabniku-prijaznejšemu učenju. PLE bi naj zagotovil

vrsto orodij, katere bi uporabnik po želji uporabljal za pomoč pri učenju; shranjevanje

povezav, teksta in multimedije, izdelava zapiskov, združevanje vsebin, organiziranje

elementov v celote, ipd.

PLE in LCMS se zaenkrat obravnavata ločeno, LCMS (ali LMS) je na kratko sistem za

izdelavo gradiv, posredovanje znanja in administracijo učnega procesa; PLE pa kljub

različnim definicijam največkrat označujejo kot okolje, kjer bo uporabnik na različnih

straneh svetovnega spleta zbiral informacije in jih z orodji, ki jih ponuja PLE, organiziral v

znanje (PLE se največkrat povezuje predvsem z neformalnim učenjem).

V tej diplomski nalogi bomo obravnavali del sistema Blend.Fl, kjer smo poskusili združiti

LCMS in PLE v orodje za formalno učenje. Najprej bomo okvirno opisali sistem, potem pa

se osredotočili na posamezne module, ki končnim uporabnikom (učencem) omogočajo

personalizacijo učne vsebine.

A tudi najboljše učno orodje je brez kvalitetne vsebine popolnoma neuporabno. Tako je

potrebno za zasnovo dobrega sistema upoštevati tudi dobre prakse v zasnovi učnih

vsebin.


2

2 PREGLED PODROČJA Brez univerzalnega standarda za spletno učenje in poučevanje se veliko organizacij

zaganja v to področje s trditvami, da so njihovi programi sistemi za e-učenje. V resnici pa

samo avtomatizirajo svoje storitve in podajajo prej tiskana gradiva zdaj v elektronski obliki

na spletu. Razen rešitve časovne in prostorske ovire sistem ne prinaša večje vrednosti k

učenju. Rosenberg je te programe prikupno poimenoval “shovelware” [1] (tradicionalna

tiskana gradiva, ki so bila digitalizirana in naložena na strežnik).

Počasi prihajamo do spoznanja, da ne moramo preprosto reproducirati prejšnjih oblik

učenja - spletne učilnice. Učenci spoznavajo nove tehnologije za učenje, kot so

dopisovanje (instant messaging), izmenjava datotek, socialno mreženje, bloganje. [3]. A

moramo vedeti, da sama želja po komunikaciji ne žene mladih k tem tehnologijam,

marveč možnost ustvarjanja, deljenja idej, pridruževanja skupinam - želja po ustvarjanju

svoje identitete na svetovnem spletu.

Na področju izboljšave elektronskega učenja je veliko konstruktivnih debat, kot na primer

da uporaba socialnih omrežij (za namene učenja) prinaša pozitivne rezultate pri razvoju

učenca na psihološki ravni, kot tudi pri razvoju njegovih veščin (Zaradi rešitve težav s

‘strahom pred ponižanjem’ v komunikaciji na štiri oči, se učenci lažje izražajo in

sporazumevajo s sošolci in profesorji preko komunikacijskih orodij [4]).

Po drugi strani se pa nekateri ukvarjajo z generalizacijo oz. avtomatizacijo personalizacije,

kar že zveni malo preveč abstraktno. Personalizacija v učnih gradivih je pomembna, a do

stopnje vsakega posameznika. Ena-sama personalizacijska strategija za uporabo na vseh

učnih scenarijih ne obstaja [5].

Tudi na učitelje ne smemo pozabiti. Čeprav so gradiva dostopna preko spleta še ne

pomeni, da klasična predavanja ne pomagajo pri razumevanju vsebine. Profesorji med

drugim tudi sodelujejo pri izdelavi samih gradiv. Prav zato morajo tudi sami razumeti

možnosti novih tehnologij in kako jih uporabiti za prenos znanja na učence [2].

Za učinkovito e-učenje moramo zagotoviti [2]:

• vizualne elemente - (samo) kadar je primerno, se uporabijo slike, videi in druga

multimedija.

• jedrnato vsebino


3

• interaktivne naloge - učenci naj imajo možnost interakcije s sistemom preko

kvizov, nalog in ugank. Tako lahko preizkušajo svoje znanje in se učijo na

posreden način.

• zanimivo vsebino - vsebina, ki se dotakne učenčevih doživetij.

• ustrezno vsebino - gradiva, ki so trenutno potrebna za izpopolnjevanje znanja.

• uporabnost - sistem mora biti uporaben za vsakega učenca brez dodatnih znanj.

• odobritev dostopa - z zagotavljanjem dostopa do dodatnih virov lahko samo-

usmerjene učence vzpodbudimo do brskanja po dodatnem materialu, ki je v skladu

z njihovimi interesi in tako dosežemo boljše ter celovitejše znanje.

Ker se je v našem primeru izkazalo, da imajo predvsem starejši avtorji težave v

razumevanju uporabnosti novih tehnologij, smo pri preoblikovanju klasičnih skript v

elektronska gradiva organizirali sestanek med avtorjem in oblikovalcem interaktivnih

elementov. Rezultat je bil očitna izboljšava v raznovrstnosti nalog in njihovi kvaliteti:

Zapleten tekst je postal grafična animacija, med gmoto besedila so nastale drag&drop in

gap-fill naloge, ob slikah pa so se pojavili tudi videi in interaktivne simulacije.

V zadnjih letih je veliko raziskav področja e-učenja. Od pedagoških teorij do algoritmov, ki

učence klasificirajo glede na stil učenja. Pri našem projektu smo se odločili implementirati

sistem po ideji 'blended learning', ki zagovarja raznolikost načinov, virov in okolij za

učenje.


4

3 PREDSTAVITEV BLEND.FL Blend.Fl je večleten projekt Fakultete za logistiko za digitalizacijo in avtomatizacijo učnega

procesa. Deljen je na dva dela:

1. Moodle (Spletna učilnica): Študenti in njihovi podatki so vnešeni in ažurirani s

pomočjo Moodla. Tukaj imajo dostop do trenutnih in opravljenih predmetov (tudi za

pretekla študijska leta).

2. LCMS: Cilj tega dela projekta je bil narediti spletni sistem za objavo in urejanje

elektronskih gradiv, ki bo omogočal študentom neprekinjen dostop do učnih vsebin

in uporabo orodij za personalizacijo le-teh. Slika 1 prokazuje vstopno stran za

študente.

Sistema sta sicer popolnoma avtonomna, a z možnostjo povezave uporabnikov in njihovih

pravic do vsebin. Jaz sem bil zadolžen za izdelavo LCMS dela projekta, ki pa je

preobširen za namene te diplomske naloge. Tako bomo v nadaljevanju na kratko

predstavili celoten sistem, nato pa se osredotočili na module, ki omogočajo uporabniku

prijazno interakcijo z unčo vsebino.

Slika 1: Uvodna stran sistema Blend.Fl LCMS


5

Blend.Fl LCMS je grajen na osnovi odprtokodne spletne platforme Joomla 1.0 z velikimi

spremembami tako na administrativni, kot na uporabniški strani.

Nekatere dodatne administrativne funkcionalnosti:

1. Modularnost vsebine: Urejanje gradiv na nivoju podpoglavij

Delitev vsebine na podpoglavja omogoča uporabo iste učne snovi v različnih

gradivih s tem, da se z modularnostjo ohranja preprostost urejanja. Takšna

razčlenitev je tudi zelo dobrodošla pri učenju, saj omogoča postopno podajanje

vsebine učencu.

2. Povezave s podobno vsebino

Profesor lahko posameznemu podpoglavju dodeli hiperpovezave ali povezave do

gradiv s vsebino, ki bi učencu lahko pomagala pri razumevanju snovi. Prav tako

poskuša sistem ugotoviti poglavja v povezavi glede na vsebino podpoglavja.

3. Povezava z Moodle podatkovno bazo

Po vzpostavitvi povezave se omogoči prijava v sistem tudi vsem Moodle

uporabnikom.

Na nivoju gradiv lahko izberemo predmete (definirane v Moodle), za katere je

gradivo ustvarjeno. Tako se omogoči učencem, ki so dodeljeni v predmet, dostop

do gradiv. Slika 2 prikazuje vse možne poti povezave uporabnikov z gradivi.

Slika 2: Shema dodeljevanja pravic do prikaza gradiv preko Moodle predmetov

4. LaTeX

V prid uporabnosti in lažjemu ažuriranju morebitnih popravkov, smo dodali

možnost pisanja enačb med besedilom v obliki LaTeX. Enačbe se tako generirajo


6

v grafično obliko (Slika 3) s pomočjo JS knjižnice MathJax.

Slika 3: Primer pretvorbe LaTeX v HTML

Uporabniški vmesnik za študente je deljen na dva dela, in sicer na standardne strani

(kot je uvodna stran, pregled profila, pregled razpoložljivih gradiv) in vmesnik za prikaz

gradiv (Slika 4).

Slika 4: Vmesnik za prikaz gradiv z Mini kazalom

Vmesnik uporablja tehnologijo AJAX, ki omogoča prijetno uporabniško izkušnjo. Ker ob

uporabnikovih klikih osvežujejo le potrebni elementi, je stran odzivna in prijetna za


7

uporabo. Navigacija (Slika 4) je grajena na svoji plasti, nad samo vsebino, tako da je

vedno vidna uporabniku.

Elementi v navigaciji na zgornjem robu okna:

• Povezava na začetno stran in naslov gradiva

• Kazalo vsebine

• Kazalo multimedije

• Mini kazalo

Sistem med tekstom poišče naslove in iz njih generira mini kazalo, ki je zelo

priročno v daljših poglavjih.

• Velikost pisave + širina strani

• Iskalnik

• Prejšnje/naslednje poglavje

• Trenutno poglavje

• Shrani napredek

Funkcionalnost, o kateri bomo več povedali v poglavju 5. Moduli za personalizacijo

gradiv.

Elementi na levi strani ekrana so:

• V povezavi

Tukaj se prikažejo poglavja in hiperpovezave, ki se navezujejo na temo v poglavju.

Povezave lahko vnese administrator ali profesor, ali pa jih poskusi ugotoviti sam

sistem.

• Označevalec in tiskanje

Modul za označevanje vsebine, priročen za poznejše prelete v procesu učenja. O

teh dveh modulih bomo govorili več v naslednjem poglavju.

• WolframAlpha

Hiter dostop do iskalnika WolframAlpha

Pri navigaciji smo želeli doseči izgled, ki ne preusmeri uporabnikove pozornosti iz

vsebine. Zato smo uporabili sive odtenke in zaobljene robove.

Za lažjo predstavo smo napravili okviren prelet našega LCMS, zdaj pa bomo predstavili

uporabniku prijazne module, ki jih srečamo v njem.


8

4 MODULI ZA PERSONALIZACIJO E-GRADIV Eden izmed ciljev projekta za prikaz elektronskih gradiv je bil ustvariti orodja, ki bodo kar

se da blizu metaforam pri učenju iz fizičnega učbenika. Pri učenju naše delovno področje

navadno sestavljajo:

- Učbenik

- Pisalo

- Barvni označevalci

- Barvni ‘post-it‘ listki

- Zvezek/list za izpiske

- Računalnik za poizvedbe po iskalnikih ali med prijatelji

Med učenjem uporabljamo te pripomočke po potrebi in po napornem dnevu označimo

stran v učbeniku, da naslednji dan vemo kje moramo nadaljevati. To je preprosta, a

pomembna metafora, ki jo pa redko vidimo v sistemih za e-učenje.

Zaradi omejitev projekta smo se odločili implementirati le izbrane funkcionalnosti, ki jih

bom podrobneje opisali v naslednjih podpoglavjih.

4.1 Označevalec vsebine

Označevanje pomembnih izsekov, slik, tabel je učinkovit način iztrebljanja jedra učne

vsebine. Ob dejstvu, da si zaradi interakcije z gradivom lažje zapomnimo označene

podatke, je označevanje tudi zelo uporabno pri ponovnem preletu čez vsebino - takoj

najdemo pomembne odseke in naša interakcija z njimi nas spomni na kontekst v besedilu.

V sistemu Blend.Fl najdemo označevalec (Slika 5) v levi orodni vrstici. Na voljo imamo 5

barv, vsako v dveh odtenkih. Naslednja slika prikazuje funkcijo gumbov.


9

Podrobnosti o gumbih za izvoz (levo spodaj) se bomo lotili v podpoglavju “Tiskanje z

označbami”.

Uspeli smo razviti robusten algoritem grajen na osnovnem nivoju JavaScripta, ki deluje na

vseh brskalnikih, ki so izšli od leta 2009 dalje. S tem algoritmom lahko uporabnik označi

prav vsak element gradiva - tekst, slike, videe, enačbe in tudi flash interaktivne naloge.

Slika 6 prikazuje barvno obrobo, ki jo dobij označeni multimedijski elementi.

Slika 6: Primer označene interaktivne flash naloge

Slika 5: Označevalec in njegovi elementi


10

Neželjene označbe lahko izbrišemo tako, da se postavimo z miško nad označbo. Takrat

se v desnem zgornjem kotu pojavi črni križec, ki nam s klikom povrne vsebino v prvotno

stanje.

Problem in njegova rešitev:

Kot že marsikdo, ki se je poprijel s spletnim programiranjem, ve, da prej kot slej pri

implementaciji naših idej naletimo na različno interpretacijo kode s strani brskalnikov. V

večini primerov iz peščice sodobnih brskalnikov najbolj izstopa Internet Explorer, ki se

največkrat ne strinja z našo kodo. Pri algoritmu za označevalec smo naleteli na

naslednje posebnosti.

Brskalniki shranjujejo naše označbe, a vsak na različen način:

Internet Explorer: var selRange = document.selection.createRange();

Mozilla: var selObj = window.getSelection();

var selRange = selObj.getRangeAt(0);

WebKit: var range = document.createRange ();

range.setStart (userSelection.anchorNode,

userSelection.anchorOffset);

range.setEnd (userSelection.focusNode,

userSelection.focusOffset);

Iz tega objekta dobimo označen HTML tekst, po katerem se sprehodi algoritem in obda

značke v <span> elemente.


11

Predlagane izboljšave:

Učenci marsikdaj uporabljajo iste barve označb za vsebine, ki so v besedilu isto

klasificirane, npr. rdeča za primere, modra za definicije, zelena za teoretične izpeljave ipd.

Uporabnost barvnih označb bi lahko povečali z možnostjo poimenovanja barv, kot

prikazuje slika 7. Tako bi lahko vsak uporabnik poimenoval namen barve po svoji presoji.


Ko označimo tekst, se algoritem sprehodi po HTML zgradbi znotraj naše selekcije in

obda vsak izbran element v <span> element z obarvanim ozadjem. Tako dobimo

vsebino, ki izgleda kot označena celota, a je zaradi pogostih oblikovnih elementov v

besedilu v resnici zelo fragmentirana. To se opazi, ko hoče uporabnik odstraniti

pravkar narejeno označbo.

To težavo smo rešili z vpeljavo razredov (pravzaprav funkcij, JS ne podpira razredov).

Za vsako uporabnikovo selekcijo se ustvari nov objekt Highlight 'razreda', ki združuje

vse <span> elemente, ki so v tem trenutku ustvarjeni s strani algoritma. Tako se

elementi lahko obnašajo (in odstranijo) kot celota.

Slika 7: Predlog izboljšave

označevalca


12

4.2 Funkcija »Shrani moj napredek«

Ob vsakem trenutku lahko uporabnik prekine učenje, pritisne na gumb ‘Shrani moj

napredek’ in si vzame čas za odmor. Vsako gradivo dovoljuje uporabniku uporabo ene

shranjene lokacije, ki kasneje služi kot hiter dostop do gradiva za nadaljevanje z delom.

Gumb za shranjevanje napredka je vedno viden na zgornji orodni vrstici, ob naslovu

poglavja (Slika 8).

Slika 8: Gumb za shranjevanje napredka

Ob vrnitvi na začetno stran, se shranjene pozicije prikažejo nad drugimi predmeti, kot

prikazuje slika 9. Ko učenec nadaljuje v določenem predmetu in kasneje zopet shrani svoj

napredek, se njegova prva stran posodobi z trenutnim poglavjem v tistem gradivu.

Slika 9: Shranjena gradiva na prvi strani


13

4.3 Tiskanje z označbami

Kljub priročnosti spletnih vsebin je potrebno pomisliti tudi na zdravje učenca. Z

omogočanjem tiskanja gradiv dosežemo fleksibilnost, ki jo učenci upravičeno zahtevajo pri

svojem učenju. A tiskanje oz. kopiranje literature je kočljiva tema, zato je pomembno imeti

jasen pregled nad prednostmi in slabostmi takšne funkcije (tabela 1).

Prednosti Slabosti

• Omogočimo učenje na klasičen

način

• Dovolimo shranjevanje gradiva kot

PDF za učenje brez internetne

povezave

• Puščamo učencu svobodo gibanja

• Onemogočimo še eno oviro, ki bi

odvračala uporabnika od učenja.

• Kršenje avtorskih pravic

Tabela 1: Prednosti in slabosti tiskanja e-gradiv

Kršenje avtorskih pravic je lahko zelo boleč trn v peti tistim, ki želijo ustreči uporabnikom,

saj avtorji neradi delijo svojih del kar na lepe oči. V našem primeru smo se odločili za

kompromis: Gradivo se lahko tiska v namene študija na fakulteti, a nikoli brez jasno

navedenega avtorja.

Do predogleda za tiskanje (Slika 10) pridemo lahko s klikom na tiskalnik ob naslovu

gradiva ali preko označevalca s klikom na gumb ‘Izvozi gradivo’ ali ‘Izvozi poglavje’.


14

Slika 10: Predogled tiskanja

Na pogledu za tiskanje imamo na voljo naslednje nastavitve:

1. Velikost pisave

2. Prikaz celotnega teksta ali samo označenih elementov

3. Prikaz posameznih barv


15


Če označimo besedilo v celici tabele in izberemo opcijo za prikaz samo označenih

elementov se nam prikaže samo označeno besedilo, tabela pa izgine. Nastane

situacija, ko označeno, prej pomembno besedilo, zdaj nima nobene vrednosti, saj je

izvzeto iz konteksta.

S preprostim algoritmom za iskanje konteksta (pogledamo. če je označen tekst del

vnaprej definiranih 'nedeljivih' elementov, kot so tabele ali formule) omogočimo, da se v

tem primeru prikaže tudi neoznačen del tabele.


16

5 INTERAKTIVNE NALOGE Za izboljšanje uporabnosti učnih vsebin na svetovnem spletu vidimo veliko priložnosti tudi

v sami zasnovi vsebine. Računalniška orodja nam omogočajo popestritev učnega gradiva

z izdelavo interaktivnih nalog.

Orodje Adobe Flash omogoča kombinacijo oblikovanja in kodiranja, ki bi lahko prišla prav

v izdelavi takšnih nalog. Končni izdelek je SWF datoteka, ki jo lahko modularno vključimo

na splet kamor želimo.

Za ta namen smo razvili nekaj prototipnih ActionScript razredov, ki dodajo obstoječim

elementom na Sceni dodatno uporabno funkcijo. Razredi so zasnovani na osnovi

dograjene knjižnice FlashQuestion [6], ki po vključitvi v Moodle omogoča pregled

rezultatov in celo uporabo nalog v preverjanju znanja.

Razširjena knjižnica omogoča komunikacijo med SWF objektom in sistemom Moodle –

shranjevanje odgovorov za kasnejši pregled in ocenjevanje uporabnika na odstotkovni

ravni (osnovna knjižnica omogoča samo sporočanje pravilnega = 1 oz. napačnega = 0

odgovora).

Adobe Flash je sicer profesionalno orodje za izdelavo spletnih vsebin, a verjamemo da bi

lahko z našimi razredi in uvodno razlago marsikdo ustvaril uporabne naloge.

5.1 Uporabniški vmesnik

Za namen boljše uporabnosti smo zasnovali osnovno obnašanje, ki je skupno za vse

interaktivne elemente:

• Sprememba stanja ob prehodu z miško na interaktivni element

• Enoličen prikaz pravilnosti/nepravilnosti odgovora

V okolju so tudi pomembni vsebinski in navigacijski simboli (Slika 11):


17

Slika 11: Navigacijski elementi interaktivnih nalog

1. Navodila naloge (se prikaže ob prehodu z miško na element)

2. Vsebina navodila

3. Namig/Pomoč (se prikaže ob prehodu z miško na element)

4. Navigacija strani - omogoča, da imamo na istem mestu do 5 strani nalog

5. Gumb razveljavi - postavi vse interaktivne elemente v začetno stanje

6. Gumb preveri - Prikaže pravilnost vnešenih odgovorov in sporoči rezultate sistemu

Moodle. Če izbrišemo ta gumb iz okolja, se naloga pretvori v preverjanje znanja -

uporabnik nima možnosti preveriti pravilnosti rezultatov, sistem pa dosledno

točkuje uporabnika. Po končanem preverjanju v sistemu Moodle, se prikaže

uporabnikov uspeh in pravilni rezultati.

5.2 Vstavi manjkajočo besedo (Gapfill)

Razred Blend_fl_textfield omogoča izdelavo nalog, kjer mora uporabnik v okence vpisati

pravilno besedo. Ker se večkrat zgodi, da je pravilnih več odgovorov hkrati (sopomenke,

sklanjane besede), se lahko pravilni odgovori navedejo ločeni z znakom |.

Blend_fl_textfield(objekt_na_Sceni, "rešitev|sopomenka|sklanjana

rešitev")


18

Za lažjo uporabo lahko v kodi definiramo samo povezavo na objekt in rešitev vpišemo kar

v tekstovno polje na Sceni (Slika 12):

Blend_fl_textfield(objekt_na_Sceni)

Slika 12: Vpis rešitev neposredno v element na Sceni


19

5.2.1 Matematične naloge

Posebno zahtevne so rešitve z matematičnimi nalogami. Flash ne podpira računanja oz.

prepoznavanja matematičnih izrazov, zato je rezultat primerjave robustnosti takšnih nalog

z nalogami v matematičnih orodjih (Derive, Mathematica, ...) porazen. Vseeno pa lahko z

malo iznajdljivosti in doslednosti dosežemo vsaj osnovno robustnost.

Množenje in vodilni predznak:

Če v nalogi določimo predpostavko, da morajo rešitve biti zapisane po načelu urejenega

rezultata (okrajšan in razstavljen rezutat, višje potence naprej, spremenljivke po

abecednem redu) že odpravimo ogromno težav, s katerimi bi se morali ukvarjati zapleteni


Ker smo vedno omejeni s prostorom se nam lahko kar hitro zgodi, da ne moremo

narisati dovolj velikega okvirčka za vpis rešitve. Tako nastanejo neprivlačne naloge in

neprijetne situacije za uporabnika, saj mu vnosno polje skrije del vpisanega odgovora.

Vnosnim poljem smo dodali funkcionalnost, da se ob kliku začasno povečajo, če je

vsebina v njih večja kot izvorno okno. Tako uporabnik ob vpisu ni zmeden z izginjanjem

teksta in se lahko vedno preprosto vrne in preveri pravilnost vpisanega odgovora.

Okence se ob kliku na drugi interaktivni element samodejno skrči na začetno velikost.


20

matematični algoritmi. Tako zdaj točno vemo kako bo napisan rezultat, ki je npr. polinom

6. stopnje.

Z implementiranjem dveh preprostih načel lahko zdaj izboljšamo zajem odgovora.

• Prepoznavanje vodilnega predznaka (+3x-10 je enako 3x-10)

• Ignoriranje znakov za množenje in presledkov (3*x^2 + 6*y je enako 3x^2+6y)

Zdaj lahko uporabnik vpiše rezultat +3*x^4+5*x^3-(x+1)*(x-1) na 16 različnih načinov in

algoritem bo prepoznal pravilen odgovor.

Metaforo sopomenk lahko uporabimo tudi pri matematičnih nalogah, predvsem pri

zamenjavi faktorjev:

"4x-9|-9+4x"

Množice so še eno matematično področje, kjer lahko zagotovimo dobro robustnost.

Zaradi narave ‘Gapfill’ nalog, kjer kot odgovor nikoli ne zahtevamo stavka, ampak besede

(saj je skoraj nemogoče ugotoviti, ali je uporabnik vpisal pravilen odgovor), si lahko znak

“vejica” (,) rezerviramo kot poseben znak. Kot vemo, v množicah ‘,’ pomeni ločilo med

dvema elementoma množice, tako zapis (1,2,3) pomeni tri elemente in sicer 1, 2 in 3.

Razred zraven rezultata sprejme tudi dve zastavici, ki vplivata na preverjanje pravilnega

odgovora: ... "1,2,3"); //mnozica stevil (vsako število samo enkrat):

1,2,3

... "1,2,2,3", true); //mnozica stevil (vsako število samo enkrat,

vrstni red ni pomemben): 1,2,2,3

... "1,2,2,3", true, true); //mnozica stevil (vrstni red ni

pomemben, vsako število vsaj enkrat): 1,2,2,3

Predlagane izboljšave:

Razred bi lahko povezali s spletnim iskalnikom WolframAlpha, ki deluje na osnovi

programa Mathematica. Tako bi s pomočjo njihovega API-ja dobili okrajšan, enoličen

rezultat ki bi ga nato primerjali z rešitvijo naloge.

5.3 Povleci in spusti (Drag&Drop)

Naloge oblike Drag&Drop (Slika 13) imajo zaradi svoje interakcije bolj sproščen, skoraj

zabaven občutek. Odgovori, ki jih prenašamo na pravilna mesta so lahko črke, besede,


21

slike ali videi. Na Sceni ustvarimo elemente, ki predstavljajo odgovore. Nato med (ali nad)

besedilom ustvarimo brezbarvne objekte, ki predstavljajo pravilen položaj vsakega

elementa.

V konstruktor razreda vpišemo v istem vrstnem redu najprej imena objektov z odgovori,

nato pa še imena pripadajočih brezbarvnih elementov.

Blend_fl_dragndrop([odg1, odg2, odg3, odg4],[poz1, poz2, poz3,

poz4]);

Seveda lahko poljubno ustvarimo več možnih odgovorov ali več možnih pozicij. Na tak

način zvišamo težavnost naloge.

Slika 13: Primer Drag&Drop naloge

Algoritem naključno premeša in postavi odgovore v prostor med pozicijo najvišjega levega

in najnižjega desnega (oz. Najvišjega desnega in najnižjega levega) odgovora na Sceni.

5.4 Kviz

Razred Blend_fl_poll nam omogoča generiranje kviza iz niza pravilnih odgovorov.

Snovalec kviza (profesor) ustvari možne odgovore in jih poljubno razporedi na Sceni. V

kodi ustvari element razreda Blend_fl_poll in mu poda parametre:

• Element, v katerem je na Sceni ustvaril odgovore

• Ime pravilnega odgovora.

Če je pravilnih več odgovorov, poda imena kot tabelo:


22

Blend_fl_poll(starsevski_elem,

["ime_elm_1._odgovora","ime_elem_2._odgovora"], toggle=true)

Kot zadnji parameter lahko vidimo še toggle, ki je privzeto nastavljen na true. Ta nam

omogoča, da nadzorujemo obnašanje kiza, ko uporabnik izbere odgovor - če je toggle

nastavljen na true, potem lahko uporabnik spremeni svojo odločitev in izbere drug izgovor.

Če pa je toggle false, pa se po izbiri odgovora, naloga zaklene in ne dovoljuje sprememb.

Slika 14 prikazuje primer kviza, kjer je uporabnik izbral odgovora a) in b).

Slika 14: Primer kviza

5.5 Spustni sezam (dropdown)

Spustni seznami so interaktiven element, ki jih navadno ne srečujemo v nalogah, saj so v

funkcionalnosti podobni kvizom: na voljo imamo odgovore izmed katerih izberemo enega.

Seznami so nastali iz metafore kviza predvsem zaradi stiske s prostom na ekranu.

Razred Blend_fl_dropdown je mišljen kot dodatek za ComboBox, ki je že vgrajen v

osnovni Flash knjižnici. Tako lahko na Sceni ustvarimo in napolnimo seznam, ga podamo

kot parameter razredu in dopišemo indeks pravilnega odgovora: Blend_fl_dropdown(combo1, 1)


23


V matematičnih nalogah smo večkrat uporabili spustni seznam, ko je učenec moral

izbrati med <, >, =. Med izdelavo teh seznamov sem ugotovil napako v razvojnem

orodju Flash - vgrajeni ComboBox kot elemente seznama sicer sprejme posebne

znake, a ko ponovno odpremo Flash, je seznam prazen. Tako sem omogočil dinamično

polnjenje seznama kar preko konstruktorja:

Blend_fl_dropdown(combo1, 1, [‘<’, ‘>’, ‘=’, ‘<=’, ‘>=’])


24


Hoteli smo zasnovati nalogo, v kateri bi moral učenec najprej izbrati odgovor iz

spustnega seznama, nato pa bi mu naloga ponudila možnosti za nadaljevanje glede na

njegovo izbiro.

Konkretnen primer naloge: uporabnik mora izbrati pravilen odgovor na vprašanje

matrika kakšne dimenzije je rezultat zmnožka matrike A in B (te matriki sta podani v

navodilu). Ko uporabnik izbere dimenzijo iz seznama, se mu prikaže matrika te

dimenzije, v katero mora vpisati dejanske vrednosti zmnožka.

Vgrajenemu razredu ComboBox smo dodali eventListener, ki sproži funkcijo ob nekem

dogodku. V našem primeru smo specificirali dogodek ‘sprememba izbire’ (change). Na

Sceni smo vnaprej ustvaril vse možne matrike in jih združil v skupine pod imenom, ki

pripada izbranemu odgovoru v seznamu. Tako smo ob vsaki spremembi izbire lahko

prikazal pripadajočo matriko.

combo1.addEventListener("change",function(){

//hide all select_field+NUM elements and show only the

one of the index:

hideAllSelect_fields(this);

var sel_ind = this.selectedIndex;

this._parent['select_field'+sel_ind]._visible=true;

});


25

6 ZAKLJUČEK Z izgradnjo Blend.Fl smo se lotili velikega projekta digitalizacije in avtomatizacije učnega

procesa. Osredotočili smo se na uporabniku prijazne funkcionalnosti in razvili nekaj

modulov v ta namen. V tej diplomski nalogi smo opisali module in razložili ideje ter

problematike z njihovo implementacijo.

Po večletni uporabi sistema s strani študentov, vidimo, da še obstajajo možnosti za

izboljšavo. Verjamemo, da imajo učenci radi nadzor nad procesom učenja, tako da bomo

v prihodnosti poskusili implementirati še ostala orodja, kot so chat, zapiski, 'post-it' listki,

ipd.


26

7 VIRI 1. C. B. Teo, R. K. L. Gay: A Knowledge-Driven Model to Personalize E-Learning, ACM

Journal of Educational Resources in Computing, Vol. 6, No.1, March 2006.Article 3

http://portal.acm.org/citation.cfm?id=1217865

2. C. J. M. Costa, N. S. A. Silva: Knowledge versus content in e-learning: A philosophical

discussion, INFORMATION SYSTEMS FRONTIERS, Volume 12, Number 4

http://www.springerlink.com/content/t2351vvn15686321/

3. G. Attwell: Personal Learning Environments - the future of eLearning?, eLearning

Papers, vol. 2 no. 1. ISSN 1887-1542

http://www.elearningpapers.eu/index.php?page=doc&doc_id=8553&doclng=6

4. Angela Yan Yu, Stella Wen Tian, Douglas Vogel, Ron Chi-Wai Kwok: Can learning be

virtually boosted? An investigation of online social networking impacts. ELSEVIER,

Computers & Education, Volume 55, Issue 4, December 2010

http://www.sciencedirect.com/science/article/pii/S0360131510001752

5. Fathi Essalmi, Leila Jemni Ben Ayed, Mohamed Jemni, Kinshuk, Sabine Graf: A fully

personalization strategy of E-learning scenarios, ELSEVIER, Computers in Human

Behavior, Volume 26, Issue 4, July 2010

http://www.sciencedirect.com/science/article/pii/S0747563209002015

6. Dmitry Pupinin: Knjižnica FlashQuestion.as, Julij 2009

http://moodle.org/mod/data/view.php?d=13&rid=2493

I Z J A V A O A V T O R S T V U

Spodaj podpisani/-a

Uroš Orešič

z vpisno številko

E1014862

sem avtor/-ica diplomskega dela z naslovom:

Uporabniku prijazen sistem za e-učenje in e-gradiva.

(naslov diplomskega dela)

S svojim podpisom zagotavljam, da:

• sem diplomsko delo izdelal/-a samostojno pod mentorstvom (naziv, ime in priimek)

Red. prof. dr. Milan Zorman

in somentorstvom (naziv, ime in priimek)

Doc. dr. Tomaž Kramberger

• so elektronska oblika diplomskega dela, naslov (slov., angl.), povzetek (slov.,

angl.) ter ključne besede (slov., angl.) identični s tiskano obliko diplomskega dela.

• soglašam z javno objavo elektronske oblike diplomskega dela v DKUM.

V Mariboru, dne 7.9.2012

Podpis avtorja/-ice:

IZJAVA O USTREZNOSTI DIPLOMSKEGA DELA Spodaj podpisani/-a Milan Zorman izjavljam, da je (ime in priimek mentorja/-ice)

študent Uroš Orešič izdelal diplomsko (ime in priimek študenta/-ke) delo z naslovom:


(naslov diplomskega dela) v skladu z odobreno temo diplomskega dela, Navodili za pisanje diplomskih del na dodiplomskih študijskih programih UM FERI in mojimi navodili. Kraj in datum: 7.9.2012

Podpis mentorja:

IZJAVA O ISTOVETNOSTI TISKANE IN ELEKTRONSKE VERZIJE ZAKLJUČNEGA DELA IN OBJAVI OSEBNIH PODATKOV DIPLOMANTOV

Ime in priimek avtorja-ice:

Uroš Orešič

Vpisna številka:

E1014862

Študijski program:

Računalništvo in informacijske tehnologije

Naslov zaključnega dela:


Mentor:

Red. prof. dr. Milan Zorman

Somentor:

Doc. dr. Tomaž Kramberger

Podpisani-a Uroš Orešič izjavljam, da sem za potrebe arhiviranja oddal elektronsko verzijo zaključnega dela v Digitalno knjižnico Univerze v Mariboru. Zaključno delo sem izdelal-a sam-a ob pomoči mentorja. V skladu s 1. odstavkom 21. člena Zakona o avtorskih in sorodnih pravicah dovoljujem, da se zgoraj navedeno zaključno delo objavi na portalu Digitalne knjižnice Univerze v Mariboru. Tiskana verzija zaključnega dela je istovetna z elektronsko verzijo elektronski verziji, ki sem jo oddal za objavo v Digitalno knjižnico Univerze v Mariboru. Zaključno delo zaradi zagotavljanja konkurenčne prednosti, varstva industrijske lastnine ali tajnosti podatkov naročnika: ne sme biti javno dostopno do (datum odloga javne objave ne sme biti daljši kot 3 leta od zagovora dela). Podpisani izjavljam, da dovoljujem objavo osebnih podatkov, vezanih na zaključek študija (ime, priimek, leto in kraj rojstva, datum zaključka študija, naslov zaključnega dela), na spletnih straneh in v publikacijah UM. Datum in kraj: 7.9.2012, Maribor Podpis avtorja-ice: Podpis mentorja: (samo v primeru, če delo ne sme biti javno dostopno)

Podpis odgovorne osebe naročnika in žig: (samo v primeru, če delo ne sme biti javno dostopno)

uporabniku prijazen sistem za e- uČenje in …pomeni, da klasična predavanja ne pomagajo pri...

Documents