Design en implementatie van een gamification platform voor werkactivatie

Transcriptie

1 Design en implementatie van een gamification platform voor werkactivatie Project aangeboden door Arne Decant en Thomas Buffel voor het behalen van de graad van Bachelor in de New Media and Communication Technology Academiejaar Stageplaats : Howest Stagementor : Geert Hofman Stagebegeleider : Angelo Fallein

2

3

4

5 Woord vooraf Wij zijn Thomas Buffel en Arne Decant en volgen onze stage bij Howest. Wij staan in voor het design en ontwikkeling van OWAES, een gamified platform voor werkactivatie van 50-plussers. Onze opdracht bestaat uit een publiek luik (de informatieve website, gemaakt in Drupal) en een privaat luik (het platform op zich, enkel voor de leden van OWAES). OWAES staat onder leiding van Howest (Geert Hofman), wordt gesteund door Europa en Vlaanderen en heeft als partners ESF, Kanaal 127, Mentor en VOKA. Arne is gepassioneerd door het web. Hij is actief in webdesign en development en voornamelijk aan de front end. Een voorafgaande studie Boekhouden- Informatica werd gevolgd door een studie NMCT waarin hij in het 5 e semester vooral web-gerichte keuzes maakte. Modules zoals Front-end Webdevelopment, Back-end Webdevelopment, UX design en Graphic and Motion Design vulden zijn lessenrooster. Terwijl Arne ervaring had in ASP.NET en Ruby On Rails door de module Back-end Webdevelopment, was zijn kennis van PHP wat schaars. Hierin kon Thomas zich aansluiten op de tekorten van Arne. Thomas is zowel native als op het web actief als developer. Met modules als Frontend Webdevelopment, Windows 8 App Development, Android App Development en UX Design heeft hij zijn 5 e semester doorgebracht. Zijn kennis van PHP was te danken aan een voorgaande opleiding Devine, waarin PHP uitgebreid aan bod kwam. Wij zouden hierbij graag de tijd nemen om enkele personen te bedanken: Howest voor zowel de opleiding, de stage en de stageplaats. Geert Hofman en Benedikt Beun voor de vele feedback die wij van hen verkregen en de mogelijkheid om onze stage bij OWAES te volgen.

6

7 Abstract Tijdens onze stage hebben we verschillende opdrachten gekregen. Bestaande uit het ontwerpen van een drupal site, een platform en het bestuderen van gamification. Dit document zal grotendeels het onderwerp gamification behandelen. Het eerste hoofdstuk zal het ontwerpen van de drupal site en het platform behandelen. Hoe zit de structuur van de site in elkaar? Welke design keuzes hebben we gemaakt? En het verschil met de vorige versie. Vervolgens beginnen we met het gedeelte van gamification. Wat is gamifiction? Waarom zou men gamifiction gebruiken? En waarop moet men letten als men gamification wilt toepassen? Een belangrijk onderdeel van gamification is het stimuleren en motiveren van gebruikers. Daarvoor moet men eerst vaststellen hoe gebruikers zullen omgaan met het platform. En hoe hebben wij het toegepast? Als laatste onderdeel komt aan bod hoe wij de gebruikers op dit platform in de gaten moeten houden. Waar kunnen mensen van profiteren en welke systemen bestaan er nog?

8

9 Verklarende woordenlijst Woord Achievements Badge Bugs Community Experience (Points) Exploitationware Gamification Leaderboard Levels Verklaring Een prestatie, het behalen van een prestatie. (Zie badges, ribbon) Een badge in gamification is een visuele aanduiding van een prestatie. (Zie achievements en ribbon) Een bug is een onvoorziene programmeerfout zodat het programma niet naar behoren werkt. Een samenwerking (lokaal of virtueel) waarbij maatschappelijk verantwoord ondernemen centraal staat. Een weergave van hoe ver men staat in het level. Vaak afgekort als xp, exp of ep. Het gebruik van gamification om mensen te manipuleren. Het gebruiken van game elementen. Een scorebord, met een lijst van de best presterende deelnemers. Een weergave van hoe ver men staat in een spel. Magic circle Newbie Pointsification Quests, queesten Rewards Ribbon Sweepstakes Tutorial De magic circle is het membraan wat virtuele werelden afzonderd van de reële wereld, al dan niet met zijn eigen regels. Iemand die pas begonnen is met het spel. Gamification op basis van alleen maar extrensieke motivators. Opdrachten die spelers kunnen of moeten uitvoeren, waarvoor rewards gegeven worden (vaak EXP) Beloningen Een ribbon in gamification is een visuele aanduiding van een prestatie. (Zie achievements en badges) Is een vorm van wedstrijd waarmee prijzen kunnen gewonnen worden. Een leerprogramma om vertrouwd te raken met een platform, een omgeving, een spel,

10 Lijst met afkortingen Afkorting CMS Exp FAQ PBL WYSIWYG Verklaring Content Management System Experience Frequently Asked Questions (veelgestelde vragen) Points, Badges en Leaderboards What You See Is What You Get, een module op Drupal die instaat voor eenvoudige opmaak voor de onderhoudende gebruiker.

11 Lijst met afbeeldingen FIGUUR 1 WERKERVARING FIGUUR 2 HOME FIGUUR 3 CONTENT FIGUUR 4 - INLEIDING INFORMATIE PAGINA FIGUUR 5 - CONTENT INFORMATIEPAGINA FIGUUR 6 - DOCUMENTENPAGINA FIGUUR 7 - CONTACTPAGINA FIGUUR 8 - INFORMATIE VAN DE GEBRUIKER (ORIGINEEL DESIGN) FIGUUR 9 - INFORMATIE VAN DE GEBRUIKER (NIEUW DESIGN) FIGUUR 10 - HOME (ORIGINEEL DESIGN) FIGUUR 11 HOME INFORMATIE GEBRUIKER (NIEUW DESIGN) FIGUUR 12 - HOME INFORMATIE GEBRUIKER UITGEKLAPT (NIEUW DESIGN) FIGUUR 13 - HOME (NIEUW DESIGN) FIGUUR 14 - OWAES-ITEMS (ORIGINEEL DESIGN) FIGUUR 15 - OWAES-ITEMS (NIEUW DESIGN) FIGUUR 16 - ACTIVITEIT TOEVOEGEN FIGUUR 17 - PROFIELPAGINA FIGUUR 18 - PROFIELPAGINA AANPASSEN FIGUUR 19 - QUESTS FIGUUR 20 - GRAFIEK EXPERIENCE FIGUUR 21 - BADGE FIGUUR 22 - AANRADEN ITEMS/QUEST FIGUUR 23 - ADMIN TABEL MET INDICATOREN FIGUUR 24 OVERZICHT ADMIN-PAGINA FIGUUR 25 - INSTELLINGEN PROFIEL FIGUUR 26 OPTIES RAPPORTEREN GOOGLE FIGUUR 27 - OPTIES RAPPORTEREN FACEBOOK FIGUUR 28 - OPTIES NA HET RAPPORTEREN... 52

12 12

13 Inhoudsopgave Woord vooraf... 5 Abstract... 7 Verklarende woordenlijst... 9 Lijst met afkortingen Lijst met afbeeldingen Inhoudsopgave Inleiding OWAES CMS Informatieve website Gamification platform Home Werkaanbiedingen Opleidingen Huren & verhuren Design Design informatieve website Design van het platform Gamification Geschiedenis Wat is gamification Wat is een game? Internal Gamification External Gamification Elementen Waarom gamification Game aspecten Game aspecten in gamification Gevaren Verschillende motivators Pointsification Exploitationware Wettelijke problemen Stimuleren & motiveren

14 4.1 Verschillende soorten metingen Kwantitatieve metingen Kwalitatieve metingen De skill levels The Newbie The Beginner The Intermediate The Expert Gamification Platform Voorbereiding Stagnatie van de gebruikers Badges Bedrijven Opvolgingssysteem Sociaal platform Verschil Owaes met andere platformen Waarop moet Owaes letten? Systemen van andere sociale media Besluit Arne Thomas Bronnenlijst Bijlagen

15 1 Inleiding Owaes (Online WerkActivatie Ecosysteem) is een project van Geert Hofman gesponsord door Esf. Het project moet ervoor zorgen dat 50-plussers sneller terug aan job geraken. Dit door hun zelfvertrouwen terug op te bouwen, hen heroriënteringsmogelijkheden aan te bieden en hun aan te zetten tot werken vanuit een ernstig spelcontext. Op het moment dat wij in het project kwamen was de studieronde achter de rug. En was de ontwikkeling van de site en platform begonnen. Er was nog niets van gamification ontwikkeld of onderzocht. Gamification is nieuw en wordt nog niet al te veel toegepast. Het is een handige tool om werk aangenamer te maken en gebruikers aan je platform te binden. Het idee is om spelelementen te gebruiken in websites. De vraag is welke spelelementen moet je gebruiken en hoe moet je ze toepassen? Meestal worden de spelelementen op de verkeerde manier gebruikt en verkrijg je een negatief effect. In deze bachelorproef wordt het designproces besproken. Later komt het concept gamification en hoe het is toegepast uitgebreid aan bod. 15

16 16

17 2 OWAES OWAES staat voor Online WerkActivatie EcoSysteem en wordt soms ook geschreven als OWAES(E). Hierin wordt een verwijzing gelegd naar een oase omdat OWAES een oase wil creëren voor 50-plussers en bedrijven. Er wordt gezorgd voor vraag en aanbod op vlak van werk, opleidingen of andere diensten. Zo kunnen 50-plussers die momenteel werkloos zijn toch aan het werk en met dit werk kunnen credits verdiend worden. Met deze credits kunnen later opleidingen gekocht worden en hiermee helpt OWAES de 50-plussers uit de neerwaartse spiraal van werkloosheid. 2.1 CMS Drupal werd verkozen boven andere CMS en omdat dit makkelijk te beheren is als eigenaar. Mensen die geen kennis hebben van HTML kunnen zonder enige moeite pagina s aanpassen en updaten, terwijl het als developer eenvoudig te stijlen valt. Enkele modules van Drupal zorgen voor een eenvoudige opmaak voor de eigenaar (zoals WYSIWYG) terwijl modules als FAQ, Webforms en Views veel werk besparen voor de ontwikkelaar. 2.2 Informatieve website Het opzetten van een informatieve website over wat OWAES inhoudt, was de eerste stap. Hierin werd gekozen voor Drupal als Content Management System (CMS). Op deze informatieve website worden potentiële gebruikers ingelicht over wat OWAES inhoudt. Vragen zoals Wat is gamification? en Wat is het creditsysteem? komen hier aan bod. Ook is er een volledige sectie gewijd aan het definiëren van de doelgroepen van OWAES. Deze doelgroepen zijn: 50-plussers, de bedrijven en de dienstverleners (zoals bijvoorbeeld de VDAB). Wanneer de vragen van de gebruiker hiermee nog niet opgelost werden, kan men altijd terecht bij een veelgestelde vragen -sectie, waar men ook zelf een vraag kan stellen. 2.3 Gamification platform De kernactiviteit van het platform wordt opgedeeld in 3 secties: Werkaanbiedingen Opleidingen Verhuren van materiaal Naast deze aanbiedingen is het ook mogelijk om interactie te hebben met elkaar door middel van het toevoegen als vriend of volgen van een onderneming. Vrienden kunnen elkaar contacteren terwijl het volgen enkel nieuwe aanbiedingen toont van de gevolgde ondernemingen op uw gepersonaliseerde homepagina. Iedere gebruiker start met een vast aantal credits. Het is de bedoeling om niet zonder credits te geraken, maar er ook niet te veel te hebben. Credits worden als 50-plusser uitgegeven door opleidingen te volgen en kunnen verdiend worden door 17

18 opdrachten uit te voeren. Door deze activiteiten zullen ook de 4 indicatoren stijgen, deze indicatoren zijn: Fysiek Welzijn Kennis Sociaal Deze indicatoren zakken iedere dag 1%, maar kunnen snel aangevuld worden door opleidingen te volgen in deze indicatoren Home De homepagina is volledig gepersonaliseerd aan de noden en behoeftes van de gebruiker. Hierin worden zijn/haar indicatoren, credits, quests, statistieken en interessante opdrachten of opleidingen weergegeven. De indicatoren geven weer hoe de gebruiker momenteel scoort op sociaal, fysiek, welzijn of kennis. Deze indicatoren kunnen verworven worden door opdrachten uit te voeren of opleidingen te volgen Werkaanbiedingen Werk wordt vooral aangeboden door bedrijven, maar ook de 50-plussers kunnen dit eventueel aanbieden. De opdrachtgever zal hierbij credits uitgeven aan de werknemer. De opdrachtgever zal in de meeste gevallen een bedrijf zijn (bijvoorbeeld TVH) en de werknemer zal dan in de meeste gevallen een 50-plusser zijn. Bij het aanmaken van een werkervaring kan gekozen worden hoeveel credits worden uitgegeven aan de werknemer en welke indicatoren hij krijgt voor het uitvoeren. Figuur 1 Werkervaring Opleidingen Na het verdienen van deze virtuele munt, is het ook de bedoeling deze terug uit te geven aan onder andere een opleiding. Zo krijgen de 50-plussers de mogelijkheid om hun kennis bij te schaven en indien ze de opportuniteit krijgen, ook hierin werk te gaan zoeken. Voor een opleiding zal de maker van de opleiding credits verdienen, in tegenstelling tot een werkervaring. Bij een opleiding spelen de indicatoren ook een grotere rol aangezien deze meer waarde hebben bij een opleiding. Terwijl een 18

19 indicator maar met 1% stijgt voor een werkaanbieding zal iedere indicator bij een opleiding met een hogere waarde stijgen Huren & verhuren Het is als laatste ook mogelijk om bijvoorbeeld garages of apparatuur ter beschikking te stellen voor andere personen, in ruil voor credits. 2.4 Design Eén van onze eerste taken was het uitdenken van een nieuw design voor de informatieve site en het platform. Het oude design was simplistisch en sprak de mensen niet genoeg aan Design informatieve website Voor het design waren er geen beperkingen opgelegd. Alleen het logo mocht niet te veel veranderen. Er is gekozen om de kleuren van het logo te gebruiken: geel en blauw. Hierdoor krijgt de site een fris en enthousiast uiterlijk. Het concept draait rond puzzelstukjes. Omdat de bedrijven, dienstverleners en de 50-plusser elkaar moeten helpen, de handen in elkaar slaan. Dit is gedaan door de content te splitsen met lijnen en de hoeken van puzzelstukjes te gebruiken. Doordat er ook met hexagonen wordt gewerkt zijn de hoeken scherp gemaakt. Op de home pagina worden de 2 belangrijkste groepen weergegeven: de bedrijven en 50-plussers. Het zullen zij zijn die elkaar moeten vinden en die overtuigd zullen moeten worden om dit platform te gebruiken, zodat dit project kan slagen. De dienstverleners zullen de 50-plussers hierin begeleiden. Figuur 2 Home 19

20 Hieronder ziet u een voorbeeld hoe de content op de rest van de pagina s onderscheiden zal worden. Op deze pagina zullen de partners komen te staan die hebben meegewerkt aan dit project. Figuur 3 Content De informatiepagina s voor bedrijven, 50-plussers en dienstverleners begint meestal met een inleiding en afbeelding. En daarna blokken met tekst en titels in, het is wel mogelijk in de tekst zelf nog afbeeldingen toevoegen. In de inleiding wordt de afbeelding links weergeven met de titel en tekst rechts uitgelijnd. Bij de content komt de afbeelding midden in de tekst te staan, tenzij de afbeelding groot genoeg is. De admin kan ervoor kiezen om bepaalde woorden in het vet te zetten. Zo kunnen gebruikers snel zien waarover de tekst gaat en bepalen of het de moeite is om verder te lezen. Figuur 4 - Inleiding informatie pagina 20

21 Figuur 5 - Content informatiepagina De documentenpagina ziet u alleen als u speciale rechten hebt. Hier kunnen partners zelf hun folders of presentaties toevoegen. Hier is ervoor gekozen om de afbeelding per item van kant te laten wisselen. En aan de hand van het type document wordt het gepaste icoontje weergegeven. Figuur 6 - Documentenpagina 21

22 Op de contact-pagina is het mogelijk de admins te contacteren. Hier kun je ook aanduiden of je interesse in het project hebt en wat uw functie zou zijn. Onderaan de pagina worden de partners ook weergeven samen met de contactpersoon. Figuur 7 - Contactpagina Tools Voor het ontwerpen van dit design werd er gebruik gemaakt van Adobe Photoshop. Er werd gekozen voor Photoshop voor het gebruik van Layer comps en hulplijnen. We gebruiken Photoshop ook al heel onze NMCT-carrière en het is een industriestandaard. Implementatie Voor het implementeren van ons design is ervoor gekozen een custom theme aan te maken. Het is gebaseerd op het Bootstrap-theme. Zodat de site makkelijker vorm te geven is voor verschillende resoluties. 22

23 In Drupal is het moeilijk om zelf HTML te schrijven om zo classes en div s toe te voegen. Om dit toch te doen werden sommige php-files aangepast. De meeste problemen waren bij het positioneren van de driehoeken. Die bestaan uit 2 figuren opgevuld met een witte kleur. Die worden dan gepositioneerd op een volle gele lijn. Het probleem was dat door de verschillende content-types niet op elke pagina dezelfde classes beschikbaar waren. Uiteindelijk werd er een css-class gevonden dat op alle pagina s voorkwam Design van het platform Ook hier waren er geen limiteringen. De stijl moest natuurlijk overeenkomen met de informatieve website. Dit wordt gedaan door dezelfde kleuren te gebruiken en vooral het geel overal te laten terugkomen. De onderverdeling van de content met driehoeken is weggelaten in dit design. In de plaats wordt bovenaan het stukje (waar de gegevens van de gebruiker staan) laten samenkomen met het menu in een punt. Hieronder wordt de vorige lay-out getoond en de belangrijkste pagina s worden vergeleken. Informatie van de gebruiker Op het platform is de informatie van de gebruiker belangrijk. De gebruiker moet op elke pagina kunnen zien hoe hij ervoor staat inzake van indicatoren en credits. Hieronder ziet u hoe het origineel was ontworpen. Figuur 8 - Informatie van de gebruiker (Origineel design) In het nieuwe design werd de waardemeter vervangen door een icoontje. Dit icoontje verandert van kleur aan de hand van hoe goed of hoe slecht de gebruiker 23

24 bezig is. Dit is duidelijker dan het vorige waar het niet altijd duidelijk was wat slecht of goed was. Ook de indicatoren werd een meer prominente plaats gegeven. Omdat dit de belangrijkste informatie is voor de gebruiker. Nu er ook met levels gewerkt wordt, is er uiteraard ook een experience-bar toegevoegd en het huidige level. Zo kan de gebruiker altijd zijn vooruitgang bekijken. De profielfoto en de badges werd weggelaten omdat dit niet tot de essentie van het platform behoord. De badges kan je altijd terug vinden onder het tabblad Lijsten-> Badges en op je profiel. Het menu is opnieuw in de stijl van de informatieve website ontworpen. Hier hebben we de informatie van de gebruiker zo laten aansluiten op het menu zodat we opnieuw een punt bekomen. Figuur 9 - Informatie van de gebruiker (Nieuw design) Home Op de oude versie van de home is er nog niet veel te zien omdat het gamification gedeelte op dat moment nog bedacht moest worden. Er is wel een kaart te zien gecentreerd op jouw woonplaats. Zo kan je opdrachten bekijken die bij jouw in de buurt zijn. Figuur 10 - Home (Origineel Design) Voor het nieuwe design van de home-pagina werd er nagedacht welke informatie het belangrijkst is voor de gebruiker. Hieronder ziet u het uiteindelijke resultaat. 24

25 Er is voor gekozen om met uitklapbare blokken te werken. Zo is de belangrijkste informatie direct zichtbaar en kan men kiezen om meer details te zien. Als eerste blok is voor de informatie van de gebruiker gekozen, maar dan meer gedetailleerd. De vooruitgang sinds het vorige bezoek aan de site is direct zichtbaar bij het level en de indicatoren. Figuur 11 Home Informatie Gebruiker (Nieuw design) Als men dit blok uitklapt krijgt men de vooruitgang in grafieken te zien en de credits opnieuw in een creditmeter. Figuur 12 - Home Informatie Gebruiker Uitgeklapt (Nieuw design) 25

26 De kaart werd behouden. Er is wel een filter toegevoegd en de pop-up is opnieuw ontworpen. Er zijn ook blokken toegevoegd voor de quests, notificaties, recente activiteit en voorstellen voor bepaalde activiteiten. De voorstellen zijn gebaseerd op wat de gebruiker op dat moment het meest nodig heeft (bv: fysiek). Als men de blokken van de quests uitklapt krijgt men de uitleg van deze quest te zien. Figuur 13 - Home (Nieuw design) 26

