Uitbreiding leerplatform in Drupal 7

Transcriptie

1 Handelswetenschappen en Bedrijfskunde Geel Bachelor in de Toegepaste Informatica Business Information Management CAMPUS Geel Joey Lemmens Academiejaar

2 Voorwoord is bedoeld voor mensen die meer te weten willen komen over het project Dutch++ en het leerplatform dat hiervoor in Drupal werd ontworpen. Uiteraard is dit eindwerk ook bedoeld voor geïnteresseerden in IT. Dit eindwerk heb ik geschreven tijdens de eindfase van mijn opleiding hoger onderwijs. Het onderwerp hangt nauw samen met mijn buitenlandse stage aan de universiteit van Wenen. Graag wil ik enkele mensen bedanken die mij de voorbije drie maanden geholpen hebben. Prof. Dr. Van Uffelen, de verantwoordelijke van het Dutch++ project aan de Weense universiteit en assistente Dr. Vogl, de verantwoordelijke voor de inhoud van het project. Voor al mijn informaticavragen kon ik steeds terecht bij Mevr. De Llano, de ITverantwoordelijke. Mevr. Spruyt, docente aan de K.H. Kempen, heeft mij met raad en daad bijgestaan voor de vormgeving en inhoud van dit eindwerk.

3 Samenvatting Voor het project Dutch++ dat gaat over het opzetten van een online leerplatform voor studenten die meer over Nederlands te weten willen komen, heb ik samen met mijn collega, Dieter Verbeemen in Drupal een module ontwikkeld. Deze module kan cursussen en oefeningen afkomstig van een ander leerplatform, namelijk OLAT importeren. Daarna kunnen docenten de oefeningen extra functionaliteiten geven wat in het bestaande leerplatform niet mogelijk is. Het gaat om oefeningen met drag-and-drop mogelijkheden, oefeningen waar je een bepaald deel van een woord moet kunnen selecteren en oefeningen waar je een video- of audiofragment moet kunnen pauzeren op een bepaalde locatie. Studenten kunnen vervolgens de oefeningen maken en kunnen zichzelf evalueren aan de hand van ingebouwde feedbackmogelijkheden. Zo kan de student onmiddellijk het antwoord tonen, het geselecteerde antwoord laten valideren op correctheid of de hele oefening indienen waarna hij zijn antwoorden en de oplossing ziet. Uiteraard is het aan de docent te bepalen welke feedbackmogelijkheden per oefeningen beschikbaar worden gesteld. Het project Dutch++ is een driejarig project en het maken van de module is slechts de eerste fase. Het is nu aan de partnerinstituten om de oefeningen in het OLAT-systeem te maken en vervolgens allemaal te importeren in de Drupalwebsite. Daarna is het aan de docenten om de oefeningen extra functionaliteiten te geven en uiteindelijk kan heel de wereld Nederlands leren dankzij onze inbreng in het Dutch++ project.

4 Inhoudsopgave Voorwoord... 2 Samenvatting... 3 Inhoudsopgave... 4 Lijst van figuren... 6 Lijst van gebruikte afkortingen... 7 Inleiding Stageomgeving Universiteit van Wenen Neerlandistiek Contactpersoon Stageopdracht Project Dutch Probleemstelling Opdracht Verwacht resultaat Fasering Opzetten server Virtualisatie met VirtualBox Configuratie Ubuntu Server SSH Tomcat OLAT Xdebug, de debugger QTI XML Structuur in XML QTI Object Parser De broncode Klassen en objecten Drupal Voor- en tegenstanders Modulair programmeren Hooks Databaseontwerp Module hook_permission() hook_menu()... 33

5 5.4.3 hook_form() Aanspreking database Drupal in actie Permissies en rollen Uploadfomulier Oefeningen overzichtslijst jquery Ajax library Oefeningen Single Choice Questions Multiple Choice Questions Fill in the Blanks Statistieken Moeilijkheden Omgaan met video en audio Uploaden meerdere bestanden Ondersteunen drag-and-drop Besluit Literatuurlijst Lijst van de bijlagen Bijlage 1 Organigram universiteit Wenen Bijlage 2 Fasering Bijlage 3 QTI Klassendiagram Bijlage 4 Handleiding

6 Lijst van figuren Figuur 1-1 Hoofdgebouw universiteit Wenen... 9 Figuur 3-1 CLI van PuTTY Figuur 3-2 GUI van WinSCP Figuur 3-3 OLAT draaiende op Tomcat Figuur 3-4 Variabelen in Netbeans met behulp van Xbugger Figuur 4-1 Fill in Blanks (FIB) oefening in OLAT Figuur 4-2 KPRIM oefening in OLAT Figuur 4-3 Klassendiagram QTI object parser Figuur 4-4 Intellisense in Netbeans Figuur 5-1 Commentaarlijnen in het entity.inc bestand Figuur 5-2 Commentaarlijnen in het common.inc bestand Figuur 5-3 Mappenstructuur van Drupal Figuur 5-4 Relationeel datamodel Drupal Figuur 5-5 Visuele weergave van permissies in Drupal Figuur 5-6 Uploadformulier Figuur 6-1 Uploadformulier met opties Figuur 6-2 jquery Datatable plug-in Figuur 6-3 Details van de oefening Figuur 6-4 Single choice question in Drupal Figuur 6-5 Multiple choice question foutief ingevuld door student Figuur 6-6 Fill in blanks oefening getransformeerd naar Drag&Drop Figuur 6-7 Statistiekenoverzicht Figuur 6-8 Basisfunctionaliteit drag-and-drop Figuur 6-9 Uitgebreide functionaliteit drag-and-drop... 42

7 Lijst van gebruikte afkortingen AJAX Asynchronous JavaScript And XML API Application Programming Interface CLI Command-line Interface CMS Content Management System GUI Graphical User Interface HTML HyperText Markup Language IDE Integrated Development Environment IP Internet Protocol MD5 Message Digest Algorithm 5 OLAT Online Learning And Training PHP Hypertext Preprocessor QTI Question and Test Interoperability SQL Structured Query Language SSH Secure Shell URL Uniform Resource Locator W3C World Wide Web Consortium WAR Web Application Archive XML Extensible Markup Language

8 Inleiding 8 Inleiding Vanaf maart tot mei 2012, was mijn verblijfplaats Wenen: the City of Music. Deze bijnaam heeft de stad te danken aan de verschillende componisten die hier hebben verbleven. Geen muziekopleiding voor mij tijdens deze drie maanden, wel een IT-stage aan de universiteit van Wenen waar mijn collega, Dieter Verbeemen, en ik een programma hebben ontwikkeld in Drupal. Drupal is hier in het leven geroepen om twee verschillende softwaresystemen te integreren in één handig te gebruiken softwaresysteem voor de eindgebruiker. De bedoeling van dit eindwerk is meer informatie te geven over onze opdracht, over het project, Dutch++ waaraan die opdracht gekoppeld is en over de manier waarop we tot het eindresultaat gekomen zijn. In dit eindwerk kom je eerst meer te weten over de stageomgeving om heel de stageopdracht te kunnen kaderen. Daarna wordt de stageopdracht besproken. Je krijgt meer informatie over de probleemstelling en het beoogde resultaat zodat dit te vergelijken is met het uiteindelijke resultaat. Vervolgens worden de meer technische aspecten besproken zoals het opzetten van de ontwikkelomgeving. Hier wordt besproken hoe dit werd gedaan en welke moeilijkheden er waren. De informatiebron, een QTI-bestand, is een belangrijk aspect in dit eindwerk en het is essentieel om weten wat het is en hoe het gebruikt wordt. Verder kom je ook meer te weten over het softwaresysteem Drupal en of dit een nuttig systeem is. Ten slotte zie je ook het eindresultaat. Vaak wordt het geheel geïllustreerd met stukjes code om alles begrijpelijker te maken.

9 1 Stageomgeving 9 1 Stageomgeving In het academiejaar heb ik samen met Dieter Verbeemen stage gelopen aan de universiteit van Wenen, meer specifiek op het departement Nederlandse Taal. Weinig studenten vangen een stage aan in het buitenland, maar ik zag het als een opportuniteit om dát tikkeltje meer ervaring te krijgen. Niet alleen leer je om even zelfstandig op je benen te staan, je leert ook omgaan met vreemde culturen. Waarom ik gekozen heb voor Wenen? Omdat ik op voorhand geen idee had welke stageopdracht ik kon verwachten, moest ik mijn keuze baseren op de stad. Ik kon kiezen tussen Jimma en Mekele (Ethiopië), Halmstad (Zweden), Lissabon (Portugal) en Wenen (Oostenrijk). De keuze was voor mij zeer snel gemaakt omdat Wenen heel veel te bieden heeft. Het is een wereldstad waar elke dag iets te beleven valt en daarbij biedt ze een grote schat aan cultureel erfgoed. Een goed voorbeeld hiervan is wellicht de universiteit van Wenen. 1.1 Universiteit van Wenen De universiteit van Wenen is gesticht door hertog Rudolph IV in Rudolph leefde van 1339 tot In deze korte tijdspanne heeft hij veel opgericht, vandaar zijn bijnaam, der Stifter (Duits voor de stichter). In zijn hebzucht om te concurreren met zijn machtige schoonvader, die immers het Koninkrijk Bohemen met zijn hoofdstad Praag tot een cultureel middelpunt van Centraal-Europa maakte, wilde hij Wenen op de kaart zetten. Zo gaf hij de opdracht om het Stephansdom te bouwen en in 1365 de Weense universiteit. Tot nog toe is deze universiteit de oudste in het Duitstalige gedeelte van de wereld en één van de grootste in Centraal-Europa. Momenteel zijn er ca studenten ingeschreven in 188 verschillende opleidingen waarvan 4 vooropleidingen, 56 bacheloropleidingen, 117 masteropleidingen en 11 doctoraatsopleidingen. Naast het grote aantal studenten zijn er nog personeelsleden waarvan academici. De academische instellingen van de universiteit zijn over meer dan zestig locaties doorheen de stad verspreid. Het hoofdgebouw bevindt zich op de Dokter-Karl-Lueger-Ring, een straat die deel uitmaakt van de Ringstraße, een cirkelvormige boulevard rond het centrum van Wenen. Op Figuur 1-1 zie je een foto van dit hoofdgebouw. Figuur 1-1 Hoofdgebouw universiteit Wenen In dit gebouw zetelt het management en bevinden zich de bibliotheek, enkele administratieve diensten en sommige departementen waaronder het departement van de Nederlandse Taal. Dit departement behoort tot de Faculteit van Filologische en Culturele

