Hot Potatoes. een handleiding voor gevorderden. door Chris Goevaerts

Hot Potatoes

2

een handleiding voor gevorderden

door Chris Goevaerts voor Lerareninfo vzw

www.lerarentools.be

Inhoudsopgave Inhoudsopgave........................................................................ 2 Inleiding……………………………………………………………………..… 3 Deel 1: Werken met multimedia............................................... 4 1.1 Invoegen van multimediabestanden........................................................... 4 1.2 Werken met mp3-geluidsbestanden........................................................... 4 2.2.1 Een mp3-bestand invoegen.………………………………………………………… 4 2.2.2 Ingesproken tekst opnemen als mp3….…….……………………………………. 6 2.2.3 Geluidsbestanden exporteren als mp3…………………………………………… 9

1.3 Werken met YouTube-filmpjes...………..................................................... 10

2.3.1 Een YouTube-filmpje downloaden..……………………………………………… 11 2.3.2 Een YouTube-filmpje invoegen…………………………………………………… 13

Deel 2: Nog meer Potatoes..................................................... 15 2.1 JMemory – een memoryspel..................................................................... 15 2.1.1 2.1.2 2.1.3 2.1.4

De add-on downloaden en toevoegen…..…………………..…………………… 15 De oefening aanmaken………...……..………………………….………………… 15 Het configuratiebestand aanpassen..…….………………..…………………… 16 Het resultaat bekijken………….………………………………..………………… 17

2.2 JCloze-dropdown..................................................................................... 20 2.2.1 2.2.2 2.2.3 2.2.4

De add-on downloaden en toevoegen..……………………..…………………… 20 De oefening aanmaken………..………………………………….………………… 20 Het configuratiebestand aanpassen………………………..…………………… 21 Het resultaat bekijken…………………….……………………..………………… 22

Deel 3: Hot Potatoes hacken.................................................. 24 3.1 De hacks voorbereiden…………………………............................................. 24 3.2 Een scrollende leestekst...…………………………………………………………… 25

Deel 4: Tips en tricks……....................................................... 28 4.1 JQuiz – de toetsencombinatie Ctrl + Shift + Z........................................... 28 4.2 Oefeningen beveiligen…………………........................................................ 32

Slotbeschouwing…………………………………………………………… 33

Chris Goevaerts voor Lerareninfo vzw

2/33

Hot Potatoes voor gevorderden Versie 2.1 (06/11/11)

Inleiding In de handleiding voor beginners probeerden we de basisvaardigheden voor het aanmaken van Hot Potatoeseoefeningen uit de doeken te doen. Voor de beginnende gebruiker was dat mogelijk al een hele opdracht, maar net zoals met zovele dingen baart oefening ook in dit geval meestal kunst. Eens de basiskneepjes onder de knie immers, wil je wellicht al vlug meer (en beter). Daarom dat we besloten hebben om een tweede handleiding te schrijven, dit keer voor de meer ‘gevorderde’ Hot Potatoesgebruiker. In dit deel zullen we vooral oog hebben voor een aantal mogelijkheden die niet standaard in het programma zijn opgenomen, maar wel een meerwaarde voor de oefeningen kunnen betekenen. In een aantal gevallen betekent dit dat er bijkomende tools (en nu en dan zelfs heuse programma’s) moeten gedownload en geïnstalleerd worden, maar het resultaat van deze inspanningen zal er dan ook niet om liegen. Zo zullen we ons o.a. bezighouden met het uitbreiden en/of verfijnen van de bestaande vraagtypes, zullen we aandacht besteden aan hoe we een aantal functionaliteiten nog gebruiksvriendelijker kunnen maken, en tot slot zullen we nog een aantal ‘Tips & Tricks’ meegeven om de afwerking van het geheel nog net dat beetje professioneler te doen ogen.

Mocht je vragen en/of opmerkingen hebben over de inhoud van deze handleiding of suggesties hebben voor nog meer uitbreidingen, neem gerust contact met ons op: [email protected] [email protected]


3/33


Deel 1: Werken met multimedia 1.1 Invoegen van multimediabestanden In principe zijn er twee manieren om geluid (en video) aan je oefeningen toe te voegen: 1. Invoegen van een koppeling naar een lokaal bestand 2. Invoegen van een mediaobject Aangezien geluid (en video) toevoegen in feite niet meer of niet minder is dan een gewoon een koppeling maken naar een bestand, is eerstgenoemde manier dan ook veruit de eenvoudigste. Maar … het afspelen van deze in Hot Potatoes ingevoegde multimediabestanden zal spijtig genoeg meer dan eens voor problemen zorgen. Zo zou het zeker niet de eerste keer zijn dat ze thuis op je eigen pc een perfect resultaat opleveren, maar later op school of elders het om één of andere duistere reden volledig laten afweten. Hiervoor zijn meerdere redenen aan te halen, maar het valt buiten de bedoeling van deze handleiding om hier verder op in te gaan.

