• No results found

Utveckling av ett webbaserat lek-och-lärspel i matematik för barn i förskolan

N/A
N/A
Protected

Academic year: 2021

Share "Utveckling av ett webbaserat lek-och-lärspel i matematik för barn i förskolan"

Copied!
46
0
0

Loading.... (view fulltext now)

Full text

(1)

Linköpings universitet | Institution för datavetenskap Examensarbete på grundnivå, 16hp | Datateknik 2021 | LIU-IDA/LITH-EX-G--2021/001--SE

Utveckling av webbaserat lek-och-lärspel i

matematik för barn i förskolan

Development of a Web Based Play and Learn Game in Mathematics for Kids in

Preschool

Författare: David Norell

Handledare: Agneta Gulz

Examinator: Annika Silvervarg

(2)

Upphovsrätt

Detta dokument hålls tillgängligt på Internet – eller dess framtida ersättare – under 25 år från publiceringsdatum under förutsättning att inga extraordinära omständigheter uppstår.

Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner, skriva ut enstaka kopior för enskilt bruk och att använda det oförändrat för ickekommersiell forskning och för undervisning. Överföring av upphovsrätten vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användning av dokumentet kräver upphovsmannens medgivande. För att garantera äktheten, säkerheten och tillgängligheten finns lösningar av teknisk och administrativ art.

Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i den omfattning som god sed kräver vid användning av dokumentet på ovan beskrivna sätt samt skydd mot att dokumentet ändras eller presenteras i sådan form eller i sådant sammanhang som är kränkande för upphovsmannens litterära eller konstnärliga anseende eller egenart.

För ytterligare information om Linköping University Electronic Press se förlagets hemsida https://ep.liu.se/.

Copyright

The publishers will keep this document online on the Internet – or its possible replacement – for a period of 25 years starting from the date of publication barring exceptional circumstances.

The online availability of the document implies permanent permission for anyone to read, to download, or to print out single copies for his/hers own use and to use it unchanged for non-commercial research and educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the document are conditional upon the consent of the copyright owner. The publisher has taken technical and administrative measures to assure authenticity, security and accessibility.

According to intellectual property law the author has the right to be mentioned when his/her work is accessed as described above and to be protected against infringement.

For additional information about the Linköping University Electronic Press and its procedures for publication and for assurance of document integrity, please refer to its www home page:https://ep.liu.se/.

(3)
(4)

Sammanfattning

Magiska Trädgården är ett webbaserat lek-och-lärspel i matematik för barn i förskolan. Spelet består av fem mindre delspel, där detta projekt gick ut på att utveckla och implementera ett sjätte sådant, kallat ‘Gömspelet’. Konceptet för Gömspelet var att det skulle innehålla mer variation än de andra delspelen, vilket uppnåddes genom att bland annat implementera flera olika karaktärer och miljöer som spelet utspelar sig i. För att även göra spelet mer unikt implementerades flera nya koncept, som exempelvis tankebubblor som kan visualisera karaktärernas uträkningar, för att förbättra användbarheten och lärbarheten av spelet. Testningen av spelet visade att en del av koncepten behöver studeras vidare och kanske förbättras, vilket lämnas till vidareutvecklingen av detta spel.

(5)

Författarens Tack

Stort tack till Agneta Gulz som har hjälpt mig genom hela processen och visat stor uppskattning för det arbete jag bidragit till. Och stort tack till Annika Silvervarg som har väglett mig och avlagt tid att rätta denna rapport under arbetets gång.

(6)

Innehåll

Upphovsrätt 1 Copyright 1 Sammanfattning 3 Författarens Tack 4 Innehåll 5 1 Inledning 7 1.1 Motivering 7 1.2 Syfte 7 1.3 Frågeställningar 7 1.4 Avgränsningar 7 2 Bakgrund 9

2.1 Upplägg av Magiska Trädgårdens demo 9

2.2 Upplägg av delspel 10

3 Relaterade arbeten 11

3.1 Lära-genom-att-lära-ut 11

3.2 Matematikundervisning i förskolan 11

3.3 Utveckling av bra datorspel 12

4 Metod 13

4.1 Tekniska förutsättningar 13

4.1.1 JavaScript 13

4.1.2 Phaser 13

4.2 Användbarhet och utvärderingsmetoder 13

4.3 Systemutvecklingsmetod 14 4.3.1 Krav 14 4.3.2 Analys 15 4.3.3 Design 15 4.3.4 Implementation 16 4.3.5 Testning 17 5 Resultat 20 5.1 Krav 20 5.2 Analys 20 5.3 Design 21 5.4 Implementation 21 5.5 Testning 23 6 Diskussion 26 6.1 Resultat 26 6.2 Metod 27

(7)

6.4 Arbetet i ett vidare sammanhang 28

7 Slutsatser 30

7.1 Syfte 30

7.2 Frågeställningar 30

7.2.1 Lärbarhet och användbarhet av spelet 30

7.2.2 Effektiv programmering 30 7.3 Konsekvenser 31 7.4 Framtida arbete 31 Referenser 32 Pseudokod för Gömspelet 34 HideAndSeekGame.js (Gömspelet) 34 ChooseScenarioState.js 43 ButtonPanel.js 43

(8)

1 Inledning

Magiska Trädgården är ett webbaserat lek-och-lärspel inom matematik och problemlösning för barn i förskolan1. I spelet finns flera delspår, varav ett av dem kallas huvudspåret som innehåller flera mindre delspel. Dessa delspel lär ut matematik genom att barnen får hjälpa en datafigur med ett matematiskt problem som behandlar antingen nummerräkning, addition eller subtraktion. Detta examensarbete går ut på att implementera ett nytt sådant delspel kallat ‘Gömspelet’ i huvudspåret.

I huvudspåret så går inlärningen i tillhörande delspel delvis ut på att “lära-genom-att-lära-ut”, vilket innebär att användaren lär sig genom att guida en så kallad ‘lärbar agent’ till att lösa det givna matematiska problemet. Gömspelet kommer också implementera denna teknik då det finns tydliga fördelar med att göra det.

1.1 Motivering

Den vanliga modellen för undervisning handlar om att lärare undervisar elever och barn. I detta arbete ska utvecklas ett spel som vänder på rollerna och gör barnen till lärare istället. Det här undervisningssättet kan vara bättre för barnet då det kräver att hen har en bättre uppfattning om ämnet för att i sin tur ska kunna lära ut den kunskapen. Detta hjälper också barnen till att stärka sitt ansvarstagande vilket kan hjälpa med att öka deras självförtroende.

1.2 Syfte

Projektet ska generera ett webbaserat lek-och-lärspel som ska användas för att förbättra matematikkunskaper hos barn inom förskolan.

1.3 Frågeställningar

Som utvecklare av spelet vill vi svara på dessa frågor under arbetets gång:

1. Hur ska vi utvecklare utforma spelet för att göra alla aspekter i spelet så lärorika och användbara som möjligt för användaren?

2. Hur ska vi utvecklare programmera för att underlätta den existerande och framtida utvecklingsprocessen av spelet?

1.4 Avgränsningar

Arbetet kommer begränsas till spelet Magiska trädgården och mer specifikt ett delspel inom huvudspåret i spelet. Verktygen som kommer användas begränsas till JavaScript och spelbiblioteket Phaser för att underlätta nuvarande men även framtida arbeten med spelet. Hantering av spelets backend och grafik är inte heller något fokus i arbetet.

(9)

En optimistiskt mål för detta projekt är att skapa ett fullständigt spel som är både användbart och lärorikt för barn. Fokus ligger dock på att göra funktionaliteten i spelet användbart och ge ett bra underlag för andra att undersöka läreffekterna hos barn.

(10)

2 Bakgrund

I detta kapitel kommer Magiska Trädgården beskrivas lite kort.

2.1 Upplägg av Magiska Trädgårdens demo

Som utvecklare av Magiska Trädgården fick jag tillgång till en demoversion av spelet som består av en demomeny, där man snabbt kan välja vilket delspel att köra och vilka förinställningar spelet ska ha. Bild 2.1 nedan visar hur demomenyn såg ut när projektet startades, vilket bestod av fem existerande ‘delspel’: Skattjakten, Piratmaten, Humlehjälpen, Fågelhjälten och Lastdags. Precis under urvalet med delspelen syns tre alternativ för ‘intervall’: 1-4, 1-6 och 1-9, vilket indikerar hur många siffror som kommer användas i spelet. Under det finns alla nummerrepresentationer vilket bestämmer hur siffrorna kommer presenteras för användaren. Sist kommer räknesätten som bestämmer vilken typ av matematik som kommer genomföras under spelets gång.

Bild 2.1. Demomenyn för Magiska Trädgården - en sammanfattning av alla existerande delspel, nummerintervall, nummerrepresentationer och räknemetoder.

(11)

2.2 Upplägg av delspel

Alla delspel i huvudspåret följer liknande upplägg i hur de utspelar sig, i att de har fem olika faser de befinner sig i under spelets gång, nämligen modeIntro, modePlayerDo, modePlayerShow, modeAgentTry och modeOutro.

a) b) c)

Bild 2.2. Delspelet ‘Piratmaten’ i tre olika faser: a) modePlayerDo, b) modePlayerShow och c) modeAgentTry. Intervall: 1-6, Representation: nummer, Räknemetod: räkna.