10 1 Stageomgeving 10 Studies. In Bijlage 1 Organigram universiteit Wenen vind je een organigram waarin de structuur van de universiteit verduidelijkt wordt. 1.2 Neerlandistiek Vanaf 1992 kunnen studenten de optie Nederlandistik studeren in combinatie met een andere studierichting. Vanaf 1997 kunnen studenten deze optie als hoofdvak nemen en sinds het academiejaar is het een volwaardige opleiding met zelfs een masteropleiding. Het lessenpakket omvat naast taalverwerving en taalbeheersing, ook literatuur-, taal- en cultuurwetenschappen. Studenten die afstuderen spelen een belangrijke rol als culturele bemiddelaars 1 tussen Duits- en Nederlandstalige gebieden. Ze vinden vaak werk in de culturele en wetenschappelijke sector of kunnen aan de slag als vertaler-tolk. Momenteel studeren zo n 250-tal studenten deze opleiding. 1.2 Contactpersoon Aan het hoofd van het project Dutch++, zie hoofdstuk 2.1, staat Prof. Dr. Herbert Van Uffelen. Hij was eigenlijk onze opdrachtgever en we moesten hem wekelijks op de hoogte houden. Wij werkten het meest samen met Elisa De Llano, de IT-verantwoordelijke op het departement Neerlandistiek. Elisa is afkomstig uit Spanje en studeert haar Master Fysica op de universiteit van Wenen. In haar vrije tijd is ze veel bezig met Linux en webdevelopment in PHP. 1 Dit zijn mensen die vertrouwd zijn met het internationale artistieke landschap en met de vereisten van een hedendaagse creatie (De Coster).

11 2 Stageopdracht 11 2 Stageopdracht Om inzicht te krijgen in onze stageopdracht is het belangrijk om de oorsprong en de probleemstelling hiervan te kennen. Deze zaken worden in dit hoofdstuk besproken. 2.1 Project Dutch++ Dutch++ is een project opgestart door de universiteit van Wenen onder leiding van Prof. Dr. Herbert Van Uffelen. Aan dit project nemen nog vier andere instituten deel waaronder de Universiteit van Tilburg, het Instituut voor de Opleiding van Leraren in Paramaribo, de Vrije Universiteit Berlijn en de Katholieke Hogeschool Kempen. Het doel van dit project is om een online leerplatform op te starten dat de naam Dutch++ meekrijgt. Studenten van de opleiding Neerlandistiek worden via dit platform beter ondersteund in het vergaren van kennis die ze nodig hebben om hun Nederlands bij te schaven. Het platform zal enerzijds informatie en anderzijds oefeningen aanbieden. De oefeningen bestaan uit materiaal afkomstig van Nederlandstalige tekstboeken voor het aanreiken van algemene woordenschat, maar er komen ook oefeningen die zich concentreren op de verschillende varianten van het Nederlands gesproken in Vlaanderen, Nederland en Suriname. De oefeningen zullen vooral worden aangeleverd door de universiteit van Tilburg. Het platform zal ook een online gids van de Nederlandse varianten beschikbaar stellen die zeer nuttig zal zijn voor studenten maar ook voor docenten. Dutch++ zal dus niet alleen gebruikt worden door studenten maar ook door docenten. Zij kunnen dit gebruiken als bijkomend leermateriaal in de lessen of het aanbieden voor zelfstudie. Het platform is tevens gebouwd met het oog op een makkelijke uitbreiding voor andere talen. Het platform zal worden ontwikkeld door experts op het gebied van didactiek, taalkunde en informatica. Het hele project zou binnen drie jaar of tegen 2015 afgerond moeten zijn. 2.2 Probleemstelling OLAT de afkorting voor Online Learning And Training is het online leerplatform op de universiteit. Het softwaresysteem werd niet ontwikkeld door de Weense universiteit maar door de universiteit van Zurich. OLAT is een zeer uitgebreid systeem waarin je cursussen kan aanmaken die algemene informatie kunnen bevatten, maar ook oefeningen of examens, fora, blogs, agenda s of wiki s. Daarnaast biedt OLAT ook nog uitgebreide ondersteuning voor accountbeheer, de mogelijkheid om bestanden te delen of zelfs te chatten. Wereldwijd hebben al meer dan 150 scholen OLAT in gebruik genomen als online leerplatform. Het grote voordeel naast de vele taalinstellingen is dat OLAT volledig gratis is en het weinig resources inneemt waardoor je al met een kleine server veel gebruikers kan ondersteunen. Enkele nadelen zijn dan weer dat je enorm veel moet klikken om bijvoorbeeld een oefening te creëren, dat je vreemde vertalingen in het systeem vindt en dat er soms een onlogische gebruikersinterface is. Op het OLAT-systeem in Wenen staat al een heleboel informatie opgeslagen waaronder lesmateriaal, oefeningen, testen, etc. Maar OLAT mist het attractieve en vooral vanuit gebruikersstandpunt het interactieve aspect. Daarom werd er een website in Drupal gemaakt waarin links staan die naar het OLAT-systeem verwijzen. De student moet dan vaak twee

12 2 Stageopdracht 12 keer inloggen: de eerste keer op de Drupalwebsite en de tweede keer op OLAT. Dit wil men vermijden door toegang te verlenen door enkel in te loggen op de Drupalwebsite. Hiervoor wordt wel een nieuwe Drupalwebsite gecreëerd die de naam Dutch++ meekrijgt. Dit is meteen de start van het Dutch++ project. Alle cursussen en oefeningen uit OLAT worden in Drupal geüpload en gepresenteerd naar de eindgebruiker. De oefeningen uit OLAT kunnen in Drupal nog extra functionaliteiten krijgen zoals drag-and-drop ondersteuning, selectieoefeningen en oefeningen met video en audio. 2.3 Opdracht Onze opdracht bestaat eigenlijk uit drie grote delen die Dieter en ik hebben verdeeld onder elkaar. Het eerste deel bestaat erin om oefeningen die in OLAT zijn geschreven, over te brengen en te tonen in Drupal. Deze oefeningen zijn opgebouwd via de QTI-standaard of Question and Test Interoperability. Deze standaard wordt ook gebruikt bij veel andere leerplatformen zoals Blackboard of Moodle wanneer het gaat over het opslaan en delen van oefeningen. Omdat Drupal nog geen functionaliteit heeft om deze QTI-bestanden te importeren, moet dit worden ontwikkeld. Hoofdstuk 4, QTI, geeft meer informatie over dit bestandstype. Voor het tweede deel van de opdracht is het de bedoeling om de cursusinformatie gemaakt in OLAT ook over te brengen naar de Drupalwebsite. De cursusinformatie bestaat voornamelijk uit HTML-bestanden en enkele XML-bestanden. Ten slotte moeten in Drupal de oefeningen uit OLAT interactiever worden. Onder interactieve oefeningen verstaat men drag-and-drop mogelijkheden, geluids- en videofragmenten, etc. Dit is in OLAT niet mogelijk en dit kan opgelost worden door deze functionaliteiten aan Drupal toe te voegen. Ik heb het eerste deel voor mijn rekening genomen en Dieter het tweede deel. Aan het derde deel hebben we samengewerkt omdat er veel nieuwe functionaliteiten in Drupal kunnen worden toegevoegd. 2.4 Verwacht resultaat Het is natuurlijk onze intentie om een zo goed mogelijk programma op te leveren zonder systeemfouten. De gebruikersinterface moet zeer eenvoudig zijn zodat men het gewenste resultaat op de snelste manier kan bereiken zonder te veel schermen gepresenteerd te krijgen. Verder moet het systeem ook flexibel zijn, zo zal er een uploadfunctionaliteit nodig zijn om cursussen op te laden. We willen hier het de gebruiker zo aangenaam mogelijk maken dus willen we het uploaden van meerdere bestanden in één keer ondersteunen. Een andere functionaliteit die het comfort van de gebruiker moet verhogen is bij het uploaden opties onmiddellijk te kunnen instellen zoals het nog niet publiceren van de cursus of oefeningen. Studenten die de oefeningen gaan maken zullen enkele uren in het systeem doorbrengen. Daarom willen we er ook voor zorgen dat het voor hen aangenaam wordt, door de oefeningen er goed te laten uitzien en goede functionaliteiten in te bouwen voor zelfevaluatie en feedback.

13 2 Stageopdracht Fasering In het begin kregen we telkens een deel van de opdracht via de IT-verantwoordelijke. Daarom hebben we nooit een volledige planning op voorhand kunnen opstellen, dus hebben we telkens kleine deelplanningen opgesteld, die we aanvulde op een grote planning die je kan vinden in Bijlage 2 Fasering. Het was pas vanaf april dat we een volledige planning konden maken omdat we dan precies wisten wat we moesten doen. Er werden wekelijks of tweewekelijks kleine vergaderingen gehouden waar het geleverde werk werd geëvalueerd. Op deze vergaderingen kwamen we vaak nog extra eisen te weten omdat het Dutch++ project nog in zijn kinderschoenen stond.

14 3 Opzetten server 14 3 Opzetten server De meeste softwareprojecten beginnen met het opzetten van een testomgeving, dit is een omgeving waarop je lokaal kan ontwikkelen zonder het productieplatform te hinderen. Als de software volledig getest is, wordt alles overgebracht naar het productieplatform. Onze testomgeving bestaat eenvoudig uit een server waarop OLAT en PHP staan geïnstalleerd. 3.1 Virtualisatie met VirtualBox Om niet voortdurend tussen twee verschillende systemen te switchen hebben we ervoor gekozen om OLAT en PHP te installeren op een virtuele machine waarop Ubuntu Server draait. De software die de virtuele machine aanstuurt is Oracle VirtualBox. Met het commando vboxheadless kan je de virtuele machine vanop afstand starten, dus zonder de applicatie te openen. Volgend stukje code illustreert hoe je vanop afstand een virtuele machine kan starten in Windows PowerShell. Start-Process 'C:\Program Files\Oracle\VirtualBox\vboxheadless' '-s Ubuntu' -WindowStyle Hidden 3.2 Configuratie Ubuntu Server De server moet natuurlijk zo geconfigureerd worden dat die van buitenaf toegankelijk is. Daarvoor is het noodzakelijk om in het bestand /etc/network/interfaces een IP-adres te configureren. Om de server vanop afstand te kunnen beheren kan je gebruik maken van telnet of rlogin. Maar omdat dit verouderde technologie is en als onveilig wordt beschouwd, maken we gebruik van SSH om een connectie te leggen tussen de host en de remote machine SSH Secure Shell of kortweg SSH is een netwerkprotocol dat toelaat om op een veilige, geëncrypteerde manier, commando s te versturen naar een remote machine. Vandaag de dag wordt deze technologie het meest aanbevolen en gebruikt door systeembeheerders. Omdat we lokaal werken is er geen nood aan een zeer geavanceerde installatie van SSH. Met het RSA-encryptieprotocol maken we een publieke en private sleutel aan. ssh-keygen t rsa De publieke sleutel wordt gebruikt om het wachtwoord te encrypteren. De private sleutel wordt dan weer gebruikt om het geëncrypteerde wachtwoord te decrypteren. Deze private sleutel moet veilig worden bewaard en aan niemand worden doorgegeven, anders zit je met een veiligheidsprobleem. In het configuratiebestand /etc/ssh/ssh_config moet public-key authenticatie worden toegelaten en moet er verwezen worden naar waar de sleutels zijn opgeslagen op de server. Om de server vanop afstand te beheren moet je een tool gebruiken die SSH ondersteunt. Wij gebruiken hiervoor PuTTY en WinSCP. Figuur 3-1 is een schermafdruk van de Command Line Interface van PuTTY. Figuur 3-2 toont de GUI van WinSCP. Het grote verschil tussen

