En interaktiv webbapplikation for¨ elever med ...1218809/FULLTEXT01.pdfska garantera att elever som riskerar att inte uppn˚a m alen kan f˚ a det st˚ od de beh¨ over,¨ men ofta

Sjalvstandigt arbete i informationsteknologi14 juni 2018

En interaktiv webbapplikation forelever med inlarningsproblematik

Caroline AlgvereVictoria BullMatilda TrodinVanja Wallner

Civilingenjorsprogrammet i informationsteknologi

Computer and Information Engineering Programme

Institutionen forinformationsteknologi

Besoksadress:ITC, PolacksbackenLagerhyddsvagen 2

Postadress:Box 337751 05 Uppsala

Hemsida:http:/www.it.uu.se

Abstract

En interaktiv webbapplikation for elever medinlarningsproblematik

Caroline AlgvereVictoria BullMatilda TrodinVanja Wallner

Almost one out of five Swedish students finish 9th grade without the op-tion to continue their education due to not passing compulsory courses.Unfortunately, students with ADHD or autism often fall into this cate-gory. The opportunity to get extra support for the students who are atrisk of not passing their courses is guaranteed by law, but the schoolsoften fail to fulfill these rights. Todays education is seldom adjusted tomeet the needs of the individual. Our ambition was to create a web ap-plication to be used as a mean of supporting teachers in their teachingand students in their learning. The functionality of the application isdivided into two different views; the one of the teachers and the one ofthe students. The teachers can create assignments with different types ofquestions for their students. Some examples are multiple choice ques-tions, drag-and-drop questions, questions that require a written answerand questions based on images. The teachers can in that way vary theirassignments depending on what suits the student. They can also pro-vide leads on how to solve a question which the students can activateif they want the question explained more thoroughly step-by-step. Theresulting product has a lot of potential for development and needs to beconnected to a data base before it can be used in a big scale.

Handledare: Mats Daniels, Anne Peters och Bjorn VictorExaminator: Bjorn Victor

Sammanfattning

Nastan var femte elev i Sverige gar idag ut hogstadiet utan gymnasiebehorighet. Elevermed diagnoser som ADHD och autism faller tyvarr ofta inom den kategorin. Skollagenska garantera att elever som riskerar att inte uppna malen kan fa det stod de behover,men ofta brister skolorna i att uppfylla detta. Dagens undervisning ar sallan anpassadtill individens behov. Var ambition var att skapa en webbapplikation for att stodja lararei sin undervisning och elever i sitt larande. Den funktionalitet som finns kan delas upp itva olika vyer, en for larare och en for elever. Larare kan logga in pa hemsidan och skapaolika sorters uppgifter for sina elever. Nagra exempel ar flervalsfragor, drag-and-drop-fragor, fragor som kraver textsvar och fragor baserade pa bilder. Larare kan darmed vari-era sina uppgifter beroende pa vad som passar eleven. De kan aven lagga in forklaringarsom eleverna kan aktivera for att stegvis fa hjalp att forsta en fraga. Den resulterandewebbapplikationen har stor utvecklingspotential och behover kopplas till en databas foratt kunna anvandas i stor skala.

ii

Innehall

1 Introduktion 2

2 Bakgrund 3

2.1 ADHD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2.2 Autism . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2.3 ADHD och autism i skolan . . . . . . . . . . . . . . . . . . . . . . . . 4

2.4 Anpassad undervisning och sarskilt stod . . . . . . . . . . . . . . . . . 4

2.5 Inkluderande design . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.6 Progressive Web Application . . . . . . . . . . . . . . . . . . . . . . . 5

2.7 Integritet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.8 Uppdragsgivare/Intressent . . . . . . . . . . . . . . . . . . . . . . . . 6

3 Syfte, mal och motivation 7

3.1 Syfte och motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3.2 Mal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3.3 Avgransningar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

4 Relaterat arbete 8

4.1 Liknande digitala verktyg . . . . . . . . . . . . . . . . . . . . . . . . . 8

4.2 Massive Open Online Courses . . . . . . . . . . . . . . . . . . . . . . 9

4.3 Blandade larmiljoer . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

5 Metod 10

5.1 Sprak och ramverk . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

5.2 Fardiga komponenter och verktyg . . . . . . . . . . . . . . . . . . . . 10

iii

5.3 Implementering av inkluderande design for ADHD . . . . . . . . . . . 11

5.4 Implementation av stod for svag central koherens . . . . . . . . . . . . 12

5.5 Integritet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

6 Riktlinjer for inkluderande design 13

6.1 Tillhandahall en rogivande miljo . . . . . . . . . . . . . . . . . . . . . 13

6.2 Belona och uppmuntra till slutforda uppgifter . . . . . . . . . . . . . . 14

6.3 Ha ett metodiskt upplagg . . . . . . . . . . . . . . . . . . . . . . . . . 14

6.4 Avgransa viktig information . . . . . . . . . . . . . . . . . . . . . . . 15

6.5 Hjalpa eleverna halla reda pa sina framsteg . . . . . . . . . . . . . . . 15

6.6 Anvand korta och tydliga instruktioner . . . . . . . . . . . . . . . . . . 15

6.7 Tillat eleverna att ta pauser . . . . . . . . . . . . . . . . . . . . . . . . 16

6.8 Minimera overraskningar . . . . . . . . . . . . . . . . . . . . . . . . . 16

7 Krav och utvarderingsmetoder 16


7.2 Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

7.3 Funktionalitet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

7.4 Anvandartester . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

8 Systemets uppbyggnad 18

8.1 Overgripande systemstruktur . . . . . . . . . . . . . . . . . . . . . . . 19

8.2 Kodstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

9 Anvandargranssnitt 23

9.1 Startsidan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

9.2 Lararvyn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

iv

9.3 Elevvyn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

9.4 Flervalsfraga . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

9.5 Drag-and-drop fraga . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

10 Utvarderingsresultat 28

10.1 Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

10.2 Funktionalitet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

10.2.1 En vy for eleven och en for lararen . . . . . . . . . . . . . . . . 30

10.2.2 Profilsida for varje elevkonto . . . . . . . . . . . . . . . . . . . 30

10.2.3 Statistik for utforda uppgifter pa elevens profil . . . . . . . . . 30

10.2.4 Olika typer av fragor som kan skapas fran lararvyn . . . . . . . 30

10.2.5 Inloggningsfunktion for elever och larare . . . . . . . . . . . . 31

10.2.6 Hamta data fran en databas via ett API . . . . . . . . . . . . . . 31

10.3 Anvandartester . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31


11 Resultat och diskussion 33

11.1 Resultat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

11.2 Diskussion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

11.2.1 Funktionalitet . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

11.2.2 Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

11.2.3 Anvandartester . . . . . . . . . . . . . . . . . . . . . . . . . . 35

11.2.4 Progressive Web Application . . . . . . . . . . . . . . . . . . . 36

12 Slutsatser 36

13 Framtida arbete 37

v

13.1 Delar vi inte implementerat . . . . . . . . . . . . . . . . . . . . . . . . 37

13.2 Inloggning for foraldrar . . . . . . . . . . . . . . . . . . . . . . . . . . 37

13.3 Maskininlarning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

vi

Begreppslista

Tekniska begrepp

React Ett JavaScript-bibliotek specifikt till for att enkelt kunna utvecklainteraktiva och effektiva anvandargranssnitt.

DOM Document Object Model. Anvands for att dynamiskt uppdatera ettdokuments innehall och struktur.

MOOC Massive Open Online Courses, kurser som ges gratis online pa di-stans.

PWA Progressive Web Application, en typ av webbapplikation som blandannat kan uppfattas som en mobilapplikation pa en mobil enhet.

CSS Cascading Style Sheets, ett programsprak som anvands i syfte attredigera utseende pa till exempel hemsidor och dokument.

JavaScript Ett programsprak som anvands mycket inom web- och applikations-utveckling, framst vid utveckling av klientsidan.

Open source Ett begrepp som anvands for datorprogram eller kallkod som ar tillgangligafor alla att anvanda.

Lighthouse Ett open source verktyg utvecklat av Google som anvands for attanalysera och forbattra prestandan och kvaliteten pa hemsidor.

API Application Programming Interface, ett granssnitt for hur andra pro-gram kan kommunicera med en viss mjukvara. API kan definierassom kopplingen mellan en viss mjukvara och andra program.

GDPR General Data Protection Regulation, en europeisk forordning for attstarka sakerheten kring hantering av personuppgifter.

Ovriga begrepp

NPF Neuropsykiatriska funktionsnedsattningar, ett samlingsbegrepp fordiagnoser som syftar till hur hjarnan och nervsystemet bearbetar in-formation. Diagnoser som ADHD och autism raknas till NPF [25].

1

1 Introduktion

ADHD Attention Deficit Hyperactivity Disorder, en diagnos som innebaratt man har svarigheter med uppmarksamhet, overaktivitet, initia-tivformaga och impulskontroll [23].

Autism Autism ar en utvecklingsneurologisk funktionsnedsattning som paverkarhjarnans satt att hantera information. [27]

1 Introduktion

Nastan var femte elev som gick ut grundskolan i juni 2017 var ej behorig till gym-nasieskolan [20]. Denna elevgrupp pa nastan 20% gick darmed miste om framtidamojligheter da de har samre forutsattningar for fortsatta studier och arbetsmojligheter.Att sa manga elever inte uppfyller de mal som kravs for vidare studier pa gymnasiesko-la ar ett stort samhallsproblem som skolverket, kommuner och skolor arbetar mycketmed [20]. Elever med diagnoser som autism eller elever med ADHD har sarskilt svartatt na skolans mal da traditionell undervisning sallan passar de elevernas satt att lara sigoch hantera ny information [23].

Med ambitionen om att vanda denna trend har vi skapat en webbapplikation som artankt att fungera som ett stod i undervisningen. Applikationen har tva olika vyer, en forlarare och en for elever. Det huvudsakliga syftet ar att larare ska kunna skapa amnenoch lagga in fragor som eleverna sedan ska kunna ta del av. Var applikation har stod foren variation av fragor med till exempel textsvar, flera svarsalternativ, drag-and-drop ochbildfragor.

Att erbjuda en variation av metoder for inlarning gor att undervisningen blir mer indi-vidanpassad. Detta da varje elev sjalv kan valja det inlarningssatt som passar dem bast.Var malgrupp ar hogstadieelever med diagnoser som faller inom kategorin NPF, neu-ropsykiatriska funktionsnedsattningar, framforallt ADHD och autism. Darmed har viutvecklat applikationens design och funktionalitet utifran slutsatser fran tidigare forsk-ning om hur personer med diagnoser som ADHD och autism tar till sig information.

Iden till projektet kom fran foretaget Hyperkonkret, som planerar att vidare fortsattautveckla den slutprodukt vi utvecklat. Det slutgiltiga malet, som stracker sig utanfor dethar projektet, ar att skapa ett sa individanpassat verktyg som mojligt.

2

2 Bakgrund

2 Bakgrund

I denna del beskrivs bakgrunden till vart projekt, vilket forhoppningsvis ger en battrebild av behovet som finns. Har forklarar vi hur situationen for barn med neuropsykia-triska funktionsnedsattningar ser ut i skolan idag och hur programvaruutvecklare kan hamer inkluderande design i atanke. Vi ger aven en bild av vad for slags applikation vi harskapat. Slutligen presenteras aven var externa uppdragsgivare som har motiverat helaprojektet.

2.1 ADHD