1.2 Werken met mp3-geluidsbestanden Onder meer om bovenvermelde problemen te vermijden valt het aan te raden om voor het invoegen van je geluidsbestanden zoveel mogelijk te opteren voor mp3-bestanden. Het mp3-formaat is niet alleen zeer economisch maar ook kwalitatief uitstekend. Wanneer je daarnaast, om je geluidsbestanden af te spelen, opteert voor een zeer eenvoudige mp3-flashplayer, dan zijn meteen alle mogelijke problemen definitief van de baan.

1.2.1 Een mp3-bestand invoegen Aangezien de mp3-flashplayer die niet standaard aanwezig is, moeten we deze (en de bijhorende code) eerst even downloaden. STAP 1: DE NODIGE (HULP)BESTANDEN DOWNLOADEN 4. Klik op deze link: hotpot_mp3.zip of kopieer onderstaand adres en plak dit in het URL-veld van je browser: http://www.lerarentools.be/V1/hotpot_mp3.zip 5. Kies voor ‘Opslaan’ en sla het bestand op. 6. Klik rechts op het zip-bestand en kies voor ‘Alles uitpakken’. In de gecomprimeerde map bevinden zich 2 bestanden: hbs_mp3_player.swf en mp3player.txt


4/33


7. Sla de uitgepakte bestanden op in de map waarin zich de bestanden bevinden van de oefening waarin je geluid (mp3) wil invoegen. 8. Je beschikt nu over: - een mp3 flash-player die uitermate geschikt is om in je Hot Potatoesoefeningen aan te brengen. Hij bevat 3 knopjes: start – stop – pauze: - een tekstdocument waarin je de nodige code kan terugvinden om mp3bestanden in je oefeningen in te voegen. ! Opmerking ! Voor elke oefening waarin je mp3-geluid wil invoegen dien je de mp3-speler (hbs_mp3_player.swf) op te slaan in dezelfde map als waar de andere bestanden van de betreffende oefening opgeslagen zijn. STAP 2: HET MP3-GELUIDSBESTAND INVOEGEN 1. Maak nu je oefening. 2. Kopieer de code (mp3player.txt) en plak die op de plaats waar je het mp3geluidsbestand wil invoegen. Deze code ziet er als volgt uit:

3. Nadat je de code op de juiste plaats geplakt hebt moet je alleen nog specifiëren welk geluidsbestand dient afgespeeld te worden. Vervang daarom op 3 plaatsen in de code bestandsnaam.mp3 door de echte naam van je geluidsbestand. 4. Herhaal deze procedure voor elk mp3-bestand dat je wil invoegen. Opmerking Denk eraan om naast het uitvoerbestand (-.htm) ook de mp3-flashplayer en alle mp3-bestanden te uploaden wanneer je je oefening online zet.


5/33


1.2.2 Ingesproken tekst opnemen als mp3 In de meeste gevallen beschik je wellicht over kant en klare mp3-bestanden en kan je deze nu probleemloos via bovenstaande werkwijze in je oefeningen invoegen. Mogelijk wil je echter ook zelf ingesproken tekst in je Hot Potatoes oefeningen gebruiken. De snelste manier om dit in Windows te doen is (uiteraard met behulp van een microfoontje of headset) via de Geluidsrecorder (START – ALLE PROGRAMMA’S – BUREAU-ACCESOIRES – ENTERTAINMENT). Het nadeel van deze manier van werken is echter dat je opname weggeschreven wordt als ‘.wav’-bestand, waardoor je ook hier met de in de inleiding van dit hoofdstuk beschreven moeilijkheden zou kunnen geconfronteerd worden. Daarom beschrijven we hieronder een alternatieve methode om ingesproken tekst als mp3-bestand op te nemen (en daarna in te voegen als beschreven in § 1.2.1). STAP 1: DOWNLOAD EN INSTALLEER AUDACITY EN DE LAME ENCODER Audacity is een Open Source geluidsbewerkingsprogramma. Met zijn nogal uitgebreide menu’s ziet het er in eerste instantie nogal overweldigend en ingewikkeld uit en je kan er inderdaad ook veel meer mee dan alleen maar wat gesproken tekst opnemen. Uiteraard allemaal meer dan de moeite waard, maar buiten het opzet van deze handleiding. Wij beperken ons louter tot het rechtstreeks opnemen van gesproken tekst. 1. Volg deze link om Audacity te downloaden en klik op de installer van de meest recente versie.

2. Kies voor ‘Uitvoeren’. 3. Volg de richtlijnen van de installatiewizard (aanpassingen zijn niet nodig) om het programma op je pc te installeren. 4. Het programma wordt standaard geïnstalleerd op volgende locatie: C:\Program Files\Audacity. Wijzig dit om praktische redenen (zie verder) niet. 5. Volg nu deze link en klik op Lame_v3.98.3_for_Audacity_on_Windows.exe 6. Kies voor ‘Uitvoeren’ en volg de richtlijnen. Chris Goevaerts voor Lerareninfo vzw

6/33


Zorg ervoor dat hier het pad: C:\Program Files\Audacity\Lame for Audacity ingevuld staat!

STAP 2: MAAK JE OPNAME IN AUDACITY 7. Open Audacity:

STOP PAUZE

RECORD

Zorg dat hier ‘Microfoon' geselecteerd is.

PLAY

