Implementation av begreppskartor med zoom och panorering för webb och surfplattor med hjälp av Meteor

Sammanfattning: Forskargruppen Educational Technology Group med forskare från Linköpings och Lunds universitet jobbar på ett lärospel i historia för mellanstadiet. En av aktiviteterna i spelet är att skapa begreppskartor och denna aktivitet är i behov av en uppgradering för att kunna utmana eleverna på en svårare nivå. En högre nivå ska nås genom att eleverna får jobba med fler än en begreppskarta åt gången och varje begreppskarta ska få zoom- och panorerings-funktionalitet. Den här rapporten går igenom några olika sätt för att implementera zoom och panorering och avslutas med att implementera och utvärdera en lösning i flera iterationer.   D3 visar sig vara ett JavaScriptbibliotek som har allt för att implementera begreppskartor med zoom och panorering, dessutom krävs inga Meteor-specifika funktionaliteter. Resultatet av denna studie går även att använda sig av för att implementera zoom och panorering till andra delar av sin applikation än begreppskartor.   Vid testning med D3 visade webbläsarna Chrome, Firefox och Edge olika resulat vid touch-interaktioner. Chrome gav fullt stöd för alla touch-interaktionen. Firefox krävde dubbeltryck eller att man höll ner fingret en stund för att aktivera dragning av begrepp eller panorering. Vid vertikala dragningar för panorering kunde zoom aktiveras istället för panorering. I webbläsaren Edge fungerade inga touch-interaktioner.   Scroll mellan begreppskartor och zoom och panorering i begreppskartorna blev en för avancerad interaktion för den tänkta användargruppen, elever på mellanstadiet. Att kunna visa en helhetsbild av alla begreppskartor tillsammans ansågs viktigare än att ha zoom och panorering. En bra kompromiss mellan helhetsbild och interaktions-yta blev att visa alla utom en begreppskarta som miniatyrer. Detta kunde implementeras med hjälp av javascriptbiblioteket interact.js och div-element.