ADHD, Attention Deficit Hyperactivity Disorder, ar en typ av NPF som innebar attens hjarna och nervsystem bearbetar information pa ett annat satt an hos personer utanADHD. Symptomen kan sammanfattas av koncentrationssvarigheter, impulsivitet ochoveraktivitet. Begreppet ADHD omfattar aven ADD som innebar att man har sammasymptom forutom overaktiviteten. ADHD kan i skolsammanhang innebara att man harkoncentrationssvarigheter eller har svart att komma igang med arbete [23].

2.2 Autism

Autism ar en NPF som paverkar hjarnans satt att hantera information. Central koherenssyftar pa en individs formaga att forsta sammanhang [12]. Manga individer diagnosti-serade med autism ar detaljfokuserade, det vill saga utgar fran information i form avdetaljer. Det kan gora det svart att forsta storre sammanhang och forma en helhet av de-taljerad information. Det kallas att de har svag central koherens. I den text om autism, avMonica Klasen McGrath, som det har stycket refererar till beskrivs hur manga forskarear overens om att individer med autism har svart att koppla samman information franolika kallor till en helhet for att forsta ett sammanhang. Detta gor att det kan bli svartfor elever med autism i skolsammanhang da det vid inlarning i skolan kravs att eleverkopplar samman fakta och kunskap fran flera olika kallor och drar slutsatser utifran det.Det kan innebara att man till exempel har svart att forsta abstrakta koncept och sprakligaotydligheter [12].

3

2 Bakgrund

2.3 ADHD och autism i skolan

I skollagen star det att skolor ska erbjuda stod och stimulans for att elever ska utvecklassa langt som mojligt [19]. Dar star det aven att elever som behover extra stod ska kunnafa det. Om extra stod inom ramen for ordinarie undervisning inte racker sa ska specia-lanpassat stod ges med beslut fran skolans rektor. Yvonne Gustafsson, examinerad lararevid Lunds universitet, har behandlat amnet i sin rapport Individanpassad undervisningoch menar att detta inte uppfylls som det bor gora [6]. Som tidigare namnt i avsnitt 1sa har elever med diagnoser som autism och ADHD sarskilt svart att na skolans mal.Sven Bolte, professor vid Karolinska institutets kompetenscentrum (KIND), forklararatt minst 10% av alla barn idag har sarskilda behov vilket utgor flera i varje klass [3].Som Gustafsson beskriver i sin rapport sa uppfyller inte alla skolor de lagar som finnsfor att ge stod till dessa elever [6].

Den har problematiken kan ibland skapa problem i elevens utbildning som kommer avatt eleven inte kan fa det stod hen behover. Manga larare upplever att det ar svart atttillgodose dessa elevers behov [3]. 19 av 20 larare uppger att de var helt oforberedda paatt de kanske skulle jobba med elever med diagnoser som ADHD eller autism. Tva av trelarare uppger att skolan de arbetar pa inte kan mota behoven elever med de diagnosernahar. Larare och skolor i stort har alltsa svart att tillgodose de behov som finns blandelever i skolan idag.

2.4 Anpassad undervisning och sarskilt stod

De tva former av stod som skollagen faststallt som rattigheter, i de fall en elev riskerar attinte na malen faststallda i laroplanen for grundskolan, kallas anpassad undervisning ochsarskilt stod [21]. Anpassad undervisning sker inom ramen for ordinarie undervisningoch kan vara att till exempel fa en uppgift forklarad pa ett annat satt, att fa tydligareinstruktioner eller att fa stod i att komma igang med en uppgift. Sarskilt stod ges of-tast av utbildad specialpedagog och kan innefatta samma metoder som den anpassadeundervisningen namnd ovan men aven omfatta mer, som till exempel anvandandet avindividuellt anpassade strategier och nagot som kallas tydliggorande pedagogik [22].Tydliggorande pedagogik innebar att man ar valdigt tydlig i sin planering och att ele-ven ar delaktig i planeringen. Man forsoker besvara fragor som kan uppkomma underen skoldag. Till exempel “Var ska jag vara?”, “Vem ska jag vara med?”, “Vad ska jaggora?”, “Nar?”, “Hur lange?” och “Vad hander sen?”. Det kan beroende pa individentill exempel vara att man har ett visuellt dagsschema eller veckoschema, eller att elevenpa annat satt blir val informerad om vad som kommer handa under dagen eller veckan.Syftet ar att skapa en bra larmiljo genom att gora omgivningen begriplig och hanterbar.

4

2 Bakgrund

Specialpedagogiska skolmyndigheten, som erbjuder stod i form av kunskap och kom-petensutveckling till alla forskolor och skolor over hela Sverige, menar att det inte finnsett pedagogiskt tillvagagangsatt som passar for till exempel alla elever med ADHD ochelever utan ADHD utan att den maste vara individuellt anpassad till varje elev [24]. Pasa vis ar stodet som specialpedagoger redan ger till elever kopplad till den applikation viutvecklar. Den fokuserar pa elevens behov och ger till exempel mojlighet for eleven attfa tydliga instruktioner stegvis vid en fraga som ar svar att forsta. Specialpedagogikenidag innebar initialt, da en elev blivit beviljad sarskilt stod, att en grundlig pedagogiskkartlaggning gors. Darefter ska undervisningen anpassas efter de behov som faststalltsvid kartlaggningen. Specialpedagogiska myndigheten anser att man darefter bor anpas-sa undervisningen efter den enskilda elevens satt att tolka sinnesintryck och koncentrerasig. Webbapplikationen vi utvecklar ar alltsa ett verktyg som kan anvandas for att reali-sera delar av den pedagogik som sarskilt stod kan innebara for elever.

2.5 Inkluderande design

Lorna McKnight ar forskare vid University of Central Lancashire i Storbritannien [15].Hon har en bakgrund inom manniska-dator interaktion med en doktorsexamen i datave-tenskap och psykologi. Hon har arbetat med flera olika projekt for att undersoka barnsinteraktiva formaga. McKnight har skrivit en forskningsrapport om hur programvaru-utvecklare kan anvanda sin befintliga kunskap om anvandbarhetsfragor for att utfor-ma programvara som undviker att exkludera barn med ADHD [14]. Hon insag att detfanns otillracklig information om hur just programvaruutveckling bor ske med hansyntill barn med ADHD. McKnight valde darfor att fokusera pa att hitta allmanna riktlinjerfor hur man bast forhaller sig, som larare eller foralder, till barn med ADHD. Utifrandetta sa sammanstallde hon en lista med 15 riktlinjer som hon ansag mest relevanta ochaterkommande i sin studie. Vi aterkommer till desssa riktlinjer i avsnitt 6. I sin rapportdiskuterar McKnight hur dessa generella riktlinjer kan appliceras pa just programvaru-utveckling.

2.6 Progressive Web Application

Ett onskemal fran intressenten var att anpassa webbapplikationen till kriterier for Pro-gressive Web Application (PWA). En PWA ar en hybrid mellan en vanlig hemsidaoch en mobilapplikation. Begreppet PWA myntades 2015 av bland annat en GoogleChrome-utvecklare vid namn Alex Russell [18]. Applikationer som ar PWA nas via enwebblasare, men kan aven laddas ned pa enheten och upplevas och anvandas som enmobilapplikation. Da sparas innehallet pa enheten sa att det ar tillgangligt offline och

5

2 Bakgrund

kan nas precis som en vanlig mobilapplikation via en ikon pa till exempel hemskarmen.

Google Developers har definierat tio egenskaper som karaktaristiska for PWAs, blandannat att de ar progressiva, responsiva, applikationsliknande, installerbara och lankbara [9].

Progressivitet innebar att applikationen utvecklats med sa kallad Progressive Enhance-ment [16]. Det innebar att den fungerar oavsett val av webblasare och att utseende samtfunktion anpassas beroende pa webblasare och internetuppkoppling. Det gors for att ga-rantera anvandare tillgang till grundlaggande funktionalitet och innehall. Daremot kanutforandet och viss funktionalitet begransas av webblasare eller uppkoppling. Respon-sivitet innebar att applikationen anpassar sig till enheten pa vilken den kors oavsett omdet ar pa en laptop eller en smartphone, med bibehallen anvandarvanlighet.

En hemsida kan uppfylla kriterierna for att vara en PWA mer eller mindre, vilket armatbart. Google Developers har utvecklat verktyget Lighthouse som bland annat kananvandas for att mata hur val en hemsida uppfyller kriterierna.

2.7 Integritet

I och med dataskyddsforordningen General Data Protection Regulation (GDPR) somtrader i kraft den 25 Maj 2018 sa skarps reglerna kring hur personlig data ska lag-ras [2]. Eftersom vi gor en hemsida och kommer lagra information om anvandarna saar det relevant for oss att ha detta i atanke. GDPR innebar att bolag, myndigheter ochandra organisationer har fler skyldigheter vad galler lagring av personlig data. De ar en-ligt forordningen exempelvis skyldiga att vid dataintrang meddela bade de personer detgaller och datainspektionen om informationen kan leda till att personer utsatts for dis-kriminering, id-stolder, bedrageri eller finansiella forluster. De har aven skyldighet attgora en konsekvensbedomning vad det galler dataskydd om de har for avsikt att hanterapersonuppgifter pa ett riskfyllt satt. GDPR innebar framst att de tva ovan namnda skyl-digheterna foljs, men innebar ocksa att Datainspektionen ska gora forhandskontrollerav riskfylld hantering av personuppgifter och dela ut boter ifall forordningen inte ef-terfoljs [1].

2.8 Uppdragsgivare/Intressent

Projektet gors i samarbete med startup-foretaget Hyperkonkret, vilka hade iden till denwebbapplikation detta arbete haft syftet att skapa. Bakom foretaget star Jessica Stigsdot-ter Axberg och Calle Hellberg. Jessica ar artdirector, webdesigner, forfattare samt grun-dare och VD av MrsHyper AB. Hon ar aven mamma at tva barn med ADHD respektive

6

3 Syfte, mal och motivation

Aspergers syndrom, vilket ar en typ av autism. Calle ar systemarkitekt, civilingenjoroch innovator inom edutech med spetskompetens inom dyslexi. Han ar aven grundareav glosboken.se, en webbapplikation som anvands vid inlarning av glosor. Foretagetsvision ar att webbapplikationen ska bli ett verktyg som finns pa varenda skola i helavarlden.

3 Syfte, mal och motivation

I detta avsnitt forklarar vi vad som motiverat vart projekt, varfor iden om projektet upp-kom, vad vi och var uppdragsgivare ville uppna med projektet samt vilka avgransningarvi har behovt gora.

3.1 Syfte och motivation

Som vi beskriver i avsnitt 2 ar undervisningen i skolan i dagslaget inte anpassad tillelever pa individniva, utan ar samma for alla. Det innebar problem for de elever somhar svart att ta till sig information pa det forutbestamda sattet, vilket utgor motiva-tionen for detta projekt. Malgruppen ar hogstadieelever med diagnoser som paverkarderas formaga att lara sig utifran metoder som anvands i skolan idag. Vi har valt justmalgruppen hogstadieelever da det for dem ar extra viktigt att klara malen i skolan ef-tersom deras prestation ar betygsgrundande. Deras betyg ar i sin tur avgorande for vidarestudier vilket ar varfor vi anser att malgruppen hogstadieelever ar viktigare att fokuserapa an yngre arskurser.