I den första fasen modeIntro får användaren mest lyssna på en monolog från huvudkaraktären för att förstå vad som ska göras och varför det ska göras. I till exempel delspelet ‘Piratmaten’ i bild 2.2 så förklarar piratkameleonten att hon är hungrig och behöver hjälp att sikta med sin tunga för att träffa myran, som sitter på ett träd lite längre bort.

Fasen modePlayerDo är den fasen då användaren får interagera med spelet. Bild 2.2.a visar ett exempel på den fasen från delspelet Piratmaten, där användaren måste ange rätt siffra genom att trycka på en av knapparna till höger, för att hjälpa kameleonten träffa myran som sitter på trädet.

modePlayerShow i bild 2.2.b fungerar på samma sätt som modePlayerDo, förutom att en lärbar agent har kommit in i bilden, i detta fall en panda vid namn Panders, för att lära sig av spelarens beteende.

I modeAgentTry så prövar den lärbara agenten själv att lösa problemet genom att ge förslag. I bild 2.2.c syns det hur Panders ger förslaget ‘1’ och användaren kan då välja att godkänna det förslaget genom att klicka på den gröna knappen till höger eller neka förslaget och ange det rätta svaret själv. Dessa faser pågår i upp till fem iterationer innan spelet går vidare till nästa.

modeOutro är den avslutande fasen där användaren får belöning i form av vattendroppar och får lyssna på lite monolog från karaktärerna innan spelet avslutas.

(12)

3 Relaterade arbeten

I den här delen förklaras en del forskning som gjorts inom inlärning samt utveckling av dataspel, för att underbygga detta arbete. Tack vare denna teori har flera idéer för Gömspelet dykt upp och implementerats under arbetets gång.

3.1 Lära-genom-att-lära-ut

Lära-genom-att-lära-ut är konceptet att en person att lär sig genom att undervisa någon annan om samma ämne. I Magiska Trädgården utförs detta med hjälp av en ‘lärbar agent’ (t.ex. Panders i bild 2.2), som användaren interagerar med och lär ut till. Chin et al. [2] undersöker hur effektivt det är att använda lärbara agenter gentemot traditionell undervisning likt den som utförs i de flesta skolor, för barn mellan 9-10 år. I undersökningen fick två lärare använda ett mjukvaruspel som implementerar lära-genom-att-lära-ut, och sedan låta sina elever använda det som komplement till den ordinarie undervisningen, medan två andra lärare fick fortsätta med sin vanliga läroplan. Resultatet blev att eleverna som hade tillgång mjukvaran inte bara lärde sig mer, men också utvecklade en starkare vetenskaplig slutledningsförmåga. Specifika faktorer i detta resultat tros vara flera. Lärbara agenter kan visualisera sitt tänkande i det spelet, vilket reflekterar hur användaren som lärde agenten tänker. Existensen av en lärbar agent gör det även möjligt med rekursiv feedback, där det är agenten som får feedbacken vilket sedan når användaren. Om användaren gör fel är det agenten som blir ‘kritiserad’, vilket gör att användarens ego inte påverkas lika lätt. När barnen också blir instruerade att lära ut en lärbar agent så utvecklas dessutom ett typ av ansvar inom barnet, som gör att många lägger mer energi på att lära sig ämnet.

Gulz et al. [10] undersöker hur effektivt Magiska Trädgården använder lära-genom-att-lära -ut-konceptet genom att studera barn mellan 4-6 år när de spelar spelet. Då många barn kan vara svåra att verbalt kommunicera med i denna ålder valdes istället eye-tracking för att studera var någonstans deras fokus ligger när de spelar. Detta är för att se om barn uppmärksammar vissa element i spelet, som till exempel det rätta svarsalternativet och den lärbara agenten. Resultatet visar på att flera barn uppmärksammar den lärbara agenten bland annat, vilket kan tyda på agenternas effektivitet redan vid tidig ålder. Detta implicerar att det vore fördelaktigt att fortsätta med att använda lärbara agenter i Magiska Trädgården för att göra det så lärorikt som möjligt. Att även öka komplexiteten av agenten likt [2], med bland annat ‘mind maps’ är en intressant idé som skulle kunna appliceras i spelet.

3.2 Matematikundervisning i förskolan

Matematiskt tänkande är en viktig egenskap för barn att skaffa sig tidigt när de börjar skolan, enligt Cohrssen och Niklas [3]. I deras studie genomfördes ett experiment på barn som skulle börja sitt första år på skolan (runt 4 år gamla). I en av grupperna fick läraren till en klass på runt 20 barn använda en samling matematiska inlärningsspel kallad “NT preschool math games” för att underlätta lärandet av matematiska koncept till barnen. En annan observerad grupp fick fortsätta som vanligt utan några matematiska spel. Här testades bland annat deras

(13)

förmåga för nummerräkning, namngivning av nummer och applicerade problem via olika prövningar. Barnen i den första gruppen visade på mycket större förbättring inom matematiska förmågor än den andra gruppen. Magiska Trädgården har en liknande målgrupp som spelen använda i den studien samtidigt som spelet också testar samma matematiska förmågor. Detta skapar en stark motiverande faktor till detta arbete då det uppenbarligen lönar sig att använda matematiska inlärningsspel som Magiska Trädgården.

3.3 Utveckling av bra datorspel

Att utveckla datorspel som är intressanta och enkla att förstå är en utmaning för alla utvecklare då det finns många element i spel. I en undersökning utförd av Kamal et al. [6] så studeras vad som gör spel attraktivare för den allmänna användaren. Testpersoner med varierande åldrar och yrken fick testspela olika spel och sedan fylla i ett frågeformulär som försöker ta reda på vad testpersonerna tycker om specifika element i spelet. Resultatet visade bland annat på att användare uppskattar bra grafik som inte är alltför komplicerad och att belöningar i spel såsom poäng gör spelet mycket roligare. Studien visar även på att det är viktigt att inte göra elementen i spelet för komplexa utan att ha en bra balans istället. Detta är ännu mer viktigt i ett spel som Magiska Trädgården, där målgruppen för spelet är små barn som inte har en lika utvecklad förståelse för sin omgivning som en vuxen har. Med denna studie blir det tydligt att det är viktigare att göra element i spelen som exempelvis grafik mer förståeliga än snygga. Samma sak gäller då att skapa ett historieberättande i spelet som barnet enkelt kan följa med på och som inte går för snabbt eller för långsamt. Är spelet för snabbt riskerar det att användaren blir förvirrad och inte hänger med. Är spelet för långsamt lär användaren tappa intresset för spelet vilket inte heller är optimalt. En bra balans här extra viktigt i ett lärandespel som Magiska Trädgården, då ifall en användare tappar intresset för spelet så lär de inte lära sig något alls.

(14)

4 Metod

Här förklaras hur arbetet av projektet genomförs, från bearbetningen av kraven till utvärderingen av spelet.

4.1 Tekniska förutsättningar

Detta projekt har två tekniska förutsättningar som nykomlingar till projektet måste anpassa sig till: programspråket JavaScript och spelmotorn Phaser som är beskrivna nedan.

4.1.1 JavaScript

JavaScript, ofta förkortat JS, är ett högnivåspråk som är framtaget för just webbskript. Upp till 97% [9] av alla webbsidor använder just JS för detta ändamål. JS använder så kallad dynamisk typning, vilket betyder att en variabel som från början är ett heltal kan utan problem göras om till en sträng eller någon annan datatyp. JS använder även just-in-time kompilering vilket betyder att koden kompileras under körning, och det är just detta samt dynamisk typning som gör att JS-kod passar så bra in i webbskript, då hemsidor behöver kunna ändras snabbt allteftersom.

4.1.2 Phaser

Spelbiblioteket Phaser [1] är ett open-source HTML5 ramverk som är avsett för spelutveckling för Canvas eller WebGL baserade webbläsarspel. I ramverket används språket JavaScript eller TypeScript för programmering. Några av nycklarna till Phasers popularitet är att det ständigt förbättras och att det har ett riktigt användarvänligt API2. Spelet är byggt genom en version av Phaser, där Phaser tillför funktioner för spelfysik och liknande.

4.2 Användbarhet och utvärderingsmetoder

Matera et al. [8] definierar principer och utvärderingsmetoder för användbarhet inom webbapplikationer. Som utvecklare av en applikation så är det väldigt svårt att utvärdera användbarheten av den, då det är mycket enklare och intuitivt att använda en applikation som man själv har designat och tänkt ut. Därför krävs oftast en opartisk grupp av testare som kan bedöma applikationen.

Med hjälp av ett kriterium kan en utvärderingsmetod för användbarhet appliceras som en del av utvecklingsprocessen. Den första alternativet är så kallad “user testing” vilket innebär att låta riktiga användare (applikationens målgrupp) få testa spelet. Metoden kan ge väldigt bra feedback men kan däremot vara svårare att anordna då det kräver en massa testpersoner från en specifik målgrupp, samtidigt som det kan vara svårt att träna dem till att kunna använda applikationen. En annan metod är användbarhetsinspektioner, där experter som inte är en del av utvecklingsteamet används som testpersoner. Fördelen här är att det är enklare att anordna 2https://storm.io/sv/vad-ar-api/

(15)