Zoals je ziet wijst het opnemen zichzelf uit. 8. Na de opname kies je voor BESTAND – EXPORTEREN ALS MP3


7/33


9.

De eerste keer dat je kiest voor ‘exporteren als mp3‟ zal Audacity je vragen waar de mp3-decoder te vinden is:

10. Bevestig met ‘Ja’ 11. Blader nu tot op de locatie waar het bestand „lame_enc.dll‟ terug te vinden is. Dat is (zie punt 6) op C:\Program Files\Audacity\Lame for Audacity.

12. Klik op ‘Openen’. 13. Sla het mp3-bestand op in de map waar ook de andere bestanden van de betreffende oefening zich bevinden. 14. Voeg nu het mp3-bestand in je oefening in zoals beschreven in § 1.2.1 Opmerking De stappen 9 -10 -11-12 moeten slechts EENMALIG doorlopen worden. Ze zijn noodzakelijk zodat Audacity later steeds de locatie kan terugvinden waar de mp3-encoder zich bevindt. Daarna gaat het programma steeds rechtstreeks over van stap 8 naar 13.


8/33


1.2.3 Geluidsbestanden exporteren als mp3 Mogelijk beschik je over een aantal geluidsbestanden in een ander formaat dan -mp3. Het zou handig zijn mocht je deze kunnen omzetten in mp3 zodat je ze ook volgens de hierboven beschreven methode in je Hot Potatoes-oefeningen zou kunnen invoegen. Nu we Audacity geïnstalleerd hebben is dat kinderspel geworden: 1. Open Audacity. 2. Kies in het menu voor BESTAND – OPENEN en selecteer je geluidsbestand. 3. Kies in het menu voor BESTAND – EXPORTEREN ALS MP3. KLAAR!


9/33


1.3 Werken met YouTube-filmpjes Ook het afspelen van videobestanden durft in Hot Potatoes nogal eens voor de nodige problemen zorgen. Een duurzame oplossing zoals voor geluidsbestanden is spijtig genoeg niet voorhanden. Daarvoor zijn er te veel videoformaten en dito videoplayers in omloop. Ook het converteren van videobestanden naar eenzelfde formaat is vaak omslachtig en de resultaten zijn meestal ook navenant. Een programma dat wat mogelijkheden ver boven de andere uitsteekt en hierdoor wellicht het meest complete gratis programma voor het downloaden en converteren van zowel video, als DVD en audiomateriaal genoemd kan worden, is Free Studio. Aangezien het een lichtgewicht is en gemakkelijk te installeren en te gebruiken, is het dus zeker een aanrader. DOWNLOAD EN INSTALLEER FREE STUDIO 1. Volg deze link om Free Studio te downloaden en klik op ‘Free Studio downloaden’. 2. Kies voor ‘Uitvoeren’. 3. Volg de richtlijnen van de installatiewizard (aanpassingen zijn niet nodig) om het programma op je pc te installeren. Let wel dat je de opties afvinkt wanneer gevraagd wordt om bijkomend de ToolBar te installeren. Deze hebben we niet nodig. 4. Start Free Studio

5. Je kan uiteraard even grasduinen in alle mogelijkheden (39) van het programma, maar voor deze handleiding behandelen we als voorbeeld het downloaden en converteren van een YouTube-filmpje.


10/33


1.3.1 Een YouTube filmpje downloaden Als eerste stap leren we hoe je een YouTube-filmpje van het internet downloadt en dit naar het gewenste videoformaat (.flv) converteert: 1. Surf naar www.youtube.com en zoek het gewenste filmpje. 2. Ga naar de adresbalk en kopieer de URL 3. Ga naar het geopende FreeStudio-venster

1. Plak de URL(‘s) in het venster.

2. Selecteer FLV als gewenst uitvoerformaat.

3. Klik op ‘Opties’ om aan te geven waar je het bestand wenst op te slaan.

Opmerking De reden dat we converteren naar -.flv-formaat (en niet naar .avi) is dat we hierdoor, analoog aan het afspelen van de (mp3) geluidsbestanden, gebruik kunnen gaan maken van een handige flvflashplayer, waardoor nagenoeg alle mogelijke problemen met al dan niet kunnen afspelen van de baan zijn.


11/33


4. Kies in het nieuwe venster voor het tabblad ‘Output’ …

4. Selecteer de map waarin je het geconverteerde bestand wenst op te slaan.

5. Bevestig je keuze. 6. Start de download en conversie.

Start de download

KLAAR!


12/33


Het geconverteerde YouTube-filmpje is nu klaar voor gebruik en kan nu in je Hot Potatoes-oefening ingevoerd worden. Opmerking Zoals gezegd kan je bv. ook de filmpjes naar mp3 converteren. Kies in dat geval in Free Studio voor:

1.3.2 Een YouTube filmpje invoegen Aangezien we voor het afspelen van onze filmpjes een flv-speler nodig hebben, moeten we deze (en de bijhorende code) eerst even downloaden. STAP 1: DE NODIGE (HULP)BESTANDEN DOWNLOADEN 1. Klik op deze link: hotpot_flv.zip of kopieer onderstaand adres en plak dit in het URL-veld van je browser: http://www.lerarentools.be/V1/hotpot_flv.zip 2. Kies voor ‘Opslaan’ en sla het bestand (bv. in de map ‘Mijn documenten’) op. 3. Klik rechts op het zip-bestand en kies voor ‘Alles uitpakken’. In de gecomprimeerde map bevinden zich 2 bestanden: flvplayer.swf en flvplayer.txt 4. Sla de uitgepakte bestanden op in de map waarin zich de bestanden bevinden van de oefening waarin je video (-.flv) wil invoegen. 5. Je beschikt nu over: - een flv-player die uitermate geschikt is om in je Hot Potatoes-oefeningen aan te brengen. - een tekstdocument waarin je de nodige code kan terugvinden om flvbestanden in je oefeningen in te voegen. ! Opmerking ! Voor elke oefening waarin je een flv-bestand wil invoegen dien je de flv-speler (flvplayer.swf) op te slaan in dezelfde map als waar de andere bestanden van de betreffende oefening opgeslagen zijn.


13/33


STAP 2: HET FILMPJE INVOEGEN 1. Maak nu je oefening. 2. Kopieer de code (flvplayer.txt) en plak die op de plaats waar je het filmpje wil invoegen. Deze code ziet er als volgt uit:

3. Nadat je de code op de juiste plaats geplakt hebt moet je alleen nog specifiëren welk filmpje dient afgespeeld te worden. Vervang daarom op 2 plaatsen in de code bestandsnaam.flv door de echte naam van je flv-bestand. 4. Herhaal deze procedure voor elk flv-bestand dat je wil invoegen. Opmerkingen 1. Wanneer bij het afspelen van het filmpje mocht blijken dat de afmetingen van de flv-player niet voldoen, dan kan je zowel de breedte als de hoogte van het weergavevenster rechtstreeks in de broncode aanpassen. 2. Denk eraan om naast het uitvoerbestand (-.htm) ook steeds de flv-player en alle flv-bestanden te uploaden wanneer je je oefening online zet.


14/33


Deel 2: Nog meer Potatoes Naast het aanmaken van standaardoefeningen is het mits wat extra werk best mogelijk om binnen de Hot Potatoes-modules bepaalde vraagtypes nog verder aan te passen en zelfs om nieuwe vraagtypes te creëren. Hierbij wordt er gebruik gemaakt van een aantal zogenaamde add-ons die ervoor zorgen dat bijkomende functionaliteiten gecreeerd worden. Deze add-ons zijn ontwikkeld door derden en behoren dus niet tot het basispakket van Hot Potatoes. Ze zullen dus eerst moeten gedownload moeten worden en daarna toegevoegd aan de bestaande software.

2.1 JMemory – een memoryspel Een eerste bijkomende oefening is een zogenaamde Memory-spel ons allen bekend.

2.1.1 De add-on downloaden en toevoegen 1. We gaan de add-on JMemory van Michael Rottmeier gebruiken. Dit is een zip-bestand dat je hier (‘Source Files’ onderaan de pagina) kan downloaden. (indien bovenstaande link niet mocht werken stuur ons dan een mailtje en we proberen je verder te helpen). 2. Kies voor ‘Opslaan’ en sla het bestand (bv. in de map ‘Mijn documenten’) op. 3. Klik rechts op het zip-bestand en kies voor ‘Alles uitpakken’. Sla de uitgepakte bestanden tijdelijk op op je bureaublad. Als alles goed is verschijnt hier een nieuwe map JMemory_v2.3 met daarin 2 bestanden: djmatch6.ht_ en JMatch6.ht_. 4. Kopieer de map JMemory_v2.3 en plak ze in C:\Program Files\HotPotatoes6\source (hierna mag je de tijdelijke map op het bureaublad verwijderen)

de

map:

2.1.2 De oefening aanmaken JMemory is een add-on van JMatch. Open JMatch en bouw je oefening op zoals beschreven in basishandleiding (pagina 34 e.v.). Je kan zowel met tekst als met afbeeldingen werken en zelfs met beide tegelijk. Indien je enkel met tekst werkt is er geen enkel probleem en kan je je oefening afwerken alsof het om een gewone JMatch-oefening ging. Indien je werkt met afbeeldingen (zoals in onderstaand voorbeeld), is het voor een correcte weergave achteraf nodig om enkele aanpassingen aan te brengen in de (door het programma gegenereerde) code voor de weergave van de verschillende afbeeldingen.


15/33


Verwijder de alt en title tags.

Stel de breedte en hoogte van de afbeelding in op ± ‘100’ pixels’.

1. Het verwijderen van de alt en title tags is noodzakelijk omdat anders bij het vertonen van de afbeeldingen de hierbij vermelde tekst als scherminfo verschijnt, hetgeen mogelijk (een deel van) het antwoord zou kunnen verraden. 2. Wellicht zal het nodig zijn om je afbeeldingen op voorhand te bewerken (Photoshop, The Gimp, …). Om praktische redenen (zie screenshot uitvoer) is het immers aan te bevelen om vierkante afbeeldingen te gebruiken van ± 100 op 100 pixels.