Iden till produkten grundar sig i behovet av stod i skolan for elever med NPF och kom-mer utvecklas darefter. Vi tror dock att produkten kommer vara till god anvandning avenfor elever utan dessa diagnoser, och att den kan anvandas som ett allmant kompletteran-de verktyg vid inlarning.

Det overgripande syftet med projektet var att fler elever ska kunna na malen i skolan.Det har vi forsokt angripa genom att skapa en individanpassad webbapplikation somkan erbjuda olika satt att ta till sig information.

3.2 Mal

Malet med vart projekt var att skapa en teknisk losning som ska komplettera den nu-varande undervisningen. Tanken ar att var applikation i framtiden ska finnas tillganglig

7

4 Relaterat arbete

bade i skolor och i hemmet. Att larare borjar anvanda vart hjalpmedel kommer forhoppningsvisinnebara att varje larare battre och lattare klarar av att ge stod till ett storre antal eleveran tidigare och darmed i forlangningen leda till att fler elever uppnar malen i skolan.

3.3 Avgransningar

Data som anvands i uppgifterna samt anvandardata kommer sparas i en databas, sominte utvecklas som en del av det har projektet och darfor ar en avgransning. IntressentenHyperkonkret tog pa sig att utveckla databasen och API genom vilket vi far tillgangtill data i databasen. Vi valde att inte utveckla databasen eftersom vi forutsag att sjalvawebbapplikationens funktionalitet skulle krava nog mycket tid.

I borjan av utvecklingen avgransade vi aven vilka typer av fragor larare ska kunna ska-pa till flervalsfragor, drag-and-drop-fragor och textsvarsfragor. Vi ansag att tiden be-gransade var formaga att implementera fler typer av fragor under det har projektet.

4 Relaterat arbete

Vi har valt att presentera tre olika typer av relaterat arbete under detta avsnitt. Forstintroducerar vi digitala verktyg som finns idag och hur de skiljer sig samt liknar var ap-plikation. Vi har med denna del for att visa pa mer tekniska likheter och hur vi forhalleross till redan befintligt material. Sedan berattar vi om natbaserade kurser och blandadelarmiljoer. Dessa delar har vi valt eftersom det relaterar till var ide om att skapa fleralternativ till traditionell undervisning.

4.1 Liknande digitala verktyg

Det finns idag manga digitala verktyg som kan anvandas vid inlarning av till exem-pel glosor, instuderingsfragor eller liknande med hjalp av flashcards. Nagra exempel arglosor.eu [4], goconqr [5] och korkort.se [8]. Dessa verktyg liknar den applikation viutvecklar eftersom de allihop gar ut pa att ge en mojlighet att forhora sig sjalv inomnagot omrade. De flesta applicerar nagon form av flervalsfragor, och ar ofta inriktade paett specifikt amne som exempelvis korkort.se som forhor en pa teori som kravs for att takorkort.

Var produkt ska till skillnad fran ovan namnda och liknande verktyg besta av olikaanvandarvyer med olika funktionalitet for larare respektive elever. Endast larare ska ha

8

4 Relaterat arbete

mojlighet att skapa ovningar med fragor och elever ska kunna ta del av dessa fragor.En annan viktig skillnad fran konkurrenterna ar att det i var applikation ska finnasmojligheten att lagga in flera olika typer av fragor och svar (drag-and-drop, flervals-fragor, textsvar och sa vidare). Detta ar en viktig del av arbetet da vi inte vill tvingaeleverna att anpassa sig, utan erbjuda alternativ som passar for alla. Det ska aven finnasmojlighet for larare att skriva en forklaring till fragorna for att eleverna ska fa en tydli-gare bild av exakt vad som efterfragas. Denna funktion finns inte heller implementerathos liknande digitala verktyg.

4.2 Massive Open Online Courses

Massive Open Online Courses (MOOCs) ar avgiftsfria natbaserade kurser som lasespa distans, ofta tillgangliga efter en enkel registrering pa den plattform som kursen gespa. Ett exempel ar Khan Academy [7]. Kurserna kan besta av inspelade videolektioner,teoretiska texter och nagon typ av uppgifter, ibland interaktiva. Plattformen som kursenges pa ar ofta en hemsida som ar specifikt anpassad for den eller de kurser som manvill gora tillganglig. MOOCs ar pa sa vis kopplat till vart arbete, eftersom vi ocksautvecklar en webbapplikation som ger mojligheten att lara sig nagot pa distans (elleri klassrummet). En sak som skiljer var webbapplikation fran de flesta MOOCs ar attmaterialet pa sidan inte ar hamtat externt, utan att larare skapar det sjalva for just sinaelever. Pa sa satt kan lararna anpassa uppgifter och amnen efter sin specifika laroplaneller elev. Utover det ar var webbapplikations syfte att vara individanpassad vilket intear fallet for de flesta MOOCs.

4.3 Blandade larmiljoer

Blandade larmiljoer ar ett koncept som syftar till anvandandet av en blandning av tradi-tionella satt att undervisa i klassrum, och datorassisterad undervisning. Ett exempel paen metod for en blandad larmiljo ar The flipped classroom.

The flipped classroom innebar att lararen ger webbaserade genomgangar i till exempelvideoform som laxa att gora infor ett lektionstillfalle, och anvander sedan tiden i klass-rummet till genomtankta aktiviteter for att stodja elevernas larande [13]. Exempel padetta ar praktiska uppgifter, analys eller diskussion. Detta kan uppnas med webbappli-kationen vi utvecklar om lararen valjer att anvanda verktyget pa det sattet, och ar darforrelaterat till vart arbete.

9

5 Metod

5 Metod

I utvecklingen av webbapplikationen har vi anvant flera programsprak, bibliotek ochverktyg, samt fardiga komponenter for delar av funktionaliteten. Vi utvecklar aven ne-dan hur vi arbetat med de riktlinjer for inkluderande design som namns i avsnitt 5.3.

5.1 Sprak och ramverk

Vi anvander programspraken JavaScript och CSS. JavaScript ar ett programsprak somframst anvands i webblasare. Vi har anvant det for att implementera funktionaliteten ivar webbapplikation. CSS ar ett programsprak som anvands for att bestamma en hem-sidas utseende med avseende pa farger, typsnitt, placering av olika element med mera.

Eftersom applikationen ska vara interaktiv sa har vi aven valt att anvanda ett JavaScript-ramverk vid namn React. Det finns flera andra alternativ for att kunna uppna sammafunktionalitet; till exempel andra JavaScript-ramverk som Angular och Vue, och avenmojligheten att gora applikationen i ren JavaScript utan att anvanda nagot komplette-rande ramverk. Vi valde att anvanda React dels for det finns mycket tidigare utvecklatmaterial som latt kan integreras i projektet, vilket vidare beskrivs i avsnitt 5.2. React arocksa ett valdigt populart ramverk just nu vilket gjorde att vi blev inspirerade att laraoss det. Da ingen av oss hade anvant React innan blev det en rolig gemensam utmaning.

React anvander sig aven av nagot som kallas Virtual DOM. DOM star for Document Ob-ject Model, ett granssnitt som ar plattforms- och sprakoberoende. Granssnittet ger sprakmojligheten att dynamiskt uppdatera ett dokuments innehall och struktur och aterfinnsbland annat i HTML. Reacts Virtual DOM jamfor vilka objekt i DOM:en som forandratsnar nagot i systemet uppdateras. Pa sa satt behover bara de objekt som forandrats upp-dateras i den icke-virtuella DOM:en som paverkar vad som visas pa skarmen. Den hartypen av selektiv uppdatering leder till battre prestanda for applikationen, vilket ar annuen anledning till att vi valt att anvanda React.

5.2 Fardiga komponenter och verktyg

Vi har anvant oss av manga olika bibliotek i React, samt fardiga komponenter i den manvi kunnat. Med fardiga komponenter och bibliotek menas till exempel Google-loginsom anvands for att utveckla en funktion for inloggning och biblioteket React-Dragulafor utveckling av drag-and-drop-funktioner. Vi anvande dessa fardiga komponenter ochbibliotek for att kunna fokusera pa att utveckla den funktionalitet som sarskiljer vart

10

5 Metod

arbete fran liknande webbapplikationer som redan finns idag. Det vill saga funktionalitetfor inloggning till olika vyer, att skapa olika sorters fragor och att besvara fragor.

Vi anvander oss aven av verktyget Lighthouse [10] fran Google Chrome DeveloperTools. Lighthouse ar ett open-source verktyg skapat for att stodja utvecklingen av hem-sidor. Det kan anvandas pa vilken hemsida som helst for att utvardera bland annat dessprestanda, tillganglighet och anpassning till kraven for PWA.

Vi anvander oss aven av verktyget Postman [17] for att testa kopplingen mot API. Post-man ar skapat av foretaget Postdot Technologies och anvands vid API-utveckling. En avdess funktioner ar automatiserad testning av ett API, vilket ar den del som ar relevant foross. Det som testas ar att anvanda API for att hamta data ur databasen och fora in data idatabasen, till exempel nar vi skapar en ny anvandare eller en uppgift i ett amne sa skadata sparas i databasen. Vi kan da via Postman anropa respektive tabell med data for attse om det faktiskt sparades. Pa samma satt kan vi se om den data vi vill hamta till var ap-plikation ar vad vi avsett. Till exempel om vi vill hamta uppgifter om en viss anvandarevill vi forsakra oss om att var applikation endast far tillgang till datan om den anvandarevi soker. Detta ar extra viktigt av sakerhetsskal och av respekt for personuppgifter.

5.3 Implementering av inkluderande design for ADHD

Som namns i avsnitt 2.5 sa har forskaren McKnight tagit fram riktlinjer att arbeta efterfor att inte exkludera manniskor med ADHD. Riktlinjerna ar i sig inte specifika forprogramvaruutveckling och darfor ar alla riktlinjer inte helt relevanta for vart projekt.Dessa riktlinjer har McKnight presenterat i sin rapport:

• Utforma material sa att utseendet ar enkelt

• Tillhandahall en rogivande miljo utan starka farger, dekorationer och distraktioner

• Belona och uppmuntra slutforda uppgifter

• Ha ett metodiskt upplagg

• Avgransa viktig information genom att uttrycka den i fetstil, stort typsnitt ellerfarg

• Anvand stor skrift och nagot sans-serif typsnitt som till exempel Arial

• Hjalp studenten att folja texten genom att skriva eller markera alternerande radermed olika farger

11

5 Metod

• Om studenten behover arbeta sig genom en rad fragor, hjalp dem att halla reda pasin position genom att anvanda en markor

• Anvand korta och tydliga instruktioner

• Ha en avgransad plats att jobba pa, i en ljudisolerad miljo med fa distaktioner

• Tillat eleverna att ta pauser

• Hall teknik borta om den inte anvands

• Hall dig till en rutin, till exempel genom att inte byta larare

• Minimera overraskningar

• Hall ogonkontakt

Av dessa 15 riktlinjer sa har vi valt ut de som vi kanner att vi kan ha anvandning av narvi utvecklar var webbapplikation. Vi har valt bort riktlinjer som vi som utvecklare intekan paverka, det vill saga att halla ogonkontakt, att vara i en avgransad och ljudisoleradmiljo, att halla teknik borta och att halla sig till en rutin genom att till exempel inte bytalarare. Vissa riktlinjer har vi aven valt bort for att vi anser tva riktlinjer for lika varandra.Av de riktlinjer som namns i punkt ett och tva har vi valt en av de eftersom bada handlarom enkel, tydlig och minimatistisk design. Vi har av samma anledning, att de ar likavarandra, valt en av de riktlinjer som namns som punkt fem och sex. Riktlinjen somhandlar om att hjalpa eleven att folja texten genom alternerande farger pa rader har vivalt att inte folja pa grund av att vi inte har langa lopande texter dar detta skulle behovas.Hur vi arbetat med de resterande 8 riktlinjer beskriver vi narmre i avsnitt 6.