en sådan inspektion då det inte kräver lika många personer att testa applikationen. Experterna representerar däremot inte den riktiga målgruppen för applikationen och att simulera riktiga reaktioner kan vara svårt. Sedan krävs det även att experter har kunskaper inom användbarhet och att de vet hur bedömningen ska gå till. Det sista alternativet är “web usage analysis” vilket innebär analys av mönster i användardata från applikationen efter att den har släppts till allmänheten. Med denna metod kan data samlas från flera användare där populära och mindre populära funktioner kan särskiljas. Däremot reflekterar inte detta en riktig användare så metoden används bäst som ett komplement till en annan metod.

För utveckling av delspelet i Magiska Trädgården kommer användbarhetinspektioner att användas i första hand, då det bland annat är enklare att anordna. Med tanke på att det finns begränsat med tid för att utföra projektet finns det inte mycket tid för att genomföra testning med barn, och möjligheterna att göra det är ännu mer begränsade under covid19. Eftersom att testningen endast kommer ske på en prototyp som inte har färdig grafik så blir det även enklare att låta experter testa, då lite grafik troligtvis inte kommer vara störande för dem, vilket gör det enklare att få hjälpsam feedback.

4.3 Systemutvecklingsmetod

Planen i projektet var att följa vattenfallsmodellen för utvecklingen av det nya delspelet. Det innebar att strikt följa alla faser (krav, analys, design, implementation, testning) och endast gå vidare till nästa fas när nuvarande var färdig. Det finns flera nackdelar med vattenfallsmodellen, som exempelvis att det lätt kan uppstå missförstånd mellan utvecklare och kund, med tanke på att det traditionellt inte sker mycket kommunikation mellan dessa två. De flesta kraven för spelet var dock inte särskilt hårda utan snarare mer förslag, så risken att det skulle ske ett allvarligt missförstånd var inte särskilt stor. Utöver det så utfördes utvecklingen endast av en person vilket innebar att behovet av att följa en strukturerad plan inte blev lika stor. Med ett grupprojekt är det däremot viktigare att följa någon typ av plan för att kunna underhålla ett ordentligt samarbete mellan gruppmedlemmarna.

4.3.1 Krav

Kunden och handledaren Agneta Gulz skickade en skiss/kravspecifikation på vad hon kallade Gömspelet, vilket kommer användas för att hänvisa till det spelet. Det skulle vara analogt med de andra delspelen i bild 2.1, och som namnet föreslog så skulle spelet handla om tre ‘busiga’ karaktärer: en älva/fe, ett troll och en tomtenisse som gillar att gömma sig. Den centrala karaktären skulle vara en trädgårdstomte som behöver hjälp av användaren att hitta dessa karaktärer. Sedan var det tänkt att de busiga karaktärerna skulle gömma sig bakom uppradade stenar (eller andra objekt), där tomten då kunde gissa på att karaktären gömmer sig bakom till exempel den andra stenen, och därefter skulle barnet få addera eller subtrahera från siffran för att det ska bli rätt sten (enligt räknemetoden ‘Add och sub’ som exempel). Ett annat mjukt krav var att knappanelen skulle vara uppradad vertikalt som knapparna i bild 2.2, men att stenarna (gömställena) skulle ligga horisontellt. Sedan föreslogs det att

(16)

knapparna också kunde vara ordnande som i en matris med till exempel tre rader och tre kolumner.

Ett genomgående tema i kravspecifikationen var att spelet skulle ha mer variation jämfört med de andra spelen. Exempelvis skulle det ju finnas tre olika karaktärer som gömmer sig, varierande animationer när användaren hittar dem (hoppa eller dansa) och varierande miljöer där spelet utspelar sig i (varierande grafik). Hur exakt dessa krav skulle implementeras lämnades öppet, det var snarare idén om att Gömspelet skulle ha mer variation än de andra spelen som var viktigt att följa. Mycket frihet lämnades alltså till utvecklaren att implementera lite på sitt egna sätt och även komma med egna förslag.

Grafiken för spelet var inte färdig vid projektets startpunkt och att skapa grafiken var inte heller något krav. Fokus på projektet var att skapa själva funktionaliteten för spelet, och att därmed använda så kallade placeholders istället för den riktiga grafiken. Placeholders i detta sammanhang är tillfällig grafik som används som ersättare till den riktiga grafiken som är tänkt att komma senare.

4.3.2 Analys

När en god uppfattning av projektet uppnåtts från att läst och analyserat de krav som angetts så kunde vidare analys göras genom att läsa relevant vetenskaplig litteratur. Vid detta stadie var det enkelt att veta vilka vetenskapliga ämnen som var värda att djupdyka i inför projektet. De ämnen som valdes var bland annat lära-genom-att-lära-ut, vilket är en inlärningsteknik som Magiska Trädgården och dess delspel använder sig av. Förhoppningarna var att under läsningen bli inspirerad och potentiellt få nya idéer om hur spelet kan tas till nästa nivå i sin inlärning. Det gjordes även en djupdykning i utveckling av bra datorspel för att kunna få en uppfattning om hur spelet bäst kan designas och implementeras. Detta var även en stark motiverande faktor och förhoppningsvis skulle det leda till något mer än en simpel replikation av de andra delspelen.

4.3.3 Design

Efter analysen kunde en genomtänkt skiss av Gömspelet formuleras. I skissen inkluderades bland annat en att-göra-lista, som i grund och botten är själva kravspecifikationen skriven i lite enklare termer för implementationen. Skissen var också ett utmärkt ställe att under arbetets gång skriva ner idéer för spelet som kunde tänkas implementeras. Dessa idéer var tänkta att baseras på den teori som lästs innan, för att bidra till ett mervärde i slutproukten och förbättra användbarheten och lärbarheten. Detta var användbart under implementationen när det kom till att ta beslut då det gav en bra översikt över hur mycket arbete som krävdes. Det skulle förhoppningsvis underlätta utvecklingsprocessen och minska förseningar inom vissa implementationer inför testningen.

För vidareutvecklingen av spelet formulerades även en lista med grafik och repliker för karaktärer som behövdes till Gömspelet. Förhoppningen var att grafiken och replikerna skulle hinna bli färdiga innan projektets slut, så att dem kunde implementeras i detta arbete. Det var

(17)

förstås ingen nödvändighet, men som utvecklare är det alltid roligt att kunna lämna över en komplett produkt till kunden, med grafik såväl som funktionalitet fixat.

4.3.4 Implementation

I uppgift 5 i tidsplanen skedde själva implementationen av spelet, utifrån den kunskap som erhållits av tidigare uppgifter. Det rekommenderades att utgå från det redan existerande spelet Humlehjälpen i bild 4.1 nedan, när det kom till att programmera Gömspelet. Koden för Magiska Trädgården fanns i ett utvecklingskatalog i Cloud Source Repositories som var åtkomligt med hjälp av Git-kommandon, och för att inte förstöra någon existerande kod skapades en egen gren att jobba på (git branch). För att kunna starta spelet krävdes en del mjukvara som skulle laddas ner, där en av dem kallas meteor. Detta verktyg kompilerar och startar en egen server automatiskt på localhost ‘http://localhost:3000’. Dock fanns demoversionen på adressen‘http://localhost:3000/demo’.

Bild 4.1. En skärmbild från delspelet Humlehjälpen med intervall: 1-4, representation: nummer och räknemetod: Add och sub.

Det första målet i implementationen var att byta ut grafiken i spelet mot mer passande grafik. I detta projekt fanns ingen färdig grafik för Gömspelet, det som skulle fixas var själva funktionaliteten. Trots det behövde spelet ha någon tillfällig grafik för alla nya element och det kunde endast uppnås med placeholders, som enkelt kan bytas ut mot den riktiga grafiken

(18)

när den väl är färdig. Först var det tänkt att humlan byts ut mot en existerande tomtekaraktär, sedan byts blommorna ut mot stenar enligt kravspecifikationen.

När en del av grafiken var på plats och allt fungerade som det skulle, programmerades funktionaliteten för hur karaktärer skulle gömma sig. Eftersom en ny karaktär skulle gömma sig för varje iteration krävdes det först en slumpgenerator som kunde slumpa en av tre karaktärer (älva, troll eller tomtenisse) för att gömma sig. Därefter skrevs kod för att skapa karaktären bakom det gömställe som den slumpats till. Denna funktion ersatte en liknande funktion i Humlehjälpen, som fick blomman att öppna sig, likt blomman längst till vänster i bild 4.1. Angreppssättet var att skriva över den funktionen till att istället skapa en karaktär och därefter utöka funktionen med animationer och liknande.

En av idéerna som formulerats i designfasen var en unik tankebubbla kring trädgårdstomten, som illustrerar tomtens tankeprocess. Motivationen till idén var att kunna illustrera för användarna hur de tänker när de gör ett val, genom att inkludera deras svar i en visualiserad uträkning (4 + 3 = 7). Observera att det redan fanns tankebubblor implementerade i spelet, dock användes de inte för att presentera en uträkning. Denna implementerades vilket krävde en del modifikation av funktionaliteten hos de gamla tankebubblorna, då det inte riktigt var anpassat för att de skulle kunna göra detta.

Kravet där knapparna skulle vara ordnade vertikalt, fanns det redan funktionalitet för. En intressant utmaning var dock att koda för att formatera knappanelen som en matris. Detta krävde modifikationer i en annan fil (buttonPanel.js), där funktionaliteten för att skapa knappanelen fanns.