15 3 Opzetten server 15 deze programma s is dat WinSCP een grafische voorstelling toont van de server in tegenstelling tot PuTTY die de informatie rechtstreeks toont. Wij gebruiken PuTTY voornamelijk voor de configuratie van het systeem. WinSCP gebruiken we om eenvoudig bestanden te bekijken en om bestanden over te brengen naar onze lokale machine. Figuur 3-1 CLI van PuTTY Figuur 3-2 GUI van WinSCP Tomcat Omdat OLAT een webapplicatie is, geschreven in Java, is een Tomcatserver onontbeerlijk. Tomcat is verantwoordelijk voor de communicatie tussen JavaServer Pages en de webserver. In het bestand /etc/tomcat6/tomcat-users.xml maken we een gebruiker aan zodat deze kan inloggen op de Tomcatserver. <role rolename="manager" /> user username="tomcat" password="tomcat" roles="manager" /> Vervolgens kan het WAR-bestand 2 van OLAT gemakkelijk gedeployd worden in Tomcat. Nu moeten er nog enkele zaken geconfigureerd worden vooraleer OLAT in gebruik genomen kan worden. 2 Een WAR-bestand bevat JavaServer Pages, Java Servlets, Java klassen, XML-bestanden en HTMLbestanden die samen een webapplicatie vormen.

16 3 Opzetten server OLAT De installatie van OLAT is vrij moeilijk omdat er weinig documentatie bestaat. De vindbare documentatie is dan vaak weer verouderd. Ondanks enkele moeilijkheden zijn we er toch in geslaagd om OLAT te installeren. OLAT maakt gebruik van een database waarin vooral logbestanden en gebruikers worden bijgehouden. Wachtwoorden van gebruikers worden opgeslagen met de MD5- encryptiemethode. Dit is een spijtige zaak omdat de zogenaamde hashcodes gemakkelijk te kraken zijn, maar dit terzijde. Wij hebben gekozen voor de gratis database MySQL omdat die wordt aangeraden door OLAT zelf. Na de configuratie van de MySQL database en het uitvoeren van het databasescript moeten in het configuratiebestand op Tomcat enkele parameters worden aangevuld. Zo moet je specifiëren waar de gebruikersdata, loggegevens en cursussen worden opgeslagen. Ook moet je het databasetype opgeven. Het volgend stukje code illustreert het geheel. userdata.dir = /opt/olat/olatdata archive.dir = ${userdata.dir}/deleted_archive log.dir = ${userdata.dir}/logs folder.root = ${userdata}/bcroot db.vendor = mysql Dit configuratiebestand moet ook gekopieerd worden naar /usr/share/tomcat6/lib/ onder de naam olat.local.properties. Als je dit niet doet, dan worden de cursussen en oefeningen niet definitief opgeslagen en worden ze gewist bij het afsluiten van de server. Het heeft veel tijd en moeite gekost om dit probleem te lokaliseren. Bij het zoeken in het logboek van Tomcat zijn we uiteindelijk op een FileNotFoundException gebotst die verwees naar de /usr/share/tomcat6/lib/ map. De Tomcatgebruiker moet eigenaar worden van de map /opt/olat/olatdata en iedereen moet ook beheerdersrechten krijgen op deze map, behalve gebruikers van buitenaf. Hiervoor worden de volgende commando s gebruikt. chown R tomcat6:tomcat6 /opt/olat/olatdata chmod R 775 /opt/olat/olatdata Dit is meteen de laatste stap van de installatie. In Figuur 3-3 zie je een schermafdruk van OLAT.

17 3 Opzetten server 17 Figuur 3-3 OLAT draaiende op Tomcat Xdebug, de debugger Met een debugger kan je de oorzaak van een softwarebug achterhalen. Omdat PHP op de server wordt uitgevoerd en Netbeans geen eigen developmentomgeving kan opzetten zoals bijvoorbeeld Visual Studio wel kan, moet er een extra tooltje worden ingeroepen, namelijk Xdebugger. Deze debugger werkt vlekkeloos samen met Netbeans. Netbeans is een gratis, open source Integrated Development Environment of kortweg IDE voor softwareontwikkelaars. Het is een multiplatform softwarepakket waarin hoofdzakelijk Java, C, C++, Groovy en PHP kunnen ontwikkeld worden. Op het moment van schrijven heb ik de meest recente versie gebruikt. Xdebug moet wel worden geconfigureerd op de server. Dankzij het volgende commando wordt er veel zelf geconfigureerd: sudo apt-get install php5-xdebug In het xdebug.ini of php.ini bestand moeten nog enkele lijnen code worden geplaatst. Het betreft de verwijzing naar het shared object bestand, de manier waarop Xdebug contact moet maken en het IP-adres van de host. zend_extension=/usr/lib/php5/ lfs/xdebug.so xdebug.remote_enable = on xdebug.remote_host = #xdebug.remote_port = 9000 #xdebug.remote_handler = dbgp

18 3 Opzetten server 18 De twee laatste waarden worden ook vaak geconfigureerd in het xdebug.ini of php.ini bestand, maar eigenlijk zijn ze overbodig omdat dit de standaardwaarden zijn. Bij elke wijziging in deze bestanden mag je niet vergeten om Apache te herstarten. Netbeans zelf is standaard al correct geconfigureerd, enkel aan de browser ontbreekt er nog een add-on. Natuurlijk zijn er verschillende add-ons op de markt voor verschillende browsers. Omdat ik een grote fan ben van de webbrowser Google Chrome, gebruik ik de add-on Xdebug helper. Na het plaatsen van een breakpoint in Netbeans zal PHP stoppen en zie je de waarden van de variabelen in Netbeans zoals je kan zien in Figuur 3-4. Uiteraard kan je steeds verder in de code gaan om te zien wat er uiteindelijk gebeurt, een stap teruggaan is niet mogelijk. Figuur 3-4 Variabelen in Netbeans met behulp van Xbugger

19 4 QTI 19 4 QTI IMS 3 Question & Test Interoperabilty of kortweg QTI, ontwikkeld door het IMS Global Learning Consortium, is een standaard die de structuur beschrijft van een test met bijhorende vragen. Deze standaard zorgt er natuurlijk voor dat de informatie gemakkelijk getransfereerd kan worden naar verschillende leerplatformen zoals Moodle of Blackboard. De standaard is gedefinieerd in XML om zo ultra compatibel te zijn met zowat elke programmeertaal. XML zelf is ook een standaard van het W3C om structuur te geven aan data. De meest recente versie van QTI is versie 2.1 maar die wordt door geen enkel leerplatform volledig ondersteund (QTI, 2012). Veel leerplatformen, waaronder ook OLAT, maken immers nog gebruik van de oudere standaard, namelijk versie 1.2 die dateert van januari XML XML staat voor EXtensible Markup Language en is zoals reeds gezegd ontworpen om structuur te geven aan data maar ook om data op te slaan of te transfereren tussen verschillende systemen. Een XML-document bestaat uit een root element en dit heeft steeds verschillende kinderen onder zich. Een element bestaat uit tags waarin heel vaak tekst zit opgeslagen. Om nog meer informatie te geven over een bepaald element kan het ook attributen bevatten. Het volgende voorbeeld maakt dit wellicht duidelijk. <boekenwinkel> <boek categorie="internet"> <titel taal="en">xml voor Dummies</titel> <auteur>ben Vandenbosch</auteur> <prijs valuta="$">25.00</prijs> </boek> <boek categorie="koken"> <titel taal="nl">sos Piet vol. 47</titel> <auteur>piet Huysentruyt</auteur> <prijs valuta=" ">39.99</prijs> </boek> </boekenwinkel> Het root element in bovenstaand voorbeeld is <boekenwinkel> en dit element heeft twee kinderen. Het <boek> element heeft drie kinderen en heeft ook een attribuut dat meer informatie geeft over het boek, namelijk categorie. 4.2 Structuur in XML Op de volgende pagina zie je een vereenvoudigd voorbeeld van een QTI-bestand. 3 IMS staat voor Instructional Management Systems, maar omdat dit meer vragen oproept dan antwoorden willen ze gewoon als IMS Global Learning Consortium door het leven gaan.

20 4 QTI 20 <questestinterop> <assessment ident="myolat_1_ " title="titel Test"> <objectives> <material> <mattext><![cdata[de leerdoelen]]></mattext> </material> </objectives> <section ident="myolat_1_ " title="titel Sectie"> <item ident="qtiedit:scq: " title="vraag 1" maxattempts="1"> <presentation> <material> <mattext texttype="text/html"><![cdata[1 + 1 =]]></mattext> </material> <response_lid ident=" " rcardinality="single" rtiming="no"> <render_choice shuffle="no" minnumber="1" maxnumber="1"> <flow_label class="list"> <response_label ident=" " rshuffle="yes"> <material> <mattext texttype="text/html"><![cdata[één]]></mattext> </material> </response_label> </flow_label> <flow_label class="list"> <response_label ident=" " rshuffle="yes"> <material> <mattext texttype="text/html"><![cdata[twee]]></mattext> </material> </response_label> </flow_label> </render_choice> </response_lid> </presentation> </item> </section> </assessment> </questestinterop> Zoals je kan zien in bovenstaand voorbeeld zijn de belangrijkste onderdelen in een QTIbestand: het assessment element: dit bevat heel de test; de section elementen: dit is een container voor items die een gemeenschappelijk leerdoel hebben; de item elementen: die bevatten de vragen. Het assessment element komt maximaal één keer voor in een QTI-document. De section elementen kunnen dan weer meerdere keren voorkomen binnen het assessment element en ook de item elementen kunnen meerdere keren voorkomen binnen het section element. Behalve deze cruciale elementen zijn er nog veel meer elementen die kunnen voorkomen in een QTI-document. Het presentation element dat voorkomt in een item element bevat buiten de vraag ook de mogelijke antwoorden en het vragentype. Het vragentype zit verscholen in het attribuut ident in het element item. OLAT ondersteunt vier vragentypes namelijk: Single Choice Question (SCQ) Multiple Choice Question (MCQ) Fill in Blanks (FIB) KPRIM

21 4 QTI 21 Waar de eerste twee niet veel duiding vragen, zijn de laatste twee misschien minder evident. Het Fill in Blanks type is een invuloefening en KPRIM is een soort oefening die haar oorsprong vindt bij medische examens. Er zijn steeds vier mogelijkheden die juist of fout kunnen zijn. Enkel wanneer alle antwoorden correct zijn ingevuld, krijg je de volledige punten. Wanneer er één antwoord fout is krijg je nog de helft en je behaalt niks wanneer twee of meer antwoorden fout zijn. In Figuur 4-1 en Figuur 4-2 zie je twee voorbeelden van oefeningen in OLAT. Figuur 4-1 Fill in Blanks (FIB) oefening in OLAT Figuur 4-2 KPRIM oefening in OLAT In het item element zit ook nog informatie opgeslagen zoals welke antwoorden correct en incorrect zijn, de puntenverdeling en feedbackmogelijkheden. 4.3 QTI Object Parser Het hele opzet is om in Drupal een cursus in te laden met bijhorende QTI-bestanden. Deze QTI-bestanden moeten dus gelezen en geïnterpreteerd worden. Omdat Drupal in PHP geschreven is, wordt het QTI-bestand in PHP gelezen en verwerkt tot een object met behulp van een zogenaamde parser. Deze parser werd in Netbeans ontwikkeld De broncode Het is de taak van de parser om een QTI-bestand in te lezen en te verwerken tot een object. Omdat QTI eigenlijk een XML-bestand is, kan je de standaard PHP-functies gebruiken om door de XML-structuur te gaan. Met de volgende code wordt een XML-bestand ingelezen.