5.4 Implementation av stod for svag central koherens

Som beskrivet i avsnitt 2.2 har manga som ar diagnostiserade med autism svag centralkoherens. Detta gor att man har svart att forsta sammanhang och medfor hos en delsvarigheter med problemlosning [26]. For att hjalpa de elever som har dessa svarigheterhar vi implementerat ett stod for tydligare beskrivning av de fragor som stalls i ovningarna.For varje fraga som stalls i webbapplikationen har eleven som ska svara mojlighet att faminst ett fortydligande av fragan, till exempel en omformulering av fragan eller tips pahur man ska tanka. For att ta del av stodet trycker eleven pa en symbol och fortydligandetvisas da i textform. Hjalpsymbolen ar placerad intill fragan for att den ska vara enkel atthitta och anvanda.

12

6 Riktlinjer for inkluderande design

5.5 Integritet

Som vi skrivit i avsnitt 2 sa trader en ny forordning vid namn General Data ProtectionRegulation [2] i kraft i maj 2018 som behandlar datasakerhet. I och med anvandning avvar applikation sa lagras data, antingen lokalt eller i en databas, vilket gor att den nyalagen maste tas i beaktande for den data som lagras. Hur som helst sa har databasen inteutvecklats fullstandigt till den funktionalitet som behovs for anvandning av produkten.Darfor sker lagring av data i nulaget pa ett satt som maste modifieras av intressentenefter det ar projektet avslutats. Eftersom databasens utveckling ar intressentens ansvarsa ligger aven ansvaret for laglig hantering av data pa intressenten nar tiden ar kommenfor den slutgiltiga implementationen.


I foljande avsnitt presenterar vi de riktlinjer vi har valt att arbeta med och hur vi forhalleross till dem. Alla rubriker ar riktlinjer framtagna av McKnight, oversatta av oss [14].

6.1 Tillhandahall en rogivande miljo

McKnight forklarar att en rogivande miljo utan starka farger, dekorationer och distrak-tioner kan tillampas for en mjukvarumiljo aven om den ar framtagen for hem- ellerklassrumsmiljoer. Hon menar att anvandning av en minimalistisk design med fa dis-traktioner kan vara bra for alla anvandare eftersom det hjalper till att undvika forvirringoch onodiga fel gjorda i brist pa uppmarksamhet. Som tidigare namnt sa blir personermed ADHD latt distraherade och forlorar uppmarksamheten [23]. Darfor tycks dennariktlinje framforallt viktig for var malgrupp jamfort med den allmanna anvandaren.

Vi hade ambitionen att folja denna riktlinje genom att halla oss till en fargskala och enminimalistisk design. Vi har forsokt undvika skrikiga farger helt och valt dova fargertill detaljer och delar av webbapplikationen med liten innebord. Att allt som finns iwebbapplikationen ska ha ett tydligt syfte ar nagot vi ocksa tankt pa i och med dennariktlinje for att fokus ska vara pa det av vikt.

13


6.2 Belona och uppmuntra till slutforda uppgifter

Att belona utforda uppdrag ar ett vanligt inslag i spel, nar man gor framsteg eller klararav en ny niva. McKnight menar att uppmuntran och anvandandet av ett overdrivet posi-tivt sprak ar bra for den generella anvandaren men i vissa fall kan det fa ett program attframsta som lojligt, beroende pa malgrupp och syfte med programmet.

Vi forstar McKnights tanke kring att uppmuntran ibland kan bli lojligt i mjukvarusam-manhang. Om man till exempel har en kalender dar det kommer upp ”Snyggt jobbat!”nar man lagger in ett nytt mote kan den uppmuntran nog upplevas som onodig och litelojlig. Men eftersom var webbapplikation handlar om att elever ska utfora uppgifter ochklara ovningar kunde uppmuntran implementeras nar en uppgift eller ovning avslutats.Da elever med koncentrationssvarigheter ar en del av var malgrupp ar uppmuntran avenen metod for att halla dessa elevers fokus kvar pa ovningen.

I en artikel, dar kanslor hos barn med ADHD beskrivs, star det hur barn kan kommaatt influeras av forutfattade meningar gallande ADHD och att det kan medfora att barnkanner sig dumma, lata och som “det daliga barnet” [11]. Da ADHD ofta ar en utmaningi inlarningssammanhang ar uppmuntran ett bra satt att ta bort det negativa fokus mangaunga har kring sin diagnos [23].

Malet med att implementera denna riktlinje var att fokus endast skulle laggas pa positivfeedback och inte pa felaktiga svar. Det har for att oka sjalvsakerheten hos eleverna ochminska den negativa syn manga har pa sin diagnos. [11] Vi valde att anvanda oss avdenna riktlinje pa flera olika satt. Vi ville implementera att varje ratt svar ska bemotasmed positiv respons som ”Snyggt jobbat!”, ”Ratt svar!” eller liknande och att positivfeedback ges aven da man klarat av en hel ovning eller ett helt amne. Fokus ska vara attuppmuntra genom visuell feedback och inte kritisera.

6.3 Ha ett metodiskt upplagg

Att ha ett metodiskt granssnitt ar ett viktigt koncept nar man talar om anvandarvanlighet.Det ar sjalvklart viktigt for alla anvandare att det ska vara enkelt att hitta det man letarefter. Men om man ser bortom allmanna anvandare och fokuserar pa elever med ADHDsa ar det av ytterligare vikt att ha ett metodiskt upplagg. Det minskar risken for distrak-tioner vilket ar viktigt for malgruppen for att bibehalla koncentration och intresse.

Var tolkning av denna riktlinje ar att se till att det man letar efter i applikationen skafinnas dar det ”forvantas” finnas. Malet ar alltsa att nar man som anvandare till exempelvill hitta sin profilsida sa ska man inte behova leta runt i applikationen, utan enkelt hitta

14


den. Med detta sa tar vi daremot for givet att alla anvandare tanker likadant, vilket intebehover vara fallet. Vi forsoker dock att ha ett upplagg som efterliknar mallen for andrahemsidor och applikationer nar vi skapar menyer/undermenyer for att anvandarna skakanna igen upplagget.

6.4 Avgransa viktig information

McKnight beskriver att det ar viktigt att avgransa viktig information genom att uttryckaden i fetstil, stort typsnitt eller farg, likt tva tidigare namnda riktlinjer i avsnitt 6.1 och6.3, handlar om hur barn med ADHD behover ha saker tydligt och organiserat. Attmarkera nagot i fetstil eller i farg gor det enklare att hitta och anvandaren identifierardet da som viktigt.

Den har riktlinjen ar viktig i var webbapplikation for att elever ska ha fokus pa ratt saker.Var ambition ar att anvanda fetstil pa den viktigaste texten for att gora den extra tydlig,till exempel rubriker.

6.5 Hjalpa eleverna halla reda pa sina framsteg

Om eleven behover arbeta sig genom en rad fragor ar det viktigt av att eleven kan hallakoll pa vad som hander och sina framsteg. Det kan hjalpa till att halla motivationen uppe.I vart fall hade vi malet att implementera detta med avseende pa framsteg i olika amnenoch ovningar. I varje ovning ska eleven kunna veta vilken fraga den befinner sig pa ochhur manga fragor ovningen bestar av. Vi vill aven visa elevens framsteg i olika amnenoch ovningar samlat overskadligt pa profilsidan, till exempel hur manga ovningar i ettamne man utfort.

6.6 Anvand korta och tydliga instruktioner

Att formulera korta och tydliga instruktioner ar inte en riktlinje vi kant att vi behoverlagga sa mycket fokus pa da det ar lararna som formulerar fragor samt beskrivning-ar till amnen, ovningar och fragor. Dock ar det delvis nagot vi planerade att tanka pai utvecklingen da vi behover beskriva en del funktionalitet for framfor allt larare somanvander webbapplikationen, till exempel hur man skapar en ovning. Det ska inte va-ra nagra svarigheter att skapa ett amne, en ovning eller vara svart att anvanda andrafunktioner pa hemsidan. For elever ville vi aven implementera kortare beskrivningar avbland annat rubriker for att det ska bli lattare att navigera i webbapplikationen. Utover

15

7 Krav och utvarderingsmetoder

detta gjorde vi ett antagande om att anvandarvanligheten i webbapplikationen kommerratt sa naturligt om vi foljt de andra riktlinjerna for inkluderande design som beskrivs.Langre beskrivningar av hur funktioner anvands ansag vi att vi darfor inte borde behovaimplementera.

6.7 Tillat eleverna att ta pauser

McKnight framhaller hur viktigt det ar om man har ADHD att kunna ta pauser i det manhaller pa med. Ett satt att implementera denna riktlinje ar att lata elever ta en paus mitti en ovning och sedan fortsatta fran samma fraga vid ett senare tillfalle, vilket ar det viefterstravat att implementera. Malet med att folja denna riktlinje ar att finna en balanssa att regelbundna pauser ger okad motivation och fokus hos eleverna.

6.8 Minimera overraskningar

I designen planerade vi att folja denna riktlinje genom att halla utseendet i applikationenenhetligt. Anvandaren ska kanna igen sig overallt och inte forvanas over att applikatio-nen plotsligt har ett annat utseende. Till exempel ville vi anvanda samma farger i helaapplikationen for ett enhetligt intryck, samt jobba med ett metodiskt upplagg som namnsi 6.3 vilket ar detsamma i hela applikationen. Aven om funktionaliteten mojliggor att detfinns olika sorters fragor, till exempel flerval och drag-and-drop, sa har malsattningenvarit att dessa fragor ska presenteras pa ett sa likartat satt som mojligt.


Den slutgiltiga produkten kommer utvarderas med avseende pa design, funktionalitetoch anpassning till att vara en PWA. Design och funktionalitet har utvarderats pa tresatt. Dels med hjalp av anvandartester och dels genom att sjalva resonera kring hur valvi anser att kraven har uppfyllts.


Som tidigare namnt anvander vi oss av verktyget Lighthouse for att utvardera kriteriernafor PWA. Lighthouse utfor flera automatiserade tester och sammanstaller en rapportover hur val en hemsida ar anpassad till PWA-kriterierna. Resultatet presenteras dels

16


for de olika kriterierna individuellt och dels en sammanstalld rankning pa en skala fran0 till 100 for hur mycket av en PWA en hemsida ar. Vi anvander oss aven av verktygetPostman, som beskrivits utforligare under avsnitt 5, for att testa kopplingen mot API forbackend.

7.2 Design

Vart projekt gar ut pa att skapa grunden for den digitala plattformen. Eftersom varmalgrupp ar hogstadieelever med neuropsykiatriska funktionsnedsattningar (NPF) sahar stort fokus legat pa en anvandarvanlig design. I avsnitt 5.3 har vi skrivit om inklu-derande design utifran Lorna McKnights studie som bland annat behandlar hur designkan anpassas for att inte exkludera manniskor med ADHD. Nar vi sjalva utvarderar varprodukt med avseende pa design har vi for varje riktlinje vi arbetat efter last vad McK-night anser vara av vikt, vad vi planerade implementera for att uppfylla detta och tagitstallning till hur val det stammer overens med var slutgiltiga design.

7.3 Funktionalitet