För att kunna starta spelet och lägga till det i demomenyn modifierades filen ChooseScenarioState.js. I ett senare skede modifieras även filen för att lägga till knappar för Gömspelet och två andra knappar för att bestämma knappordningen (slumpartad / ordnad) i demomenyn.

4.3.5 Testning

Med utvärdering av Gömspelet var målet att via testning undersöka hur användbart aspekter av spelet är. Användbarhetsinspektioner var den primära utvärderingsmetoden för detta projekt, vilket bestod av runt fyra testpersoner som var mer eller mindre bekanta med Magiska Trädgården och dess tidigare delspel. Utöver det deltog ett barn för user testing. Detta var för att för att få åsikter från användare inom spelets målgrupp, då vuxna personer kan ha svårt att simulera hur barn ser på spelet. En viktig sak att poängtera är att Gömspelet är väldigt lik de andra delspelen, i att spelet följer samma koncept och genomgår samma faser. Så att testa alla aspekter i spelet hade därför varit onödigt, då de har testats flera gånger innan i de tidigare delspelen i ett flertal vetenskapliga studier [10]. Därför var det endast ett urval av aspekter som ligger i fokus under denna testning:

(19)

● Undersöka hur enkelt det är att förstå konceptet med att hitta gömmande karaktärer, hur enkelt det är att komma in i spelet och dess miljö.

● Undersöka hur enkelt det är att förstå tomtens tankebubbla som visar tankeprocessen. ● Undersöka hur matrisformationen av knapparna påverkar svårighetsgraden och

förståelsen av spelet.

Testningen skedde på ett sätt där testpersonerna fick köra spelet på sin egen tid ostört, efter att ha fått en kort introduktion av hur spelet kunde startas och justeras. När de var klara fyllde de i en enkät skapad via surveymonkey3, som berör de ovannämnda aspekter som skulle testas. Enkäten bestod av åtta frågor, en för att identifiera åldern av deltagaren, två för varje ovannämnd aspekt plus en fråga för övriga kommentarer:

1. Hur gammal är du? 0-12? 13-18? 19+?

2. Var det svårt att förstå vad du skulle göra? Ja? Nej?

3. Berätta kort vad du tror att spelet handlar om (ignorera karaktärernas repliker).

4. Vad tycker du om trädgårdstomtens tankebubbla? (den som visar uträknandet t.ex. 4 + 3 = 7)

Dålig? Mindre bra? Bra? Underbart? 5. Berätta varför tycker du så.

6. Hur svårt var det att använda knappanelen, när den är uppställd som en matris (istället för en enda rad)?

Svårt? Ganska svårt? Ganska enkelt? Busenkelt?

7. Vilken uppställning av knappanel skulle du använda för detta spel? Matris(nuvarande)? Horisontell rad? Vertikal rad.

8. Övriga kommentarer?

Fråga 2 och 3 berörde den förstnämnda aspekten, fråga 4 och 5 berörde den andra aspekten och fråga 6 och 7 berörde den tredje. Den första frågan skulle identifiera ifall deltagarens ålder var inom målgruppen och den sista frågan hoppades på att fånga upp intressanta idéer och förbättringar. Enkäten var anpassad till barn och innehöll därför inte särskilt komplicerade frågor, för att därmed inte riskera att förvirra barnet som svarar på den.

(20)
(21)

5 Resultat

Här presenteras resultaten för alla faser i utvecklingen av spelet, vilket återkopplar de tidigare kapitlen 4.3.1 - 4.3.5 i metoden ovan.

5.1 Krav

Det var ett krav som vid projektets slut inte uppfylldes, vilket var kravet om att ha olika animationer för den gömmande karaktären när den blir upphittad. Anledningen till att detta inte blev av är för att efter en närmare inspektion av hur animationer generellt fungerar i Magiska Trädgården, så antogs det att det skulle kräva alldeles för lång tid att implementera detta. Funktionaliteten för animationer låg i en annan fil och det skulle därmed kräva kunskap om hur animationer fungerar för att kunna skapa och ändra dem själv, vilket generellt tar lång tid.

Utöver det så uppfylldes alla krav mer eller mindre. I kraven så nämns dock nya karaktärer som kräver unik grafik, vilket som sagt ligger utanför projektets ram och har därmed inte heller uppfyllts.

5.2 Analys

Från analysen dök flera idéer upp som ansågs som ett potentiellt tillägg som var värd att implementeras i Gömspelet. Tankebubblan, som var tänkt att illustrera tomtens uträkning, var ett sådant exempel. Idén kom från teoridelen 3.1 Lära-genom-att-lära-ut [2] där det nämns som en fördel att lärbara agenter kan visualisera tänkandet av användaren som lär ut den. Tankebubblan var ett försök att visualisera det tänkandet.

En annan idé härstammade från teoridelen 3.3 Utveckling av bra datorspel [6], där deras enkät visade på att användare gillar att få belöningar i spelet. Magiska Trädgården har också belöningar i form av vattendroppar som användaren får efter ett avklarat delspel. Dock så finns det inga ljudeffekter kopplade till den belöningen och det känns därför inte särskilt märkvärdigt att få dem. Idén var att helt enkelt att koppla ljudeffekter till vattendropparna som exempelvis ett droppljud, och kanske lägga in fler belöningar i spelet för att öka tillfredställelsen för användaren. Detta krävde dock resurser vilket låg utanför projektet och idén implementerades därför inte.

En annan idé som också låg utanför projektet handlade om själva miljön som spelet utspelar sig i (grafikrelaterat). Förslaget var att Gömspelet skulle utspela sig på natten eller kvällen, vilket skulle motivera varför huvudkaraktären inte kunde hitta de gömmande karaktärerna. Eftersom spelet fortfarande var i ett konceptuellt stadie vid denna tidpunkt kunde detta vara användbart vid vidareutvecklingen av spelet, för att göra det mer unikt än de andra delspelen.

(22)

5.3 Design

Analysen gav stor insikt i vad som behövde göras i projektet och intressanta idéer som var värda att testas. Läsningen resulterade i en skiss för Gömspelet som bland annat bestod av en att-göra-lista som listade element som planerades att implementeras i spelet. Nedan listas ett litet urval av den listan:

● Byta ut gamla karaktärer och ersätt dem med mer passande karaktärer (grafik). ● Skapa en karaktär som gömmer sig bakom stenar.

● Justera positionerna för stenarna. ● Skapa animationer för karaktärer.

● Skapa en tankebubbla för trädgårdstomten.

Detta är dock bara en liten del av allt som har implementerats, de flesta mindre implementationerna, som exempelvis finjusteringarna av karaktärernas beteenden och rörelsemönster, ansågs inte värda att skriva ner.

För övrigt så listades alla idéer som nämnts i analysen ovan i skissen, då de var potentiella kandidater för implementation. För vidareutvecklingen av spelet formulerades även en lista grafik och repliker som behövdes för det slutgiltiga spelet. Designfasen bidrog därmed med en skiss som användes flitigt i detta projekt, men som förhoppningsvis även framtida utvecklare kan ha nytta av.

5.4 Implementation

När det kommer till resultatet för Gömspelet kan flera detaljer observeras i bild 5.2 nedan. Till att börja med är knappanelen uppe till vänster formad som en matris, med tre kolumner och rader för att representera intervallet 1-9. Dessutom syns det att knapparna är ordnade slumpartat (1, 3, 5, 6, 4, -1, 7, 0, 2), vilket kan jämföras med knappanelen i bild 4.1 där knapparna är uppradade i en horisontell linje och i nummerordning.

(23)

Bild 5.2. En skärmbild från Gömspelet med intervall: 1-9, knappordning: slumpartad, representation: nummer och räknemetod: add och sub.

Nästa detalj som kan observeras är att huvudkaraktären biet från spelet Humlehjälpen, som detta spel baserades på, är utbytt mot en trädgårdstomte. Blommorna är utbytta mot stenar och har flyttats upp lite. Resten av bakgrunden är dock oförändrad då den ansågs som en lämplig bakgrund att använda för tillfället. Det mesta som syns i bilden är med andra ord placeholders och kommer troligtvis inte användes i den slutiga versionen av spelet.

Den vita tankebubblan vid trädgårdstomten är en av de nya idéerna som implementerades i spelet. Med räknemetoden add och sub, föreslog trädgårdstomten i detta scenario att kolla bakom sten två, vilket är anledningen till tvåan i tankebubblan. ‘+ 1’ i tankebubblan är valet som användaren gjort. Sedan presenteras summan ‘ = 3’, och resultatet blir strängen: “2 + 1 = 3” vilket representeras i tankebubblan. Detta innebär att tomten kommer gå till den tredje stenen, vilket den gömmande karaktären (ett bi) kan skymtas bakom.

Det som inte syns i bilden är de små animationer som sker under spelets gång. Innan varje rond börjar kommer en av tre karaktärer synas springa bakom en av stenarna, vilket gör det extra tydligt var den gömmer sig. Ifall användaren gissar rätt, så går tomten till stenen och karaktären hoppar då fram och springer sedan iväg ur bild. Här var det tänkt att karaktären skulle göra någon rolig animation och säga något, men det fanns inte tid för det.