2.1.3 Het configuratiebestand aanpassen Eventuele aanpassingen aan het configuratiebestand gebeuren net als bij een JMatch oefening. Hou echter rekening met het volgende: REACTIE/FEEDBACK Achter de hier ingevoerde tekst verschijnt ook nog het aantal reeds gevonden paren. Feedback voor niet pasende paren. KNOPPEN Bij aanklikken van deze knop verschijnt de correcte oplossing van de oefening. Indien je het tekstveld leeg laat zal de knop niet zichtbaar zijn!


16/33


UITERLIJK Kleur van het woord JMemory op elke kaart. Kleur van de kaart bij mouse-over. Achtergrondkleur van elke kaart.

2.1.4 Het resultaat bekijken 1. Nadat we zowel de invoer (.jmt) als het configuratiebestand (.cfg) afgewerkt en opgeslagen hebben, is het tijd om het resultaat van ons werk te bekijken. Voor het creëren van de uitvoerpagina (.htm) moeten we verwijzen naar de JMemory add-on. Dit doe je alsvolgt: Druk tegelijkertijd op: CTRL + ALT + SHIFT + S en kies als locatie de map waarin de add-on zich bevindt:

Het volledige pad luidt: C:\Program Files\HotPotatoes6\source\JMemory_v2.3

Bevestig door te klikken op OK. 2. Tenslotte

kunnen

we

nu

de

oefening

exporteren

als

webpagina.

Klik hiervoor op het knopje (= sleepversie) in de werkbalk of kies je in het menu voor BESTAND en verder zoals op onderstaande figuur aangegeven.


17/33


3. Sla je bestand op (steeds in dezelfde map als alle andere bestanden van de betreffende oefening) en kies om de oefening in je internetbrowser te bekijken.

JMemory biedt je ook de mogelijkheid tot een alternatieve versie, waarbij initieel alle woorden/afbeeldingen zichtbaar zijn en de gebruiker deze moet koppelen door de paren aan te klikken. Om deze variant te creëren volstaat het om in de ontwerpmodule van JMatch het vakje van het eerste paar aan te vinken.


18/33


Slotbemerking Nadat je een JMemory-oefening hebt gemaakt mag je niet vergeten terug te keren naar de normale instellingen van JMatch. Dit doe je door (gelijktijdig) CTRL + ALT + SHIFT + T in te drukken en deze keuze te bevestigen.


19/33


2.2 JCloze-dropdown JCloze-dropdown is een uitbreiding/variatie op de klassieke ‘invuloefening’. Een JCloze-oefening kan standaard op 2 manieren aangeboden worden: a. Het te zoeken woord moet in een tekstveld ingetikt worden. b. Het te zoeken woord moet geselecteerd worden uit een keuzelijstje. (indien in het tabblad ‘OVERIG’ van het configuratiebestand het selectievakje „Gebruik een menulijst in plaats van een tekstvak in de oefening‟ werd aangevinkt). Het dropdownmenu van type b bevat voor elk in te vullen woord telkens dezelfde keuzemogelijkheden, nl. alle (correcte) woorden die in de oefening moeten ingevuld worden. De uitbreiding die we hieronder gaan beschrijven biedt je de mogelijkheid om de keuzemogelijkheden van elk in te vullen woord volledig zelf te bepalen (en dus ook foutieve antwoorden erin op te nemen).

2.2.1 De add-on downloaden en toevoegen 1. We gaan de add-on JClozeDropdown van Michael Rottmeier gebruiken. Dit is een zip-bestand dat je hier (‘Source Files’ onderaan de pagina) kan downloaden. (indien bovenstaande link niet mocht werken stuur ons dan een mailtje en we proberen je verder te helpen). 2. Kies voor ‘Opslaan’ en sla het bestand (bv. in de map ‘Mijn documenten’) op. 3. Klik rechts op het zip-bestand en kies voor ‘Alles uitpakken’. Sla de uitgepakte bestanden tijdelijk op op je bureaublad. Als alles goed is verschijnt hier een nieuwe map JClozeDropdown_v2.4 met daarin 2 bestanden: jcloze6.ht_ en jcloze6.js_. 4. Kopieer de map JClozeDropdown_v2.4 en plak ze C:\Program Files\HotPotatoes6\source (hierna mag je de tijdelijke map op het bureaublad verwijderen)

in

de

map:

2.2.2 De oefening aanmaken JClozeDropdown is een add-on van JCloze. Ook in deze aangepaste dropdownversie zijn twee types mogelijk. Aangezien het eerste type echter volledig overeenkomt met type b van de standaard JCloze gaan we hier niet verder op in. We beschrijven dus uitsluitend het type dat ons de mogelijkheid biedt om voor elk in te vullen woord zelf te bepalen welke keuzemogelijkheden in het dropdownmenu dienen opgenomen te worden.


20/33


Open JCloze en bouw je oefening op zoals beschreven in basishandleiding (pagina 27 e.v.). Hou echter rekening met het volgende:

Hier staat het correcte antwoord. Hier kan je een aanwijzing plaatsen.

Hier tik je de foutieve (!) antwoorden die in het keuzelijstje moeten worden opgenomen.