Den funktionalitet vi implementerat utvarderar vi sjalva genom att, for varje punkt ilistan under avsnitt 8.1, utvardera huruvida funktionen ar anvandbar pa det satt som av-setts. I utvarderingen av funktionaliteten resonerar vi kring hur implementationen harmojliggjort att uppfylla malet for webbapplikationen, som vi definierade i avsnitt 3.1.Det vi tar stallning till ar alltsa huruvida den implementerade funktionaliteten gor detmojligt for larare att anvanda var webbapplikation som ett komplement till resterandeundervisning. Vi varderar aven hur val de olika delarna av funktionalitet ar implemen-terade.

7.4 Anvandartester

Anvandartesterna vi har gjort har utformats for att utvardera anvandarupplevelse i for-hallande till design och funktionalitet. Vi har dessvarre inte haft mojlighet att goraanvandartester for den tankta malgruppen pa grund av tidsbrist. Vi har istallet testat papersoner som studerar pa instutitionen for informationsteknologi pa Uppsala universitetoch som inte har nagon av de diagnoser som ar relevanta. Darfor ar anvandartesternasom vi gjort inte fullt sa relevanta som de skulle kunna vara, men kan anda ge oss enindikation pa hur en anvandare upplever webb-applikationen. Vi har aven valt att utforaanvandartesterna pa personer i olika aldrar och med olika teknisk bakgrund.

17

8 Systemets uppbyggnad

Testerna gick till sa att vi gav en anvandare uppgifter att utfora pa applikationen ochstallde fragor efter uppgifterna utforts. Uppgifterna som testarna ombads utfora ar kopp-lad till den funktionalitet som namns i punktform i avsnitt 8.1. Specifikt bads testarna attlogga in som bade larare och elev. Inloggad som larare skulle testarna skapa en ovninginnehallande en fraga. Som elev ombads testarna att ga in och utfora tva olika typer avfragor, flervals och drag-and-drop. Vi stallde fragorna:

• Vad ar ditt generella intryck av anvandarvanlighet?

• Vad ar ditt generella intryck av designen?

• Hur var det att navigera pa sidan?

• Forekom nagra storande moment eller otydligheter?

Anvandarna fick aven ta stallning till fyra pastaenden hur val de ansag att detta stammerpa en skala av instammer helt, instammer delvis, instammer inte alls. Pastaendena togsfram med utgangspunkt i de riktlinjer for inkluderande design vi foljt. Vi gav pastaendena:

• Designen ar minimalistisk

• Designen ar enhetlig

• Funktionaliteten ar placerad dar jag forvantat mig

• Jag tycker om fargvalen

Val av fragor och pastaenden gjordes mot bakgrund av de riktlinjer vi foljt for design.Eftersom vi inte utforde tester pa malgruppen sa har fragorna och pastaendena inte an-passats for hogstadieelever. Det hade kunnat goras genom att forklara begrepp som tillexempel vad anvandarvanlighet betyder.


Nedan beskriver vi vilka delar systemet bestar av, bade overgripande och mer detaljerathur systemets kodstruktur ar uppbyggd.

18


8.1 Overgripande systemstruktur

Webbapplikationen bestar av flera olika delar. Grundlaggande finns ett grafiskt granssnitt(frontend) som innehaller logiken for hur uppgifter kan skapas, presenteras och utfors.Frontend kopplas mot en databas, en del av backend dar uppgifterna lagras. API:etkan definieras som lanken mellan frontend och backend och anvands for att hamta in-formationen fran databasen som ska presenteras for anvandaren i webblasaren. Dengrundlaggande funktionalitet som finns i systemet ar:

• En larar-vy och en elev-vy

• Profilsida for varje elevkonto

• Statistik for utforda uppgifter pa elevens profil

• Olika typer av fragor som kan skapas fran larar-vyn

• Inloggningsfunktion for elever och larare

• Hamta data fran en databas via ett API

Webbapplikationen stodjer alltsa tva olika typer av anvandare, larare och elever. Detva typerna av anvandare har olika syfte och darfor aven olika funktionalitet i sin vyi systemet. Som larare kan du skapa nya amnen och ovningar, och som elev kan duta del av de amnen och ovningarna. Som vi beskrivit i avsnitt 3.3 sa ar databas ochAPI en avgransning i vart projekt som intressenten tog pa sig att utveckla. Den sistapunkten handlar darfor om implementation av anvandningen av det API:t. Det innebartill exempel att kunna spara text och filer som fyllts i av en larare i ett formular, formateradet pa det satt API kraver och spara som en fraga eller att hamta data fran databasen attvisa pa elevens profilsida.

19


Figur 1: Ett oversiktligt schema over vart system. Fran en startsida valjer en anvandareatt logga in som elev eller larare. Anvandaren far da tillgang till amnens innehall medmera, som hamtas via en server fran en databas. Servern och databasen ar inte en del avvart projekt. 20


8.2 Kodstruktur

Filerna som webb-applikationen bestar av ar uppbyggt efter en tradstruktur som utgarfran filen index.js som rot. Index.js enda jobb ar att skapa ett App-objekt. Det ar App.jssom ar kopplat till en CSS-fil for generell styling av hela webb-applikationen, ochaven skapar ett sideBar-objekt, som har en egen CSS-fil for styling. Eftersom sideBar-objektet ska vara synligt i alla vyer av systemet sa valde vi att det objektet far renderade ovriga innehallet. Sa sideBar.js i sin tur renderar olika sidor av innehall, som sedanskapar ytterligare objekt for det innehall som ska visas pa respektive sida. Sidebar ren-derar ocksa mer statiska objekt som header och footer som ar samma for alla sidor iapplikationen.

21


Figur 2: Systemets overgripande filstruktur. Inte alla systemets filer finns med i schemat.

Vi har aven sidor som hamtar information fran databasen (bland andra ’studentPage’ ielev-vyn) samt sidor som bade hamtar och uppdaterar information fran databasen (blandandra ’Amnen’ i larar-vyn). Som man kan se i figur 2 sa har course.js manga filer undersig i tradstrukturen. Det innebar att course.js anropar den modul som finns under, som isin tur anropar den under och sa vidare. Modulerna for att hantera de sidor som hamtardata fran och/eller uppdaterar databasen ar mer komplexa pa det sattet an de som endastpresenterar information utan att behova kontakt med databasen. Det beror pa att datamaste skickas mellan de olika modulerna for att sedan samlas upp och sammanstallastill ratt format for databasen.

22

9 Anvandargranssnitt


Var webbapplikation ar uppdelad i nagra olika anvandargranssnitt. Att webbapplika-tionen ar uppdelad ar nodvandigt da den kommer att anvandas av olika malgrupper(bland annat larare och elever). Dessa malgrupper har olika anledningar till att anvandawebbapplikationen och darmed kravs olika funktionalitet for olika anvandare. Har pre-senteras de olika anvandargranssnitten. I designen har vi jobbat pa att fa med tydligaavgransningar, enkla farger och att minimera distraktioner. I kapitel 10.1 forklarar vimer om hur vi uppfyllt riktlinjerna forklarade i kapitel 6.

9.1 Startsidan

Som anvandare kommer du till en startsida med namnet Hyperkonkret, innehallande enkort valkomnande text och tva knappar for att logga in, en for larare och en for elever.Langst upp i vanstra hornet finns en symbol/knapp, som vid knapptryck genererar enmeny pa vanster sida av skarmen over resterande innehall. Sidomenyn foljer med tillvyn for lararen och vyn for eleven men dess innehall varieras beroende pa vy. I menynpa startsidan finns rubrikerna ’Hem’ och ’Om oss’. Vid tryck pa rubrikerna i menynsa minimeras sidomenyn igen till symbolen i vanstra hornet och innehallet visas paskarmen. ’Hem’ visar sidan for inloggning medan ’Om oss’ visar en sida med informa-tion om foretaget Hyperkonkret, vilka som skapat det och hur man kan komma i kontaktvid fragor eller liknande.

23


Figur 3: Startsidan

9.2 Lararvyn

Som larare kommer du nar du loggar in forst till din profilsida, figur 4 som ger enoversikt over dina amnen med mojlighet att redigera amnena. Du kan ocksa se hurmanga elever som ar anslutna till respektive amne och om de gjort ovningarna somfinns till amnet. Varje amne kan innehalla en till flera uppgifter som skapats av lararenvia ett formular pa en annan del av hemsidan. Pa profilen kan man ocksa se kontotsaktivitet, till exempel nar man var inloggad senast. Utover profilen har lararvyn en sidamed amnen lararen skapat, dar lararen aven kan skapa ett nytt amne. Pa varje amne kanman navigera sig vidare till de ovningar som finns under respektive amne. Pa sidan medovningar kan larare aven skapa nya ovningar.

24


Figur 4: Lararens profil

9.3 Elevvyn

Vid inloggning som elev kommer man till sin profilsida. Fran sidomenyn kan man sedanna olika amnen/ovningar via rubriken ’Amnen’. Pa profilsidan finns information omanvandaren; elevens namn, vilka amnen man ar tillagd i, vilka uppgifter eleven har gjortoch kontots aktivitet precis som i vyn for lararen.

25


Figur 5: Elevens profil

9.4 Flervalsfraga

Nar man som elev vill gora en ovning sa valjer man forst amne och sedan ovning underamnet. Da kommer man till forsta fragan i ovningen som kan se ut som figur 5. I bildenvisas en flervalsfraga dar vi hogst upp ser sjalva fragan och nedanfor finns alternativen.Hogst upp i hogra hornet ser vi hur manga fragor vi har gjort och hur manga som finns iovningen (i detta fall ar vi pa fraga 2 av 3). Nedanfor fragan ser vi [H]:et som vid klickoppnar en ruta under dar det kan finnas tips om hur man ska tanka nar man loser fragan.Det finns aven stod for att lagga in bilder i en flervalsfraga.

26


Figur 6: En flervalsfraga

9.5 Drag-and-drop fraga

Detta ar en annan typ av fraga som forekommer i var applikation. Liknande som i fler-valsfragor sa ligger fragan hogst upp, nedanfor finns [H]:et (har inte i oppnad form) ochlangst ner alternativen. I denna ovning ska man dra de graa rutorna fran vanster till rattruta till hoger. Om rutorna hor ihop sa blir det graa gront (pa liknande satt som i fler-valsfragor). Om man parar ihop fel rutor sa aker den vanstra rutan tillbaka till dar denstartade.

27

10 Utvarderingsresultat

Figur 7: En drag-and-drop fraga


Vi har utvarderat vart arbete pa tva olika satt; genom att sjalva resonera kring om dekrav vi haft ar uppfyllda i slutprodukten med avseende pa design och funktionalitetsamt genom att utfora anvandartester. Vi har dessutom utvarderat hur val kriterierna forPWA ar uppfyllda. Samtliga resultat diskuteras och utvarderas sedan i avsnitt 11.2.

10.1 Design

Nar det kommer till designen sa har vi jobbat utifran 8 av 15 riktlinjer som Lorna McK-night tog fram i sin forskningsrapport [14] och som vi namner i detalj i avsnitt 5.3.Vart att namna ar att alla designval ar baserade pa vara egna tolkningar av riktlinjerna.Nar vi har valt farger, textstorlek, typsnitt och liknande har resultatet alltsa till viss delpaverkats av vara egna slutsatser om McKnights riktlinjer.