(24)

Ett litet easter egg4 är att för varje rond i Gömspelet så skapas en karaktär bakom en av

stenarna vilket användaren inte kan se. Ifall användaren råkar gå till stenen under någon rond så sker en liten animation där den springer iväg. Detta för att skapa lite mer variation i spelet. I slutet av utvecklingsprocessen skapades en ny demomeny med lite extra tillägg jämfört med den gamla demomenyn i bild 2.1. Den nya demomenyn i bild 5.1 nedan inkluderar bland annat Gömspelet, som har döpts om till ‘Kurragömma’ i selektionen av delspel. Detta innebär att spelet nu kan startas från denna meny samtidigt som det går att välja inställningar för spelet via menyn, snabbt och enkelt. Förutom det, finns nu valmöjligheten ‘Knappordning’ bredvid ‘Intervall’, med alternativen ‘Ordnad’ och ‘Slumpartad’. Som namnet föreslår så innebär alternativet ‘Slumpartad’ att knappordningen i panelen blir slumpartad, vilket kan appliceras på alla delspel.

Bild 5.1. Den nya demomenyn med det tillagda spelet ‘Kurragömma’ motsvarande Gömspelet. Nu finns även rubriken ‘Knappordning’ till höger, med valalternativen ‘Ordnad’ och ‘Slumpartad’.

5.5 Testning

Varje deltagare i testningen fick fylla i ett frågeformulär efteråt, med frågor som försöker ta reda på deras upplevelse över specifika aspekter i spelet. Nedan i tabell 5.1 visas resultatet för

(25)

de kvantitativa frågorna i enkäten för Gömspelet, nämligen fråga 1, 2, 4, 6 och 7, vilket besvarades av fem deltagare.

I fråga 1 kan det observeras att en av de som skrev enkäten hade en ålder som låg mer eller mindre inom målgruppen (0-12) för Gömspelet. Resten var mycket äldre och kan därmed antas vara mer än kompetenta för denna typ av matematik som används i spelet. Fråga 2 visar lovande resultat att alla förstod mer eller mindre vad som skulle göras, alltså att hitta karaktären som gömmer sig. Fråga 4 tyder på att det finns blandade känslor om den nya tankebubblan, ingen tyckte att den varken var underbar eller dålig. Fråga 6 och 7 tyder på att knappanelen var någorlunda enkel att förstå, men att många hade föredragit någon annan typ av uppställning (horisontell- och vertikal rad). Observera att en deltagare hoppade över fråga 7.

# Fråga Svar

1 Hur gammal är du? 0-12: 1

13-18: 0 19+: 4 2 Var det svårt att förstå vad du skulle göra? Ja: 0

Nej: 5 4 Vad tycker du om trädgårdstomtens tankebubbla? (den

som visar uträknandet t.ex. 4 + 3 = 7)

Dålig: 0 Mindre bra: 1 Ganska bra: 4 Underbar: 0 6 Hur svårt var det att använda knappanelen, när den är

uppställd som en matris? Svårt: 0Ganska svårt: 1 Ganska enkelt: 2 Busenkelt: 2 7 Vilken uppställning av knappanel skulle du använda för

detta spel?

Matris (nuvarande): 1 Horisontell rad: 1 Vertikal rad: 2

Tabell 5.1. Resultatet för de kvantitativa frågorna i enkäten om användarupplevelsen för Gömspelet.

Frågorna 3, 5 och 8 utgör de mer kvalitativa frågorna i enkäten, och användes för att ta reda på lite mer utförligt varför deltagarna svarade som de gjorde på de kvantitativa frågorna. Fråga 3: “Berätta kort vad du tror att spelet handlar om, baserat på vad du har sett (ignorera karaktärernas repliker).”, var en kontrollfråga baserat på föregående fråga 2, för att se om deltagaren hängde med på vad spelet faktiskt handlade om utifrån vad de observerat. Eftersom replikerna i spelet var återanvända och inte hade något med Gömspelet att göra, så var det ett test om folk kunde ignorera dem och se vad som faktiskt händer. Två av deltagarna svarade något i stil med: “det handlar om karaktärer som gömmer sig” vilket är det svar som

(26)

eftersöktes. En annan deltagare missförstod frågan genom att svara vad hela Magiska Trädgården handlade om, och de två sista gav otydliga svar.

Fråga 5: “Berätta varför du tycker så.” är också baserad på den föregående frågan 4, för att ta reda på varför deltagarna svarade som dem gjorde. Deltagarna verkar vara eniga om att tankebubblan är lite otydlig, att den är för liten och försvinner rätt snabbt efter att den dykt upp. Det var tydligt i svaren att det fanns tveksamheter om tankebubblan behövdes, att den förvirrar eller inte läggs märke till. Samtidigt tyckte ändå 4 av 5 att tankebubblan var ‘ganska bra’, så inget totalt misslyckande.

I fråga 8: “Övriga kommentarer?”, fångades några intressanta kommentarer upp. En deltagare föreslog att lägga till en replik som förklarar när/varför knappanelen slumpas om. En annan föreslog ett poängsystem för att ge feedback till spelaren och en statusmätare som visar hur långt man har kommit i ett delspel.

(27)

6 Diskussion

6.1 Resultat

Resultatet av kraven fram till implementationen är en början på ett spel som förhoppningsvis ger en bra grund för vidareutvecklingen av spelet, som bland annat skulle innebära implementationen av grafik och finslipning av funktionaliteten. Eftersom spelet fortfarande till stor del är i ett konceptuellt stadie så kan idéerna i skissen för Gömspelet vara till lika stor nytta som själva implementationen av spelet, vilket har uttryckts av kunden som kommer sköta vidareutvecklingen.

Utvärderingen gav flera värdefulla insikter på de specifika aspekterna som undersöktes. Redan vid detta stadie där Gömspelet varken har egen grafik eller ljud, så tyder fråga 2 och 3 i enkäten att deltagarna mer eller mindre uppfattar vad som händer och vad de ska göra. Detta implicerar att spelet är på rätt väg i utvecklingen, och när väl grafiken och ljudet har implementerats så kommer användarupplevelsen troligtvis vara ännu bättre.

Tankebubblan som visar trädgårdstomtens uträkning har enligt fråga 4 och 5 rum för förbättring. Den upplevdes som lite otydlig och att den försvinner för snabbt efter att den dykt upp. Personligen anses konceptet för tankebubblan som en bra idé som kan vidareutvecklas. Insikten om att implementera tankebubblan kom först efter att ha testat många av de andra delspelen och efter att ha läst studien i [2] där lärbara agenter visualiserar sitt tänkande. I till exempel räknemetoden addition, så uttrycks aldrig hur karaktären kommer fram till summan (x + y = z) efter att användaren angett ett svar. Den nya tankebubblan var tänkt att förtydliga för barnet varför vi ska gå till just den stenen, istället för att bara säga att vi ska gå till exempel tre steg framåt. Därför finns det sannolikt potential för mer lärbarhet i detta område, frågan är om det ska göras med en tankebubbla eller kanske repliker.

Den matrisformade knappanelen var också en intressant implementation som har en del potential. Fråga 6 tyder på att panelen var relativt lättförståelig vilket är ett bra tecken. Samtidigt tycker ändå de flesta deltagarna i fråga 7 att knappanelen borde vara formad som en horisontell/vertikal panel vilket är rimligt då de representerar en tallinje gentemot matrisen, vilket kan vara enklare för barn. Knappanelen är dock beroende på själva grafiken i spelet, då grafiken för knapparna kommer överlappa annan grafik i bakgrunden. Så ifall en horisontell knappanel skulle täcka över viktig grafik i spelet, så kan den formas om till en matris och läggas i något hörn där den inte tar mycket plats. En idé är också att kunna byta formationen för knappanelen under spelets gång i pausmenyn, från till exempel horisontellt till matrisformat.

Fråga 8 gav flera intressanta kommentarer om spelet. Det fanns ett förslag om att lägga till en replik (för tomten troligtvis) som förklarar när/varför knapparna slumpas om (vid slumpartad knappordning). Detta förslaget är rimligt, och även kunden pratade lite om att lägga till

(28)

om hur hur viktigt det är att använda tydlig grafik för att klargöra för användaren vad som händer, vilket också kan appliceras på ljud för att ge ett tydligt sammanhang i spelet.

Två andra kommentarer var att inludera ett poängsystem och en statusbar som indikerar hur långt man har kommit i spelet. Ett poängsystem finns redan, men det kan definitivt förbättras. Användare uppskattar belöningar i spel [6], så att lägga till fler belöningar i spelet och ljudeffekter när man får en belöning kan förbättra poängsystemet drastiskt. En statusbar är en bra idé för att sätta användarens förväntningar på hur långt spelet är. Samtidigt är den typiska användaren ett barn, som kanske inte förstår vad statusbaren innebär, och då blir den istället en onödigt distraktion i spelet.

6.2 Metod