Opmerkingen: 1. Voor elk in te vullen woord kan je volledig zelf bepalen hoeveel en welke foutieve antwoordmogelijkheden in het dropdownmenu moeten worden opgenomen. 2. Je kan voor elk invulveld nog steeds een aanwijzing ingeven, maar het opnemen van alternatieve juiste antwoorden is niet meer mogelijk.

2.2.3 Het configuratiebestand aanpassen Eventuele aanpassingen aan het configuratiebestand gebeuren net als bij een JCloze oefening. Hou ook hier echter rekening met het volgende: REACTIE/FEEDBACK De oorspronkelijke functie van de ‘Hint’-knop (telkens een extra letter van de oplossing) is niet meer relevant en komt bijgevolg te vervallen. In plaats daarvan wordt er een nieuwe functie aan toegekend, nl. het vertonen van de correcte oplossing van de gehele oefening.

Indien je deze knop in je oefening wenst op te nemen, vink dan het selectievakje aan en geef de knop het opschrift dat hij moet vertonen.


21/33


OVERIG Zorg ervoor dat dit selectievakje aangevinkt en beide andere afgevinkt zijn..

2.2.4 Het resultaat bekijken 1. Nadat we zowel de invoer (.jcl) als het configuratiebestand (.cfg) afgewerkt en opgeslagen hebben, is het tijd om het resultaat van ons werk te bekijken. Voor het creëren van de uitvoerpagina (.htm) moeten we verwijzen naar de JClozeDropdown add-on. Dit doe je alsvolgt: Druk tegelijkertijd op: CTRL + ALT + SHIFT + S en kies als locatie de map waarin de add-on zich bevindt:

Het volledige pad luidt: C:\Program Files\HotPotatoes6\source\JClozeDropdown_v2.4

Bevestig door te klikken op OK. 2. Tenslotte

kunnen

we

nu

de

oefening

exporteren

als

webpagina.

Klik hiervoor op het knopje in de werkbalk of kies je in het menu voor BESTAND en verder zoals op onderstaande figuur aangegeven.



22/33


Slotbemerking Nadat je een JClozeDropdown-oefening hebt gemaakt mag je niet vergeten terug te keren naar de normale instellingen van JCloze. Dit doe je door (gelijktijdig) CTRL + ALT + SHIFT + T in te drukken en deze keuze te bevestigen.


23/33


Deel 3: Hot Potatoes hacken Toegegeven, deze titel klinkt een beetje bizar, maar is het in feite helemaal niet. „Hacken‟ is in de strikte betekenis van het woord immers niet meer of niet minder dan „het vinden van toepassingen, die niet door de maker van het middel bedoeld zijn‟ en moet in dat opzicht ook niet perse aan computersoftware gerelateerd zijn. Het gebruik van een wasknijper om te voorkomen dat je broekspijp tussen je fietsketting komt is in principe dus ook een ’hack‟. Geen angst dus dat we ons op het illegale pad zouden begeven, te meer nog daar de maken van Hot Potatoes zelf op hun site een aantal hacks beschrijven. In de praktijk zullen we in dit hoofdstuk rechtstreeks gaan ingrijpen in de broncode van Hot Potatoes. Het mag duidelijk zijn dat dit niet zonder gevaar is en daarom willen we van meet af aan deze gouden tip meegeven: WIJZIG NOOIT DE ORIGINELE BRONBESTANDEN VAN HOT POTATOES, MAAR MAAK VOOR ELKE EXTRA FUNCTIE EEN NIEUWE MAP AAN EN BEWAAR HIERIN DE AANGEPASTE BRONBESTANDEN.

In een eerste paragraaf stellen we een algemene strategie voor die je kan volgen telkens je een nieuwe hack (= nieuwe functie) wil implementeren.

3.1 De hacks voorbereiden Hieronder volgen een aantal aanbevelingen, die we noodzakelijk achten om veilig en gestructureerd met hacks om te gaan. 1. Maak (voor elke nieuwe hack) in de oorspronkelijke source-map van Hot Potatoes (C:\Program Files\HotPotatoes6\source\) een nieuwe map aan. 2. Geef die nieuwe map(pen) een naam volgens een vooraf bepaald stramien. (bv. initialen_naam van de hack) 3. Kopieer het aan te passen bestand (of bestanden) vanuit de source-map naar de nieuwe map. 4. Neem bij het aanpassen volgende regels in acht: - verwijder geen code, maar plaats de overbodig geworden commentaar (werkwijze volgt) - becommentarieer de doorgevoerde aanpassingen (werkwijze volgt)

code

als

5. Sla na de aanpassingen aangebracht te hebben het bestand op onder dezelfde naam als het originele (gekopieerde) bestand. En nu aan de slag!


24/33


3.2 Een scrollende leestekst Leesteksten worden in de uitvoerpagina standaard volledig vertoond. Vooral bij lange teksten leidt dit er toe dat het leestekstvenster (linkerschermgedeelte) veel te lang uitvalt, waardoor de laty-out van de pagina totaal verknoeid wordt. Deze hack zorgt ervoor dat de leestekst een onafhankelijke scrollbalk zal krijgen. 1. Maak in de source-map (C:\Program Files\HotPotatoes6\source\) een nieuwe map aan en geef die een naam (bv. CG_Leestekst_scroll)