Vi tycker att vi har lyckats folja manga av riktlinjerna nar vi utvecklat webbapplika-tionens design och viss funktionalitet. Vi har skapat en minimalistisk design i en ljusfargskala och skalat bort allt som inte fyller nagon funktion. Allt som finns i applikatio-nen som inte har med att skapa/genomfora ovningar har istallet nagot syfte att informeraeller fortydliga for anvandaren. Allt detta innefattas av den forsta riktlinjen vi skrev om,

28


i avsnitt 6.1.

Vi anser oss aven val uppfyllt den andra riktlinjen, som vi skriver om i avsnitt 6.2, vil-ken handlar om uppmuntring. Den har implementerats i ovningarna sa att det visas enuppmuntrande symbol efter varje avklarad fraga, samt genom visuell feedback i formgron farg vid ratt svar pa en fraga. Vi har aktivt undvikit att ge negativ feedback ge-nomgaende vad galler var design, till exempel genom att inte presentera hur manga felman hade efter att en ovning ar klar. Om man pa en flervalsfraga svarar fel alterna-tiv sa tonas det felaktiga alternativet ut och blir mindre tydligt, och man kan svara pafragan igen. Ett alternativ dar designen kan upplevas mer som kritik skulle kunna varaatt fel svarsalternativ istallet blir rott, att ett felmeddelande visas eller att man inte farmojligheten att svara ratt pa fragan om man valjer fel alternativ forsta gangen.

Riktlinjen om att ha ett metodiskt upplagg som vi beskriver i avsnitt 6.3 anser vi attvi uppfyllt da vi valt att placera olika delar av innehallet pa platser dar den typen avfunktionalitet ofta finns. Exempelvis leder ett knapptryck pa loggan som ligger hogstupp pa sidan tillbaka till startsidan, och en sidomeny oppnas vid klick pa en ikon hogstupp till vanster.

Riktlinjen vi skrivit om i avsnitt 6.4 anser vi ocksa har implementerats som avsett, att viavgransat information, genom att anvanda ytor med en annan farg an bakgrunden ochvalja storlek pa text beroende pa var vi vill att fokus ska hamna. Ett annat exempel pahur vi foljt denna riktlinje ar att text med liten innebord, som till exempel text i webbap-plikationens footer, har litet typsnitt och dov farg. Denna riktlinje har vi fokuserat extramycket pa i skapandet av rubriker, viktiga knappar och fragor.

I avsnitt 6.5 beskrivs behovet av tydlighet vilket ar en riktlinje vi anser att vi foljt valgenom att visa vilken fraga i en ovning man befinner sig pa och ha rubriker for de sidorman befinner sig pa. For varje ovning star det en raknare, som visar vilken fraga av dettotala antalet fragor som man befinner sig pa.

Riktlinjen angaende korta och tydliga instruktioner som namns i 6.6 har vi forsokt ha iatanke framst vad galler att skapa amnen och fragor som larare.

I avsnitt 6.7 beskrivs riktlinjen som behandlar elevers mojlighet att ta pauser. Den rikt-linjen har inte implementerats.

Den sista riktlinjen vi foljde som beskriv i avsnitt 6.8 handlar om att minimera overraskningar,och har implementerats genom att halla designen enhetlig, att halla oss till vissa fargeroch jobbat med samma metodiska upplagg i hela applikationen. Bland annat placeringav fraga och svar, oberoende av fragetyp, har gjorts enhetligt.

29


10.2 Funktionalitet

Nedan har vi gatt igenom listan fran avsnitt 8.1 och utvarderat varje punkt hur val denar uppfylld. Den funktionalitet som efterstravats var:

10.2.1 En vy for eleven och en for lararen

Tva vyer efter inloggningen har implementerats. Elev-vyn och larar-vyn har olika funk-tionalitet och ar darfor inte en trivial losning. Vi anser darfor att denna punkt ar uppfylld.Hur som helst sa ar implementationen inte sarskilt avancerad i nulaget och funktiona-liteten for bada vyer har stort utrymme for forbattringar for att fungera val med denframtida databasen.

10.2.2 Profilsida for varje elevkonto

Detta har implementerats sa att elever pa sin profil kan se vilka amnen de ar anslutnatill. Den har punkten skulle behovts utvecklas ytterligare for att applikationen skullekomma till sin fulla ratt vad galler funktionalitet som ar till stod for malgruppen. Tillexempel har vi skrivit om i avsnitt 5.3 att det vore fordelaktigt om elever kan pausa mitti en ovning och sedan fortsatta ovningen pa samma fraga vid ett annat tillfalle. Det hadekunnat implementeras genom att elever via amnen pa sin profilsida kan ga in i de olikaovningarna och att ovningarnas framsteg lagrats for att visas dar.

10.2.3 Statistik for utforda uppgifter pa elevens profil

Den har funktionaliteten har inte implementerats eftersom det inte finns nagon funge-rande koppling till databasen dar data over utforda uppgifter ska sparas. Vi har dockskapat en bas for hur statistikfunktionaliteten ska fungera men som sagt inte kunnatkoppla den till databasen da det inte finns nagot fardigt API. I webbapplikationen kanman nu se hur vyn over statistiken ska se ut men det ligger ingen funktionalitet dar annu.Hur det ser ut visas i figur 5.

10.2.4 Olika typer av fragor som kan skapas fran lararvyn

Vi har implementerat denna funktionalitet genom att applikationen stodjer tva olikasorters fragor: flervalsfragor och drag-and-drop-fragor. Ytterligare en typ som ska im-

30


plementeras senare ar uppgifter bestaende av videos med fragor i samt textsvarsfragor,vilket alltsa inte stods i nulaget. Syftet med att ha olika typer av fragor ar att mojliggorafor larare att kunna gora varierande ovningar at sina elever. Detta ser vi som ett sattatt gora applikationen mer individanpassad. Vi anser att syftet for den har punkten aruppfyllt pa ett meningsfullt satt genom var implementation. Annu fler typer av fragorskulle saklart bidra till annu storre mojlighet for variation. Sa for den har punkten finnsmojlighet att forbattra sa lange det finns fler fragetyper att implementera. Vilka typer avfragor som skulle kunna finnas begransas bara av fantasin och stod i API for databasenatt kunna lagra den fragetypen.

10.2.5 Inloggningsfunktion for elever och larare

Vi har inte hunnit implementera en inloggningsfunktion utover en trivial sadan som en-dast bestar av en knapp som man trycker pa for att simulera en inloggning. Vad vi efter-stravade var en inloggningsfunktion dar anvandaren kan logga in med Google-login. Viborjade arbeta med detta men efter att ha stott pa mycket problem valde vi att ga vidaremed en enklare losning. Den enklare losningen vi anvander i nulaget ger inte mojlighetatt spara data kopplat till ett elevkonto. Vi har alltsa inte uppfyllt nagon meningsfulleller anvandbar inloggningsfunktion och darfor inte uppfyllt syftet for funktionalitetenfor den har punkten.

10.2.6 Hamta data fran en databas via ett API

Detta har inte implementerats eftersom API som skulle utvecklas av intressenten in-te har levererats i tid. Var slutgiltiga produkt har istallet implementerat en simuleringav att hamta data fran databasen genom att anvanda filer av fardiga objekt med data isamma format som den skulle lagrats i databasen. Denna simulering anvander liknandefunktionalitet som for att hamta data ur en databas, redo att fardigstallas helt nar API arklart.

10.3 Anvandartester

Vi bad fem olika personer agera som testare. Personerna tillhorde inte den malgruppwebbapplikationen riktar sig till da vi inte hade mojlighet att na ut till nagra inom varmalgrupp. Dessa personer hade ingen fordjupad kunskap om ADHD eller autism menvi ansag det battre att gora anvandartester med dessa personer an att inte gora nagraalls. Som beskrivet i avsnitt 7 sa bad vi testarna logga in som larare och elev. Upp-

31


giften var att skapa en ovning med en fraga respektive utfora en flervalsfraga och endrag-and-drop-fraga. Efter utforandet fick de svara pa fragor och pastaenden angaendesin anvandarupplevelse. Dessa beskrivs mer detaljerat i avsnitt 7 som handlar om ut-varderingsmetoder.

Sammantaget hade testarna en positiv bild av anvandarvanligheten och att det var en-kelt att navigera pa sidan. Aven designen hade anvandarna en sammantaget positiv bildav, forutom en testare som tyckte att fargvalen var trakiga och att fonterna var trakig.Han foreslog en farg till bakgrunden istallet for graskala. Testarna var overens om attdesignen var minimalistisk och tydlig.

Angaende storande moment och otydligheter framkom flera olika synpunkter. En testaretyckte att ikonen for sidomenyn inte var sjalvklar for att forsta att det fanns en sidomenydar. En annan testare tyckte att det var svart att forsta vad ’H’ betydde vid utforandeav uppgifter i elevvyn. Symbolen ’H’ ar en knapp som kan tryckas pa for att fa entydligare beskrivning eller forklaring av fragan. En tredje testare tyckte att det bordevara tydligare att man ar inloggad och att han inte forstod vad han skulle gora intuitivtnar han skulle utfora en drag-and-drop-fraga.


Vi har anvant oss av verktyget Lighthouse for att utvardera kriterierna for PWA. Ensammanfattning av utvarderingen visas i figur 8 nedan. Resultatet av var utvarderingmed hjalp av Lighthouse, som ar ett varde mellan 0 och hundra, gav oss vardet 55. Forde elva tester som gjordes for att utvardera kriterierna sa blev 5 godkanda och 6 ickegodkanda. Resultaten for alla dessa tester ar inte relevanta, till exempel handlar tva avtesterna om sakerhet med avseende pa om hemsidan anvander sig av protokollen HTTPeller HTTPS. Detta ar inte relevant eftersom att hemsidan annu inte har en URL ochdarfor varken anvander sig av HTTP eller HTTPS utan vid testningen kors lokalt. Ett avdessa tester som avser HTTP/HTTPS blev godkant och ett blev icke godkant, vilket vitagit hansyn till vid tolkningen av resultatet i avsnitt 11.2.4. De ovriga godkanda testernahandlade om att var sida har innehall aven nar JavaScript inte ar tillgangligt och att denar responsiv och saker. De ovriga icke godkanda testerna handlade framst om att vi inteimplementerat en sa kallad service worker, en komponent som ska gora att hemsidan artillganglig offline och nedladdningsbar.

Enligt vad som tidigare planerats sa skulle vi fa tillgang till ett API av vara intressenter.Vi skulle sedan utvardera hur val vi lyckades anvanda oss av detta API med hjalp avverktyget Postman. Eftersom vi aldrig hann fa nagot API av var intressent sa har vi justnu inget satt att hamta/lagra information i nagon databas. Darfor gick det inte att gora

32

11 Resultat och diskussion

nagon teknisk utvardering av detta slag. Var losning har, i vantan pa API:et, varit attskapa filer med hardkodade fragor som vi sedan hamtar (pa liknande satt som vi skulleha hamtat information fran databasen).

Figur 8: Resultatet av Lighthouse med avseende pa kriterierna for PWA


Vi presenterar har resultatet av vart projekt samt diskuterar alla delar av resultatet.

11.1 Resultat