Analysen i grund och botten innebär en massa läsande vilket många kan uppleva som ett lite tråkigare moment jämfört med själva implementationen, vilket gör att denna del ibland utförs lite slarvigt. När det kom till att läsa teorin i sektion 3 så kunde flera källor använts i flera av delrubrikerna för att göra informationen mer trovärdig och ge flera perspektiv på den vetenskapliga frågan. En anledning till att detta inte blev av var viljan att börja programmera och komma igång med implementationen. När man läste kändes det lite som att man inte gjorde något utan snarare slösade tid som kunde spenderats på att koda. Under själva läsning dök även flera idéer upp vilket byggde på viljan att börja implementera dem. Läsningen av vetenskapliga artiklar fick troligtvis inte så lång tid som det behövde och övergången till implementationen gick nog därmed för fort. Oavsett så dök flera värdefulla idéer upp under förstudien och utvecklingen, där en del till och med implementerades.

En av de viktigaste besluten i implementationen var att utgå från det existerande delspelet Humlehjälpen för att utveckla Gömspelet. Detta innebar att kopiera filen för det spelet och sedan göra små ändringar i den nya kopian. Detta hade fördelen att spara en massa tid som annars skulle gått åt på att lära sig strukturen av spelet för att kunna konstruera ett själv. Med denna metod behöver man endast förstå några få delar av spelet, specifikt dem delar som skulle ändras. Metoden är helt enkelt mycket effektivare för denna typ av arbete. Men säg att arbetet gick ut på att förbättra strukturen på ett delspel och skapa en bättre funktionalitet eller liknande. Då vore det troligtvis bättre att börja från början med en tom fil och utvärdera hur spelet kan programmeras på det effektivaste sättet. Gömspelet, på grund av detta beslut, fungerar därmed på liknande sätt som Humlehjälpen, vilket kanske inte är det funktionellt effektivaste sättet.

Utvärderingen av spelet är argumenterbart den svagaste delen av detta projekt. Den var inte inplanerad särskilt bra och inte särskilt genomtänkt från början. Planen var först att observera via zoom-möte testpersonen när hen spelar spelet och sedan ställa muntliga frågor om upplevelsen. Det var dock svårt att få ett entydigt svar på de aspekter som eftersöktes, därför bestämdes det att en enkät skulle användas för att extrahera dessa svar. Eftersom det är svårt att observera beteenden via ett zoom-möte så bestämdes det att testpersonerna skulle få testa

(29)

på egen hand utanför zoom-mötet, efter att ha fått en kort introduktion till spelet. Därefter fyllde de i enkäten via en länk skickad till dem. Detta ansågs vara bättre då det minskar antalet distraktioner som normalt skulle komma från att vara observerad under ett zoom-möte. Däremot kan jag inte veta om det gjorde allt som de skulle, att de körde igenom hela spelet osv.

6.3 Replikerbarhet, reliabilitet och validitet

Metoddelen kan vara svår att replikera, specifikt implementationsdelen då varje designbeslut inte har beskrivits där. En läsare som vill replikera detta antas ha någon typ av programmeringserfarenhet för att kunna lista ut själv hur spelet ska programmeras utöver det som har beskrivits. Många små ändringar har även gjorts i andra filer än den ursprungliga filen för Gömspelet, vilket kräver en påläst programmerare som har en grundlig förståelse över filstrukturen för Magiska Trädgården att kunna lista ut. Utvärderingen är dock relativt rakt på sak och kan enkelt replikeras utifrån den information som angivits.

Att kunna få exakt samma resultat som implementationen i detta projekt är inte sannolikt då flera smådetaljer har implementerats i spelet som inte är specificerade i kravspecifikationen. Om metoden däremot utförs enligt denna rapport så lär utvecklaren kunna skapa ett liknande spel som innehåller det viktigaste koncepten som nämnts ovan, som exempelvis karaktärer som gömmer sig bakom stenar. Resultatet för utvärderingen kan dock variera en del, speciellt eftersom väldigt få testpersoner användes i undersökningen. Detta kan variera beroende på till exempel testpersonernas ålder och hur vana de är med att spela datorspel.

Eftersom utvärdering inte var lika genomtänkt som andra faser i detta projekt så kan det påverka validiteten negativt. Det fanns tvivel om att vissa testpersoner inte skulle förstå vissa av frågorna i enkäten då många frågor var väldigt korta och inte gav så mycket bakgrundsinformation. Detta var en risk som togs för att inte göra frågorna så förvirrande för de yngre testpersonerna i gruppen, då det fanns misstankar om att mycket text i frågorna bara skulle göra det värre i att förstå dem. Detta kan leda till felaktiga svar, där folk missuppfattar vad en specifik fråga syftar på, vilket hände i fråga 2.

6.4 Arbetet i ett vidare sammanhang

Målgruppen för Gömspelet och Magiska Trädgården är förskolebarn, vilket betyder att utvecklare har ett stort ansvar. Matematiska förmågor som lärs ut i spelet är väldigt viktiga för barn att skaffa sig i ett tidigt stadie [3], och utveckling av Magiska Trädgården bör därmed ske genomtänkt och ansvarsfullt, med goda avsikter att i första hand främja lärandet av matematik. Om detta spel skulle användas i praktiken i skolor så vet vi inte heller exakt hur det kommer användas, ifall lärare helt förlitar sig på spelets förmågor eller om spelet endast används som ett komplement vid sidan av undervisningen. Om en lärare väljer att exklusivt använda spelet för att undervisa elever i matematik så förlitar de sig helt på att spelet fungerar ordentligt och att det är effektiv i sitt lärande. I detta fall kan små avvikelser

(30)

för eleven senare i livet. Cohrsen och Niklas [3] studerade bland annat vetenskaplig slutledningsförmåga och hur viktig det är att skaffa sig den förmågan i tidig ålder genom matematik. Utan en vetenskaplig slutledningsförmåga lär det bli mycket svårare att lära sig och förstå nya kunskaper generellt, även i senare skeden i livet. Magiska Trädgården kan med andra ord spela en viktig roll i detta lärande och noggrannhet bör därför appliceras vid utvecklingen och användningen av den.

(31)

7 Slutsatser

7.1 Syfte

Syftet från punkt 1.2 i inledningen: “Projektet ska generera ett webbaserat lek-och-lärspel som ska användas för att förbättra mattekunskaper hos barn inom förskolan” har till största del uppnåtts. Men som tidigare nämnt i rapporten så har resultatet endast genererat funktionaliteten av Gömspelet och det finns därmed ingen unik grafik. Det krävs alltså en del vidareutveckling innan spelet kan implementeras som en del av Magiska Trädgården.

7.2 Frågeställningar

Som utvecklare av spelet ville vi besvara frågorna nedan under projektets gång:

1. Hur ska vi utvecklare utforma spelet för att göra alla aspekter i spelet så lärorika och användbara som möjligt för användaren?

2. Hur ska vi utvecklare programmera för att underlätta den existerande och framtida utvecklingsprocessen av spelet?

Frågorna besvaras i ordningen i punkterna nedan.

7.2.1 Lärbarhet och användbarhet av spelet

Den första frågeställningen har till stor del redan besvarats i hur delspelen tidigare har programmerats. Gömspelet är som tidigare nämnt baserat på de andra delspelen i hur spelet utspelar sig och andra koncept. Detta innebär att Gömspelet ‘ärver’ en del av den vältestade fukntionaliteten från de tidigare delspelen, så därför fanns det ingen anledning att undersöka eller ändra de aspekterna vidare mycket. Målet var istället att hitta på nya idéer som kunde förbättra användbarheten av spelet, som till exempel en tankebubbla som bättre kunde visualisera hur en datafigur räknade fram summan av en addition. Dessa nya idéer var tänkta att sedan användas i en mer noggrann testning och generellt plantera idéer i huvudet i de som ska vidareutveckla spelet. Så för att besvara frågeställning 1 i frågeställningen så handlar det om att utforma spelet likt de tidigare delspelen för att behålla de bästa aspekterna från dem, men också bidra med nya idéer som kan förbättra användbarheten och lärbarheten ännu mer.

7.2.2 Effektiv programmering

För att underlätta nuvarande och framtida programmering av spelet enligt sista frågeställningen finns en del generella regler som är bra att följa. I detta projekt följdes riktlinjer som exempelvis att kommentera all ny kod som skrivits och använda lämpliga variabelnamn som väl beskriver vad de representerar. Kodstilen för koden i detta projekt anpassades också till koden som redan fanns, för tydlighet och följdriktighet. Eftersom implementationen av Gömspelet utgick från det existerande spelet Humlehjälpen så behålls den kodstruktur som fanns i de tidigare spelen, vilket inte bara underlättade utvecklingen av detta projekt men även kommer underlätta för vidareutvecklingen. Detta, kontra att börja

(32)

7.3 Konsekvenser

Gömspelet har potential att bli ett väldigt intressant spel med mycket variation och nyhetsvärde jämfört med de andra delspelen. Magiska Trädgården kan därför ha stor nytta av ett sådant spel för att kunna skapa en mer varierande och spännande upplevelse. Detta kan leda till en större nöjdhetsfaktor för barn som spelar Magiska Trädgården, vilket i sin tur kan leda till att de barnen lär sig mer matematik, vilket enligt [3] kan innebära att de kommer lyckas bättre i skolan i framtiden.

7.4 Framtida arbete