2. Zoek in de originele source-map naar het bestand hp6.cs_ en kopieer het bestand in je nieuw aangemaakte map. 3. Open dit bestand in een teksteditor (bv. Kladblok, Wordpad, …) 4. Zoek naar de tekst: .ReadingText (dit is het begin van de code die het verschijnen van de leestekst regelt). Deze code ziet er als volgt uit: .ReadingText{ text-align: left; }

(dit stukje code geeft aan dat de leestekst links uitgelijnd moet worden).

5. We passen deze code aan tot: .ReadingText{ text-align: left; /* CG_aanpassing: 2 regels toegevoegd om de leestekst onafhankelijk te laten scrollen */ overflow: auto; height: 15em; /* CG_aanpassing: einde aangepaste code */ } a. Eerst voegen we een commentaarregel toe. Commentaarregels starten steeds met /* en eindigt met */. Aangezien de tekst die zich hiertussen bevindt door de browser genegeerd wordt, kunnen we deze notatie perfect gebruiken voor onze commentaren.


25/33


b. Vervolgens komen 2 regels extra code. Deze code bepaalt de hoogte van het leestekstvenster op 15 ‘em’ karakters en zorgt ervoor dat indien de tekst langer is deze automatisch (d.m.v. een scrollbalk) wordt aangepast. c. We eindigen met opnieuw een commentaarregel. 6. Sla het aangepaste bestand (onder dezelfde naam) op. De hack is klaar! 7. Maak nu je oefening (bv. in JQuiz) en zorg ervoor dat er een lange leestekst aanwezig is. Pas eventueel het configuratiebestand aan en sla daarna beide bestanden (.jqz en .cfg) op. 8. Voor het creëren van de uitvoerpagina (.htm) moeten we verwijzen naar de map met daarin het gehackte bestand dat we net gemaakt hebben. Dit doe je alsvolgt: Druk tegelijkertijd op: CTRL + ALT + SHIFT + S en kies als locatie de map CG_Leestekst_scroll:

Het volledige pad luidt: C:\Program Files\HotPotatoes6\source\JClozeDropdown_v2.4

Bevestig door te klikken op OK. 9. Tenslotte kunnen we oefening exporteren als webpagina. Klik hiervoor op het knopje in de werkbalk of kies je in het menu voor BESTAND en verder zoals op onderstaande figuur aangegeven.


26/33



Opmerking: In de hack werd opgegeven dat vanaf een hoogte van ’15 em’ een scrollbalk moet vertoond worden. Dat resulteert in het hierboven afgebeeld voorbeeld in een leesventser dat net evengroot is als het vraagvenster. Wordt je vraagvenster groter (bv. o.w.v. meer antwoordalternatieven), dan zal je in de hack ook de ‘em’-waarde moeten vergroten wil je beide vensters even groot houden.

Slotbemerking Nadat je oefening volledig afgewerkt is mag je niet vergeten terug te verwijzen naar de standaard bronbestanden van Hot Potatoes. Dit doe je door (gelijktijdig) CTRL + ALT + SHIFT + T in te drukken en deze keuze te bevestigen.


27/33


Deel 4: Tips en tricks 4.1 JQuiz - de toetsencombinatie: Ctrl + Shift + Z JQuiz biedt de mogelijkheid om een onbeperkt aantal vragen te creëren. Zolang vraag en antwoord zich beperken tot louter tekst is er geen probleem, van zodra je echter in de vraagstelling met afbeeldingen wil werken liggen de zaken enigszins anders. Globaal genomen zijn er in dat geval 2 mogelijkheden: Je voegt de afbeelding toe in het vraagveld.

Het mag duidelijk zijn dat dit resulteert in een niet al te beste lay-out. Met de afbeelding gecentreerd zou het geheel enigszins beter ogen, maar in de plaatsing van de antwoordalternatieven kan niet ingegrepen worden, waardoor het resultaat nooit echt bevredigend zal worden. Je voegt de afbeelding toe als ‘Leestekst’.

Dit oogt prima, alleen laat deze optie slechts toe om één enkele afbeelding toe te voegen, die dan voor elke vraag van de oefening vertoond zal worden.


28/33


De ideale oplossing zou erin bestaan om beide opties te combineren. Dit kan met de toetsencombinatie: Ctrl + Shift + Z CTRL + SHIFT + Z : VOOR ELKE VRAAG IN JQUIZ EEN ANDERE ‘LEESTEKST’ 1. Voeg je afbeelding toe in het vraagveld van JQuiz. Als resultaat verschijnt de code voor het zichtbaar maken van de afbeelding.

2. Verwijder de alt en title tags uit de code. (Indien je dit nalaat dan zal in de uitvoer (htm-pagina) de hierbij vermelde tekst – in dit geval: roodborstje - bij mouse-over als scherminfo bij de afbeelding verschijnen, hetgeen wellicht het antwoord zou verraden). 3. Selecteer nu de volledige (overblijvende) code en druk op: CTRL + SHIFT + Z