Vart projekt resulterade i en enkel och anvandbar webbapplikation med delar av denfunktionalitet vi ville fa med i borjan av projektet. Det finns en vy for larare och enfor elever dar de kan fa en oversikt over sina amnen och uppgifter. Som larare kan duskapa flervalsfragor bestaende av text och bild. Som elev kan du utfora flervalsfragor,textsvarsfragor och drag-and-drop-fragor. Designen ar enkel och minimalistisk i en ochsamma fargskala. Vi har utvecklat mycket funktionalitet, men inte just den som anvandsmellan frontend och backend eftersom vi inte fatt tillgang till databasen och dess API.Fragor som kan utforas fran elevvyn ar hardkodade i egna filer, men hamtas darifranpa ett liknande satt som fran en databas. Fragor och ovnignar kan skapas fran lararvyn,men inte sparas i databasen. Lararen kan daremot valja vilken typ av fraga hen vill skapa

33


samt lagga till beskrivningar och svarsalternativ.

11.2 Diskussion

Nedan foljer diskussion av resultaten med avseende pa framforallt funktionaliteten, de-signen och anvandartesterna.

11.2.1 Funktionalitet

Slutprodukten har implementerat delar av den funktionalitet som var tanken och det somimplementerats namns i avsnitt 10.2. Det som daremot inte implementerats ar att hamtaoch fora in data dynamiskt fran databasen, att kunna visa statistik kopplat till ett elev-konto och en inloggningsfunktion. Vi har implementerat sjalva funktionaliteten for atthamta och spara data till en databas fran var sida av applikationen, men eftersom vi intehar ett API att jobba mot sa har vi inte kunnat prova den funktionaliteten. Att skapa etteget API att testa mot var inte ett alternativ da vi fick reda pa att intressenten inte kundeleverera det alldeles for sent i arbetsprocessen. De funktioner for att spara och hamtadata till en databas ar dock funktioner som ar anpassade efter hur intressenten tanker attdatabasen kommer att se ut vilket gor att de enkelt kan anvanda dessa funktioner.

Som vi namnt ar inte kopplingen mellan databasen och resten av systemet pa plats annu,vilket ar den framsta anledningen till varfor den tankta funktionaliteten inte implemente-rats. Den viktigaste funktionen som beror av att kopplingen fungerar ar att kunna skapafragor som sedan kan hamtas fran databasen fran ett annat konto. Aven statistik for enelevs konto beror av att kunna spara data over elevens anvandande av applikationen idatabasen. Att de har delarna av funktionaliteten saknas gor att webbapplikationen intekan anvandas pa avsett satt i sitt nuvarande tillstand. Aven login-funktionen fungeraridag inte som den ar tankt att fungera da den inte heller kunde kopplas mot en databas,dock har vi skapat en losning i frontend for att visualisera hur det kommer att fungera.Vi ar inte nojda med funktionaliteten eftersom vi inte uppfyller malet vi satt.

11.2.2 Design

Utvarderingen av design utefter de riktlinjer vi foljt resulterade i att vi anser oss ha foljtoch uppfyllt alla utom en, vilket ar att tillata elever att ta pauser som beskrivs i avsnitt6.7. Da vi saknade en databas att lagra data i valde vi att inte implementera detta ochistallet fokusera pa att finna losningar i frontend till de andra problem som uppstod davi fick reda pa att vi inte skulle fa tillgang till nagon backend. Vi anser pa grund av

34


detta att avsaknaden av denna del inte paverkar resultatet sarskilt mycket. Vi har hellerinte implementerat att en ovning blir avbruten om eleven inte svarar inom en specielltid, sa i praktiken ar det fullt mojligt att ta pauser for elever sa lange de inte stanger nedeller laddar om hemsidan. Detta blir lattare att implementera nar det finns en fungerandeinloggningsfunktion som kan halla koll pa anvandarnas aktivitet.

Generellt sett ar vi nojda med designen och anser oss ha skapat en minimalistisk, tydligsida med enhetlig design och positiv visuell feedback for elever. Dessa delar var vad viavsag var viktigast nar vi beskrev vara ambitioner att folja riktlinjerna for inkluderandedesign. Vi har dock tagit till oss kommentarerna vi fick vid anvandartesterna och forstaratt det finns mer att jobba pa. Att utfora anvandartester pa ratt malgrupp anser vi avenviktigt innan vi kan dra en full slutsats over vad vi tycker om vart resultat.

11.2.3 Anvandartester

Som vi beskrivit i utvarderingsresultatet av anvandartesterna sa fick vi overvagandepositiv respons. Vi fick hur som helst flera synpunkter framst angaende delar som upp-levdes som otydliga. En synpunkt om otydlighet handlade om knappen med ett ’H’ pa.H:et star for Hyperkonkret, vilket ar namnet pa foretaget som ar var intressent. Vi hallermed om att det inte ar en symbol som gor att man forstar funktionaliteten intuitivt. Ettalternativ som skulle vara med intuitivt ar att anvanda ett fragetecken som symbol paknappen. Hur som helst var anvandandet av ett ’H’ pa knappen ett onskemal fran intres-senten vilket vi valde att implementera darfor.

Synpunkten angaende hur sidomenyns ikon inte ar helt tydlig har vi ocksa diskuterat.Navigering pa moderna hemsidor och i applikationer kan se valdigt olika ut och menyerkan till exempel ligga i en header, finnas som dropdown-meny i nagot horn eller i vissamobilapplikationer langst ned pa skarmen. Placeringen i ovre vanstra hornet bestamdesmot bakgrund av att vi upplevde det som mer intuitivt att leta efter funktionalitet franvanster till hoger, samma riktning som vi laser. Synpunkten om att det vore hjalpsamt attdet syns att man ar inloggad haller vi med om. Det ar nagot som okar tydligheten och ardarfor helt i linje med de riktlinjer vi foljt vid for design. Det ar nagot vi vidarebefordrartill intressenten och lamnar till dem att avgora ifall de vill implementera i framtiden.

Som namnt i avsnitt 10.3 tillhorde anvandarna som testat applikationen inte den malgruppsom applikationen riktar sig till. Darfor ar resultatet inte helt relevant, till exempelanvandarnas asikter om farg. Vi anser att de riktlinjer vi foljt for att ha en inklude-rande design ar viktigare an testarnas asikter i den har fragan, eftersom riktlinjerna harstod i forskning och anvandarna inte tillhor malgruppen. Synpunkterna om detta ar andaanvandbara for oss da de ger oss en indikation om hur olika man kan uppleva exempelvishur tydligt nagot ar eller anvandandet av en gra fargskala.

35

12 Slutsatser

11.2.4 Progressive Web Application

Lighthouse-utvardering, gav oss ett resultat pa 55 av 100 med avseende pa anpassningtill PWA-kriterierna. Eftersom delar av den funktionalitet som vi hade malet att imple-mentera inte fardigstalldes sa rackte inte tiden till att fokusera pa att anpassa for PWA.Vi prioriterade funktionaliteten som en vanlig webbapplikation, eftersom det inte finnsnagot syfte att ha en PWA om den funktionalitet som behovs for att anvanda applikatio-nen till exempel offline (vilket ar ett av PWA-kriterierna) inte ar implementerad. Blandannat hann vi inte ens borja med att implementera en service worker, som ar den kom-ponent som bland annat gor applikationen tillganglig offline. Vi ar inte nojda med hurlite tid vi har lagt pa PWA-utvecklingen och onskar att vi kunnat fokusera mer pa dettafor att uppna ett battre resultat.

12 Slutsatser

Vi har skapat en webbapplikation som mojliggor for larare att skapa digitalt material forsina elever att arbeta med. Malgruppen ar framst hogstadieelever med neuropsykiatriskafunktionsnedsattningar, NPF. Applikationen stodjer flera olika sorters fragetyper och enfunktion for att fortydliga eller ge ledtradar for att losa en fraga. Designbeslut har tagitsfor att optimera anvandarvanligheten efter malgruppens behov. Aven den funktionalitetsom implementerats ar anpassad efter malgruppens behov. Till exempel variation i formav fragetyper som ar extra viktigt for elever med ADHD och fortydligande av abstraktakoncept som ar extra viktigt for elever med autism. Funktionaliteten och den inklude-rande designen kan forhoppningsvis stodja elever med NPF att na skolans mal och pa savis ge dessa elever battre forutsattningar i framtiden, till exempel mojlighet till vidarestudier pa gymnasiet.

Syftet for vart projekt ar att fler elever med NPF ska kunna na malen i skolan, vilket vibeskriver i avsnitt 3.1. Om vart arbete bidrar till att uppfylla det syftet vet vi inte forranslutprodukten lanseras, anvands av ratt malgrupp och utvarderas. Malet for projektet,som presenteras i samma avsnitt som syftet, var att skapa ett digitalt verktyg for attkomplettera undervisningen. Detta har inte uppfyllts da den slutgiltiga produkten intefullt gar att anvanda for att skapa ovningar for elever att ta del av. Detta i sin tur berorav att databasen och API inte blev klart i tid.

36

13 Framtida arbete

13 Framtida arbete

Tanken ar att var webbapplikation ska fortsatta utvecklas av vara intressenter nar vilamnar over var del av projektet. Detta projekt ar alltsa bara en del av ett storre projekt.Vart mal var darmed anpassat efter att vi skulle skapa en webbapplikation som var lattatt bygga vidare pa.

Att vi i detta projekt bygger en grund for det storre projekt som drivs av foretaget Hy-perkonkret innebar att mycket av den funktionalitet vi skapar kommer att behova vida-reutvecklas. Trots att vi last pa mycket om bland annat designval for var malgrupp gardet inte att saga om dessa val ar ratt forran webbapplikationen ar helt fardigutveckladoch testad av anvandare ur malgruppen i ratt miljo. Det kommer alltsa finnas mycketpotentiellt framtida arbete inom alla utvecklade delar.

13.1 Delar vi inte implementerat

De delar som vi avsett implementera men inte kunnat eller haft tid med maste fardigstallasfor att kunna anvanda webbapplikationen och ar darfor en del av framtida arbete. Tilldessa hor kopplingen mellan frontend och backend, att uppfylla alla kriterier for PWAsamt att uppfylla alla riktlinjer for inkluderande design. For att uppfylla kriterierna forPWA kravs att man lagger till en service worker, att man forsoker forbattra prestan-dan for att kunna ladda sidan snabbt aven med samre natverksanslutning, samt att manskaffar en doman for hemsidan sa man kan implementera anvandandet av protokolletHTTPS.

13.2 Inloggning for foraldrar

Ett framtida utvecklingsomrade ar en funktionalitet sa att foraldrar kan hjalpa sina barnmed deras skolarbete och folja deras progression. Denna funktionalitet ska syfta i attinkludera foraldrarna i barnens undervisning och ge dem ett liknande stod som lararnafar for att lattare kunna hjalpa sina barn. Foraldrar skulle genom webbapplikationenexempelvis kunna se hur det gar for deras barn och kommunicera med barnens larareom deras progression och om vilka delar av undervisningen som barnen har svarare for.

37

13 Framtida arbete

13.3 Maskininlarning

En stor del av den slutgiltiga webbapplikationen ar att den ska vara individanpassad.Detta har implementerats under detta projekt men kommer att fortsatta utvecklas yt-terligare. Vi har implementerat flera olika satt att stalla fragor som en del av att naindividanpassning, vilket i framtiden aven kommer utokas. For vidare utveckling av enfullt individanpassad webbapplikation kommer maskininlarning vara en stor del. Tan-ken ar att webbapplikationen ska kunna lara sig om sin anvandare (eleven) och pa sa vishjalpa lararen att gora undervisningen anpassad till just den elevens inlarningsstil ochbeteende. Det sker genom att se monster i en anvandares interagerande med applikatio-nen. En tanke ar till exempel att applikationen genom maskininlarning tar in statistikover vilka frageformuleringar en elev har lattast for, och utifran det ge eleven fragor paden eller de former som fungerar bast for den specifika eleven. Hur maskininlarningenimplementeras ar upp till framtida utvecklare att specificera.

