Opetuspelin toteutus responsiivisena web-sovelluksena

Abstract

Opinnäytetyön toimeksiantajana toimi TTS – Työtehoseura, joka on valtakunnallinen koulutus-, tutkimus- ja kehittämisorganisaatio. Tavoitteena oli kehittää ravintolakeittiöön liittyvää sanastoa kuvien ja tekstin keinoin opettava internetin kautta pelattava peli. Pelin oli määrä toimia pöytäkoneiden ohella myös mobiililaitteilla, eli älypuhelimilla ja tablet-tietokoneilla. Pelin kohderyhmänä olivat ravintola-alan opiskelijat, erityisesti maahanmuuttajat. Pelin sisältö pohjautui TTS:n tuottamaan kirjalliseen opetusmateriaaliin.

Peli päätettiin toteuttaa laitteistoriippumattomana web-sovelluksena responsiivista web-suunnittelua hyödyntäen. Kehityksessä kiinnitettiin erityistä huomiota päivitettävyyteen ja helposti omaksuttavaan käyttöliittymään.

Opinnäytetyön teoriaosassa käydään läpi web-sovelluksessa käytettyjä tekniikoita: HTML5, CSS3, JavaScript, PHP ja XML. Lisäksi käsitellään responsiivisen web-suunnittelun perusteita. Pelin toteutusta käsittelevässä osassa selostetaan pelin suunnittelua, toteutusta, testausta ja dokumentointia.

Opinnäytetyön tuloksena syntyi erilaisilla laitteilla ja selaimilla toimiva opetuspeli, joka on helposti laajennettavissa ja päivitettävissä. Peliä testattiin projektin loppuvaiheessa ravintola-alan opiskelijoilla, jotka omaksuivat pelin helposti. Myös toimeksiantaja oli tyytyväinen pelissä tavoitettuun selkeään oppimisympäristöön. Lisää oppimateriaalia tullaan jatkossa saattamaan pelin muotoon tuloksena syntyneen sovelluksen runkoa hyödyntäen.

The assigner of this thesis was TTS, a Finnish research, development and training institute. The aim was to develop a learning game to teach restaurant kitchen related vocabulary with pictures and words. The game was to function with both desk top computers and mobile devices such as smart phones and tablet computers. The target group of the game were catering students, and immigrant students in particular. The contents of the game were based on study materials produced by TTS.

The game was implemented as a responsive, cross-platform web application. Special attention was given to maintenance and understandable user interface.

The technologies used in the web application are introduced in the theory part of the thesis. These include HTML5, CSS3, JavaScript, PHP and XML. The basics of responsive web design are also explained in this section. Designing, implementing, testing and documenting of the game are explained in the next section.

As a result of this process, a playable and functioning game was created and it can be easily extended and updated.