Tässä artikkelissa käsitellään Tulevaisuuden työkyky -hankkeen pelillistämispilotin kehitystyötä. Pilotin tavoitteena on kasvattaa visualisoinnin ja pelillistämisen avulla opiskelijoiden kiinnostusta tutkinnon etenemisen seuraamiseen. Keskitymme tässä artikkelissa erityisesti siihen, miten hanke on tukenut ammatillista kehittymistä niin opiskelijan kuin hankkeessa työskentelevän opettajan näkökulmasta. Artikkeli on jatkoa aiemmin hankkeen tiimoilta julkaistulle Pulssi-artikkelille, jossa on käsitelty ensimmäisen kehitysversion perusteella saatuja kohderyhmän kommentteja.
Anssi Gröhn toimii tietojenkäsittelyn lehtorina Karelia-ammattikorkeakoulussa, ja pääasiallisena kehittäjänä pelillistämispilotissa. Hän kertoo artikkelissa sovelluksen teknisestä toteutuksesta. Asmo Turunen opiskelee tietojenkäsittelyä Kareliassa, ja on suorittanut harjoittelunsa Tulevaisuuden työkyky-hankkeessa. Hän keskittyy artikkelissa käytettävyyden näkökulmiin.
Opintojen edistymisen pelillistämisestä
TTK-hankkeessa kehitettiin web-sovellus, joka esittää opinnoissa etenemisen uudella ja kiehtovalla tavalla. Sovellus teemoittaa opintojen edistymisen käyttäen analogiana ravintolassa ja Joensuun torilla käyntiä. Teeman on ajateltu tarjoavan riittävästi tuttuja elementtejä Karelian opiskelijoille, mutta tuoden kuitenkin tuoreen näkökulman. Aiemmassa Pulssi-artikkelissa todettiin, että animoitujen avatar-hahmojen tuottaminen täysin personalisoituna aiemmin kerätyn palautteen pohjalta olisi tarvinnut merkittävän määrän kehittäjien työpanosta, johon ei käytännössä ollut mahdollisuutta. Tämänkin vuoksi rajattu ja sopivasti teemoitettu avatar-valikoima oli järkevä päätös.
Ensiksi kahville!
Sovelluksen pääsivu on tarkoitettu erityisesti suoritettujen opintojen seuraamisen. Näkymä on rakennettu kahvilapöydäksi. Siellä opiskelija voi kahvikupposen ääressä tutustua kuittipinkkaan ja tarkastella niitä käsittelevän e-paperilaitteen avulla, milloin mitäkin on tullut syötyä. Pöydällä oleva puhelinsovellus näyttää puolestaan jäljellä olevan saldon, sekä viimeisen mahdollisen käyttöpäivän. Tämä ratkaisu kääntää yleensä käytössä olevan ajatuksen opintopisteiden kertymisestä toisin päin, eli tavoitteena onkin kuluttaa pois tutkinnosta jäljellä oleva osuus.
Kuvassa 1 esitettyä kahvilapöydän näkymää on elävöitetty höyryävällä kahvikupilla, joka tuo lämpimän kahvilapöydän tunnelman. Höyry on luotu partikkelijärjestelmällä hyödyntäen Proton.js-moottoria. Sen avulla on mahdollista luoda monimutkaisia erikoistehosteita, ja se soveltui varsin loistavasti nousevan ja pyörteilevän höyryn luomiseen.
Kun e-paperilaite käynnistetään virtapainikkeesta, kuitit siirtyvät virraten tarkasteltavaksi sen sisälle aikalinjalle (kuva 2) ja ovat siten tarkasteltavissa suoritusjärjestyksessä. E-paperilaitetta skaalataan isommaksi ja venytetään korkeussuunnassa siteni, että kaikki kuitit mahtuvat näkymään. Lisäksi kuittien määrää pilkotaan useammalle riville, mikäli suoritusten määrä sijoittaisi ne laitteen reunan ulkopuolelle.
Hankehakemuksessa mainittu taitopuu muunnettiin teemoituksen ja opiskelijoiden toiveitten perusteella aikalinjaksi. Kuten kuvasta 3 näkyy, ostoskuitit sijoitetaan automaattisesti aikalinjalle päiväyksen perusteella. Kuitteja on myös mahdollista avata suuremmaksi näytölle, joilloin niistä on helpompi tarkastella opintojaksojen nimiä, laajuuksia sekä tarkempia suorituspäivämääriä.
Verkkosivuille suunnatun Viz.js-kirjaston avulla on mahdollista luoda varsin monipuolista visualisointia edistymisdatasta, sillä edistyminen on kuvattavissa graafien solmuina ja niitä yhdistävinä kaarina. Samaa kirjastoa hyödynnettiin myös sovelluksen ensimmäisessä versiossa ja sen avulla luotu aikalinja on mukautettavissa eri tilanteisiin.
Kuin avatar, mutta ihan susi
Kuvassa 4 olevassa avatarnäkymässä esitetään animaatioilla elävöitetyt hahmot, tuovat mieleen Joensuun torilla olevat susipatsaista. Susipatsaiden pukeminen ja kuvaaminen eri tapahtumien yhteydessä on ollut varsinaista kansanhuvia, joten sovelluksessakin hyödynnetään avatarten yhteydessä samaa tuttua toimintamallia. Kuvaa varten avatar on mahdollista pukea erinäisin esinein ja vaatekappalein, joita tulee tarjolle opinnoissa edistymisen perusteella. Varustelunäkymässä näkyy myös paljonko opintopisteitä on kerätty, ja montako on kerättävä aina seuraavan tasoon. Tämän ajatuksena on kannustaa opiskeljiaa tarkastelemaan mitä seuraavaksi voisi suorittaa, että avatarille saa valittua uuden vaatekappaleen uuteen kuvaan.
Avatarhahmojen luonnissa testattiin Meshy.ai-tekoälypalvelua. Meshy.ai luo animoituja ja teksturoituja 3D-malleja tekstimuotoisen kuvauksen tai palveluun lähetetyn valokuvan perusteella. Palvelun käyttö nopeutti hahmojen luomista merkittävästi. Hahmon animaatioissa on hyödynnetty Adoben luoman Mixamo-palvelun tarjoamia animaatioita. Mixamon animaatiot on tarkoitettu esimerkiksi pelikäyttöä varten. Mixamon animaatiot on yhdistetty Blender-mallinnustyökalulla GLB-muotoiseen tiedostoon, joka on kätevä ladata Three.js-kirjastolla.
Kuvattaessa avatar ottaa animoidusti erilaisia ilmeikkäitä asentoja, kuten kuvasta 4 näkyy. Tallennettavaan kuvaan on mahdollista valita kumpi avatar hyvänsä, ja kuvaan tulee automaattisesti mukaan opiskelijan nimi, päivämäärä, sekä suoritetut opintopisteet. Varustevalinnat ovat aina samat molemmille hahmoille.
Mitä söisin seuraavaksi?
Aiemmin mainittuja kuitteja syntyy siis käymällä syömässä ravintolassa. Kolmannessa näkymässä olevaa ruokalistaa käytetään kuvaamaan tarjontaa, johon saldoa voi käyttää. Eri koulutusten opetussuunnitelmien rakenteet on kuvattu Peppiin vaihtelevin tavoin, joten näkymässä ei välttämättä esitetä kaikkia sinne määriteltyjä tasoja. Opintojaksotarjonta on kuitenkin pyritty koostamaan isompien kokonaisuuksien tavalla, joka palvelee kaikkia koulutuksia kutakuinkin yhtenäisellä tavalla.
Kuvassa 5 olevassa näkymässä ruokalista on esitetty liitutaulle kirjoitettuna. Valinnaiset opinnot on korostettu katkoviivalla sekä punertavalla välillä. Pakolliset tutkinnon opintojaksokokonaisuudet esitetään ilman katkoviivaa, ja valkoisella värillä. Henkilökohtaisen opintosuunnitelman ulkopuolinen opintokokonaisuus esitetään lopussa kursiivilla ja vihreällä värillä.
Saavutettavuus ja käytettävyys
Web-sovelluksen saavutettavuus ja käytettävyys on huomioitu WCAG 2.1 lain, eli verkkosisällön saavutettavuusohjeiden määrittämän AA-tason mukaan. Sovelluksen sivuilla ja eri näkymissä voi hiiren lisäksi navigoida näppäimistöä käyttäen. Mahdollisimman loogisen näppäimistönavigaation toteuttamiseksi sivuston elementtien tabindex-arvot on määritetty valmiiksi. Tällä ratkaisulla saadaan estettyä valinnan epälooginen hyppiminen, ja selkeytettyä esimerkiksi opintosuorituskuittien tarkastelu e-paperilaitteessa. Näppäimistöä käytettäessä myös valittu sivuston elementti korostetaan värikkäällä kehyksellä.
Sovelluksen käytettävyyttä on parannettu erilaisilla opastuksilla, jotka osaltaan selventävät navigointia ja sovelluksen ominaisuuksia. Ohjeistuksia on lisätty sovelluksesta löytyviin painikkeisiin, kuten esimerkiksi kuvassa 6 nähtävissä oleva ohjeteksti Kahville-painikkeelle.
Yläpalkista löytyvän Ohjeet-kuvakkeen valitsemalla saa tarkempaa tietoa sivuston sisällöstä, ja ohjeita esimerkiksi näppäimistönavigaatioon liittyen. Ohjeistukset luodaan ja päivitetään dynaamisesti hiiren osoittimen sijaintiin, tai vaihtoehtoisesti näppäimistöllä valitun elementin kohdalle, kuten on havaittavissa. Kuvista 7a ja 7b on nähtävissä, kuinka Ohjeet-kuvakkeen kautta tarkasteltavat ohjetekstit päivitetään näkymäkohtaisesti.
Sovelluksen saavutettavuutta on testattu NVDA-ruudunlukijaohjelmalla. Avustaviin teknologioihin kuuluvat ruudunlukijaohjelmat kuvailevat sivustojen tekstejä ja elementtejä, ja auttavat sivuston käytössä. Avustavia teknologioita on otettu huomioon toteuttamalla sovellukseen elementtien kuvailuja aria-label –attribuutteja käyttämällä. Esimerkiksi opintosuorituskuittien tarkastelunäkymässä kuittien keskeisin sisältö on määritetty aria-label –attribuutteihin, jotta kuittien sisältö voidaan lukea vaikkapa ääneen ruudunlukijasovelluksen avulla. Myös Ohjeet-kuvakkeen sisältämä aria-label -määritys päivittyy valitun sivun ja näkymän mukaan.
Kehittävää toimintaa hankkeessa
Tietojenkäsittelijän eräs merkittävä osaamisalue on ohjelmointi. Opettajana ammattitaidon ylläpitäminen vaatii pitkäkestoista sitoutumista kehitystyöhön ja teknologioihin tulleisiin päivityksiin perehtymistä, että niistä saa parhaimman hyödyn irti. 3D-mallintamisen, 3D-renderöinnin ja Web-kehityksen osalta TTK-hanke tarjosi ainutlaatuisen mahdollisuuden oman ammattitaidon ylläpitoon ja kehittämiseen.
Useamman kuukauden ajalle sijoitetun kehitystyön myötä sai hyödynnettyä kehittäjätaitoja, jotka eivät suoraan pääse esille peliohjelmoinnin opetuksessa. Sovelluksessa pääsi kertaamaan express.js-sovellusten luomista, sekä syventämään osaamistaan modernin javacript-ohjelmointikielen käytössä. Pelikehityksen osaaminen pääsi esille partikkelijärjestelmiä sekä reaaliaikarenderöintiä vaativissa osuuksissa. Myös kehittäjätyöskentely prosessina tuli käytyä läpi yhden projektin osalta kokonaisuutena; ideoinnista toteutukseen, edelleen testaukseen ja virheiden korjaukseen.
Hanketyöskentely tarjoaakin nähdäkseni paljon paremman tavan sovelluskehittäjälle ylläpitää omaa ammattitaitoaan opettajien huomattavasti lyhyempiin työelämäjaksoihin nähden. Viikossa tai parissa ehtisi kehitystyön osalta raapaisemaan pintaa, ja osaamisen kehittäminen jäisi siltä osin pinnalliseksi.
Harjoittelijana hankeprojektissa
Opiskelijan näkökulmasta harjoittelun suorittaminen hankeprojektissa tarjosi hyvät puitteet oman ammatillisen osaamisen vahvistamiselle. Web-sovelluksen kehittämistyö oli hyvin mieleinen ja mielenkiintoinen aihe, ja pääsinkin perehtymään harjoittelun aikana varsin mukavasti etenkin web-kehityksen frontend –puoleen. Aikaisempi kokemukseni web-kehityksestä käsitti lähinnä CSS-kielen perusteet, joten projektissa pääsin oikeasti opettelemaan ja toteuttamaan sivuston ulkonäköseikkojen lisäksi sivuston toiminnallisuuksia.
Harjoittelun aikana pääsin myös hiomaan osaamistani hankeprojektiin liittyvässä viestinnässä sekä palavereissa. Projektin hallintaan, ja erityisesti web-sovelluksen kehittämistyöhön sekä versionhallintaan liittyvä osaamiseni vahvistui projektin aikana huomattavasti.
Kirjoittajat:
Anssi Gröhn, tietojenkäsittelyn lehtori, Karelia-ammattikorkeakoulu
Asmo Turunen, tietojenkäsittelyn opiskelija, Karelia-ammattikorkeakoulu
Artikkelin tuotannossa on hyödynnetty Copilot 2025 -tekoälyä artikkelikuvan luomiseen.