Som det hintats om genom hela denna rapport så är Gömspelet inte färdigt än vid tiden då denna rapport skrivs. Spelet saknar helt och hållet egen grafik, dock så innehåller skissen för Gömspelet en lista på lämplig grafik som kan implementeras i spelet, vilket har skickats till kunden. När grafiken har skapats så ska det implementeras i spelet och i samband med det så ska finjusteringar göras utifrån den grafiken. Vidare testning av de element i spelet som grundligt har utvärderats i detta projekt är också aktuellt, som hur tankebubblan kan förbättras och vilken typ av knappanel som bäst passar spelet.

(33)

Referenser

1. Photonstorm (2021) Phaser - HTML5 Game Framework. Available at: https://github.com/photonstorm/phaser (Accessed: 08 02 2021)

2. Doris B. Chin, Ilsa M. Dohmen, & Daniel L. Schwartz. (2013) Young Children Can Learn Scientific Reasoning with Teachable Agents.IEEE TLT special issue, Learning Systems for Science and Technology Education.

3. Cohrssen, C. and Niklas, F. (2019) ‘Using mathematics games in preschool settings to support the development of children’s numeracy skills’, International Journal of Early Years Education. doi: 10.1080/09669760.2019.1629882.

4. Liu. (2020) Client-side development(HTML, CSS, JavaScript, Selenium, RWD). Availible at: https://www.ida.liu.se/~TDDD97/lectures/index.en.shtml (Accessed: 22 03 2021)

5. WebGL (2020) WebGL. Available at: https://en.wikipedia.org/wiki/WebGL https://en.wikipedia.org/wiki/WebGL (Accessed: 08 02 2021)

6. Kamal, M. A. et al. (2019) ‘Play and Learn Case Study on Learning Abilities Through Effective Computing in Games’, 2019 13th International Conference on Mathematics, Actuarial Science, Computer Science and Statistics (MACS), Mathematics, Actuarial Science, Computer Science and Statistics (MACS), 2019 13th International Conference on, pp. 1–6. doi: 10.1109/MACS48846.2019.9024771.

7. D. Alonso-Ríos, A. Vázquez-García, E. Mosqueira-Rey & V. Moret-Bonillo (2009) Usability: A Critical Analysis and a Taxonomy, International Journal of Human–Computer Interaction, 26:1, 53-74, DOI: 10.1080/10447310903025552 8. Matera M., Rizzo F., Carughi G.T. (2006) Web Usability: Principles and Evaluation

Methods. In: Mendes E., Mosley N. (eds) Web Engineering. Springer, Berlin, Heidelberg.https://doi.org/10.1007/3-540-28218-1_5

9. w3techs (2021) Usage statistics of JavaScript as client-side programming language on websites. Available at: https://w3techs.com/technologies/details/cp-javascript/ (Accessed: 23 03 2021)

10. Gulz, A., Londos, L. & Haake, M. (2020). ”Preschoolers’ Understanding of a Teachable Agent-Based Game in Early Mathematics as Reflected in their Gaze Behaviors – an Experimental Study”. International Journal of Artificial Intelligence in Education, 30(1), 38-73.

(34)
(35)

Pseudokod för Gömspelet

HideAndSeekGame.js (Gömspelet)

import resources for /dir .

. .

import Gnome from '../../../characters/Gnome'; import Troll from '../../../characters/Troll';

import Elf from '../../../characters/Bee'; //placeholder import SneakyGnome from '../../../characters/Gnome'; import WoodLouse from '../../../characters/WoodLouse';

const pos = { hidingplaces: { start: 150, stopOffset: 0, }, home: { x: 150, y: 650 }, gardenGnome: { x: 520, y: 620, homeScale: 0.36, startScale: 0.28, inspectScale: 0.2, hidingScale: 0.17, }, hidingCharacter: { y: 600 }, agent: { start: { x: 1200, y: 700 }, stop: { x: 790, y: 640 }, scale: 0.23, }, };

// Different characters that can hide in this game const characters = {

elf: {hidingScale: 0.45, startScale: 0.6}, troll: {hidingScale: 0.08, startScale: 0.11},

(36)

};

// Different environments that can appear in this game const environments = {

caves: {scale: 1.1, str: "cave"}, boulders: {scale: 0.11, str: "boulder"} };

// Determines the formation of hidingplaces (random for each game) function yPositions(xPos, size, func){

if(func == 1) return 460 + 30 * Math.sin(xPos * 1.5);

else if(func == 2) return 430 + 0.0001907 * Math.pow(xPos - size / 2, 2); return 460;

}

var hidingStr = "";

var otherHidingSpot; // To keep track of the other hiding character (easter egg)

