ERK'2021, Portorož, 121-124 121 Poučna otroška klepetalnica Klepetko Marko Kofol 1 , Tomaž Sagaj 1 , Vita Potočnik 2 , Patricija Rantaša 2 , Sandra Stancheska 2 , doc. mag. Barbara Dovečar 2 , asist. Blaž Meden 1 , izr. prof. dr. Narvika Bovcon 1 1 Fakulteta za računalništvo in informatiko, Univerza v Ljubljani, Večna pot 113, 1000 Ljubljana 2 Fakulteta za dizajn, samostojni visokošolski zavod, pridružena članica Univerze na Primorskem, Prevale 10, 1236 Trzin E-pošta: klepetko.app@gmail.com Abstract. The latest isolation due to the pandemic has contributed to children’s socializing being limited and to that we offer a brightly-colored and bubbly- illustrated solution. Our aim is to create a game where the main areas of focus are learning and communicating with fellow classmates and/or friends. Essentially, our target audience is comprised of primary school children varying from the 3 rd to the 5 th grade. We acquaint ourselves with their core curricula and design the appearance and user experience of the game accordingly. The game itself starts off with a randomly-chosen character with which the player moves around various rooms. The entire world of the game is made to resemble educational premises where each room holds a function of its own. The classroom is focused around playing educational games, quizzes and chatting with peers, while the hallway relies more on socialization and chatting. We want our game to be considered a safe place for children to have fun and play, while also learning and expanding their knowledge skills. 1 Interdisciplinarno sodelovanje Otroška klepetalnica Klepetko je projekt, ki je nastal v interdisciplinarnem sodelovanju med Fakulteto za računalništvo in informatiko (FRI) Univerze v Ljubljani in Fakulteto za dizajn (FD) pridruženo članico Univerze na Primorskem, in sicer v letnem semestru leta 2021, ko smo študijski proces zaradi epidemije izvajali na daljavo. Študenti so bili razporejeni v skupine, posamezno skupino so sestavljali po trije ali štirje študenti z vsake fakultete. Skupine so imele nalogo izdelati spletno ali mobilno aplikacijo na temo družbeno odgovornega oblikovanja. Študenti so v začetni fazi projekta skupaj poiskali idejo za aplikacijo s pomočjo metode možganske nevihte in skupinske diskusije, v nadaljevanju so izbrano temo analizirali s pomočjo pojmovnih diagramov in miselnih vzorcev, vizualne in kontekstualne analize ter analize stanja s pregledom sorodnih rešitev. Določili so cilje projekta in ciljno skupino uporabnikov. Sledila je faza izdelave oblikovalske rešitve, ki se je začela s skicami osnovnih gradnikov podobe projekta in zbiranjem vsebine za aplikacijo. Sledilo je načrtovanje vmesnika in navigacije z določitvijo informacijske arhitekture in izdelavo žičnih modelov. Oblikovalci in računalničarji so začetne stopnje projekta izdelali v sodelovanju, v nadaljnjih korakih pa so se posvetili svojemu področju kompetenc: tako so oblikovalci nadaljevali z grafično dodelavo oblikovnih elementov in animacij, računalničarji oz. multimedijci pa so se posvetili tehnični izvedbi aplikacije s pomočjo ustreznih tehnologij. Sama implementacija je potekala v dialogu med študenti, kar je pripeljalo do celovitega izdelka, ki je ustrezno naslovil vse podrobnosti v projektu. Študenti so skozi projekt pridobili konkretne izkušnje o tem, kako poteka delo v interdisciplinarni skupini, kako se delijo naloge, kako se vodi projekt skozi posamezne faze, vključno s testiranjem prototipa pri uporabnikih in revizijo vmesnih rešitev, kako se komunicira s strokovnjaki iz druge discipline, kaj je pri razvoju projekta pomembno za oblikovalce in kaj za računalničarje. Izdelani projekti imajo potencial, da zaživijo v okvirih start up podjetij in se integrirajo v družbeno življenje, vse skupine so namreč predlagale uporabne in družbeno odgovorne aplikacije, ki bi bile dobrodošle v resničnosti. Hkrati je bil projekt interdisciplinarnega sodelovanja priložnost tudi za same študente, da so se med seboj spoznali in navezali stik, ki bo omogočil tudi v prihodnosti sodelovanje na podobnih projektih. Članek bo predstavil enega izmed realiziranih študentskih projektov. 2 Cilji projekta Otroška klepetalnica Klepetko je prostor, ki otrokom omogoča druženje v časih, ko jim je srečevanje v živo zaradi epidemije Covid-19 onemogočeno, komunikacija pa je preusmerjena večinoma v on-line obliko. Otroci so prikrajšani za osebni stik s sovrstniki in učitelji, njihovo domače okolje postane tudi prostor za učenje, kar lahko povzroči odvračanje pozornosti in nižanje motivacije za učenje. Našteti razlogi so bili povod k ustvarjanju varnega učnega okolja, v katerem lahko uporabniki na zabaven način, poln igre, druženja in medsebojnih vzpodbud med sovrstniki usvajajo novo učno snov in utrjujejo svoje znanje. Pri snovanju iger in kvizov smo pomoč poiskali pri znancih, ki delajo v šolstvu z učenci razredne stopnje. Pregledali smo učne načrte od tretjega do petega razreda, ki smo jih našli na spletu, in se na podlagi dobljenih informacij odločili oblikovati igre s področja matematike, angleščine in slovenščine in kvize iz 122 slovenščine, naravoslovja in geografije. Omenjene aktivnosti dopuščajo možnost nadgradnje ob podrobnejši analizi učnih načrtov ciljne skupine in z vključitvijo strokovnjakov didaktike. Igram in kvizom smo dodali možnost komuniciranja in socializacije preko klepeta v ustvarjenem spletnem svetu, do katerega dostopamo preko brskalnika. Glavni cilj projekta je ublažitev posledic epidemije pri starostni skupini, na katero je odvzeta možnost socializacije ter izvajanja izobraževanja v živo vplivala najbolj. Dolgoročni cilji projekta vključujejo omogočanje šolskih tekmovanj preko spleta ter morebitna sodelovanja s podobnimi platformami. 3 Pregled področja Pri ustvarjanju igre nam je kot osrednji primer dobre prakse služila igra Club Penguin [3], ki s pomočjo likov v spletnem svetu združuje različne igre s klepetom. Na slovenskih tleh je bila ena izmed podobnih iger Otroški Telekom [4], kjer je bilo igralcem omogočeno raziskovanje sveta in prostorov v igri ter interakcija z različnimi objekti. Še en primer je igra Igraj in spoznaj Slovenijo [5], ki se je osredotočala na spoznavanje naravnih znamenitosti in tradicije Slovencev skozi virtualno poustvarjen zemljevid Slovenije z najbolj turistično atraktivnimi kraji. Vsem omenjenim igram je skupno to, da si je uporabnik lahko ustvaril svoj lik in z njim raziskoval svet, se pogovarjal z drugimi uporabniki, igral igre in stopil v interakcijo z različnimi objekti. V primeru igre Club Penguin je bila to poleg interakcije med uporabniki tudi zabava, Otroški Telekom je bil namenjen klepetu s sovrstniki, pri portalu Igraj in spoznaj Slovenijo pa že kot naslov pove, spoznavanje Slovenije. Podobno kot v teh igrah smo tudi v našo igro vključili kot eno izmed glavnih funkcij klepet, za razliko od njih pa smo se s projektom Klepetko želeli osredotočiti na zabavno poučevanje in utrjevanje znanja osnovnošolskih otrok skozi igre in kvize, ki so pripravljeni točno za njihovo raven znanja in so v skladu z učnim načrtom. Za vizualno podobo so nam kot inspiracija služili primeri otroških aplikacij in klepetalnic z raznih spletnih platform, kot so Pinterest, Behance [6] in Dribbble. 4 Vizualna podoba Klepetalnico smo želeli zasnovati na čim bolj zabaven in otrokom privlačen način, zato smo se odločili za barvni sistem, ki vključuje žive barve, prijazno tipografijo, predmete in like pa smo oblikovali kot zaobljene, mehurčkaste oblike (slika 1). V virtualnem svetu klepetalnice smo uporabljali enobarvne ploskve, v grafičnem vmesniku pri nalogah in kvizih pa smo dodajali barvne prelive. Igra je narejena v pogledu iz ptičje perspektive, pri čemer so objekti oblikovani tako, da jih vidimo deloma iz profila, deloma od zgoraj, liki pa so v popolnem stranskem pogledu, kar pri igralcu omogoča jasno predstavo o prostoru. Pri samem načrtovanju, oblikovanju in izrisu igre smo uporabili programa Figma ter Adobe Illustrator. Slika 1: Klepetko logotip in znak Za igro Klepetko smo ustvarili simbol, skozi katerega smo želeli prikazati otroško igrivost in zabavno plat učenja. Že samo ime je besedna igra s številom pet, ki označuje najvišjo oceno oz. potrditev odličnega znanja. V simbolu pa se skriva več različnih motivov. Če podrobneje pogledamo simbol števila pet, vidimo, da so v njem združeni pogovorni oblaček, ki je združen z obliko možganov, oba pa sta zajeta v okvir oblike števila pet (slika 2). Simbol je namenjen vzpostavljanju zaupanja: da bi ga še bolj približali uporabnikom, smo mu dodali tudi prijazen izraz na obrazu. Na začetnem zaslonu smo logotip tudi animirali, za animacijo smo uporabili program Adobe AfterEffects. Slika 2: Simbolna sestava znaka Uporabili smo dve različni črkovni vrsti in sicer Titan One za logotip in Quicksand za slogan. V vizualni podobi smo uporabljali žive barve z namenom pritegniti pogled in pozornost uporabnikov, narediti igro čim bolj zapomnljivo ter z barvami izraziti otroškost in zabaven značaj igre. 4.1 Uporabniški vmesnik Uporabniška izkušnja se odvija na dveh ravneh, kar odraža tudi informacijska arhitektura vmesnika. Prva raven je svet z različnimi sobami, kjer igralci lahko komunicirajo z drugimi uporabniki, drugo raven pa predstavljajo poučne igre. Na prvi ravni se ob spodnjem robu zaslona nahaja orodna vrstica z različnimi gumbi in polji. Od leve proti desni so to gumb zgodovine klepeta, ki prikaže ali skrije sporočila, izmenjana od začetka naše seje. Naslednji je indikator točk, ki jih igralec pridobiva z reševanjem kvizov. Sledi polje za vnose besedila z možnostjo dodajanja smeškotov, gumb za zemljevid, ki pokaže, kje se nahajamo, ter gumb z informacijami o tipkah in njihovih funkcijah. Na drugi ravni pa se ob zgornjem robu zaslona nahaja podatek o točkah igre in gumb, s katerim igro zapremo in se vrnemo v sobo. 123 4.2 Svet Igralec vstopi v igro prek obrazca, v katerega vpiše ime oz. vzdevek in izbere spol svojega lika v igri. S pritiskom na gumb Vstopi sistem naključno izbere enega izmed petih likov in ga postavi na dvorišče. Tukaj se igralec prvič sreča z drugimi igralci, lahko obišče peskovnik, gugalnico ali pa posedi na klopci (slika 3). Sredi igrišča stoji šola, vanjo vstopi s pritiskom na tipko »E«. Znajde se v avli, ki je prostor za druženje, spoznavanje in klepet (slika 4). Na tej točki lahko igralec izbira, ali bo šel skozi vrata na desni ali na levi. Na desni strani se nahaja garderoba, ki je namenjena personalizaciji lika (slika 5). Če pa stopi skozi vrata na levi, pride do učilnice, kjer so na voljo poučne in zabavne igre slovenščine, matematike in angleščine: na mizah učencev ležijo predmeti, ki igralca preusmerijo na posamezno poučno igro (slika 6). Slika 3: Dvorišče Slika 4: Avla Slika 5: Garderoba Slika 6: Učilnica 4.3 Igre in kvizi Drugo raven aplikacije smo razdelili na interaktivne igre ter kvize. Najprej smo izdelali žične modele poteka posameznih iger, ki so se izkazali kot odlični vodniki pri celotni izvedbi igre kasneje. Ker se interakcija v igrah razlikuje, je tudi informacijska arhitektura igralnega dela vmesnika vsakokrat drugačna, grafična podoba vmesnika pa ostaja skladna s celostno podobo igre. Prvi del tako predstavljajo tri igre, ki vključujejo znanja iz angleščine (slika 7), slovenščine (slika 8) in matematike. Pri angleščini mora igralec izbrati pravilno besedo (med štirimi podanimi), ki poimenuje ilustrirani predmet. Igro slovenščine rešujemo tako, da iz pomešanih črk sestavimo besedo. Igro matematike smo ustvarili po principu potegni in spusti, kjer se oblački s pravilnim odgovorom obarvajo zeleno. Slika 7: Igra iz angleščine Slika 8: Igra iz slovenščine 124 Sklop kvizov se začne z začetnim zaslonom, kjer izberemo predmet, na podlagi katerega nam igra nato zastavi vprašanja. Izbiramo lahko med slovenščino, geografijo in naravoslovjem. Vizualno smo kvize dopolnili z ilustracijami, ki so primerne vsakemu izmed predmetov. Vprašanja so zastavljena na podlagi učnega načrta posameznega predmeta, s pravilnimi odgovori pa vprašanja postajajo vedno bolj zahtevna. Kvize igramo tako, da kliknemo na odgovor a, b, c ali d, igra nam nato sporoči, ali smo izbrali pravilnega, za tem pa se pojavi naslednje vprašanje. 5 Tehnična izvedba Spletna aplikacija Klepetko je zgrajena s pomočjo ogrodja Phaser. Phaser je programska oprema, ki razvijalcu pomaga pri izdelavi iger v brskalniku [7]. Grafične elemente prikazuje in posodablja s pomočjo standarda WebGL ali HTML elementa Canvas. Za uporabo ogrodja je potrebno znanje jezika JavaScript ali TypeScript. Ker je Klepetko večigralska platforma, je za posodabljanje podatkov v realnem času potreben zaledni del. Strežnik se izvaja v okolju Node.js, za izmenjavo podatkov med prijavljenimi klienti skrbi modul Socket.io. Celoten strežnik je izdelan v jeziku JavaScript. Ob prijavi uporabnika v igro mu dodeli naključen ID, ki se zabeleži v delovni spomin strežnika. Strežnik čaka na dogodke, ki mu jih pošiljajo klienti. Primer dogodka je pošiljanje sporočila. Ko uporabnik pošlje sporočilo, ga najprej prejme strežnik, ki ga nato razdeli vsem trenutno prijavljenim uporabnikom, ki so v isti instanci sobe kot pošiljatelj (vključno s pošiljateljem). Vsak izmed uporabnikov ima v delovnem spominu shranjene vse ostale uporabnike, kar strežniku omogoča pošiljanje le najnujnejših podatkov, kot je npr. ID. Z zanašanjem na procesorsko moč uporabnika razbremenimo strežnik in tako omogočimo hitrejše in zanesljivejše delovanje igre. 6 Evalvacija in nadaljnji razvoj V skupini želimo, da se spletna klepetalnica Klepetko uporablja kot alternativa oz. pripomoček pri učenju v situaciji, kadar je otrokom odvzeta možnost učenja in srečevanja s sovrstniki v živo. S klepetalnico želimo doseči, da bi učenci kljub omejitvam gibanja ohranjali stik, med seboj komunicirali, si pri učenju pomagali in se spodbujali, kot to delajo pri učenju v živo. S Klepetkom želimo ustvariti prostor za učenje na daljavo, ki je zabaven, interaktiven, in spodbuja medsebojno sodelovanje med učenci. Prihodnost platforme Klepetko je pestra, saj je v načrtu že več izboljšav in novosti. Poleg vizualnega izgleda in novosti v sami igri, kot so npr. personaliziranje lika, zbiranje točk in tekmovanja v kvizih, želimo izboljšati tudi uporabniško izkušnjo. V ta namen bo sledila implementacija uporabniških računov, baze podatkov, algoritma za filtriranje neprimernih sporočil, ipd. Prototip igre smo testirali pri ciljni skupini otrok med tretjim in petim razredom osnovne šole, tako da smo jim igro predstavili in pustili nekaj minut za igranje ter nato izvedli krajšo anketo. Iz nje smo izvedeli, da je bila otrokom najbolj všeč možnost komunikacije z ostalimi učenci, posledično se jim je zdelo tudi reševanje kvizov in igranje poučnih iger bolj zabavno, saj so jih lahko sproti komentirali s svojimi vrstniki. Veliko otrok te starosti še vedno nima mobilnih telefonov, zato jim je komunikacija s sošolci na bolj zabaven način predstavljala prostor druženja, krajšanja časa ter hkrati učenja. Zaradi potencialne zlorabe osnovnošolskih otrok želimo uporabniške račune zaščititi z nakupom licence. Licenca bi bila zakupljena s strani osnovnih šol, ki bi želele sodelovati v projektu. Dodatno želimo med mladimi vzbuditi zdravo mero tekmovalnosti, za kar bi si želeli sodelovanja s slovenskim televizijskim kvizom Male sive celice. Z njihovo pomočjo bi organizirali medšolska tekmovanja ali celo ligo v kvizih na daljavo. 7 Predstavitveni video Za portal smo izdelali tudi predstavitveni video, ki gledalca popelje skozi postopek ustvarjanja lika, mu predstavi vse sobe ter prikaže pravila in delovanje poučnih kvizov in iger. Skeniranje spodnje QR kode (slika 9) vodi do predstavitvenega videa, ki smo ga objavili na platformi YouTube, narejen pa je bil v programih Adobe AfterEffects in Adobe Premiere Pro. Slika 9: Povezava na video: Literatura [1] S. Krug: Don't make me think, Revisited, 2014 [2] J. Sharp, C. Macklin: Games, Design and Play: A Detailed Approach to Iterative Game Design, 19. Maj 2016 [3] Club Penguin Rewritten, https://cprewritten.net/ [4] Otroški Telekom, https://website.informer.com/otroski.telekom.si [5] Igraj in spoznaj Slovenijo https://www.slovenia.info/sl/novinarskosredisce/novice/5246- portal-igraj-in-spoznaj-slovenijo-z-novimi-destinacijami [6] Behance, https://www.behance.net/gallery/115945547/mathies-math- math-educational-app [7] Phaser - HTML5 Game Frameworok , https://photonstorm.github.io/phaser3-docs/