Het bestaande stukje onderstreepte code wordt nu als het ware ‘ingepakt’ in een bijkomend stuk code dat begint met:
en eindigt met
. In de praktijk zal al hetgene dat zich tussen deze code bevindt (in ons geval de afbeelding) in de uitvoer (htm-pagina) in het leestekstvenster verschijnen. 4. Herhaal deze werkwijze voor elke vraag waaraan je een afbeelding wil toevoegen. 5. a. Kies tenslotte in het menu voor BESTAND – LEESTEKST TOEVOEGEN

b. En vink het vakje ‘Gebruik Leestekst‟ aan (de rest laat je blanco).


29/33


Besluit: De toetsencombinatie Ctrl + Shift + Z maakt het mogelijk om in JQuiz voor elke vraag (indien gewenst) een andere bijhorende ‘leestekst’ te voorzien. Opmerkingen: 1. De regel is dat ALLES wat zich binnen de code
-
bevindt als ‘leestekst’ zal beschouwd worden. In het hierboven beschreven en afgebeelde voorbeeld werd in het vraagveld van de oefening zowel de vraag „Welke vogel wordt hier afgebeeld?‟ ingetikt als de afbeelding (zie html-code) ingevoegd. Bij het gebruik van de toetsencombinatie werd echter alleen de code voor de afbeelding geselecteerd, waardoor ook alleen de afbeelding in het leestekstvenster zal verschijnen. Chris Goevaerts voor Lerareninfo vzw

30/33


Opmerkingen ( … ) 2. Vergeet, aangezien het in wezen om het vertonen van een ‘leestekst’ gaat, zeker niet om in het dialoogvenster „Leestekst toevoegen‟ het selectievakje „Gebruik Leestekst‟ aan te vinken, aangezien er anders in de uitvoer geen leestekstvenster zal vertoond worden. 3. Wanneer er voor bepaalde vragen geen ‘leestekst’ geselecteerd werd (door middel van de beschreven toetsencombinatie), dan zal voor die vragen geen leestekstvenster vertoond worden. 4. Bij het gebruik van deze functie zal, om eventuele verwarring te vermijden, in de uitvoer (htm-pagina) de knop „Toon alle vragen‟ niet vertoond worden. 5. Ook verdere opmaak en afwerking is vanzelfsprekend nog mogelijk, al moet je dan wel zelf rechtstreeks in de html-code gaan ingrijpen. Zo zal bv. het wijzigen van “tekst-align: left,” in “tekst-align: middle,” ervoor zorgen dat je ‘leestekst’ (in ons geval de afbeelding) netjes in het leestekstvenster gecentreerd wordt. 6. Denk eraan dat de hierboven beschreven toetsencombinatie enkel functioneert wanneer ze toegepast wordt in het vraagveld van een JQuiz-oefening. In alle andere gevallen leidt ze tot niets.


31/33


4.2 Oefeningen beveiligen Aangezien de uitvoerpagina van een Hot Potatoesoefening niet meer is dan een gewone html-pagina, bestaat de mogelijkheid om met enkele muisklikken al snel de broncode van deze pagina zichtbaar maken. Iedereen met een beetje basiskennis van html zal hierin (in de JavaScriptcode) relatief snel de oplossingen van de oefeningen kunnen terugvinden. En dat is uiteraard niet de bedoeling! Gelukkig hebben de makers hiervoor een simpele oplossing voorzien: het volstaat om het Javascript (dat ervoor zorgt dat de oefening interactief wordt) uit de broncode weg te halen en als apart javascriptbestandje (.js) te laten wegschrijven. Dit doe je tijdens het aanpassen van het configuratiebestand. Kies voor het tabblad: OVERIG

Vink deze optie aan!

Wanneer je nu achteraf de uitvoer laat genereren, zal Hot Potatoes niet één, maar twee bestanden aanmaken en de JavaScriptcode niet langer in de broncode, maar apart (en dus onzichtbaar voor de leerlingen) opslaan.

Hou er rekening mee om beide bestanden te uploaden en in dezelfde map als alle andere te plaatsen. KLAAR!


32/33


Slotbeschouwing De eerste versie van deze handleiding werd gepubliceerd op 11/08/09. Ze was gebaseerd op de meest recente versie van Hot Potatoes 6.2.5.5. In september 2009 werd Hot Potatoes volledig freeware. De meest recente versie is nu 6.3.0.4 Onderhavige handleiding werd laatst aangepast op 06/11/2011. Deze handleiding is bedoeld voor de reeds gevorderde Hot Potatoes gebruiker en behandelt vooral extra mogelijkheden en uitbreidingen van het programma. Voor een basishandleiding bestemd voor beginners verwijzen we je graag naar de site Lerarentools. Iedereen is vrij deze handleiding voor eigen doeleinden te gebruiken. Mocht je ze verder willen verspreiden, gelieve dan rekening te houden met de eigendomsrechten zoals hierbij beschreven.

Mocht je verder nog vragen en/of opmerkingen hebben over de inhoud van deze pagina’s of suggesties voor eventuele uitbreidingen, neem gerust contact met ons op: [email protected] [email protected]


33/33


Hot Potatoes. een handleiding voor gevorderden. door Chris Goevaerts

Recommend Documents