27 Werkervaring, Opleiding Delen Op deze pagina s staan de items in een lijst. Op de originele site is er nog een filter voorzien. Waar je kon filteren op basis van de indicatoren en een knop om een item toe te voegen. Figuur 14 - Owaes-items (Origineel design) In het nieuwe design is de filter weggelaten en de knop om een item toe te voegen duidelijker gemaakt. De items worden automatisch gefilterd op basis van wat de gebruiker het meest nodig heeft. Verder werd er meer informatie in de blokken gestopt en gewerkt met iconen. De indicatoren die je kan verdienen werd een meer prominente plaats gegeven. In elk blok wordt het icoon weergegeven van de pagina waarop je zit. Zo weet de gebruiker altijd welke soort items hij aan het bekijken is. 27

28 Figuur 15 - Owaes-items (Nieuw design) Activiteit toevoegen Het toevoegen van een activiteit moet zo vlot mogelijk gebeuren en zo intuïtief mogelijk aanvoelen. Bij het klikken op een slot in de kalender wordt hierbij een nieuwe item aangemaakt in de onderstaande lijst, waarin de gebruiker de tijd kan invullen. Wanneer de gebruiker in de standaardrij een uur invult, zal deze in alle andere rijen ook ingevuld worden om zo niet iedere rij manueel te moeten invullen. Figuur 16 - Activiteit toevoegen 28

29 Profielpagina Ook de profielpagina moest zo natuurlijk mogelijk aanvoelen. Alle settings (behalve accountsettings) kunnen aangepast worden vanop de profielpagina. Figuur 17 - Profielpagina Figuur 18 - Profielpagina aanpassen 29

30 30

31 3 Gamification Gamification... Het is overal om je heen zonder het te beseffen. Grote platformen zoals Foursquare, LinkedIn en Khan Acadamy gebruiken het, maar wat is het precies? Ross Smith is een van de leiders in het testing team van Microsoft en hij had een probleem. Microsoft Windows en Office worden dagelijks door miljoenen mensen gebruikt. Deze systemen werden gecreëerd door honderden developers, daarbij nog eens aangepast en geüpdatet over een periode van enkele jaren en aangepast voor iedere belangrijke taal over de hele wereld. In dit geval zijn bugs en andere errors onvermijdelijk en de testing group is hierbij verantwoordelijk om deze fouten te vinden. Dit is een imposante taak en een geautomatiseerd systeem kan hier niet worden gebruikt. De enige manier om zeker te weten dat de fouten gevonden worden, is alles manueel door een even imposant doelpubliek uit te testen. Het is daarbij niet alleen de grootte van de taak dat het probleem is; het nauwgezet testen van software is in de meeste gevallen gewoon duf, geestdodend en oninteressant. Zelfs voor een bedrijf als Microsoft is het niet gemakkelijk om zo n groot doelpubliek aan te spreken die hiervoor instemmen. In deze ernstige business zou je haast niet denken dat fun een factor kan zijn tot de oplossing. En hoe heeft mr. Smith dit probleem kunnen oplossen? Door games. Ross Smith was met zijn testing group een van de pioniers in het concept om het testing proces om te zetten in een aangrijpende en aangename ervaring voor duizenden van Microsofts werknemers. Smith s testing team heeft Microsoft werknemers van over de hele wereld gerekruteerd om Windows 7 dialoogvensters te herzien in hun vrije tijd, zonder ervoor betaald te worden. Ze kregen punten voor ieder verdacht stukje taal dat men tegenkwam en zij werden volgens deze punten gerangschikt in een leaderboard. Alles samen hebben 4500 vrijwillige werknemers een half miljoen dialoogvensters herzien en 6700 bugs gerapporteerd, resulterende in honderden correcties. Niet alleen deden deze mensen het gratis, een groot nummer van de deelnemers omschreven het als aangenaam en zelfs verslavend. Wat Ross Smith hier realiseerde was, zonder dat hij het besefte, gamification. 1 1 WERBACH, K., & HUNTER, D. (N.D.). FOR THE WIN: HOW GAME THINKING CAN REVOLUTIONIZE YOUR BUSINESS. (VOL. 2012). PHILADELPHIA: WARTON DIGITAL PRESS. 31

32 3.1 Geschiedenis Everything in the future online is going to look like a multiplayer game Eric Schmidt, Google (2009) De term gamification werd geïntroduceerd in 2002 maar de interesse begon maar te komen eind In 2011 werd de term populair door de introductie van Yahoo!7 s mobiele app genaamd Fango. Met deze app werd het mogelijk om als TV-kijker interactie te hebben met het TV-programma door middel van badges en check-ins. 3 In 2010 deed Jane McGonical een TED Talk rond gamification genaamd Gaming can make a better world. In deze Talk werd uitgelegd hoe games zoals World of Warcraft het mogelijk zouden maken om problemen in het echte leven op te lossen. Na de TED Talk van Jane McGonical kwamen snel meer Talks, onder andere door Seth Priebatsch ( The game layer on top of the world ), Daphne Bavelier ( Your brain on video games ) en nog één door Jane McGonical zelf ( The game that can give you 10 extra years of life ). In deze laatste Talk legt Jane McGonical uit hoe haar eigen game haar redde uit haar ziekte en creëerde later een platform rond dit spel die zij verzonnen had om ook anderen te helpen. 456 Sindsdien worden grote platformen uit de grond gestampt waarin gamification centraal staan, denk maar aan Foursquare, StackOverflow, Khan Acadamy en Codeschool. Maar ook LinkedIn heeft elementen van games geïmplementeerd, zoals de balk bij het vervolledigen van uw profiel. 2 GOOGLE TRENDS - WEB SEARCH INTEREST - WORLDWIDE, PRESENT. (N.D.). RETRIEVED APRIL 29, 2014, FROM 3 WERBACH, K., & HUNTER, D. (N.D.). FOR THE WIN: HOW GAME THINKING CAN REVOLUTIONIZE YOUR BUSINESS. (VOL. 2012). PHILADELPHIA: WARTON DIGITAL PRESS. 4 THE GAME LAYER ON TOP OF THE WORLD. (N.D.). RETRIEVED FROM 5 THE GAME THAT CAN GIV E YOU 10 EXTRA YEARS OF LIFE. (N.D.). RETRIEVED FROM ARS_OF_LIFE 6 YOUR BRAIN ON VIDEO GAMES. (N.D.). RETRIEVED FROM 32

33 3.2 Wat is gamification When you have a game like platform where knowledge is applied, knowledge becomes a resource. The more you know, the better you are at the game. Eugene Sheely (2013) Gamification is design that places the most emphasis on the human in the process. In essence, it is human-focused design. Yu Kai Chou, founder of Octalysis gamification framework (2014) Wat is een game? A game is a closed, formal system that engages players in a structured conflict and resolves in an unequal outcome. Tracy Fullerton, Chris Swain en Steven Hoffman (2008) Een spel (zijnde een videogame of een klassiek bordspel) heeft verschillende eigenschappen waardoor dit gedefinieerd kan worden als een spel: Pre-lusory goals : er zijn voorgedefinieerde doelen (goals) Constitutive rules : een spel bevat strikte regels Lusory attitude : de spelers houden zich vrijwillig aan de regels omdat men om het spel geeft Obstacles : Het vrijwillig overkomen van nodige of onnodige obstakels in het spel Deze factoren maken het spel en resulteert in wat men noemt the magic circle. Dit wil zeggen dat ieder spel zijn eigen grenzen heeft. Letterlijke grenzen zoals een voetbalmatch of figuurlijke grenzen zoals het einde van de speelwereld in een videospel. Binnen deze grenzen tellen de regels van het spel en niet die van de echte wereld GAMIFICATION. (2014, APRIL 18). IN WIKIPEDIA, THE FREE ENCYCLOPEDIA. RETRIEVED FROM 8 MAGIC CIRCLE (VIRTUAL WORLDS). (2014, APRIL 13). IN WIKIPEDIA, THE FREE ENCYCLOPEDIA. RETRIEVED FROM

34 3.2.2 Internal Gamification Het initiatief van Ross Smith is een voorbeeld van internal gamification. In dit geval wordt gamification gebruikt om de interne bedrijfsprocessen te stimuleren. Internal gamification is te herkennen aan twee factoren: De deelnemers zijn een deel van een community, dit zijnde het bedrijf; Het gamification onderdeel moet interactie hebben met het management van het bedrijf. Voorbeeld van Ross Smith: Deelnemers: alle gebruikers en testers die hebben meegedaan aan de proef; Interactie: het scoreboard gaf een weergave van deze deelnemers External Gamification External gamification houdt in dat er een verband is met uw klanten. Deze applicaties zijn dus meestal gedreven door doelstellingen met betrekking tot de marketing. Een voorbeeld van external gamification is Foursquare. Foursquare, gemaakt door Dennis Crowley en Naveen Selvadurai, had een voorganger genaamd Dodgeball. Het was exact hetzelfde idee zoals we Foursquare vandaag de dag kennen, maar zonder de elementen van gamification. Wanneer Dennis en Naveen klaar waren met hun concept werd dit overgekocht door Google, maar Dodgeball kwam niet van de grond en ging dan een diepe ondergang tegemoet. Dennis en Naveen kwamen daarna op het idee om badges, een leaderboard en punten te integreren en zo een nieuw concept te bekomen wat later bekend zal worden als Foursquare. Foursquare werd snel heel populair door deze twist, terwijl Dodgeball een stille dood tegemoet ging Elementen In every job that must be done, there is an element of fun. You find the fun and snap! It s a game. Mary Poppins (1964) Er zijn meerdere game-elementen waarmee gebouwd kan worden aan een groter iets, dit zijnde een platform, een programma of gewoon een campagne. Het is niet zo dat gamedesign een kookboek is, waar elementen samengevoegd worden en men een perfect recept krijgt, alles moet afgewogen worden en verschillende elementen resulteren in verschillende resultaten. Het is niet omdat gameelementen toegevoegd worden aan een basisconcept, dat dit een gamified concept wordt. In tegendeel: zonder enige voorkennis kan het tegenovergestelde verwezenlijkt worden (zie 3.4 Gevaren). Vergeet niet dat een gamified platform verschillend is aan een volledig functioneel spel uitbouwen. Het is slechts enkele elementen vanuit games implementeren en deze fouten op een correcte manier behandelen. 9 WERBACH, K., & HUNTER, D. (N.D.). FOR THE WIN: HOW GAME THINKING CAN REVOLUTIONIZE YOUR BUSINESS. (VOL. 2012). PHILADELPHIA: WARTON DIGITAL PRESS. 34

35 Enkele voorbeelden van elementen die gebruikt kunnen worden in een platform 10 : Leaderboard / Scoreboard Puntensysteem: Experience Points (exp) Economiesysteem: credits, gold,... Levels Rewards Achievements / badges Quests Waarom gamification Wetenschappelijk onderzoek naar het menselijk gedrag, zowel psychologisch als fysiologisch, bevestigt dat een spel een zeer meeslepende kracht heeft op de gebruiker. Om te achterhalen waarom men voor gamification zou opteren, moet men eerst achterhalen waarom games zo verslavend zijn. Er zijn verschillende soorten games zoals een MMORPG, actie, shooter, Elk met zijn eigen doelpubliek. Spelers van een MMORPG zullen eerder het rollenspel of het sociaal aspect fijn vinden, terwijl mensen die actie games spelen voldoening halen uit het vervolledigen van het spel. Waarom mensen voldoening halen uit games en de game aspecten is een psychologisch aspect, het toepassen van deze aspecten op een platform of omgeving is waar gamification om draait Game aspecten High Score Of men nu van games houdt of niet, de high score is de meest bekende verslavingsfactor in een spel, die tevens ook vaak gebruikt wordt in gamification. Wanneer de speler gepassioneerd raakt met zijn eigen of iemand anders high score te verslaan, kan deze persoon hier uren in verliezen. Beating the game Behalve in MMORPG s is ook het verlangen om een spel uit te spelen een onderdeel om te blijven spelen. In MMORPG s is dit het levelen van zijn personage. Hoe hoger het level van de speler, hoe dichter hij bij het maximum level is. In de meeste games worden nog extra beloningen uitgegeven bij het maximum level waarmee de gebruiker zich dan kan van andere spelers. Het feit dat een MMORPG geen einde heeft, zorgt er dan weer voor dat het extra verslavend is. 10 ZICHERMANN, G., & CUNNINGHAM, C. (N.D.). GAMIFICATION BY DESIGN, IMPLEMENTING GAME MECHANICS IN WEB AND MOBILE APPS. O REILLY. 35

36 Rollenspel Een rollenspel staat ook bekend buiten de wereld van games. Er zijn ontelbare fora en chat websites die enkel rond het rollenspel draaien. Een rollenspel in games zorgt ervoor dat men méér kan dan gewoon spelen. Men kan zich inleven in het gecreëerde personage: uiterlijk, achtergrond, afkomst, naam, kan men zelf beslissen en zich hiernaar leven in het spel. Dit zorgt ervoor dat men ook emotioneel gehecht raakt aan het personage en het stoppen moeilijker maakt. Verkenning Om uit te leggen waarom de verkenning van een wereld verslavend werkt, kan men ook in de echte wereld rondkijken. Mensen vinden het opwindend om iets nieuws te ontdekken. Stel nu eens voor dat dit ontdekken gebeurd in een onbekende, fantasierijke wereld. Relaties Op online games kan men anderen leren kennen (al dan niet in een rollenspel). Wanneer men gehecht raakt aan deze personen zal dit ook een factor zijn die meespeelt in de drang om terug te keren naar het spel Game aspecten in gamification Deze 5 factoren kunnen gebruikt worden in een gamification platform om interesse op te wekken bij de gebruiker en ervoor te zorgen dat de gebruiker ook effectief terugkomt. High scores zijn de meest voor de hand liggend, wanneer de gebruiker een score kan verzamelen kan deze score in een leaderboard geplaatst worden om onderlinge concurrentie op te wekken. Ook relaties kunnen gestimuleerd worden wanneer het platform enigszins sociaal is opgesteld. Een voorbeeld voor een verkennend gamification platform is Foursquare. Mensen gaan overal ter wereld zich inchecken op de meest bizarre plaatsen en gaan er eventueel mee pronken bij hun vrienden (sociaal). Zamzee, een platform om kinderen meer in beweging te brengen, zorgt ervoor dat lopen een avontuur wordt. Met gepersonaliseerde uitdagingen en een eigen personage is dit het voorbeeld voor een rollenspel, men leeft zich in het personage. Als laatste hebben we beating the game, wat niet zo voor de hand liggend is in gamification, maar toch gebruikt wordt. Het platform Khan Acadamy of Codeschool zijn hier voorbeelden van. Mensen worden gestimuleerd om een opleiding te volgen op het platform en krijgen tijdens de opleiding voldoening door badges en dergelijke. Het is maar wanneer men een opleiding vervolledigd dat men kan spreken van beating the game. Ook al is het volledige spel (dit zijnde het platform) niet uitgespeeld, het heeft een gevoel van voldoening en overmeestering, men heeft iets bereikt WHAT MAKES A VIDEO GAME ADDICTIVE? RETRIEVED APRIL 29, 2014, FROM GAME-ADDICTION.ORG/WHAT-MAKES-GAMES-ADDICTIVE.HTML 36

37 3.4 Gevaren Verschillende motivators Met gamification speel je in op verschillende soorten motivators. Hieronder worden de 2 soorten motivators uitgelegd die belangrijk zijn bij gamification. Intrinsieke motivators Intrinsieke motivatie draait rond interne motivatie. Dit wil zeggen dat de motivatie komt van een bepaalde interesse of genoegen in de taak zelf. De taak wordt uitgevoerd omdat het leuk is of omdat het interesse opwekt. Met gamification wil je bereiken dat Gebruikers opdrachten uitvoeren omdat ze het willen en niet omdat ze er een bepaalde beloning voor krijgen. Zo zullen de gebruikers blijven terugkomen. Extrinsieke motivators Bij extrinsieke motivatie draait het allemaal rond de beloning of de uitkomst. Je voert de taak uit om iets te bereiken en niet omdat de taak leuk of interessant is. Bij gamification dreigt het gevaar dat je de gebruikers te veel gaat belonen met punten of beloningen dat ze in het echt kunnen gebruiken (korting in een webshop). Zo lang de beloningen blijven komen en blijven stijgen is er geen probleem. Maar als de beloning hetzelfde blijft of uiteindelijk ophoud, dreigt het gevaar dat de gebruiker interesse verliest. En dus niet meer terugkomt naar het platform of de website Pointsification De term Pointsification komt van een Britse game-ontwerper Margaret Robertson: What we re currently terming gamification is in fact the process of taking the thing that is least essential to games and representing it as the core of the experience. (2010). Hiermee bedoelt ze dat punten, badges en leaderboards (PBL) niet de belangrijkste elementen zijn van games. Het is maar een klein onderdeel van wat een game goed maakt. Te veel systemen leunen alleen maar op punten, badges en leaderboards. Deze systemen maken alleen maar (of voor het overgrote deel) gebruik van extrinsieke motivators. Door gebruik te maken van pointsification kan het zijn dat het engagement in het begin zeer snel stijgt. Maar uiteindelijk gaan de mensen minder en minder geïnteresseerd zijn, alleen een klein deel zal gebruik blijven maken van het gamified systeem. Pointsification is geen gamification. Gamification is meer dan alleen punten, leaderboards en badges. Je kan die elementen niet zomaar ergens gebruiken en dan beweren dat je een gamified platform hebt. Het probleem zit bij mensen die denken dat gamification een snelle oplossing is en dat gamification alleen maar bestaat uit PBL. Een mooi voorbeeld van pointsification is Foursquare. Foursquare werd immens populair door het gebruik van pointsification. Je kreeg badges door plaatsten te 37

38 bezoeken, en als je de plaats het meest bezocht van je vrienden werd je burgemeester. Zij gebruikten die initiële boost die pointsification opwekt om razend populair te worden bij de mensen. Om zo hun bedrijf snel te laten groeien. Maar in 2012 veranderden ze hun design. Ze hadden genoeg gebruikers bereikt om hiermee geld te verdienen. De game-elementen werden minder belangrijk en een beetje weggestopt Exploitationware Exploitationware is de naam die gegeven is aan de kritiek op het feit dat gamification te effectief is. Gamification kan gebruikt worden om mensen hun gedrag te laten aanpassen. Meestal wordt het gebruikt om mensen hun gedrag ten goede te veranderen. Maar het omgekeerde kan ook gebeuren. Mensen taken laten uitvoeren die ze niet willen uitvoeren. Hier ligt het gevaar vooral bij bedrijven. Zij kunnen hun werknemers bijvoorbeeld belonen met punten en badges in plaats van met geld of betere werkomstandigheden. De werknemers worden in feite opgelicht door hun werkgever. De werkgever creëert het idee dat ze een waardevolle beloning krijgen maar in feite krijgen ze iets dat geen waarde heeft. Het probleem ligt niet bij gamification maar bij de manier waarop gamification gebruikt wordt. Meestal wordt gamification met goede bedoelingen gebruikt maar verkeerd uitgevoerd. Waardoor je het tegenovergestelde effect verkrijgt. Een mooi voorbeeld hiervan is het systeem dat Disneyland gebruikte in hotels in Anaheim, California. In de ruimte waar de werknemers de was moesten doen werden monitoren opgehangen. Daar konden de werknemers zien hoe snel ze waren in vergelijking met hun medewerkers. Het effect was dat werknemers sneller werkten. Je zou kunnen zeggen dat het doel bereikt was. Maar aan welke prijs? De relaties tussen werknemers werd competitiever, er was meer stress. Sommige werknemers sloegen zelfs hun pauzes over om hun score wat op te krikken. Disney moet zichzelf afvragen of de verhoging van de efficiëntie, de ontevredenheid bij de meeste werknemers waard is. Mensen hebben vaak schrik van onbekende zaken, dit is hier het geval. Ja, het is waar dat gamification kan gebruikt worden om mensen te manipuleren. Maar dit is niet de bedoeling van gamification. De bedoeling is om op lange termijn mensen aan je te binden die graag voor je werken of graag van je systeem gebruik maken. Het moet ervoor zorgen dat je systeem leuker is om te gebruiken. Gamification is iets nieuws en we moeten gewoon nog leren hoe we het op de juiste manier moeten gebruiken WERBACH, K., & HUNTER, D. (N.D.). FOR THE WIN: HOW GAME THINKING CAN REVOLUTIONIZE YOUR BUSINESS. (VOL. 2012). PHILADELPHIA: WARTON DIGITAL PRESS. 38