38

Referenser

Referenser

[1] Datainspektionen. Allmanna fragor om eu:s dataskyddsreform. Datainspektionen.Hamtad: 25 april, 2018. [Online]. Tillganglig: https://www.datainspektionen.se/fragor-och-svar/eus-dataskyddsreform/allmanna-fragor/

[2] Dataskyddsforordningen. Datainspektionen. Datainspektionen. Hamtad:25 april, 2018. [Online]. Tillganglig: https://www.datainspektionen.se/dataskyddsreformen/dataskyddsforordningen/forordningstexten/

[3] T. Enstrom and J. Widell. (2018, Mar.) Stora brister i larares kunskap om autismoch adhd. Svt Nyheter. Hamtad: 12 april, 2018. [Online]. Tillganglig: https://www.svt.se/nyheter/val2018/stora-brister-i-larares-kunskap-om-autism-och-adhd

[4] Glosor.eu: Roligt glosforhor. Hamtad: 5 april, 2018. [Online]. Tillganglig:https://glosor.eu/

[5] GoConqr. Hamtad: 5 april, 2018. [Online]. Tillganglig: https://www.goconqr.com/

[6] Y. Gustafsson, “Individanpassad undervisning,” Examensarbete, 15hogskolepoang pa avancerad niva, Fakulteten for larande och samhalle,LUnd: Lunds Universitet, 2012, hamtad: 12 april, 2018. [Online].Tillganglig: https://muep.mau.se/bitstream/handle/2043/13701/Individanpassad%20undervisning%20examansarbetet%20F%C3%A4rdigt.pdf?sequence=2

[7] Khan academy. Hamtad: 7 maj, 2018. [Online]. Tillganglig: https://www.khanacademy.org/

[8] Korkort.se. Hamtad: 5 april, 2018. [Online]. Tillganglig: https://xn--krkort-wxa.se/

[9] P. LePage. (2018, Apr.) Your first progressive web app. Developers.google.com.Hamtad: 25 april, 2018. [Online]. Tillganglig: https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/

[10] (2018, Apr.) Lighthouse. Developers.google.com. Hamtad: 25 maj, 2018.[Online]. Tillganglig: https://developers.google.com/web/tools/lighthouse/

[11] K. Low. (2018, Jan.) What it is like for a child to live with adhd.verywellmind.com. Hamtad: 10 maj, 2018. [Online]. Tillganglig: https://www.verywellmind.com/understanding-children-with-adhd-20686

[12] M. K. McGrath. (2009) Autism. Autism och Aspergerforbundet. Hamtad: 4 maj,2018. [Online]. Tillganglig: http://www.autism.se/autism

39

https://www.datainspektionen.se/fragor-och-svar/eus-dataskyddsreform/allmanna-fragor/

https://www.datainspektionen.se/fragor-och-svar/eus-dataskyddsreform/allmanna-fragor/

https://www.datainspektionen.se/dataskyddsreformen/dataskyddsforordningen/forordningstexten/

https://www.datainspektionen.se/dataskyddsreformen/dataskyddsforordningen/forordningstexten/

https://www.svt.se/nyheter/val2018/stora-brister-i-larares-kunskap-om-autism-och-adhd

https://www.svt.se/nyheter/val2018/stora-brister-i-larares-kunskap-om-autism-och-adhd

https://glosor.eu/

https://www.goconqr.com/

https://muep.mau.se/bitstream/handle/2043/13701/Individanpassad%20undervisning%20examansarbetet%20F%C3%A4rdigt.pdf?sequence=2

https://muep.mau.se/bitstream/handle/2043/13701/Individanpassad%20undervisning%20examansarbetet%20F%C3%A4rdigt.pdf?sequence=2

https://www.khanacademy.org/

https://www.khanacademy.org/

https://xn--krkort-wxa.se/

https://xn--krkort-wxa.se/

https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/

https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/

https://developers.google.com/web/tools/lighthouse/

https://www.verywellmind.com/understanding-children-with-adhd-20686

https://www.verywellmind.com/understanding-children-with-adhd-20686

http://www.autism.se/autism

Referenser

[13] L. McKnight. Vad ar blended learning och flipped classroom? Utbildning.se.

[14] ——, “Designing for adhd: in search of guidelines,” Master’s thesis, UK:ChiCI Group, University of Central Lancashire Preston, 2010, hamtad:20 april, 2018. [Online]. Tillganglig: https://pdfs.semanticscholar.org/0b0a/5b9bc7cdf104c822d6ac3e5abf0e19be1c46.pdf

[15] ——. (2011, Mar.) Designing for children with adhd: The search for guidelinesfor non-experts. User Experience Magazine. Hamtad: 10 maj, 2018. [Online].Tillganglig: http://uxpamagazine.org/designing children adhd/

[16] Okand. (2018, Apr.) Progressive enhancement. wikipedia.org. Hamtad: 25april, 2018. [Online]. Tillganglig: https://en.wikipedia.org/wiki/Progressiveenhancement

[17] (2018, Apr.) Postman. getpostman.com. Hamtad: 30 maj, 2018. [Online].Tillganglig: https://www.getpostman.com/tools#test-automation

[18] A. Russell. (2015, Jun.) Progressive web apps: Esca-ping tabs without losing our soul. infrequently.org. Hamtad:25 april, 2018. [Online]. Tillganglig: https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/

[19] Skolverket. (2015) Elevers ratt till kunskap, extra anpassningar och sarskiltstod. Skolverket (Juridisk vagledning). Hamtad: 12 april, 2018. [Online].Tillganglig: https://www.skolverket.se/polopoly fs/1.159812!/1505 ratt %20tillkunskap sarskilt st%C3%B6d.pdf

[20] ——. (2017, Sep.) Stora skillnader i gymnasiebehorighet mel-lan elevgrupper. Skolverket. Hamtad: 3 april, 2018. [Online].Tillganglig: https://www.skolverket.se/om-skolverket/press/pressmeddelanden/2017/stora-skillnader-i-gymnasiebehorighet-mellan-elevgrupper-1.263783

[21] ——. (2018, Jan.) Vad galler for extra anpassningar och sarskilt stod? Skolverket.Hamtad: 12 april, 2018. [Online]. Tillganglig: https://www.skolverket.se/skolutveckling/larande/sarskilt-stod-1.243296

[22] Specialpedagogiska skolmyndigeten. (2015, Apr.) Tydliggorande pe-dagogik. Specialpedagogiska skolmyndigeten. Hamtad: 9 maj,2018. [Online]. Tillganglig: https://www.spsm.se/funktionsnedsattningar/neuropsykiatriska-funktionsnedsattningar-npf/tydliggorande-pedagogik/

[23] ——. (2018, Feb.) Adhd och autism - formagor ochforutsattningar for larande. Specialpedagogiska skolmyndigeten.

40

https://pdfs.semanticscholar.org/0b0a/5b9bc7cdf104c822d6ac3e5abf0e19be1c46.pdf

https://pdfs.semanticscholar.org/0b0a/5b9bc7cdf104c822d6ac3e5abf0e19be1c46.pdf

http://uxpamagazine.org/designing_children_adhd/

https://en.wikipedia.org/wiki/Progressive_enhancement

https://en.wikipedia.org/wiki/Progressive_enhancement

https://www.getpostman.com/tools#test-automation

https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/

https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/

https://www.skolverket.se/polopoly_fs/1.159812!/1505_ratt_%20till_kunskap_sarskilt_st%C3%B6d.pdf

https://www.skolverket.se/polopoly_fs/1.159812!/1505_ratt_%20till_kunskap_sarskilt_st%C3%B6d.pdf

https://www.skolverket.se/om-skolverket/press/pressmeddelanden/2017/stora-skillnader-i-gymnasiebehorighet-mellan-elevgrupper-1.263783

https://www.skolverket.se/om-skolverket/press/pressmeddelanden/2017/stora-skillnader-i-gymnasiebehorighet-mellan-elevgrupper-1.263783

https://www.skolverket.se/skolutveckling/larande/sarskilt-stod-1.243296

https://www.skolverket.se/skolutveckling/larande/sarskilt-stod-1.243296

https://www.spsm.se/funktionsnedsattningar/neuropsykiatriska-funktionsnedsattningar-npf/tydliggorande-pedagogik/

https://www.spsm.se/funktionsnedsattningar/neuropsykiatriska-funktionsnedsattningar-npf/tydliggorande-pedagogik/

Referenser

Hamtad: 4 april, 2018. [Online]. Tillganglig: https://www.spsm.se/funktionsnedsattningar/neuropsykiatriska-funktionsnedsattningar-npf/adhd-och-autism---formagor-och-forutsattningar-for-larande/

[24] ——. (2018, Feb.) Pedagogik och forhallningssatt. Spe-cialpedagogiska skolmyndigeten. Hamtad: 12 april, 2018.[Online]. Tillganglig: https://www.spsm.se/funktionsnedsattningar/neuropsykiatriska-funktionsnedsattningar-npf/pedagogik-och-forhallningssatt

[25] ——. (2018, Feb.) Vad ar neuropsykiatriska funktions-nedsattningar (NPF)? Specialpedagogiska skolmyndigeten. Hamtad:22 april, 2018. [Online]. Tillganglig: https://www.spsm.se/funktionsnedsattningar/neuropsykiatriska-funktionsnedsattningar-npf/vad-ar-neuropsykiatriska-funktionsnedsattningar-npf/

[26] N. Vasterbro. (2008, Jul.) Exekutiva funktioner. Habilite-ring & Halsa, Stockholms lans landsting. Hamtad: 4 maj,2018. [Online]. Tillganglig: http://habilitering.se/autismforum/om-diagnoser/teorier-om-annorlunda-tankande/exekutiva-funktioner

[27] L. Osterberg. (2018, Jan.) Vardguiden.se. Vardguiden. Hamtad: 25 april,2018. [Online]. Tillganglig: https://www.1177.se/Uppsala-lan/Fakta-och-rad/Sjukdomar/Autism/?ar=True

41

https://www.spsm.se/funktionsnedsattningar/neuropsykiatriska-funktionsnedsattningar-npf/adhd-och-autism---formagor-och-forutsattningar-for-larande/



https://www.spsm.se/funktionsnedsattningar/neuropsykiatriska-funktionsnedsattningar-npf/pedagogik-och-forhallningssatt

https://www.spsm.se/funktionsnedsattningar/neuropsykiatriska-funktionsnedsattningar-npf/pedagogik-och-forhallningssatt

https://www.spsm.se/funktionsnedsattningar/neuropsykiatriska-funktionsnedsattningar-npf/vad-ar-neuropsykiatriska-funktionsnedsattningar-npf/



http://habilitering.se/autismforum/om-diagnoser/teorier-om-annorlunda-tankande/exekutiva-funktioner

http://habilitering.se/autismforum/om-diagnoser/teorier-om-annorlunda-tankande/exekutiva-funktioner

https://www.1177.se/Uppsala-lan/Fakta-och-rad/Sjukdomar/Autism/?ar=True

https://www.1177.se/Uppsala-lan/Fakta-och-rad/Sjukdomar/Autism/?ar=True

Documents

En interaktiv webbapplikation for¨ elever med ...1218809/FULLTEXT01.pdfska garantera att elever som riskerar att inte uppn˚a m alen kan f˚ a det st˚ od de beh¨ over,¨ men ofta