Home

Design and development of a mobile editor for location

1. 35 2 5 PNUMA MIN 36 2 6 Conclusion about the tools iioii pre he te o a 37 3 DESIGN u u a Dade CH Sia sim au D SS OH errr 38 3L III uy u uuu aaa a o ra ra aE Naasi 39 3 2 R quirements teer la SB aq a shag a E aaa ai 39 3 2 1 Client Server Architecture rasta iaa 39 3 2 2 Web based application 40 11 Page Design and development of a mobile editor for location based games 3 2 3 Centralized database a 40 3 2 4 Connection to maDSu uuu eececececeeeeeeeceeereeerererenereneeeeeeeseeesereseeeseonenenenens 40 3 2 5 Desktop mobile application 41 3 2 6 Different terminology support 41 3 3 Comparison of location based games 41 3 4 Abstractions the first approach 43 341 Real world abstractions oie o br eov ib d i bail ka e Vo aa RO eri FR 44 242 Virtual world abstractions eiii a ladera 45 3 4 3 Relationship between the two worlds 46 34 4 JSu mimary ios erre REOR ERE das 46 3 5 Design of the entities hierarchy
2. au aa uu 81 5 2 Before the evaluation 82 12 Page Design and development of a mobile editor for location based games 5 2 DOCUMENTS Cuan suan aaa O 83 5 2 2 Material UE 84 53 IhinksAloud Protocolo asqa 84 5 3 1 Advantages of Think Aloud Protocol 85 5 4 SUS System Usability Scale 85 5 4 1 Op ration a 85 5 4 2 Scoring and interpreting SUS 86 LI MEM DOePLiugp AAA o a a ae a a Ea aid 87 5 6 Evaluation SESSION MT doit darian dad aire apta 88 5 6 1 Initial information phase 88 5 6 2 Description of location based games 89 5 6 3 Scenario CSS ADO Myvi uu a u Ree doc aan aha awa aaa asas aa 89 5 6 4 Demonstration of TaggingCreaditor use 89 5b Action DIYaS8 iu u asirna an na Ea NEETER EEEE EENES 90 5 0 6 SUS Questi nnalre u u erred teen t ianao iiia ee oiia 90 5 6 7 Focus group discussion 91 5 7 Results and conclusions iulii M Rr via NA UU D Rev Ra E 91 5 7 1
3. idLocation INT nameLocation VARCH AR 255 typeLocation VARCHAR 255 infoLocation VARCHAR 255 Figure 22 Location entity in the database MySQL Workbench 6 1 CE idLocation Number INT that identifies each location introduced into the editor It is chosen automatically by the database nameLocation Character string VARCHAR 255 with the name of the Location typeLocation Character string VARCHAR 255 with the type of Location It will be a free text box so that the user can choose whatever he wants infoLocation Character string VARCHAR 255 with information about the Location 66 Page Design and development of a mobile editor for location based games Element emet 00000 idBlement INT nameElement VARCHAR 255 infoElement VARCHAR 255 latitudeElement DOUBLE longitudeBement DOUBLE imageBement VARCHAR 255 radius VARCHAR 255 gt Figure 23 Element entity in the database MySQL Workbench 6 1 CE idElement Number INT that identifies each element introduced into the editor It is chosen automatically by the database nameElement Character string VARCHAR 255 with the name of the element latitudeElement Number DOUBLE indicating the latitude of the location of the element It is used to place the element on the application map longitudeElement Number DOUBLE indicating the longitude of the location of the element As the latitude it is used to place
4. 37 Page J TIANEMIETHMIO Design and development of a mobile editor for location based games AN o 3 DESIGN The structure in which the chapter is divided is as follows Firstly the most important requirements to be met by the application are described Secondly all location based games discussed in Chapter 1 will be compared common features and differences Based on this comparison will show the first approach of the design an abstractions model trying to be as general and abstract as possible The final step is to explain the final design along with the user interface design 38 Page IIANEIIIZTHMIO P ns Design and development of a mobile editor for location based games 3 1 Introduction In order to develop the mobile content editor have followed the same methodology that if a web page or web application is developed Thus the design of the initial user interface was designed for a desktop computer taking into account of course how the adaptation in the mobile version would be Therefore during the course of the project have been testing the presentation and functionality of the application especially in the computer where developed the application localhost and checking on a tablet the mobile version worked properly 3 2 Requirements The requirements that the content editor has to meet are as follows 3 2 1 Client Server Architecture The client server architecture is a distri
5. Sat lite a Machine works carpenter s workshop 3 Administration Transport Bour d toy BouT dwv l Purifiers Orfeos Orfeos Blacksmith s Workshop 9 g C o Control Room Retort House GY Axe c IOCIALISTI Condensers Book 365 Central RA y TEXN AHMOY A A lakchou SECRETO co BUTCHER w SHOP e E SARDELLES Y 9 y 5 on Optp uJG z A i a ane Drfeos enratPio PEJ Athens Odeon gm Athens Odeon MO m Hotel evodoxeio a oe A 50m Datos de mapa 2014 Google Editar en Google Map Maker Informar de un error K CityScrabble_NS_Mobile N Ist name letter S 1st surname letter 1 Description Technopolis game for the students of Patra s school Language Greek Modality Rounds Game image No image Hierarchy Objects Use the default names Name Plugging For CityScrabble we need Properties Element gt Radius default value 10m Block Key gt Hint without default value 122 Page hd WXTPON Design and development of a mobile editor for location based games de Real Objects Location Element screen Playspace Technopolis Kind Museum Information Industrial museum in of Athens It is situated in the city s former gasworks factory for the production of industrial gas which were founded in 1857 Location Technopolis Enclosure Type Outdoor Information Main yard of the museum Now go around the museum to look
6. Design and development of a mobile editor for location based games 4 Virtual objects screen In it themes topics and keys will be managed Figure 13 shows a sketch with the initial design of this screen APPLICATION IT FINDER lest ENS ERSU wea Veer Figure 13 Sketch of the design of the virtual objects management screen Screen of relationship between real and virtual objects The main mission to be met in this screen is to relate the elements with keys Figure 14 shows a sketch with the initial design of this screen lt eo nN kelp ARU OT loN Nie 1 Gt Buron G I Ww m eio ue visive na A 16 Awe a poe 5 REPE pee rcs hmi dici E m T ie Figure 14 Sketch of the design of the linker screen 53 Page MANENMIZTHMIO TP UNIVERSITY OF PATRAS a ILATPON Design and development of a mobile editor for location based games It is important to remark that during the design of the user interface it has been trying to organize the elements of the user interface in columns clearly differentiated so that when a mobile device is used to create content in the editor these columns are located in a single column ordered online With this in mind the number of changes needed to adapt the desktop to the mobile version will be much lower In conclusion although it is obvious this design of the user interface has been followed by a flexible way i e according to
7. au lt CA ber Cav wher it from few 1 from Di MM SCutTuRes FiCTAES 7 MUSEUM Smeer E PHY SICAL D P Qf Ge ua E j Cloote Z 1 k planer RFID el he hin l o e cheat jon s hirhual mee E Gu hs ee TAG P us 7 pr ATi fut TM Bl ce Sa neo P Q wr mar tht lon 25 fonts ss Figure 8 The first sketch of the design which was later modified 3 4 1 Real world abstractions With regard to the physical world one of the most important factors to take into account in location based games is the location where it is played so that these games have a playspace For example CityScrabble can be played in multiple locations such as Patras Athens or whenever the developer wants if he has content to implement the application When somebody is developing a location based game it is essential to know where the game is going to take place In the content editor this will be selected by the user who is creating a new game Furthermore the space will have to be prepared for the game Therefore playspace will be our first abstraction in the physical world In a playspace such as a city center or a museum we can find several locations e in the city center there are some streets some squares whereas in a museum there are several rooms or even floors The abstraction chosen for this will be called location so that a playspace can have one or more lo
8. The main characteristics of the focus group are Participants present homogeneous characteristics The data presented are qualitative The discussion is focused on a specific aspect in my case in the usability of TaggingCreaditor The purpose is not to find consensus among the participants but to establish perceptions feelings opinions and thoughts of individuals m Korman Hyman The Focus Group Sensign Dept Of Sociology SUNY at Stony Brook New York 1986 87 Page ER HANEIHIZTHMIO HATPON AQ oom Design and development of a mobile editor for location based games 5 6 Evaluation session The evaluation session was organized by the two developers TaggingCreaditor application desktop version and mobile version with the help of four researchers who followed our guidance The participants had to make teams of two or three so that there were three teams of two and three person team During the evaluation session two of the teams had to work with the desktop version while the other two worked with the mobile version As a developer of the mobile version was responsible for observing and offer help to the teams that used the tablets to work in the mobile scenario described above Likewise the developer of the desktop version was responsible for providing support to the teams that used the desktop version With regard to the four supporting researchers each one had a role One of them was responsible for
9. VARCHAR 255 with the name of the topic infoTopic Character string VARCHAR 255 that provides information about the topic difficulty Character string VARCHAR 255 that serves as an indication of the difficulty of relating the keys in this topic to the proper elements As mentioned in the game attributes this attribute is optional so if the user of the editor did not include it previously for the game that the topic belongs the user will not have the option to enter a value for this attribute imageTopic Character string VARCHAR 255 with the path of the topic image stored on the server This picture could be a significant picture about the topic 68 Page Design and development of a mobile editor for location based games Key idKey INT infoKey VARCHAR 255 2 visibility VARCHAR 255 hint VARCHAR 255 gt p Figure 26 Key entity in the database MySQL Workbench 6 1 CE idKey Number INT that identifies each key introduced in the application infoKey Character string VARCHAR 255 will be the small sentence that contains information about some element or elements During the gameplay of the location based games players have to relate these small sentences with one or more physical elements properly Visibility Character string VARCHAR 255 used to indicate where the key must be placed As mentioned in the game attributes this attribute is optional and the reason for its existence in the dat
10. after each team has chosen a topic to play these teams have to achieve the purpose to scan all the exposed exhibits in the museum belonging to the topic chosen Nowadays the game is deployed in the historical and cultural Museum of Solomos and Eminent Zakynthians in Zakynthos Greece whose paintings personal belongings and other artefacts are mainly related to prominent people of the region from the last three centuries It is also deployed in the museum of the University of Patras Figure 1 Two main screens in MuseumScrabble topic selection and exhibit association 2 References 3 and 5 19 Page Design and development of a mobile editor for location based games 1 3 2 CityScrabble3 CityScrabble is a location based game for open areas It is played using Android devices with 3G Wifi connection in places for which content has been prepared The game can be played in any open space It can also be played in closed spaces such as museums The rules of the game are as follows Each player or team tries to locate locations called also zones or objects in space and connect them with the keys small sentences which appear on the screen of the device The keys are organized in themes or concepts and one key can be connected only by a single team in a game session In order to do that the players have to go near them to trigger a GPS proximity sensor or scan a QR tag When a location is identified it can be connect
11. v va xpnoluoroindouv TApPGAANAG yia Wuxaywyia Kat uaBnon T tola mapadeiyuata armoreAoUv Ta navita MuseumScrable kat CityScrable ota orto a xel yivel EKTEV G WEAETN rtpw TO oxeSlacu tou TaggingCreaditor Ta umapxovta xopo euatoOnra matyvidta urtopo Uv va NALXTO V OE rto o c xwpouc wotooo dev umapyxel Eva epyaAeto yevikic edapuoync to ortolo va SLEUKOAUVEL OTHV nuoupyla meplexou vou yla Ta Talxvi la AUT AUTO TO KEV EPXETAL KAAUWEL n Mapovoa mAwpatik epyacia LE to OXE LACH kat THV AV TTUEN tou epyaAetou TaggingCreaditor To epyadelo aut AVATMT XBNKE yia tnv Mapaywyn KOL ermegepyacia nepieyou vou yia xwpo evaic8nta matuyvi ua tol wote KaBE oxe lactAC matyvidioU va pumopet va oxedidoet matxyvidlta yia va MaLlyTOUV OE OTTOLA NTTOTE MEPLOXN vou k opou lua rrap etpga Evac SdokaAoc 0a uropo ozg va OXESLAGEL Eva TMOLxvi L KAL VA TIAPAEEL TEPLEX MEVO VLA AUT WOTE va NALXTE AT touc MaBnt C Tou kat tnv LApPkeLa prac emikeluevno ertioke no oe va LOUCEIO Enutp cBeta aut to epyadelo Oa urtopovoe va artotedel urtootnpukr Aertoupyia yta TA UTMAPXOVTA GUVEPYATLKA xwWpo evaic8nta matxyvidta nw Ta MuseumScrable Kat CityScrable Av peoa OTA KUPLOTEPA onuela KAL SUVATOTHTES qur TNG ebappoyric eivat to yeyov c TL to TaggingCreaditor eivat Eva OUVEPYATLKO kat YEVLKHS egbopuoy c epyadeio Kata mpwtov o OXE LAOL G ylve ETOL WOTE TOAAOL XP OTEC VA urtopo v OUVEPYATLKA KAL TAPAAANAG va rta
12. 22 InnoDB utf general ci 16 0 KB 3 general J Key k oe E ee s Location has Element Examinar W Estructura Buscar Hi Insertar Ej Vaciar Eliminar s1 InnoDB utf8 general ci 45 0 xe ocation A Playspace E Examinar Yi Estructura Buscar E Insertar Ej Vaciar Eliminar 20 InnoDB utf8_general_ci 32 0 KB EE Playspace Playspace_has Location Examinar 4 Estructura Buscar Insertar Ej Vaciar Eliminar 21 InnoDB utf8 genera ci 42 9 xB Playspace has Location Theme E Examinar J Estructura amp Buscar HE Insertar Ej Vaciar Eliminar 16 InnoDB utf8_general_ci 16 9 x8 E Theme Theme_has Topic Examinar t Estructura Buscar 3 Insertar Ej Vaciar Eliminar 22 InnoDB utf8_ general ci 42 9 zB E Theme has Topic Topic E Examinar Vf Estructura amp Buscar amp Insertar Ej Vaciar Eliminar 22 InnoDB utf8_general ci 16 0 KB E Topic Topic_has_Key 5 Examinar Estructura Buscar amp amp Insertar J Vaciar Eliminar 86 InnoDB utf8_general_ci 43 0 KB E Topic_has_Key 14 tablas N mero de filas 496 InnoDB utf8_general_ci 480 0 kB oB Crear tabla t Marcar todos Desmarcar todos Para los elementos que estan marcados E Vista de impresi n Eb Diccionario de datos X Crear nueva tabla en la base de datos erasmus14sql1 Nombre N mero de columnas Figure 7 Screenshot of the database uploaded to the server through phpMyAdmin Main features Intuitive web interface Support for most MySQL features browse and
13. 5 Strongly agree Regarding this questionnaire please remember that you play a role so that you should answer as if you are the teacher of the scenario described above QUESTION 1 21314 1 think that would like to use this system frequently 2 found the system unnecessarily complex 3 thought the system was easy to use 4 think that would need the support of a technical person to be able to use this system 5 found the various functions in this system were well integrated 6 thought there was too much inconsistency in this system 7 would imagine that most people would learn to use this system very quickly 8 found the system very cumbersome to use 9 felt very confident using the system 10 needed to learn a lot of things before could get going with this system 121 Page Design and development of a mobile editor for location based games 2 CityScrabble Instructions for the mobile scenario Below is a list of buildings or other kinds of entities that should be included in a game of CityScrabble The list contains descriptions of buildings or other entities Here we have the location of the Elements to introduce For it once you are entering the Element information you have to look for Technopolis Athens in the map and then drag the cursor until the right place 1 EREDO Hi a GAZARTE ere gt x e
14. Easy way linker screen in three simple steps choose real object choose virtual object and create relationship with the chosen values 75 Figure 33 Navigation through the main screens of TaggingCreaditor 76 Figure 34 Example of real content that a teacher can create for CityScrabble 78 Figure 35 Example of virtual content that a teacher can create for CityScrabble 78 Figure 36 Example of relationships that a teacher can create for CityScrabble 79 Figure 37 Photo taken during the assessment session 81 Figure 38 System Usability Scale response format 86 Figure 39 Screenshot of the video tutorial showed during the evaluation 89 Figure 40 A work team taking a photo of a replica while they are creating content 90 Figure 41 Focus Group discussion which took place in the end of the evaluation 91 Figure 42 Graph showing the average rating of the SUS questionnaire for the mobile version Figure 43 Chart showing a comparison between the average ratings of the mobile and desktop MJeje rae ER 94 14 Page g IIANETIIETHMIO HATPON Aja Design and development of a mobile editor f
15. PHP intended to handle the administration of MySQL over the Web using Internet tool Currently it can create and drop databases create delete and alter tables delete edit and add fields execute any SOL statement manage keys on fields manage privileges export data into various formats During the course of the project it was used in order to upload the database sql files to the server phpMyAdmin J Estructura J SQL 4 Buscar j Generar una consulta Exportar Importar g Operaciones E s e Tabla Acci n Filas Tipo Cotejamiento Tama o Residuo a depurar Element E Examinar i Estructura amp Buscar Fe Insertar Ej Vaciar Eliminar 51 InnoDB utf8 general ci 16 0 KB erasmus14sq1 x Game E Examinar W Estructura Buscar Insertar Ej Vaciar Eliminar 19 InnoDB utf8_general_ci 32 0 KB E Element Game has Playspace E Examinar J Estructura amp Buscar Insertar Ej Vaciar Eliminar 15 InnoDB utf8_general_ci 48 0 KB E Game Game_has Theme 7 Examinar 3 Estructura Buscar F Insertar Ej Vaciar Eliminar 13 InnoDB utf8 general ci 48 9 KB E Game has Playspace Key Element E Examinar Estructura amp Buscar amp Insertar Ej Vaciar Eliminar 52 InnoDB ut general ci 45 0 KB E Game has Theme Key key E Examinar J Estructura 4 Buscar amp Insertar Ej Vaciar Eliminar 26 InnoDB utf8 general ci 16 0 xe P Seren Location E Examinar J Estructura amp Buscar Insertar Ej Vaciar Eliminar
16. TYPE text javascript gt function gameList if screen width 1024 location href php gameList mobile php jelse location href phnp gameList php function newGame if screen width lt 1024 location href php newGame php mobile m jelse location href php newGame php script Figure 16 JavaScript script which allows to recognize a mobile device In the rest of the files the sessions are used so that it is not required to program script that redirect to other pages like in the previous example In the next figure it can be seen the first lines of code of gamelist mobile php file which is responsible for showing the list of the created games and a details box that shows the details of a game php include initialize php SESSION mobile m if SESSION lang SESSION lang en m include chang Lang php SESSION lang M include lang php Figure 17 First lines of gamelist mobile php showing the use of sessions Regarding the Figure 17 the file called initialize php is in charge of initializing the sessions It can also be seen that in addition to the use of sessions when differentiating the mobile version of the desktop version sessions are also used to change the language of the user interface so that the application supports English and Spanish 59 Page d IIANEIIIXTHMIO Design and development of a mobile
17. a stoker Showing 1 to 4 of 4 entries Previous 1 Next iw E Create Relationship blacksmith s workshop D 3 FV Y Key p Show Edit all relationships administration blacksmith s workshop iorks carpenterV s workshop Showing 1 to 4 of 4 entries Previous 1 Next y y Step 2 Choose one virtual object A Step 3 Choose the values of the relationship Create Relationship i DAA EY lt anad ripas p Figure 32 Easy way linker screen in three simple steps choose real object choose virtual object and create relationship with the chosen values 75 Page Design and development of a mobile editor for location based games 4 3 2 Navigation through the main screens In the Figure 33 we can see the diagram explaining how to navigate through the screens of the application f Welcome I E 1 screen Game list e Content E screen creation New Content Real world gt Virtual world Linker 1 Game creation edition management management am ELE Real world Virtual world Linker management management Figure 33 Navigation through the main screens of TaggingCreaditor 76 Page ER IIANETIIETHMIO j ILIATPON AQ oom Design and development of a mobile editor for location based games 4 4 Usage scenarios In this section will focus on describing some of the scenarios in which the application could be useful and
18. current needs some components of the interface have been adding or deleting components Therefore during the programming phase we realized about the need to add a fourth screen in which a list of created games appears The design of this screen followed the same philosophy as others divide the interface into columns so that it can be easily adapted afterwards to a screen of a mobile device 54 Page g IIANETIIETHMIO HATPON Aja Design and development of a mobile editor for location based games 55 Page Design and development of a mobile editor for location based games 4 APPLICATION DEVELOPMENT AND IMPLEMENTATION In this chapter will present the core of the work have done In it will describe in more detail the implementation development and implementation beginning firstly with an introduction where comment how the project was planned its structure and other relevant information Furthermore will explain the design of the database the implementation of end user interface the main functionalities of the application and finally will describe an scenario to which a school teacher must create content 56 Page Design and development of a mobile editor for location based games 4 1 General aspects The project started in February 2014 and was completed in July 2014 and has gone through several phases of development in a pattern very similar to the model of software engineering called waterfa
19. drop databases tables views fields and indexes create copy drop rename and alter databases tables fields and indexes maintenance server databases and tables with proposals on server configuration execute edit and bookmark any SQL statement even batch queries manage MySQL users and privileges manage stored procedures and triggers Import data from CSV and SQL Export data to various formats CSV SQL XML PDF and so on Administering multiple servers Creating PDF graphics of your database layout Creating complex queries using Query by example QBE Searching globally in a database or a subset of it 3 References 22 36 Page Design and development of a mobile editor for location based games 2 6 Conclusion about the tools After describing all programming languages and frameworks that have used during the course of the project will explain the main reasons chose them As we have been seeing throughout the chapter the programming languages chosen for the project were the following PHP PHP Hypertext Preprocessor HTML HyperText Markup Language JavaScript CSS Cascading Style Sheets SQL Structured Query Language AJAX Asynchronous JavaScript And XML My knowledge about programming was influenced at the moment decided which languages were necessary to be employed After working all this time with the selected technologies have been able to deepen my lear
20. editor for location based games We w 4 2 Database design One of the last steps before starting to develop the user interface with all the features of the application is the design of the database In the Figure 18 we can see a sketch of the database design that was created during the course of the project whereas in the Figure 19 we can see the final database design for the content editor which was created using MySQL Workbench 6 1 CE As we can see in the sketch the first database design had a few attributes in the tables in addition to have some differences compared to the final design For instance one noticeable difference is in the objective table which is called theme in the final design Figure 18 Sketch of the database design created before the final design 60 Page Design and development of a mobile editor for location based games 7 Game has Playspace Y 7 Game has Theme Y oc oc Game idGame INT m Game_idGame INT Playspace_idPlayspace INT Theme_idTheme INT gt gt 7 Playspace has Location Y m Theme has Topic Y f Playspace idPlayspace INT m Topic_idTopic INT Location_idLocation INT Theme idTheme INT gt gt Topic has Key Y f Key idKey INT Topic idTopic INT T Location_has_Element Y Location idLocation INT Element_idElement INT als Figure 19 Database design in MySQL Workbench 6 1 CE At first sight we can see that the red entiti
21. fields and also choose a picture to identify the topic After that the topic will have been created Tagging Creadi amp l http creaditor argon097 server4y Y7 Q WW VIS y Figure 11 Creation of a new topic 109 Page Design and development of a mobile editor for location based games Creating a new key To add a new key to an existing topic the user firstly needs to choose from the list of objects the topic to add the key to create By choosing it a list will appear with the keys that are part of the topic if any and the option to add new one Once the user chooses the option to add key a box in which the data should be entered will be displayed The field of information and if user has previously added all the optional attributes visibility and hint will also appear After clicking the create button the new key will be created Tagging Creadi lt C http creaditor argon097 server4y yv Q B AA S uu gt si Keys included Close Add key blackmith machinist manager stoker AY a a Showing 1 to 5 of 5 entries Previous 1 Next h s w Information Figure 12 Creation of a new key 110 Page Design and development of a mobile editor for location based games Editing and deleting virtual world entities The edition of virtual world entities is exactly like the process described for real world entities in the previous section To delete any of the ent
22. final design 47 3 5 1 GAM CNY sincera rere ree de in erar oe peer Relies 49 3 52 Real w rld ld RTT TT 49 3 5 3 Virtual world entierra 50 3 6 User interface design siete ce aeree puak elio ensi pad Srann 51 4 APPLICATION DEVELOPMENT AND IMPLEMENTATION 56 A A 57 4 1 1 Phases and organization of the project 57 4 1 2 Differentiation between mobile and desktop 59 AD Database desig ay a A duca A 60 4 2 1 Game AUS tan 63 4 2 2 Attributes of the real world entities 66 4 2 3 Attributes of the virtual world entities 68 4 2 4 Relationship Element Key 70 4 3 User interface implementation 71 4 3 1 Main screens ieri alarde 71 4 3 2 Navigation through the main screens 76 4 4 Usage scenarios 77 4 4 1 Mobile example essere nnne anin nasia 77 5 EVALUATION AND RESULTS kehren once did codd nva UR 80 5 1 Ito UE ION 2 y T
23. in the beginning i http foundation zurb com 32 Page Design and development of a mobile editor for location based games 2 3 MySQL Workbench13 ySQ pri Workbench MySQL Workbench is a unified visual tool for database architects developers and DBAs DataBase Administrators MySQL Workbench provides data modeling SQL development and comprehensive administration tools for server configuration user administration backup and much more MySQL Workbench is available on Windows Linux and Mac OS X Furthermore it is offered in the following Editions MySQL Workbench Community Edition Open Source GPL License MySQL Workbench Standard Edition Commercial MySQL Workbench Enterprise Edition Commercial The Standard Edition and the Enterprise Edition have the advantage of offering more facilities than the other edition but you have to pay for it chose MySQL Workbench to deal with the database because although it is not required to develop a web based application it makes the work much easier with the database design and the dealing with the data introduced in this database 2 3 1 A little backstory of MySQL MySQL was originally founded and developed in Sweden by two Swedish and a Finn David Axmark Allan Larsson and Michael Monty Widenius who had worked together since the 1980 s MySQL is the world s most popular open source database software because all the advantages that are offered With i
24. is the collaborative location based mobile games that have the great advantage that they can be used for both entertainment and learning Examples of collaborative location based games are MuseumScrabble or CityScrabble of which a study will be carried out prior to the design of the content editor The problem is that there are plenty of locations where you can play many of the existing location based games but we do not have a generic tool that facilitates the creation of content This is what comes to solving TaggingCreaditor creating content for these games so that any developer can operate his game at any location in the world Even a school teacher could use this tool to create content for their students in a museum to which they will visit Therefore this application could be considered as a useful supporting utility for collaborative location based mobile games such as MuseumScrabble or CityScrabble mentioned before Among the highlights and strengths of the application we find that it is a generic and collaboration tool First the application is designed with the idea that it can be used by a large number of mobile location based games so it is a generic tool And secondly the content editor has the advantage of being collaborative allowing multiple users to create content for their own games in parallel in the same database would like to finish remarking the utility that a generic editor may have for the location based games al
25. key A gas is born in an oven Info key Cooling Hint key The newborn needs cooling down in a lot of pipes Info key Purification Hint key Sulfide Info key Distribution Hint key Master control in a small building Relationships Easy way linker screen Info Key Manager Element Administration Score 5 Info Key Blacksmith Element Blacksmith s Workshop Score 5 Info Key Machinist 124 Page Design and development of a mobile editor for location based games SO DE THMIO zc ul ILATPON Element Machine works Carpenter s workshop Score 5 Info Key Stoker Element Central Courtyard Score 5 Topic 2 Info Key Overheating Element Retort House D6 Score 5 Info Key Cooling Element Condensers Score 5 Info Key Purification Element Purifier Score 3 Info Key Distribution Element Control Room Score 5 125 Page Of TIANENIETHMIO ILATPON UNIVERSITY OE PATENS Design and development of a mobile editor for location based games 3 Taggling Instructions for the mobile scenario New Game Taggling NS_mobile N 1st name letter S 1st surname letter 1 Description Taggling game for the students of Patra s school Language Greek Modality Relationships Game image No image Hierarchy Objects Use the default names except Tag instead Key Name Plugging Pro
26. located in this Square 3 5 3 Virtual world entities Theme Layer hierarchy 1 It is the highest level entity in the virtual world and the only role it adopts is the one being a container of topics An example of Theme name following the example of CityScrabble could be Centuries indicating that the CityScrabble game will have one or more topics related with some century As in the case of Playspaces a Game can have many Themes To put an example imagine that we want to create content for the CityScrabble with virtual information topics and keys about centuries and on the other hand with virtual information about famous people around the world By adding to the Game called CityScrabble the themes Centuries and Famous people we will achieve what we wanted Topic Layer hierarchy 2 It is the entity that follows the Location entity in the virtual world hierarchy and can be seen as a container of the virtual keys that will belong to content of the location based game An example of Topic name taking as example the CityScrabble in the Centuries Theme could be XVI Century It means that the game most probably will contain several keys about this century that will have to be linked to the physical elements included in the real world 50 Page ER IIANETIXTHMIO j ILATPON AQ oom Design and development of a mobile editor for location based games Key Layer hierarchy 3 It is the lowest l
27. location based games TABLE OF CONTENTS L INTRODUCTION ui ode u k SS w Qu Gu Su Ni 16 Vids MoOtiVatl oiu u EE 17 12 Objectives uyu aa a EA qh aaa da EA E ERR YER vu AN 18 1 3 Mobile location based games 18 1340 Museus o en aca pca 19 13 2 CitySerabb amp uu Ly aiii 20 1 3 3 Benaki Museum Sera laica 21 1 3 4 Tag glings s cccccccsessnesheniacvnsessovssnsnadenasenscinnndonneesduvtsonsnnnedectveeseasensostenaseesoses 22 1 4 Thesis organization cc cccccccccccssssssscececeescsssesseaececeeeescseseaeaeseceesesssesssaeeeeeeeess 23 2 TECHNOLOGY e n 24 2 1 Programming languages 25 AS PEN UJ Mr 26 21 2 iu c 27 2 1 3 E A ier Deere Deere venddceannaeudsaveheccaasiaedeaescdesansaeudy 28 EG T 29 uM SATU ecc kaa tees 30 216 AjaX em 30 lg URB OUNAE 31 2 2 1 A little backstory of Foundation 31 2 222 T Tcr 32 2 3 MySQL Workbench aiii R 33 2 3 1 A little backstory of MySQL 33 pA EB ccc E T 33 2 4 Apache web server
28. of the application that there are games that have extra properties that other games does not have therefore we need to provide the application of optional properties so that a user that wants to create content for the game CityScrabble can choose the additional properties of CityScrabble whereas a user that wants to create content for the game Taggling can choose the additional properties of this game For example CityScrabble uses two attributes that the other games do not use a radius of circumference around a real element and a hint of the keys in order to give an idea to the user while playing the game Another important difference is the terminology because for each game a different terminology is employed A solution for this in the design of the application is to create a high level of abstraction but with this solution the user of the editor will have to understand the terminology chosen for the editor The best solution then is to give to the user the option of choosing the terminology the user wants so that for instance if a user wants to create content for MuseumScrabble he can choose the name hint to call the small sentences that describe the physical elements In the following table we can see the different terminology for each game and the terminology used during the design of TaggingCreaditor on the right columns of the table 42 Page Design and development of a mobile editor for location based games Intuitive Gene
29. scenario follows the following steps Creation of a New Game Creation of the real objects of the game Creation of the virtual objects of the game Creation of the relationships between the real objects and the virtual objects pee IE Each one of these steps is carried out by the user in different screens as we will see during this manual Welcome screen This screen simply welcomes the user of the application and gives the options Select Game or Create Game In the first option the user can check or edit the content data of a previously created game and the second option will allow the user to create content for a new game We will see firstly the common scenario creating a new game Welcome to TAGGING CREADITOR Figure 1 Welcome screen 100 Page a I ATPON Design and development of a mobile editor for location based games II New game When creating a new game we will find three different areas or blocks as can be seen in Figure 2 Main properties area In this area the user can enter the most general characteristics of the game Among them are name version description language modality and game image Hierarchy object s names area In this area the user can change the default names of the entities in both the real world and the virtual world for creating and editing content The default values for the real world are Playspace first level Location second level and Element third le
30. taking notes about the behavior and the problems the work teams were having one of them was in charge of taking photos and videos of the session another of them collaborated explaining the operation of Taggling and finally the last researcher moderated the discussion at the end of the evaluation session The evaluation session was structured into several phases 1 Initial information phase 2 Description of location based games 3 Scenario description Demonstration of TaggingCreaditor use Action phase SUS Questionnaire N Oo Ww Focus group discussion Each of them will be explained in detail in the following sections 5 6 1 Initial information phase At the beginning the testers of the session were informed about how the evaluation was going to be organized and an introduction on the TaggingCreaditor application was made In addition to this a document was given to each participant in which all the information needed was shown Initial information document 1 Evaluation of TaggingCreaditor in annex 2 88 Page IC HATPON Design and development of a mobile editor for location based games Mr sss 5 6 2 Description of location based games After participants understood that the application can create or edit content to location based games we moved on to explain the operation of the game they had to create content The first game for which they had to create content was CityScrabble and the seco
31. the navigation list of virtual entities 3 Create relationship entering required attributes In the example below only the Strength is required Tagging Creadi lt C lt http creaditor argon097 serveray yy Q RE Tagging Creaditor eue Mes Contact r TAGGING CREADITOR BA QW ariy m bd VWs a lt SS W Step 1 Choose one real object ay II gt E Element chosen successfully Elements included administration blacksmith s workshop I central courtyard 1 E Machine works carpenterVs workshop y Showing 1 to 4 of 4 entries f Previous 1 Next SEN p y 2 Choose one virtual object az Saving screenshot Figure 15 Step 1 of the creation of a relationship select the element 112 Page TIANEMIETHMIO HATPON Design and development of a mobile editor for location based games p Tagging Creadi lt C lt http creaditor argon097 server4y YY People Keys included blackmith machinist MIT manager stoker Key ct cessfull Showing 1 to 4 of 4 entries vate ancient Previous 1 Next lt A A Step 3 Choose the values of the relationship A blacksmith s workshop Key Strength 0 100 4 EHE Figure 16 Step 2 of the creation of a relationship select the key Tagging Creadi lt C lt http creaditor argon097 server4y Yy Q RB machinist manager stoker Showing 1 to 4 of 4 entries Previo
32. the game content Entity Details area Each time the user selects a physical entity in the navigation list this detail area shows the assigned content of the main features of the physical entity selected Tagging Creadi Tagging Creadi lt C lt http creaditor argon097 server4y yy DU A C lt http creaditor argon097 server4y YY ar Tagging Creaditor En Mes x NewPlayspace Contact Showing 1 to 5 of 5 entries Previous 1 Next h Add Location Playspace Location Technopolis Technopolis enclosure Elements included Technopolis enclosure i Add Element administration f x E blacksmith s workshop yl f Main yard of the museum central courtyard f Machine works carpenter s workshop p Save Changes Showing 1 to 5 of 5 entries Previous 1 Next Add Location wu Figure 30 Real world management screen left navigation list right entity details boxes 73 Page Design and development of a mobile editor for location based games Virtualworld management screen Going on with the creation or edition of content for a game it is also required to create all virtual entities that will be part of the game i e the creation of virtual objects of first second and third level of the entities hierarchy themes topics and keys on the intuitive terminology respectively In this screen the user has the possibility to manage these virtual entities crea
33. this is to search in the game space for the real objects and scan their tag with the handheld device 117 Page Design and development of a mobile editor for location based games 2 Association screen em Avapumo Ero pyoor oso puwrarpiou Dpoonc nge va Bere oe oi rp Having chosen a topic the exhibit association screen is displayed tpyoLovrov uepix c ano aur c The player sees a short text describing the concept of the topic and below a list of up to four keys Initially they are not connected During the game they take the color of the player who used them in a combination Once a real object is tagged the scanned exhibit is then included in one of the available slots At the bottom of the screen are the objects that have been found or the empty sockets for the objects that are still to be found By pressing the lock at the middle an object is connected or D OAGENs avraAAoxTUUV epyodeiuy Kol unconnected to a key Each key explains something related to F s C one of the real objects so that connections have to be meaningful QoeT Io Once the slot is filled with an object the link unlink icon appears and the player can link this object with the selected key by pressing the link unlink icon When a player links a key this key is flagged with the player s color and is marked as taken This means that the key is no longer available for any other player Moreover if the relationship between the key
34. to create a user friendly tool that allows us to create content and can be used for any type of location based game and in any location This content editor will allow developers of location based games to launch their games in a large number of locations just using this editor 17 Page TIANHIIIETHMIO PON na Ad II Design and development of a mobile editor for location based games 1 2 Objectives The main goal is therefore to design and develop a generic mobile application that works as a tool for creating and editing content for location based mobile games To do this one of the first requirements to be met by the mobile editor of content will be the support of the creation of as many location based mobile games as possible To achieve this the first step will be describing several existing mobile location based games that will be taken into account for the design of the application so that it is as abstract as possible Having described the operation of these games all the features they have in common and their differences will be studied After this the next step is to find all possible abstractions of games proposed in order to design then a hierarchy of entities that will guide us in the design of the database Finally once these steps are carried out and a sketch of content editor has been designed the programming of the user interface will be started with all the necessary functionalities 1 3 Mobile loc
35. today thanks to this we have access to many features that are offered on websites we often visit and make our navigation experience much nicer simpler and more entertaining JavaScript is a scripting language A script done in JavaScript include statements or propositions that are commands given to language interpreter and can be inserted into an HTML document giving the website a degree of interactivity because it can provide for example a mechanism for the detection and treatment of events as a click with the pointing device usually a mouse Like HTML JavaScript is an interpreted language by the client and therefore there is no restriction on the server Each event to be processed does not require communication with the server allowing for example filter the information collected through a form before sending it to a database for storage JavaScript does not depend on other boundary conditions such as the Operating System as already mentioned is a language that interprets the client so that the scripts run on all Operating System that has a ready client to do it JavaScript code blocks can be inserted into HTML documents in several ways One is by using the HTML tag lt script gt another is by using event handlers and the third by using the JavaScript URL Among many other things JavaScript provides libraries created to meet very specific objectives that will help us to provide our projects with very interesting features Th
36. translate from any language to any other language The compiler treats the source program as a single unit and executes the following steps lexical analysis the compiler segments the source text into lexical units syntactic analysis to check whether syntactic rules are met semantic analysis to check if there are semantic errors and code generation to create an executable program 2 The interpreter The interpreter is a program programs whose task is adapting the instructions found in another language Compilers and interpreters share the first three steps but differ in the fourth one the interpreter does not create an object program Instead it takes the statements or other language elements of the source text one after the other interprets the statement and executes it We get the results immediately by having a machine code routine run Programming languages may rely on compilers interpreters or both techniques The question of which language is best is one that consumes a lot of time and energy among computer professionals Every language has its strengths and weaknesses For example Python was designed to emphasize productivity and code readability being great for beginners because it is easy to learn whereas PHP was designed for web development to produce dynamic web pages following a classic approach and it is more difficult to learn It is also important to highlight that nowadays the majority of programmers use Integ
37. vayan a hacer una excursi n Por tanto esta aplicaci n podr a ser considerada como una utilidad de apoyo muy til para los juegos basados en localizaci n tales como MuseumScrabble o CityScrabble mencionados anteriormente Entre los puntos m s destacados de la aplicaci n se puede decir que es una herramienta gen rica y colaborativa Primeramente la aplicaci n est dise ada con la idea de que pueda ser usada por un amplio n mero de juegos basados en localizaci n por eso se considera una herramienta gen rica Y en segundo lugar el editor de contenido tiene la ventaja de ser colaborativo permitiendo que m ltiples usuario creen contenido para sus propios juegos al mismo tiempo y en la misma base de datos Me gustar a terminar remarcando la utilidad que un editor gen rico puede tener para los juegos basados en localizaci n permitiendo crear contenido de cualquier tema para cualquier juego y en cualquier lugar del mundo Tambi n me gustar a destacar que el editor puede ser mejorado de muchas formas por ejemplo una interesante mejora podr a ser el soporte multiusuario de modo que cada usuario pueda crear contenido para su propios juegos sin la necesidad de usar la misma base de datos que otros usuarios 9 Page g IIANETIIETHMIO HATPON Aja Design and development of a mobile editor for location based games 10 Page MANENMIZTHMIO D ONIVERSITY OF PATE nis Design and development of a mobile editor for
38. with Element 3 Info key War 127 Page hd HATPON Design and development of a mobile editor for location based games de Info key Casket Info key Innocent victims Info key Childhood Info key Death Info key Body Info key Couple Info key Adam and Eve Info key Distortion Info key Sex Info key Phallus Info key Popular art Info key Image Info key Historical currency Info key Historical figure Info key Face Info key Symbol Info key Moving sculpture 128 Page sO y Design and development of a mobile editor for location based games Info key Macabre puppet Info key Skeleton Info key Dance Info key Repetition Relationships with Element 7 Info key Out of frame Info key Absence Info key Fluo colors Info key Chicken Relationships Easy way Linker e The relationships have been marked in the previous section e In that game all the relationships have the same default score 100 e Moreover some of the tags are related with two different elements that is why you should add these relations more 1 Death with Element 6 2 Repetition with Element 7 3 Face with Element 7 129 Page
39. 25 Figure 5 Foundation is the first open source framework to be responsive 32 Figure 6 MySQL Workbench provides an easy to use visual way to design databases 34 Figure 7 Screenshot of the database uploaded to the server through phpMyAdmin 36 Figure 8 The first sketch of the design which was later modified 44 Figure 9 First approach of the real world abstractions 45 Figure 10 First approach of the virtual world abstractions 45 Figure 11 Design of the entities hierarchy 48 Figure 12 Sketch of the design of the real objects management screen 52 Figure 13 Sketch of the design of the virtual objects management screen 53 Figure 14 Sketch of the design of the linker screen 53 Figure 15 Phases in which the project has been developed 57 Figure 16 JavaScript script which allows to recognize a mobile device 59 Figure 17 First lines of gamelist_mobile php showing the use of sessions 59 Figure 18 Sketch of the
40. 8 1 75 5 4 555555556 4 375 6 2 111111111 2 625 7 3 666666667 4 8 2 777777778 2 125 9 4 4 125 10 1 666666667 1 625 To compare the rating of both versions it is much easier with the chart below Comparison between the two versions de A fA NI APM M N N X A i i VY YO Pp N V W Mobile Desktop Figure 43 Chart showing a comparison between the average ratings of the mobile and desktop versions First of all it must be highlighted that practically there are no significant differences between the two versions However will comment the most remarkable data The main difference is in the eighth and the third statements In general the respondents believe that the mobile version is more cumbersome and difficult to use than the desktop About the different average score of the sixth statement can conclude that testers believed that the desktop version is more inconsistent than the mobile version 94 Page MANENMIZTHMIO D UNIVERSITY OF PATE ns Design and development of a mobile editor for location based games Moreover it is worth to mention that according to the mean scores the desktop version is easier to learn than the mobile However this rating is due to the sample is biased because if we look at the individual ratings in each of the versions we would get the conclusion that the mobile version is thought to be more easily learned by users Regarding the fifth statemen
41. Creaditor mobile application For the assessment session we should prepare a form in which the participants can put their personal data that may be of interest age sex education In addition the people must be reported that they will be recorded and that the information about them will be completely anonymous and just will be part of my work The form and important information that participants should know are included in a document that will be described in the next subsection To collect data and to analyze them later on several methods were used The first is through the recording with a video camera the second through the voice recording of the participants with a program included in the tablets Both methods allow us to obtain all impressions and reasoning of the participants during the assessment since they were asked to use the Think Aloud Protocol which consists of observing a user working with an interface while encouraging them to think aloud to say what they are thinking and wondering at each moment As a third method of collecting information can include taking notes while the participant behavior is observed In 82 Page QA IIANETIXTHMIO Design and development of a mobile editor for location based games addition to this information may be obtained through SUS System Usability Scale questionnaires that the testers had to fill after using TaggingCreaditor to create content Therefore as it has been indi
42. ENT OF A MOBILE EDITOR FOR LOCATION BASED GAMES by the student of the University of Valladolid L pez Romero Guijarro Rodrigo Surnames Name Was presented in public at the department of Electrical and Computer Engineering of the University of Patras Greece on July 10th 2014 The supervisor The Head of the Electronics and Computers Division N Avouris E Housos 3 Page g IIANETIIETHMIO HATPON Aja Design and development of a mobile editor for location based games 4 Page g IIANETIIETHMIO HATPON Aja Design and development of a mobile editor for location based games 5 Page TANECISTHMIO PON Ag ni II Design and development of a mobile editor for location based games ABSTRACT In the present project propose to describe the design development and implementation of mobile application TaggingCreaditor TaggingCreaditor as its name suggests is a tool that allows the creation and edition of content for collaborative location based mobile games i e for the called Tagging games whose physical elements are identified with tags such as a QR code or RFID code tags The application has been developed for both desktop computers and mobile devices In this paper the editor for the mobile devices will be presented Mobile technologies play an increasingly important role in our lives so that it is reasonable that new ideas come up to take advantage of this technology An interesting example
43. HAR 255 indicating the manner in which a game ends A game can finish because of three reasons Time Establishing a limitation of time Rounds Establishing the game has to finish after a number of rounds MANENMIZTHMIO D UNIVERSITY OF PATE ns it HATPON Design and development of a mobile editor for location based games Links We can also decide that the game doesn t have to finish until all the relationships between the elements and keys are carried out image Character string VARCHAR 255 with the path of the game image stored on the server This image could be the logo of the game creation Date DATETIME indicating when the game was created lastModification Date DATETIME of the last modification in the attributes of the game realObject h1 realObject h2 realObject h3 Character strings VARCHAR 255 that name real objects of first h1 second h2 and third h3 level of the entities hierarchy respectively The user when creating a new game has the possibility of changing the default values Playspace Location and Element for the values the user prefer which gives to the editor a great flexibility you can also modify these settings in the edition of the game These attributes are really useful because the content editor user will be able to choose the names of the entities in the hierarchy so that for example if someone wants to create content for CityScrabble the realObject h3 string woul
44. RB is going on investigating and developing new features to ensure Foundation remains the most advanced responsive front end framework in the world so that the programmers can code smarter and faster 11 References 15 and 16 31 Page Design and development of a mobile editor for location based games LARGE GRID MEDIUM GRID Figure 5 Foundation is the first open source framework to be responsive 2 2 2 Features The most important features of the last update of the framework ZURB Foundation are the following Faster for Users Foundation 5 has a fast core that allows you to create beautifully optimized pages for whatever screen you want This core also removes unnecessary waiting time for users especially for animations and transitions In addition to this in the last update of Foundation the style is simpler cleaner and faster to restyle Faster to Code As Foundation is a responsive framework creating websites and applications for any device is faster than ever Moreover there is a new command line tool that allows you to develop Foundation projects very fast Faster to Learn To help the programmers improve their future friendly website building skills the designers of Foundation provide great quality documentation and a community forum in their official website so that the programmers can learn much more quickly They have also written a new Getting Started guide that can be really useful
45. Results during the evaluation 91 5 7 2 Analysis of SUS questionnaires 92 5 7 3 Analysis of the focus group 95 6 CONCLUSIONS T M 97 Ti REFERENCES ueste ri and xenon asado ibd canda RAN a a 98 ANNEX 1 MOBILE USER MANUAL 100 ANNEX 2 EVALUATION SESSION DOCUMENTS 116 1 Evaluation of TaggingCreaditor ooonooooooooooooooooooarn nono nono nonononononononononononos 116 2 CityScrabble Instructions for the mobile scenario 122 3 Taggling Instructions for the mobile scenario 126 FIGURE INDEX Figure 1 Two main screens in MuseumScrabble topic selection and exhibit association 19 Figure 2 Main screens in the CityScrabble game 20 Figure 3 Main screens in Benaki Museum Scrabble game 21 13 Page Design and development of a mobile editor for location based games Figure 4 Programming languages layer structure
46. UNIVERSITY OF PATRAS ELECTRICAL AND COMPUTER ENGINEERING DEPARTMENT ELECTRONICS AND COMPUTERS SECTOR SO TIANENMIETHMIO oC IIAIPON Aic S UNIVERSITY OF PATRAS Design and development of a mobile editor for location based games TaggingCreaditor Application Rodrigo L pez Romero Guijarro STUDENT OF THE HIGHER TECHNICAL SCHOOL OF TELECOMMUNICATIONS ENGINEERING UNIVERSITY OF VALLADOLID SUPERVISORS PROF N AVOURIS DIPLOMA THESIS NUMBER JULY 2014 Design and development of a mobile editor for location based games To my parents sisters and family for their unconditional support and education received along all these years because I have managed to fulfil a dream to Andrea for her love and all these amazing years together to Alejandro for these four years together working hard to Christos Menita and Prof Avouris for all the help I have received during the course of the project to all the people who helped during the evaluation of the application and last but not least to all the wonderful people I have met in Greece Honestly thank you so much 1 Page g IIANETIIETHMIO HATPON Aja Design and development of a mobile editor for location based games 2 Page IIANEITIIZTHMIO p ONIVERSITY OF PATRAS yar ac ITATPON Design and development of a mobile editor for location based games CERTIFICATION It is certified that diploma thesis with the title DESIGN AND DEVELOPM
47. a we realized that there was no tool able to create content in general that is that enables the creation of content for several location based games that share a lot of features in common After the presented work in this paper it can be said that the mobile application aimed at creating or editing content for collaborative location based mobile games is working properly and therefore it has managed to meet all the initial requirements and key objectives After the development of the application have been aware of potential improvements and new functionalities that could be added in a more advanced version of the content editor To begin with among the improvements that could be carried out in the editor in order to achieve a much more complex final editor can mention for example the adaptation of the application to multi user support or the support of the greek language in the user interface Secondly very interesting functionalities could have been added in order for the content editor to be far more flexible One of them is the option to introduce a drawing of a museum map so that the content creator could locate the physical elements he wants on the map or as a variation that the map of Google Maps used has greater accuracy when positioning objects in indoors buildings A second interesting feature that would make many more location based games could use this tool is that the user could select the object hierarchy he wants t
48. a Create Edit content for this game Figure 18 Creating content for an existing game and changing the language 115 Page Design and development of a mobile editor for location based games ANNEX 2 EVALUATION SESSION DOCUMENTS 1 Evaluation of TaggingCreaditor PERSONAL INFORMATION Name Not Compulsory c cccsccsessssssssssescescescsecsecsesseceeseesesseseeseessesseaesecsecseeaees Surnames Not Compulsory nennen rnnt non tnnt nao nana Age Sex Male C Female ECN iaa INFORMATION FOR TESTERS All data and information got from this evaluation will be used for the evaluation and analysis of the developed tool TaggingCreaditor This information will be anonymous and the results will be only used as part of Rodrigo s and Alejandro s thesis By completing this form tester agrees that he she can be recorded during the whole process It comprises the understanding use and explanation of how to use TaggingCreaditor INITIAL INFORMATION TaggingCreaditor is a content provider for location based games which allows for non professional people to create their own content for already developed games and even for the new ones in an easy way Some of these already developed games are CityScrabble and Taggling which you will understand and create content for them later TaggingCreaditor has been developed for desktop and mobile devices So tester will h
49. abase is that it is necessary for the content creation for Taggling game since some keys can be placed in exhibits and other hidden devices of the players If the content creator did not include this feature previously to the game that the key belongs the user will not have the option to enter a value for this attribute hint Character string VARCHAR 255 used as a hint or tip in the game As with the visibility attribute this attribute is optional and the reason for its existence in the database is that it is necessary for the content creation for MuseumScrabble game since the keys must designate a hint If the content creator did not include this feature previously to the game that the key belongs the user will not have the option to enter a value for this attribute 69 Page Design and development of a mobile editor for location based games 4 2 4 Relationship Element Key As has been seen throughout this chapter the relationship between the real world and the virtual world plays a very important role to create content in location based games The main reason is that all the studied games aim to relate the keys provided by the mobile application with real world objects that are part of the game Therefore it is clear that the relationship between the two worlds is made by means of these two entities the elements and the keys As discussed in Section 3 4 3 a first approach when relating the elements with keys is through a s
50. ace In it as you can see in Figure 4 the fields name kind and information must be filled to create a new playspace or as second option it is offered to the user to add an existing playspace If the user chooses to add an existing playspace the user will see the second screen of Figure 4 being able to choose either add an existing one or clone an existing one The difference is that adding an existing one by modifying features or adding objects to this playspace this playspace in the other games will be modified i e the same playspace may be modified in whatever the game containing this playspace while cloning an existing one means that you copy all the features and objects found in the playspace and are copied to the game that is if the user changes something in the cloned playspace it will not be changed in the origin playspace Tagging Creadi x Loading C lt http creaditor argon097 server4y Q C lt http creaditor argon097 server4y Mate uo b V WL Nus um im d SAS y ww M Y A Y HS 7 Add existing Playspace Contemporary art museum Copy Museum of MMCA Copy Figure 4 Creating a new playspace or adding an existing one 103 Page Design and development of a mobile editor for location based games Creating a new location To add a new location to an existing playspace the user firstly needs to choose in the list of objects the playspace to add the location the user wants to create By choosing
51. ach museum The main documents prepared for the evaluation session can be found in the annex 2 Evaluation session documents The replicas of the museum which were also prepared are not included in this annex 83 Page Design and development of a mobile editor for location based games ER IIANETIXTHMIO j ILATPON AQ oom 5 2 2 Material In addition to the above documents it was also required the following material Computer or laptop and projector to show useful initial information to participants Two desktop stations for evaluating the desktop version Two tablets for evaluating the mobile version These tablets should have prepared a program to record the voice of the participants while creating content in the application Camera and video camera to record the behavior of the testers during the evaluation session 5 3 Think Aloud Protocol The Think Aloud Protocol is a very perceptive and informative method and when used effectively can result in a lot of information regarding an interface the usability of a system and so on Think Aloud Protocol consists of observing users working with an interface while encouraging them to think aloud to say what they are thinking and wondering at each moment Think Aloud Protocol is of particular value because they focus on the problems a user has when the user is working without difficulty direct observation and hence the think aloud protocol itself i
52. also give an example used during the evaluation session First note that TaggingCreaditor is not an application that people will use in general since it is aimed at creating content for games in museums and locations of interest at least in touristic places For this reason an interesting use could be that a school teacher prepares content for their students for a visit to a museum a park or even a zoo Another possible scenario is that museum workers prepare the contents of the museum providing visitors the option to play any of the location based during the visit Another scenario could be that one of the developers of a location based game wished to operate his game in a different location to where it is already created or simply in the same location but with a different content adapted to a special date as might be the Carnival of Patras In the next section we will see an example of a possible scenario with some schemes of content that should create the user 4 4 1 Mobile example The description of the mobile scenario is as follows You are a history teacher in a school of Patras and your students and you are going to the Technopolis Museum in Athens next week The best way for your students to learn knowledge about it is playing CityScrabble with your own content Imagine that you are right now in the Technopolis Museum in Athens with the purpose of creating content for these games with a tablet What you have to do th
53. amp Theme Topic The relationship between level 1 and 2 of the entities hierarchy is considered too many to many because a playspace may contain many locations and location can belong to several playspaces The same applies to the relationship between themes and topics Relationship Location Element amp Topic Key As in the relationship between level 1 and 2 of the entities hierarchy the same happens in the relationship between level 2 and 3 This is a many to many relationship because a location may contain many elements and an element can belong to several locations The same applies to the relationship between topics and keys Relationship Element Key This is the most special relationship of the design of the database because as discussed below includes the essential attributes to relate the elements and keys As the above cases this relationship is also many to many because an element may relate to different keys and a key may be associated with several elements As has been seen all relationships are many to many relationships with the aim of achieving an editor as flexible as possible In the case of many to many relationships is needed a relationship table for each of the relationships In the Figure 19 you can see how for each relationship there is a white table between the entities except for the special case of the relationship between the elements and keys which is orange In the following paragraphs I will f
54. and the object is right the player gets points The player can continue looking in the game space for objects that match the current topic or at any time return to the topic selection screen When the player returns to the topic screen it is visible that the other teams have been also making relationships This gives an overview of the other player s activity but doesn t provide any information about their score 3 Map Screen A map assists the players by showing the position of the objects on the field The not yet found objects are marked with a question mark 118 Page a IIANETIXTHMIO C HATPON Design and development of a mobile editor for location based games SCENARIO 1 DESKTOP You are a history teacher in a school of Patras and your students and you are going to the Technopolis Museum in Athens and Museum of Contemporary Art in Thessaloniki next week The best way for your students to learn knowledge about it is playing CityScrabble Technopolis and Taggling Contemporary Art with your own content You are right now at home because you already have all the information about them stored in your computer What you have to do then is to add content with the TaggingCreaditor editor uploading the information you have to the application The steps to do so are as follows 1 Create a new game 2 Enter real data Put the data of the playspaces locations and elements in the Location Element screen the one appear
55. ation based games A mobile location based game as established before is a type of pervasive game in which the player s location affects to the progress in the gameplay In this paragraph I will describe the location based games that will be taken into account for the design and development of the generic editor to create content Mainly the definition the rules and the operation of the games will be explained 1 References 1 and 2 18 Page Design and development of a mobile editor for location based games 1 3 1 MuseumScrabble2 MuseumsScrabble is a location sensitive and multi player educational mobile game aimed at children visiting historical museums The game requires that the players should explore the museum and link abstract concepts with physical artefacts using a mobile device The rules of the game are as follows The game is played by teams who compete against each other Each team is given a single handheld device with an RFID scanner through which they link exhibits to topics the exhibits have attached a RFID tag and the museum is equipped with a wireless network The players select a topic and then move around the museum halls to identify the most relevant exhibits using the hints provided The teams that identify relevant exhibits are awarded with points The game ends when all available links have been established and the team that has achieved the highest score when the game finishes wins the game So
56. ation with a client server architecture so that the server centralizes the content of the application 3 2 4 Connection to maps Since this is an application that must create content for location based games it should have some ability or capability to connect with some kind of map so that the content creator can place the elements he wants on a map to use location identification 40 Page TIANETIIXTHMIO PON na d II Design and development of a mobile editor for location based games 3 2 5 Desktop amp mobile application As established in the introductory chapter it is an application that should run on both desktop computers and mobile devices The use of ZURB Foundation will facilitate this task since it is a responsive framework Creating content from a desktop computer in this application is sometimes more comfortable for the user but the mobile application offers another set of interesting benefits To begin with for example if users want to create content for a museum and they don t know which exhibits are exposed in this museum they can go there with a mobile device and create content in the museum while they are taking a look at the elements there i e at the same time they go around the museum they are creating content for the game Another advantage associated to the same scenario is that while someone is creating new elements in the application this person will be able to take the photos of the elements w
57. ave to try the working for both of them in the two different scenarios During the evaluation the tester will have to follow the Think Aloud Protocol which consists of observing a user working with an interface while encouraging them to think aloud to say what they are thinking and wondering at each moment This protocol is of particular value because it focuses on the problems a user has when the user is working without difficulty direct observation and hence the think aloud protocol itself is of very limited use Therefore following this protocol you will have to verbalize and talk all the actions that you are going to do while you are using TaggingCreaditor The structure of this evaluation is the following 1 First of all understanding the performance of the games which new content is needed 2 We will describe two scenarios for each game one for desktop and one for mobile version 3 Then you will create the new content following some guidelines 4 Finally you will answer a short questionnaire about the application Documents performed with the help of Alejandro Ortega Arranz 116 Page Design and development of a mobile editor for location based games CITYSCRABBLE HOW TO PLAY CityScrabble is a location based game for open areas It is played using android devices in places for which content has been prepared The game can be played in any open space Examples are city centers archaeological parks
58. ber of relationship types to be able to choose when linking elements with keys and the names of such relationships all in a string separated by l For example if we want the elements and the keys of a game can be related through the types Score Sentence Default the relations_type attribute will contain the following string in the database 3 Score Sentence Default If the content creator decides not to add this optional feature for a particular game value NoTypeSet in relations type the user of that game will not be able to choose any type of relationship between the elements and keys it will be hidden in the user interface 65 Page Design and development of a mobile editor for location based games 4 2 2 Attributes of the real world entities idPlayspace INT namePlayspace VARCHAR 255 kindPlayspa ce VARCHAR 255 infoPlayspace VARCH AR 255 Playspace u J Figure 21 Playspace entity in the database MySQL Workbench 6 1 CE idPlayspace Number INT that identifies each playspace introduced into the editor It is chosen automatically by the database namePlayspace Character string VARCHAR 255 with the name of the Playspace kindPlayspace Character string VARCHAR 255 with the type of Playspace It will be a free text box so that the user can choose whatever he wants infoPlayspace Character string VARCHAR 255 with information about the Playspace Location
59. buted application model in which tasks are distributed among resource or service providers called servers and the service requesters called clients A client makes requests to another program and the server is the one who gives the answer In this architecture the processing capacity is shared between clients and servers although the organizational advantages due to the centralization of information management and separation of responsibilities are more important They facilitate and clarify the system design One reason that explains that the application has to follow the client server architecture is that with the client server architecture the developer has to build only one database and server side component and afterwards the developer can program different user interfaces according to device type as in this case mobile and desktop interfaces 39 Page Design and development of a mobile editor for location based games 3 2 2 Web based application A web application consists of the tools that users can use accessing a web server through the Internet or an intranet by means of a browser In other words a web application is a software application that is coded in a language supported by web browsers the ones that run it Web applications are popular due to web browser are lightweight clients the operating system independence as well as the ease to update and maintain web applications without distributing and installing sof
60. cated the Think Aloud Protocol the SUS questionnaire and a moderated discussion among all participants of the meeting including participants and organizers were used during the course of the evaluation 5 2 1 Documents 17 Taking into account all that mentioned above in addition to the digital content needed the documents which were prepared for the assessment session are the following ones Initial information document This document is titled 1 Evaluation of TaggingCreaditor and it is the first document located in the annex 2 The document includes a form for participants to fill their personal information initial information indicating to the participants that the information for the analysis would be processed anonymously that they were to be recorded and during the performance of the tasks they had to use the Think Aloud Protocol an introduction of what the TaggingCreaditor application is and what its main purpose is information about how CityScrabble is played the two scenarios in which the people worked desktop and mobile and finally a questionnaire for the desktop version and another one for mobile version Documents with instructions the testers followed For the mobile version the documents with the instructions are titled 2 CityScrabble Instructions for the mobile scenario and 3 Taggling Instructions for the mobile scenario found in the annex 2 Documents with photos and descriptions of real objects of e
61. cations The physical objects are abstractions too and they are the objects with a tag marker such as a QR code tag a RFID code tag or something similar These objects belong to a location For instance a physical object can be an exhibit in a museum a 44 Page a TIANET IT HMIO A IIATP Design and development of a mobile editor for location based games location in the city center and so on This will be another abstraction called element and is the one in which the tag is placed to prepare a location based game Playspaces Locations Elements Figure 9 First approach of the real world abstractions 3 4 2 Virtual world abstractions The virtual world as indicated before is the one that contains all the content of the location based game that is included in the devices such as the pictures the hints and so on Each game has different topics Therefore the user of the editor must be able to add new topics Each topic in turn consists of hints or keys which are the small sentences that appear in the device of each team while playing The user of the editor must be able to add new keys to the different created topics In addition to this and considering that a list of topics can have some feature in common we will also have the abstraction theme For example we can have several topics whose subject is about some century then we can have a theme called Centuries that co
62. ch provides a visual console to easily administer MySQL environments and gain better visibility into databases Developers and DBAs can use the visual tools for configuring servers administering users performing backup and recovery inspecting audit data and viewing database health Visual Performance Dashboard MySQL Workbench provides a suite of tools to improve the performance of MySQL applications DBAs can quickly view key performance indicators using the Performance Dashboard Performance Reports provide easy identification and access to IO hotspots high cost SQL statements and more Moreover with 1 click developers can see where to optimize their query with the improved and easy to use Visual Explain Plan Database Migration MySQL Workbench now provides a complete easy to use solution for migrating Microsoft SQL Server Sybase ASE PostreSQL and other RDBMS tables objects and data to MySQL Developers and DBAs can quickly and easily convert existing applications to run on MySQL both on Windows and other platforms Migration also supports migrating from earlier versions of MySQL to the latest releases Figure 6 MySQL Workbench provides an easy to use visual way to design databases 34 Page Q IIANETIXTHMIO j ILATPON nt Design and development of a mobile editor for location based games 2 4 Apache web server1 ww APACHE A web server is a computer that stores websites on the Internet and delivers web pa
63. core The problem with this is that it is not a very flexible solution To fix this it was decided to have two attributes type and strength that make the relationship is more flexible In what follows will present all the attributes that characterize the Key Element relationship Key idKey INT t Element_idElement INT Type VARCHAR 255 O Strength INT Game idGame INT Ld TE Figure 27 Relationship element key entity in the database MySQL Workbench 6 1 CE Key_idKey Number INT of identification of the key being part of the relationship Element_idElement Number INT of identification of the element being part of the relationship Type Character string VARCHAR 255 indicating what type of relationship there is between the element and the key The relationship types are the ones that the user indicated in the game creation or edition i e in the relations_type attribute of the game entity Strength Number INT with value in the range 0 to 100 that indicates the strength of relationship between the selected element and key If a key and an element are closely related this value will be high closer to 100 whereas if a key and an element are slightly related this value will be lower closer to 0 Game_idGame Number INT of identification of the game that this relationship belongs 70 Page Design and development of a mobile editor for location based games 4 3 User inter
64. d be objects whereas if someone wants to create content for MuseumScrabble the realObject h3 string would be exhibits virtualObject h1 virtualObject h2 virtualObject h3 Character strings VARCHAR 255 that name virtual objects of first h1 second h2 and third h3 level of the entities hierarchy respectively As with the names of real objects when creating a new game or editing an already created the content editor user can modify the names of entities in the virtual world at any time radiusElement This attribute is part of the optional properties when the game is being created or when its main properties are being modified The reason for its existence in the database is that it is necessary for the content creation of games such as CityScrabble game since the physical elements must designate the radius is required on the location map This game attribute indicates whether the radius attribute in the element entity discussed below makes sense in the elements of a game or no sense If the content creator decides not to add this optional feature for a particular game value NoRadiusSet in radiusElement the elements of that game will not have this feature it will be hidden in the user interface On the other hand if the attribute makes sense the database will contain the default value of the radius of the elements difficultyTopic This attribute is part of the optional properties when the game is being created or wh
65. d games Management of the real world entities The following step after creating a game is to create the real objects that will be part of the game The user will be able to do this in the real world entities management screen When managing the real world entities we have three options for each create entity edit entity or delete entity To manage real world entities we will have to do on the screen called real world management screen above We will be seeing each of the cases of creation and then will explain the case of editing and deleting with an example because it is applicable to all entities In the following figure you can see where the creation buttons for the real objects are located in the user interface Tagging Creadi lt C lt http creaditor argon097 server4y YY Q Tagging Creaditor IT New Playspace Contact Elements included Add Element administration blacksmith s workshop n Machine works carpenter s workshop central courtyard F s Showing 1 to 5 of 5 entries Previous 1 Next Add Location 2 ww Figure 3 Real world management screen and its creation buttons 102 Page Design and development of a mobile editor for location based games Creating a new playspace To add a playspace we have to go to the top bar menu of the real world entities management screen After selecting this option we will see the creation screen of playsp
66. database design created before the final design 60 Figure 19 Database design in MySQL Workbench 6 1 CE 61 Figure 20 Game entity in the database MySQL Workbench 6 1 CE 63 Figure 21 Playspace entity in the database MySQL Workbench 6 1 CE 66 Figure 22 Location entity in the database MySQL Workbench 6 1 CE 66 Figure 23 Element entity in the database MySQL Workbench 6 1 CE 67 Figure 24 Theme entity in the database MySQL Workbench 6 1 CE 68 Figure 25 Topic entity in the database MySQL Workbench 6 1 CE 68 Figure 26 Key entity in the database MySQL Workbench 6 1 CE 69 Figure 27 Relationship element key entity in the database MySQL Workbench 6 1 CE 70 Figure 28 Welcome screen of TaggingCreaditor 71 Figure 29 Game list screen of TaggingCreaditor left games list right game details 72 Figure 30 Real world management screen left navigation list right entity details boxes 73 Figure 31 Virtual world management screen left navigation list right entity details boxes 74 Figure 32
67. e the one that is represented in Figure 35 Figure 35 Example of virtual content that a teacher can create for CityScrabble 78 Page IIANEIIXTHMIO GC TIATPON Design and development of a mobile editor for location based games The final step is to create the relationships between elements and keys in the linker screen For the example am proposing the relationships should be Figure 36 Example of relationships that a teacher can create for CityScrabble 79 Page Design and development of a mobile editor for location based games 5 EVALUATION AND RESULTS In this chapter am about to present TaggingCreaditor assessment session and the results will be analyzed in detail Therefore this chapter provides information on the preparation of the evaluation session the necessary materials the structure followed the protocols and methods used in order to collect useful information from participants problems found along the session along with their possible solutions and finally potential improvements that could be made to create much more efficient TaggingCreaditor application 80 Page Design and development of a mobile editor for location based games 5 1 Introduction The evaluation of the application took place on July 6 2014 in the laboratory of the Human Computer Interaction Group research group University of Patras Greece The evaluation involved 9 people of different nationalities
68. e amount of JavaScript libraries available are almost endless some more complex and others more simple but definitely all of them are great to help when developing JavaScript has been used in some parts of the code in order to program some functionalities such as alert messages It has not been used a lot because instead of using it have preferred to use the library JQuery explained in the next section References 12 and 13 28 Page i IIANETIXTHMIO j ILATPON ntn Design and development of a mobile editor for location based games uer e jQuery write less do more JQuery is a fast small and feature rich JavaScript library It was released on January 14 2006 and is the most used JavaScript library It makes things like HTML document traversal and manipulation event handling animation and Ajax much simpler with an easy to use API that works across a multitude of browsers There are many other JavaScript libraries but jQuery has become the most popular due to its ease of use and great power JQuery is a free open source software It has a dual licensed under the MIT License and the GNU General Public License v2 allowing their use in free software projects and jQuery like other libraries offers a number of features based on JavaScript that would otherwise require a lot more code i e with the functions of this library are achieved great results in less time and space For this last reason JQuery has b
69. e of the mobile version will have to be programmed The files in which the user interface of the mobile interface will be programmed will have as a starting point the desktop version developed code and from there appropriate modifications will have to be made in order for the mobile user experience to be as more satisfying and intuitive as possible Furthermore another fundamental reason for having followed this way of working is that the development of the code is going to be programmed on a computer screen which will greatly facilitate testing during the programming phase of the project and will not have to be tested with a mobile device what would make the development slower For the design of the user interface was taken into account that three main screens would be needed Real objects screen In it playspaces locations and elements will be managed In Figure 12 can be seen the sketch of the initial design of this screen that was created during the design phase of the user interface r4 APPLICA TION ever SO LOCATION 4 gt INE We Mu tHe Lie taetenr1es pee i Te ELEMENT 4 ELEMENT 2 LocATigN 2 ELEMENT LATIN Ir Sows F Lo CATIN a cad Cumoe the Ue OF twe uras ee A 3 ProreRTS LUCO OER Trem ihe E vm 8 g re alwa A cf lese uwa cs kaS Locartons ewn y e i Figure 12 Sketch of the design of the real objects management screen 52 Page TIANENIETHMIO II ON
70. ed with any key Points are only awarded if the connection between key and the object is meaningful It is a competitive multiplayer game which can be played by competing individuals or by teams of 2 3 players It should last a little more than 30 minutes depending on the size of the area The winner is the team with the most points when the keys are all connected In the following figure we can see the main screens that are part of the game the two first are for the starting of the game the third one is to choose a topic the fourth one is the screen to connect objects with keys and finally the last screen is the map that helps the players to locate the objects Figure 2 Main screens in the CityScrabble game References 4 and 6 20 Page Design and development of a mobile editor for location based games 1 3 3 Benaki Museum Scrabble Benaki Museum Scrabble BMS is a location sensitive mobile game built for the Benaki Museum in Athens in which each player or team has a mobile device that can read QR tags and can follow the progress of the game The rules of the game are as follows The game aims to engage visitors mainly student groups in a process of discovering relationships between museum exhibits and objects that are not exposed Therefore in the game there are two categories of objects physical artifacts that are part of the museum s collection and are accessible to the players by means of QR tags p
71. een used to implement a lot of functionalities in the editor application 2 1 4 Css W3C esse CSS Cascading Style Sheets is a style sheet language created to control the appearance or presentation of electronic documents defined with HTML and XHTML CSS is the best way to separate content and presentation and it is essential to create complex web pages or web applications When creating a web application it first uses for instance the HTML language for marking content i e to describe the function of each element within the page paragraph headline highlighted text table list items and so on Once created the content the CSS language is used to define the appearance of each element color size and font of text horizontal and vertical separation between elements position of each element on the page and so on Separating the definition of the content and the definition of their appearance has many advantages as it forces us to create well defined and complete meaning HTML documents It also improves the accessibility of the document reduces the complexity of its maintaining and allows us to display the same document in countless different devices In addition to this our web applications become more flexible since we can change whenever we want the style of our application with only modifying our style sheets without modifying the content and finally with CSS it is important to remark the unification of the screens design of t
72. elements and keys This relationship will be explained in detail in the next paragraph In the following each one of the entities will be described in detail distinguishing between the real world and the virtual world 48 Page TIANHIIIETHMIO PON na Ad II Design and development of a mobile editor for location based games 3 5 1 Game entity This entity deserves a single paragraph because it is the highest level entity in the general hierarchy It can be seen as a container of playspaces and themes taking into account also all the attributes of the game Therefore a Game could contain many playspaces and many themes I will explain this with examples in the following paragraphs This is an abstract entity that belongs to both the real world and the virtual world An example to understand the concept of a Game clearer is the following a Game in the content editor could have the name CityScrabble thus indicating that the user of the editor will create content for that game 3 5 2 Real world entities Playspace Layer hierarchy 1 It is the highest level entity in the real world and can be considered as a container of locations An example of Playspace name following the example of CityScrabble could be Patras City Center indicating that the CityScrabble game will be played in the center of Patras As l indicated before one Game can have many playspaces To put an example imagine that we want to create cont
73. en is to add content with the TaggingCreaditor editor at the same time as you go around the museum The steps to do so are as follows 1 Create a new game 2 Enter real data Put the data of the playspaces locations and elements in the Location Element screen 3 Enter virtual data Put the data of the themes topics and keys in the Topic Key screen 4 Create the relationships between the elements and the keys in the Easy way Linker screen 16 Scenario taken from the evaluation session documents 77 Page Design and development of a mobile editor for location based games After describing the scenario the following step is to create the content Firstly the game must be created To do it the user will have to take into account that CityScrabble has two additional attributes that needs to work properly radius for elements and hint for keys Secondly the user has to create the real content and to do it the user will use the real management screen As we are in a mobile scenario when the teacher is adding elements to the editor photos of the elements must be taken with the mobile device One example scheme of the real content could be as it is represented in Figure 34 Figure 34 Example of real content that a teacher can create for CityScrabble The following step is to create the virtual content in the virtual management screen On example scheme of the virtual content for the described scenarios could b
74. en its main properties are being modified The reason for its existence in the database is that the content creator can decide whether assigning difficulty to a topic or not assigning it Therefore this game attribute indicates if the difficulty 64 Page IANEIIIETHMIO PON na ni II Design and development of a mobile editor for location based games attribute of the topic entity discussed below makes sense or it does not If the content creator decides not to add this optional feature for a particular game value NoDifficultySet in difficultyTopic the topics of that game will not have this feature it will be hidden in the user interface On the other hand if the attribute makes sense the database will contain the default value of the difficulty of topics visibilityKey This attribute as the previous ones described above is part of the optional properties when the game is being created or when its main properties are being modified The reason for its existence in the database is that it is needed for gameplay of games such as Taggling since as explained in the section 1 3 4 some keys could be placed in exhibits and other hidden on devices the visibility attribute of the key entity indicates then where the key will be located Therefore this game attribute indicates whether the visibility attribute of the key entity makes sense or it does not If the content creator decides not to add this optional feature for a part
75. ent for the CityScrabble for Patras city center and on the other hand for Athens city center By adding to the Game called CityScrabble the playspaces Patras City Center and Athens City Center we will achieve what we wanted Location Layer hierarchy 2 It is the entity that follows the playspace entity in the real world hierarchy and can be seen as a container of the physical elements that will belong to content of the location based game An example of Location name taking the CityScrabble game as example in the Patras City Center Playspace could be George Square It means that this square will be part of the game content and that most probably will contain several physical elements that will be added in the content of this game 49 Page TIANHIIIETHMIO PON na d II Design and development of a mobile editor for location based games Element Layer hierarchy 3 It is the lowest level entity in the entities hierarchy in the real world but perhaps the most important This is because as mentioned in Chapter 1 one of the main objectives of location based games is to find the proper relationship between the physical elements which are part of the game with keys small sentences Some examples of Elements going on with the example of CityScrabble in the playspace Patras City Center and the location George Square could be the fountain of George Square or even Caravel shop that is
76. ents to the system is huge PHP is available for many platforms including Windows Unix or Linux and with the advantage that the applications developed in PHP can be transported from one platform to another without modifications i e PHP has high portability Although it is now a multiplatform language it should be added that its native environment is Unix Linux Regarding the web server also exist different options because it could be used for example IIS Internet Information Server from Microsoft or Apache the latter with the advantage that like PHP is also a product of free distribution Among other advantages PHP also has it allows the connection and access to multiple databases management systems like MySQL PostgreSQL or Oracle Because all of the advantages l have mention in this subsection and because of the knowledge had about PHP chose this programming language as the main programming language to program almost all the functionalities of the application 2 1 2 Html Woe HM Along with PHP HTML may be included as a main programming language used It has been used especially embedded in PHP code and all the labels provided by HTML were used for the structure of the application HTML HyperText Markup Language is the language that all browsers use to present information on the World Wide Web WWW and today is one of the most important languages used to develop web pages and web applications It is a simple language w
77. ere es una herramienta que permite la creaci n y la edici n de contenida para juegos m viles colaborativos basados en localizaci n es decir para los llamados Tagging games cuyos elementos f sicos son identificados con etiquetas como c digos QR o etiquetas RFID La aplicaci n ha sido desarrollada para ordenadores de sobremesa y dispositivos m viles En este documento ser presentado el editor para los dispositivos m viles Las tecnolog as m viles juegan un rol cada vez m s importante en nuestras vidas de modo que es razonables que nuevas ideas surjan para aprovechar esta tecnolog a Un ejemplo interesante son los juegos m viles colaborativos basados en localizaci n que tienen la gran ventaja que pueden ser usados tanto para la diversi n como para el aprendizaje Ejemplos de este tipo de juegos son MuseumScrabble o CityScrabble de los que se har un estudio posterior junto con otros juegos antes del dise o del editor El problema es que hay muchas localizaciones donde se pueden jugar muchos de los juegos basados en localizaci n existentes pero no tenemos una herramienta gen rica que facilite la creaci n de contenido Esto es lo que trata de resolver TagingCreaditor crear contenido para estos juegos de forma que cualquier desarrollador pueda poner en funcionamiento su juego en cualquier localizaci n del mundo Incluso un profesor de colegio podr a usar este editor para crear contenido para sus alumnos en un museo al que
78. es are the ones of the third level of the entities hierarchy elements and keys the yellow entities are the entities of the second level of the entities hierarchy locations and topics the green entities are the ones of the first level of the entities hierarchy playspaces and themes and finally that the blue entity is the one of the highest level of the hierarchy Game The other tables of the design in white are tables of relationship between entities The orange table is also a relationship table but it is of a particular importance because it establishes the relationship between the real world and the virtual world The types of relationships between entities in the database design are Relationship Game Playspace amp Game Theme As have been discussing throughout the paper a game can contain many playspaces As we want the content editor as flexible as possible also a playspace may belong to different games For example the playspace Patras City Center may be included in the game CityScrabble and the game Taggling This property makes the relationship between the entities and playspace game is many to many The 61 Page MANENMIZTHMIO p ns Design and development of a mobile editor for location based games same explanation can be adopted to the relationship between game and themes since a game can have many themes and theme can belong to several games Relationship Playspace Location
79. evel entity in the entities hierarchy in the virtual world but perhaps the most important The reason is the same as indicated for the elements one of the main objectives of location based games is to find the correct relationship between the physical elements that are part of the game with keys small sentences Therefore the elements and keys play an important role in creating content for location based games Some examples of Elements going on with the example of CityScrabble in the playspace Patras City Center and the location George Square could be the fountain of George Square or even Caravel shop that is located in this Square 3 6 User interface design The design of user interface or interface engineering is the design of computers applications machines mobile communication devices software applications and websites focused on user experience and interaction It is typically a multidisciplinary activity involving several branches i e the design and knowledge as graphic design industrial web software Its main goal is to get applications or objects more attractive and also make user interaction as intuitive as possible In short follow the user centered design The graphical user interface GUI is a computer program that acts as user interface using a set of images and graphic objects to represent the information and actions available in the interface Its main use is to provide a simple visua
80. f existing content insertion of several location based games When an operation error was detected l solved it Initial study Requirements analysis Testing and debugging Figure 15 Phases in which the project has been developed 57 Page MANENMIZTHMIO D UNIVERSITY OF PATE ns AC HATPON Design and development of a mobile editor for location based games Regarding the phases described the most complicated of the project was to find the more possible abstract entities during the design phase Most of the time has been dedicated to study well the operation of all the proposed games and create designs that could be as abstract as possible The other great part of the time has been spent to program the application For the project development used the technologies described in Chapter 2 Firstly for the main functionalities used HTML embedded in PHP PHP and JavaScript It should also be noted that have included JavaScript libraries such as JQuery along with some useful plug ins such as datatables table plug in for jQuery On the other hand about the style CSS code has been used To write this code have tried in order to be clear to apply it to the id HTML attribute of the labels but sometimes have needed the class HTML attribute Finally in order to interact with the database have used MySQL code and a database divided in 14 tables trying to be the most flexible and well working possible Since the be
81. face implementation The main screens which are part of the application are Welcome screen game list screen real world management screen virtual world management screen and the linker screen In the following am going to describe all of them and afterwards will show how to navigate through them in the application 4 3 1 Main screens Welcome screen This screen simply welcomes the user of the application and gives the options Select Game or Create Game In the first option the user can check or edit the content data of a previously created game and the second option will allow the user to create content for a new game Tagging Creadi amp http creaditor argon097 server4y Yz WH 7 Welcome to TAGGING CREADITOR Figure 28 Welcome screen of TaggingCreaditor 71 Page xt TIANEMIETHMIO Design and development of a mobile editor for location based games e is Game list screen This screen is divided into two main parts List of games This part of the screen the list of games that the user created is displayed For the game list was used JQuery plug in called datatables Game Details Every time the user chooses a different game in the game list the part of game details will show the main features of the selected game From this screen in addition to have access to the edition of a created game or to the creation of a new game we can perform other secondary functions such as editing ma
82. for the eight elements located in the Technopolis Enclosure location When you find an element you will have to enter it in the application taking into account that you will have to take a photo of the element with the tablet horizontally Virtual Objects Topic Key screen NOTE In order to see the keys that have been added to a topic you have to refresh the page You can create all the keys in a row without refreshing the page and when you finish you can refresh the page to see the result Theme History Topic 1 title People image topic1 jpg In the gallery of the tablet description People of different specialties used to work in the Athens gasworks Try to locate in which building some of them worked Info key Manager Hint key The boss who supervised everything had his own building near one of the entrances Info key Blacksmith Hint key Small building with a roof and red pillars Info key Machinist Hint key The largest building in Technopolis 123 Page Design and development of a mobile editor for location based games VOR HIANETIETHMEO Info key Stoker Hint key Venue for concerts Topic 2 title The production line in the gasworks image topic2 jpg In the gallery of the tablet description The gas was produced in many stages Find the most important ones Info key Overheating Hint
83. ges to viewers upon request This service is referred to as web hosting Every web server has a unique address called an Internet Protocol address that tells other computers connected to the Internet where to find the server on the vast network Web hosts rent out space on their web servers for people or businesses to set up their own websites and the web server allocates a unique website address to each website it hosts The Apache HTTP server is a HTTP web server of open source for platforms such as Unix BSD GNU Linux Microsoft Windows Macintosh and other which implements the protocol HTTP 1 12 and the notion of virtual site The Apache server is developed within the HTTP Server project of the Apache Software Foundation Apache is widely accepted in the network since 1996 Apache is the most widely used HTTP server reaching its highest market share in 2005 being the server used in 70 of the websites in the world Among its advantages we can find the following ones Modular Open Source Multti platform Extensible Popular easy to get help support The main reason because chose Apache web server in addition to the advantages showed above is because is the server know best to develop a web based application working with Windows Y References 20 and 21 35 Page Design and development of a mobile editor for location based games 2 5 PhpMyAdmin 5 3 phpMyAdmin PhpMyAdmin is a tool written in
84. ginning of the programming phase tried to organize the code in the clearest possible manner following as far as possible the programming paradigm called modular programming in order to make the application the more readable and manageable possible To accomplish this have separated the PHP code into 51 files each implementing a different task and two of them dedicated exclusively to the support of the English and Spanish languages In addition to this all the JavaScript code including jQuery and CSS has been mostly included in separated external files Among all these files four of them were aimed to the mobile graphical user interface Each was dedicated to each of the main application screens game list screen real world management screen virtual world management screen and linker screen The starting point of these files was the desktop files used for the same purpose It was required to make several adaptions in order for the mobile users to have a better experience while using TagginCreaditor 58 Page t IIANEIHXTHMIO Design and development of a mobile editor for location based games 4X wasis 4 1 2 Differentiation between mobile and desktop In the Figure 16 we can see the way it is distinguished in the code between a mobile device and a desktop one in the first screen of the application As we can see it is a script in javascript code in which we use the screen width attribute to decide about it lt script
85. gling To do this they had to follow the steps outlined in the documents 2 CityScrabble Instructions for the mobile scenario and 3 Taggling Instructions for the mobile scenario found in Annex 2 Figure 40 A work team taking a photo of a replica while they are creating content 5 6 6 SUS Questionnaire Once participants had finished creating the content that they were asked the next step was to answer a SUS System Usability Scale questionnaire about the application We chose this type of questionnaire because it is an established questionnaire that can help to measure the usability of a system In addition to this and because of this reason using SUS has the advantage that we are able to compare our results with a lot of results of other evaluations 90 Page Design and development of a mobile editor for location based games 5 6 7 Focus group discussion Finally an interesting discussion was held among all participants and organizers of the evaluation in which all participants commented their own impressions opinions problems they found possible improvements and so on Figure 41 Focus Group discussion which took place in the end of the evaluation 5 7 Results and conclusions 5 7 1 Results during the evaluation Thanks to the voice recording of the participants and the use of the Think Aloud Protocol we can analyze their thoughts in order to draw conclusions about how the problems that the user was havi
86. hat is other than the fixed hierarchy to which the user has to meet As a final example of new functionality it would also be very useful if the user could upload files for instance XML files in which the content of a game is found so that when the user uploads it all data is entered in the editor database automatically To conclude after having met all the requirements established initially and the main objectives of the project can say that there is now a mobile application able to create content for a variety of collaborative location based mobile games and that has the features of being a very flexible generic and collaborative tool with a powerful potential to be enhanced in a future version by adding new functionalities 97 Page Design and development of a mobile editor for location based games 7 REFERENCES 1 Nikoleta Yiannoutsou and Nikolaos Avouris Reflections on use of location based games playful narratives for learning Human Computer Interaction Group University of Patras Greece 2 Nikolaos Avouris and Nikoleta Yiannoutsou A review of mobile location based games for learning across physical and virtual spaces Human Computer Interaction Group University of Patras Greece 3 Christos Sintoris Adrian Stoica loanna Papadimitriou Nikoleta Yiannoutsou Vassilis Komis Nikolaos Avouris MuseumScrabble Design of a mobile game for children s interaction with a digitally aug
87. he application since it is much easier to maintain the same appearance in all the screens Therefore CSS was used during the course of the project in order to program the appearance and presentation of the application 29 Page Design and development of a mobile editor for location based games 2 1 5 Sql d MySQL SQL Structured Query Language is a programming language designed to store manipulate and retrieve data stored in relational databases SQL first appeared in 1974 when Codd IBM developed the first prototype of a relational database There is a SQL standard but the SQL that implement major RDBMS Relational DataBase Management System are not exactly equal This is due to two reasons 1 The SQL standard is quite complex and it is impractical to implement it completely 2 Each database provider wants to differentiate their own product from the rest Query languages have two main parts DML Data Manipulation Language used to get delete update add data in the database DDL Data Definition Language used for the creation destruction of tables in the database This programming language has been used in order to deal with the database to add content to delete content update content and so on chose this programming language to deal with the database because is with the one feel more comfortable to atta Asynchronous Javascript And XML work with 2 1 6 Ajax AJAX A
88. hich is interpreted in the client side and which is based on the use of tags consisting of an ASCII text enclosed within a pair of angle brackets lt gt The text included inside the brackets gives us an explanation of the usefulness of the label Labels may include a number of attributes the majority of them optional allowing us to define different possibilities and characteristics of it These attributes will be defined by its name and the value they take Among other things the management of these tags will allow us to define the logical structure of the HTML document apply different text styles bold italic 7 References 11 27 Page ER MANEMZTHMIO it IAT PON Design and development of a mobile editor for location based games qe m inclusion of hyperlinks which allow us to access other documents related to the current one including images and multimedia files graphics video audio and many other features offered by HTML Among some of its advantages can highlight that you don t need a particular tool to develop a program but a text editor such as Notepad to write and edit the HTML code and a web browser which is responsible for interpreting and displaying the HTML code in your application Despite this it is also important to know the existence of HTML editors that can make us our work faster and can be of great help amp 2 1 3 JavaScript JavaScript JavaScript is one of the most used languages
89. hine languages This language sends to the machine the fundamental operations for operation It consists of the combination of 0 s and 1 s to form understandable commands for the machine hardware Each programmable circuit such as a microprocessor employs its own rules and therefore has its own machine language Assembly languages It is derived from machine language and is made up of letters and numbers abbreviations As a derivative of machine languages and as in the machine languages happens each programmable circuit has its own assembly language High level languages They are those languages that are closer to natural language than machine language Examples of this type of languages can be Java PHP Python or Matlab High level languages Assembly language Machine language Hardware Figure 4 Programming languages layer structure Every processor has its own language and can execute only those programs that are written in that language In order for the processor to understand the program written in the high level language some method of translation must be in place There are two techniques to achieve this aim References 8 and 9 25 Page Design and development of a mobile editor for location based games i E 1 The compiler The compiler is a special program which creates an object program in machine code from the source program written in high level language In the most general sense compilers
90. ho has won the most points at the end of the game Players are awarded with points when they put the correct tags on the right exhibit and bonus points when they complete an exhibit with all the correct tags They lose some points when they place wrong tags Labels are categorized according to their importance and meaning for example category Artist or category Technique to indicate that the tags represent the artist or the way a work of art was made Each category has a specific color that distinguishes it and the tags belonging to this have the same color 22 Page Design and development of a mobile editor for location based games 1 4 Thesis organization The rest of the report is organized as follows Chapter 2 Technology In this chapter it is included a description of the major aspects and features of the technology and the tools which have been used during the development of the project and the reasons I chose them Chapter 3 Design In this third chapter will detail all the steps that were carried out in order to design the application such as the study of the common features of the location based games proposed Chapter 4 Application Development and implementation This is chapter that shows the core of the project All the details about the development of the mobile application will be explained Chapter 5 Evaluation and results In this chapter will describe all the details concerning to the evaluat
91. hose name comes from a mixture between tagging and tangling is an educational location based game which can be played in a museum especially in contemporary art museums The rules of the game are as follows Taggling is a real time multi player game although it can be played by one player with a mobile device and a new approach in the eyes of contemporary art The main purpose of the game is that the players place shuffled tags in the right order as you browse through the exhibits of a museum The exhibits have been described by a number of concepts words phrases or names that have a direct relation with the exhibit They either characterize or describe it and so they help the player to gain some knowledge or more specific idea for the exhibit These are the tags of each exhibit Unfortunately these tags were mingled some jumped to other exhibits and some were hidden in the players devices Next to the familiar information label of the exhibits involved in the game a small QR code which identifies it on the device of player has been added to each one During the game players are scanning the QR code of an exhibit to a remove untag any tags they believe do not belong to the exhibit them by taking away to their device to transfer them to the right exhibit or b add tags from their device to the exhibit it fits best In this way one by one all tags will be put back in their proper places and the game will finish The winner is the one w
92. icular game value NoVisibilitySet in visibilityKey the keys of that game will not have this feature it will be hidden in the user interface On the other hand if the attribute makes sense the database will contain the default visibility of the keys hintKey This attribute is another one being in the group of the optional properties when the game is being created or when its main properties are being modified The reason for its existence in the database is that it is necessary for the content creation for games such as CityScrabble game since the keys must designate a hint Therefore this attribute indicates whether the hint attribute in the key entity makes sense or it does not If the content creator decides not to add this optional feature for a particular game value NoHintSet in hintKey the keys of that game will not have this feature it will be hidden in the user interface On the other hand if the attribute makes sense the database will contain the default valor of the hint of the keys relations_type This attribute also belongs to the group of the optional properties when the game is being created or when its main properties are being modified The reason for its existence in the database is that each location based game can have different types of relationships through scores through semantic sentences and so on Therefore if the content creator decide to add this optional feature this game attribute indicates the num
93. ily compare systems evaluated by SUS scale It should be noted that independent ratings are not significant in themselves That is if in the first question we had obtained a massive response from Strongly agree is not a significant finding as it is isolated from the rest In order to score SUS we have to follow these rules For odd numbered items subtract one from the user response For even numbered items subtract the user responses from 5 This scales all values from O to 4 with four being the most positive response Add up the converted responses for each user and multiply that total by 2 5 This converts the range of possible values from 0 to 100 instead of from 0 to 40 025i Focus group Korman defines the focus group as a meeting of a group of individuals selected by researchers to discuss and elaborate from personal experience a thematic or social fact that is under investigation It is a method for collecting qualitative information that arose in the early 30s when scientists become aware of the problems presented by a traditional interview in which the interviewer could influence the answer of the interviewed person Recently the group meetings are being widely used in evaluations of software and in many other fields because they provide wide information at low cost and in little time The secret of the focus group lies in participants can freely express their views and opinions on different aspects
94. in features of the game that appear in the part of game details or the access to the editing screen of all properties of the game Tagging Creadi Tagging Creadi C lt http creaditor argon097 server4 lt C http creaditor argon097 server4y g y Tagging Creaditor PP vewcame contact AA AA A ar x Y 4 y Taggling_AO_desktop N Saved games CityScrabble_AAM_Desktop CityScrabble_AO_desktop cityscrabble_gdon_mobile CityScrabble_NS_Mobile This is the game Taggling in Thessaloniki for learning about art CityScrabble_RL_Mobile CityScrabble_VG_Desktop Create Edit co Figure 29 Game list screen of TaggingCreaditor left games list right game details 72 Page IIANEIIIZTHMIO Design and development of a mobile editor for location based games Real world management screen Once we access to the creation or edition of the content of a created game the user will see this main screen Here the user can manage create modify features or remove all physical entities that will be part of the corresponding location based game i e the user can create physical objects of first second and third level of the entities hierarchy playspaces locations and elements in the intuitive terminology respectively This screen is divided into two main areas Navigation List area The user can navigate through this navigation list to see all the physical objects that have been included in
95. ing after creating a game 3 Enter virtual data Put the data of the themes topics and keys in the Topic Key screen 4 Create the relationships between the elements and the keys in the Easy way Linker screen Check that the relationships have been created properly The data you have to introduce can be found in the annexes CityScrabble Instructions for the desktop scenario and Taggling Instructions for the desktop scenario respectively SCENARIO 2 MOBILE You are a history teacher in a school of Patras and your students and you are going to the Technopolis Museum in Athens Athens and Museum of Contemporary Art in Thessaloniki next week The best way for your students to learn knowledge about it is playing CityScrabble with your own content Imagine that you are right now in the Technopolis Museum in Athens or in the Contemporary Art Museum in Thessaloniki with the purpose of creating content for these games with a tablet What you have to do then is to add content with the TaggingCreaditor editor at the same time as you go around the museum The steps to do so are as follows 1 Create a new game 2 Enter real data Put the data of the playspaces locations and elements in the Location Element screen the one appearing after creating a game 3 Enter virtual data Put the data of the themes topics and keys in the Topic Key screen 4 Create the relationships between the elements and the keys in the Easy way Linker scree
96. ing content for a game does not want to relate an element of the real world with a key through a score but through a semantic relationship With the first approach of setting up a score in the relationship the content creator would not be able to do what he wants Therefore we must find a solution to this problem which will be detailed hereinafter 3 4 4 Summary In the following table we can see a summary of the first abstraction model On the left part of the table we can see the abstractions we have to model and on the right part of the table a first approach of the functionalities the content editor should have 46 Page IC HATPON Design and development of a mobile editor for location based games Mr sss ABSTRACTION FUNCTIONALITIES THE EDITOR SHOULD HAVE Game New game Delete game Edit game Playspace New Playspace Delete Playspace Edit Playspace Location New Location Delete Location Edit Location Elements New Element Delete Element Edit Element Theme Add Theme Delete Theme Edit Theme Topic Add topic Delete topic Edit topic Key Add key Delete key Edit key 3 5 Design of the entities hierarchy final design Having reached this point we realize that the abstraction model that has been proposed is not the best solution since all the names chosen of the abstractions are too specific to the studied location based games and therefore are not general enough Examples of this are the abstractions topics and keys which are specific t
97. ion session of TaggingCreaditor including the preparations the description of the session and the obtained results Chapter 6 Final conclusions Chapter 7 References Annexes User guide and the evaluation session documents 23 Page Design and development of a mobile editor for location based games 2 TECHNOLOGY In this chapter will describe the technology have been used to carry out this project Firstly the programming languages used will be explained Afterwards will describe some of the frameworks have used for the development of the project such as ZURB Foundation MySQL Workbench or phpMyAdmin 24 Page Design and development of a mobile editor for location based games 2 1 Programming languages It is well known by now that there is no general agreement on the meaning of the term programming languages Hence it is necessary to specify a general definition A programming language is a formal language designed to express processes that can be executed by devices such as computers They can be used to create programs that control the physical and logical behavior of a machine to express algorithms precisely or as a mode of human communication It consists of a set of symbols and syntactic and semantic rules that define the structure and the meaning of its elements and expressions According to the classification criteria of computer programming languages three levels may be distinguished Mac
98. it the locations that are part of playspace if there is any and the option of adding a new one will appear Once the user chooses the option to add location creation screen of location appears In it the user will fill the fields name type and information and the location will be created eadi Tagging Creadi http creaditor argon097 server4y yz Q B SS lt Figure 5 Creating a new location 104 Page Design and development of a mobile editor for location based games Creating a new element To add a new element to an existing location the user firstly needs to choose from the list of objects the location to add the element the user wants to create By choosing it a list of elements that are part of the location if there is any and the option to add a new one appears Once the user chooses the option to add element the creation screen of element appears In it the user should fill in the name field choose a picture to identify the element fill in the information field place the item on the map and add a radio in case the user has decided to add this optional property After that the new element will have been created Tagging Creadi amp g Creac Tagging Creadi C lt http creaditor argon097 server4y Y7 amp http creaditor argon097 server4y YY N NS Find place KTEL Nomou Element image Choose file No file chosen L Achaias SA gt S y K TEA NOMOY ET Sidirodr
99. ith the mobile device camera and then upload them to the content editor at the same moment that is being in the museum 3 2 6 Different terminology support Each location based game has its own physical elements names its own keys small sentences names and so on For instance in MuseumScrabble the objects in the real world that are part of the game are called exhibits while the game is being played However in CityScrabble they are called locations or objects Therefore we must find a solution to this problem so that for example the content creator can choose the names of the physical elements he wants to use when creating or editing content 3 3 Comparison of location based games In this paragraph all the common features and the differences among the location based games presented in the Chapter 1 are detailed That is the games are MuseumsScrabble CityScrabble Benaki Museum Scrabble and Taggling The most important feature all the games have in common is the purpose of the game to achieve all the links connections between the physical objects exhibits locations objects and so on and the keys hints or digital objects in the example of Benaki Museum Scrabble All the physical objects belong to a location inside a playspace and the game can have one or more different topics chosen by the team when starting to play In turn a topic consists of the keys we mentioned before Every relationship has a score which can be 0 o
100. ities in the virtual world the same process for real world entities is followed and as was the case for the elements the application provides a faster way when removing keys given the user the option to delete keys from the object navigation list Tagging Creadi ri lt C lt http creaditor argon097 server4y jy Q B Add Topic 4 i 2 Theme Topic Key g history People 2 P Key blackmithModification Hint Small building with a roof and red pillars Key modified successfully co Figure 13 Editing a key as an example 111 Page Design and development of a mobile editor for location based games as V Linking Once you have created all necessary entities in both the real world and the virtual for a game you can use the linker to relate real world entities of third level with virtual world entities of third level i e the elements and keys The linker also provides an option to view all the created relationships The user can go to the linking screen through the navigation buttons located in the lower part of the screen Location Element Topic Key Easy way Linker Figure 14 Editing a key as an example The process when making a relationship consists of three simple steps 1 Choose the item you want to include in the relationship This element is selected in the navigation list of physical entities 2 Choose the key you want in the relationship This key is selected in
101. l environment to allow communication with the developed system Usually programmers tend to follow the model of the programmer to design the user interface which does not take into account the user s way of thinking or the user s software perspective The user interface of TaggingCreaditor has been designed in order to be as intuitive as possible and trying at all times taking into account the user s mindset and perspective of the computer screen or of a mobile device To do this we should be aware of the cognitive and perceptual abilities of individuals to adapt the application to them i e avoid the user having to use their short term memory As indicated in previous chapters of the document to design the user interface it must be considered that the application should run on both desktop and mobile For this reason in the first design was taken into account this requirement making a design for desktop computer that was easily adaptable to a tablet screen or a smaller mobile device Thus if the design of the user interface of the desktop is perfectly adaptable to the user interface of mobile device we will not have to make any changes 51 Page g IIANEIHXTHMIO A II ON Design and development of a mobile editor for location based games to files or to adapt the code to the mobile version However this is an ideal situation and therefore files for the user interface of the desktop version and files for the user interfac
102. laced near each artifact and on the other hand digital objects that can be text images or video which are part of the museum s collection but are not present in the museum The game is played in rounds between players or group of players competing with each other so that they can scan the exposed exhibits and use them through the game Each digital object can connect with some of the artifacts found in the museum s halls Therefore relationships are created between digital and physical objects which have as a result potential background stories to emerge Therefore the main aim of the players is to identify one of the physical artifacts which can be connected to the digital object that they have been given at each round and then to make the connection between those two and gain points The winner is the player who at the end of the game has managed to gain the most points In the following figure the main screens of the game are shown the first one is for the registration of a game the following screens appear during the gameplay The second one shows a digital object the third one a clue about the digital object and the last two screens appear when scanning the exhibits Figure 3 Main screens in Benaki Museum Scrabble game References 7 21 Page IIANEITIZTHMIO TP UNIVERSITY OF PATE ns iC HATPON Design and development of a mobile editor for location based games 1 3 4 Taggling Taggling w
103. lained another common scenario will be explained The user wants to create or modify content for an existing game To do that the user must choose the option Select game in the Welcome screen and the game list screen will appear In it the user can choose a game in the list and see the details of it in the detail box When the desired game is chosen the following step is to create or modify the content that has already been created To do it the user must click in the Create Edit content for this game button as it is showed in the Figure 19 After clicking it the user will see the real world management screen and the steps are exactly the same as the ones explained in the new game scenario 114 Page Of MANENIZTHMIO A IIATPON IA Mo Design and development of a mobile editor for location based games Before finishing the manual it has not been said that the application supports two languages English and Spanish Users can change it whenever they want in the top bar menu of all the screens of the game Tagging Creadi Tagging Creadi lt C http creaditor argon097 server4y C http creaditor argon097 server4y yY New Game Contact Saved games CityScrabble_AAM_Desktop CityScrabble_AO_desktop cityscrabble_gdon_mobile CityScrabble_NS_Mobile This is the game Taggling in Thessaloniki for learning about art CityScrabble_RL_Mobile CityScrabble_VG_Desktop Taggling_AO_desktop j See Modify
104. le are the museum mobile interactive games mobile applications that in addition to providing information about the exhibits support more advanced interactivity with them applying socio cultural theories of learning and providing visitors with tools to organize and control the supplied information The games in first example provided can be played in many diverse places and extend to long periods of time whereas in the second example the games are designed to event based It is worth highlighting that while the major goal of most of these games is fun and entertainment many times learning plays an essential role in the design of a location based application There are uncountable mobile location based games and of course plenty of locations in which they can be played All these applications need to create in one way or another virtual content for each of the locations in which the developers wish to play in addition to some method to label all physical elements that take part of the content of the game examples of these methods can be QR RFID codes The problem is that there is no generic tool or an easy way to create or edit content for those games but the content has to be fixed by the corresponding game developer based on location This makes us realize the importance of generic tools that are not connected to a specific application but a group of applications in this case games The best option to solve this problem is
105. ll model although it has not been strictly followed This model is the methodological approach that orders strictly the process steps for developing software in such a way that the beginning of each phase must wait for the completion of the previous phase Thus any design error detected in the testing phase necessarily leads to redesign and reprogram of the relevant code increasing development costs Among its advantages can say that it is an easy model to implement and understand that promotes an effective working methodology define before design design before coding 4 1 1 Phases and organization of the project The phases that were followed during the project are 1 Phase of initial study Study of the general aspects of location based games along with further study of several proposed games at the beginning trying to compare them looking for common features and differences 2 Phase of requirements analysis Study of the requirements that the application should meet 3 Design phase Starting with the design of entities that are the more abstract possible and ending with the design of the user interface 4 Programming phase This phase consists of several sub phases such as the programming a prototype user interface the programming of the functionalities and the programming of the final user interface 5 Testing and debugging phase The last days on the project have been spent in testing the application performing simulations o
106. location based games Layer hierarchy 0 Virtual Object theme Real Object playspace Virtual Object topic Real Object location Real Object Virtual element Object key Figure 11 Design of the entities hierarchy Inside the boxes of the figure general names of the entities are shown along with the indicative name that has been used during the course of the project and the design of the database This indicative name is shown in brackets and is the one will use from now on to refer to each entity so that for example when referring to third level virtual object will use the notation key and when referring to the first level real object the notation playspace will be used Returning to the design scheme and as indicated in the previous section it is important to realize that there is a real world entities located on the left side of Figure 11 which consists of all real entities such as the exhibits that are exposed in a museum to play the game MuseumScrabble In addition to the real world there is a virtual world entities located on the right side of Figure 11 which consists of all virtual entities such as the keys small sentences that are used to play CityScrabble in the center of a city The relationship between the real world and the virtual world is carried out between third level entities of both the real and the imaginary world respectively i e the relationship takes place between the
107. lowing to create content of any subject for whatever the game is and in any place of the world also would like to highlight that the editor can be improved in a lot of different ways for instance an interesting improvement could be the multi user support so that each user can create their own games without using the same database that other users 6 Page MANENMIZTHMIO TP ONIVERSITY OF PATE ns Design and development of a mobile editor for location based games Nepi nyn H mapovoa epyacia meplypadet to OXE LACU tnv av ntu n kat inv u onoinon tnc edapuoyns TaggingCreaditor yia kivnt c ouokeu To TaggingCreaditor nw arokad rttel kat TO vopa tou Eival Eva epyadelo yla tnv napaywyh kat ene epyaoia MEPLEXYOLEVOU yia CUVEPYATIKA xcpo euatoOnra nawyvi a WE KLWNTEC ouokeu c NWG yla Tapadetyua ta Tagging games nou ta puok avtikelueva avayvwpilovtal u ou THC o poongc QR n RFID etiketwv H edapuoyn avant y nke yia xp on oe otaBep umo oytor AMA KAL OE KLWNTEG OUOKEV C E qur tn SutAwuatiky epyacia Ba mapovuolaotel n e pappoy nou adopa otnv TLAPAYWYN kat ertefepyacia TLEPLEXOLEVOU yta KLVNTEG OUOKEU G Ot Kiwnt s texvoAoyies Stadpapatifouv CAO Eva kat onuavtik tepo POAO otn Tw pac ue artot deopa TIOAAES v ec LOEES va TIPOKUTITOUV AauB vovtac ur uUnv Ta TIAEOVEKTNMOTA aurov twv teyvooyiwv Ev tad pov elval to mapadetyua tuv OUVEPYATLKWV YWPO EVALGONTWV TALYVLSLWV ta oroia prropo
108. mented cultural space Department of ECE HCI Group Department of ESECE ICTE Group University of Patras Rio Patras Greece 4 Marco Antonio Munoz Alonso Design and development of a mobile city game CityScrabble Human Computer Interaction Group University of Patras Greece 5 http hci ece upatras gr museumscrabble Last access June 2014 6 http www cityscrabble gr Last access June 2014 7 http hci ece upatras gr bms index php id screenshots amp lang en Last access June 2014 8 Jean E Sammet Programming Languages History and Future IBM Corporation 9 http www inf unideb hu kmitt konvkmitt programming languages book xml pdf Last access June 2014 10 nton Rodr guez M amp P rez Ju rez M Tecnolog as para Aplicaciones Web 2013 2014 Programaci n en PHP E T S I de Telecomunicaci n Universidad de Valladolid December 2013 11 Grupo EIDOS Lenguaje HTML Versi n 1 0 0 2000 www lalibreriadigital com 12 nton Rodr guez M amp P rez Ju rez M Tecnolog as para Aplicaciones Web 2013 2014 JavaScript E T S l de Telecomunicaci n Universidad de Valladolid October 2013 13 http jquery com Last access June 2014 14 nton Rodr guez M amp P rez Ju rez M Tecnolog as para Aplicaciones Web 2013 2014 Cascading Style Sheets E T S l de Telecomunicaci n Universidad de Valladolid October 2013 15 nt
109. n Check that the relationships have been created properly The data you have to introduce can be found in the annexes CityScrabble Instructions for the mobile scenario and Taggling Instructions for the mobile scenario respectively 119 Page IC HATPON Design and development of a mobile editor for location based games WM sss QUESTIONS ABOUT THE DESKTOP APPLICATION 1 Strongly disagree 5 Strongly agree Regarding this questionnaire please remember that you play a role so that you should answer as if you are the teacher of the scenario described above QUESTION 1 21314 1 think that would like to use this system frequently 2 found the system unnecessarily complex 3 thought the system was easy to use 4 think that would need the support of a technical person to be able to use this system 5 found the various functions in this system were well integrated 6 thought there was too much inconsistency in this system 7 would imagine that most people would learn to use this system very quickly 8 found the system very cumbersome to use 9 felt very confident using the system 10 needed to learn a lot of things before could get going with this system 120 Page IC HATPON Design and development of a mobile editor for location based games M sss QUESTIONS ABOUT THE MOBILE APPLICATION 1 Strongly disagree
110. n and then will explain the case of editing and deleting with an example because it is applicable to all entities Tagging Creadi lt C lt http creaditor argon097 server4y Y7 Tagging Creaditor Me Mes newtheme Contact TAGGING CREADITOR B UU U Virtual Qbjects Keys included blackmith manager lt machinist w stoker VU 7 Showing 1 to 5 of 5 entries Previous 1 Next Add Topic hh Gh A Figure 9 Virtual world management screen and its creation buttons 107 Page Design and development of a mobile editor for location based games Creating a new theme To add a new theme the user has to go to the top bar menu of the virtual world entities management screen After selecting this option the user will see the creation screen of a theme In it as can be seen in Figure 10 the name field to create a new theme has to be filled or as a second option it is offered to the user to add an existing theme As was the case of playspaces if the user chooses to add an existing theme the second screen of Figure 10 will be seen where the user can choose either to add an existing or clone an existing one The difference is that adding an existing one by modifying features or adding objects to this theme this theme in the other games will be modified i e the same theme may be modified in whatever the game containing this theme while cloning an existing one means that you c
111. nd was Taggling 5 6 3 Scenario description The next step before the testers started to use TaggingCreaditor was the explanation of the scenario in which they had to work with the mobile application For CityScrabble participants imagined to be history teachers from a school of Patras and had the objective of creating content for Technopolis Museum in Athens so that their students could play CityScrabble with that content in a future tour The process was very similar for Taggling except that participants had to create content for the Contemporary Art Museum in Thessaloniki so that his students again could play Taggling with that content in a future tour In the mobile scenario both games participants had to imagine that they were in the museum itself so they had to create content with the tablet taking pictures of the items placed on the walls of the room prepared for this purpose 5 6 4 Demonstration of TaggingCreaditor use After explaining the scenario a demonstration through a tutorial video was showed in the projector In this video was explained how to work and use TaggingCreaditor in a tablet Filling the data fields of the new game Figure 39 Screenshot of the video tutorial showed during the evaluation 89 Page Design and development of a mobile editor for location based games 5 6 5 Action phase The next step was to get to work creating new content firstly to CityScrabble and secondly to Tag
112. ng could be solved By observing and taking notes of how the user behaved while creating content on the scenarios of the testing session could see some of the bugs or errors in the user interface that the application has Furthermore the SUS questionnaires will be really useful to analyze the usability of the system and on the other hand the focus group will help a lot taking the opinions of all the participants and evaluators These last two methods of getting information during the evaluation session will be detailed in the next two sections During the evaluation session was observed that the user expected behaviors of the application that did not happen For example when creating a key the message appeared that the key was successfully created but then the key was not on the list of 91 Page IIANEIIIZTHMIO TP UNIVERSITY OF PATE Ag d ILATPON Design and development of a mobile editor for location based games navigation of virtual objects until the page of the application was not refreshed This problem led the user to create the same key twice for example Another problem that most participants found was that they were lost when they had to search the buttons to add a new location element topic or key This happened because no one told them that in order to create a location for example they had to click on the playspace in which they wanted to add the location Following problems with the user interface the firs
113. ning and achieve a richer knowledge about all of them During the development phase of the project have employed the system infrastructure called WAMP which provides the following tools Windows as Operating System Apache as web server MySQL as database manager and PHP as programming language Among the most important advantages of WAMP it is ideal for use as a development server as well as being easy to install have used WAMP as a development tool since use Windows as my main Operating System so have been testing the web application on the localhost server from my computer and in the final phase have been testing the application in LAMP Linux Apache MySQL and PHP server Regarding the employed frameworks firstly chose ZURB Foundation as a working tool for all features and all the facilities it offers when developing web content In addition as mentioned above on the official website of ZURB Foundation we can find great quality documentation and a community forum that have helped me a great deal Secondly used MySQL Workbench C E 6 1 for the creation and database management because besides being a free version it offers very useful features that make the job much faster and more intuitive such as the visual way to design databases presented in the previous section Finally used apache server as the web server and phpMyAdmin to upload the sql files to the server database as explained in the previous sections
114. nt they have to interact with the mobile device for instance taking pictures of the real exhibits In addition for most of them the user interface of the mobile version was more intuitive although the desktop version was easier to create content because the typing process was faster One point mentioned by several of the testers was that at first they were a bit lost in the user interface i e they would have liked to have more guidance or explanations especially in the early times when the application was used The problem 95 Page IANEIIIETHMIO ILATPON eS Design and development of a mobile editor for location based games 4 of being lost at the beginning of the use could be solved by providing the user manual found in annex 1 On this point they also indicated that after accustomed to the use of the application the process of creating content was much faster and easier To conclude some possible improvements that a possible future version would include were discussed such as the mobile version got the current location of the mobile device automatically speech recognition or even develop a simpler interface 96 Page it ITATPON Design and development of a mobile editor for location based games ee 6 CONCLUSIONS The idea of developing this application arose from an existing tool that allowed the creation of content for the location based game called CityScrabble created by Ruben C sar Llorente From this ide
115. ntains all these topics Themes l Topics Keys Figure 10 First approach of the virtual world abstractions 45 Page MANENMIZTHMIO TP DNIVE E PATE yor AX LLATPON Design and development of a mobile editor for location based games 3 4 3 Relationship between the two worlds In every game if a player connects a key with the right physical object the team will add points to their score and on the other hand if the key is connected to a wrong tag the team will not get any points Therefore it is clear that the relationship between the two worlds is made by means of these two abstractions the elements and the keys We have to find a proper way to relate the keys and the elements One first approximation could be by means of scores as it is established in the next example Imagine a location based game with three elements and 3 keys with the relationships that are shown in the table below In this scenario if one player connects the element 2 with the key 3 100 points will be added to the score whereas if the same player connects the element 2 with the key 2 no points will be added to the score ELEMENT 1 ELEMENT 2 ELEMENT 3 KEY 1 0 points 0 points 100 points KEY 2 100 points 0 points 0 points KEY 3 0 points 100 points 0 points The problem with this way of linking the elements with keys is that it is not a very general way to establish a relationship it is not flexible For example imagine that a user who is creat
116. o the scrabble games With this problem the names of the hierarchy are not well suited to all games For example in MuseumScrabble instead of elements objects in the real world that are part of the game could be called exhibits since it is the word used while the game is being played However as another example in CityScrabble perhaps the content creator of this game wants to call the physical elements as locations or objects As a solution an entities hierarchy has been designed in which more general names are used being a more abstract and flexible model The design of entities hierarchy that is proposed for the development of the content creator editor after having studied all the common features of location based games see section 3 3 and after having chosen the abstractions see section 3 4 is the one that can be seen in Figure 11 In it you can already see the relationship between each of the entities except for the relationship between the two worlds which will be detailed during the database design One of the goals to be achieved with this solution is to solve the problem described in this point so that the editor user can choose the names of the entities in the hierarchy The great advantage is that the editor user during content creation does not have to learn or use a different terminology to that used in location based game he wants to create content 47 Page Design and development of a mobile editor for
117. ocus on the detailed description of the attributes that are included in the database of each design entities 62 Page Design and development of a mobile editor for location based games 4 2 1 Game attributes eame V idGame INT nameGame VARCHAR 255 2 version FLOAT descriptionGame VARCHAR 255 gt language VARCHAR 255 modality VARCHAR 255 gt image VARCHAR 255 deation DATETIME gt lastModification DATETIME gt realObject_h1 VARCHAR 255 gt realObject_h2 VARCHAR 255 gt realObject_h3 VARCHAR 255 gt virtualObject_h1 VARCHAR 255 gt virtualObject_h2 VARCHAR 255 gt virtual Object_h3 VARCHAR 255 gt radiusBiement VARCHAR 255 gt difficulty Topic VARCHAR 255 gt visibilityKey VARCHAR 255 gt hintKey VARCHAR 255 gt relations_type VARCHAR 255 gt E A A Figure 20 Game entity in the database MySQL Workbench 6 1 CE idGame Number INT used to identify each game It is chosen automatically by the database nameGame Character string VARCHAR 255 with the name of the game version Number FLOAT in which we can enter the version of the game We can have the same game with two different versions descriptionGame Character string VARCHAR 255 with the description of the game language Character string VARCHAR 255 indicating the language of the game Possible options English Greek or Spanish modality Character string VARC
118. omikos Stathmos Patras arpa Informations PASO Choose the Location of the Element on the map below Find place Map data 2014 Google Terms of Use 38 2466395 Achaias SA y X T EA NOMOY ANANE S Sidirodromikos Stathmos Patras E arpa 21 734574000000066 KTEL Nomou Plateis Olgas 4 Para S A sy Square 4 TIATP AA E pristiki aenalas SA TOYPIZTIKH AXAIAE A E Figure 6 Creating a new element 105 Page Design and development of a mobile editor for location based games Editing and deleting the real world entities To edit any of the major attributes of a real world entity what first the user has to do is to select the entity to modify from the list of objects The details of this entity appear then in the detail area and what the user needs to do is simply modify the desired values in the area in which the details are displayed and press the Save Changes button To delete any of the real world entities what first the user has to do is to select the entity to delete from the list of objects After this the user simply presses the image with the red cross of the area in which the details are shown and confirm you wish to delete the entity A more quickly way when removing elements is provided in the application the option is given to the user to delete elements from the list of objects so that the user doesn t have to select the element before Tagging Creadi l
119. on Rodr guez M amp P rez Ju rez M Tecnolog as para Aplicaciones Web 2013 2014 Ajax E T S Il de Telecomunicaci n Universidad de Valladolid October 2013 98 Page 8 IIANETIXTHMIO HU IIATPON Design and development of a mobile editor for location based games 16 http foundation zurb com Last access June 2014 17 http zurb com Last access June 2014 18 http www mysql com about 19 http www mysql com products workbench 20 https httpd apache org Last access June 2014 21 www apache org Last access June 2014 22 www phpmyadmin net Last access June 2014 23 J Brooke SUS A quick and dirty usability scale Usability evaluation in industry 1996 24 A Bangor PT Kortum JT Miller An empirical evaluation of the system usability scale Intl Journal of Human Computer 2008 25 JR Lewis J Sauro The factor structure of the system usability scale Human Centered Design 2009 9 Page Design and development of a mobile editor for location based games ANNEX 1 MOBILE USER MANUAL In this section will explain in detail how to work with the main functionalities of the mobile editor TaggingCreaditor During my explanations will employ the intuitive terminology of the entities hierarchy i e for the real world will use the terms playspace location and element while for the virtual world will use the terms theme topic and key The common
120. ople allows meaningful direct dialogue 5 4 SUS System Usability Scale The System Usability Scale SUS is a simple ten item scale giving a global view of subjective assessments of usability The System Usability Scale SUS was released into this word by John Brooke in 1986 It was originally created as a quick and dirty scale for administering after usability tests on systems like applications SUS is technology independent and has been made freely available for use in usability assessment and has been used for a variety of research projects and industrial evaluations for instance it has been tested on hardware consumer software websites cell phones and so on It has been proved to be a valuable evaluation tool being robust and reliable It correlates well with the subjective measures of usability 5 4 1 Operation The System Usability Scale is generally used after the respondent has had an opportunity to use the system being evaluated but before any discussion takes place SUS is a 10 item questionnaire with 5 response options It can be seen that the selected statements actually cover a variety of aspects of system usability such as the need for support training and complexity and thus have a high level of face validity for measuring usability of a system The 10 selected statements are shown in the following box 18 References 23 24 and 25 85 Page TIANHIIETHMIO PON S LO Design and develo
121. opy all the features and objects found in the theme and are copied to the game that is if the user changes something in the cloned theme it will not be changed in the origin theme Tagging Creadi amp g j Loading C 3 http creaditor argon097 server4y Yy Q RB lt http creaditor argon097 serverdy yy Q RB LAY V W 9 9 Ny We Vite ili an AA IIS AAA War y i r f A i NN y L me L 5 themel Copy N themel Copy ouarn also add existing Theme from other games bygf ssing thi tor History Copy Add existing Theme cinch fanaa history Copy History Copy History Copy NonUseful infa Copy Copy all the tags Copy Weird things Copy Pena aE sino Themes s orina them Selecting Themes will all Ae y ines ic Al changes in one of them will change in ji belonging g ininda y Ih me and its properties Topics and Keys will be t UL LISAS Figure 10 Creation a new theme or adding an existing one 108 Page Design and development of a mobile editor for location based games Creating a new topic To add a new topic to an existing theme the user firstly needs to choose from the list of objects the theme to add the topic to create By choosing it the topics that are part of the theme if any and the option of adding a new one will appear Once the user chooses the option to add topic the creation screen of new topic appears In it the user must fill in the name and information
122. or other sites of some importance It can also be played in closed spaces such as museums or any other relative large space In CityScrabble each player or team tries to locate locations or objects in space and connect them with keys small sentences In order to do that she has to go near them to trigger a gps proximity sensor or scan a QR tag When a location is identified it can be connected with any key Points are only awarded if the connection between key and the object is meaningful It is a competitive mutliplayer game It can be played by competing individuals or by teams of 2 3 players It should last a little more than 30 minutes depending on the size of the area The game consists of three screens the topic selection screen the association screen and the map screen 1 Topic selection screen CityScrabble When the game starts the player sees the topic selection screen Wma 0 with 9 topics and each contains 4 keys e Each topic icon has four flags signaling availability of its keys The orn Km keys take the color of the team which has used them in a Dra mam connection At the instance below Mae s color is purple and the player with the red color has already connected a key The player now has to look around in the game space playspace and try to locate real objects elements such as exhibits sculptures paintings that might be relevant to the chosen topic and the available keys The way to do
123. or location based games 15 Page g ILATPON Design and development of a mobile editor for location based games 1 INTRODUCTION In this first chapter l will take a brief look the main aspects of the project First of all will explain the motivation which led me to carry out this project and the need of a generic editor for location based games In the second point will present the main objectives and requirements that were established at the beginning of the project After that will go on describing the key aspects of the location based games along with a short explanation of each game which was taken into account for the design development and implementation of this project Finally will talk about the chapters of this thesis including a brief description of each one 16 Page ER IIANETIXTHMIO j ILIATPON AQ oom Design and development of a mobile editor for location based games LL Motivation In recent years there has been a proliferation in creating new mobile games in which the user s location is of great importance This is because the activity of the game in most of these cases evolves according to user location and events that make the player decide The applications included in this group of games are called location based Examples of such games are called urban games or street games multiplayer games are performed in the streets of the cities Another group of games that can serve as an examp
124. p youv kat va ENEEEPY OVTAL TO TLEPLEX MEVO TWV TLALYVLELWV touc XPNOLUOTTOLWVTAC uia kowr B on SedouEvwv Kata eutepov n EPAPLOYNH AUTH OXE LAOTNKE pe TO OKETITLKO NWG Ba unopei va xpnotponoujsi yra ijv Mapaywyn kat ermegepyacia tou TMepPLEXOM VOU EVOC pey dou apiOpoU Xxupo 7 Page IIANEITIIZTHMIO D UNIVERSITY OF PATE Ag ni ITATPON Design and development of a mobile editor for location based games evalo8nTWV TLALYVLSLWV KATL TOU KAVEL to cuykekpi vo epyoAeto va civar epyadelo yevik epappoyric Oa Oca va KAgiow tovilovtac tv xpnoui tnra mou uropei va EXEL va TETOLO EpyaAsio yevtkric edapuoyhs yia Ta Xopo euatoOnra matyvidla EMITP TTOVTAS tnv npuoupyia Kat ertegepyacia TepLleXOM VOU yUPW amo OTOLA NTTOTE BELATLKH EVOTNTA VLA OTOLO NTTOTE TMatyvidl kat OE OTOLA NTTOTE TEPLOXN TOU K OOU AUTO rra i etal Oa nea ertionc va toviow MWC TO ouykekpu vo epyadelo opel va PBedtiwBel pe rtoAAoUG ladopetikoUC TP NOUG NWG yta TAP elyua va uropel va umootnpifet ro o xp otec ot omoiot Ouws Sev Ba xpnoyorolo v kon B on Se ou vwv yla tnv Mapaywyn kat ere amp epyao ta tou TMEPLEXOM VOU TWV TLALYVLOLWV touc 8 Page GP HIANEMIETHMIO it HAT PON AA Design and development of a mobile editor for location based games RESE A En el presente proyecto propongo describir el dise o desarrollo e implementaci n de la aplicaci n m vil TaggingCreaditor TaggingCreaditor como su nombre sugi
125. perties We do not need extra properties Block Real Objects Location Element Playspace Contemporary Art Museum Kind Museum Information Contemporary Art Museum in Thessaloniki Location Museum Rooms Type Indoor Information The elements are located in the different rooms of the museum Now go around the museum to look for the eight elements located in the Museums rooms location When you find an element you will have to enter it in the application taking into account that you will have to take a photo of the element with the tablet horizontally IMPORTANT Take into account that this game does not use location in maps That is when you are introducing an element in the application you should leave the default value of the location 126 Page Design and development of a mobile editor for location based games Virtual Objects Topic Tag Theme Art Topic 1 title Contemporary Art image No image description Contemporary art is art produced at the present period in time Info key Music Sculpture Info key Kinetic Art Info key Art and Science Info key Chord Info key Sound Box Info key Invisible Energy Relationships with Element 2 Info key Sculpture crease Info key Theatricality Info key Presence Info key Absence Info key Loneliness Info key Toughness Relationships
126. pment of a mobile editor for location based games 1 I think that would like to use this system frequently 2 found the system unnecessarily complex 3 thought the system was easy to use 4 think that would need the support of a technical person to be able to use this system 5 found the various functions in this system were well integrated 6 thought there was too much inconsistency in this system 7 would imagine that most people would learn to use this system very quickly 8 found the system very cumbersome to use 9 felt very confident using the system 10 needed to learn a lot of things before could get going with this system The SUS uses the following response format Strongly Strongly disagree agree l 2 3 4 5 Figure 38 System Usability Scale response format An important rule to be met is that all items should be checked If respondents feel that they cannot respond to a particular item they should mark the center point of the scale 5 4 2 Scoring and interpreting SUS The SUS scale is a Likert style scale and its final result is a single value representing a composite measure of the overall usability of the system under study That is that at the end of processing the data we have a unique value that can be in 86 Page QA IIANETIIETHMIO Design and development of a mobile editor for location based games the range between O and 100 This is what allows us to eas
127. r different of 0 Usually in the games there is only one right relationship although it can be more than one 41 Page MANENMIZTHMIO p nis Design and development of a mobile editor for location based games The four games have in their home screens a topic selection In MuseumScrabble and CityScrabble is the player who has to choose whenever the theme which is going to play However in Benaki Museum Scrabble the theme is preset and changes each round On the other hand in Taggling we cannot say that there is a topic because all keys seem to belong to the same topic Once the topic is selected all the apps show Information about the topic Clues keys to guess the relationship 3 Button to link them or action buttons to interact with the keys and real objects 4 Description or relevant information about the QR code scanned n some of them you can imagine the progress of the other teams because in MuseumScrabble and in CityScrabble you can see which relationships have been done by the other teams and in Benaki Museum Scrabble when a round finishes it means that another team have completed all the relationships On the other hand in Taggling the player does not know what the score of the rest of the teams is CityScrabble and Benaki Museum Scrabble have an intro screen in order to select the session or the kind of game They also have in every activity a help button It also has to be taken into account in the design
128. ral MuseumsScrabble CityScrabble BMS Taggling terminology terminology Real object Museum Space Museum Museum Playspace J level 1 Squares Rooms Rooms Real object Rooms floors Location street floors floors level 2 Exhibit an or AXIS Exhibit Element Real object object archifact level 3 Virtual Theme object level 1 Virtual Topic Theme Topic object level 2 Virtual Digital Hint Key objet Tag Key a level 3 4 Abstractions the first approach Once it is known all the common features and differences of the given location based games now we can move on to design the model that defines abstractions which should not be too much attached to the specific games that is they must be as general as possible First of all if we are going to design an editor to create content for location based applications we have the abstraction Game so that the user of the editor can create a new game In the database of the editor the user could have more than one created game At this point it is really important to distinguish between the entities that belong to the physical world and exist in the reality and the entities that belong to a virtual world and exist in the mobile phone being content of the game Now we will describe the abstractions in both worlds and the relationship between them 43 Page Design and development of a mobile editor for location based games a ee
129. rated Development Environments IDE with graphical user interfaces to write programs Such environments contain a text editor compiler maybe interpreter linkage editor loader run time system and debugger Therefore and as a conclusion the choice of a programming language depends on your knowledge of the language the computer where the application will run on and scope of the application you are building As a general rule the small applications are created using a single language and it is common to deploy large applications using multiple languages 2 1 1 Php PHP PHP Hypertext preprocessor is an interpreted programming language whose commands are executed on the server and allow the creation of dynamic HTML documents Its syntax is similar to other languages such as C Perl Java or JavaScript References 10 26 Page IIANEITIIZTHMIO TP DNIVERSITY OF PATER An i ux Design and development of a mobile editor for location based games PHP was designed by Rasmus Lerdorf in 1994 with the desire of creating a counter to determine the number of visits he received your online CV However over time it has been adopted by other developers who have transformed and become PHP in the tool is today PHP is an open source product which means you can access the code use it modify it and distribute it for free This is undoubtedly one of the main advantages of PHP since the community of users developing enhancem
130. s of very limited use This is because the user is unable to communicate as fast as they think and act unless a specific problem arises which slows them down It is at these times when this method really shines as it allows the observer to correlate the actions and statements of the participant This protocol may be used in two different scenarios The observer specifies a definite task to be accomplished by the subject This allows the observer to concentrate on a specific task they are interested in Open ended no task is specified and the user is free to choose their own task Allows the observer to concentrate on naturally occurring problems In the evaluation session of TaggingCreaditor we decided to choose the first scenario because we were interested in how the user creates content for location based games 84 Page Design and development of a mobile editor for location based games 5 3 1 Advantages of Think Aloud Protocol The main advantages of this method are Rapid high quality qualitative user feedback as compared with questionnaires Data is available from a broad range of sources such as Direct observation of what the subject is doing and hearing what the subject wants or is trying to do f the subject gets into difficulties the observer has the chance to clarify the situation High degree of flexibility the experiment may easily be steered by the observer The presence of two pe
131. synchronous JavaScript and XML is not a new programming language but a new way of using existing tools It was popularized by Google in 2005 and its main goal and advantage is to allow the exchange of small amounts of data between client and server in order to update asynchronously parts of a web page without having to recharge it completely In a classic web page that AJAX is not used it would be necessary to refresh the page completely if the content was modified Thus AJAX allows web pages more dynamic and provides a faster experience when the user is browsing Ajax is used in the development of the project in order to send forms to the server and receive the answer With this we can change the database content without the need to refresh the page References 18 and 19 1 References 15 30 Page Design and development of a mobile editor for location based games Zu ZURB Foundation ZURB Foundation is a free framework which is used in order to create web based software such as websites and web applications whose main goal is to develop code faster and better It uses HTML CSS Sass and JavaScript in its templates to develop the applications and it provides templates for typography forms buttons navigation and other interface components in addition to optional JavaScript extensions With regard to ZURB the makers of Foundation it is close knit team of product designers who help companies design and build be
132. t C lt http creaditor argon097 server4y YY Playspace tH Technopolis Name Information TechnopolisAthens Industrial museum in of Athens It is situated in the city s former gasworks WEE Ar 5 factory for the production of industrial Kinds gas which were founded in 1857 VT Museum C Save Changes e Playspace modified successfully OK Location Element Topic Key Easy way Linker 2 20 PM Figure 7 Editing a playspace to show an example al 2 20 PM 106 Page IIANEIIIZTHMIO ESSA Design and development of a mobile editor for location based games IV Management of the virtual world entities The following step after creating the real objects of the game is to create the virtual objects that will be part of the game The user will be able to do this in the virtual world entities management screen To switch to this screen from the virtual world entities management screen the user must click in the navigation buttons Topic Key located in the lower part of the user interface as Figure 8 shows Location Element Topic Key Easy way Linker Figure 8 Navigation button of TaggigCreaditor When managing the virtual world entities we have three options for each create entity edit entity or delete entity To manage virtual world entities we will have to do on the screen called virtual world management screen shown above We will be seeing each of the cases of creatio
133. t testers usually say that the functionalities in the mobile version are better integrated than in the desktop version To conclude with this section it is really interesting to know which the SUS scores are for both the mobile and the desktop version The way to calculate it is following the rules that were established in the SUS section for odd numbered items substract one from the response for even numbered items substract the user responses from 5 and finally add up the converted responses for each user and multiply that total by 2 5 have used the average scores calculated during the study of the results The results are the following SUS SCORE MOBILE VERSION SUS SCORE DESKTOP VERSION 75 28 78 128 This confirms what have said before that practically there are no significant differences between the two versions 5 7 3 Analysis of the focus group The general opinion of the people was that the application was of interesting use and they valued very positively that the same application TaggingCreaditor could create content for multiple games in their case for MuseumScrabble and Taggling During the focus group meeting some small bugs and interface problems were discussed With a future update they can be easily solved When participants were asked about the differences between the mobile version and desktop version all of them found much more interesting useful and fun the mobile version because when creating conte
134. t time they had to switch screens all had problems in the mobile version they did not know how to do it because the navigation buttons are located in the lower part of the screen These problems can be solved with the mobile user manual included in Annex 1 5 7 2 Analysis of SUS questionnaires Firstly will focus on my part of the work the study of the assessment to the mobile version of the application To make a synthesized analysis of the questionnaires it is best to work with the average score of participants surveyed in each of the statements to study for the mobile application In the following table we can see the resulting average rating of the participants for the mobile version In the left column are represented the ten statements that formed the questionnaire and the right column the mean scores of each statement on a Likert scale of 1 to 5 defined STATEMENT AVERAGE 3 88 1 444444444 3 777777778 1 777777778 4 555555556 2 111111111 3 666666667 2 777777778 4 1 666666667 O o oU P Q N P m o More visually see these scores in a bar graph 92 Page Design and development of a mobile editor for location based games Average rating mobile Figure 42 Graph showing the average rating of the SUS questionnaire for the mobile version To comment the graph in a general way will analyze the ratings that are more interesting As we can see people have given top marks to the fifth sta
135. te number of people In this case we got contact with nine people from different countries the majority of them Erasmus in Patras and all of them university students The next step is to know what the assessment session consisted of as well creating a scenario in which participants can work In our case the involved people were asked to complete several tasks for which they had to imagine they were school teachers in Patras For the mobile version the task was to create content simulating the tester was in a museum and had to create content in the museum Therefore the preparation of a room where there were replicas of the real museum exhibits hanging on the wall was required These replicas were pictures of the real exhibits along with the respective descriptions Therefore we also needed to prepare the replicas of the museums that the participants needed to create content The chosen museums were Technopolis Museum in Athens and Museum of Contemporary Art in Thessaloniki When carrying out an assessment it is important to ensure that all participants have the same information before starting to create content with the application To do this we decided to create a document that will contain all the information that participants needed to know together with the relevant initial explanations also decided to record a tutorial video in order to show it in the room The purpose of this video was the participants understand how to use Tagging
136. te them modify them or delete them As was the case in the screen of creation edition of physical entities this screen is divided into two main areas Navigation List area The user can navigate through this navigation list to see all the virtual objects that have been included in the game content Entity Details area Each time the user selects a virtual entity in the navigation list this detail area shows the assigned content of the main features of the virtual entity selected Tagging Creadi Tagging Creadi lt C lt http creaditor argon097 server4y wy C amp http creaditor argon097 server4y Y Q B Add Topic Tagging Creaditor Es New Theme Contact P b TAGGING CREADITOR EE vA d bd i Theme Topic Key MY N history People 2 T d Small building with a roof and red pillars blackmith Keys included Add key Save Changes blackmith f machinist 1 manager Relationships stoker N Element S 2 blacksmith s workshop Showing 1 to 5 of 5 entries Previous 1 Next h Add Topic T Figure 31 Virtual world management screen left navigation list right entity details boxes A 74 Page IIANEIIIZTHMIO II ON Design and development of a mobile editor for location based games as Easy way linker As has been explained throughout the paper the main purpose of mobile location based games is to relate the existing ph
137. tement so it could be said that in general participants have found that all the functionalities of the application were properly developed Followed by this it is noteworthy that the second highest score corresponds to ninth statement i e individuals felt very confident using the system The aspect that has had the lowest score was the second statement individuals did not found the system unnecessarily complex which turns it into something positive the system showed no unnecessary complexity Moreover respondents said they do not need to learn many things before using the system which could be translated as something positive because more people will be able to access the mobile editor believe that one possible way of enriching the study is to compare the scores corresponding to the desktop version and the mobile version and thus make a small approach on what differences the users found between the two versions The following table shows the average scores of individuals to the statements in both the mobile and the desktop version It should be mentioned that one of the participants did not answer the survey corresponding to desktop so the mean scores of this version is divided by eight while in the mobile version is divided by nine 93 Page Design and development of a mobile editor for location based games STATEMENT MOBILE AVERAGE DESKTOP AVERAGE 1 3 88 4 2 1 444444444 1 5 3 3 777777778 4 375 4 1 77777777
138. the element on the application map imageElement Character string VARCHAR 255 with the path of the element image stored on the server This picture could be a picture of the element radius Character string VARCHAR 255 which indicates which is the radius taken by the element in the location map As explained formerly this attribute is optional and the reason for its existence in the database is that it is necessary for the content creation for the CityScrabble game since the physical elements must designate the radius is required on the location map If the content creator did not include this feature previously to the game that the element belongs the user will not have the option to enter a value for this attribute 67 Page Design and development of a mobile editor for location based games 4 2 3 Attributes of the virtual world entities Theme gt name Theme VARCHAR 255 gt w Figure 24 Theme entity in the database MySQL Workbench 6 1 CE idTheme Number INT that identifies each theme introduced in the application nameTheme Character string VARCHAR 255 with the name of the theme Topic idTopic INT name Topic VARCHAR 255 infoTopic VARCHAR 255 difficulty VARCHAR 255 image Topic VARCHAR 255 J y Figure 25 Topic entity in the database MySQL Workbench 6 1 CE idTopic Number INT that identifies each topic introduced in the application nameTopic Character string
139. ts superior speed reliability and ease of use MySQL has become the preferred choice for the main companies in the market because it eliminates the major problems associated with downtime maintenance and administration for modern online applications MySQL is a key part of LAMP Linux Apache MySQL PHP Perl Python the fast growing open source enterprise software stack More and more companies are using LAMP as an alternative to expensive proprietary software stacks because of its lower cost and freedom from platform lock in 2 3 2 Features Design MySQL Workbench enables a DBA developer or data architect to visually design model generate and manage databases It includes everything a data modeler References 18 and 19 33 Page Design and development of a mobile editor for location based games needs for creating complex ER Entity Relationship models forward and reverse engineering and also delivers key features for performing difficult change management and documentation tasks that normally require a lot of time and effort Develop MySQL Workbench delivers visual tools for creating executing and optimizing SQL queries The SQL Editor provides color syntax highlighting auto complete and execution history of SQL The Database Connections Panel enables developers to easily manage database connections The Object Browser provides instant access to database schema and objects Administer MySQL Workben
140. tter websites services and online products I chose ZURB Foundation because all the facilities and all the support that provides in its official website and because it has really useful classes that make the work much easier 2 2 1 Alittle backstory of Foundation Foundation had its secret origins in 2008 when the designers of ZURB though that they needed a framework that allowed them to prototype quickly Therefore they decided to take all the global CSS jQuery plugins common elements and best practices with the goal of providing a framework that allows programmers build better designed future friendly sites The result was the first version of Foundation which was released in October 2011 They also realized that mobile was becoming more and more popular and important so that they thought they needed a more functional and fluid tool to work on different screens According to this in June 2012 they released a major update of Foundation Foundation 3 0 that had the advantage to be responsive being the first open source framework to be responsive As they also thought that being the fastest way to responsively prototype and build for any device was not enough throughout the time ZURB released new updates with improvements and new facilities For instance Foundation was the first semantic framework and the first to be Mobile First In November 2013 ZURB released the last update of the framework Foundation 5 0 Nowadays ZU
141. tware on potentially thousands of users Among the advantages of a web based application would like to highlight that to work in the web application a person needs only a computer with a web browser and internet connection Moreover web applications do not need prior knowledge and a web application has full availability in terms of time and place people can work on it anytime and anywhere in the world whenever they have internet access The application has been developed as a web based application because of the previous advantages that this presents and because of the following reasons Firstly the editor could be used in all the different Operating Systems that have installed a browser In addition to this being a web based application allows a lot of users to work in parallel and create content in the same database For instance two teachers can agree to create content at the same time in the city center of Patras distributing several locations per teacher 3 2 3 Centralized database A centralized database is a database stored entirely in a single physical location i e it is a storage system that runs on a single computer system without interacting with any other computer in order to keep the data The content editor should have a centralized database on the server where the content created by the user will be collected The content may include descriptions images data This requirement is a consequence of developing the applic
142. us 1 Next A Step 3 Choose the values of the relationship blacksmith s workshop Relation created successfully blackmith Strength 0 100 100 ss Create Relationship PTE ON EEEREN Figure 17 Step 1 of the creation of a relationship enter attributes and finish 113 Page OP TIANEMIETHMIO A ILIATPON N i When the user has finished the creation of relationships it is possible to check if all the relationships were created properly The user can do this by clicking the button Show Edit all relationship located in the lower part of the linking screen Figure 17 Design and development of a mobile editor for location based games Tagging Creadi Tagging Creadi C lt http creaditor argon097 server4y YY C lt http creaditor argon097 serveray YY machinist E y C Cu f x stoker Key Strenght Type Showing 1 to 4 of 4 entries i i Previous 1 Next y M j blacksmith s workshop y blackmith el Create Relationship L all relationships NS N ae manager 5 ffacksmith s workshop blackmith 100 Machine works carpenter s workshop machinist 5 5 central courtyard stoker XK Delete all Relationships TITIES M 28 A 04 OR CEE Saving screenshot Figure 18 The user can check all the created VI Create content for an existing game Once the common scenario has been exp
143. vel while for the virtual world Theme first level Topic second level and Key third level These fields are really useful and give to the editor a great flexibility since the content editor user will be able to choose the names of the entities in the hierarchy so that for example if someone wants to create content for CityScrabble the real object of third level would be objects whereas if someone wants to create content for MuseumScrabble the real object of the third level would be exhibits Plugging properties block area Some types of games need some extra properties in their content in order to work properly In this area the user can select the additional properties that the user wishes in order to add them to the later creation of content Among the optional properties that can be added radius for the element entity difficulty for the topic entity and finally visibility hint and type for the key entity All of them have been explained in the design of the database Tagging Creadi lt C http creaditor argon097 server4y fz ditor_argon097 server Hierarchy Object s Names Plugging Properties Block Element Descriptions Modality End of game Plugging Properties Block Element Radius Figure 2 New game consists of three blocks main properties hierarchy objects names and plugin properties block 101 Page Design and development of a mobile editor for location base
144. who were responsible for evaluating the TaggingCreaditor tool In addition to the participants researchers that we have collaborated in the development of the application along with four researchers who helped under our guidance were in the assessment session Participants created content in both the mobile version and the desktop version for two games that have been used to create the design of the application TaggingCreaditor CityScrabble and Taggling will focus on explaining the assessment and the results of the mobile version The main tools that were used during the evaluation session were the Think Aloud Protocol a SUS System Usability Scale questionnaire and a moderated discussion between the testers and the organizers at the end of the session All these tools and methods which will be treated in more detail later are especially useful for collecting information HU ll I Figure 37 Photo taken during the assessment session 81 Page ER IIANETIIETHMIO j ILATPON AQ oom Design and development of a mobile editor for location based games 5 2 Before the evaluation Before explaining how the TaggingCreaditor assessment was developed it should be detailed how the session was prepared Therefore in this section we will see the preparations for the session methods of collecting information material and documents necessary and so on The point we should start to make a good assessment is to have an appropria
145. ysical entities of third level i e elements with existing virtual entities of third level i e the keys properly Well the main mission this screen achieves is to create relationships between the physical and virtual entities of third level The screen consists of three simple areas indicating three easy steps that the user has to follow Navigation list of physical entities This is the first step the user has to carry out in order to create a relationship and the purpose is to choose a real object in the navigation list provided Navigation list of virtual entities This is the second step the user has to carry out in order to create a relationship and the purpose is to choose a virtual object in the navigation list provided Creator box of relationships After choosing both physical and virtual objects in this box the user will be able to check if the objects were chosen properly and to add the properties of the relationship such as the strength Tagging Creadi e c Tagging Creadi C lt http creaditor argon097 server4y Q C http creaditor argon097 server4y http creaditor argon097 Tagging Creaditor Maen Mo Step 2 Choose one virtual object TAGGING CREADITOR aw Showing 1 to 4 of 4 entries f Yos a G j A Previou 1 Next w Step 1 Choose one real object ay y M J P eys incl blackmith N A j Elements included

Design and development of a mobile editor for location

Contents

Download Pdf Manuals

Related Search

Related Contents