39 3.4.4 Wettelijke problemen Privacy Het kan zijn dat je dankzij gamification veel persoonlijke informatie te weten komt over de gebruiker. Via hun profiel of het gebruik van uw platform. Want alles wat een persoon doet op het platform kan worden bijgehouden en geanalyseerd. In Europa zijn er strenge regels wat je kan en mag doen met persoonlijke informatie. In Amerika zijn ze een pak minder streng. Het beste wat je kan doen is een uitgebreid privacybeleid uittekenen. Hierin zal staan welke data je verzamelt, bijhoudt en wat je ermee gaat doen. Misleidende marketing Het probleem met gamification en marketing is dat games niet aanvoelen als reclame. Je kan perfect gamification gebruiken voor reclame. Maar dan moet het voor de gebruiker duidelijk zijn dat het gamified platform/website bedoeld is als reclame. Anders kan dit aanzien worden als misleidende marketing. In sommige landen moet je hiermee oppassen. Intellectuele eigendom Een gamified platform moet oppassen met het gebruik van badges. Je mag niet zomaar badges van een ander platform gebruiken. Je moet ook je eigen creaties beschermen. Het kan van pas komen om je eigen platform te patenteren. Zorg ervoor dat je eigendom goed beschermd is. Virtuele eigendomsrechten Wie is de eigenaar van de elementen die gebruikers kunnen verdienen via het gamified systeem (badges, titels,.)? Dit probleem is naar boven gekomen met virtuele werelden zoals Second Life. Zijn de gebruikers eigenaar van de elementen die ze er bouwen of is het spel nog altijd eigenaar? Meestal hebben rechtbanken bepaald dat zo n elementen contractuele licenties zijn van de spelontwikkelaar. Dus de spelers hebben geen eigendomsrechten. Gokken & sweeptstakess Rond gokken en sweeptstakes bestaan vele wetten. Het hangt van de soort beloning die het gamified systeem geeft. Met badges, punten of je eigen dienst (kop koffie in een café) als beloning is er geen probleem. Je moet echter oppassen met beloningen die geld waard zijn. Vanaf dan ken je gamified systeem worden beschouwd als een sweepstake, loterij, gokken of een wedstrijd. Elk van deze is onderworpen aan verschillende wetten waarmee je rekening moet houden. 39

40 Virtueel geld Virtueel geld kan een probleem zijn omdat het verbonden is met echt geld. Echt geld is streng gereguleerd om fraude, diefstal, manipulatie en andere problemen tegen te gaan. Voordat je hiermee begint is het aangeraden om een advocaat te raadplegen en informatie in te winnen wat je exact mag en niet mag WERBACH, K., & HUNTER, D. (N.D.). FOR THE WIN: HOW GAME THINKING CAN REVOLUTIONIZE YOUR BUSINESS. (VOL. 2012). PHILADELPHIA: WARTON DIGITAL PRESS. 40

41 4 Stimuleren & motiveren Hoe gebruikers stimuleren en motiveren om actief te zijn op een sociaal platform? Om het antwoord op deze vraag te verkrijgen moet men zich de vraag stellen hoe gaan de gebruikers om met mijn platform?. Hiervoor zijn twee verschillende soorten metingen opgesteld. 4.1 Verschillende soorten metingen Men kan de metingen van de interactie van de gebruikers (zowel onderling als met het platform) onderverdelen in twee soorten: kwalitatieve metingen en kwantitieve metingen Kwantitatieve metingen Kwantitieve metingen zijn gebaseerd op de hoeveelheid. Hoeveel keer heeft de gebruiker zich aangemeld op OWAES? en Hoeveel keer heeft de gebruiker een opdracht uitgevoerd? zijn twee voorbeelden op OWAES Kwalitatieve metingen Kwalitatieve metingen worden uitgevoerd op basis van waardigheid. In het geval van OWAES kan dit bijvoorbeeld zijn: Hoe goed heeft de gebruiker zijn taak voltooid?. 4.2 De skill levels In elk populair spel moet de gebruiker starten vanaf nul. Om frustraties te vermijden wordt gebruiker gestimuleerd in een stijgende lijn en zal het platform of het spel zich aanpassen aan de kennis en mogelijkheden van de gebruiker. De verschillende skill levels zijn: The Newbie The Beginner The Intermediate The Expert Er wordt verder ingegaan op de skill levels van de 50-plusser. 14 YAMMER GAMIFICATION: 5 LEVELS TO STIMULATE USER ENGAGEMENT. (N.D.). PETER VAN HEES. RETRIEVED FROM STIMULATE-USER-ENGAGEMENT/ 41

42 Figuur 19 - Quests The Newbie De gebruiker start het spel voor de eerste keer op, of bezoekt het platform voor de eerste keer. Deze gebruiker wordt in game-taal omschreven als de newbie ofwel het groentje. Meer ervaren spelers kunnen zich ergeren aan deze spelers. Bij OWAES, het eerste wat de gebruiker moet doen is vertrouwd raken met het systeem. Sommige gebruikers worden aangeworven door bedrijven of dienstverleners, maar een groot deel van de gebruikers staan er alleen voor. Deze gebruikers moeten zonder veel problemen in de stroom leren zwemmen. Hiervoor werd bij OWAES gezorgd voor de tutorial quests. Dit zijn quests die gebruikers kunnen uitvoeren om het systeem te leren kennen. Zij worden hiervoor uiteraard beloond met experience, een badge of soortgelijke rewards. Tenslotte zal de newbie leren om zich in te schrijven op een opdracht of een opleiding. Hij zal dit leren aan de hand van de tutorial quests. Kwalitatieve metingen Vervolledigen tutorial quests Inschrijven op een activiteit Kwantitatieve metingen Geen The Beginner De beginner heeft het platform ondertussen al leren kennen, hij weet hoe hij een opdracht toevoegt of zich inschrijft voor een opleiding. Nu de gebruiker het technisch aspect kent, kan hij zich verdiepen in het sociaal aspect. De gebruiker wordt aangemoedigd om zijn profiel te vervolledigen, een profielfoto te uploaden of vrienden toe te voegen. Zij kunnen ook berichten versturen naar anderen of zich aansluiten bij een groep of bedrijf. De grootste stap voor de beginner is voor de eerste keer een opdracht uitvoeren of opleiding volgen. Als newbie leerde hij hoe hij zich kon inschrijven, maar dit moet nu ook afgerond worden. 42

43 Kwalitatieve metingen Vervolledigen profiel Profielfoto instellen Activiteit uitvoeren/afronden Kwantitatieve metingen Berichten sturen Vrienden toevoegen Mensen/bedrijven volgen The Intermediate De intermediate gebruiker heeft al wat meer ervaring met het platform. Hij is een frequente gebruiker en heeft al wat ervaring met het volgen van opleidingen of uitvoeren van opdrachten. Hij zal misschien ook infrastructuur gedeeld hebben of gehuurd hebben. Deze gebruiker zal dan ook al heel wat badges hebben om mee te pronken op zijn profiel. Kwalitatieve metingen Een badge verkrijgen Kwantitatieve metingen Het bezoeken van OWAES op frequente basis Uitvoeren van meerdere opdrachten/opleidingen Badges verzamelen Badges kunnen zowel gemeten worden door kwalitatieve als door kwantitatieve metingen. Het verzamelen van (meerdere) badges is kwantitatief, terwijl het verkrijgen van een badge kwalitatief is The Expert Om van intermediate naar expert te raken moet de gebruiker vertrouwd raken met het geven van opleidingen of opdrachten. Hij zal met andere woorden niet alleen aan de werknemer-kant van een opdracht staan, maar ook eens werkgever proberen. De expert zal ten slotte ook newbies of beginners helpen op het forum. Kwalitatieve metingen Uitgeven opdracht/opleiding Kwantitatieve metingen Interactie op het forum 43