export default class HideAndSeekGame extends NumberGame { preload stuff

. . .

create() { // Phaser state function. super.create();

// Setup additional game objects on top of NumberGame.init this.setupButtons({

buttons: { x: 140, y: 25,

vertical: false,

matrix: true, //placera knapparna som en matrix istället för en rad randomized: this.random, //placera knapparna i slumpvald ordning . . . }); setup rources; // Setup hidingplaces

const size = this.world.width - pos.hidingplaces.stopOffset - pos.hidingplaces.start; const width = size / this.amount;

(37)

var yPos, xPos; this.hidingplaces = [];

for (let i = 0; i < this.amount; i += 1) { xPos = pos.hidingplaces.start + (width * i); yPos = yPositions(xPos, size, func);

this.hidingplaces.push(this.add.sprite(xPos, yPos, 'search', hidingStr, this.gameGroup)); this.hidingplaces[i].anchor.set(0.5, 0); this.hidingplaces[i].scale.set(envScale); // Calculate tint const v = this.rnd.integerInRange(150, 230); const c = this.rnd.integerInRange(1, 3); this.hidingplaces[i].tint = Phaser.Color.getColor(c==1?v:255,c==2 ? v:255, c==3 ? v:255); } // Setup gardengnome

this.gnome = new Gnome(this.game, pos.home.x, pos.home.y); this.gnome.scale.set(pos.gardenGnome.homeScale);

this.gnome.addThought(this.representation.slice(-1), true); this.gnome.thought.toScale = 1.6;

this.gnome.thought.x = 300;

this.gnome.thought.guess.bg.alpha = 0; // make buttonsprite invisible this.gameGroup.add(this.gnome); timelinefunctions . . . } instructionfunctions . . .

// new round => a new character is hiding behind the rocks newHidingplace(silent) {

const t = new TimelineMax();

t.add(this.spawnHidingCharacter(this.currentNumber)); this.doStartFunction(t, silent);

return t; }

(38)

// and move it behind a hidingplace

spawnHidingCharacter(number, isOutro = false) {

// in case the previous hiding character has not been deleted if (this.hidingCharacter != null){ this.gameGroup.remove(this.hidingCharacter); delete this.hidingCharacter; } if (this.hidingCharacter2 != null){ this.gameGroup.remove(this.hidingCharacter2); delete this.hidingCharacter2; }

const hiding = this.hidingplaces[number - 1];

const hidingScale = this.setHidingCharacters(number); const t = new TimelineMax();

if(!isOutro) t.add(this.hidingCharacter.move( {x: hiding.position.x, y: hiding.position.y + 50}, 1.5, hidingScale) ); else t.add(this.hidingCharacter.move({x: 300, y: 600}, 1.0)); return t; } setHidingCharacters(number){

// randomize a hidingspot for the other hiding character that is NOT the same as // the actual hiding character that we are looking for

let number2 = this.rnd.integerInRange(1, this.amount - 1); if(number2 >= number) number2 += 1;

otherHidingSpot = number2; // keep track of where this character hides const hiding = this.hidingplaces[number - 1];

const hiding2 = this.hidingplaces[number2 - 1]; const worldWidth = this.world.width;

const yPos = pos.hidingCharacter.y;

const xPos = ((hiding.position.x > worldWidth / 2) ? worldWidth + 100 : -100); var scale = 1;

const hidingCharacter = this.rnd.integerInRange(1, 3); if(hidingCharacter == 1){

this.hidingCharacter = new Elf(this.game, xPos, yPos); //spawn elf this.hidingCharacter.scale.set(characters.elf.startScale);

scale = characters.elf.hidingScale; }

else if (hidingCharacter == 2){

this.hidingCharacter = new Troll(this.game, xPos, yPos); //spawn troll this.hidingCharacter.scale.set(characters.troll.startScale);

(39)

scale = characters.troll.hidingScale; }

else if (hidingCharacter == 3){

this.hidingCharacter = new SneakyGnome(this.game, xPos, yPos); // spawn gnome this.hidingCharacter.scale.set(characters.sneakyGnome.startScale);

scale = characters.sneakyGnome.hidingScale; }

// the other hiding character that will hide behind another hiding spot

this.hidingCharacter2=new WoodLouse(this.game,hiding2.position.x,hiding2.position.y); this.hidingCharacter2.scale.set(0.5);

this.gameGroup.add(this.hidingCharacter2); this.gameGroup.bringToTop(hiding2); this.gameGroup.add(this.hidingCharacter);

this.gameGroup.bringToTop(hiding); //render hidingplace in front of the hiding character this.gameGroup.bringToTop(this.gnome);

this.gameGroup.bringToTop(this.agent); return scale;

}

removeHidingCharacter(number, isOutro = false){ const t = new TimelineMax();

if (this.hidingCharacter != null){ if(!isOutro){

const hiding = this.hidingplaces[number - 1]; const worldWidth = this.world.width;

const yPos = pos.hidingCharacter.y;

const xPos = ((hiding.position.x > worldWidth / 2) ? worldWidth + 100 : -100);

t.add(this.hidingCharacter.move({x: hiding.position.x+60, y: hiding.position.y+60}, 0.5)); //t.addSound(this.speech['iFoundYou!'], this.gnome);

//t.addSound(this.speech['youFoundMe!'], this.hidingCharacter); //t.add(this.hidingCharacter.celebration());

t.addCallback(() => {}, '+=1.0');

t.addCallback(() => {this.gameGroup.bringToTop(this.hidingCharacter);}); t.add(this.hidingCharacter.move({x: xPos, y: yPos}, 1.2));

} else t.add(this.hidingCharacter.move({x: -100, y: 700}, 1.2)); t.addCallback(() => { this.gameGroup.remove(this.hidingCharacter); delete this.hidingCharacter; }); } return t; }

(40)

// check if the other hiding character is hiding here checkForOtherHidingCharacter(number){

const t = new TimelineMax();

if (number == otherHidingSpot && this.hidingCharacter2 != null){ const hiding = this.hidingplaces[number - 1];

const worldWidth = this.world.width; const yPos = 570;

const xPos = ((hiding.position.x > worldWidth / 2) ? worldWidth + 100 : -100); // maybe make a sound as it runs off, as if it was frightened

t.add(this.hidingCharacter2.move({x: xPos, y: yPos}, 1.5)); t.addCallback(() => { this.gameGroup.remove(this.hidingCharacter2); delete this.hidingCharacter2; }); } return t; } . . . startThink(t) {

const addTo = this.rnd.integerInRange(1, this.amount); t.addCallback(() => { this.addToNumber = addTo; this.gnome.lastGuess = addTo; this.gnome.thought.bubble.scale.x = -1; this.gnome.thought.x = 340; this.gnome.thought.guess.representations = this.representation.slice(-1); }); t.addSound(this.speech.thinkItIs, this.gnome); t.addLabel('number', '+=0.3'); t.add(this.gnome.think());

t.addSound(this.speech[`number${addTo}`], this.gnome, 'number'); }

/*MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM*/

/* Number chosen and return functions */

/*WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW */ runNumber(number, simulate) {

const current = this.currentNumber - 1; const sum = number + this.addToNumber;

const result=simulate?sum-this.currentNumber:this.tryNumber(number, this.addToNumber); // create string for thought bubble displaying gnomes thought process (4 + 3 = 7)

(41)

var thinkingTime = '+=0.5'; // how long the gnome thinks

var bubbleScale = -1, bubblePos = 340; // reshape the thought bubble as needed var repeatSum = false; // if add/sub, repeat the sum (7) out loud

if (number != 0 && this.addToNumber != 0){

mathString = (number < 0) ? (" - " + String(-number)) : (" + " + String(number)); mathString = String(this.addToNumber) + mathString + " = " + String(sum); thinkingTime = '+=1.3'; bubbleScale = -1.8; bubblePos = 480; repeatSum = true; } this.disable(true); this.agent.eyesFollowObject(this.gnome); if (this.gnome.thought) { this.gnome.thought.visible = false; }

const t = new TimelineMax(); if (!simulate) {

if (number !== 0) {

const moving = Math.abs(number); if (this.isRelative) {

t.addSound(this.speech[moving === 1 ? 'one' : `number${moving}`], this.gnome); t.addSound(this.speech[number > 0 ? 'forward' : 'backward'], this.gnome);

} else {

t.addSound(this.speech[`order${moving}`], this.gnome); }

t.addCallback(() => {}, '+=0.5'); // Pause until next sound. }

// adjust thought bubble for thinking t.addCallback(() => { this.gnome.lastGuess = mathString; this.gnome.thought.bubble.scale.x = bubbleScale; this.gnome.thought.x = bubblePos; this.gnome.thought.guess.representations = REPRESENTATIONS.NUMBERS; }); t.add(this.gnome.think()); t.addCallback(() => {}, thinkingTime);

t.addCallback(() => {this.gnome.thought.visible = false;});

if(repeatSum) t.addSound(this.speech[`order${sum}`], this.gnome); t.addSound(this.speech.letsGo, this.gnome);

}

t.add(this.gnome.moveTo.hidingplace(sum)); /* Correct :) */

(42)

t.addCallback(() => { this.hideButtons(); this.hidingplaces[current].frameName = hidingStr; this.agent.setHappy(); this.gnome.setHappy(); }); t.add(this.removeHidingCharacter(sum));

t.addCallback(this.gnome.setNeutral, null, null, this.gnome); t.addLabel('goingHome', '+=0.5');

/*

if (this.totalTries <= 1) { // First time

t.addSound(this.speech.goingBack, this.gnome, 'goingHome'); t.add(this.gnome.moveTo.home(3), 'goingHome'); } else { t.add(this.gnome.moveTo.home(2), 'goingHome'); }*/ t.add(this.gnome.moveTo.start()); this.atValue = 0; /* Incorrect :( */ } else { t.add(this.checkForOtherHidingCharacter(sum)); t.addCallback(this.agent.setSad, null, null, this.agent); this.doReturnFunction(t, sum, result, simulate);

}

t.addCallback(this.agent.setNeutral, null, null, this.agent); t.addCallback(this.updateRelative, null, null, this);

return t; } returnfunctions . . . modePlayerDo(intro) { if (this.currentTries > 0) { this.showNumbers(); } else { // if intro or first try

const t = new TimelineMax(); if (intro) {

t.skippable();

if (this.instructions) {

t.add(this.newHidingplace(true));

t.addCallback(this.updateButtons, null, null, this); t.add(this.doInstructions());

(43)

} else { t.add(this.newHidingplace()); } } else { t.addSound(this.speech.getMore, this.gnome); t.add(this.newHidingplace(true)); }

t.addCallback(this.showNumbers, null, null, this); }

}

modePlayerShow(intro) { if (this.currentTries > 0) {

this.showNumbers(); } else { // if intro or first try

const t = new TimelineMax(); if (intro) { t.skippable(); t.add(this.agent.moveTo.start()); t.addSound(this.speech.beeIntro1, this.agent); t.addLabel('agentIntro', '+=0.5'); t.add(this.agent.wave(3, 1), 'agentIntro');

t.addSound(this.speech.beeIntro2, this.agent, 'agentIntro');

t.addCallback(this.agent.eyesFollowObject, 'agentIntro', [this.gnome], this.agent); t.addSound(this.speech.gettingHelp, this.gnome, '+=0.2');

t.addSound(this.speech.beeIntro3, this.agent, '+=0.2'); t.addSound(this.speech.youHelpLater, this.gnome, '+=0.2'); }

t.add(this.newHidingplace());

t.addCallback(this.showNumbers, null, null, this); }

}

modeAgentTry(intro) {

const t = new TimelineMax(); if (this.currentTries > 0) {

t.addSound(this.speech.tryAgain, this.agent); } else { // if intro or first try

if (intro) { t.skippable();

t.add(this.agent.moveTo.start()); // Agent should be here already.

t.addSound(this.speech[`myTurn${this.rnd.integerInRange(1, 2)}`], this.agent); }

t.add(this.newHidingplace()); }

(44)

t.add(this.instructionYesNo(), '+=0.5'); }

t.addCallback(this.showYesnos, null, null, this); } . . .

ChooseScenarioState.js

. . . addSubGames(subgameGroup) {

subgameGroup.add(this.add.text(75, 195, LANG.TEXT.subgameName, textOptions)); this.addSelectionGroup( 'chooseSubgame', subgameGroup, { . . . [STATES[SUBGAMES.HIDE]]: LANG.TEXT.hideGameName }, { y: 230 }, ); . . . // Randomized selection subgameGroup.add(this.add.text(680,300,LANG.TEXT.numberRandomName, textOptions)); this.addSelectionGroup( 'chooseRandom', subgameGroup, { 0: "Ordnad", 1: "Slumpartad" }, { x: 650, y: 335 }, ); . . .

ButtonPanel.js

.

References

Related documents

Enligt Gunilla Lindqvists avhandling Lekens möjligheter (1996) menar hon att fri lek är barnens självständiga aktiviteter dvs. ett naturligt sätt för barnen att yttra sig. Hon menar

Det vi också har kommit fram till när det gäller användandet av kulturella redskap i form av artefakter i leken i förskolan är också hur viktigt det är att dessa både inger

Tendenser visar ett mönster (fetstilt) där en naturlig uppfattning om lek kan sammankopplas med en problemlösande uppfattning gällande matematik, en lustfylld uppfattning kan kopplas

Även om man är positiv till att det ges ut normer som är anpassade till onoterade, mindre företag så menar exempelvis Caesar som i regel har mycket små klienter med en eller ett

”Det finns inte tid att ge varje barn så mycket egen tid som man skulle vilja för att det idag är större barngrupper och fler barn med olika problem” (Pedagog 3). Flera

För att en klassificering ska ske kan barn till exempel beskriva hur de har sorterat, sortera utefter två eller fler egenskaper samt studera hur andra barn

Vidare skriver hon om Henckel (1990) som anser att det finns brister i förskollärares uppfattning om lek mellan teorin och praktiken. Där förskollärarna betonar vikten av lekens

förskolepersonalens resonemang angående leken och hur den kommuniceras hoppas vi med examensarbetet kunna bidra till att skapa en förståelse för hur vårdnadshavare och