Webbaserat interaktivt inlärningsspel baserad på öppen webbteknologi i HTML5
Kouvo, Daniel (2018)
Kouvo, Daniel
Yrkeshögskolan Novia
2018
All rights reserved
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-201805249968
https://urn.fi/URN:NBN:fi:amk-201805249968
Tiivistelmä
Examensarbetet handlar om utvecklandet av ett webbaserat interaktivt inlärningsspel som bygger på öppen webbteknologi i HTML5. Spelet är ett inlärningsspel vars målgrupp är skolelever. Spelet handlar om köttindustrin och köttproduktionens olika skeden. Spelet fungerar som ett komplement till läromaterial. Syftet är att på ett intressant och roligt sätt få eleverna att ta till sej och bekanta sej med informationen.
Bakom spelet finns en Wordpress baserad backend där det är enkelt att hantera de frågor, svar och innehåll som presenteras i spelet. Wordpress fungerar samtidigt som materialbank med lösenordskyddade undersidor där lärare kan ladda ner material i bl.a. PDF format.
Spelet körs tekniskt sett i Wordpress miljö men fungerar självständigt ovanpå Wordpress. Frågor, svar och innehåll hämtas till spelet från WordPress. Spelmiljön körs i webbläsare i en HTML5 canvas som tack vare den underliggande koden uppdateras i realtid och skalas responsivt. Spelet renderas till en HTML5 canvas via Javascript. Det modulära CreateJS paketet har använts för att möjliggöra animation, interaktivitet och responsiv design för HTML5 canvas.
Projektet upprätthålls i en Git repository. För projektets lokala utvecklingsmiljö används den portabla virtuella utvecklingsmiljön Vagrant. Projektets uppdateringar publiceras automatiskt från sin Git repository till en dedikerad Wordpress servermiljö med hjälp av den automatiserade Jenkins servertjänsten.
Examensarbetet beskriver förverkligandet av projektet från start till slut samt tekniken och utvecklingsmiljön. This thesis covers the development of an interactive web-based educational game that is based on open web technologies in HTML5. The target group for the game is students. The game informs students about the meat industry and the different stages of meat production. The game is a complement to traditional educational materials. The aim is to provide students with an interesting and fun way of learning.
The underlying Wordpress backend provides an easy way to update or add questions, answers and content used in the game. Teachers can also download teaching materials in PDF format from password protected pages provided by the Wordpress CMS.
Technically the game runs from a Wordpress environment but works independently on top of Wordpress. Questions, answers and content used in the game are served from Wordpress. The game is rendered to a HTML5 canvas which gets updated in real time and has responsive scaling. This is done using Javascript and the CreateJS suite, which enables animation, interactivity and responsive design for the HTML5 canvas.
The project is maintained in a Git repository. Vagrant, which is a portable virtual software development environment, is used for local development. All updates are automatically deployed from the Git repository to a dedicated Wordpress hosting using a Jenkins automation server.
This thesis covers the development phases from start to end and the technology and development environment used in the creation of the project.
Bakom spelet finns en Wordpress baserad backend där det är enkelt att hantera de frågor, svar och innehåll som presenteras i spelet. Wordpress fungerar samtidigt som materialbank med lösenordskyddade undersidor där lärare kan ladda ner material i bl.a. PDF format.
Spelet körs tekniskt sett i Wordpress miljö men fungerar självständigt ovanpå Wordpress. Frågor, svar och innehåll hämtas till spelet från WordPress. Spelmiljön körs i webbläsare i en HTML5 canvas som tack vare den underliggande koden uppdateras i realtid och skalas responsivt. Spelet renderas till en HTML5 canvas via Javascript. Det modulära CreateJS paketet har använts för att möjliggöra animation, interaktivitet och responsiv design för HTML5 canvas.
Projektet upprätthålls i en Git repository. För projektets lokala utvecklingsmiljö används den portabla virtuella utvecklingsmiljön Vagrant. Projektets uppdateringar publiceras automatiskt från sin Git repository till en dedikerad Wordpress servermiljö med hjälp av den automatiserade Jenkins servertjänsten.
Examensarbetet beskriver förverkligandet av projektet från start till slut samt tekniken och utvecklingsmiljön.
The underlying Wordpress backend provides an easy way to update or add questions, answers and content used in the game. Teachers can also download teaching materials in PDF format from password protected pages provided by the Wordpress CMS.
Technically the game runs from a Wordpress environment but works independently on top of Wordpress. Questions, answers and content used in the game are served from Wordpress. The game is rendered to a HTML5 canvas which gets updated in real time and has responsive scaling. This is done using Javascript and the CreateJS suite, which enables animation, interactivity and responsive design for the HTML5 canvas.
The project is maintained in a Git repository. Vagrant, which is a portable virtual software development environment, is used for local development. All updates are automatically deployed from the Git repository to a dedicated Wordpress hosting using a Jenkins automation server.
This thesis covers the development phases from start to end and the technology and development environment used in the creation of the project.