44 4.3 Gamification Platform Voorbereiding In het motiveren van de gebruikers van OWAES was een onderscheid te maken tussen 3 soorten gebruikers: de 50-plussers, de bedrijven en de dienstverleners. Deze 3 soorten gebruikers moeten met elkaar in contact komen, zonder elkaar voor te voeten te lopen. Het systeem moest voor zowel de 50-plusser als de bedrijven aantrekkelijk zijn, ook al hebben ze beide verschillende doelen (en dus een verschillende manier van omgaan op het platform Stagnatie van de gebruikers Levels Voor de 50-plussers heeft OWAES levels voorzien. Ieder level brengt meer rechten met zich mee. Een gebruiker van level 1 kan bijvoorbeeld enkel opdrachten uitvoeren terwijl een level 2-gebruiker ook opdrachten kan toevoegen op het platform. Op level 3 kan men anderen waarderingen geven. Experience Levels brengen ook experience, of vaardigheid, met zich mee. Ieder level bracht een experience multiplier met zich mee. Level 1 experience * 1.00 Level 2 experience * 1.25 Level 3 experience * 1.50 Level 4 experience * 1.75 Dit zorgt ervoor dat de gebruikers het gevoel krijgen dat ze meer progressie maken. Ook moet er gezorgt worden dat er na een aantal levels, er een gemakkelijk level is. Dit zorgt ervoor dat de gebruikers niet het gevoel krijgen dat zij constant moeten klimmen en werken. Wanneer men na 5 lange levels veel experience moet halen, hierna ook een level mag zijn met wat minder experience. Hierdoor krijgt men een gevoel van rust tussen de moeilijkere levels. De grafiek van totaal experience (y-as) tegenover levels (x-as) zou er zoals hiernaast moeten uitzien. Figuur 20 - Grafiek experience Quests Wanneer de gebruiker minder interesse toont voor een bepaalde factor in het gamification platform, is het best deze gebruiker te stimuleren. De gebruiker mag niet het gevoel krijgen dat het een verplichting wordt, want dan zal deze geneigd 44

45 worden af te haken. Dit kan opgelost worden door het invoeren van quests en hier ook rewards voor te geven. Bij OWAES werd er een onderscheid gemaakt in verschillende quests: Rewards Tutorial quests, die gegeven worden om het platform te leren kennen. Daily quests, die iedere dag veranderen. Deze houden quests in als schrijf je vandaag in op een opdracht of maak vandaag een opleiding aan. Weekly quests, die iedere week veranderen. Deze houden quests in als werk deze week minstens 1x in fysiek of volg deze week een opleiding in twee verschillende categorieën. Monthly quests, die iedere maand veranderen. Deze houden quests in als werk deze maand 6x in kennis. Moment quests, deze quests worden gegeven wanneer de gebruiker de vorige moment quest heeft vervolledigd. Een voorbeeld van een moment quest is volg een opleiding met 3x welzijn of meld iedere dag van de week aan op OWAES. Moment quests verschillen van moeilijkheidsgraad naargelang de gebruiker dit nodig heeft. Challenge quests, deze quests zijn grotere quests die onderverdeeld kunnen worden in kleinere tussenstappen. Een voorbeeld van een challenge quest is verhoog uw welzijn met 10%. In dit geval kan deze quest onderverdeeld worden per 2% en zo ook belonen per tussenstap met een grotere beloning op het einde. Deze quests hebben deadlines en kunnen dus falen. Als gevolg van quests komen ook de rewards. OWAES maakt gebruik van 4 verschillende soorten beloningen: Experience, de vaardigheid in zijn zuiverste vorm. Experience boost, bijvoorbeeld voor de komende 48u krijgt de gebruiker 200% van de waarde van de normale experience. Indicator boost, bijvoorbeeld +3% extra fysiek voor het uitvoeren van een bepaalde quest. Trager zakken van indicatoren. Normaal zakken de indicatoren 1% per dag. Een reward zou kunnen zijn dat deze gedurende 3 dagen niet zakken. Deze beloningen zullen ervoor zorgen dat de gebruikers van OWAES zich meer geneigd voelen om de bepaalde quests of opdrachten uit te voeren. Zij zullen hier dan bij ook een beter gevoel hebben en zal het minder aanvoelen als een verplichting. Figuur 21 - Badge Badges Badges (of achievements in sommige platformen) zijn kleine icoontjes die de gebruiker kan verdienen door allerlei taken uit te voeren. Deze icoontjes kunnen dan gebruikt worden door de gebruiker om ermee te pronken. Deze worden over het algemeen weergegeven op de gebruikers profielpagina s. 45

46 Voor game designers zijn badges een goede manier om het sociaal aspect op een platform te promoten. Badges geven ook de voltooiing van doelen en de vooruitgang in het platform aan. Er zijn verschillende soorten badges. Op Foursquare worden badges gegeven bij check-ins, terwijl Farmville verschillende levels van ribbons gebruikt (gele, rode, witte en blauwe ribbons, elk met hun eigen betekenis). Bij OWAES werd een onderscheid gemaakt in zichtbare badges en onzichtbare badges. De zichtbare badges zorgen ervoor dat de gebruiker geëngageerd wordt. De onzichtbare badges zorgen dan meer voor een verrassingseffect. Het geven van badges gebeurd vooral bij het uitvoeren van een activiteit. Wanneer elke badge verborgen zou zijn, zou dit zijn effect missen om de gebruiker te engageren. Wanneer elke badge zichtbaar zou zijn, zouden de gebruiker zich vooral geneigd voelen om enkel te doen wat de badges vragen en zich van alle andere opdrachten minder aantrekken. Gebruikers worden aangetrokken door een goed design in de badge, de mogelijkheid van het verzamelen en de schaarsheid van badges Bedrijven Bij OWAES moet ook rekening gehouden worden met de bedrijven die deel uit maken van het platform. Niet alleen moeten de 50-plussers een gamified platform krijgen, ook de bedrijven werken met quests, badges, De quests voor bedrijven zijn enigszins verschillend aan de quests van de 50- plussers aangezien de bedrijven aan het ander uiteinde van een activiteit staan. De 50-plussers zullen de activiteiten uitvoeren, de bedrijven aanbieden. Ook al kunnen 50-plussers zelf activiteiten aanbieden, de focus hiervan blijft bij de bedrijven liggen. Een voorbeeld van een quest voor bedrijven zou kunnen zijn voeg 3 opdrachten toe deze week of zorg ervoor dat minstens 5 mensen zich inschrijven op uw activiteiten. Niet alleen de quests, maar ook de badges verschillen. Er is een grote poel van gedeelde badges, toch hebben bedrijven enkele unieke zoals organiseer een opleiding voor minstens 10 personen. Naast quests en badges krijgen bedrijven ook een scorebord (een leaderboard) om de onderlinge concurrentie tussen verschillende bedrijven te stimuleren. 46

47 5 Opvolgingssysteem In dit hoofdstuk wordt besproken wat er allemaal moet gebeuren qua opvolging op een sociaal platform. Waar gaan mensen van kunnen profiteren? Hoe gaat Owaes ze in de gaten houden? We gaan ook vergelijken met andere systemen en zien of ze toepasbaar zijn op Owaes en waarom wel/niet. 5.1 Sociaal platform Bijna iedereen heeft al wel eens te maken gehad met een sociaal platform. Bijna iedereen heeft wel een account op Facebook, Twitter, LinkedIn,. Op deze platformen kunnen gebruikers een profiel aanmaken en contact leggen met elkaar. Meestal zorgen de gebruikers voor de content van de site zonder of met een minimale tussenkomst Verschil Owaes met andere platformen Het grootste verschil is de content die mensen kunnen plaatsen. Op andere sociale platformen kunnen mensen berichten posten met wat ze maar willen. Ze kunnen posten over hun vakantie of over hun huisdieren. Op Owaes kunnen mensen alleen maar opleidingen, werkervaringen en deelbare voorwerpen/ruimtes. Mensen kunnen wel op hun profiel foto s uploaden of hun CV mocht dit nodig zijn voor bedrijven. Zo kunnen ze zich beter profileren en eventueel sneller aan een job komen. Ook de manier waarop Owaes geld verdient verschilt van andere platformen. Op de meeste sociale platformen wordt geld verdient door persoonlijke informatie te gebruiken om gepersonaliseerde advertenties te plaatsen. Of door de persoonlijke informatie door te verkopen. Op Owaes betalen de bedrijven om gebruik te maken van het platform in ruil voor credits. De gebruiker kan zelf kiezen wat hij wel of niet laat zien op zijn profiel. Verder wordt er niets met de persoonlijke informatie gedaan. 5.2 Waarop moet Owaes letten? Hier wordt er besproken op wat Owaes moet letten. Waar kunnen gebruikers van profiteren en waartegen moeten de gebruikers beschermd worden? Indicatoren/Credits Het is bedoeling dat mensen hun indicatoren op peil houden. En dat ze niet te veel of te weinig credits hebben. Daarom moet er telkens er gevaar dreigt een alarm afgaan bij een admin. Het is belangrijk dat dit op tijd gebeurt. Zo kan de admin of begeleider op tijd de gebruiker motiveren om verder te werken. De admin kan dit doen door items voor te stellen aan de gebruiker. Of hij kan een quest instellen specifiek voor deze gebruiker zijn probleem. 47

48 Figuur 22 - Aanraden Items/Quest De alarmen voor de indicatoren zijn ingesteld van zodra ze onder 50% zitten het vakje oranje wordt. En zodra ze onder de 40% zitten wordt het rood. Zo kan de admin op de overzichtspagina snel zien wie in de problemen zit. Voor de credits is het wat ingewikkelder. De gebruikers beginnen met 4800 credits. De bedoeling is dat ze dat ongeveer behouden. Op dit moment is de limiet ingesteld op 1000 voor oranje en 2000 voor rood. Dit wil zeggen dat zodra een gebruiker tussen de 5800 en 6800 of tussen 3800 en 2800 zit het vakje oranje wordt. Zitten ze boven de 6800 en onder de 3800 wordt het rood. Dit zijn variabelen en zullen nog moeten worden bijgesteld zodra het project in bèta zit. Figuur 23 - Admin tabel met indicatoren Laatst online, item geplaatst en ingeschreven Admins, leiders van groepen en dienstverleners moeten de gebruikers motiveren om het platform te gebruiken. Dan is het uiteraard belangrijk dat ze weten wanneer een gebruiker het laatst online is gekomen. Zo kunnen ze snel ingrijpen en achterhalen waarom de gebruiker niet meer terugkomt. En op deze manier de gebruiker terug te brengen naar het platform. Maar inloggen op het platform is niet genoeg. Men moet ook items plaatsen en zich inschrijven. Zodat er genoeg verfrissing is op het platform. Als de gebruikers niet actief genoeg zijn, dan dreigt het platform stil te vallen. 48

49 De limiet voor het laatst online staat ingesteld op 7 dagen, dan wordt het rood weergegeven. Na 2 dagen komt het in oranje te staan. Als mensen zich hebben ingeschreven op bepaalde items zullen ze een paar dagen niet online komen. En men mag niet de mensen te vaak lastig vallen. Het valt nog af te wachten of dit voldoende is. Na de testfase zal worden gezien welke termijn redelijk is. Voor het item plaatsen en inschrijven op items is de termijn moeilijker vast te stellen. Niet alle mensen/bedrijven hebben genoeg taken of opleiding om elke week iets te plaatsen. Of hebben de tijd om taken uit te voeren of opleidingen te volgen. Het kan ook zijn dat die week er niet veel interessante taken/opleidingen zijn. Voorlopig is dit hetzelfde ingesteld als bij het laatst online. Maar na de testfase zal dit waarschijnlijk worden aangepast. Figuur 24 Overzicht admin-pagina Privacy-instellingen Privacy is altijd gevoelig bij mensen. Ze willen nooit dat al hun gegevens zomaar voor iedereen zichtbaar zijn. Daarom kun je bij Owaes zelf kiezen wat je zichtbaar zet en wat niet. Standaard staan je instellingen op private. Mensen kunnen jou profiel niet terugvinden in de lijst van gebruikers. Als ze de link weten geraken ze wel op je profiel. Zo kun je je profiel doorgeven aan alleen je vrienden. Op je profiel zelf kun je kiezen wat je deelt met wie. Per item kun je kiezen of je het deelt met iedereen, vrienden of niemand. Dit is gedaan omdat de oudere generatie niet zijn opgegroeid met sociale media. Zo worden ze standaard beschermd. Via de tutorial quests zal duidelijk worden gemaakt wat je kan instellen en waar je het moet veranderen. 49

50 Figuur 25 - Instellingen profiel Credits schenken Op het platform kunnen mensen credits aan elkaar schenken. Zo kunnen ze elkaar een kleine tip geven als ze een zeer goede job hebben gedaan. Of een vriend in nood eventjes helpen. Het gevaar hierin schuilt dat wanneer mensen in de rode zone komen van credits. Ze elkaar kunnen helpen om uit de rode zone te komen. Zo kunnen credits wegschenken als te veel hebben en zo iemand anders in de rode zone zetten. Om dit tegen te gaan is het best dat je credits wegschenken beperkt in aantal keer en aantal credits per keer. Maar ook dat ze aan niemand kunnen schenken als ze daardoor de andere persoon in problemen brengen. Vals spelen Eén van de grootste gevaren is dat mensen kunnen vals spelen. Ze kunnen bijvoorbeeld hun indicatoren omhoog houden door met iemand samen te spannen. Eén van de twee maakt een item aan, de ander schrijft zich in en de inschrijvingen worden afgesloten. De credits worden betaald en het proces wordt andersom nog is uitgevoerd. Zo hebben ze allebei zogezegd gewerkt, hebben ze hun indicatoren omhoog gehouden en zijn ze geen credits kwijt. Owaes kan hier verschillende acties ondernemen. Ten eerste wordt er bijehouden hoe vaak 2 bepaalde personen met elkaar werken. Als het te vaak gebeurt of het gebeurt telkens wanneer bij één van de twee de indicatoren laag is. Dan kan er een automatisch bericht worden verstuurd naar een admin die de zaak dan nader moet bestuderen. 50

51 Ten tweede kan er ook bekeken worden hoe lang de inschrijvingen openstaan. Als het telkens word afgesloten nadat dezelfde persoon zich inschrijft, moet er opnieuw een alarm afgaan bij een admin. Als mensen zoiets in de gaten hebben of iets verdacht opmerken moeten ze contact opnemen met een admin. Dit kunnen ze doen door het contact-formulier in te vullen en daarin vermelden wat ze verdacht vinden. Voor bepaalde quests is het voldoende dat mensen een item plaatsen op Owaes of dat ze zich ergens inschrijven. Dan moet er ook op gelet worden dat als ze een item toevoegen die ook effectief wordt uitgevoerd. En niet alleen geplaatst wordt voor de beloning van de quest. Hetzelfde geldt voor het inschrijven. Als mensen zich te vaak (of telkens bij een bepaalde quest) zich inschrijven voor een item. En zich dan direct of vlak voor het moment dat de taak moet worden uitgevoerd zich uitschrijven, zal er een alarm afgaan bij de admins/dienstverlener. 5.3 Systemen van andere sociale media Chat scannen Sociale media scannen de berichten die je plaatst of verzend naar je berichten op criminele activiteit. Maar ook zodat ze zelf meer informatie hebben om gerichter advertenties te tonen. Natuurlijk moest er sprake zijn van criminele activiteit zullen ze wel contact opnemen met de nodige instanties. Dit systeem heeft wel zijn voordelen. Zo heeft Facebook al vaak geholpen met het ontdekken van pedofielen. Zodra de software iets heeft ontdekt wordt het nagelezen door een admin. Daarom moet de software zeer goed ontworpen zijn zodat er niet onnodige private gesprekken gelezen worden door admins. Dit zouden veel mensen niet kunnen appreciëren. Op Owaes is hier nog geen sprake van. Owaes zit met een doelgroep van 50+ en zullen vooral werken met mensen die worden aangeleverd via de VDAB. Het risico op criminele activiteit is dan ook klein. En voor de persoonlijke informatie moet Owaes het ook niet doen want er zijn geen advertenties te zien op Owaes. De gebruikers hoeven hiervoor dus geen schrik te hebben CLULEY, GRAHAM. WHY FACEBOOK IS RIGHT TO SCAN PRIVATE MESSAGES. GRAHAM CLULEY. Facebook scans chats and posts for criminal activity. CNET. 51

52 Rapporteren Op de meeste sociale media krijgen gebruikers de mogelijkheid om mensen of content te rapporteren. Bij google plus kun je berichten rapporteren voor spam of beledigingen. Je moet zelfs geen reden opgeven, maar het is wel mogelijk. Bij Facebook krijg je de optie om het te verbergen en daarna een reden te geven of ineens rapporteren voor spam. Figuur 26 Opties rapporteren google+ Figuur 28 - Opties na het rapporteren Figuur 27 - Opties rapporteren Facebook Bij Owaes is dit niet nodig. Mensen kunnen niet kiezen wat ze posten. Ze kunnen natuurlijk beledigingen in de titel of beschrijving zetten. Maar deze items zullen dan direct door admins verwijderd worden. Owaes wilt ook de samenwerking promoten. Moesten mensen problemen hebben met elkaar. Dan is het de bedoeling dat ze het onder elkaar uitwerken. En niet direct elkaar beginnen te rapporteren of te blokkeren. Ze zouden te snel grijpen naar de opties om elkaar te blokkeren i.p.v. leren samen te werken. Er is altijd kans dat je later op je werk moet samenwerken met mensen die je minder graag hebt. Als het hier niet lukt, zal het later ook niet lukken. 52

53 Conclusie Aan het opvolging systeem van Owaes zal sowieso nog gewerkt moeten worden. Er is nog geen platform zoals Owaes dus we weten nog niet goed hoe de mensen hierop gaan werken. Gaan er vele problemen ontstaan onderling? Gaat het uiteindelijk nodig zijn om een rapporteringssysteem uit te werken? Gaat Owaes effectief de gesprekken in de gaten moeten houden? Dit zijn vragen waar er hopelijk al een antwoord op is na de bèta-fase. Ook het systeem van admins zal misschien nog herzien moeten worden. Als het platform van de grond komt en populair begint worden. Zal het te duur uitvallen om de posts te controleren door admins. Hier zal later nog iets gevonden moeten worden. Misschien is het ook niet nodig omdat Owaes met een volwassen doelgroep zit. 53

54 54

55 6 Besluit 6.1 Arne Gamification kan een meerwaarde geven aan uw product, zolang het maar in de juiste mate gebruikt wordt. Er wordt gebruik gemaakt van de juiste elementen en een correcte toepassing. Gamification is geen just add water -principe, bij een verkeerde toepassing kan deze ook een stroef gevoel opwekken bij de gebruikers. Bij OWAES had dit een grote meerwaarde, het platform op zich draait rond leren en werken. Om dit wat luchtiger te maken, werd gekozen voor gamification. Niet alle elementen werden toegepast, enkel de gepaste. Sinds mijn stage ben ik een voorstander geworden van het gamification-principe. Niet alleen door de online lessen in verband met gamification, maar ook het brainstormen en uitwerken voor het platform heeft me de vele voordelen laten inzien. Hierbij denk ik dat ik dit zal aanraden in toekomstige projecten, waar het eventueel een meerwaarde kan geven natuurlijk. De stage heeft mij ook een beter inzicht gegeven in grotere projecten en hoe ik deze in groep kon aanpakken. Het volledige proces werd overlopen, van design tot implementatie met de brainstorm over gamification tussenin. 6.2 Thomas Ik ben blij dat ik via deze stage gamification heb leren kennen. Gamification heeft veel voordelen maar ook veel gevaren. Veel systemen die gamification proberen te gebruiken eindigen met pointsification of exploitationware. Gamifiction is iets nieuws en mensen moeten het nog ontdekken en het op de juiste manier toepassen. Ik denk dat we daar nog een lange weg hebben af te leggen. Ik heb wel bedenkingen hoe effectief gamification gaat zijn als het echt populair wordt. Wat als het overal gaat gebruikt worden? Gaan mensen het dan niet doorhebben en gaat het dan nog hetzelfde effect hebben? Of misschien is er tegen dan een nieuwe manier van gamification. De tijd zal het moeten uitwijzen. Deze stage heeft me bijgebracht hoe je moet werken in een groot project. Hoe belangrijk het is om een planning op te stellen en je daaraan te houden. We doorliepen het hele proces, van design tot het uitwerken. De stage heeft mij ook de mogelijkheid gegeven om uitgebreid met Drupal te werken. Wat volgens mij later nog zeker van pas gaat komen. 55

56 56

57 7 Bronnenlijst WHAT MAKES A VIDEO GAME ADDICTIVE? RETRIEVED APRIL 29, 2014, FROM GAME-ADDICTION.ORG/WHAT-MAKES-GAMES-ADDICTIVE.HTML GAMIFICATION. (2014, APRIL 18). IN WIKIPEDIA, THE FREE ENCYCLOPEDIA. RETRIEVED FROM GAMING CAN MAKE A BETTER WORLD. (N.D.). RETRIEVED FROM GOOGLE TRENDS - WEB SEARCH INTEREST - WORLDWIDE, PRESENT. (N.D.). RETRIEVED APRIL 29, 2014, FROM MAGIC CIRCLE (VIRTUAL WORLDS). (2014, APRIL 13). IN WIKIPEDIA, THE FREE ENCYCLOPEDIA. RETRIEVED FROM MARCZEWSKI, A. (2013). GAMIFICATION: A SIMPLE INTRODUCTION. ANDRZEJ MARCZEWSKI. MCGONIGAL, J. (2011). REALITY IS BROKEN, WHY GAMES MAKE US BETTER AND HOW THEY CAN CHANGE THE WORLD. NEW YORK: THE PENGUIN PRESS. SHELDON, L. (2012). THE MULTIPLAYER CLASSROOM, DESIGNING COURSEWORK AS A GAME. COURSE TECHNOLOGY, A PART OF CENGAGE LEARNING. SMITH, R. (2013, APRIL 28). THE FUTURE OF WORK IS PLAY. PRESENTED AT THE CHI 2013 WORKSHOP DESIGNING GAMIFICATION, PARIS, FRANCE. THE GAME LAYER ON TOP OF THE WORLD. (N.D.). RETRIEVED FROM THE GAME THAT CAN GIV E YOU 10 EXTRA YEARS OF LIFE. (N.D.). RETRIEVED FROM ARS_OF_LIFE WERBACH, K., & HUNTER, D. (N.D.). FOR THE WIN: HOW GAME THINKING CAN REVOLUTIONIZE YOUR BUSINESS. (VOL. 2012). PHILADELPHIA: WARTON DIGITAL PRESS. YAMMER GAMIFICATION: 5 LEVELS TO STIMULATE USER ENGAGEMENT. (N.D.). PETER VAN HEES. RETRIEVED FROM STIMULATE-USER-ENGAGEMENT/ YOUR BRAIN ON VIDEO GAMES. (N.D.). RETRIEVED FROM ZICHERMANN, G., & CUNNINGHAM, C. (N.D.). GAMIFICATION BY DESIGN, IMPLEMENTING GAME MECHANICS IN WEB AND MOBILE APPS. O REILLY. CLULEY, GRAHAM. WHY FACEBOOK IS RIGHT TO SCAN PRIVATE MESSAGES. GRAHAM CLULEY. Facebook scans chats and posts for criminal activity. CNET. 57

58

59 8 Bijlagen 8.1 Documentatie Drupal Inleiding Dit document wordt verdeeld in frontend, backend en modules. De frontend bevat informatie over Bootstrap, Less, Template files en hoe wij onze code geschreven en gedocumenteerd hebben. De backend bevat informatie over de verschillende content types die we aanmaken en de views die gebruikt worden om de nodes weer te geven. Als laatste wordt een opsomming gemaakt van de gebruikte modules, wat ze zijn, waarom deze gebruikt worden en hoe men ze kan gebruiken. Alle bestanden die wij toevoegen via de FTP zijn te vinden onder /sites/all/themes/owaes: img Alle images die toegevoegd worden via FTP en statisch te gebruiken vallen, bijvoorbeeld de images in de footer of de driehoeken tussen iedere viewsrow. De images die geüpload worden (bijvoorbeeld de images op de homepagina) zijn terug te vinden onder /sites/default/files. js Alle javascript files, wij werken in owaes.js (zie 1.4 Javascript). less Alle less files, wij werken in owaes.less (zie 1.3 LESS (CSS Pre-Processor)). templates Alle template files (zie 1.2. Template files).

60 8.1.2 Frontend Bootstrap Bootstrap maakt het mogelijk om bepaalde pre-defined classes toe te kennen aan HTML tags. Zo wordt de class container toegekend wanneer iets gecentreerd moet staan. Dit wordt dan automatisch ook aangepast voor de mobile weergave. Veel van deze tags werden niet gebruikt aangezien Drupal de HTML voor ons had geregeld. Toch hebben we de template files ingedoken om hier en daar enkele klasses toe te voegen. Template files Alle template files zijn terug te vinden onder /sites/all/themes/owaes/templates/. System In de directory system zijn alle basis templates terug te vinden zoals nodes en de algemene page.tpl.php. De naam is afkomstig van de oorspronkelijke template waar ook system werd gebruik. De volgende template files zijn aanwezig: node--casetracker_basic_case.tpl.php De node die gebruikt wordt om een case weer te geven van de casetracker. Hier werd een container toegevoegd om de weergave te centreren. node--faq.tpl.php De node van een specifieke FAQ pagina (niet het overzicht). Werd aangepast om een container toe te voegen en de image te veranderen van plaats. node--home_block.tpl.php De node voor een grote block van de home pagina. Werd oorspronkelijk gebruikt om een specifieke pagina van de home blocks weer te geven, maar wordt nu niet meer gebruikt. node--home_small_block.tpl.php Hetzelfde als de home_block, maar voor small blocks. page--node--add--casetracker_basic_case.tpl.php Hetzelfde als node casetracker_basic_case.tpl.php, maar om een case toe te voegen in plaats van weer te geven. Opnieuw een container toegevoegd. page.tpl.php De algemene page template. Hier werd een container verwijderd omdat Drupal (met het Bootstrap theme) zelf al een container had toegevoegd. Dit werd verwijderd omdat wij anders bepaalde stukken niet over de gehele pagina konden weergeven (bijvoorbeeld de grote gele balk bij de home pagina).

61 Views Alle template files voor de views. Hierin werden vooral containers toegevoegd. De naamgeving hiervan is belangrijk voor de Views module (om de template files te herkennen). Dit kan worden bekeken als men naar de website surft onder het admin panel: structuur > views > (selecteer een view, bijvoorbeeld home ) en klik op bewerken > advanced > theme: information views-exposed-form.tpl.php Hier werden de links geplaatst om een case of een project toe te voegen onder de filter criteria van de casetracker. views-view-grid--contact-itemscontact.tpl.php views-view-grid--contact-items.tpl.php views-view-table-- ontwikkelaars.tpl.php views-view-unformatted--50- plussers.tpl.php views-view-unformatted-- bedrijven.tpl.php views-view-unformatted-- documenten.tpl.php views-view-unformatted--home-small-blocks.tpl.php views-view-unformatted--home.tpl.php views-view-unformatted--overons.tpl.php views-view-unformatted--partners.tpl.php views-view-unformatted.tpl.php Casetracker, Search, Account Casetracker o casetracker-case-full.tpl.php o views-view--casetracker-project-cases.tpl.php niet te verwarren met bovenstaande views-exposed-form.tpl.php, deze template werd enkel gebruikt om een container toe te voegen. Search De search werd aangepast om bepaalde advanced search features weg te laten en een link te plaatsen vanaf de FAQ page naar de contact page waar het onderwerp al ingevuld is. o search-block-form.tpl.php o search-result.tpl.php o search-results.tpl.php

62 Account Zit niet in een aparte map omdat Drupal deze template files niet kon vinden (en dus gewoon in de root van de map templates ). o user-login.tpl.php o user-pass.tpl.php o user-register-form.tpl.php LESS (CSS Pre-Processor) Wat is LESS? Wij hebben voor de Pre-Processor LESS gekozen omdat dit het mogelijk maakt om zowel overzichtelijk als gestructureerd te schrijven. Uiteindelijk wanneer dit verwerkt wordt, is dit gewoon CSS. Less maakt het mogelijk om variabelen toe te kennen (bijvoorbeeld het geel en het blauw in het logo), om genestte CSS te schrijven en om functies (genaamd mixins ) te gebruiken. Variabelen zijn te herkennen aan en worden gevolgd door de naam die wij toekennen, De c staat voor color. LESS.navbar-default { background-color: transparent;.navbar-brand { color: white; &:hover, &:focus { } } } CSS.navbar-default { background-color: transparent; }.navbar-default.navbar-brand { color: white; }.navbar-default.navbar-brand:hover,.navbar-default.navbar-brand:focus { color: #00005b; } Hoe hebben wij het aangepakt? Onze code is gestructureerd en genest zoals te vergelijken valt met een document:

63 Variables GENERAL o Fonts o Header o Pages (general) o Footer PAGES (specific) o Home o Voor Wie o Info Over Ons Partners FAQ Documenten Ontwikkelaars o Contact o Account Screen ONLY o Alle media queries met width > 1080px Mobile ONLY o Alle media queries met width < 1080px De hoofdstukken vallen te herkennen aan // --- (titel) --- // bijvoorbeeld // --- Home --- //. In Visual Studio kunnen de tags /*#region Home*/ (code) /*#endregion*/ gebruikt worden om de hoofdstukken te sluiten om een beter overzicht te krijgen zoals te zien is in de schermafbeelding hierboven. Code uitgelegd Wij hebben enkele keren gebruik gemaakt van pseudo elementen zoals :before en :after maar ook :first-child, :last-child of :nth-child(n). Bij views geeft drupal ons al bepaalde klasses voor even of oneven rijen dus vonden wij het nodig om deze beide te gebruiken in bepaalde situaties (zowel de gegeven drupal klasse als :nthchild(even)). Dit is te zien onder PAGES (specific) Home:.views-row:last-child,.views-row-last { p { margin: 45px px; } } De reden dat beide gebruikt werden is redelijk technisch en heeft te maken met specificiteit. Specificiteit is de berekening dat gemaakt wordt om te weten te komen welke code het meest doorweegt in de effectieve styling. De eerste (.viewsrow:last-child) heeft een specificiteit van 20 terwijl de laatste (.views-row-last) maar een specificiteit heeft van 10. Dit zorgt ervoor dat code met een

64 pseudo-element zwaarder doorweegt dan een gewone klasse (en dus minder kans heeft om zelf nog eens overschreven te worden door andere code). De driehoeken op de home pagina werden volledig gegenereerd met CSS en worden enkel weergegeven op een breedte van minstens 1080px (en kan je dus terugvinden bij Screen ONLY ). De code hiervoor staat hieronder. Iedere container in de home pagina krijgt een :before en een :after. Hier wordt de kleur wat aangepast wordt later afhankelijk van een odd row of een even row. Een driehoek wordt gemaakt door te beginnen met een lege box (width en height 1px) en te spelen met de borders. Men mag absoluut niet vergeten content: ; toe te voegen anders zal dit niet worden weergegeven (aangezien deze leeg is)..container { &:before { width: 1px; height: 1px; border-style: solid; border-width: 0 60px 35px 60px; border-color: transparent transparent; content: " "; float: right; margin: -118px 200px 0 0; background-image: none; } } &:after { width: 1px; height: 1px; border-style: solid; border-width: 35px 60px 0 60px; transparent transparent transparent; content: " "; float: left; margin: 78px 100px 0 200px; background-image: none; } Hieronder wordt gekeken of de container zich in een even rij of een oneven rij bevindt en afhankelijk daarvan wordt de kleur en de marge aangepast..views-row-.views-row:nth-child(odd), odd {.container { &:before { border-color: transparent transparent; } margin: -109px -30px 0 0; &:after {.views-row-.views-row:nth-child(even), even {.container { min-height: 400px; padding: 30px 0 30px 0; &:before { border-color: transparent transparent; margin: -64px 0 0 0;

65 transparent transparent transparent; } } } margin: 65px 0 0 0; } &:after { transparent transparent transparent; } } } margin: 50px 0 0 0; De driehoeken op andere pagina s worden op dezelfde manier aangemaakt, maar zijn images omdat het niet mogelijk was om de onderste lijn weg te laten. In deze image werd de onderste lijn dezelfde kleur gemaakt als de kleur van de achtergrond zodat het lijkt alsof deze afgebroken wordt en de lijn met de driehoek één geheel vormt. Hiernaast is een voorbeeld van de afbeelding apart, hieronder geïntegreerd in de border op iedere view-row. Javascript Op de Drupal-site werd niet veel javascript gebruikt, op enkele zaken na. Eerst en vooral, om jquery te kunnen gebruiken, moest er een workaround gemaakt worden voor het dollarteken ($), omdat dit namelijk niet werkte in Drupal: jquery(document).ready(function ($) { /*code*/ } Op deze manier konden wij wel het dollarteken gebruiken doorheen onze javascript. In het menu was er ook een bug aanwezig waar men twee maal moest klikken op een uitklapbare menu-item wanneer deze actief was (bijvoorbeeld, om van over ons naar de documenten te gaan). Dit werd opgelost door enkele klasses weg te halen uit de HTML en was enkel mogelijk met javascript: //fix the double click issue of the navigation menu $(".nav li").removeclass("expanded"); $(".nav li").addclass("collapsed"); Wanneer men de search gebruikt bij de FAQ en men zich daarna op een detailpagina bevindt, moet men kunnen terugkeren naar de search pagina. Dit werd mogelijk gemaakt door onderstaande code:

66 $(".node-faq.field-name-field-link a").click(function () { if (document.referrer.substring(0, 33) == " { window.history.back(); return false; } else { window.open(" "_self"); return false; } return false; }); Wanneer men vanuit de search op de huidige pagina komt, is de back link een history.back in javascript, wanneer men via een andere manier op de huidige detailpagina komt (door bijvoorbeeld het item bewerkt te hebben), is de back link een link naar alle FAQ s.

67 8.1.3 Backend (Drupal) Content Types Wij hebben onze content types in een bepaalde structuur genaamd (waar mogelijk). Deze structuur is: [<Pagina>] <Functie>, bijvoorbeeld [Home] Block. De content types waar wij geen controle over hadden (bijvoorbeeld FAQ) zijn uiteraard op deze manier gebleven. Content Types (of Inhoudstypen in het Nederlands) kan men terugvinden onder Structuur > Inhoudstypen. Een lijst van content types per menu-item wordt hieronder weergegeven. Home In de home-pagina worden twee inhoudstypen gebruikt en zijn te herkennen aan [Home] voor de naam. Een opsomming van de content types met hun velden: [Home] Block o Title o Body o Image o Link o Taal [Home] Small Block o Title o Body o Image o Link o Taal [Home] Block wordt gebruikt bij de grote blokken op de home pagina. Dit zijnde het gedeelte voor 50-plussers en het gedeelte voor de bedrijven. Hier wordt afwisselend (afhankelijk van een even of oneven (odd) rij) geel of wit als achtergrond gebruikt en de afbeelding rechts of links uitgelijnd. [Home] Small Block wordt gebruikt bij de drie onderste blokken (onder de [Home] Block voor bedrijven). Deze zijnde dienstverleners, over ons en veelgestelde vragen. De kleine blokken worden opnieuw opgemaakt afhankelijk van een even of oneven (odd) rij. Zo hebben de oneven rijen een kleine insprong links.

68 Voor Wie Ook al bevat Voor Wie? drie pagina s (50-plussers, bedrijven en dienstverleners), heeft dit toch maar twee content types (met eronder hun velden): [Voor Wie] Inleiding o Title o Inleiding_Afbeelding o Body o Inleiding_Taxonomy o Weight o Taal [Voor Wie] Content o Title o Body o Content_Taxonomy o Weight o Taal Wanneer deze content types aangemaakt worden, heeft men de keuze om deze op de 50-plussers-pagina, de bedrijven-pagina of de dienstverleners-pagina te plaatsen.

69 Info De groep info bevat 5 pagina s met elk hun eigen content types. Een overzicht van de pagina s en hun content types: Pagina Over Ons Partners FAQ Documenten Ontwikkelaars Content Type(s) [Over Ons] Block Partner FAQ [Documenten] Documenten Case, Project [Over Ons] Block o Title* Wordt niet weergegeven in de uiteindelijke view, maar is wel handig om de verschillende blokken van elkaar te onderscheiden in het dashboard. o Pre-Head De pre-head is bijvoorbeeld Wat is... in Wat is... Gamification?. o Head* De head is bijvoorbeeld Gamification? in Wat is... Gamification?. o Body* In de body wordt de algemene tekst geschreven. o Image De mogelijkheid om een afbeelding te uploaden. o Taal* Het is aangeraden om de taal altijd op Nederlands te zetten. Partner o Partner* De naam van de partner o Description of the sponsor* De omschrijving van de partner o Image and link field* Het logo van de partner met daarin een link o Taal* Het is aangeraden om de taal altijd op Nederlands te zetten. FAQ o Hoofdstuk Het hoofdstuk van de FAQ in het verkregen document o Question* De vraag o Answer* Het antwoord o Category* De categorie o Taal* Het is aangeraden om de taal altijd op Nederlands te zetten. o Detailed question o Image Een optionele afbeelding o Link* Een back link, is altijd standaard al ingevuld en hoeft niet aangepast te worden

70 [Documenten] Documenten o Title* Een titel o Bewerken_link* Een link om documenten te uploaden of te verwijderen o Files* Alle bestanden die momenteel geüpload zijn. o Image-documenten* Een afbeelding bij de documenten o Weight * Een gewicht zodat men kan kiezen welke bovenaan komen te staan o Taal* Het is aangeraden om de taal altijd op Nederlands te zetten.

71 Case Project o Title* Een titel o Description* Een omschrijving o Taal* Het is aangeraden om de taal altijd op Nederlands te zetten. Velden met een * zijn verplicht. Contact (gedeelte Thomas) Account Momenteel is het account-gedeelte niet af. Dit zal later linken naar de accounts op het platform. Views Alle views zijn terug te vinden onder Structuur > Views. Home De home view is opgebouwd uit twee views: een voor de grote blokken samen te houden en een voor de kleinere. De view genaamd home bevat alle grote blokken en in zijn footer (voet) wordt de view van de kleinere blokken ( home small blocks ) weergegeven en zo lijkt het alsof deze uit één en dezelfde view bestaan. Deze views kunnen enkel content types van het type [Home] Block of [Home] Small Block bevatten en geven enkel de velden image, body en link weer, in deze volgorde. De view wordt opgemaakt volgens een aangepaste template file (zie 1.2. Template files). Voor Wie? Deze view werkt voor alle pagina s die onder het menu Voor Wie staan. De pagina s worden aangemaakt op basis van taxonomy. Op de site is een woordenlijst Voor wie? aangemaakt. Voor elke term in deze woordenlijst wordt er automatisch een pagina aangemaakt en onder het menu Voor Wie geplaatst. Tijdens het aanmaken van content van het type [Voor Wie] content of [Voor Wie] Inleiding kun je kiezen bij welke taxonomy term deze content hoort. De view filtert dan op basis van deze term welke content hij moet laten zien op welke pagina. Hoe werkt de filter? Het pad van de view moet worden opgesteld met een %. De view komt onder /voorwie te staan dus het uiteindelijke pad is /voorwie/%. Dit is nodig zodat we dezelfde view kunnen gebruiken voor meerdere pagina s. Bij de Advanced setting van deze view hebben wij bij CONTEXTUAL FILTERS een filter toegevoegd. De filter is op basis van Inhoud: Has taxonomy term ID. Dankzij de % in het pad (hierboven ingesteld) weet deze filter welk ID de

72 taxonomy term heeft en welke content hij mag laten zien.in de settings van de filter hebben we ook de Titel overschreven met %1 dit zorgt ervoor dat de term zelf als titel wordt genomen en niet het ID van de term. De content wordt op 2 manieren gesorteerd. Eerst worden alle [Voor Wie] Inleiding van deze Taxonomy term geplaatst en dan wordt er gesorteerd op basis van gewicht. Hoe hoger het gewicht, hoe lager het zal worden geplaatst. Info Over Ons Deze view (genaamd Over Ons ) kan enkel content types van het type [Over Ons] Block verwerken en diens velden: pre-head, head, image en body, in deze volgorde. Opnieuw wordt de view opgemaakt aan de hand van een template file (zie 1.2. Template files). Partners Kan enkel content types bevatten van het type Partner en deze view is genaamd Partners. Heeft de volgende velden gekregen van zijn content type: Title, image and link field en body. Veelgestelde Vragen Hier wordt gewerkt met een module Frequently Asked Questions (zie 3. Modules). Deze module leverde ons een content type en enkele views aan. Deze view is niet terug te vinden bij structuur > views, maar was eigenlijk een predefined pagina /faq-page (die wij a.d.h.v. URL alliassing hebben aangepast naar /info/faq. Op deze pagina is het mogelijk om te filteren op categorie van de FAQ en kan men ook de vragen rangschikken. Om te kunnen zoeken tussen verschillende FAQ s hebben wij de core module search gebruikt en deze zodanig gemanipuleerd dat deze enkel resultaten weergeeft van het type FAQ. Documenten Deze view geeft alle content weer van het type [Documenten] Documenten. Er wordt gesorteerd op basis van gewicht dat ze kunnen ingeven als ze content van dit type aanmaken. Zou er content zijn met hetzelfde gewicht wordt er gesorteerd op basis van Titel op alfabetische volgorde. Ontwikkelaars Hier wordt gewerkt met de module Case Tracker (zie 3. Modules). Deze module geeft ons opnieuw enkele views en content types die het voor ons makkelijk maken. Wij hebben in de template file links geplaatst naar case toevoegen en project toevoegen (zie 1.2. Template Files). Verder hebben wij hier geen aanpassingen gedaan. Contact De view voor de contact pagina bestaat uit 2 views: Contact-Form en de view Contact-items. De view Contact-Form filtert op Type en op Titel. Zodat alleen het Webform met Contact in de titel wordt weergegeven op deze view.

73 Op de view Contact-items wordt er gefilterd op basis van het Type [Contact] Contactgegevens. Aan deze view werd er de view Contact-Form aan de Kop (Header) toegevoegd. Zodat je eerst het contact-formulier ziet en dan de contactgegevens van de partners. Account Hievoor zijn nog geen views voorzien.

74 8.1.4 Modules Advanced Help Wat? Als je naar de site gaat en dan /admin/advanced_help in de url toevoegt, kan je alle help bestanden zien van alle modules die geïnstalleerd zijn. Waarom? We hebben deze module geïnstalleerd zodat we snel een overzicht krijgen van alle help files, we vonden dit ook sneller ipv elke keer eerst naar modules te gaan en dan de juiste help file te zoeken. Case Tracker Wat? Met deze module kan je cases aanmaken en die toewijzen aan een persoon. Werkt er iets niet of zou je graag nog een extra feature willen, dan kan je een case aanmaken in het juiste project en die toewijzen aan een persoon die deze taak moet uitvoeren. Instellingen Bij de instellingen kan je een aantal standaardinstellingen invullen. Zo kan je de standaard prioriteit, standaard gebruiker, standaard type en nog vele andere instellen. Waarom? Deze module werd ook gebruikt op de oorspronkelijke site. We hadden gehoopt door dezelfde module te nemen het gemakkelijk zou zijn om de vorige cases over te zetten. De instellingen kun je terug vinden Modules > Case Tracker > Instellen. DHTML Menu Wat? DHTML staat voor Dynamic HTML, dit wil zeggen dat het menu dynamisch wordt ingeladen om zo page load te verminderen. Het is ook DHTML die zorgt voor de animatie bij het openen of sluiten van een uitklapbaar menu-item. LESS CSS Preprocessor Wat? Deze module zorgt ervoor dat LESS gecompileerd kan worden door Drupal en wij als developer dit zelf niet hoeven te doen. Uiteindelijk plaatst Drupal de gecompileerde CSS in zijn pagina s). Waarom? Waarom we LESS gebruiken wordt uitgelegd in 1.3. LESS (CSS Pre-Processor). Link Image Field Wat? Dit voegt een nieuw type veld toe namelijk: Link Image. Zo kan je bij contenttypes dit veld toevoegen. Bij dit veld moet je een afbeelding uploaden en dan een URL aan toevoegen. Als je dan op de afbeelding klikt zal je naar deze URL gaan.

75 Waarom? Wij hebben voor deze module gekozen omdat we iets nodig hadden om je een url aan een afbeelding toe te voegen. Frequently Asked Questions Wat? Deze module zorgt voor een pre-defined view en content type voor FAQ s. Waarom? Omdat we de content type en de views zelf niet moesten aanmaken heeft deze module ons veel tijd bespaard. Field Permissions Wat? uw tekst hier Waarom? uw tekst hier Multiupload filefield widget Wat? Deze module zorgt ervoor dat bij het veldtype Bestand, een extra optie krijgt bij de Widget-instellingen. Je kan hier nu voor Multiupload kiezen. Daardoor kan je meerdere bestanden tegelijkertijd uploaden. Wanneer je deze bestanden dan hebt geüpload kan je het gewicht van elk afzonderlijk bestand bepalen. Zo kan je zelf kiezen in welke volgorde de bestanden staan. Waarom? We kunnen nooit op voorhand weten hoeveel documenten er ooit maximaal geüpload zullen worden. Daarom zochten wij een manier om een content type aan te maken waarmee je meerdere bestanden tegelijkertijd kon uploaden. Na wat zoeken heb ik deze module gevonden. Je kan meerdere bestanden uploaden en ze sorteren, daarom hebben wij deze module gekozen. Icons De icons voor de bestandstypen voor dit veld vind je terug onder: /modules/file/icons/ op de ftp. Menu Item Visibilty Wat? Deze module zorgt ervoor dat we bepaalde menu-items onzichtbaar kunnen zetten voor bepaalde gebruikers. Niet-ingelogde gebruikers moeten bijvoorbeeld het menu-item profiel niet kunnen zien. Icon API Wat? De Icon API geeft de mogelijkheid om een icon toe te wijzen aan een bepaalde menu-item (onder structuur > menu > main menu). De icons worden voorzien door de Icon Provider Module.

76 Icon Provider Wat? Deze module voorziet icons die we kunnen gebruiken in de Icon API. Multilingual, Miltilinqual Internationalization Wat? Deze module zorgt ervoor dat als je content aanmaakt je kunt kiezen bij welke taal deze content hoort. Zo kun je later als de site ook in het Frans moet content aanmaken met als taal Frans. Zo kun je de site dan filteren op taal en zal de content in het frans niet op de nederlandse site komen. Waarom? In de verre toekomst is het eventueel mogelijk dat de site in verschillende talen beschikbaar zal moeten zijn. Deze module zorgt ervoor dat je content kan filteren op taal. Zodat het later niet te veel moeite zal zijn om een versie in een andere taal te maken. Masquerade Wat? Deze module zorgt ervoor dat je kan inloggen als verschillende gebruikers. Zo kan je zien of je de rechten juist hebt ingesteld. Hoe? Als je naar het profiel gaat van een gebruiker krijg je onderaan het profiel een link bv: Masquerade as arne.decant. Als je op deze link klikt ben je zogezegd ingelogd als Arne Decant en kan je zien wat hij zou zien en wat hij allemaal kan aanpassen. De beste manier om deze module te gebruiken is gebruik te maken van een Blok Masquerade dat automatisch is toegevoegd. Je kan die blok zichtbaar zetten bij: Structuur->Blokken->Masquerade. Je krijgt dan op de site een blok te zien met als Titel Masquerade, een textblok en een knop. Daar moet je de gebruikersnaam ingeven van de persoon als wie je je wilt voordoen. Zodra je op de knop klikt ben je ingelogd als die persoon. In het blok Masquerade krijg je nu de optie om terug te keren naar de originele gebruiker waarmee jij was ingelogd. Instellingen Je kunt het best instellen welke rollen gebruik mag maken van deze module. Dit doe je bij: Personen > TOEGANGSRECHTEN. Bij de instellingen van de module zelf (Modules > Masquerade > Instellen) een paar vaste gebruikers instellen. Zo moet je niet elke keer opnieuw hun naam ingeven, maar krijg je een link om snel te wisselen van gebruiker. Je kan ook instellen welke rollen als administrator worden beschouwd voor masquerading. Als laatste kan je ook instellen met welke gebruikers je snel wilt wisselen via een menu-item. Wij hebben dat menu-item uitgeschakeld dus kun je best via het blok werken. Waarom? We wilden zien of de instellingen die we ingesteld hadden via de toegangsrechten effectief werkten. Maar om dan telkens uit te loggen en opnieuw in te loggen,

77 vertraagde ons enorm. Dus heb ik snel deze module gezocht waarmee het eenvoudig is om tussen meerdere gebruikers te wisselen, zonder dat je het wachtwoord moet onthouden. Taxonomy Menu Wat? Deze module zorgt ervoor dat je een menu kan opbouwen met taxonomy terms. Hoe? Je maakt eerst een woordenlijst aan waar je al de tags die je als menu wilt hebben toevoegt. Bij de instellingen van de woordenlijst is er een gedeelte Taxonomy Menu. Daar kan je kiezen onder welk menu-item deze taxonomy terms komen te staan. Verder heb je nog een aantal instellingen over hoe het path moeten worden opgemaakt. Waarom? Ik zocht een manier om met 1 view meerdere pagina s op te maken. Zodat de content-types van deze pagina s hetzelfde bleef. En de view filtert op basis van het menu. Uiteindelijk ben ik terecht gekomen op deze module. Dankzij deze module kan je bij de view filteren op basis van taxonomy-term. Een meer gedetailleerde manier hoe je op deze manier moet werken kune je vinden bij de Help van deze module. Deze kan je vinden bij Modules > Taxonomy Menu > readme. Views Wat? Zorgt ervoor dat meerdere content types kunnen worden weergegeven op een enkele pagina, dat deze gefilterd en opgemaakt kunnen worden met een eigen URL. Waarom? Deze wordt gebruikt op bijna iedere pagina in OWAES. Webform Wat? Met deze module kun je zeer gemakkelijk formulieren en vragenlijsten creëren. Instellingen Bij de instellingen van de Webform module kun je instellen bij welke content-types je webform components kunt gebruiken. Voorlopig hebben wij alleen Webform aangevinkt. Je kan instellen welke components ingeschakeld zijn. Als laatste belangrijke optie kun je kiezen wat het default adres is waarmee de resultaten van de webform g ed worden. Bij de instellingen van het contact-formulier zelf kun je de s settings aanpassen. Daar kun je instellen naar wie de resultaten van het formulier gestuurd moeten worden en met welk onderwerp (Moest dit verschillend zijn van de standaard instellingen). Waarom? Ik zocht voor een module om gemakkelijk een contact-formulier te maken. De standaard contact-formulier van drupal was niet voldoende. Het handige aan deze

78 module was dat je snel formulieren kunt aanmaken en dat je meer opties hebt dan de standaar contact-formulieren. Note: We hebben ook nog een extra module geïnstalleerd. De Webform Reply, waarmee je in drupal zelf kon antwoorden op de mails. Maar sinds we met een view moeten werken om de contactgegevens er ook bij te krijgen, kun je hiervan geen gebruik maken op de pagina zelf. In de mail dat je krijgt staat wel een link naar de submission. En daar kun je dankzij de Webform Reply antwoorden in drupal zelf.

79 8.1.5 Opmerkingen Via URL aliassing (instellingen - URL alias) moeten de volgende zaken aangepast worden: o De 50-plussers, bedrijven en dienstverleners o De faq-page info/faq De 50-plussers-, bedrijven- en dienstverlenerspagina zitten in het menu door middel van een taxonomy lijst. Deze lijst wordt ook gebruikt bij de views van deze pagina aangezien deze pagina s gebaseerd zijn op dezelfde layout. Module: Taxonomy Menu. o Wanneer je naar de taxonomy lijst gaat is er een submenu taxonomy menu waar de parent aangegeven kan worden. De naam van de templates moeten overeen komen met de naam van de bijbehorende view. o Vb: de home page (/home) o Structuur > overzichten/views > home o Rechts in beeld uitgebreid openklappen (is waarschijnlijk advanced in het Engels) o Thema: informatie (klikken op informatie) o Hier krijg je een overzicht met alle mogelijke naamgevingen o o o Vet/bold = actief Hoe verder de naam naar beneden of naar rechts staat, hoe specifieker deze zal zijn (en heeft dan ook voorrang op voorgaande) Wanneer een nieuwe template toegevoegd wordt, moet hier een naam gekozen worden en dan opnieuw scannen

80 De search block op de FAQ page bovenaan plaatsen in de blokken om deze ook bovenaan te krijgen op de pagina.

81 8.2 Documentatie gamification Levels Berekend door o Experience Details o Level 1 Experience multiplier: 1.00x Aantal exp tot volgend level: 2800 Basic features ( rewards ) Toevoegen opdracht als groep (niet als individu) Uitvoeren opdracht Toevoegen en gebruiken infrastructuur Toevoegen en gebruiken opleidingen Border: Bronze o Level 2 Experience multiplier: 1.25x Aantal exp tot volgend level: 8200 Rewards Gebruikerslijst bekijken Toevoegen van een opdracht op de marktplaats als individu Border: Bronze o Level 3 Experience multiplier: 1.50x Aantal exp tot volgend level: Rewards Zelf waarderingen geven Border: Silver o Level 4 Experience multiplier: 1.75x Aantal exp tot volgend level: Rewards Indicatoren trager laten zakken (0.9x) Border: Silver o Level 5 Experience multiplier: 2.00x Aantal exp tot volgend level: Rewards Geen Border: Gold

82 8.2.2 Experience (misschien hernoemen naar vaardigheidspunten of iets dergelijks) Berekend door o Aantal minuten gespendeerd in een activiteit o Aantal minuten activiteiten aangeboden Als rewards van een quest: o (Tutorial)quests Vb. Stuur een bericht, maak een opdracht aan,... o Daily quests 1 minuut = 10 exp (multipliers en boosts niet meegeteld) Formule o 800x² mx o x = level, m = multiplier Tabel zie volgende bladzijde Exp bar zien stijgen o Popup bij aanmelding, zodat mensen hun exp bar zien opschuiven o Bij boosts, aanduiden in de exp bar hoeveel exp zij (kunnen) verkrijgen met hun huidige boosts Experience Boost De boost: niet cummulatief van waarde, wel van uren o Twee boosts van 2u met waarde 2x Boost van 4u met 2x exp Verdubbeld het verdiende experience (2x) De eerstvolgende x-aantal uur dat gewerkt of een opleiding gevolgd wordt Boost niet van toepassing op exp verdiend door rewards, enkel door het uitvoeren van een activiteit Rewards Waar krijg ik welke soorten rewards van? Experience o Van opdrachten uitvoeren/geven o Van opleidingen volgen/geven o Van infrastructuur (ver)lenen o Van (tutorial)quests Experience boost o Bij referral o Van quests Trager zakken van indicatoren o Van quests o Van verjaardag Indicator boost o Van quests

83 Badges o Diverse (zie hoofdstuk badges )

84 Level (x) Multiplier (m) Exp tot volgend level Exp van 1 uur activiteit Aantal uur tot volgend level Aantal uur totaal ,667 4, , ,933 15, , ,000 33, , ,524 59, ,333 92, , , , , , , , , , , , , , ,313 Formule: 800x² mx, waar x = level en m = multiplier

85 8.2.4 Quests Tutorial Quests Omschrijving Vul uw profiel volledig in Voeg een vriend toe Volg een bedrijf Stuur een privébericht Voeg een opdracht, opleiding of infrastructuur toe Voer een opdracht of opleiding uit Voer een betaling uit (geven) Rewards Experience (300 exp) Badge Experience (100 exp) Badge Experience (100 exp) Experience (100 exp) Badge Experience Boost (1u) Experience Boost (1u) Experience (100 exp) Daily Quests Omschrijving Schrijf je vandaag in op een opdracht Schrijf je vandaag in op een opleiding Zoek vandaag naar infrastructuur (+ afhandelen) Bied vandaag een opdracht aan Bied vandaag een opleiding aan Bied vandaag infrastructuur aan Post vandaag iets op het forum Schrijf je vandaag in op een opdracht met [indicator] Schrijf je vandaag in op een opleiding met [indicator] Schrijf je vandaag in op infrastructuur met [indicator] Maak vandaag een opdracht met [indicator] Maak vandaag een opleiding met [indicator] Stel vandaag infrastructuur ter beschikking met [indicator] Rewards Experience (100*lvl exp) Experience (100*lvl exp) Experience (100*lvl exp) Experience (100*lvl exp) Experience (100*lvl exp) Experience (100*lvl exp) Experience (100*lvl exp) Experience (100*lvl exp) Experience (100*lvl exp) Experience (100*lvl exp) Experience (100*lvl exp) Experience (100*lvl exp) Experience (100*lvl exp) 85

86 Week Quests Omschrijving Doe deze week een opdracht met twee verschillende categorieën Doe deze week een opleiding met twee verschillende categorieën Verdien deze week minstens 360 credits Meld iedere dag van de week aan op OWAES (indien de gebruiker redelijk inactief is) Rewards Experience Boost (2u) Experience Boost (2u) Indicator Boost (3% alles) Experience Boost (1u) OF Indicator Boost (2% alles) Behoudt uw [indicator] op minstens x % Indicator Boost (3% [indicator]) Werk deze week minstens 1x in [indicator] Indicator Boost (2% [indicator]) Volg deze week een opleiding met minstens 1x in [indicator] Schrijf je deze week in op 3 activiteiten (werk opleiding infr.) Schrijf je deze week in op 3 opdrachten Schrijf je deze week in op 3 opleidingen Bied deze week 3 activiteiten aan (werk opleiding infr.) Bied deze week 3 opdrachten aan Bied deze week 3 opleidingen aan Indicator Boost (2% [indicator]) Experience Boost (3u) Experience Boost (3u) Experience Boost (3u) Experience Boost (3u) Experience Boost (3u) Experience Boost (3u) Maand Quests Omschrijving Rewards Werk deze maand 6x aan [indicator] Indicator Boost (5% [indicator]) Werk deze maand 2x in alle indicatoren Werk deze maand in [tag], [tag] en [tag] Indicator Boost (3% alles) Experience Boost (2u) 86

87 Moment Quests Omschrijving Rewards Werk 3x aan [indicator] Indicator Boost (5% [indicator]) Werk in [tag], [tag] en [tag] Experience Boost (2u) Volg een opleiding met 3x in [indicator] Indicator Boost (5% [indicator]) Volg een opleiding in [tag], [tag] en [tag] Meld iedere dag van de week aan op OWAES (indien de gebruiker redelijk inactief is) Experience Boost (2u) Experience Boost (1u) OF Indicator Boost (3% alles) Challenge Quests Challenge quests zijn grotere quests die onderverdeeld worden in kleinere quests Bijvoorbeeld: o Persoon X heeft op 01/04/2014 een laag percentage op welzijn o stel 35% - 62% - 32% (welzijn) - 77% o Opdracht: verhoog uw welzijn met 10% Stap 1: 32% 34% Reward: deze indicator zakt 1 dag extra niet Stap 2: 34% 36% Reward: deze indicator zakt 1 dag extra niet Stap 3: 36% 38% Reward: deze indicator zakt 1 dag extra niet Stap 4: 38% 40% Reward: deze indicator zakt 1 dag extra niet Finale: 40% 42% Reward: deze indicator zakt 1 dag extra niet & Exp boost (1u) o Deadline: 30 dagen verder (01/05/2014) 2% per tussenstap 6 dagen per tussenstap 87

88 Notes Wanneer een persoon al op 80% [indicator] staat, kan eventueel een keuze gemaakt worden tussen de Indicator Boost of Experience Boost Quest van de maand o Worden iedere maand vervangen o Aanduiding: nog 20 dagen om deze uit te voeren Quest van de week o Worden iedere week vervangen o [mogelijkheid] een week op voorhand laten weten wat de quest van volgende week is (om mensen te kunnen voorbereiden) Voorbeeld Quest van deze week: schrijf je in op 3 opdrachten Quest van volgende week: werk in 2 categorieën mensen kunnen zo deze week inschrijven en rekening houden met de twee categorieën waar ze de volgende week moeten in werken moment quests o Worden vervangen na de uitvoering o Worden gegeven op kritische momenten Wanneer indicatoren laag zijn Rewards voor inschrijvingen o Wanneer rewards geven? Worden enkel gegeven wanneer men goedgekeurd (of afgekeurd) is Zodat men niet direct uitschrijft na ontvangst van de quest reward Worden enkel gegeven wanneer de betaling uitgevoerd is Zodat mensen die niet afkomen, geen reward krijgen 88

89 8.2.5 Badges Onzichtbare badges Naam Wat een start! Bezoeker Hey hallo! Verzamelaar Ik ben sociaal! Nieuwsgierig Owaesweek Specialisatie Bonus! Omschrijving Tutorial volledig gedaan Verblijf 10 min op het platform (geïnspireerd door samsung) Stuur een privébericht naar 1 persoon Stuur een privébericht naar x personen Verzamel x badges Reageer x keer Raadpleeg x profielen Bezoek owaes iedere dag van de week Verkrijg 4x dezelfde indicator in 1 werk of opleiding Verkrijg minstens x credits in 1 transactie Sociale werker Werk met x mensen samen (gesplitst tussen verschillende jobs) Sociale student Zoeker Vrienden! Bekend figuur Geïnteresseerd Reiziger Jubileum Doe een opleidngen met x mensen samen Gebruik de zoekfunctie Voer x aantal transacties uit Voer x aantal transacties uit gedurende een bepaalde tijd Verkrijg een certificaat Verkrijg x aantal certificaten Verstuur een bericht Maak x vrienden op OWAES Verkrijg x aantal volgers Volg x aantal mensen/bedrijven Leg x km af (totaal) U bent een jaar actief op OWAES Werkweek Werk op iedere dag van de week (maandag dinsdag woensdag donderdag vrijdag) (mag verspreid over verschillende weken) 89

90 Zichtbare badges Naam Multitasker All-rounder werk All-rounder opleiding Omschrijving Voer uw eerste opdracht uit Voer uw eerst opleiding uit Huur uw eerste infrastructuur Voeg een vriend toe Volg een bedrijf of persoon Maak een opdracht aan Maak een opleiding aan Verhuur infrastructuur Profielfoto instellen Profiel volledig aanvullen Voer 2 werken uit op 1 dag Werk in x verschillende soorten categorieën Volg een opleiding in x verschillende soorten categorieën Groepswerk Werk samen met minstens x mensen van OWAES (in 1 job) Klasruimte Expert in fysiek Expert in welzijn Expert in sociaal Expert in kennis All-round expert Ochtendstond heeft goud in de mond Hoe later hoe beter Volg een opleiding samen met minstens x mensen op OWAES Bereik 100% fysiek Bereik 100% welzijn Bereik 100% sociaal Bereik 100% kennis Bereik 100% in alle indicatoren (niet per se op hetzelfde tijdstip, gewoon de 4 voorgaande badges behalen) Start een taak voor 9u Start een taak na 20u Een badge voor het aanmaken van marktplaats-items van in totaal x-aantal verschillende tags Mensen belonen die niet alleen maar taken aanmaken met de tag computer bijvoorbeeld 90

91 Een badge als je een nieuwe gebruiker als eerste befriend Twitter Vermeld OWAES in een tweet Google + Vermeld OWAES op Google + LinkedIn Werker Opdrachtgever Leergierig / Student Docent Mobile Vermeld OWAES op LinkedIn X aantal uren werk uitgevoerd X aantal uren werk opgegeven X aantal uren opleidingen bijgewoond X aantal uren opleidingen gegeven X aantal uren infrastructuur gebruikt X aantal uren infrastructuur uitgeleend Je bent op je verjaardag actief op het platform Breng 5 mensen bij OWAES via het referral system Uw vriend (via referral) is level 4 geworden Bezoek owaes op uw smartphone 91

92 8.2.6 Referral system Persoon A (dienstverlener of 50-plusser) zorgt ervoor dat persoon B bij OWAES komt. Persoon B Dienstverleners 50-plussers Level 1 (start) A: experience (250*lvl exp) B: Direct in groep Level 2 A krijgt indicator boost (1%, alles) Level 4 B krijgt indicator boost (2%, sociaal) A krijgt experience (500*lvl exp) B krijgt experience boost (2u) A en B worden direct bevriend A krijgt indicator boost (5%, sociaal) B krijgt indicator boost (2%, sociaal) A krijgt experience boost (5u) B krijgt experience boost (2u) A krijgt badge 5 mensen aanbrengen als 50-plusser o A krijgt badge 20 mensen aanbrengen als dienstverlener / beheerder o Indicator boost (2%, alles) voor de hele groep 50 mensen aanbrengen als dienstverlener / beheerder o Indicator boost (5%, alles) voor de hele groep 100, 150, 200,... o Indicator boost (5%, alles) voor de hele groep Certificaten EHBO Rijbewijs Zwembrevet Diploma s o Basisschool o Middelbaar o Hogeschool o Universiteit IT certificaten o Cisco o Microsoft o Oracle o Linux o VMware o Adobe Gevolgde cursussen 92

93 8.2.8 Bedrijven Quests voor bedrijven Rewards Voeg 3 opdrachten toe deze week Zorg ervoor dat minstens x mensen zich inschrijven op jouw items. Geef x credits uit deze week Ontvang x credits deze week x-punten x-punten x-punten x-punten Badges Naam Big organiser Leermeester Organisator Broederlijk delen Aanwerver Omschrijving Organiseer een opleiding voor minstens 10 personen x-aantal mensen hebben een opleiding gevolgd bij het bedrijf x-aantal opdrachten opgesteld x-aantal opleidingen opgesteld x-aantal Delen-items aangemaakt x-aantal mensen aangenomen via het platform Een aantal van de badges voor de gebruikers kunnen uiteraard ook gebruikt worden voor bedrijven. Info Voor de concurrentie onder bedrijven aan te gaan zouden we werken met 2 leaderboards. 1 met punten (hieronder verder uitgelegd) en 1 met sterren (de beoordeling die mensen geven). Zo kan een klein bedrijf dat niet veel opleidingen geeft of opdrachten kan uitschrijven ook kans om op nummer 1 te staan op basis van kwaliteit. Om de x-maand zouden deze leaderboards dan resetten. De top 3 op elke leaderboard krijgt dan de komende x-maand een medaille (goud, silver, bronze) naast hun naam (of een speciale rand rond hun foto s) in de verzameling van opdrachten (werkervaring), opleidingen en delen. Punten Bedrijven krijgen buiten experience en credits nog een derde beloning voor opdrachten/opleidingen/delen, namelijk: punten. Deze punten zijn gebaseerd op het tijdsduur ( of exp zonder multiplier) van de opdracht/opleiding/delen. En bij de opleiding telt ook nog hoeveel mensen het volgen. 93

94 Die punten bepalen hun rangschikking op het leaderboard. Sterren Je moet minstens x-aantal keer beoordeeld worden om in de lijst te worden opgenomen. Publiekelijk wordt er een top-10 weergegeven. Val je hierbuiten, dan zie je als bedrijf op je profiel hoever je staat (bv plaats: 15). Hebben bedrijven hetzelfde gemiddelde, dan komt het bedrijf met de meeste (beste) beoordelingen als eerste te staan. 94

95 8.2.9 Varia Gamification Mensen zelf hun interesses laten kiezen: bijvoorbeeld: ik wil deze maand vooral werken op fysiek en mentaal, op basis daarvan quests laten genereren waar ze dan rewards voor krijgen o Reward Experience boost een extra dag dat uw waarden niet zakken een badge Indicator boost (bijv. 4x fysiek verkrijgen boost van 2 extra fysiek (6 in totaal dan)) Bericht altijd beginnen met: Proficiat! Je hebt de badge verdiend! en Doe zo voort! Progressbar voor de levels Meldingen geven als mensen dicht bij een doel zijn van hun quests bijvoorbeeld of als ze bijna genoeg aantal sterren hebben om het te laten weergeven Delen met vrienden op facebook?, kunnen ze laten zien dat ze niet alleen maar thuis zitten maar effectief naar buiten gaan en proberen een job te zoeken, en hun vrienden gaan hun misschien motiveren op facebook (goed zo, veel geluk, ) o Eigen ego o bekendheid Forum o Request systeem o De optie geven om gebruikers om om hulp te vragen, ipv te wachten op een cursus webdevelopment, kan die persoon vragen of er iemand een cursus webdevelopment wilt geven, als er dan genoeg mensen zijn die geïnteresseerd zijn zal er dan misschien wel iemand zijn die zo n cursus wilt geven. Zo moeten mensen niet blijven wachten op een bepaalde cursus als ze iets bij willen leren, zo kunnen ze zich eventueel voorbereiden op jobs in de toekomst. CV uploaden 95

96 -- Nieuwe notities -- Waarderingen o geven (terugwerkende kracht) Max 2 weken Level limit: enkel opdrachten vanaf level 2 kunnen gewaardeerd worden o Eigen waarderingen bekijken Vanaf 5 waarderingen verkregen Vanaf level 2 Aanduiding van de levels o Verschillende borders per level (zie hoofdstuk Levels ) o Ook een aanduiding in nummers (level 1, level 2,...) Vrienden Volgers Vrienden Kunnen mailen naar elkaar Zien volledig profiel Notificatie:... heeft je toegevoegd, wil jij hem/haar ook toevoegen? Volgers Zoals twitter Bijv. Je wilt alles op de voet volgen van een firma Vrienden voorbeeld: Persoon A voegt Persoon B toe, B krijgt melding A heeft je toegevoegd, wil jij hem ook toevoegen? B heeft nog niets ondernomen: B kan naar het profiel van A kijken, maar niet omgekeerd B weigert: A krijgt melding dat B weigert, zo kan A eventueel ook zijn vriendschap verwijderen B accepteert: A en B krijgen meldingen dat zij beiden vrienden zijn met elkaar en kunnen elkaars profiel bekijken Algemene Beheerders o Dienstverleners en Administrators kunnen: Een account bevriezen Stopzetten of blokkeren Beheerders in een groep o Beheerders werken niet Laten de groep iets doen Door interactie met de groep, stijgen de indicatoren van een beheerder o Bijvoorbeeld CEO, HR en IT zijn beheerders van een groep CEO heeft interactie met de groep (een betaling afhandelen) 96

97 Zowel bij CEO, HR als IT stijgen de 4 indicatoren gelijkwaardig Eventueel een verjaardagscadeau: de indicatoren gaan een week lang niet zakken of een experience boost 97

98 Notities Groepen (zoals VDAB) kunnen eventueel via OWAES zelf workshops organiseren om mensen te helpen met solliciteren en hun cv op te maken. De gebruikers wekelijks (maandelijks) een mail sturen met hun vooruitgang (of achteruitgang) van deze week en tips geven met wat ze beter kunnen doen. Soort recap van de voorbije maand/week. Wanneer men inactief is, vragen of deze werk hebben gevonden. Indien ja, contact opnemen met admin account bevriezen. Op hun profiel of op de home pagina weergeven hoe goed ze bezig zijn tegenover mensen in hun buurt, mensen van dezelfde leeftijd, vrienden,... Een grafiek waarin het gemiddelde van mensen in hun buurt (10 dichtstbijzijnde) wordt weergegeven tegenover hunzelf We kunnen dan ook taken voorstellen die nu bestaan voor de indicatoren waarin ze achter staan op hun medemens, in dit geval taken die vooral bestaan uit Mentaal en Fysiek werk Mentaal Fysiek Welzijn Kennis Mensen in de buurt Jij Na elke job duidelijk weergeven wat het verschil is (blauw = current exp geel = verdiende exp oranje = exp verdiend door boost): Vs Giften beperken, als mensen merken dat ze in het rood komen, ze niet direct terug in het groen kunnen komen door iemand anders credits te geven. Zo worden ze geforceerd om andere manieren te zoeken om credits uit te geven en in het groen te blijven. Mensen mogelijkheid geven om publieke reviews te schrijven voor bedrijven die opdrachten posten op de site (zijn het goede werkgevers, hoe waren de collega s, hoe goed werd je begeleid, hoe was de infrastructuur, kon deze goed lesgeven,...). 98

99 reward voor de review, eventueel een exp boost 99

100 8.3 Verslagen Thomas WEEK 1: DESIGN, DESIGN, DESIGN We started our internship by studying the project. We read some folders and presentations they made. We learned what gamification is and what this projects hopes to achieve with it. How will they use gamification for workactivation? In the afternoon I tried to change the colours of the logo, to see if other combinations would work. Eventually the logo stayed the same. The next day we started by choosing the colors for the website. This turned out to be pretty difficult (it had to be bright colors). We had to work with the color yellow and not many colors worked with that. Eventually we started to work on our first design. In the afternoon we got the opportunity to listen to people of wacomm. They held a presentation about their newest products and answered all the questions we had. The next day we presented our first design. It was not so good. Then our mentor proposed to make a few total different layouts and show them together. That's what we did for the rest of the week. On Friday there was one design he found good and we got a go to design all pages in that design. But he still wanted one more design, something with other colors then yellow. I started to work on that for the rest of the day. 100

101 Week 2: Design part 2 Monday: The design I made Friday was not approved completely. The idea to work with puzzle pieces was good and we had to integrate it into the design Arne made. We had to try a few versions (round corners, sharp corners) and eventually sharp corners where chosen. We also had to make changes to the footer and I designed a few versions of the header. Tuesday: On Tuesday I started to design the page with the information on who "OWAES" is and what they can do for the people. In the afternoon i started to design the Account page. It's the page where they can fill in and adjust their profile. In the afternoon we got the opportunity to listen to the guy that made the animated short story MIA. It was very interesting to hear how you make an animation short story like that and how long it takes to make it. Wednesday: I started to design the Messages page for the users. Here they can see the conversations they have with other people. I designed a few versions and showed them. I also designed the Activity page. It's a page with an overview of almost everything of the site: jobs you applied to, your jobs, payments, ratings... At the end of the day I searched for new icons for the badges. Thursday: I started to work on the Users page. It's the page where all the users (that gave permission for it) come in. You can see which badges and certificates have. I made 3 versions of it and showed it. Then we decided to develop one of the versions and then if everything is finished to implement the others. And give the users the choice which design they prefer. In the afternoon I started to work on a map of the site with screenshots of the pages to get an overview of the site. Friday On Friday we got the feedback on the first version of the map. Our mentor wanted something scalable, because the images where to small now. I found a style sheet to make a sitemap in a very nice way. Arne found a way to show the images when you clicked on the menu items and he worked it out. We also had a meeting with Benedict about the platform. He explained everything of the platform. How it works, what can change and what is supposed to be in it in the future. At the end of the day we had a meeting with our mentor to discuss how our internship will look in the future weeks. Now me and Arne knows what to do in the future weeks and know when we have to work together and when we have to work alone. 101

102 102

103 Week 3: Drupal Monday: On the first day of the week I started to work with Drupal. I started with reading some documentation on the site and then started on the book: Beginning Drupal 7. At the end of the day I got to the chapter about panels. I learned about nodes, menu's, setting up a forum and much more. Tuesday: On this day I first finished the book. I learned about theming and the administration of a Drupal site. In the afternoon I started to experiment with designing a Drupal site. At the end of the day I started to work on the footer of the new site in Drupal. Wednesday: On Wednesday I finished the footer. I had a lot of work on making it mobile. I had to work with a few media queries to make a good flow of screen to mobile. In the afternoon I started to work on the partner s page. It was difficult to figure out how to split the content like we designed it. In our design it is a line with 2 triangels. Thursday: Today I tested the partner page on different screen sizes and noticed a big problem. The triangles weren't moving and it looked terrible. It took me a while to figure it out but eventually it looked good and it was responsive. Then I noticed if forgot to make the images in the footer clickable. So I added links to the images and noticed the images where suddenly bigger. I started to look for what caused it but I didn't found it. So I decided to leave that for Friday. Friday: On Friday I figured out why the images where suddenly bigger in the footer. In css there was a rule for the last image in the footer. Since every image was now in a "<a></a>" tag, every images was the last image and so became bigger. Then me and Arne joined our designs together and put everything in one css file. It took a while to make everything work. In the afternoon I started to work on the contact form of the site in Drupal. Next Week: The problem we have now is that everything is in static pages, we didn't used the power of Drupal. So we need to fix that next week. And make every page of the site in Drupal. 103

104 Week 4: Drupal Monday We started the week with figuring out how we could create the pages of last week again, but in the Drupal way. It took me a while to find it, I went back to the book and read some more on the Drupal site. Eventually it worked but I had to rewrite some css. We also had some trouble to figure out how we could put custom divs around the stuff Drupal generates. We had to adjust some php files and it worked. Tuesday On the partners page there are logos of the partner and if you click on them you should go to their website. I searched for a module to accomplish that. Then I wrote the css to make the partner page fit on mobile. After that I helped Arne to figure out how he could put a custom div around 1 content-type on the view of the Home-page. On the home-page are 2 different content-types and it's not possible to put a custom class to one of those content-types. Eventually Arne found a solution, he works with 2 views now on one page. Then I started to work on the contact page. If people fill that in there will be sent an to the admin of the site. Then I searched for a module so the admin can reply on the site. Wednesday I had still some work left on the contact page. I couldn't get the lines with the triangles like I wanted. After trying different things I started to work on another page. I started on the documents page where they are grouped by 3 categories: brochures, presentations and word- 104

105 documents. I found a module so that the admins can upload multiple files with one node. At the end of the day the all the css was written and it was made responsive. Thursday I finally found a solution for the lines on the contact-page. Then I made the contact-page responsive and tested the page in other browsers. There I found a bug. In Chrome one of the actives didn't work. I tried to find a solution, didn't find any and left it to fix it later. I started to work on the info-pages for the different clients. I created 2 content-types, one for the introduction and one for the rest of the page. Friday I started to work on the 2 other pages for the clients. Since the build-up was the same I could reuse the css. So it didn't took very long to create it. Then we had a meeting with our mentor to see if we are still on track and discuss what needs to be done next week. After that we fixed some minor things on the footer and the menu. We also joined our Less code together. In the afternoon we started to look for a different font. We searched on google fonts for a few possibilities and presented them to our mentor. Ps: Now you see double triangles, this happened because Arne found a way to make it appear on every page. So later, when they add page there will be automatic these lines with the triangles. On Monday we will have to edit our css so it won't appear double. 105

106 Week 5: Final part of Drupal Monday Started on the "50-plussers, Dienstverleners, Bedrijven" pages. I work with one view for the menu-item "Voor wie". The menu is build-up by a vocabulary of taxonomy terms. So if you add a term to the vocabulary, there will be automatically created a menu-item with that term. Then if you create content for these pages you just need to check which taxonomy terms are fit. And if you go to one of these pages, the view will filter the content according to the taxonomy term. I also made it possible to upload images to the "Documenten" page. And adjusted the partners page a bit. Tuesday Today I finished the css for the "Voor wie"-pages and made it fit on mobile. Then I searched for some new images that would go on these pages. In the afternoon I started on the new contact page. Also fixed a few small bugs on a few pages. We also had the chance to watch to a few TED-talks. The subject was gamification and how to use it to live longer. Wednesday Today I finally finished the contact page. It works with 2 views, one for the partners and one for the form to ask questions. After that I helped arne a bit with the casetracker. I also adjusted some content-types and views so you can sort them on the field "weight". In the end I started to clean up the css file. Then I opened the site in different browsers to see if everything works as intended. I noticed some error on the mobile version and started to fix them. Thursday I fixed the footer on the mobile version. I searched for some icons for on the documents page. So if you upload a word-document, that an icon of word is shown. And also fixed the mobile css for this page. In the afternoon I and Arne searched for images on the FAQ-page. We understood from the mentor that 1 out of 3 questions needed an image. Friday Started the day to finalize the css of a few pages. There were a few things that didn't worked in every browser. Then we had a meeting with our mentor and received a few pointers: Fix some links in the footer Links on the document page so partners can upload documents Remove links in the footer Design a few versions of the contact page 106

107 See that the font is used on the entire site Make sure that on the contact page the subject is filled in when you come from the FAQ page Use a language module Help people with the search if there are no results found Everything was finished in the afternoon except 2 items. The design of the new contact page was approved, now its need to be integrated. And we still need to use the language module. 107

108 Week 6: PHP Monday I first started on the new contact page with the form first and then the contact information of the partners. We removed the title and just used the logos. Then I removed some views that we didn't use anymore. I accidentally removed too much and had to remake a few views. I also removed some content-types and some content we don't use anymore. In the afternoon we started to learn the php code of the platform. It was hard to choose where to start and I decided to start with the login and register files. Tuesday Today I started with how the pages where build up. I found some template files with HTML and "[Name]" tags like that. He replaces those tags with a function with the right information. Then I started to figure out how the message system works. Arne found a bugg that you could insert JavaScript in the textbox. So we added that to the cases that needs to be fixed. While we were learning the php of the platform, Benedikt was trying to copy the cases of the original site to the new site. He found a module to do that, unfortunately it copied the ids of the cases. So the content on the new site with the same id was removed. We had no back-up, so at the end of the day we recreated the content. Fortunately it wasn't that much work. Wednesday Today was the jobhappening organized by howest. From 9.00 till there where sessions you could follow about some of the companies that where there. Some sessions helped you with how to prepare for a job interview and how to fill in your CV. I followed the sessions of name1, name2, Bob madou, name 4 and name 5. After that we had the opportunity to go on a job interview with the companies we were interested in. 2 companies stood out for me: iadvise and Callibrate. iadvise is a consultancy company specialized in oracle and apex. They guide you very good in your job and apparently have crazy Christmas parties. Callibrate is part of a bigger company. They asked some questions of what I want to do: Drupal,.net, front-end, back-end. At the end they said to think about what exactly what I want to do and mail them. So they could setup an interview with the company that fits best with what I want. Thursday Today I started with rearranging the documents page, our boss wanted titles on every page. On this page there is also a block with 3 links to adjust every segment (presentations, documents and brochures). Because of the title it needed to be placed somewhere else, tried a few combinations. Then I adjusted the active of the menu, so when you are on a page the main menu-item was still active (and not only the submenu-item). Also adjusted the javascript file of the menu. So when you click next to the menu, the menu closes. Before you had to click on the menu again to close it. 108

109 Also figured out how to get the name of the taxonomy term as a title on the "Voor wie"-pages. But I couldn't find a way to adjust the url. Now it says "/voorwie/30" instead of "/voorwie/bedrijven". Will keep looking for an answer. I ended the day with figuring out how the recover.php works on the platform. Friday Today Benedikt uploaded a newer version of the platform. So I started to look what changed and why it was better then before. I also started to look to other gamification platforms and how they apply the gamification layer. I found 5 company's help businesses to increase their customer loyalty with gamification: Badgeville, Bigdoor, Gamify, Punchtab en Userinfuser. In the afternoon we had our weekly meeting. We received some small points that need to be changed. And we need to document which modules we installed, why we used them and how to configure them. 109

110 Week 7: Understanding gamification Monday I started the day with making the url aliasses. Since I couldn't find a way to change the urls of the taxonomy based pages dynamically, I had to apply the last resort. Create the url aliasses manually in Drupal. Then I adjusted some of the content-types to make sure they won't be published automatically to the home page and the comment system is turned off on default. We also received the assignment to document everything we did on the site. So later they would know which modules we used, why we used them and how to configure them. Arne wrote the part on the css, bootstrap. I wrote the most of the modules and the content-types I created. At the end of the day I started with the coursera course about gamification. I started to view chapter 1. I find the guy teaching the course very good, he explains it very clearly and I look forward to the rest of the course. Tuesday Our boss mentioned yesterday that the <'h3'> tags in paragraphs aren't styled yet, so I fixed that. Then for the rest of the day I watched the videos of the gamification course on coursera. I watched the chapters and a few videos of 6. The chapters were about what is exactly the definition of a game, why would we use gamification, how do we think like a fame designer, what is the standard of gamification and how do we motivate people and influence their behavior. During these videos I wrote down some ideas and elements we could use for OWAES. Wednesday I started to watch the last videos of chapter 6, it was about the dangers of Behaviorism and the different kinds of motivation. Meanwhile we received a document of our boss with some modifications to the website. Some small errors that still needed to be fixed and some changes to the contact page. He wanted some extra fields on it and that when you came from the FAQpage you wouldn't see these fields. For the rest of the day I and Arne worked on everything that was on the list. Thursday Started to watch the first videos of chapter 7, it was about the dangers of gamification and I figured that was important before thinking about some more concepts. We also needed a new image of a man on the home-page. I found one, it turned out later that that image was already used for some commercials so we still needed one. At the end of the day I found one. I and Arne discussed some more ideas of the gamification aspect of the platform. We wrote some ideas down and planned to watch the rest of the videos and continue Friday with the discussion. So I watched the rest of chapter 7 and 8. I also watched some TED-talks on gamification, so that maybe I would get some different ideas then I already had. I watched a TED talk of Gabe Zichermann (The Future of Creativity and Innovation is Gamification) and a TED talk of Catherine Aurelio (Gamification Critical Elements of Gamification). 110

111 Friday Watched the final videos that where important for our platform. Then started to think of ways how to get people to return to our site and how to keep them there. It is also important that our platform has a social aspect so I wrote some ideas to show to Arne. In the afternoon me and Arne discussed our ideas and made a document to send to Benedict. So he could make some remarks and we could adjust our ideas during the vacation. 111

112 Week 8: Gamification Tuesday We started the day with a meeting with Benedict and our boss. We went over the document with our ideas of how to applie gamification to the platform. The meeting took about 2.5 hours and we got a lot of feedback. For the rest of the day I and Arne worked further on the document. We made it more concrete and put some numbers on the rewards and the level. Wednesday Today we worked further on the document. We figured out a formula for the levels. For the rest of the day we worked on a bug on the site. Every time you try to delete a user we get a ajax http error. We search all afternoon but still couldn't figure out how we can solve it or what causes it. We also changed some small items on the site, like the text on some buttons were still in English. Thursday We searched further for the bugg of deleting users. Our boss told us that we needed to change the formula for the levels. He wanted that after 3 levels you had an easier level. So that the users wouldn't have the feeling it is always an uphill battle. Then I wrote down some ideas for the administrator page on the platform. After that Benedict explained to us what pages he wanted us to design for the platform. Because now with our gamification layer some things needed to change of the old design. For the rest of the day we worked on that. Friday We worked further on the design of the new pages for the platform. By the end of the day the home page and the add-item pages were ready. The home page is the page were the users are triggered to work on their indicators and were they can view their quests. The add-item page was a tricky one. Because of the selection of the date. It must be easy to select one day, few days, repeating for a few weeks and so on. Arne did a terrific job on that. 112

113 Week 9: Redesign Platform Monday I started Monday with fixing the front page based on the feedback we received last week. Then designed how a help-popup would look like. Then started to design the admin page of the viewers. Here admins can see which users have bad indicators or have too much/few credits. From here the admin can go to the detail page en take the appropriate action. Tuesday Today I began the design of the map element for the home page. Here the users can see the nearest: friends, jobs and learning opportunities. I used different colors for the pins and the users will be able to filter what they want to see. Also designed the edit-profile page where users can decide what they want to show the other users. Started to think about gamification for the companies and showed my ideas to Arne. At the end of the day we received feedback on the designed pages. Wednesday Started the day with adjusting the pages with the feedback we received yesterday. On the profile page where some blocks missing and also added some blocks to the home page. Searched further for a replacement picture for the 50+-page on the Drupal site. Added the design for the stars on a few pages (users can give feedback to jobs and so on). Fixed the graph on the detail admin page. So the graph for the indicators and the credits are one. You can also filter on what you want to see on the graph. Thursday Adjusted some small things of the profile page with the received feedback. Then began on the new version of the details job page. After that Arne wanted to throw our files together, while he was doing that i searched for some more pictures for the Drupal site. After Arne was done I designed the new messages page, got feedback from Geert and then fixed it. Friday On Friday I draw the site on a few pages to figure out which pages still needed to be designed. I found 4 pages that still needed a design. I worked on the login/register page. First looking on some examples on the web and then began in Photoshop. The I designed the page where the users can see their badges and which badges they can still earn. As the last page I design the account-settings page where you can change your password and find your referral link. You can also choose to disable your profile, people will not be able to find you on the site. Also found a site where we can design our badges if we needed to design them ourselves: 113

114 Week 10: Platform Monday Started the work on the footer, it is the same footer as on the drupal site. So all I had to do was to copy-paste the html and use it on the platform. Then I used the same css as on the drupalsite. I had to make a few adjustments and rewrite some code to make it responsive. The rest of the day I worked on the "Werkervaring", "Opleiding" en "Delen" page. For the most part they exist of a list of "owaes-items". I first started with the filter and replaced the icons for the indicators. In the new design there is more information in these items so for the beginning I inserted some dummy-data so I could start with the css. Tuesday Today I worked further on the pages of yesterday. The big problem was the buttons in these items, in the design the start with a triangle. But both Arne and I had trouble making it work so we decided to come back to that later. In the afternoon most of the page was done all I had to do was to make sure it is responsive. Thanks to the Bootstrap-classes a large part was already written. I also replaced the dummy-data with data from the database. Wednesday In the morning i finished the responsive of the previous pages. I had some trouble with some of the icons but everything worked out fine. Then I started on the details of an "owaes-items". Here people can write comments on the item and see who else is participating. The top of the page is pretty much the same as the owaes-item on the overview-page. In the afternoon i worked on the sending messages part of the page and started working on the responsiveness of the page. Thursday Today I finished making the details page responsive. Then I started on the messages page. Since we first must finish the css before we start to write some php. I decided to fill the current message page with some dummy data so later on we can replace it with data from the database. The hardest part was to rewrite some of the code so every conversation was in a separate div. Now only the message where in a separate div. At the end of the day most of the page was done. Friday Today I finished the conversations page. I also started looking for a way to design the scrollbars. It is different for each browser, you cannot write css for all the browsers at once. Also fixed some small buggs on the site. 114

115 Week 12: Platform Monday Multi-Mania Tuesday Multi-Mania Wednesday I started with replacing the dummy-data on the messages page with data from the database. At the left-side there is a list with all the conversations you have grouped per person. Only getting the date of the last message was not successful, have to fix it later. Also made the page responsive. The last thing I did was fixing some small errors on the detail-item page. Also tried to sort the messages page. In the code the conversations are grouped per person. I tried to sort it so the conversation with the last new message was first, it didn't work have to get back to it later. Thursday On the message page there was an error. If you didn't had any conversations (a new user) and you went to the messages page you got an error. My first fix was that a conversations with the admin was automatically started. Received feedback on it and it was preferred that there was no conversation. So I adjusted my code. Then our boss asked for our help. While building the Drupal site from the ground up (with all the files and modules from the previous one), there were some errors. The rest of the afternoon I and Arne fixed the errors. At the end of the day I started with the admin page. The page were you get a table with all the users and you can see directly who is not doing well. Friday Today I finished the admin page. I worked out you can filter based on the table headers. If you click on one of them it is sorted ascending. Also implemented that there are several pages. Now you get per page 10 users. Also now you can see which users are not doing well. The fields with bad indicators are in red. 115

116 Week 12: Platform Monday Today I started working on the detail-admin page. On the admin-page there is a link per user where you can see the details of this users. You get a graph with his indicators and his creditscore.the difficult part was the filter-options. I looked at how Benedict made the graph and noticed he used Flot, a Jquery library. Luckily you could filter the graph with the library. After trying a few things it finally worked. Then i added some links so admins can undertake some actions against the users. Tuesday Today i finished all the pages of the admin: the group-admin, users-admin (little different then the standard admin page) and the details of the group-admin page. The difficult part was the pagination. In the standard-admin page every time you switch page there is a new call to the database. So you could filter it by "LIMIT 0,10" for example. Now everything was already called from the database and I had to filter the array based on the page the user was on. After some searching it was finally done. In between the pages i made a few badges on Wednesday Today I had a bad day. At home everything worked fine. But when I went to the level and tried to connect to the internet it wouldn't work. I had a limited connection. I tried to restart my pc and see if it was fixed, it was not. I went back home to get a cable and try to connect with a cable, it also didn't work. I tried a few other things but nothing worked. Then i went to the helpdesk of Howest. He tried a few things but again nothing worked. Apparently it has something to do with the network of howest that causes some students not being able to connect to the wifi. After that I went back home and worked from there. In the afternoon i fixed the links on every page so you can send a message or send credits from every link. On some pages it was still static HTML. 116

117 Week 13: The final week Monday Today I started on the home-page. It exists mostly out of static HTML, Benedikt will replace it later with information from the database. I started with the user part. I copied the html that is used at the top of each page for the user-information. I moved some things around and started to write css to get everything into its place. In the afternoon i started to work on the map. On the map people can see the closest owaes-items and persons. I had some trouble with getting the information of the items into the popup of the marker. Eventually it worked and i began on the quest-blocks. Tuesday Today i changed the quest-blocks and replaced them by css classes from bootstrap. So it automatically slides open en close. Then i switched with Arne, he was kinde tired of responsive. So for the rest of the day i was busy with that. Wednesday Today i finished with the home page. Arne made the credit-meter move. So it would be the same as the amount of credits you have. I fixed some erros on the responsive of the userlist and found an error in the footer. Then i noticed an error on the messages page. You couldn't send message anymore. It turned out some functions weren't in the right place so they wouldn't be executed. By the end of the day everything worked again. Thursday Today I started on the last page: the search page. I worked on it all day and it was finished by the end of the day. Friday Today was the last day of our internship. Everything we needed to achieve this week we achieved. The last thing I had to do was fix something on the results page of the search. After that was done I worked further on some badges. 117

118 8.4 Verslagen Arne [WEEK 01] KICK-OFF & DESIGN Day 1 17/02/2014 On our first day of internship we got to know each other. In the morning we did some research for content by reading through papers and PDF files so we got to know OWAES. In the afternoon I started on a first design while Thomas tried out some colors. This first design was something our later design was based upon. Day 2 18/02/2014 On our second day we got to choose our color pallete from Kuler, because we needed something to start our design with. After endless searching we just agreed to search for a pattern as a background and again we didn t do anything with it. Whereafter I got the idea to use a gradient as a background. Something to resemble the sky, from blue to white, which actually fit. Hereafter the ideas kept coming: using clouds, birds and even an oasis as a footer, all drawn with illustrator. All this was finished somewhere in the afternoon and at that point, we were stuck again. What colors to use for our menu, our information boxes etc etc. (Image: bottom of the page, Design 01 ) Day 3 19/02/2014 After finishing up our design we uploaded them into an album so our mentor could review them. He said it quite resembled an older design of them, where they got the feedback (from their partners) that it was too childish. Here, we decided to each make a seperate design from scratch so we had more variety in designs.this day, we actually tried out some color palletes. Made a few colored designs out of the same basic one. Orange, yellow, blue, red, we tried a bit of everything. At the moment of feedback we were told the yellow one was the best, but it needed some more tweaks. Day 4 20/02/2014 Day 4 started with some more research, each on our own. I started making a moodboard and got to the idea of using blocks as a menu item, which are quite large and good for our target audience of people of age 50+. More straight lines instead of curves and more rectangles (and even polygons) instead of rounded rectangles. Yellow and purple were my two primary colors for this design. When this was finished I tried making a page for the platform itself based upon this design. (Image: bottom of the page, Design 02 ) Day 5 21/02/2014 The polygon design was OK, but needed some more modifications and I got another idea for the layout. So I quickly created another home page and eventually this was the one chosen by our mentor. While he asked Thomas 118

119 for another design (which maybe will be even better?), he said I could start doing some other pages and work out the menu with dropdowns and a footer. (Image: bottom of the page, Design 03 ) A sequel to all of this Next week I ll continue making other pages in our latest design and it will probably be finished at the end of the week. If Thomas comes up with a better design, I ll stop this and we ll both be making other pages on his design. 119

120 [WEEK 02] DESIGN, DESIGN DESIGN? Day 01 24/02/2014 The first day of a new week. We started off showing what Thomas had made friday afternoon. It is then that it was decided that we could work on my latest design and we tried some more things, Thomas had the idea of using triangles in the shape so it would feel like they connect. The rest of the day we tried some different navigation bars (menus) and footers. At the end of the day, the result was something we all liked. Day 02 25/02/2014 Day 02 was pretty straight-forward, we made some designs and that s it. I focussed on the FAQ page, the documents, the developers page and the contact page. We also tried making a home page for the platform but our mentor said it d be easier if we d leave that for now, because it s the most important page and most customized to our visitor, it d be the most difficult one to make as well. And as long as we don t have the right content, we d better not yet start designing the page. Day 03 26/02/2014 On Wednesday, we continued on the platform. I started making the profile page and different views for assignments (and with market place being practically the same design as the assignments, that made 2 designs in a row!). I made a column view with two columns, a detailed list view and a small list view so the user can decide for himself which one he prefers. Day 04 27/02/2014/ I started the day off with searching for other images under the creative commons license for OWAES s about us page. Afterwards I made a page solely for the purpose of credits (sponsors, partners and the people who own these images). After this page was done, we tried out some use cases and noticed we missed a detail page for the assignments. While Thomas was making a workflow of the complete site and platform, I made that detail page. Day 05 28/02/2014 Today we started off remaking the workflow map for our site, I used a HTML photoviewer Lightbox and Thomas found a template to make a tree view of OWAES s new website and platform. So we put these together and made this. Afterwards we gathered for some general feedback and improvements and more details about the platform. Hereafter I tried out the menu in HTML with Bootstrap and Icomoon and we discussed the schedule for the next few weeks. 120

121 [WEEK 03] INTRO DRUPAL Day 01 03/03/2014 On my first day of the new week, I started learning things about Drupal. I read through some documentations (will it be PDF s or the official Drupal documentation) and finished everything up untill theming. I learned about making new nodes, updating menu s, managing users and roles, different modules, content types, blocks and so on and so on. Or more practical things like making a forum or setting up a poll or suggestions box. Day 02 04/03/2014 On Tuesday I started with theming, from here on I quit doing things with documentations or the PDF and started trying things myself. When I was done playing around with theming in Drupal I started making the menu of OWAES with the Bootstrap Theme as a starters theme. As I am a great fan of Bootstrap I was quite fond of using Bootstrap in Drupal (plus: Bootstrap comes with LESS, which is another great advantage!). It did take a while untill I found out how to use the LESS file in Drupal, after a little (or a little more) searching I found a module which processes LESS into CSS and I was ready to go. Day 03 05/03/2014 On the third day I finished most of the home page and made it responsive. I also created the other pages, but without content or layout so I could update the menu. While I was doing this, Thomas made the footer and started on the page partners. Day 04 06/03/2014 While the home page was nearly finished, it still needed some content (it used to be lorem ipsum text). After inserting the content I had to redesign a LOT because of the space it took, especcialy mobile. I also updated the menu so it would look a bit better on mobile and made the menu items a fixed width (which actually was a lot more time-consuming than I thought). I also changed the rights and roles so only authenticated users could see some extra menu items. Day 05 07/03/2014 The last day of the week I created the triangles on the home page, with :before and :after I created some CSS triangles. Afther this, I joined both Thomas design with mine. When this was done I started on the FAQ, which resulted in some problems with jquery UI since I needed the accordion and the jquery UI which is in Drupal is only the core version, without the accordion extension. 121

122 Next week Now we have static pages, which we ll convert to different content types next week. That way we ll be using the power of Drupal so people without knowledge of HTML can easily edit or add content through different content types. 122

123 [WEEK 04] DRUPAL-THINKING Day As said in the previous post, I ll start making new content types today. For the home page I ll need two: a large and a small block, named Home Block (HB) and Home Small Block (HSB). The HB will be used for the two more important blocks, the HSB for the last three less important ones. I made a view with these content types and linked it to the home page. I also started changing the template PHP files so I could use my own CSS from last week. Day I changed my view a bit so it would become a nested view. The root view would show only HB content types, the view nested in this root view only the HSB content types. This way, I can make a wrapper class in HTML around the three HSB (which wasn t possible in one view). The prime advantage of these views is the fact that people without knowledge of HTML can make a HB or HSB and these would be automatically pushed to the view on the front page. For the rest of the day I continued styling the home page (especially the mobile version). Day Today, I FINALLY finished the puzzle known as the home page. What a relief! When done with the home page, I immediately started on the About Us page. Which as of the end of the day, is finished as well (except for two stock photos). Day As of today, the FAQ page is also finished (with lorem ipsum text, this will be edited when the proper text is given). There s a listing of questions by category (website/platform/other). When clicking on a question, the question expands and you can see the answer and the + (plus) becomes a (minus). When clicking on another 123

124 question, the previous one collapses. I just started the developers page and installed a module called case tracker. Day On the last day of the week, we fixed some minor things like the menu and footer (which still wasn t good on larger screens and changed the footer text) and margins in the FAQ. After this was done we once more joined our LESS code, chose a font and I also made it possible to use the triangles on each page (with the appropriate container). Now we only have to add the triangle-container and it should automatically have triangles in :before and :after. I also looked for some stockphotos on the about us page (which was created on Wednesday). To be continued Next week we ll continue doing what we were currently doing and also ajusting the user roles. 124

125 [WEEK 05] MODULES, ROLES AND MANAGEMENT Day 01 17/03/2014 This week, I started off with what I finished previous week: I continued styling the triangles on every page. It was a pain in the *** with each and every page having different margins on its rows (from views). So now, eventually, each row has a border-bottom, a fixed margin, a :before triangle and an :after triangle, with the exceptation of the :first-child row and the :last-child row. When I was finished I started updating the FAQ page with actual questions and answers (not just lorem ipsum text). I received an 18-page-long document with 7 chapters. When I finished chapter 2, I took a break and went on google searching for a search module for this FAQ, I found one especcially for the FAQ module we re using, but this one was out of date (only for Drupal 6). A little while after I found a custom search module and customized it to only search FAQ content types, but it didn t really work as intended either, so I continued filling up the FAQ page. Day 02 18/03/2014 While the FAQ page was finally filled with content it still needed a searchbar and each individual node of FAQ question/answer needed styling. I started off changing the template files of the content type and styling it afterwards. When I was finished I did the same for the search form. There is still one more issue though: the form on the results page doesn t have the same template file as the block and I can t find the template file for the results page (yet). So I still have to figure this out. I also insterted the right content in the footer, which was too much for the current style so I had to adjust this as well. 125

126 Day 03 19/03/2014 Today was a great day, I both fixed the problem where people sometimes had to double click on the menu as well as the vertical scrollbar problem on mobile. The latter was possible with one line of code: overflow: visible. The first one was more tricky: when people navigated within the same parent menu item (let us say from faq to about us (which both are in the parent info )), people had to double click the parent (in this case info ). this was due to drupal remembering which was collapsed or expanded (with CSS classes) and since I couldn t edit that, I simply removed the class expanded with javascript. I also finished nearly all of the FAQ, there are now links from within answers to other questions and I searched some CC images (but I have to find about 20 more since it has been asked to provide images for one every three images). I also tweaked the search bar on the search results page a bit, I still have to finish that one though. And a last edit on the FAQ page: I added a link so people could enter their own questions (a link to the contact page). To finish the day I continued the developers page. Since my Case Tracker module wasn t working well, Thomas had the idea of copying the original one (from the original OWAES ftp) to ours and that worked like a charm. I added a little CSS (or LESS) to the view and now this page is finished as well. Day 04 20/03/2014 Today we mostly went searching for other copyleft images. Next to that, we also adjusted the user roles and their permissions (for example, normal users can t see the documents or developers page). Some small edits were also implemented (like pictures on the faq page). 126

127 Day 05 21/03/2014 After our friday-meeting we got a little feedback: Edit the links in the footer Change some links in the FAQ Change the contact page so the form would be on top A way to upload documents on the documents page Use the font throughout the whole site When people get to the contact page through the FAQ page (by submitting their own question ), the subject has to be filled with FAQ Use the javascript back method to go back to the search results Use a language module or translate module so it d be possible to filter on language When there are no results found, help people using the search (like for instance using the OR) These features were all updated today, except for the last two. The javascript back method was interesting because if the user came to the page form an external site (let s say google), the history back wouldn t be OK. So I checked with document.referrer if the previous site was OWAES or not. When thiswas not OWAES, the link just goes to the overview of all the FAQ s. When it is OWAES, it d use the window.history.back(); method. Level up! We ought to be ready on Monday with the last two bullet points on the feedback list. So next week, we ll be reviewing the platform and how the code works. 127

128 [WEEK 06] INTRO PLATFORM Day 01 24/03/2014 The drupal site was nearly finished, I only had to find a way to register the nodes as Dutch nodes instead of English ones. This resulted in installing a module whereby I had to make changes in the different content types. After I made these we had to change each and every node individually to Dutch. When this was finished (somewhere in the early afternoon), I started downloading the php files of the platform and took a first look to the code of the platform. Day 02 25/03/2014 Today, I looked further into the php files and started off with the main.php file, which is the file who handles both the market and the work. Since their both the same designs but with different content I now understand why it only has one php file for both pages. After this was done I continued the login file and how the login is handled. Afterwards, I also took a quick look into conversations but never really got further into it. I also found that the platform was still vulnerable against XSS attacks by testing it myself on the test platform, also URL hacking was still possible with the conversations to make a conversation with someone else. For the XSS testing, I just send a message to Thomas containing <script>alert( test );</script> so now, everytime we open up our message window on the test platform, we get an alert containing test. Day 03 26/03/2014 Today we got a day off to go to the jobhappening of Howest at Kortrijk XPO. After attending some info sessions I got to meet some companies like KBC, Ocular, ADMB, who were looking for webdevelopers. Day 04 27/03/2014 There were still some FAQ s where the link to other FAQ s weren t correct so I fixed that right away, whereafter we fixed the menu (the menu items with a dropdown (like info or account) didn t have an active state). When this was done I added the links to add case and add project to the casetracker in the casetracker template instead of with a block since it was way easier to style it this way. When this all was done, I continued looking into the PHP code of the platform. Day 05 28/03/2014 On the last day I made the menu for the platform and fixed the URL s (like /voorwie/30 to /voorwie/50plussers) with URL aliassing. And again like yesterday continued with the PHP code for the rest of the day. Next week we ll learn about gamification and its elements. Looking how important which parameter is and how to encourage people in a positive way instead of making it feel like a burden. 128

129 [WEEK 07] GAMIFICATION Day 01 31/03/2014 This week started off with fixing some minor features, notified by our mentor last friday. I also changed the color on the menu bar: previously the text color was white with the OWAES blue as hover, this has been turned around. I also documented everything we ve done the last few weeks in a 20-page word document for our mentor. I explained the frontend (html, templates, less, js), the backend (drupal: content types, views) and Thomas did explained the installed modules. After this was done, we went through each and every module on our drupal page and deleted the ones we weren t using. At the end of the day we still had some time left to start learning about gamification oncoursera. Link: but I m not sure this link is accessible to people not subscribed for the class. Day 02 01/04/2014 This day started off -again- with fixing some minor features. Hereafter I had to create a new content type named [Over Ons] Image Header, as its name suggests, it s an image header for the about page so our mentor was able to add a wordle about OWAES. The rest of the day was filled with gamification; watching the video classes and taking notes on how to implement it in OWAES. Day 03 01/04/2014 Apparently, there was some LESS code which hid the images on the about us page on resolutions under 767px, so I had to fix that right away. While fixing this I also encountered another issue: the menu items were still displayed 129

130 as block, although the menu itself was mobile, now that s fixed as well. Other than this, there was also a document with fixes our mentor found: General Page with credits and link it in the footer Footer: scale logos in lower resolutions scale images within text automatically li s are too small and would like more margin Home Lees verder: ( continue reading Prefer it in yellow instead of blue needs more margin Another image for the man on the home page What is OWAES? (about us) More margin to the right of the image header There s still a triangle visible on the smallest of resolutions Contact form Issues with the textarea on some resolutions 4 logos on the bottom of the page should stick together ( or 2 2 or 4 in a row, but not 3 1) Add checkboxes for: Invite me to an infosession I want to participate Add selectionlist for I have interest in OWAES as : 130

131 Individual (Individu) Company (Bedrijf) Service Provider (Dienstverlener) Government Agency (Overheidsinstantie) Bystander (Toeschouwer) Another contact form if the person is linked via the FAQ page FAQ A link to the overview of FAQ s in the search results page The ones in bold were the ones I fixed, the others were the ones Thomas fixed. The 4 logos on the bottom of the contact page, we fixed together. Day 04 01/04/2014 I found the image of the SWOT analysis didn t quite suit the website, so I suggested that I d remake it to adjust it. The one on the left is the old one, the one of the right is the new one. First I made it in yellow but was way too linear and symmetric and they didn t like it in yellow, so I changed it to blue. After this, I continued the gamification classes and discussed with Thomas what we will implement in the platform. 131

132 Day 05 01/04/2014 On the last day I finished the course of Gamification on Coursera, whereafter I created a document with possible ideas to implement in the platform. When this was done I joined Thomas document with mine and sent it to Benedikt for a review. After the holidays We ll continue brainstorming on which elements to implement in the platform. Designing a customised landing page for the user and user page will also be done in the next week, and eventually start with the platform itself. 132

133 [WEEK 08] GAMIFICATION CONTINUED Day 01 21/04/2014 Day off Day 02 22/04/2014 The first day of the week, this week on Tuesday, started off with a meeting with feedback about our thoughts on gamifying OWAES. (Before our holidays we made a document with all our suggestions.) When this was done, we immediately started changing our first version to a second. What consumed most of our time, was the formula on how to calculate the experience. In this formula, it was important to use the level and the experience multiplier as variables. At this time the formula was 800x² mx, where x = current level and m = experience multiplier. Day 03 23/04/2014 At about noon, V2 of the gamification document was ready whereafter we went through some of the mistakes on the website like the inability of deleting people, a lack of an active state on account from within the profile page and some buttons who were still in English. We mainly focused on the first issue, but were unable to find a solution. I also tweaked the formula for experience calculation again and changed it to 1200x²+1200m*MOD(x,4)+400, which took a lot of effort to come up with and isn t as simple as the previous one. The reason for this was there needed to be a staircase-like evolution on how many days it takes to level (see image for a graph). A staircase-like graph is needed to give people a little break after a few levels, so they won t get tired of it. Day 04 24/04/2014 Thursday started off, again, with tweaking the formula and updating the document. This time, Geert Hofman came up with a simplified version of the previous formula (see graph). I also fixed the active state of the account menu-item within the profile page, I couldn t find anything to fix it with in Drupal so I added the active-trail class with Javascript. 133

134 In the afternoon we both started the design of the platform. We sat together and drew the home page, whereafter we designed the home page, the user part and the menu of the platform in Photoshop. When this was all done, I started brainstorming on how to take care of the add new item part. Day 05 25/04/2014 I started off doing what I did yesterday, brainstorming on how to add new items (work training/education infrastructure) and finally designed the whole part in Photoshop. To finish with, I merged Thomas file with mine and now we have finished the home page and the page to add new items. Images: 134

135 [WEEK 09] DESIGN PLATFORM Day 01 05/05/2014 I designed the searchbox and a search results page with a filter. When I finished, I discussed the admin page with Thomas for quite some time. We ended up both making a different design for Geert to choose from. When this was done I started merging our PSD files into one. On Icomoon, I created a project and imported icons. Now we can use these icons. Day 02 06/05/2014 Today started off with continuing the merge of the Photoshop files. I also had to change a lot of icons on the PSD because a lot has changed. I also made an icon myself for the indicator welzijn (well-being). While I was doing this, Thomas made a map with nearby activities for the home page, we both finished around the same time so I was able to add his map to the PSD file as well. When all this was done, I started making the menu and user bar in HTML and CSS. (link) Day 03 07/05/2014 Halfway through our week, on Wednesday to be exact, I created a new creditmeter with a more simple design. When this was finished I worked on the design for an admin page for groups (like VDAB or companies like Howest). Day 04 08/05/2014 The admin page for groups still wasn t finished so I continued on that. Hereafter, I started on lists, a list for users and a list for activities ( werkervaring, opleiding, delen). At the end of the day I had another 30 minutes which I used to create a new slickmap for our designs (link). 135

136 136

137 Day 05 09/05/2014 On the last day I merged the photoshop files of Thomas and me into one and partially remade the logo (I could only find the Illustrator file for the birds, I had no idea where the actual Illustrator file was). After this I made the final page, which was the notifications/activity page where users can see what has happened and who they have yet to pay. When all this was done, I merged the photoshop files yet another time. Next week Next week we ll dive into the platform again and start to implement the designs. Note: the design of all pages in good quality can be found on Imgur. 137

138 [WEEK 10] DEVELOPMENT PLATFORM Day 01 13/05/2014 This week we ll start with the development of the platform. Today, I made the menu and the user bar, which is completely dynamic except for the exp. I had to check how much credits the user has and color the icon likewise (green, orange, red). Next I had to check the indicators and change the width of the bootstrap progressbar to the indicator. (link) Day 02 14/05/2014 Today I constructed the users list (still doing so). I also had to adjust the users credits and its colors. I used the js frameworks Masonry and its brother imagesloaded. These two work perfectly together in case of loading the images and adjusting the columns of the userslist. Day 03 15/05/2014 On Wednesday I continued the userslist and when this was finished, I went straight to the login- & registerpage. At the end of the day I still had some time to begin on the user profile page. Day 04 16/05/2014 I continued what I started yesterday: the user profile page. Next to this I also worked on the menu a little, fixing the current active page. I also wrote some PHP to view the users information based on how they want it viewed. 138

139 Day 05 17/05/2014 The last day of the week, the profile page itself is ready. The last hour I worked on the edit modals, which popup on the user profile page. I used the bootstrap modal for this. Next Week Next week I ll continue on the frontend of the platform. 139

140 [WEEK 11] PLATFORM Day 01 19/05/2014 Multi-Mania Day 02 20/05/2014 Multi-Mania Day 03 21/05/2014 The user profile page is nearly finished. I just needed to make all the edit modals. When all the models had their HTML and CSS, I started on the Javascript part. Things like validating the adres and phone number (through regular expressions) were on the to-dolist. On the intro part, people had to be able to upload any file (for example a CV). When they want to add another file they can click the appropriate link to recieve another empty input field. When the modal closes or people save, I had to check for empty lines and remove them. My JS code is available here. I also used CSS s transform and translate to rotate and scale the config-button for each panel on hover. Day 04 22/05/2014 Thursday started off with reviewing the V2 of the drupal website, which Geert Hofman ported from the /arne to /v2. We explained why things have happened and how to fix them in case of porting it to the original owaes site. Hereafter, in the afternoon, I started on the list of badges and when finished, began on the owaesadd.php page, which is the page to add an activity (werkervaring, opleiding, delen). 140

141 Day 05 23/05/2014 The last day of the week was all about finishing up the owaesadd.php page I started yesterday. It had to function at the end of the day so I had to leave some elements from the design out so it would definitely work. Later I can add the other elements if needed. Level up! Next week will be all about further developing the frontend of the platform, the complex gamified homepage in particular. 141

142 [WEEK 12] GAMIFICATION & PLATFORM Day 01 26/05/2014 The first day of the week, I copied the owaesadd.php file and renamed it to owaesaddnew.php, so I could add the new design without damaging functionality for their presentation on Wednesday. I usedfullcalendar for the functionality of the calendar. When people click on a day, I need to append HTML for the timeslots. At the end of the day this was finished with partial validation. When clicked on a day, I added a class so I could style the element. But when people change the month, the classes are forgotten. In this case, when people switch months, I need to loop through the array of selected dates and the array of elements in the calendar and add the class to the appropriate element. Also when people fill in the default line, all other lines have to change with it. Day 02 27/05/2014 Today I did most of the validation of the date & time part. When finished, I started on the radiobuttons at the left (see image of yesterday). The greatest struggle was the fact that the inputboxes are checked multiple times at a time, which resulted in multiple errors with the same errormessage. I finally found a solution with jquery: $errors = jquery.unique($errors); together with $errors = jquery.removefromarray( Het uur (start) moet tussen 00 en 23 vallen., $errors); to remove the message from the array. I also styled the sliders of the indicators. jquery.removefromarray = function (value, arr) { return jquery.grep(arr, function (elem, index) { return elem!== value; }); }; 142

143 At the end of the day I got the feedback that the default line had to be removed and the first date had to be the default line. It also had to be in tabs due to having a lot of content. Day 03 28/05/2014 On Wednesday I started changing the add page with the received feedback from the day before. (see screenshot). Day 04 29/05/2014 Day off Day 05 30/05/2014 Day off 143

144 [WEEK 13] THE END Day 01 02/06/2014 The last week of the internship has started. On this first day of the last week I worked on the menu to get it responsive. When it was fixed I continued on the javascript for the owaesaddnew. Day 02 03/06/2014 Tuesday I made other parts of the platform responsive, although we haven t done everything yet, it s finally possible to view the site on a smaller device. I also worked on the home page and owaesaddnew again. People can now select their own default line for owaesaddnew and I also fixed some javascript for the home page. Day 03 04/06/2014 On Wednesday I made sure the same array which was filled with dates also was printed on the Datum & Tijdsduur part, but with sliders and a default line as well. Hereafter I looked into how to adjust the creditmeter to the actual credits. After working it out on paper, I finally wrote it down in javascript and this is what the code looks like: function initcreditmeter() { var $pointer = $(".content-home.creditmeterpointer"); var $credits = parseint($(".panel-profile-sm.credits.title").text()); var $totalcredits = 9600; var $totaldegrees = 286; //niet 360, want dan zou de teller terug op nul staan, op 286 staat de teller op 9600 var $creditsperdegrees = $totalcredits / $totaldegrees; var $degrees = $credits / $creditsperdegrees; 144

145 $pointer.css({ -moz-transform : rotate( + $degrees + deg), -ms-transform : rotate( + $degrees + deg), -o-transform : rotate( + $degrees + deg), -webkit-transform : rotate( + $degrees + deg), transform : rotate( + $degrees + deg), }); } I used as many variables as possible since it isn t an easy thing until you write it down. By using as many variables as possible I hope it s understandable for the next person who has to continue on my code. Day 04 05/06/2014 Thursday started off with finally finding what was wrong with my sliders (see picture). Around noon it was fixed with validation. Hereafter I started on the responsiveness of the platform. I updated the badges-page and tweaked the userslist. Previous weekend I got to try the webapp fortelegram, a messenger app for iphone and Android. This webapp is called Webogram. But I was quite amazed by one particular aspect of the webapp:desktop notifications from the browser. When someone messaged me while I was writing on my paper, I got a notification right to my desktop from Webogram. I searched for it and it s called Desktop Notifications and thought of how to implement it in OWAES, since there were notifications on the previous version of OWAES. Now, on Thursday, I implemented the desktop notifications in OWAES and it looks something like this: This new feature is still in experimental but is actually really well documented on Mozilla Developer Network. It is not yet supported for IE and Opera, browsers which do support it are Chrome, Firefox and Safari (but only on Mac). For mobile: blackberry & android (partially). 145

146 The Javascript code: When I was done I tried making a replica for IE, but within the browser. This was the code at the end: code Day 05 06/06/2014 Today, I made the modal which the user gets when his exp is raised. His exp bar has to increase when he clicks ok. Javascript: 146

147 CSS: Screenshot: When I was done with this, I also made a modal for when people level up. At the end of the day we joined our two less files into one. 147