Speels element in een bestaande applicatie integreren. STAGEPLAATS: BITMUNKS IN IEPER | STAGEMENTOR: MH KURT DELAPLACE | STAGEBEGELEIDER: MH DIETER DE PREESTER PROJECT AANGEBODEN DOOR
SIMON DEPREZ VOOR HET BEHALEN VAN DE GRAAD VAN BACHELOR IN DE
New Media and Communication Technology HOWEST | ACADEMIEJAAR 2014-2015
Speels element in een bestaande applicatie integreren. STAGEPLAATS: BITMUNKS IN IEPER | STAGEMENTOR: MH KURT DELAPLACE | STAGEBEGELEIDER: MH DIETER DE PREESTER PROJECT AANGEBODEN DOOR
SIMON DEPREZ VOOR HET BEHALEN VAN DE GRAAD VAN BACHELOR IN DE
New Media and Communication Technology HOWEST | ACADEMIEJAAR 2014-2015
Woord vooraf Het heeft me veel slapeloze nachten bezorgd om de beslissing te nemen om opnieuw te gaan studeren. Het eerste jaar had ik wat moeite om terug student te zijn. Het tweede jaar daarentegen was een verademing. Ik heb zeer veel aangename opdrachten mogen maken, waarvan er enkele mij nog altijd veel plezier doen beleven. Het derde jaar was 'over the top'. De opdrachten die ik mocht verwezenlijken waren een droom voor mij. Mijn favoriete bezigheid is saaiere dingen aangenaam maken voor iedereen. Daarom koos ik voor dit onderwerp. De bestaande applicatie word gebruikt om de Eerste Wereldoorlog beter in beeld te brengen. Ieper was het strijdtoneel van deze oorlog. Als Ieperse landbouwerszoon kom ik jaarlijks meerdere keren in aanraking met de overblijfselen van deze oorlog. Het rooien van bepaalde vruchten brengt nog altijd veel oorlogschroot met zich mee. Door dit gegeven sta ik te popelen om deze opdracht uit te voeren. Ik wil Kurt Delaplace bedanken als promoter en om mij de kans te geven om de beleving van de oorlog interactiever te maken. Hij richtte Bitmunks mijn stage bedrijf op. Zijn team wil ik ook bedanken voor het begeleiden van de opdracht. Waaronder ook Francesco Verheye mijn stagementor bij Bitmunks. Tevens wil ik ook Dieter De Preester bedanken als stagebegeleider van Howest. De steun van mijn ouders tijdens mijn studies apprecieer ik enorm. Verder wil ik ook nog Johan Vandamme bedanken om mij het laatste duwtje in de rug te geven tijdens mijn slapeloze nachten.
i
Gebruikte Symbolen en Afkortingen GPS : Global Positioning System POI : Point Of Interest. UUID : Universally Unique Identifier
ii
Verklarende woordenlijst Beacon: Een beacon of baken wordt gebruikt om te navigeren. De oudste vorm van een baken is een vuur bovenop een berg. In dit onderzoek maakt het baken gebruik van Bluetooth. Het toestel stuurt een UUID uit die kan worden onderschept door een toestel dat is uitgerust met Bluetooth. Expansion files: Een Android applicatie mag maximaal 50MB groot zijn. Om grotere applicaties te ondersteunen wordt er gebruikt gemaakt van 'expansion files'. Men kan twee bestanden van elk 2GB gaan toevoegen aan een applicatie. Geo-fence: Dit is een virtueel afgebakend geografisch gebied door middel van GPS. Listener: Voluit een event listener interface definieert de methoden die gebruikt worden door een component om gebeurtenissen door te geven. Markdown: Is een markeertaal zoals HTML. Het wordt voornamelijk gebruikt in leesmij of readme bestanden. Node: Wanneer de route tussen twee POI's niet de gewenste route is, kan aan de hand van noden tussen de POI's de gewenste route verkregen worden. Overlay: Het woord overlay (Engelstalig) is moeilijk in één woord te vertalen naar het Nederlands. In de context van dit onderzoek betekent het woord overlay: een extra interactieve laag die aangebracht wordt bovenop de kaart. POI (Point Of Interest): Dit stelt een bepaalde locatie in navigatiesoftware voor, bijvoorbeeld een kerkhof, museum of een ander interessant punt in het systeem. Python: Dit is een programmeertaal die begin jaren 90 ontworpen en ontwikkeld werd door de Nederlandse informaticus Guido van Rossum. De programmeertaal heeft zijn naam te danken aan Guido van Rossum zijn favoriete televisieprogramma namelijk Monty Python's Flying Circus.
iii
Figurenlijst Fig 3.1: Lay-out actieve spelvorm................................................................................................... 7 Fig 4.1: Lay-out meerkeuze antwoord........................................................................................... 8 Fig 4.2: Lay-out spinner antwoord................................................................................................. 9 Fig 4.3: Lay-out locatie gebonden antwoord.............................................................................10 Fig 4.4: Lay-out foto selecteren als antwoord...........................................................................11 Fig 4.5: Lay-out intro van een quiz............................................................................................... 13 Fig 4.6: Lay-out starten van een quiz........................................................................................... 13 Fig 6.1: Ingave van vragen voor de quiz...................................................................................... 18 Fig 10.1: Dropbox aanpassingen.................................................................................................. 22 Fig 10.2: Uitvoeren van het script................................................................................................ 22 Fig 10.3: Weergave van de resultaten......................................................................................... 23 Fig 10.4: Nieuwe POI locatie......................................................................................................... 23 Fig 10.5: Huidige POI locatie......................................................................................................... 23 Fig 10.6: Overzicht POI's en nodes van route............................................................................24 Fig 10.7: Intro van een route......................................................................................................... 24 Fig 10.8: Selectie quizmode.......................................................................................................... 25 Fig 10.9: Scorebord en nieuwe vraag.......................................................................................... 25 Fig 10.10: Outro van de alleenstaande quizmode....................................................................26 Fig 10.11: Starten quiz tijdens wandeling.................................................................................. 26 Fig 10.12: Starten wandeling met quiz....................................................................................... 27 Fig 10.13: Start quiz vanaf een POI.............................................................................................. 27 Fig 10.14: Verdergaan met navigatie na quiz.............................................................................27 Fig 10.15: Einde quiz tijdens de wandeling................................................................................28
iv
Inhoudsopgave 1 Inleiding, probleemstelling en situering...................................................................................3 2 Het onderzoek............................................................................................................................... 5 2.1 Quiz.............................................................................................................................................. 5 2.2 Actief spel................................................................................................................................... 5 3 Actieve spelvorm........................................................................................................................... 6 3.1 Voorbeeld spel........................................................................................................................... 6 3.1.1 Scenario.................................................................................................................................... 6 3.1.2 Werking.................................................................................................................................... 6 3.2 Implementatie actieve spelvorm............................................................................................ 6 3.2.1 Te implementeren instellingen van de beacon's..............................................................7 3.2.2 Weergave van het spel.......................................................................................................... 7 4 Quiz opdracht................................................................................................................................ 8 4.1 Antwoordstijlen......................................................................................................................... 8 4.1.1 Meerkeuze............................................................................................................................... 8 4.1.2 Spinner..................................................................................................................................... 9 4.1.3 Locatie gebonden................................................................................................................... 9 4.1.4 Foto selecteren..................................................................................................................... 10 4.1.5 Overlay op de kaart selecteren.......................................................................................... 11 4.2 Vraagtypes................................................................................................................................ 11 4.3 Voorbeeldvragen..................................................................................................................... 11 4.3.1 Vraag 1................................................................................................................................... 12 4.3.2 Vraag 2................................................................................................................................... 12 4.3.3 Vraag 3................................................................................................................................... 12 4.4 Quizmodi................................................................................................................................... 12 4.4.1 Standalone quiz.................................................................................................................... 13 4.4.2 Quiz tijdens de wandeling.................................................................................................. 14 4.5 Quizmanager............................................................................................................................ 14 5 Conclusie van het onderzoek.................................................................................................... 15 5.1 Conclusie quiz.......................................................................................................................... 15 5.2 Conclusie actieve spelvorm................................................................................................... 15 5.3 Gekozen spelvorm................................................................................................................... 15 6 Technische uitwerking quiz....................................................................................................... 16 6.1 Stappenplan............................................................................................................................. 16 6.1.1 Project builden..................................................................................................................... 16 6.1.2 Backend script....................................................................................................................... 16 6.1.3 Data aanpassen..................................................................................................................... 16 6.1.4 Alleenstaande quizmode.................................................................................................... 16 6.1.5 Outro quiz generatie........................................................................................................... 16 6.1.6 In navigatie quizmode......................................................................................................... 16 6.1.7 pop-up met score................................................................................................................. 16 6.1.8 overlay antwoorden............................................................................................................. 17 6.1.9 spinner antwoorden............................................................................................................ 17 6.1.10 foto antwoorden................................................................................................................ 17 6.1.11 Locatie gebonden antwoorden....................................................................................... 17 6.2 Aanpassen / Creëren van de quiz door de klant................................................................18 7 Resultaten.................................................................................................................................... 19 8 Eindbesluit................................................................................................................................... 20 1
9 Referentielijst.............................................................................................................................. 21 10 Bijlage......................................................................................................................................... 22 11 Samenvatting............................................................................................................................ 28
2
1 Inleiding, probleemstelling en situering De bachelorproef wordt uitgevoerd bij het bedrijf Bitmunks. Dit bedrijf ontwerpt en ontwikkelt mobiele applicaties – 'native' en web , Android en iOS op maat. Het bedrijf werd opgericht in 2012. Bitmunks stelt 1 werknemer en 1 freelancer aan het werk. In oktober 2013 was er een herschikking binnen het bedrijf waardoor men zich meer toespitst op het ontwikkelen van mobiele applicaties. Het bedrijf is gelegen in Ieper op het bedrijventerrein Ter Waarde. Er is een vlotte verbinding naar de A19 via de Noorderring. Dit bedrijventerrein is vooral gekend door het vroegere Lernout en Hauspie. Binnenkort zal het stadhuis van Ieper de politie van Ieper volgen naar dit bedrijventerrein. Maandelijks komen er 50 000 bezoekers naar Ieper waaronder veel scholen. Het In Flanders Field Museum kan dit aantal bijna niet meer slikken en daarom kreeg Bitmunks de opdracht om een applicatie te ontwikkelen. Deze applicatie zal Ypres Salient heten. Ypres Salient vertaalt men letterlijk naar Ieper boog. De Ieper boog was 4 jaar lang de locatie van het strijdtoneel tijdens de Eerste Wereldoorlog. Het doel van deze applicatie is om het museum naar buiten te brengen. Op de Ieper boog zijn er nog vele restanten en herinneringen van de Grote Oorlog die het bezoeken waard zijn. Ypres Salient zal gebruikt worden om de Ieper boog te verkennen aan de hand van verschillende wandelingen. Dit met het oog op de Eerste Wereldoorlog. Navigeren doet de applicatie volledig offline en enkel op GPS signaal. Dit heeft als voordeel dat toeristen geen duur dataverkeer hoeven te gebruiken. Echter heeft het als nadeel dat alle kaarten zich in de applicatie bevinden. Hierdoor is de omvang van de applicatie groter. De wandelingen bevatten op bepaalde plaatsen luchtfoto's van tijdens de Grote Oorlog. Via een instelbare transparante 'overlay' kunnen deze getoond worden bovenop de hedendaagse kaart. Hierdoor creëert men een unieke ervaring om het aloude slagveld opnieuw tot leven te wekken. Vooral oudere mensen vinden dit een toffe ervaring. De jeugd daarentegen moet men wat meer stimuleren. Daarom was er de vraag hoe kunnen we dit gegeven nog wat interactiever/speelser maken. Deze vraag is dan ook het onderzoek dat zal worden uitgevoerd. De doelstelling van deze bachelorproef is het uitzoeken en implementeren van een speels element in de bestaande applicatie. Het te implementeren speels element moet aan enkele criteria voldoen. Deze criteria zijn: •
Meerwaarde bieden aan de bestaande applicatie
•
Het toevoegen en aanpassen moet eenvoudig kunnen gebeuren door de klant 3
Ook wordt er verwacht om onderzoek te doen naar een interne tool om de data van het speels element eenvoudig en vlot te kunnen toevoegen of aanpassen. In eerste instantie gaan we onderzoeken welke speelse elementen er zoal bestaan. Daarna wordt er gekeken of deze toepasbaar zijn in de bestaande applicatie. Indien deze toepasbaar zijn onderzoeken we of ze voldoen aan de vooropgestelde criteria.
4
2 Het onderzoek We onderzoeken welke mogelijkheden er zijn om de applicatie meer interactief te maken. We besteden vooral aandacht aan het feit dat men zeer vlot nieuwe speelse elementen moet kunnen toevoegen. Deze zullen worden toegevoegd aan bestaande en nieuwe wandelingen. Het toevoegen van deze speelse elementen zal gebeuren door de klant. Deze klant heeft geen programmeer ervaring. We zoeken dus een speels element dat iedereen vlot kan gaan toevoegen aan de applicatie. Het bestaand platform waarop de applicatie gebaseerd is, heeft de mogelijkheid om routes samen te stellen die uit Point of Interest (POI's) bestaan. Het is de bedoeling dat de speelse elementen aan deze POI's worden toegevoegd. Deze POI's en routes worden samengesteld aan de hand van markdown bestanden en elk heeft één info.json bestand. Het markdown bestand bevat de 'content' voor de POI of route. Het info.json bestand bevat alles om in de applicatie om te gaan met de POI of de route. Zo kan men in de info.json van een POI de positie van deze POI terugvinden. Hiermee houden we rekening tijdens het onderzoek omdat ook op deze manier data zal worden toegevoegd. Tijdens de beginfase van het onderzoek komen vooral twee mogelijkheden naar boven. De eerste spelvorm is een quiz. De andere spelvorm is een actief spel.
2.1 Quiz Deze spelvorm gaan we onderzoeken omdat er potentieel inzit om gebruikt te worden als didactisch materiaal. De scholen die de streek bezoeken, kunnen deze quiz gebruiken om hun leerlingen te testen en/of te motiveren om het bezoek aan de streek ten volle te benutten. We zullen onderzoeken hoe we vragen kunnen koppelen aan de POI's van een wandeling. Ook wordt er onderzocht of het mogelijk is om per wandeling één of meerdere quizzen kunnen worden toegevoegd.
2.2 Actief spel De applicatie biedt nochtans wel beweging door het gegeven dat het wandelingen aanbiedt. Voor dit deel van het onderzoek is er potentieel omdat het op sommige locaties zeer aangenaam kan zijn om een actief spel te creëren. Bepaalde locaties zijn uitermate geschikte locaties omdat er meer ruimte beschikbaar is. We zullen onderzoeken welke actieve spelvormen geschikt zijn.
5
3 Actieve spelvorm We onderzoeken deze spelvorm aan de hand van enkele voorbeeld spelen. Deze schetsen wat er precies bedoeld wordt met een actieve spelvorm. Daarna wordt er onderzocht hoe men deze spelvorm kan implementeren in de bestaande applicatie.
3.1 Voorbeeld spel Het onderstaand spel bootst een oorlogsituatie na van tijdens de Eerste Wereldoorlog. Het scenario schetst hoe het spel wordt aangebracht aan de gebruiker. De werking van het spel bespreken we hierna. Dit spel kan gebruik maken van beacon's of geofencing.
3.1.1 Scenario U speelt een soldaat in de loopgraven. U bent verantwoordelijk voor de gasmaskers. Er is een gaswolk op komst. Omdat men de gasmaskers doorgeeft als er aflossing is van de soldaten in de loopgraven, zijn deze maskers verspreid in de loopgraven in de voorraadkisten. Zoek vlug de dichtstbijzijnde voorraadkist. Daarna verdeelt u snel de maskers aan uw kameraden.
3.1.2 Werking Tijdens de start van het spel wordt er één beacon aangeduid als voorraadkist. De andere beacon's stellen uw kameraden voor. We geven een kaart weer op de applicatie. Op deze kaart duiden we de locatie van de voorraadkist en hoeveel gasmaskers je momenteel in uw bezit hebt aan. Wanneer men bij een andere beacon aankomt, gaat er een x aantal maskers af van het totaal. Wanneer u alle beacon locaties volledig hebt gevuld met maskers is het spel voorbij. Eventueel laten we een timer aftellen om de simulatie van de gaswolk die dichter bijkomt na te bootsen.
3.2 Implementatie actieve spelvorm We voorzien een losstaande applicatie. Dit is nodig omdat de huidige applicatie te groot zal worden wanneer we deze spelvorm integreren. Deze applicatie zal kunnen worden opgestart vanuit de bestaande applicatie. We gebruiken de bestaande beacon detectie module die in de bestaande applicatie aanwezig is. Deze module zullen we uitbreiden om alle functionaliteiten van de actieve spelvorm te kunnen implementeren. Om te voldoen aan het criterium dat de klant een spelvorm moet kunnen toevoegen, gaan we na hoe we met simpele input een spel op een andere locatie kunnen aanmaken. We zullen een info.json bestand voorzien per locatie en spelvorm. In dit bestand zullen we alle instellingen voor het spel ingeven. Zo kunnen we meerdere locaties voorzien met dezelfde applicatie.
6
3.2.1 Te implementeren instellingen van de beacon's Dit is een overzicht van instellingen per locatie en spel indien er met beacon's gewerkt wordt. 1. Selecteren van de beacon's die het spel spelen via de Universal Unique Indentifier (UUID). 2. Welke beacon's er kans maken om een bepaald onderdeel uit te maken.
3.2.2 Weergave van het spel Hoe we dit alles op het scherm gaan weergeven is nu aan de orde. Augmented Reality kan eventueel gebruikt worden om de juiste of slechte locatie te helpen weergeven. Een mogelijke lay-out vindt u hieronder.
Fig 3.1: Lay-out actieve spelvorm
7
4 Quiz opdracht Om wat variatie in de quiz te brengen gaan we verschillende antwoordtypes gebruiken. Dit heeft als gevolg dat we ook variatie in de vragen krijgen. Men kan deze type vragen en antwoordstijlen door elkaar gebruiken.
4.1 Antwoordstijlen Tijdens het onderzoek naar geschikte antwoordstijlen hebben we rekening gehouden met het feit dat deze makkelijk valideerbaar moeten zijn. Het typen van tekst wordt vermeden om typfouten uit te sluiten. De antwoorden worden in het markdown bestand van de vraag geschreven.
4.1.1 Meerkeuze Meerkeuzevraag zorgt voor een gesloten vraagstelling. Hierdoor kan de gebruiker kiezen uit een beperkt aantal antwoorden. Fig 4.1: Lay-out meerkeuze antwoord. Dit antwoordtype zou als volgt ingegeven worden in het markdown bestand. ![answer] ( answer=”Dit is een fout antwoord” correct=False ) ![answer] (answer=”Dit is een correct antwoord” correct=True )
Fig 4.1: Lay-out meerkeuze antwoord
8
4.1.2 Spinner Het antwoord wordt gegeven in een aangepast invoerveld waar enkel cijfers ingevuld kunnen worden. Fig 4.2: Lay-out spinner antwoord. Aan deze spinner kunnen we een minimale en maximale waarde meegeven. Het juiste antwoord wordt ingegeven bij de vraag. Dit antwoordtype zou als volgt worden ingegeven in het markdown bestand. ![question]( "Wat is het exacte aantal soldaten dat hier begraven ligt?" answer=12 ) ![spinner]( minValue=5 maxValue=20 submitText="Bevestig Antwoord" )
Fig 4.2: Lay-out spinner antwoord
4.1.3 Locatie gebonden U moet zich naar de juiste locatie begeven. Op de kaart geven we ook enkele overlay's weer met mogelijke oplossingen. Fig 4.3: Lay-out locatie gebonden antwoord. Wanneer men in het een gebied terecht komt, wordt de vraag automatisch beantwoord. De overlay's die getoond worden, bevatten de geo-fence. Deze overlay's worden getoond wanneer de vraag actief wordt. Dit kan gebeuren door volgende regels in het markdown bestand te voegen. #pre:[overlay](answer_hogecrater_correct) #pre:[overlay](answer_hogecrater_wrong)
9
Fig 4.3: Lay-out locatie gebonden antwoord
4.1.4 Foto selecteren We beantwoorden deze vraag door op de juiste foto te klikken. Fig 4.4: Lay-out foto selecteren als antwoord. Het juiste antwoord kan men afleiden uit de tekst bij de vraag. In deze tekst zijn tips aangebracht zodanig dat men aan de hand van enkele details de juiste foto kan vinden. Voor dit type antwoord zullen we een nieuw tag type toevoegen.  
10
Fig 4.4: Lay-out foto selecteren als antwoord
4.1.5 Overlay op de kaart selecteren Dit antwoordtype wordt op dezelfde manier geïmplementeerd als een locatie gebonden antwoord. Het enige verschil is dat men zal antwoorden door een overlay op de kaart te selecteren.
4.2 Vraagtypes We onderzoeken hoe we de vragen kunnen stellen en wat we kunnen vragen. Men moet alle vragen kunnen beantwoorden zonder voorkennis van de oorlog. 1. Informatie ter plaatse Dit zijn vragen waarvan men het antwoord kan vinden in de buurt van de POI. 2. Logische redeneringsvragen Het antwoord kan men vinden door aandachtig rond te kijken in de buurt van deze POI. 3. Informatie van de POI Indien men de informatie van de POI aandachtig heeft gelezen, kan men het antwoord vinden.
4.3 Voorbeeldvragen Om de verschillende vragen en antwoordstijlen te verduidelijken, geven we hieronder enkele voorbeelden.
11
4.3.1 Vraag 1 In welk jaar werd dit monument ingehuldigd. Antwoord is te vinden op de gedenksteen namelijk 1934. Deze vraag is van de vorm informatie ter plaatse. De antwoordstijl is een spinner.
4.3.2 Vraag 2 Waarom werd deze locatie fel bevochten. Antwoord: A: Er is hier een leuk café. B: Dit punt is exact tussen de twee loopgraven. C: Dit is het hoogste punt in de buurt. Het correcte antwoord is antwoord C. Hier tonen we een meerkeuze antwoordstijl gecombineerd met een logische redeneringsvraag.
4.3.3 Vraag 3 Waar bevond zich de Duitse stelling tijdens de slag in juli 1916. Antwoord: U moet zich naar de juiste locatie begeven. De antwoordstijl is locatie gebonden. De vraag kan informatie ter plaatste zijn of informatie van de POI.
4.4 Quizmodi Gebruikers hebben de mogelijkheid om kennis te maken met de vraagstelling. Hiervoor zijn er twee modi uitgewerkt. De eerste is een quiz uit de zetel of standalone modus. De tweede is een quiz tijdens de wandeling. Het verschil tussen deze twee modi is dat ene fysieke vereist inspanning en dat je de andere overal kan uitvoeren. De keuze wordt gemaakt in het intro scherm van de route. Fig 4.5: Lay-out intro van een quiz. Het starten van de quiz gebeurt in de intro van de route. Fig 4.6: Lay-out starten van een quiz
12
Fig 4.5: Lay-out intro van een quiz
Fig 4.6: Lay-out starten van een quiz
4.4.1 Standalone quiz Deze quizmodus laat het toe dat de gebruiker een deel van de vragen kan beantwoorden. Deze modus is ontwikkeld om de gebruiker kennis te laten maken met de flow van een quiz. Ook kan men indien men de applicatie thuis gebruikt een quiz oplossen. Deze modus gebruikt geen locatie gebonden antwoordstijlen
13
4.4.2 Quiz tijdens de wandeling Het selecteren van deze modus heeft als gevolg dat men zich moet begeven naar het begin van de wandeling. Eenmaal aangekomen bij een POI gaan we na of er vragen zijn voor deze POI. Bent u bij een POI met vragen, gaat er een mini standalone quiz opstarten met alle vragen voor deze POI.
4.5 Quizmanager We gaan een klasse voorzien in de applicatie die de goede gang van zaken garandeert. Wanneer een quiz start, wordt de modus doorgegeven aan deze klasse. Indien het gaat over een standalone quiz worden de vragen direct ingelezen en getoond. Quiz tijdens de wandeling modus gaat alle vragen gekoppeld aan een POI inlezen. Indien er tijdens de wandelmodus een POI wordt bezocht, gaan we aan de quizmanager vragen of deze POI vragen bevat. Wanneer deze POI vragen bevat, gaan we de lijst voor de standalone modus opvullen met alle vragen voor deze POI. Na het lezen van de POI zal een standalone quiz worden opgestart die alle vragen voor deze POI overloopt.
14
5 Conclusie van het onderzoek 5.1 Conclusie quiz De quiz voldoet aan beide criteria. •
Meerwaarde bieden aan de bestaande applicatie Deze meerwaarde zit hem vooral in het feit dat leerkrachten de quiz kunnen gebruiken als een educatief gegeven. Ook maakt het de applicatie interactiever.
•
Het toevoegen en aanpassen moet eenvoudig kunnen gebeuren door de klant. Het is eenvoudig om de klant dit zelf te laten beheren. Een nieuwe quiz bestaat uit minimum 2 bestanden. De vraag is 1 bestand. Het script behandelt deze bestanden zodanig dat de applicatie er mee overweg kan.
5.2 Conclusie actieve spelvorm Een nadeel van deze spelvorm is dat er een aparte applicatie moet ontwikkeld worden om deze spelvorm te kunnen spelen. De bestaande applicatie zou te groot worden met alle extra componenten voor deze spelvorm. Toch voldoet deze spelvorm aan de vooropgestelde criteria. •
Meerwaarde bieden aan de bestaande applicatie Het geeft de mogelijkheid om een extra beleving te bieden tijdens het bezoek aan een interessante plaats.
•
Het toevoegen en aanpassen moet eenvoudig kunnen gebeuren door de klant. Het kan eenvoudig zijn om de klant deze spelvorm te laten beheren. Hiervoor moeten we vanuit de bestaande applicatie een configuratie naar de spelapplicatie meegeven. Deze configuratie kunnen we via een markdown bestand laten genereren via het python script.
5.3 Gekozen spelvorm Er werd beslist om een quiz als speels element te kiezen. Deze voldoet aan alle criteria net zoals de actieve spelvorm. We kiezen niet voor de actieve spelvorm omdat deze een aparte applicatie vereist die deze spelvorm bevat.
15
6 Technische uitwerking quiz 6.1 Stappenplan 6.1.1 Project builden De allereerste stap is het project van de bestaande applicate builden. Het project maakt gebruik van verschillende libraries. Deze worden allemaal afgehaald via git.
6.1.2 Backend script We starten met het afhalen van de git 'repositories'. Het script is gemaakt in python. We voegen enkele zaken toe aan het script om de quiz data te kunnen gebruiken in de applicatie. Deze zaken zijn onder andere een antwoord klasse in het script en een lijst met de antwoorden .
6.1.3 Data aanpassen We voegen een extra wandeling toe aan de input van de applicatie.
6.1.4 Alleenstaande quizmode In de nieuwe wandeling gaan we onze quiz data uittesten en afwerken. Deze data maakt gebruik van de aanpassingen in het backend script. We voorzien in de applicate een quizmanager klasse die de quiz in goede banen leidt.
6.1.5 Outro quiz generatie Deze stap is de grootste aanpassing in het Python script. Momenteel wordt enkel en alleen het description.md markdown bestand bekeken. Echter hebben we voor een quiz een outro markdown bestand. Indien we een quiz aan het genereren zijn, gaan we dit extra markdown bestand ook bekijken.
6.1.6 In navigatie quizmode In de applicatie gaan we de quizmanager uitbreiden met de functionaliteit voor de tweede quizmode.
6.1.7 pop-up met score We voorzien in de klasse interactive mapview een extra 'listener'. Deze 'listener' wordt aangeroepen wanneer de score is veranderd. De interactive mapview kan dan op zijn beurt de score aanpassen.
16
6.1.8 overlay antwoorden We voegen overlay's toe aan de vraag. De overlays gaan we tonen wanneer de vraag actief is. Wanneer men op een van deze overlay's klikt, weten we of hij al dan niet correct heeft geantwoord.
6.1.9 spinner antwoorden De spinner plaatsen we in een HTML formulier. Vooraleer we het antwoord versturen wordt er gevalideerd of de input numeriek is. Hiervoor wordt een klein stukje JavaScript gebruikt. Dit stukje code controleert of het antwoord correct is aangezien hier het antwoord zich in de vraag bevindt. Het resultaat sturen we door naar de applicatie.
6.1.10 foto antwoorden We gaan het python script aanpassen om de [answerimage] tag goed te renderen.
6.1.11 Locatie gebonden antwoorden De klasse MapBoxMapView heeft een event onLocationChanged. In dit event gaan we na of de huidige locatie zich binnen een geo-fence van een overlay bevindt. Indien de locatie van de applicatie zich binnen een geo-fence bevindt, gaan we na of dit een correct of foutief antwoord is.
17
6.2 Aanpassen / Creëren van de quiz door de klant Een quiz bestaat uit een description.md bestand met een info.json bestand. Daarnaast hebben we de vragen die enkel een discription.md bestand hebben. Het info.json bestand bevat twee lijsten met alle vraag id's de ene met POI's de andere zonder POI's. Fig Fig 6.1: Ingave van vragen voor de quiz 6.1: Ingave van vragen voor de quiz. Het aanpassen of aanmaken van deze wandelingen en quizzen zal hoofdzakelijk door de klant gebeuren. Hiervoor wordt er een server opgesteld die luistert naar een dropbox folder die gedeeld wordt met de klant. De klant past de data aan op dropbox. Op de website kan men zien wanneer de aanpassingen in de data gebeurd zijn. Fig 10.1: Dropbox aanpassingen. Hierna kan de gebruiker het script starten. Fig 10.2: Uitvoeren van het script. Het script genereert de 'expansion files' voor de applicatie. De resultaten kunnen bekeken worden in de browser. Fig 10.3: Weergave van de resultaten. Het klikken op de naam van de POI toont de gegenereerde HTML files. Het klikken op de wereldbol toont de geolocatie van de verschillende POI's. Fig 10.5: Huidige POI locatie. Is deze locatie niet correct, dan kan men door een klik op de kaart een nieuwe locatie ophalen. Fig 10.4: Nieuwe POI locatie. Deze nieuwe locatie kan men kopiëren en plakken in de info.json van deze POI. Indien er op de wereldbol van een route wordt geklikt, dan worden de POI's in het rood en de nodes in het blauw weergeven. Fig 10.7: Overzicht POI's en nodes van route.
18
7 Resultaten Er werd een nieuwe wandeling aangemaakt om de quiz te demonstreren en testen. Wanneer de applicatie opgestart is, gaan we naar de nieuwe route. In het intro scherm van deze route kunnen we de selectie maken om de quiz te starten. Fig 10.6: Intro van een route. Na deze selectie kunnen we de keuze maken welke quizmode we gaan opstarten. Fig 10.8: Selectie quizmode. Kiezen we voor 'Alleen de quiz' dan start de applicatie een quiz met alle niet POI gebonden vragen. Na het antwoorden van de eerste vraag wordt de huidige score getoond links onder in het scherm. De volgende vraag wordt weergegeven. Fig 10.9: Scorebord en nieuwe vraag. Wanneer we op het einde zijn gekomen van deze modus geven we een outro scherm weer. Fig 10.10: Outro van de alleenstaande quizmode. Op dit scherm heeft de gebruiker de keuze om terug te keren naar het overzicht van de wandeling of naar het overzicht van alle wandelingen. De eindscore van de quiz wordt ook weergegeven. Kiest men voor 'quizzen tijdens de wandeling' dan gaan we een melding geven dat de quiz start wanneer men zich bij de start van de quiz bevindt. Fig 10.11: Starten quiz tijdens wandeling. Wanneer het mogelijk is, kan men starten door op de knop te drukken 'Start Wandeling Met Quiz'. Fig 10.12: Starten wandeling met quiz. Wanneer men bij een POI aankomt, wordt de informatie van deze POI weergegeven. De gebruiker moet nu eerst de quizvragen oplossen vooraleer de navigatie wordt verdergezet. Fig 10.13: Start quiz vanaf een POI. Indien er geen quizvragen aanwezig zijn voor een POI dan kan men direct verder navigeren. Fig 10.14: Verdergaan met navigatie na quiz. Op het einde van de wandeling tonen we een melding. Deze melding bevat de eindscore van de quiz. Fig 10.15: Einde quiz tijdens de wandeling
19
8 Eindbesluit Er wordt opzoek gegaan naar een speels element om in een bestaande applicatie te implementeren. Dit element voldoet aan de vooropgestelde criteria. Er werden meerdere mogelijke elementen onderzocht. Het speels element dat het best aan de vooropgestelde criteria voldoet is een quiz. Deze quiz werd volledig geïmplementeerd. Dit zowel in de applicatie als de backend. De applicatie is gebaseerd op een platform ook daar werd de quiz geïmplementeerd.
20
9 Referentielijst Vandenberghe, K. (2015, januari 19). Ook in 2015 ambitieus programma In Flanders Fields[Nieuws artikel]. Gezien maart 03, 2015, op http://www.focus-wtv.be/nieuws/ook2015-ambitieus-programma-flanders-fields
21
10 Bijlage
Fig 10.1: Dropbox aanpassingen
Fig 10.2: Uitvoeren van het script 22
Fig 10.3: Weergave van de resultaten
Fig 10.5: Huidige POI locatie
Fig 10.4: Nieuwe POI locatie
23
Fig 10.7: Overzicht POI's en nodes van route
Fig 10.6: Intro van een route
24
Fig 10.8: Selectie quizmode
Fig 10.9: Scorebord en nieuwe vraag
25
Fig 10.10: Outro van de alleenstaande quizmode
Fig 10.11: Starten quiz tijdens wandeling
26
Fig 10.12: Starten wandeling met quiz
Fig 10.13: Start quiz vanaf een POI
Fig 10.14: Verdergaan met navigatie na quiz
27
Fig 10.15: Einde quiz tijdens de wandeling
28
11 Samenvatting Voor het bedrijf Bitmunks wordt er gezocht naar een oplossing om een bestaande applicatie speelser te maken. De bestaande applicatie is een Android applicatie Ypres Salient. Deze wordt ontwikkeld in opdracht van het In Flanders Fields Museum. Het speelser maken van de bestaande applicatie wordt verwezenlijkt aan de hand van een quiz. Deze quiz voldoet aan de vooropgestelde criteria van de promoter. Deze criteria zijn opgesteld voor de gebruiksvriendelijkheid van de klant.
29