22 4 QTI 22 if (file_exists($filename)) { $xml = new SimpleXMLElement($filename); } else { exit('failed to open '. $filename); } In de variabele $xml zit nu het volledige XML-bestand. Het is mogelijk om via de klassieke manier door de XML-structuur te navigeren zoals je kan zien in de volgende code. $sections = $xml->assessment->section; $title = $xml->assessment->section->attributes()->title; Bovenstaand voorbeeld geeft respectievelijk een array terug van alle section elementen en de titel als attribuut in het element section. Maar het is ook mogelijk om zeer specifiek zaken te vinden in het XML-bestand met behulp van XPath. In het volgend voorbeeld wordt XPath gebruikt om de elementen respcondition op te halen waarin het kind setvar bestaat, maar zonder het element conditionvar en het bijhorend kind other. $item = $xml->assessment->section->item; $result = $item->xpath('respcondition[setvar and not(conditionvar/other)]'); Een QTI-bestand heeft een zeer uitgebreide XML-structuur. Dit wordt zeker duidelijk wanneer je te weten moet komen of de mogelijkheden van een oefening in willekeurige of sequentiële volgorde moeten komen. $randomorder = $item->presentation->response->choice->attributes()->shuffle; Uiteraard is het goed mogelijk dat een element uit deze ketting ontbreekt, bijvoorbeeld het element choice. Als je de code laat staan zoals nu, gaat PHP een foutmelding tonen. Dit moet kost wat kost vermeden worden, dus moest er een oplossing gevonden worden. Al vlug kwamen we op de PHP-functie isset() die gaat controleren of de variabele bestaat en niet leeg is. Maar ook deze functie schoot te kort, want zij controleert enkel het laatste element uit de hele ketting. Ik moest zelf een functie schrijven die elk element uit de ketting gaat controleren om te zien of het bestaat. Daarvoor is de volgende functie verantwoordelijk. 1 function getdataifexists() { 2 3 $args = func_get_args(); 4 $baseobj = array_shift($args); 5 6 if (!is_object($baseobj)) { 7 return NULL; 8 } 9 10 foreach ($args as $arg) { 11 $arg = (string) $arg; 12 if (substr($arg, -2) == '()') { 13 $arg = substr($arg, 0, -2); 14 if (!method_exists($baseobj, $arg)) 15 return NULL; 16 $baseobj = $baseobj->$arg(); 17 } else { 18 if (!isset($baseobj->$arg)) 19 return NULL; 20 $baseobj = $baseobj->$arg; 21 }

23 4 QTI } return $baseobj; 25 } getdataifexists($item, 'attributes()', 'title'); Deze functie ontvangt een ongekend aantal parameters (lijn 3), maar de eerste parameter is steeds een object die de structuur van de XML bevat (lijn 4). Vanaf lijn 10 ga ik elke parameter controleren of het een object is. Als de parameter een methode is, bijvoorbeeld attributes(), dan controleer ik of deze methode bestaat en vervolledig ik de ketting (lijnen 12 tot 17). Als de parameter een element is dan controleer ik of het bestaat en maak ik de ketting langer (lijnen 18 tot 21). De informatie moet worden opgeslagen en hiervoor bestaan er twee manieren. Ofwel sla je de informatie op in een grote associatieve array. Hierin kan de unieke sleutel ook strings bevatten zoals te zien is in het volgende voorbeeld. $array = array( 'foo' => 'bar', 'bar' => 'foo', ); Op deze manier kan je dus meer informatie opslaan in tegenstelling tot een klassieke array. Maar het programmeert nogal oncomfortabel en om er uiteindelijk informatie uit te halen is het nogal omslachtig. 1 $s = 1; 2 foreach ($item->presentation->flow->children() as $child) { 3 $array['sections'][$s]['items'][$i]['flow'][] = array( 4 'textbox' => (string) $child->attributes()->ident 5 ); 6 } 7 // Increase item-var when all possibilities in items are looped 8 $i++; Op lijn 3 zie je ook weer een lange ketting verschijnen. Dit keer niet afkomstig van het navigeren door de XML-structuur maar wel om de array structuur te geven. Daarom ben ik met klassen en objecten gaan werken Klassen en objecten Een klasse kan constanten, variabelen en functies bevatten. De laatste twee worden respectievelijk attributen en methodes genoemd. In PHP wordt een klasse op de volgende manier gedefinieerd.

