Deliverable 3.2 FLIP2G Learning Environment
Transcript of Deliverable 3.2 FLIP2G Learning Environment
This project has been funded with the support of the Erasmus+ programme of the European Union © Copyright by the FLIP2G Consortium
.
Deliverable 3.2
FLIP2G Learning Environment
Author(s): Lena Werthmann (Nurogames)
Editor(s): Nurogames
Responsible Organisation: Nurogames
Version-Status: V1 Final
Submission date: 07/07/2020
Dissemination level: PU
D3.2 FLIP2G Learning Environment
Page 2 of 59
Deliverable factsheet Project Number: 601190-EPP-1-2018-1-DK-EPPKA2-KA
Project Acronym: FLIP2G
Project Title: Enhancing education and training through data-driven
adaptable games in flipped classrooms (FLIP2G)
Title of Deliverable: D3.2 – FLIP2G Learning Environment
Work package: WP3 – Course environment design and learning analytics
Due date according to contract: 30/06/2020
Editor(s): Nurogames
Contributor(s): All Partners
Reviewer(s): Roberto Lopez (Artelnics)
Approved by: All Partners
Abstract: This report documents the work done towards the FLIP2G
Learning Environment, as described in T3.2. It contains work
completed in M13 to M18, namely testing, development of the
software, bug removal, adaption in the user experience and in
arts, UI and aesthetics.
Keyword List: Serious Games, Gamification, Game based learning, Training and
Education
D3.2 FLIP2G Learning Environment
Page 3 of 59
Consortium Role Name Short Name Country
1. Coordinator, PBL Aalborg University AAU Denmark
2. Games developer Nurogames GmbH Nurogames Germany
3. PBL, academic partner University of Macedonia UOM Greece
4. Data analytics ARTIFICIAL INTELLIGENCE TECHNIQUES, SL Artelnics Spain
5. Academic partner Northumbria University Northumbria UK
6. Flipped classrooms EKPAIDEFTIRIA E. MANTOULIDI S.A. Mantoulides Greece
7. Secondary education Revheim skole, Stavanger Kommune Revheim Norway
D3.2 FLIP2G Learning Environment
Page 4 of 59
Revision History
Version Date Revised by Reason
V0.1 03/06/20 Lena Werthmann ToC
V0.2 09/06/20 Lena Werthmann Text body updates
V0.3 23/06/20 Lena Werthmann Text body updates
V0.4 30/06/20 Lena Werthmann Addition of partner suggestions
V1 07/07/20 Lena Werthmann Finalization
Statement of originality: This deliverable contains original unpublished work except where clearly indicated otherwise. Acknowledgement of previously published material and of the work of others has been made through appropriate citation, quotation or both.
Disclaimer This project has been funded with support from the European Commission. This deliverable reflects the views only of the author, and the Commission cannot be held responsible for any use which may be made of the information contained therein.
D3.2 FLIP2G Learning Environment
Page 5 of 59
Table of Contents
DELIVERABLE FACTSHEET ............................................................................................................. 2
CONSORTIUM .............................................................................................................................. 3
TABLE OF CONTENTS .................................................................................................................... 5
LIST OF ABBREVIATIONS ............................................................................................................... 7
LIST OF FIGURES ........................................................................................................................... 8
EXECUTIVE SUMMARY ............................................................................................................... 10
1 INTRODUCTION .................................................................................................................. 11
1.1 SUMMARY .......................................................................................................................................... 11 1.2 AUDIENCE .......................................................................................................................................... 11 1.3 STRUCTURE ......................................................................................................................................... 11
2 GAME DESIGN .................................................................................................................... 12
2.1 PREPARATION FOR GAME DESIGN ............................................................................................................ 12 2.1.1 Target Group Survey .................................................................................................................... 12 2.1.2 Timing and proposed usage of the Game..................................................................................... 13 2.1.3 Learning activities used by the partners ....................................................................................... 13 2.2.4 Benefits of Gamification .................................................................................................................. 14 2.2.5 Integration of the FLIP2G educational model ................................................................................... 15
2.2 GAMIFICATION REPORT ......................................................................................................................... 16 2.2.1 Content of the Report .................................................................................................................. 16
2.2.1.1 Target Group ............................................................................................................................................... 16 2.2.1.2 Narrative ..................................................................................................................................................... 17 2.2.1.3 Interfaces ..................................................................................................................................................... 17 2.2.1.4 Game Designs ............................................................................................................................................. 17
Number Quiz ............................................................................................................................................................. 18 Multiple Choice Quiz ................................................................................................................................................ 18 Multiple Response Quiz ............................................................................................................................................ 19 Reading Comprehension / Analysis .......................................................................................................................... 19 Algebra ....................................................................................................................................................................... 21 True/False Statements ............................................................................................................................................... 22 Crossword Puzzle ...................................................................................................................................................... 22 Other Content............................................................................................................................................................. 23
2.2.1.5 Audiovisuality............................................................................................................................................. 24 2.2.2 Decision of development priority ................................................................................................. 24
2.3 QUIZ GAME ........................................................................................................................................ 25 2.3.1 Core Game .............................................................................................................................. 26
2.3.1.1 Scoring ........................................................................................................................................................ 26 2.4 TEAMWORK GAME ............................................................................................................................... 26
3.2.1. Core Game .............................................................................................................................. 28 3.2.1.1 Scoring ................................................................................................................................................................ 28
D3.2 FLIP2G Learning Environment
Page 6 of 59
3 WEBTOOL FOR TEACHERS ................................................................................................... 29
3.1 UI / UX DESIGN .................................................................................................................................. 30 3.2 FUNCTIONALITIES ................................................................................................................................. 32
3.2.1 Dashboard ................................................................................................................................... 32 3.2.2 Courses Page ............................................................................................................................... 33 3.2.3 Quiz Page .................................................................................................................................... 34 3.2.4 Questions .................................................................................................................................... 35 3.2.5 Account Management ................................................................................................................. 36 3.2.6 Student Tags ............................................................................................................................... 37 3.2.7 Course Material ............................................................................................................................... 38
4 USE CASE: TUTORIAL ON COURSE CREATION ....................................................................... 39
4.1 CREATION OF STUDENT ACCOUNTS........................................................................................................... 39 4.2 CREATION OF QUIZ TEMPLATES ............................................................................................................... 40
4.2.1 Create Questions ......................................................................................................................... 40 4.2.2 Upload Course Material ............................................................................................................... 42 4.2.3 Create Quiz Template .................................................................................................................. 42
4.3 CREATION OF A COURSE ......................................................................................................................... 43 4.3.1 Add Students ............................................................................................................................... 44 4.3.2 Add Sessions ................................................................................................................................ 45 4.3.3 Add Quizzes ..................................................................................................................................... 46
4.4 PLAYING THROUGH THE GAME ................................................................................................................. 47 4.4.1 Play though Quiz Game ................................................................................................................... 48
Read Course Material ..................................................................................................................................................... 49 Finishing the Quiz .......................................................................................................................................................... 50
4.4.2 Play through Teamwork Game ........................................................................................................ 50
5 FULFILMENT OF REQUIREMENTS ......................................................................................... 53
5.1 TEACHER REQUIREMENTS ....................................................................................................................... 53 5.2 STUDENT REQUIREMENTS ...................................................................................................................... 55 5.3 TECHNICAL REQUIREMENTS .................................................................................................................... 55
6 TECHNICAL BACKGROUND AND HARDWARE REQUIREMENTS .............................................. 57
6.1 TECHNICAL SPECIFICATIONS OF THE GAME .................................................................................................. 57 6.2 TECHNICAL SPECIFICATIONS OF THE TEACHER TOOL ....................................................................................... 57 6.3 BACKEND ........................................................................................................................................... 57
7 CONCLUSION ...................................................................................................................... 59
D3.2 FLIP2G Learning Environment
Page 7 of 59
List of Abbreviations
The following table presents the acronyms used in the deliverable in alphabetical order.
Abbreviation Description
UI User Interface
UX User Experience
Pc Personal Computer
FC Flipped Classroom
LA Learning Analytics
PBL Problem-based learning
VLE Virtual Learning Environment
LMS Learning Management System
D3.2 FLIP2G Learning Environment
Page 8 of 59
List of Figures
FIGURE 1 - INITIAL STUDENT INTERFACE DESIGN .............................................................................................. 17 FIGURE 2 - INITIAL DESIGN FOR THE NUMBER QUIZ............................................................................................ 18 FIGURE 3 - INITIAL DESIGN FOR THE MULTIPLE CHOICE QUIZ ............................................................................ 18 FIGURE 4 - INITIAL DESIGN FOR THE MULTIPLE RESPONSE QUIZ ........................................................................ 19 FIGURE 5 - TIMELINE FOR THE READING ANALYSIS GAME .................................................................................. 20 FIGURE 6 - GAMEPLAY LOOP FOR TRUE/FALSE GAME........................................................................................ 22 FIGURE 7 - THE FIRST VISUAL DESIGN FOR THE GAME ......................................................................................... 24 FIGURE 8 - SCREENSHOT OF STUDENT QUIZ ....................................................................................................... 25 FIGURE 9 - VIEW OF PLAYER 1 SCREEN IN THE MULTIPLAYER GAME .................................................................. 27 FIGURE 10 - VIEW OF PLAYER 2 SCREEN IN THE MULTIPLAYER GAME ................................................................. 27 FIGURE 11 - DATA MODEL FOR FLIP2G ............................................................................................................. 29 FIGURE 12 - WIREFRAMES FOR TEACHER TOOL .................................................................................................. 31 FIGURE 13 - DASHBOARD IN THE TEACHER TOOL ............................................................................................... 32 FIGURE 14 - FLIP2G TEACHER INTERFACE - COURSE MENU ............................................................................... 33 FIGURE 15 - EDIT A COURSE IN THE TEACHER TOOL ........................................................................................... 34 FIGURE 16 - QUIZ PAGE IN THE TEACHER TOOL .................................................................................................. 34 FIGURE 17 - ADD NEW QUESTIONS TO THE QUIZ ................................................................................................. 35 FIGURE 18 - QUESTION DATABASE .................................................................................................................... 35 FIGURE 19 - TEACHER ACCOUNT ....................................................................................................................... 36 FIGURE 20 - STUDENT ACCOUNTS...................................................................................................................... 36 FIGURE 21 - STUDENT TAGS .............................................................................................................................. 37 FIGURE 22 - COURSE MATERIAL UPLOAD ........................................................................................................... 38 FIGURE 23 - STUDENT FORM.............................................................................................................................. 39 FIGURE 24 - FILLED OUT STUDENT FORM ........................................................................................................... 39 FIGURE 25 - ADD STUDENT FORM ...................................................................................................................... 39 FIGURE 26 - FILLED OUT FORM .......................................................................................................................... 40 FIGURE 27 - LIST OF GRADE7_2020 ................................................................................................................... 40 FIGURE 28 - FORM TO CREATE NEW QUESTIONS ................................................................................................. 41 FIGURE 29 - THE NEWLY CREATED QUESTIONS ................................................................................................... 41 FIGURE 30 - MATERIAL FORM ........................................................................................................................... 42 FIGURE 31 - FILLED OUT COURSE MATERIAL FORM ........................................................................................... 42 FIGURE 32 - ADD NEW QUIZ FORM .................................................................................................................... 42 FIGURE 33 - EDIT QUIZ VIEW ............................................................................................................................. 43 FIGURE 34 - NEWLY ADDED QUESTIONS TO THE QUIZ ........................................................................................ 43 FIGURE 35 - ADD A COURSE ............................................................................................................................... 43 FIGURE 36 - EDIT COURSE PAGE ......................................................................................................................... 44 FIGURE 37 - STUDENTS ADDED TO COURSE ....................................................................................................... 44 FIGURE 38 - ADDITIONAL TAGS ......................................................................................................................... 45 FIGURE 39 - NEWLY CREATED SESSIONS ............................................................................................................ 46 FIGURE 40 - QUIZ SELECTION IN SESSION .......................................................................................................... 46 FIGURE 41 - LANDING PAGE (WIP) .................................................................................................................... 47 FIGURE 42 - MENU SCREEN................................................................................................................................ 48 FIGURE 43 - CURRENT LOOK OF THE GAME (WIP) .............................................................................................. 48 FIGURE 44 - COURSE MATERIAL (MOCK UP) ..................................................................................................... 49
D3.2 FLIP2G Learning Environment
Page 9 of 59
FIGURE 45 - LOSING SCREEN ............................................................................................................................. 50 FIGURE 46 - GAME FORM IN THE COURSE SCREEN WITH MULTIPLAYER ENABLED ............................................... 50 FIGURE 47 - MULTIPLAYER QUESTION SCREEN (WIP) ....................................................................................... 51 FIGURE 48 - MULTIPLAYER ANSWER SCREEN (WIP) .......................................................................................... 51 FIGURE 49 - DATA MODEL OF FLIP2G BACKEND ............................................................................................... 58
D3.2 FLIP2G Learning Environment
Page 10 of 59
Executive Summary
This report displays the work done towards the completion of T3.3 and documents the current state
of the prototype, which is part of this deliverable.
The prototype contains a teacher tool from where teachers can manage their games and students,
additionally, a game prototype with two games was developed. The first game is an iteration of a
Multiple Choice Quiz as a single player mode, in contrast, the second game contains multiplayer
functionalities to work along with the Flip2G model developed in this project.
Additionally, this report shows the work done towards the design, art, UI/UX development and
iteration of the game design, which has greatly evolved over the course of the task.
D3.2 FLIP2G Learning Environment
Page 11 of 59
1 Introduction
1.1 Summary
This report presents the FLIP2G Learning environment and the main activities done were towards its
design and implementation, namely:
● The finalization of the game platform design via a game design document and adapting it
based on the partner feedback, which was mainly gathered through multiple surveys
● The design and creation of the art and UI assets
● The development of a web application tool for teachers to create and manage games and
students
● The development of a quiz game for student assessment and training
● The development of a second game with quiz and group work elements
1.2 Audience
The intended audience for this report is the Flip2G Consortium, the European Commission and the
general public interested in serious educational games and learning theories.
1.3 Structure
The structure of the document is as follows:
▪ Section 2 contains the Game Design and related preparations as well as research
▪ Section 3 contains the documentation of the teacher tool webpage development
▪ Section 4 contains a use case and a tutorial
▪ Section 5 contains the documentation and analysis of the requirements
▪ Section 6 contains the technical background of the software
▪ Section 7 contains the conclusion
D3.2 FLIP2G Learning Environment
Page 12 of 59
2 Game Design
The game design was the preliminary step on which the design of the teacher tool and any other
content (e.g. the backend) is based. Therefore, the initial goal was to create a game design based on
the research on serious games and gamification, the developed user requirements and further data
that will be discussed in the following chapters.
2.1 Preparation for Game Design
Additionally to the user requirements defined in D1.2, surveys were created and filled out by the
educational partners as a part of the preparation for the development of the game.
2.1.1 Target Group Survey
A target group survey was created and filled out by the educational partners. Based on this survey,
multiple tables were created:
Partner Subjects Taught Age Class Size Academical BG
NU Digital Business 18-25 10 to 50 Business Students
Linear Programming
Mathematics
UOM Project Mgmt 18-30 20-60 Applied Informatics
Open Data
E-Government
AAU OOP with Java 18-25 60-70 Undergratudates (CS)
Android Programming
Revheim Social Sciences 12 to 16 20-30 High Schoolers
English
Mandoulides Mathematics 9 to 15 20-30 Middle Schoolers
Physics
History
Geography
Informatics
D3.2 FLIP2G Learning Environment
Page 13 of 59
This survey already showed a great diversity in the students that would eventually use the game. This
can turn out to be an issue in development, as, for example, 9-year olds require different teaching
methods and gamification measurements than 30-year-old students. Additionally, the diversity of
subjects taught meant that the game would be shifted more towards a gamification platform and less
a fully developed game with a certain scenario.
The different class sizes were also acknowledged, however, this only had minor influences on the
game design (e.g. the deliberate avoidance of sound as a game mechanic).
2.1.2 Timing and proposed usage of the Game
The same survey also included questions on the timing and amount of lessons for each partner. The
answers are collected in the following table:
Partner Session Length (h) Sessions Total hours
NU 3 6 18
UOM 1 - 2 13 19,5
AAU 1 10 10
Revheim 1 40 40
Mandoulides 1 - 2 40 60
Average 1,6 21,8 29,5
Again, a huge diversity can be seen between the different partners. This means that for the game
design, an overarching scenario needs to be relatively flat, as, storytelling wise, a story that is engaging
for 10 hours might not be interesting enough for 60, while a story designed for 60 hours cannot be
delivered in 10.
2.1.3 Learning activities used by the partners
It was also asked which learning activities were already employed by partners in their lessons to find
out how to seamlessly tie in the game platform to the existing activities. The following activities are
regularly used by one or multiple partners:
• Group Discussions
• Reading Assignments
• Internet Research
D3.2 FLIP2G Learning Environment
Page 14 of 59
• Quizzes (Multiple Choice; True False; Open)
• Programming Exercises
• Q&A Rounds
• Powerpoint presentations
• Demonstrations
• Frontal Teaching
• Videos
• Class Discussions
• Riddles
• D&D
• Online / Browser Games
While some of those activities could be easily transferred to digital means, others (like class
discussions) do not benefit much from a digitization. Still others are already using digital means
(Powerpoint slides, internet research, programming exercises) and it does not make sense to recreate
or redesign already working learn-flows.
However, some of the activities mentioned are already gamified. Especially the quizzes are a recurring
topic. Due to the dynamic nature of a quiz with user-created content, they were a main factor while
creating the game designs.
2.2.4 Benefits of Gamification
Additionally, partners were asked what the benefits were that the game should provide additionally
to the already defined user requirements as opposed to traditional learning activities mentioned in
the former chapter. Answers to that were:
• Higher Engagement Rate
• Integration of assignments and gamification
• Better understanding of the content/material
• Higher motivation
Furthermore, our previous analysis into gamification (cf. D2.1) showed that gamification was a useful
tool to support self-directed learning in the FC.
D3.2 FLIP2G Learning Environment
Page 15 of 59
The use of badges, progress bars and levels allowed students to track their progression and visualize
their learning goals.
2.2.5 Integration of the FLIP2G educational model
The discussions with the partners also aimed at building the game design in such a way that it would
support the FLIP2G FC model. This model was developed in D2.2 and uses a circular model to approach
the FC model as a cyclic process. This process comprises four steps:
- Concept exploration (understand)
- Meaning making (remember)
- Demonstration and application (analyze)
- Experiential engagement (apply)
The game design therefore had to take into consideration the specific requirements of the FLIP2G
model. The following elements in particular were discussed:
- The game and content material should be accessible and playable both in the pre-class
phase and in-class phases.
- Students in the pre-class phase should be able to access the learning material, track their
progression, and take some practice game quizzes. This also aligns with the problem
formulation and problem analysis phases of the Aalborg PBL model.
- The in-class game should allow for engagement in playful learning to consolidate the
learning experience of the previous phase. The games in the in-class time should also allow
for a collective gaming experience. This aligns with the problem-solving phase of the Aalborg
PBL model.
- The platform and gamified progress mode should be engaging to encourage students to
continue exploration of the learning process post-class, aligning with the reflection phase of
the Aalborg PBL model.
The final elements of the FLIP2G model was the articulation of the FC cycle and LA process.
The FLIP2G model establishes three levels for the integration of LA. The first level regards the learning
activities design, which remains in the end of the teachers: It was therefore discussed that the gaming
platform interface for the educators should be intuitive and followed the text-based plug-in approach
The first two steps correspond to the pre-class activities The third step correspond to in-class activities The last step correspond to post-class activities and/or the beginning of a new cycle
D3.2 FLIP2G Learning Environment
Page 16 of 59
popularized by VLEs such as Moodle. The second and third level comprise data generation and data
analysis: The data is generated through engagement of the students in the game, and then processed
through the Learning Analytics system developed by Artelnics.
Therefore, even if the focus remained on gamification, our approach took into consideration a more
complex approach to the FC than a standard VLE gamification system. Our approach aims at
supporting students through a FC learning process every step of the way and adds to the gamified
activities a LA components that can allow them a finer observation of their learning process and better
opportunities for Self-Directed Learning.
2.2 Gamification Report
Initially, to apply the findings made in D1.1 and D1.2 as well as the preparations documented in Ch2.1,
a game design document was created. This document served as a basis for all future developments
and strategy.
It was decided to write a report containing multiple game ideas, which would then be proposed to the
partners. The reasoning for that was that one game would not cover the whole target group as well
as the different teaching structures used by the partners.
2.2.1 Content of the Report
The following chapters will reflect the content of the report. Some of the contents designed in the
report were not implemented in the final prototype, but serve as an inspiration and outlook to a future
state of the project.
2.2.1.1 Target Group
Based on the surveys created, the target groups were defined as:
• Teachers
Teachers in the testing phase have a background in digitization and are accustomed to use
LMS.
• Middle and high school students aged 9 to 16
• Undergraduate and graduate students aged 18 to 30
D3.2 FLIP2G Learning Environment
Page 17 of 59
2.2.1.2 Narrative
The storytelling of the games will feature around an agent/spy cyber aesthetic of 90s cartoons and
Hollywood movies. The narrative itself will be very loose due to the modular nature of the game.
The players are government agents who need to break into the supervillain’s lair. While each agent
works on his own, for some tasks they need to cooperate to continue, while on other tasks they need
to work against each other. Ultimately, they all need to work together to defeat the supervillain.
In each game, they meet multiple foes, tasks and quests, which have to finish in order to continue.
2.2.1.3 Interfaces
This part of the report featured the initial designs of some of the initial student and teacher interface
designs. As the functions of the platform were not clear at this point, the aim of the designs was to
establish a visual language:
Figure 1 - Initial Student Interface Design
The attempt was to create a playful style that would still resonate to the older target audiences.
2.2.1.4 Game Designs
Initially, seven different game designs were created.
Those games were:
D3.2 FLIP2G Learning Environment
Page 18 of 59
Number Quiz
The Number Quiz is a quiz designed to
work well with any type of numbers or
percentages, e.g. historical dates,
mathematical numbers, logical chains
and more.
This quiz also features the possibility to
use estimates or guesses by students and
give points regarding to how close they
are to the correct number or percentage.
The controls for this game are limited to typing in the estimate or guess with the keyboard and clicking
with a mouse (or pressing enter) to send. The player will then get immediate feedback about how
correct his answer is.
The teacher needs to prepare questions and quizzes. Especially creating the questions might take
some more time, as he needs to give one (or multiple) correct answers, but also an answer range that
is acceptable, where students get less points depending on how close they are to the correct answer.
In cases guesses/estimates are not
wanted, the answer range that the
teacher needs to enter is 0.
Multiple Choice Quiz
The Multiple Choice Quiz is based on
standard assessment quizzes, with an
attempt to make it more interesting
through adding an enemy who asks those
questions.
The player encounters a boss making an
incorrect statement or asking a question.
Figure 2 - Initial design for the Number Quiz
Figure 3 - Initial Design for the Multiple Choice Quiz
D3.2 FLIP2G Learning Environment
Page 19 of 59
He/she then needs to give the correct answer to that which drains the Boss’ HP if he/she selected the
right one. If the player selected the correct question, the player character will attack the Boss.
The controls for the game are very simplistic; the player can just click on the correct answer.
Preparation for this game for the teacher is also only a moderate amount of work. He needs to create
and enter questions and put them together for a quiz. The core idea here is that the work for the
teacher will be lower the more questions and quizzes he or she has created in the past.
Multiple Response Quiz
The Multiple Response Quiz has a core mechanic very similar to the multiple choice quiz - however,
its design is very different.
The player plays an armed vehicle on the
right side of the screen and can move with
the arrow buttons or the WASD buttons
on the keyboard. He can also shoot in a
specific direction by clicking on the screen
somewhere.
On the screen, there are enemies, which
come from the right side and try to touch
the player. Each enemy makes a statement that is either correct or incorrect, and the player attempts
to shoot all incorrect statements.
If an enemy with a correct statement touches the vehicle, the player will gain some score. If an enemy
with an incorrect statement touches the vehicle, it will explode and drain the score of the player.
The teacher needs to prepare correct and wrong statements for this game, similar as the preparation
for the multiple-choice game.
Reading Comprehension / Analysis
The Reading Comprehension game was added to provide the students a possibility to interact with
content from the course.
Figure 4 - Initial Design for the Multiple Response Quiz
D3.2 FLIP2G Learning Environment
Page 20 of 59
Players read course material provided by the teacher. They then have two tasks, both limited by a
timer:
1) The player needs to make up one multiple choice question and four answers – three
incorrect, one correct answer – based on the provided material
2) If there is time left, she/he needs to summarize the text in a certain amount of characters
After the timer runs out or all students have fulfilled this task, each student gets two random questions
written by other students, which they need to answer. Instead, he/she can also opt to report the
question if it is not related to the course material or the correct answer is wrong.
After a player has finished answering the questions, it is possible for him/her to vote for summaries.
For that, two summaries will be displayed on his/her screen and the player gets the option to select
the better one by clicking. If other players are still answering questions or the timer is still running,
two more summaries will be provided. This part is repeated, until there are no more summaries left
to compare or the timer runs out. The student with the most votings in the summary will gain extra
score.
This is how a timeline from the student’s perspective can look like:
Figure 5 - Timeline for the Reading Analysis game
The teacher needs to prepare multiple things for this game:
• Timer for question creation
• Timer to answer questions
D3.2 FLIP2G Learning Environment
Page 21 of 59
• Course Material
Additionally, during class, the teacher needs to review any reported questions. He can either decide
to take a question out and/or give a score penalty to the reporting or reported player.
Algebra
The design of the Algebra game is inspired popular indie game titles like Bomb Corp. or Keep talking
and nobody explodes.
The core idea is that students are randomly matched in a class to solve a mathematical or logical
puzzle.
Each player gets, for example, an unsolved formula as well as one piece of information about it
displayed on his or her device.
Multiple players get the same formula and need to form a group. Together, they will have enough
information on their devices to solve the formula.
One of the players has the option to type in the answer. When he enters it, the other players need to
confirm that in order to finish the game.
The preparation for this game is quite complex. The teacher needs to create the completed formulas
and the game algorithm will then replace certain numbers with placeholder letters, depending on the
amount of students that are in one group.
As the algebra game did not receive encouraging feedback by the partners, it was not further
designed.
D3.2 FLIP2G Learning Environment
Page 22 of 59
True/False Statements
This is a quiz that allows the player to choose whether a
statement is true or false.
Each player gets a statement that can either be true or
wrong. Additionally, he gets a randomly generated three-
letter code.
Another student gets a similar statement, whereas both
statements have to exclude each other. Therefore, one of
those statements is true and the other one is false.
The pairs need to physically find each other based on their
prompts. They need to discuss and can, for example, select
a presenter who organizes the class (In courses with
younger students this task can be done by the teacher).
When a pair found each other, they need to enter a code displayed on the other player’s device to
confirm that they are partners.
Together, they need to decide which of the statements is true and which one is false. If both of them
enter the same answer, they will get an improved score.
Crossword Puzzle
After the initial version of the game design document was sent to review for the partners, the
suggestion to integrate a crossword puzzle came up.
The student gets a screen displayed containing an empty crossword grid and the accompanying clues.
She/he needs to fill out the grid as fast as possible.
Whenever the hard timer runs out, the game ends.
When the student fills out the crossword completely before the hard timer runs out, he gets a pop up
and can decide whether to continue or to finish. If he finishes before the bonus timer runs out, he is
awarded with extra points depending on how much time is left.
Figure 6 - Gameplay Loop for True/False
Game
D3.2 FLIP2G Learning Environment
Page 23 of 59
The teacher needs to prepare all words and hints. The game will then be dynamically generated based
on how it fits.
Other Content
Additional content was covered in the game design document, some of which were added to the
current prototype:
• Boss Fight
A boss fight is intended as a final, collaborative game for all students in the end of the
course. It would feature the same game mechanics as previously described, but updated
visuals and a higher output in points, to give students a higher motivation to attend the final
class.
• Leaderboard
A leaderboard was heavily discussed among the partners, as the disadvantage of having one
would be a loss of anonymity and the publication of students that do not fare very well or
are failing. Therefore, it was decided to not have a public leaderboard in the prototype –
However, the designs and ideas can still be found in the game report
• Minigames
Minigames were an early idea to support students who might need some help, while still
giving them a small disadvantage. They can be played at some points in most proposed
games and take 5 seconds each (They could therefore also, correctly, be described as
“Microgames”). Upon success, the player gets a small hint or other help. Sometimes,
minigames can also be used as a punishment in game.
• Course Material
The course material is an option for the teacher to actually teach content through the game.
Course material is heavily tied to the games and teacher can upload it for students to review
it before starting the game (or before certain parts of the game).
D3.2 FLIP2G Learning Environment
Page 24 of 59
2.2.1.5 Audiovisuality
Figure 7 - The first visual design for the game
The game is developed in 2D. It will feature a simplified cartoon style reminiscent of 90s cartoons and
hint at film noir crime stories.
Each game might feature a slightly distinct style, but overall a coherent image should be formed.
To avoid a sound overload, there is no sound.
Player devices will feature visual and, if possible, haptic feedback.
2.2.2 Decision of development priority
Afterwards, the partners were asked to review the report and rate each game by whether it would be
used in class during the testing period. This was the outcome of the ratings:
Game AAU NU UOM Revheim Mantoulides Total
Number / Percentage Quiz
1 1
2
True/ False Statements 1
1
1 3
D3.2 FLIP2G Learning Environment
Page 25 of 59
Algebra 1
1
Multiple Choice Quiz 1 1 1
1 4
Multiple Response Quiz
1 1 1 1 4
Reading Comprehension /
Analysis 1 1
2
Comprehension Bomb 1 1
2
It was decided to create the Multiple Choice Quiz first as it would be easier to develop than the (tied)
Multiple Response Quiz. As it was decided between Artelnics and Nurogames that the backend would
be created by Nurogames, less resources could be used for the development of multiple games. It was
therefore decided to create the Multiple Choice Quiz as well as a newly designed multiplayer game
(not in the gamification report) which could use similar backend data structures as the Multiple Choice
Quiz.
2.3 Quiz Game
Figure 8 - Screenshot of Student Quiz
D3.2 FLIP2G Learning Environment
Page 26 of 59
The quiz game is one of the two games that the student can play. It features a simple multiple-choice
game designed to fit into the Flip2G model and is heavily based on the Multiple Choice Quiz presented
in a former chapter.
Whenever the teacher activates a session, the accompanying game will be activated as well. Students
can then choose it from a list of all active sessions they are added to and play it through.
2.3.1 Core Game
Students encounter a boss enemy with their character on screen. Their goal is to defeat the boss
enemy, who spreads wrong statements, by correcting him and choosing the right answer from a
selection of options.
When the player is correct, the player character will attack the boss and drain his HP.
2.3.1.1 Scoring
Task Points Total Points
Answering right 2500 / Amount questions 2500
All questions on first try
(Bonus)
1000 1000
Boss defeat 1500 1500
Max Points 5000
2.4 Teamwork Game
This is a game working very similar to the Quiz game, but over multiple devices where one or more
devices display the questions in random order and the answers are displayed on a different device. It
is also based on the Multiple Choice Game designed in the Game Design document. The reason for
that is that the similarity of the single player and multiplayer game in the backend lowers the resources
needed for development. Course material can also be used in this game.
On both devices, a different student user should be logged in. This game ensures teamwork and
promotes discussion among the students to work within the Flip2G framework.
D3.2 FLIP2G Learning Environment
Page 27 of 59
Figure 9 - View of player 1 screen in the Multiplayer Game
Figure 10 - View of player 2 screen in the Multiplayer game
D3.2 FLIP2G Learning Environment
Page 28 of 59
3.2.1. Core Game
Players will randomly be teamed up through the game if the teacher starts this game and they selected
it in their menu. Teams will usually be in groups of two, however, due to some factors (e.g., an uneven
number of players; Or players that joined later in the session) one team might consist of more players.
On the device of student A, a batch of answers to a random question is displayed.
On the device of student B, all questions can be clicked through in the order intended by the teacher.
Initially, while only one answer batch can be seen on device A, all questions can be seen on device B -
The students then, in teamwork, need to find out which question belongs to the displayed answer
batch. For this, they will get some visual cues on screen.
If they selected the right answer, both students will get points according to this, and if a wrong answer
is selected, no points are given.
Afterwards, the next batch of answers is displayed on device A. This is repeated until all questions are
answered.
3.2.1.1 Scoring
Task Points Total Points
Answering right 5000 / Amount of questions 5000
Max Points 5000
D3.2 FLIP2G Learning Environment
Page 29 of 59
3 Webtool for teachers
Teachers are able to access the teacher tool through their own devices. They can use it to manage
courses, classes, games, students and specific sessions.
The initial data structure of the webtool looked as following, and only minor iterations (mostly based
on design choices) were done during the development phase:
Figure 11 - Data Model for Flip2G
The teacher can create and manage courses and add students to this course. In a course, he/she can
set sessions. Each session displays either a class or a timeframe in between classes, which can be used
for homework.
D3.2 FLIP2G Learning Environment
Page 30 of 59
In a session, the teacher can add multiple games. He/she can then start a session on the proposed
date and deactivate it when she/he is finished with class (or, for example, the submission period for
the homework is over).
Each game is based on a game template, priorly designed by the teacher. Game templates contain
questions and other content as well as variables, for example a timer. Game templates can be
repurposed and copied to ensure optimal utilization.
3.1 UI / UX Design
The design of the teacher tool is heavily based on programs that the teachers are used to, like a
learning management system or Microsoft office. It also incorporates the Flip2G branding and logo.
Initially, wireframes were created to include all functions in a user-friendly layout. The wireframes
were optimized to work on a computer (as opposed to a mobile device), which was later adapted into
the UI design. The reason for that is that the amount of data displayed on screen would greatly suffer
under mobile optimization, as mobile screens are too small for this purpose and to display the data
needed by the patient.
The initial wireframes looked like this:
D3.2 FLIP2G Learning Environment
Page 32 of 59
Based on these wireframes and Flip2G branding, the designs that can be seen in the following
chapters were created.
3.2 Functionalities
3.2.1 Dashboard
Figure 13 - Dashboard in the teacher tool
The dashboard is the home page displayed to the teacher whenever he/she opens the web app. It
contains current data, and any feature of the website is easily reachable from here.
The top row in the dashboard is called “News”. News contain all classes which have sessions coming
up soon. It gives the teacher the option to start the session with one click, or edit it for future purposes.
Below that, there is a row with tags that might interest the teacher. They can be clicked to reach the
respective tag menu. Tags can be used for multiple purposes and will be explained in a following
chapter.
D3.2 FLIP2G Learning Environment
Page 33 of 59
3.2.2 Courses Page
Figure 14 - Flip2G Teacher Interface - Course Menu
The Course menu is directly reachable from the menu bar on the left or through the dashboard in the
News section.
Here, the teacher can see all courses, which he/she currently leads and create new ones. She/he also
sees the number of students, which student tags she/he assigned to the courses and future as well as
past sessions.
He can edit the courses to add more students, sessions or change the name of the course:
D3.2 FLIP2G Learning Environment
Page 34 of 59
Figure 15 - Edit a Course in the teacher tool
It is possible to add students either by a tag, by their id or by their name.
3.2.3 Quiz Page
Figure 16 - Quiz Page in the teacher tool
D3.2 FLIP2G Learning Environment
Page 35 of 59
The Quiz page displays all available quizzes, as well as the option to create a new quiz. Templates are
global, which means that all teachers can use all templates.
When the teacher opts to edit a quiz, he/she will reach the next page:
Figure 17 - Add new Questions to the quiz
Here, he/she can add existing questions, previously uploaded training materials and a title for the quiz.
3.2.4 Questions
Questions, which can be added to quiz templates as described in Ch. 2.1.3, can be entered into the
database over the question page.
Figure 18 - Question Database
D3.2 FLIP2G Learning Environment
Page 36 of 59
3.2.5 Account Management
The teacher can manage his own account under the account tab:
Figure 19 - Teacher Account
He/she can also create new student accounts and change the password or other student data - As
currently there is no password recovery function implemented, this will be the main way to change
the password if the student forgot it.
Figure 20 - Student Accounts
D3.2 FLIP2G Learning Environment
Page 37 of 59
3.2.6 Student Tags
Figure 21 - Student Tags
Student tags can be managed over the Tag tab. Here, the teacher can visualize all existing tags and see
which students are attached to tags.
Student Tags in general can be created by the teachers. They were chosen as the test groups are both
school classes as well as university courses, so a dynamic system needed to be created.
D3.2 FLIP2G Learning Environment
Page 38 of 59
3.2.7 Course Material
Figure 22 - Course Material upload
An additional page where the upload of course material is possible exists. Any file formats are
supported as long as the student device has a program to open it.
Course material can replace questions in the single player game and can be linked at any part in the
games. They can also be used individually, which means a student can access them from outside the
game to study, and, for example, print them.
D3.2 FLIP2G Learning Environment
Page 39 of 59
4 Use Case: Tutorial on Course Creation
To have the students play a game, teachers initially need to create a course. The whole process from
course creation to integration of the games will be discussed in this chapter.
4.1 Creation of Student Accounts
Firstly, a teacher needs to create students, which he/she can later add to sessions. If the student
accounts were already created by another teacher, this step can be left out (Or, in some cases,
additional tags need to be added).
To create a new student user, the teacher needs to access the Students
tab on the left side of the screen. In the new window, the option to add
a student is found in the top row.
The teacher then needs to add the Mail, the first (and, optionally, middle)
name of the student and his last name.
Additionally, he/she can add tags to a student. Those tags are
automatically created when written into the form and can serve different
purposes. For our purpose, the student Alex Kim Flip will be created.
Alex is a middle school student visiting 7th grade. Alex is also volunteering
for a few sports activities and afternoon courses, which is reflected in his
tags. Those can later be used to easily add him to activities.
Alex types a password n by him/herself. As this is not always possible,
the teacher can also set a password, e.g. the ID of the student.
Afterwards, the teacher clicks on Submit.
The filled out and sent form can be seen in Fig.17. The teacher can
change any data of the student. However, this is unadvisable without the
student knowledge. Especially the e-mail and the password are used for
the log in of the student, which means that any change (without notifying
the student) will lead to the student not being able to log in.
Figure 25 - Add student form
Figure 23 - Student Form
Figure 24 - Filled out student
form
D3.2 FLIP2G Learning Environment
Page 40 of 59
Creating a student is repeated until all pupils of class 7 are created.
This can be reviewed by accessing the Student Tags tab and then searching for the tag grade7_2020
either through the search bar or by simply scrolling through the alphabetically sorted list:
Figure 27 - List of grade7_2020
4.2 Creation of Quiz Templates
A core element of courses are quizzes. Therefore, before creating a course, quiz templates need to be
created. Elements in the quizzes can be course materials and questions – Therefore, before a quiz is
created, those elements need to be uploaded.
4.2.1 Create Questions
To create questions, the teacher needs to access the Questions tab. Here she/he can see a list of all
tagged existing questions (including questions created by other teachers) and the form to create new
questions:
Figure 26 - Filled out form
D3.2 FLIP2G Learning Environment
Page 41 of 59
Figure 28 - Form to create new questions
For the Use Case, we are going to add a few questions regarding 7th grade history content. Each
question can have up to eight answers, of which one or multiple can be selected as correct.
Additionally, each question is going to be marked with the tag history_quiz_grade7 so it is easy to find
and sort later. Since all questions relate to the discovery of America and they might be reused by other
teachers, the tags American History and History are also added. We then can look at the existing
questions by searching for the history_quiz_grade7 Tag:
Figure 29 - The newly created questions
So far, this is satisfying, so the next step is to upload the according course material.
D3.2 FLIP2G Learning Environment
Page 42 of 59
4.2.2 Upload Course Material
To upload course material, the Materials tab needs to be accessed.
There, a list of the existing materials can be seen. The materials can
also be displayed by clicking on the Show button.
Course materials use the tags with which questions can be accessed.
Therefore, for the history quiz, we are going to add two materials:
One image of Columbus and one .pdf file with content regarding the
discovery of America. We are going to tag them with the same tags
as the questions, but will add the tags Image for the picture. After
filling out the form, it looks like Fig. 22:
Figure 31 - Filled out Course Material Form
Since now the questions and course material exists, the next step is to create the actual quiz template.
4.2.3 Create Quiz Template
To create a Quiz template, the Quizzes tab needs to be accessed.
Here, available quizzes can be seen, and new quizzes can be created
via the “Add new Quiz” form, which is visualized in Fig. 23.
After creating a quiz and clicking on the editing icon, the user will be
led to another page where he/she can edit the newly created quiz.
Figure 30 - Material Form
Figure 32 - Add new Quiz Form
D3.2 FLIP2G Learning Environment
Page 43 of 59
Initially, the edit page will be empty. When clicking on the arrow in the type bar, one of the three
options Tag, Question and Course Material can be selected. As we saved all the content we need under
the tag history_quiz_grade7, we should select tag as type:
Figure 33 - Edit Quiz view
Afterwards, the desired tag can be selected and, by clicking on the + sign on the right side, added to
the existing questions. Afterwards, the screen looks like this:
Figure 34 - Newly added Questions to the Quiz
Additional questions and course materials can be added. When clicking on the link, the teacher will
reach the desired content directly.
4.3 Creation of a Course
The next step is to create a course. For the use case, we will create the course
History for the 7th grade pupils.
For that, we first need to access the Courses tab and enter a name for the
course. Then, the button Add Course needs to be clicked and the new, empty
course is created.
This new course can then be accessed by clicking on the Show more/Edit
button. A new page is reached, and it contains a form looking like this: Figure 35 - Add a course
D3.2 FLIP2G Learning Environment
Page 44 of 59
Figure 36 - Edit course page
4.3.1 Add Students
As a next step, students need to be added. They can either be added via a tag, or via name. The tag
grade7_2020 is selected and added via the plus sign. The page will then reload to show the added
students:
Figure 37 - Students Added to Course
Additionally, students, that for example failed the course in the prior year, can also be added via their
name or via additional tags. Since a few students failed the history course in 2019, they need to attend
this course. To ensure that, the tag history_2019_failed will be added to the course as well:
D3.2 FLIP2G Learning Environment
Page 45 of 59
Figure 38 - Additional tags
4.3.2 Add Sessions
The next step is to add sessions. This course will take place over 3 weeks and have two sessions each
week, so 6 sessions in total are added through the Add Session button and the dates are changed
accordingly:
D3.2 FLIP2G Learning Environment
Page 46 of 59
Figure 39 - Newly created Sessions
4.3.3 Add Quizzes
To now add a quiz for the first session, the edit icon needs to be clicked and the correct quiz selected:
As this session will use the quiz as a single player
game since it is intended as a homework, the
Multiplayer Button does not need to be marked.
After adding the game to the session, a “Start
Session” button appears. This button only appears
on the date a session is supposed to take place and
can be reached through this menu or the
Dashboard.
Once a session is started, players can access the
game. If the session is stopped after a player started
a game, but before finishing it, he/she can still finish
the game and reach a high score.
Since this game is intended to be played at home,
the teacher will not deactivate the session until the
Figure 40 - Quiz Selection in Session
D3.2 FLIP2G Learning Environment
Page 47 of 59
next lesson. An active session will always show up on the dashboard, regardless of the date it was
scheduled. A once deactivated session cannot be reactivated.
4.4 Playing through the game
Figure 41 - Landing Page (WIP)
To play through the game, the player initially needs to log in through the landing page. Here, she/he can type in his mail address and his password and also change the password if he/she forgot it.
Afterwards, the player will be forwarded to the menu screen where he can choose a single player (“Solo Mission”) or a multiplayer game (“Team Mission”). The quizzes displayed for the player selection are all quizzes that are unlocked by a teacher for the player.
To continue, we will log in with Alex’ account, select the History 7th Grade Quiz in the Solo Mission tab and click on Go!
D3.2 FLIP2G Learning Environment
Page 48 of 59
Figure 42 - Menu screen
4.4.1 Play though Quiz Game
Afterwards, the game screen will open with the first question. Here, it is planned to upgrade the game
in the support phase to add the narrative as requested by the partners.
The player can answer the questions
provided and, if he/she answers
correctly, the player character will
attack the boss enemy with the wrench.
If the answer is incorrect, the player will
get visual feedback about that.
Afterwards, the game progresses – But
the next content that shows up is the
course material added by the teacher.
Figure 43 - Current look of the game (WIP)
D3.2 FLIP2G Learning Environment
Page 49 of 59
Read Course Material
Figure 44 - Course Material (Mock Up)
Course material will be displayed in a pop up, narratively explained by the player character (the spy)
receiving important data from his employer / contractor. The player can click the “Show data” button
to open the course material in a new tab or in another program installed on the student device.
When the student has opened the course material, the “x” button on the top right corner of the popup
will be activated. The student can the close the material and head to the next question.
D3.2 FLIP2G Learning Environment
Page 50 of 59
Finishing the Quiz
Alex, in our case, has not answered all questions correctly. After finishing the game, the losing screen will be provided:
Figure 45 - Losing Screen
Alex can either replay the game or return to the main menu. Additionally, the final score is displayed in the bottom left corner and saved to the backend.
4.4.2 Play through Teamwork Game
The teamwork game is similar to the single player game. After the teacher has followed the same steps provided in the use case Ch. 4.3.3., he needs to click the button at the multiplayer game to enable it.
As an example, we will use the same test quiz for the multiplayer game. In general, multiplayer games can use the same structure, however, they should be designed differently. For example, students need to match the questions themselves, therefore, it should be obvious from the questions which the correlating answers are (as the answers are randomly displayed).
Alex logs into the multiplayer game through the menu as seen in Fig. 43 and then gets matched to another student, Donna. On Alex’ screen, this can be seen:
Figure 46 - Game Form in the
course screen with Multiplayer
enabled
D3.2 FLIP2G Learning Environment
Page 51 of 59
Figure 47 - Multiplayer Question Screen (WIP)
Donna, on her screen, will see the answers to one of the questions. However, both players don’t get any indication to which question the answer fits and need to find it out by thinking logically and communicating strategically.
Figure 48 - Multiplayer Answer Screen (WIP)
D3.2 FLIP2G Learning Environment
Page 52 of 59
As al those answers relate to Shakespeare plays, they correctly deduct that the question belonging to the answers is question No.1, What Shakespearan play features Ophelia? They can the select an answer and continue, similarly to the single player quiz game.
The course material is accessed similarly to the single player quiz game.
In this game, players cannot win or lose. They simply receive the amount of points based on the amount of correct answers.
D3.2 FLIP2G Learning Environment
Page 53 of 59
5 Fulfilment of Requirements
This chapter will deal with the requirements defined in D1.2 and discuss whether they were fulfilled,
to which degree they were fulfilled, and which parts are not developed and for what reason.
Any use of [Yes] in brackets indicates that the function exists but is described in D.3.3 and developed
by Artelnics.
5.1 Teacher Requirements
No.
Requirement Fulfilled?
TR01 Change the content of the game Yes
TR02 Adapt difficulty Yes
TR03 Perform TR01 and TR02 live Yes
Teachers can change the content of the game, create quizzes in different difficulties and mark them
as such through the tags. They can all do that without any recognizable delay.
No.
Requirement Fulfilled?
TR04 Give hints to students No
TR05 Enable and disable help for students No
TR06 Write and receive messages to single students No
Reasoning for not fulfilling any kind of social requirement (In the following chapters, any chat or social
media functionalities from the student side will also be market as not fulfilled) is the fact that most
students already use a social communication platform and the allocation of resources to more crucial
tasks. Most of the time, the teacher will be in the same room as the students and communicate with
them verbally, which can replace a chat function; However, this solution is missing the desired
anonymity.
D3.2 FLIP2G Learning Environment
Page 54 of 59
No.
Requirement Fulfilled?
TR07
Upload different types of data (videos, images, sounds) Yes
Upload of any file is supported. The student requires a program that can display this data. As the
student has a browser anyway, all standard file types (images, pdf, texts) are supported. For videos or
audio files (or any other file format), additional software is required.
No.
Requirement Fulfilled?
TR11
Uncomplicated UI & UX Yes
TR13 Interface Tutorial Yes
TR14 Tooltips for on-screen items and buttons No
TR16 Search function Yes
Tooltip support is not provided. It was decided to support the testers by teaching them the usage of
the tool in an online session and being available for any questions or help during the whole testing
phase. Additionally, the teachers can use this report to search for general functions in the web
interface.
No.
Requirement Fulfilled?
TR19
Track, check, observe student engagement and progression [Yes]
TR22 Push up notifications Yes
The analytical functionalities are more in-depth described in D3.3 and were designed and developed
by Artelnics.
No.
Requirement Fulfilled?
TR24 Group students Yes
D3.2 FLIP2G Learning Environment
Page 55 of 59
TR25 Create new groups Yes
Students are currently matched in random groups for the multiplayer game.
Most of the additional requirements were, as expected, not fulfilled. However, it was possible to
integrate predefined modules and the export of course related data (learning materials). Additionally,
the interface of the teacher tool was designed to resemble that of common LMS.
5.2 Student Requirements
No.
Requirement Fulfilled?
SR01 Link their in-game process and learning progress [Yes]
SR03 Customization & Personalization options No
SR04 Save data Yes
SR07 Chat between peers No
The student requirements as defined in D1.2 were partly fulfilled. As already mentioned in the former
chapter, a chat functionality is not envisioned. Therefore, any customization or personalization
options don’t make any sense in the current prototype as students cannot interact with each other on
the game platform outside of the multiplayer game.
None of the optional requirements for the students were fulfilled, with the exception of an analytics
visualization developed as part of D3.3. The reason for that is an unexpected delay in the development
process and multiple unforeseen issues along the way.
5.3 Technical Requirements
Technical requirements are any requirements needed for the envisioned game to run, but which are
not directly interacted with by the users (either the teachers or the students).
No.
Requirement Fulfilled?
TeR01 Web-based solution for teachers Yes
D3.2 FLIP2G Learning Environment
Page 56 of 59
TeR02 Web-based solution for students Yes
TeR05 Save & Compare data Yes
TeR06 Find outliers [Yes]
TeR07 SQL server Yes
All defined technical requirements were fulfilled.
The optional technical requirements were partly fulfilled. While leader boards were not implemented,
students can access their high scores for a certain match and upgrade it.
An automatic delete function was not yet implemented as it is not necessary for the testing period.
D3.2 FLIP2G Learning Environment
Page 57 of 59
6 Technical Background and Hardware requirements
It was decided that the game should work in a browser to ensure that most devices can access it. The
game itself is optimized for desktop and laptop computers but can theoretically be played on mobile.
The game was developed in Unity 3D and is partly running in 2D and partly in 3D.
6.1 Technical specifications of the game
The game itself runs in a browser, both on the teacher and the student side.
As Unity 3D was used for development, no additional tools are needed for playing the game as any
browser can open web-based games.
The hardware specifications needed to play this game are not very high. While it is technically possible
to play the game on mobile devices, it is optimized for desktop use and highly recommended to use a
desktop pc.
As some of the partner schools who will test the game will use Chromebooks, the game was
extensively tested on Chromebooks.
Students need an internet connection to play either game.
6.2 Technical specifications of the teacher tool
The teacher tool was created in HTML5 and will work on any up-to-date browser. It is optimized for
desktop pcs but can also be used on mobile. However, there might be some formatting issues.
It can ideally be used with a HD screen, as a lot of data needs to be displayed. It is also intended to
access the analytics tool developed in D3.3 through the teacher tool.
Teachers need an internet connection for the website to function properly.
6.3 Backend
The Backend connects the game and the teacher tool, stores data in the databases and also connect
the analytics data to the game.
D3.2 FLIP2G Learning Environment
Page 58 of 59
For the database, MySQL 5.7 was used. The API was designed and developed as part of this project,
based on Symfony 5.1. and written in PHP 7.2.
The initial data model for the Backend looked like this:
Figure 49 - Data Model of Flip2G Backend
While there were some iterations made during the development, it is still useful to have an overview
over the general functionalities of the backend.
D3.2 FLIP2G Learning Environment
Page 59 of 59
7 Conclusion
The development done towards the prototype delivered with this report has required preparation in
form of requirements and surveys as well as the analysis of other serious games. The target group,
class sizes and semester times were provided by each test partner and used as a basis to develop the
game.
Initially, 7 games were designed, of which one was developed and a second one was created based on
the designs to incorporate multiplayer functionalities.
Additionally, a teacher tool was designed and developed based on the requirements and the needs of
the teachers. The tool enables the teacher to create student accounts, quizzes, questions and courses
as well as upload course material and manage the sessions/lectures.
Of the requirements, the majority were fulfilled, excluding any kind of chat functionality between
students and teachers or students and students. Those functions were excluded due to development
and timing management.
Additionally, the technical specifications of the game are defined. The game was created in Unity 3D,
and runs in 2D. It can be played on desktop PCs that can display WebGL.
The teacher tool was created in HTML5 and has the same technical requirements to the user
hardware.
Finally, the backend was created in MySQL and written in PHP.