24 4 QTI 24 class MijnKlasse { // declaratie attributen private $attribuut; } // declarative methode public function toonvar() { echo $this->attribuut; } Vooraleer de klassen in PHP worden gedefinieerd moet je wel weten welke klassen je gaat nodig hebben. Daarom start je met het maken van een klassendiagram dat een goed beeld schetst over hoe alles in elkaar zit, zoals je kan zien in onderstaande figuur. Figuur 4-3 Klassendiagram QTI object parser Figuur 4-3 beschrijft dat een QTI-bestand bestaat uit een test waarin verschillende secties zitten. In elke sectie zitten vervolgens één of meerdere items of vragen. Elk item heeft natuurlijk enkele keuzemogelijkheden die worden gedefinieerd in de klasse Possibility. Verder kan een item ook feedback hebben, hoewel dit niet verplicht is. De verschillende soorten vragen zitten opgeslagen in de klassen SingleChoiceQuestion, FillInQuestion, MultipleChoiceQuestion en KPRIMQuestion. Ten slotte heb je ook nog een Answer klasse die de antwoorden bijhoudt van deze drie laatste klassen. De klasse SingleChoiceQuestion houdt zelf haar antwoord bij. Bekijk Bijlage 3 QTI Klassendiagram voor het volledige klassendiagram.

25 4 QTI 25 Ik bespreek heel kort de klasse Item en MultipleChoiceQuestion. 1 class Item { 2 3 protected $title; 4 protected $possibilities = array(); 5 protected $maxattempts; 6 7 public function construct($title, $maxattempts = '') { 8 $this->title = $title; 9 $this->maxattempts = $maxattempts; 10 } public function settitle($title) { 13 $this->title = $title; 14 } public function gettitle() { 17 return $this->title; 18 } public function setpossibility($possibilities) { 21 array_push($this->possibilities, $possibilities); 22 } 23 } Zoals je kan zien in Figuur 4-3 erven alle Question klassen over van de klasse Item. Dit betekent dat de Question klassen alle attributen en methodes kunnen gebruiken uit de klasse waarvan ze overerven. Dit fenomeen noemt men ook polymorfisme. De voorwaarde is wel dat de attributen de identifier protected meekrijgen in plaats van de gebruikelijke private of public. We declareren op lijn 4 een attribuut $possibilities dat een array is waarin verschillende objecten van het type Possibility kunnen. Lijn 7 bevat de constructor. Een constructor wordt opgeroepen bij het aanmaken van een object. Wanneer je een object van de klasse Item aanmaakt, moet je minimum één parameter meegeven, namelijk de titel. Optionele parameters worden gedefinieerd door een lege string te voorzien als standaardwaarde. Met de settermethode op lijn 12 kan je data in het object stockeren en met een getter op lijn 16 haal je er informatie uit. Op lijn 20 zie je ook nog een methode setpossibility die een keuzemogelijkheid binnenkrijgt als parameter. Een item object bestaat telkens uit één titel maar uit meerdere keuzemogelijkheden vandaar dat deze in een array worden gestockeerd zoals in lijn 4. De PHP functie array_push op lijn 21 zorgt dat de parameter die binnenkomt in de array wordt opgeslagen. Net als bij de klasse Item bestaat ook de klasse MultipleChoiceQuestion uit verschillende attributen en methodes. Het enige verschil is dat deze klasse de attributen en methodes van de klasse Item moet kunnen overerven. Dit gebeurt door achter de naam van de klasse het woordje extends te plaatsen en vervolgens de naam van de klasse waarvan het moet overerven. Dit wordt geïllustreerd in het volgende voorbeeld. class MultipleChoiceQuestion extends Item { }

26 4 QTI 26 Nog een ander voordeel waarom ik klassen en objecten boven arrays gebruik, is het kunnen gebruiken van de Intellisense functie van Netbeans. Eigenlijk is Intellisense niet meer dan een automatische aanvulling voor code zoals je kan zien in Figuur 4-4. Figuur 4-4 Intellisense in Netbeans

27 5 Drupal 27 5 Drupal Drupal is een softwarepakket, ontwikkeld door onze landgenoot Dries Buytaert, dat toelaat om eenvoudig een grote verscheidenheid aan inhoud te publiceren, te beheren en te organiseren op een website. Men noemt dit dan ook een CMS dat staat voor Content Management System. Drupal wordt voornamelijk gebruikt voor community portaalsites, intranet portaalsites binnen bedrijven, algemene websites of e-commerce applicaties. Standaard heeft Drupal al veel mogelijkheden die je zo kan gebruiken zoals een content management systeem, fora, nieuwsbrievenbeheer, uploaden en downloaden van bestanden, etc. Het is open source software, dus het staat ontwikkelaars vrij om de software aan te passen en gratis te verspreiden via de Drupal community. Dit is meteen wat wij hebben gedaan, namelijk het ontwikkelen van een module in Drupal. Doorheen dit hoofdstuk worden stukjes code van de ontworpen module genomen ter illustratie. Deze stukjes code zijn conform de regels van Drupal Voor- en tegenstanders Elk softwaresysteem, dus ook Drupal, heeft zijn voor- en tegenstanders. Ik heb er drie maanden mee gewerkt dus kan ik ook mijn eigen mening hier verkondigen. Met honderd procent zekerheid kan ik zeggen dat ik één van die tegenstanders ben. Drupal is volledig in PHP geschreven. PHP is een ontzettend toegankelijke programmeertaal die je zeer vlug onder de knie krijgt. Op de één of de andere manier heb je dit bij Drupal niet. Drupal staat gekend om zijn heel hoge leercurve, maar na drie maanden stage stel ik me nog steeds vragen over hoe alles werkt. Dit probleem wijd ik aan de gebrekkige documentatie en ondersteuning. Drupal heeft een API maar hierop vind je nauwelijks voorbeelden of demo s terug en dit verwacht je toch van een degelijke API. Enkele goede voorbeelden van begrijpbare API s zijn deze van jquery (api.jquery.com) of MSDN van Microsoft (msdn.microsoft.com/en-us/library). Verder stel ik me ook vragen bij de opbouw van Drupal, deze bestaat uit ellenlange lijnen code waartussen massa s lijnen aan commentaar geschreven staan die eigenlijk in de API zouden moeten opgenomen zijn. In Figuur 5-1 en Figuur 5-2 zie je hier voorbeelden van. Drupal breekt natuurlijk ook met de objectgeoriënteerde manier van programmeren en gebruikt dus nauwelijks klasses waardoor herbruikbaarheid van code bemoeilijkt wordt.

28 5 Drupal 28 Figuur 5-1 Commentaarlijnen in het entity.inc bestand Figuur 5-2 Commentaarlijnen in het common.inc bestand Als je wil upgraden naar een nieuwere versie van Drupal zullen zelfgeschreven of contributed modules 4 waarschijnlijk niet werken en moet je wachten tot de modules terug ondersteund worden of ze zelf gaan herschrijven, wat veel tijd kan innemen. Gelukkig kan ik weinig softwaresystemen bedenken die geen achterwaartse compatibiliteit ondersteunen. 4 Dit zijn modules die worden aangeleverd door de community van Drupal.

29 5 Drupal 29 Tijdens het programmeren zijn we nog enkele programmatorische problemen tegengekomen zoals het alom gekende cacheprobleem. Drupal heeft een cachesysteem ingebouwd dat niet alleen zeer veel geheugen kan innemen maar ook voor grote frustraties kan zorgen bij het programmeren. Je schrijft namelijk een stukje code waarin een fout zit, je herstelt het en toch lijkt het nog steeds niet te werken, hoewel dit wel zou moeten. Dit komt natuurlijk door de cache die je manueel moet verwijderen. Nog een frustratie is de vreemde manier om data uit een database te halen, wat zeker moeilijk wordt bij het schrijven van ingewikkelde queries, bekijk hoofdstuk Aanspreking database voor een uitgewerkt voorbeeld. En zoals het spreekwoord zegt: bij Drupal zit er overal een addertje onder het gras. Als je met een debugger te werk gaat, zie je in eerste instantie de inhoud van de array niet. Als je maar één record verwacht, moet je toch een for-each instructie uitvoeren om de array die je terugkrijgt af te lopen en als je deze array twee keer zou moeten aflopen, moet je de data opnieuw uit de database halen omdat Drupal de inhoud van de array op een mysterieuze manier doet verdwijnen. 5.2 Modulair programmeren Na de installatie van Drupal op een webserver heb je eigenlijk al veel functionaliteiten die je kan gebruiken. Dit komt omdat Drupal standaard al enkele modules activeert die in de core zitten. De core in Drupal is alles buiten de map sites. In Figuur 5-3 zie je de mappenstructuur van Drupal. De map sites zal later eigen ontwikkelde of gedownloade modules bevatten. Figuur 5-3 Mappenstructuur van Drupal De core van Drupal is modulair opgebouwd. Hij gebruikt voornamelijk hooks die aangesproken worden via een API. Bij het ontwikkelen van een module moet je natuurlijk deze hooks gaan gebruiken Hooks Een hook is eigenlijk een PHP-functie met de naam foo_bar(), waar foo de naam van de module is en bar de naam van de hook. Elke hook heeft een aantal voorgedefinieerde

30 5 Drupal 30 parameters en een returnwaarde. Als je Drupal wil uitbreiden, moet je gewoon een hook implementeren. Zo gaat Drupal bij de hook hook_form_alter() controleren of er nog modules zijn die vragen naar hook_form_alter. Met deze hook kan je bijvoorbeeld de labels van een formulier wijzigen, enkele checkboxen toevoegen of een gebruiker doorverwijzen naar een andere pagina. Alle hooks zijn gedocumenteerd op de Drupal API website die je kan raadplegen op api.drupal.org. 5.3 Databaseontwerp Vooraleer ik ben gaan programmeren heb ik een databaseontwerp gemaakt. Het datamodel, te zien in Figuur 5-4, lijkt sterk op het klassendiagram van de objectparser, zie Figuur 4-3. Dit is enigszins logisch omdat de data quasi dezelfde zijn. De data die door de objectparser worden verkregen, worden immers opnieuw ingelezen in Drupal en opgeslagen in de database. Achteraf zou je je kunnen afvragen waarom ik een objectparser heb gebruikt. Het zou toch sneller en onderhoudsvriendelijker zijn om de XML-bestanden meteen in Drupal te verwerken? Onze IT-verantwoordelijke wilde het echter op deze manier. Figuur 5-4 Relationeel datamodel Drupal 5.4 Module Een module wordt steeds in de map sites geplaatst. Elke module in Drupal heeft een unieke naam en bestaat minimum uit twee bestanden, namelijk een.info en.module bestand. Als de module de naam color meekrijgt dan noemt het.info bestand color.info.

31 5 Drupal 31 Het.info bestand bevat algemene informatie over de module, zo heb je de naam en de omschrijving, maar ook in welke versie de module is geschreven. Je ziet ook welke module eerst geactiveerd moet worden vooraleer de andere kan werken, en nog veel meer. Het volgend stukje code bevat een deel van het forum.info bestand, een module uit de core van Drupal. name = Forum description = Provides discussion forums. dependencies[] = taxonomy dependencies[] = comment package = Core core = 7.x files[] = forum.test Voor ik logischerwijze het.module bestand bespreek, sta ik nog even stil bij het.install bestand. Dit bestand is niet verplicht. Bij het activeren van een module zal Drupal zoeken naar dit bestand en eventueel de hooks uitvoeren. In het.install bestand wordt meestal de database vastgelegd met de hook hook_schema(). Het is dus onnodig om zelf een SQLscript te maken omdat deze hook ervoor zorgt. Het volgend stukje code toont de aanmaak van de tabel qti_section met twee kolommen, id en testid. 1 function upload_schema() { 2 $schema['qti_section'] = array( 3 'description' => t('contains the sections within a test.'), 4 'fields' => array( 5 'id' => array( 6 'type' => 'serial', 7 'unsigned' => TRUE, 8 'size' => 'normal', 9 'not null' => TRUE, 10 'description' => t('the primary identifier for a section.'), 11 ), 12 'testid' => array( 13 'type' => 'varchar', 14 'length' => 255, 15 'not null' => TRUE, 16 'description' => t('fk to qti_test.id.'), 17 ), 18 ), 19 'indexes' => array( 20 'testid' => array('testid'), 21 ), 22 'primary key' => array('id'), 23 'foreign keys' => array( 24 'fk_qti_section_to_test' => array( 25 'table' => 'qti_test', 26 'columns' => array('testid' => 'id'), 27 ), 28 ), 29 ); 30 } Merk op dat je naast de primaire sleutel op lijn 22 ook een index op lijn 19 kan vastleggen op een kolom. Indexen versnellen aanzienlijk het zoeken naar records in de database. De index wordt hier gelegd op testid omdat we deze kolom vaak nodig zullen hebben. Verder wordt er ook een refererende sleutel, zie lijnen 23 tot 28 gelegd naar de tabel qti_test. Helaas legt Drupal deze niet zelf vast in de database en is deze regel totaal overbodig. Men raadt echter aan refererende sleutels op te nemen, al is het maar voor documentatie.

32 5 Drupal 32 Het laatste bestand dat ik hier bespreek is het.module bestand. Dit bestand is eigenlijk de kern van de module en beschrijft hoe de module zich moet gedragen. In dit bestand zullen ook voornamelijk hooks voorkomen zoals bijvoorbeeld hook_menu() die de URLaanvragen zal afhandelen, of hook_permission() waarin nieuwe permissies worden opgenomen. Laten we de meest belangrijke hooks, die ook in onze module geïmplementeerd zijn, bespreken hook_permission() Deze hook zorgt voor extra permissies binnen Drupal. Permissies kunnen nadien gecontroleerd worden door gebruik te maken van de functie user_access(). 1 function upload_permission() { 2 return array( 3 'teacher' => array( 4 'title' => t('administer Upload Courses OLAT module'), 5 'description' => t('perform administration tasks for '), 6 'restrict access' => TRUE, 7 ), 8 'student' => array( 9 'title' => t('see Upload Courses OLAT module'), 10 'description' => t('perform student tasks for the Upload '), 11 'restrict access' => TRUE, 12 ), 13 ); 14 } Bovenstaande code zorgt voor een resultaat dat zichtbaar is in Figuur 5-5. Er zijn twee permissies bijgekomen, namelijk Administer Upload Courses OLAT module en See Upload Courses OLAT module. In Drupal kan je nu aan deze permissies taken koppelen. Merk tevens ook de t() functie op bijvoorbeeld lijn 4 op. Deze zorgt ervoor dat de opgegeven strings vertaald kunnen worden in een bepaalde taal. Figuur 5-5 Visuele weergave van permissies in Drupal De permissies mag je niet verwarren met de rollen. Op Figuur 5-5 zie je vijf rollen die hier kort besproken worden. Anonymous user Authenticated user Administrator Teacher Student Elke internetgebruiker. Elke geregistreerde gebruiker. De gebruiker die standaard alle permissies heeft. Elke geregistreerde gebruiker die de extra permissie heeft om cursussen en oefeningen te beheren. Elke geregistreerde gebruiker die de extra permissie heeft om cursussen te lezen en oefeningen te maken.

33 5 Drupal 33 Omdat het een open project is en het voor iedereen toegankelijk moet zijn om zonder registratie oefeningen te maken, hebben we de rol student niet in gebruik genomen. Deze dient enkel als uitbreiding om bij te houden welke student, welke oefening heeft gemaakt hook_menu() Deze hook komt vrijwel in elke module voor. Het neemt de URL-aanvragen voor zijn rekening. Het volgend stukje code toont een extract uit ons modulebestand. 1 function upload_menu() { 2 $items['oefeningen/upload'] = array( 3 'title' => t('upload Course'), 4 'page callback' => 'drupal_get_form', 5 'page arguments' => array('upload_zip'), 6 'access arguments' => array('teacher'), 7 'menu_name' => 'menu-course-administration', 8 'type' => MENU_NORMAL_ITEM, 9 ); return $items; 12 } Deze hook zal altijd een associatieve array terugsturen. De keys van de array bevatten de paden en zijn waarden zijn een associatieve array van eigenschappen voor elk pad. Wanneer een gebruiker naar het pad oefeningen/upload surft, dan zal Drupal de functie drupal_get_form() oproepen die staat gespecifieerd op lijn 4. Deze functie verwacht één parameter, namelijk $form_id. Extra parameters doorsturen kan door de eigenschap page arguments op lijn 5 op te geven. Drupal zal na permissiecontrole zoeken naar de functie upload_zip in het modulebestand. De permissiecontrole gebeurt op lijn 6. Het formulier dat we gaan oproepen, mag enkel toegankelijk zijn voor gebruikers met de permissie teacher. Deze rol wordt manueel vastgelegd in Drupal. Verder geven we ook nog de eigenschappen menu_name en type mee. menu_name is verantwoordelijk voor de plaats waar de menulink zal komen. In dit geval komt de menulink in het blok menu-course-administration terecht. De eigenschap type kan de volgende waarden bevatten: MENU_NORMAL_ITEM Normale menu-items worden in het menu getoond. MENU_CALLBACK Het pad wordt enkel opgeslagen in de database en wordt niet getoond in het menu. MENU_SUGGESTED_ACTION Deze menu-items worden gesuggereerd aan de administrator en worden niet standaard getoond in het menu. MENU_LOCAL_TASK Deze menu-items worden getoond als tabs. Wij hebben voornamelijk gebruik gemaakt van de eerste twee waarden hook_form() Deze hook is verantwoordelijk voor het aanmaken en tonen van een formulier. Dit is meteen ook de meest gebruikte hook in onze module. De volgende code illustreert het gebruik van deze hook. Bekijk ook Figuur 5-6 die het resultaat toont van deze code. Merk op dat dit formulier wordt opgeroepen in de code die je vindt in hook_menu().

34 5 Drupal 34 1 function upload_zip($form_state) { 2 $form['file'] = array( 3 '#type' => 'file', 4 '#description' => t('upload een bestand, enkel zip extensies worden '), 5 ); 6 $form['submit'] = array( 7 '#type' => 'submit', 8 '#value' => t('uploaden'), 9 ); 10 return $form; 11 } Figuur 5-6 Uploadformulier Aanspreking database In 5.4 Module werd de hook hook_schema() besproken. Deze hook is verantwoordelijk voor het aanmaken van de database. Natuurlijk is het ook interessant om te bekijken hoe je de database kan aanspreken in Drupal 7. 1 function getdetailsbypossibilityid($possibilityid) { 2 $query = db_select('qti_possibility', 'p'); 3 $query->fields('p', array('id', 'possibility', 'is_correct', 'answer')); 4 $query->fields('i', array('id', 'type', 'score')); 5 $query->join('qti_item', 'i', 'p.itemid = i.id'); 6 $query->condition('p.id', $possibilityid, '='); 7 $resultset = $query->execute(); 8 9 return $resultset; 10 } Ter vergelijking noteer ik in het volgende kader de normale SQL-query. SELECT p.id, p.possibility, p.is_orrect, p.answer, i.id, i.type, i.score FROM qti_possibility p INNER JOIN qti_item i ON p.itemid = i.id WHERE p.id = $possibilityid Beide queries geven hetzelfde resultaat terug, namelijk een lijst van mogelijkheden die bij een oefening hoort. Als je Drupal 7 gebruikt, wordt de eerste manier aanbevolen. De array die je terugkrijgt op lijn 9, kan worden gelezen met een simpele for-each instructie.

35 6 Drupal in actie 35 6 Drupal in actie Na veel theorie en code in de vorige hoofdstukken, krijg je in dit hoofdstuk vooral het eindresultaat te zien. In Bijlage 4 Handleiding vind je de handleiding die voor deze module werd geschreven. 6.1 Permissies en rollen In hoofdstuk werden de gebruikte permissies en rollen besproken. De permissies zorgen er natuurlijk voor dat de rollen extra rechten krijgen in het systeem of net omgekeerd. De gebruikers worden aan één of meerdere rollen gekoppeld. In de volgende tabel staan de rollen nog eens opgesomd met wat ze mogen doen op de Drupalwebsite. Alles wat met het beheer van de cursussen te maken heeft, wordt hier niet besproken omdat dit niet tot mijn opdracht behoorde. Teacher Student Anonymous Tabel 6-1 Permissies per rolhook_permission() 6.2 Uploadfomulier Uploaden van een cursus of oefening. Cursussen en oefeningen publiceren en verwijderen. Oefeningen transformeren. Feedbackmogelijkheden instellen. Statistieken van de oefeningen bekijken. Oefeningen maken. In een later stadium van het project: statistieken per gebruiker. Oefeningen maken. Alles begint bij het uploaden van een geëxporteerde cursus of oefening uit het OLATsysteem. Bij het uploaden kan een docent op voorhand kiezen of de cursus of oefening onmiddellijk gepubliceerd zal worden. Vaak zullen oefeningen nog gewijzigd moeten worden en daarom is het interessant om dit op voorhand te kunnen kiezen. Om het comfort van de gebruiker te verhogen, maakt dit formulier gebruik van multi file upload. Dit betekent dat de gebruiker meerdere bestanden kan selecteren en uploaden. In Figuur 6-1 zie je het uploadformulier. Figuur 6-1 Uploadformulier met opties

36 6 Drupal in actie Oefeningen overzichtslijst Na het uploaden komen alle oefeningen in een overzichtslijst, ook oefeningen die in een cursus zitten, komen hier terecht. De cursus zelf komt in een andere lijst terecht die in dit eindwerk niet wordt besproken omdat het niet tot mijn opdracht behoorde. De overzichtslijst die je kan zien in Figuur 6-2, maakt gebruik van de jquery datatables plug-in. Deze plug-in transformeert een simpele tabel naar een tabel met zoek- en sorteermogelijkheden, met de mogelijkheid om het aantal rijen te beperken en een handige paging functionaliteit. Figuur 6-2 jquery Datatable plug-in De laatste kolom van de tabel bevat de opties voor een bepaalde rij. Van links naar rechts zie je een icoon om de oefening te bekijken, een icoon om de statistieken te bekijken, een icoon om de URL van de oefening te kopiëren en een icoon dat groen ziet wanneer de oefening gepubliceerd is en rood indien omgekeerd. Om het voor de gebruiker wat aangenamer te maken hebben we nog extra functionaliteiten ingebouwd. Zo is het mogelijk om een reeks van selectievakjes aan of uit te vinken door de shifttoets ingedrukt te houden. Dankzij de handige Ajax library van jquery wordt er een boodschap getoond wanneer men rijen verwijdert of publiceert, totdat alle rijen succesvol zijn verwerkt. Na afloop wordt de pagina vernieuwd omdat Drupal de inhoud zal cachen. Het lijkt me interessant om deze Ajax library kort te bespreken jquery Ajax library Met Ajax kan je gegevens overbrengen van de webpagina naar de server zonder de pagina te herladen, wat het gebruikerscomfort aanzienlijk verhoogt. Als je ooit al met Ajax hebt gewerkt, weet je dat javascript uit veel extra lijnen code kan bestaan. De jquery Ajax library heeft vele functies maar de start, stop, success en error zijn wellicht de belangrijkste. Alles wordt natuurlijk duidelijker met een eenvoudig voorbeeld. 1 function process_ajax() { 2 $.ajax({ 3 beforesend: function() { 4 if (!confirm('ben je zeker dat je deze records wilt verwijderen?')) { 5 return false; 6 } 7 },

37 6 Drupal in actie 37 8 success: function() { 9 var checkboxarray = Array(); 10 var i = 0; 11 $('input[type=checkbox]:checked').each(function () { 12 checkboxarray[i] = $(this).val(); 13 i++; 14 }); 15 if (checkboxarray.length > 0) { 16 $('#ajaxdiv').load('?q=ajax', { 'var': [checkboxarray] }); 17 } 18 }, 19 error: function() { 20 alert('er liep iets fout, probeer later opnieuw.'); 21 } 22 }); 23 $.ajaxstop(function() { 24 window.location.reload(true); 25 }); 26 } Op lijn 4 controleer ik of de gebruiker toestemt om records te verwijderen. Als de gebruiker toestemt dan haal ik elke geselecteerde checkbox op door de selector :checked mee te geven op lijn 11. Omdat een gebruiker meerdere checkboxen kan aanvinken, zit je in een for-each instructie. Op lijn 12 wordt de waarde van elke aangevinkte checkbox in een array gestopt en vervolgens op lijn 16 doorgestuurd naar de gewenste ajax-pagina. Merk op dat je hier extra parameters kan doorgeven. Mocht er iets fout lopen dan vang ik dit op in lijn 19 en wanneer alle Ajax requests zijn afgehandeld, wordt de pagina vernieuwd zoals je kan zien op lijn 24. Als je de gebruiker wil notifiëren dat de Ajax request is begonnen dan toon je een melding op lijn 16 en verwijder je deze weer in de ajaxstop-functie op lijn 23. Nogmaals wil ik benadrukken dat Ajax als doel heeft om op een zeer dynamische manier informatie op te halen zonder dat de pagina wordt vernieuwd. Helaas kan Drupal hier niet zo goed mee overweg en gaat alles verloren omdat we op lijn 24 de pagina vernieuwen. 6.4 Oefeningen Het tonen van de oefeningen is wellicht het belangrijkste onderdeel van de module. Figuur 6-3 toont de details van de oefening. De informatie komt natuurlijk uit OLAT en kan hier niet meer worden aangepast. Docenten kunnen hier wel beslissen of de oefening zichtbaar is voor de studenten en of studenten hun antwoorden kunnen controleren tijdens het maken van een oefening, erna of helemaal niet. Studenten zien deze details zonder de drie laatste rijen. Figuur 6-3 Details van de oefening

38 6 Drupal in actie 38 Standaard worden er drie vragentypes uit OLAT ondersteund. Deze zijn de single choice questions, de multiple choice questions en de fill in blanks. Deze zullen in de volgende hoofdstukken worden besproken Single Choice Questions Single choice questions zijn vragen waar slechts één antwoord het juiste is. Figuur 6-4 toont hoe docenten deze vraag zien. Studenten zien deze vraag zonder de combobox. Merk op dat er twee soorten van feedbackmogelijkheden zijn, namelijk de knop Toon antwoord en Controleer antwoord. De eerste knop toont onmiddellijk het correcte antwoord terwijl de tweede het geselecteerde antwoord gaat controleren aan de hand van Ajax. Figuur 6-4 Single choice question in Drupal Dit vragentype kan worden getransformeerd naar een selectieoefening en een videooefening. Bij de selectieoefening is het de bedoeling om een deel van een zin te selecteren met de muis. Een voorbeeldvraag hiervan kan zijn: Selecteer de klemtoon in het woord groeten. Bij de video-oefening moet men de video pauzeren wanneer men bijvoorbeeld het woord groeten hoort in het bijgevoegd audiofragment. Omdat mijn collega dit heeft ontwikkeld, besteed ik hier verder geen aandacht aan Multiple Choice Questions Multiple choice questions zijn vragen waar meerdere antwoorden correct kunnen zijn. In Figuur 6-5 zie je het resultaat van de oefening die door een student is ingediend. De groene antwoorden zijn de juiste en de rode zijn fout. Verder zie je ook het resultaat na het klikken op de knop Toon antwoord.

39 6 Drupal in actie 39 Figuur 6-5 Multiple choice question foutief ingevuld door student Fill in the Blanks Fill in the blanks zijn simpelweg invuloefeningen. Deze invuloefeningen kunnen wel getransformeerd worden naar drag-and-drop oefeningen zoals te zien is in Figuur 6-6. Dit is meteen ook de belangrijkste functionaliteit. Koste wat het kost moest deze functionaliteit in het eindresultaat zitten. Speciaal aan deze oefening is dat de tekstvakken wijzigen naargelang de grootte van de drag-elementen en ze gaan terug naar hun oorspronkelijke vorm wanneer ze terugkeren. Het heeft mij veel tijd gekost om dit te maken omdat niet alles gedocumenteerd is op de API van jquery. Maar dankzij deze oefening heb ik wel leren werken met de jquery API. Op onderstaande figuur zie je ook nog een videofragment dat in OLAT wordt ingevoegd en hier wordt getoond. Figuur 6-6 Fill in blanks oefening getransformeerd naar Drag&Drop

40 6 Drupal in actie Statistieken Het tonen van statistieken was een overbodige functionaliteit en moest enkel gemaakt worden indien er voldoende tijd was. Uiteindelijk heeft het weinig moeite gekost om de statistieken te verzamelen. In Figuur 6-7 zie je het statistiekenoverzicht waar docenten te weten kunnen komen welke oefeningen populair zijn, hoeveel tijd studenten gemiddeld spenderen aan een oefening, de gemiddelde score en wanneer de oefening voor het laatst werd gemaakt. Figuur 6-7 Statistiekenoverzicht 6.6 Moeilijkheden Elk project kent zijn moeilijkheden en ik ben er ook enkele tegengekomen. In dit deel bespreek ik enkele moeilijkheden waarop ik een beetje trots ben een oplossing voor gevonden te hebben Omgaan met video en audio De eerste moeilijkheid betreft het omgaan met video- en audio-elementen. De informatie zit natuurlijk opgeslagen in het XML-bestand dat uit OLAT geëxporteerd wordt. Hier zie je een extract uit het XML-bestand waarin een audiofragment zit verstopt. <presentation> <material> <mattext texttype="text/html"> <![CDATA[<p>Stop het fragment op de correcte tijd</p><p><span id="olatflashmovieviewer()" style="display: block;"><script src="/olat/raw/player.js"></script><script>bplayer.insertplayer ("media/01_audiofragment.mp3","olatflashmovie"</script></span></p>]]> </mattext> </material> </presentation> Het grote probleem hier is dat ik met het script niets kan aanvangen en dat het op deze manier niet in de database gestockeerd kan worden. Verder moet ik ook rekening houden met eventuele tekst die voor of na het script kan komen en moet ik het pad naar het bestand behouden. Ik heb dit opgelost door op al de plaatsen waar video- of audio-elementen kunnen voorkomen, te zoeken naar BPlayer.insertPlayer omdat dit het meeste kans geeft dat je

41 6 Drupal in actie 41 met zo een element te maken hebt. Vervolgens kan je eenvoudig het video- of audiofragment lokaliseren. Mocht er tekst voor het eerste <span> element staan, wordt dit ook meegenomen. Tenslotte vervang ik het script door een andere videospeler, namelijk flowplayer. Deze videospeler ondersteunt de volgende videoformaten: flv, mp4, mov, m4v en f4v. Flowplayer ondersteunt ook het afspelen van mp3-audiobestanden. De oplossing voor dit probleem is natuurlijk niet perfect omdat je allereerst niet elke soort media kan ondersteunen en omdat de informatie tussen de scripts variabel is Uploaden meerdere bestanden Een tweede moeilijkheid was de ondersteuning voor het uploaden van meerdere bestanden. Het uploaden van één bestand is zeer eenvoudig in Drupal, in tegenstelling tot het uploaden van meerdere bestanden tegelijk daar er op het moment van implementatie geen goede module voor bestond. $form['file'] = array( '#type' => 'file', '#description' => t('upload een bestand, enkel zip extensies worden '), ); Dankzij HTML5 heb ik dit kunnen verwezenlijken door het toevoegen van twee extra attributen, namelijk multiple en enctype zoals je kan zien in onderstaand voorbeeld. <form method="post" action="" enctype="multipart/form-data"> <input type="file" name="multifileupload" multiple="multiple" /> PHP geeft in plaats van één bestand, een array van bestanden terug. De bestanden moet worden opgeslagen op de server en Drupal zal hiervan een referentie leggen in de database. De Drupalfunctie file_save_upload is hiervoor verantwoordelijk. Deze functie verwacht minimum één parameter, namelijk de naam van het bestand. Maar omdat PHP nu een array van bestanden teruggeeft in plaats van één bestand heb ik de positie moeten meegeven die naar de naam van het bestand verwijst. Een geniale oplossing zou ik niet zeggen. Ik betreur eerder het feit dat Drupal het uploaden van meerdere bestanden standaard niet ondersteunt, wat je eigenlijk wel verwacht van een softwarepakket dat beweert het beste CMS te zijn Ondersteunen drag-and-drop Nog een moeilijkheid was het ondersteunen van drag-and-drop. De basisfunctionaliteit is zeer eenvoudig. Je hebt de sleepbare elementen of de zogenoemde draggables die je kan vasthechten aan de droppables. De droppables zijn in deze opdracht tekstvakken. In praktijk ziet deze basisfunctionaliteit eruit zoals in Figuur 6-8. Figuur 6-8 Basisfunctionaliteit drag-and-drop

42 6 Drupal in actie 42 Ik wil echter dat de tekstvakken zich aanpassen aan de hoogte en breedte van de draggables en dat ze terug hun oorspronkelijke formaat innemen als de draggable terugkeert zoals je kan zien in Figuur 6-9. Figuur 6-9 Uitgebreide functionaliteit drag-and-drop Het probleem dat zich hier stelt is dat het niet mogelijk is te weten te komen uit welk tekstvak de draggable komt, wanneer hij terugkeert naar zijn oorspronkelijke positie. Dankzij een callback te programmeren wanneer de draggable terugkeert is dit wel mogelijk. Uiteraard was dit niet mogelijk zonder hulp van een blogpost (Lynch, 2009). De callbackfunctie is samen met een afgeslankte versie van de uitgebreide drag-and-drop in onderstaande code gedocumenteerd. 1 $("div.draggable").draggable({ 2 //callback function 3 revert: function(droppableobj) { 4 if (droppableobj === false) { 5 //revert to original position 6 $(this).data("draggable").originalposition = { 7 top: 0, 8 left: 0 9 }; 10 var textbox = $(this).data("droppable"); 11 $(textbox).width(74); 12 positiondraggables(); 13 return true; 14 } else { 15 positiondraggables(); 16 return false; 17 } 18 } 19 }); $("input.droppable").droppable({ 22 drop: function(event, ui) { 23 //store the droppable in the draggable 24 ui.draggable.data("droppable", this); 25 $(this).width(ui.draggable.width()); 26 } 27 }); Normaal bevat de revert optie op lijn 3 een boolean-waarde maar dit wordt hier vervangen door een callbackfunctie die één parameter meekrijgt die false is als de draggable niet in een droppable zit en true wanneer dit wel het geval is. Als de parameter false is dan moet de draggable terug naar zijn oorspronkelijke positie terugkeren. Dit gebeurt op lijnen 6 tot 9. Op lijn 10 krijg ik het tekstvak terug waaraan de draggable zat vastgekoppeld. Dit kan alleen maar door op lijn 24 deze data op te slaan wanneer de draggable wordt vastgekoppeld aan een droppable. Omdat de breedte van de tekstvakken wordt aangepast op lijn 11 moet elke draggable terug worden gepositioneerd naar de positie van de droppables. Dit gebeurt door de functie positiondraggables() op te roepen op lijn 12 en 15.

43 Besluit 43 Besluit Het project Dutch++ voor het opzetten van een online leerplatform voor studenten die meer over het Nederlands te weten willen komen is mede door onze inbreng goed gestart. Wij zijn aan onze opdracht begonnen met het opzetten van onze ontwikkelomgeving en we zijn al vlug overgegaan naar de ontwikkeling van een parser om informatie afkomstig uit het OLAT-systeem om te zetten in een object dat we vervolgens in de Drupaldatabase konden bewaren. Daarna zijn we begonnen aan de ontwikkeling van een module in Drupal. Deze module ondersteunt het uploaden van een cursus of oefening afkomstig uit OLAT, het beheer van deze cursussen en oefeningen, het weergeven van de verschillende oefeningen en de mogelijkheid om bepaalde vragen te transformeren naar andere vragen met meer functionaliteiten. Zo kunnen bepaalde oefeningen getransformeerd worden naar oefeningen met drag-and-drop functionaliteit, oefeningen waar je woorden moet selecteren of oefeningen waar je het video- of audiofragment moet stoppen op de juiste tijd. De bedoeling van een stage is om als student extra ervaring op te doen en te leren uit de fouten die je maakt. Die ervaring heb ik zeker opgedaan dankzij de stage in het buitenland. Zo heb ik meer inzicht gekregen in PHP door gebruik te maken van onbekende zaken zoals zip-bestanden uitpakken of XML-bestanden lezen en natuurlijk heb ik ook kennisgemaakt met Drupal. Daarnaast is nog eens gebleken dat een goede planning en analyse onontbeerlijk zijn voor het volbrengen van een opdracht. Alleen zo weet je perfect wat je moet doen en in welke volgorde je dit best kan doen. Maar het waren vooral mijn soft skills die deze drie maanden extra werden gestimuleerd. Een buitenlandse stage zorgt sowieso dat je communicatievaardigheden beter worden omdat je in een andere cultuur zit waarin je je beter moet uitdrukken om het gewenste doel te bereiken. In een team werken was tijdens deze opdracht ook zeer belangrijk. Ik heb deze opdracht samen met Dieter Verbeemen succesvol kunnen volbrengen door goed te communiceren en elkaar te helpen wanneer nodig. Het hele project duurt nog drie jaar en hopelijk kunnen de partnerinstituten verder bouwen op ons werk om alles tot een goed einde te brengen.

44 Literatuurlijst 44 Literatuurlijst About IMS Global Learning Consortium. (sd). Opgeroepen op Mei 17, 2012, van IMS Global: About the University of Vienna. (sd). Opgeroepen op Maart 15, 2012, van Universität Wien: Classes and Objects - The Basics. (2012, April 06). Opgeroepen op April 07, 2012, van PHP: De Coster, C. (sd). Kunst à la carte. Opgeroepen op Maart 14, 2012, van Splinternet: carte.htm EAC EA. (sd). Opgeroepen op Maart 14, 2012, van EAC EA: Hooks. (sd). Opgeroepen op April 21, 2012, van Drupal API: IMS Question & Test Interoperability. (2002, Februari 11). Opgeroepen op April 01, 2012, van IMS: Lynch, R. (2009, December 15). jquery UI Draggable Revert Callback. Opgeroepen op Mei 26, 2012, van Agilepro: QTI. (2012, Maart 21). Opgeroepen op Maart 31, 2012, van Wikipedia: Universities Implementing Full Costing. (sd). Opgehaald van eua: War. (2012, Maart 15). Opgeroepen op Mei 26, 2012, van Wikipedia:

45 Lijst van de bijlagen 45 Lijst van de bijlagen Bijlage 1 Organigram universiteit Wenen Bijlage 2 Fasering Bijlage 3 QTI Klassendiagram Bijlage 4 Handleiding

46 Bijlage 1 Organigram universiteit Wenen 1 Bijlage 1 Organigram universiteit Wenen

47 Bijlage 2 Fasering 1 Bijlage 2 Fasering

48 Bijlage 3 QTI Klassendiagram 1 Bijlage 3 QTI Klassendiagram

49 Bijlage 4 Handleiding 1 Bijlage 4 Handleiding Handleiding Dutch++ Module Overzicht Inleiding In dit document maak je kennis hoe je met de functionaliteiten van de Dutch++ module moet werken. Indeling Dit document is als volgt ingedeeld: Deel Onderwerp Zie pagina A Iconen en datatabel 2 B Uploaden OLAT materiaal 3 C Oefeningen beheren 4 D Cursussen beheren 9

50 Bijlage 4 Handleiding 2 Deel A Iconen en datatabel Het principe Om alles wat makkelijker te maken kom je vaak iconen tegen in de tabellen. Deze iconen worden hier besproken samen met de datatabel waarin je deze iconen tegenkomt. Iconen Hier volgen alle iconen met hun beschrijving. Icoon Beschrijving Toon de oefening of cursus. De oefening of cursus is gepubliceerd. De oefening of cursus is niet gepubliceerd. Onderliggende delen van een cursus zijn niet gepubliceerd. Er zijn statistieken voor de oefening beschikbaar. Er zijn geen statistieken voor de oefening beschikbaar. Kopieer de URL van de oefening of cursus. Datatabel Hier volgen alle mogelijke acties van de datatabel: sorteren door op de kolomkop te klikken; sorteren op (niet) gepubliceerde oefeningen of cursussen door op de laatste kolomkop te klikken; meerdere selectievakjes selecteren met shift-toets; het bekijken van maximaal 100 items; zoeken in de tabel; (niet) publiceren van oefeningen of cursussen; verwijderen van oefeningen of cursussen. Opgelet: als je een cursus verwijdert, krijg je de melding of de bijhorende oefeningen ook verwijderd mogen worden.

51 Bijlage 4 Handleiding 3 Deel B Uploaden OLAT materiaal Inleiding Alvorens je kan starten moet je de cursussen of oefeningen exporteren uit OLAT en ze uploaden in de website van Dutch++. Hoe kom ik er? Onderneem de volgende stappen om het uploadformulier te bekijken: 1. Klik in het administratiepaneel op Uploaden. Het uploadformulier verschijnt op het scherm. Voorbeeld Volgende afbeelding kan een mogelijk resultaat zijn: Bespreking In dit voorbeeld worden vier zip-bestanden geüpload. Je kan meerdere bestanden selecteren door te werken met de Shift- of Strg-toets. Enkel OLAT cursussen en oefeningen die uit het systeem worden geëxporteerd, kunnen hier worden geüpload. Merk op dat verschillende webbrowsers het formulier verschillend kunnen tonen. In dit voorbeeld wordt gewerkt met Google Chrome. Opgelet: het uploaden van meerdere bestanden tegelijk werkt enkel in Firefox 4 of hoger, Google Chrome, Opera 10 of hoger en Safari 4 of hoger, dus geen Internet Explorer!

52 Bijlage 4 Handleiding 4 Deel C Oefeningen beheren Overzicht Inleiding Onder het beheer van oefeningen vallen de volgende functionaliteiten: overzicht van alle oefeningen bekijken; opties instellen voor een oefening; oefeningen transformeren; oefeningen (niet) publiceren; oefeningen verwijderen. In dit deel Dit deel behandelt de belangrijkste functionaliteiten van het beheer van de oefeningen. Deel Functionaliteit Zie pagina C1 Overzicht oefeningen bekijken 5 C2 Opties instellen voor een oefening 6 C3 Oefeningen transformeren 7

53 Bijlage 4 Handleiding 5 Deel C1 Overzicht oefeningen bekijken Inleiding Vanaf het moment dat er een cursus met oefeningen of aparte oefeningen worden geüpload, komen deze in het overzicht van de oefeningen terecht. Hoe kom ik er? Onderneem de volgende stappen om het overzicht te bekijken: 1. Klik boven in de menubalk op Oefeningen. of 1. Klik in het administratiepaneel op Oefeningen. Het overzicht verschijnt op het scherm. Voorbeeld Volgende afbeelding kan een mogelijk resultaat zijn: Bespreking In het voorbeeld wordt duidelijk dat de tabel momenteel oplopend gesorteerd is op de kolom Titel. Je ziet ook dat de eerste oefening gepubliceerd is en de tweede oefening niet. Dit betekent dat de oefening met de naam CLC NL Toets 10 niet zichtbaar is voor studenten. Extra functies Hier volgen nog enkele extra functionaliteiten die mogelijk zijn: met de show x entries kan je meer of minder rijen zien; het zoekveld fungeert als een filter; sorteren op de kolom Opties is sorteren op (niet) gepubliceerde oefeningen; meerdere selectievakjes aanvinken door shift-toets ingedrukt te houden en vervolgens de actie (un)publish of delete aan te klikken.

54 Bijlage 4 Handleiding 6 Deel C2 Opties instellen voor een oefening Inleiding Je kan voor elke oefening opties instellen die invloed zullen hebben op de presentatie bij de studenten. Hoe kom ik er? Onderneem de volgende stappen om de opties te bekijken: 1. Klik uit het overzicht van oefeningen op het vergrootglas-icoon of op de titel. De oefening verschijnt op het scherm. Voorbeeld Volgende afbeelding kan een mogelijk resultaat zijn: Bespreking In dit voorbeeld is de informatie van de eerste vier rijen afkomstig uit OLAT. De laatste drie rijen zijn extra opties die beïnvloeden hoe de student de oefening gaat zien. De status kan gepubliceerd of niet gepubliceerd zijn, wat betekent dat de student de oefening wel of niet kan zien. Antwoorden & Feedback kan tijdens de oefening zijn, wat betekent dat de student zichzelf kan evalueren met de knoppen Toon antwoord en Controleer antwoord of na verwerking, wat betekent dat de student na afloop zijn antwoorden en de juiste antwoorden ziet. Standaard ziet de student de knoppen Toon antwoord en Controleer antwoord. Deze zullen respectievelijk het juiste antwoord tonen en de gebruikersinput controleren op correctheid. Als tijdens de oefening uitgevinkt is, zal de student de knoppen niet zien ook al staan deze nog wel aangevinkt in de opties. Vergeet niet Vergeet niet na wijzigingen in de opties, op de knop Test opslaan te klikken! Merk op dat je steeds een preview zal zien van hoe de student het ziet.

55 Bijlage 4 Handleiding 7 Deel C3 Oefeningen transformeren Inleiding Je kan sommige oefeningen transformeren naar een nieuw soort oefening. Enkel de single choice questions en invuloefeningen zijn transformeerbaar. Het instellen gebeurt in de preview van de test. Hoe kom ik er? Onderneem de volgende stappen om de opties te bekijken: 1. Klik uit het overzicht van oefeningen op het vergrootglas-icoon of op de titel. 2. Open een sectie door op de grijze balk te klikken. De oefening verschijnt op het scherm. Voorbeeld Volgende afbeelding kan een mogelijk resultaat zijn: Bespreking In dit voorbeeld zie je een single choice question. Dit soort oefeningen kan je transformeren door in de combobox het type marker of video te selecteren. Welke oefeningen kan ik transformeren? Enkel de single choice en fill in blanks (invuloefeningen) zijn transformeerbaar. Hier volgt meer informatie over het gebruik: Zijn transformeerbaar Kan gebruikt worden om SCQ Marker klemtonen, woorden, zinnen te selecteren. Houd de Strg-toets ingedrukt voor meerdere selecties. SCQ Video een video- of audiofragment te laten stoppen op een bepaald woord dat de tijd voorstelt. FIB Drag-Drop keuzemogelijkheden te slepen naar de tekstvakken. Vervolg op de volgende pagina

56 Bijlage 4 Handleiding 8 Deel C3 Oefeningen transformeren (vervolg) Voorbeeld Marker Volgende afbeelding toont een voorbeeld van een marker-oefening: Door de Strg-toets ingedrukt te houden, kan je meerdere letters selecteren. OLAT? Single Choice Question met één mogelijkheid waar je de juiste antwoorden gaat onderlijnen. Voorbeeld Video Volgende afbeelding toont een voorbeeld van een video-oefening: OLAT? Single Choice Question met één mogelijkheid waar dit de intervallen zijn waartussen je het te zoeken woord hoort. Bijvoorbeeld: 00:45-00: :10-01:15 (twee intervallen van steeds 5 seconden Enkel.mp3 (audio) en.flv,.mov,.mp4,.f4v en.m4v (video) bestanden!! Voorbeeld Drag-Drop Volgende afbeelding toont een voorbeeld van een video-oefening: OLAT? Niets speciaals te ondernemen.

57 Bijlage 4 Handleiding 9 Deel D Cursussen beheren Overzicht Inleiding Onder het beheer van cursussen vallen de volgende functionaliteiten: overzicht van alle cursussen bekijken; cursussen beheren; cursussen bekijken; cursussen (niet) publiceren; cursussen verwijderen. In dit deel Dit deel behandelt de belangrijkste functionaliteiten van het beheer van de cursussen. Deel Functionaliteit Zie pagina D1 Overzicht cursussen bekijken 10 D2 Cursus beheren 11 D3 Cursus bekijken 12

58 Bijlage 4 Handleiding 10 Deel D1 Overzicht cursussen bekijken Inleiding Vanaf dat er een cursus wordt geüpload, komt deze in het overzicht van de cursussen terecht. Hoe kom ik er? Onderneem de volgende stappen om het overzicht te bekijken: 1. Klik boven in de menubalk op Cursussen. of 2. Klik in het administratiepaneel op Cursussen. Het overzicht verschijnt op het scherm. Voorbeeld Volgende afbeelding kan een mogelijk resultaat zijn: Bespreking Je ziet duidelijk het onderscheid tussen een gepubliceerde cursus aan de hand van de kleur van de publiceerknop: groen: alles zichtbaar voor de student; rood: niet zichtbaar voor de student; blauw: onderliggende hoofdstukken niet zichtbaar voor de student. Extra functies Hier volgen nog enkele extra functionaliteiten die mogelijk zijn: met de show x entries kan je meer of minder rijen zien; het zoekveld fungeert als een filter; sorteren op de kolom Opties is sorteren op (niet) gepubliceerde oefeningen; meerdere selectievakjes aanvinken door shift-toets ingedrukt te houden en vervolgens de actie (un)publish of delete aan te klikken; het publiceersymbool werkt als een knop; het kopieersymbool kopieert de link van de cursus; het vergrootglasicoon toont het beheren van de cursus.

59 Bijlage 4 Handleiding 11 Deel D2 Cursus beheren Inleiding Vanaf dat je klikt op het vergrootglas, kom je bij het beheer van de cursus terecht. Hoe kom ik er? Onderneem de volgende stappen om het cursusbeheer te bekijken: 1. Klik op het vergrootglas van een cursus in het overzicht Cursussen. De beheerpagina verschijnt op het scherm. Voorbeeld Volgende afbeelding kan een mogelijk resultaat zijn: Bespreking In het voorbeeld wordt duidelijk welke hoofdstukken gepubliceerd zijn en welke niet. Extra functies Hier volgen nog enkele extra functionaliteiten die mogelijk zijn: het publiceersymbool werkt als een knop; elke map kan je uitklappen door op het pijltje te klikken.

60 Bijlage 4 Handleiding 12 Deel D3 Cursus bekijken Inleiding Vanaf dat er op een titel geklikt wordt van een cursus bij overzicht cursussen, wordt deze cursus getoond. Hoe kom ik er? Onderneem de volgende stappen om de cursus te bekijken: 1. Klik op de titel van een cursus in overzicht Cursussen. De cursus verschijnt op het scherm. Voorbeeld Volgende afbeelding kan een mogelijk resultaat zijn: Bespreking In het voorbeeld wordt duidelijk dat er een navigatiemenu aanwezig is om door de cursus te bladeren en dat de geselecteerde pagina altijd getoond wordt. Extra functies Hier volgen nog enkele extra functionaliteiten die mogelijk zijn: het kopieersymbool naast de titel kopieert de actieve pagina; via de pijltjestoetsen kan je het navigatiemenu bedienen.