Beat the Books Gamifying the Learning Experience for K-6 Students Using Leitner System

BEAT THE BOOKS GAMIFYING THE LEARNING EXPERIENCE FOR K-6 STUDENTS USING LEITNER SYSTEM

By SANTOSH VEMULA

SUPERVISORY COMMITTEE:

Marko Suvajdzic, Chair Angelos Barmpoutis, Member

A PROJECT IN LIEU OF THESIS PRESENTED TO THE COLLEGE OF THE ARTS OF THE UNIVERSITY OF FLORIDA IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR THE DEGREE OF MASTER OF ARTS UNIVERSITY OF FLORIDA 2017

ACKNOWLEDGEMENTS

This work is dedicated to my father and mother for their continued support and unconditional love. I would like to thank Prof. Marko Suvajdzic for his guidance and support in designing this project, providing references for research and revision of paper. I would like to thank Prof. Angelos Barmpoutis for his guidance and support in programming and providing references for research and revision of paper. I would like to thank my friends Prabhakar, Anirudh, Akshata, Sai Kiran, Akhil, Varun, Harish, Jeevan, Sravani, Charan, Samskruthi, Chaitanya and Saishma for their guidance and support in completing this project and proofreading my research paper. I would like to thank Digital Worlds Institute for providing me with resources and helping me to explore and acquire new skills useful for the rest of my career.

LIST OF FIGURES Figures Page Figure 1-1 Screenshots of ‘American Army’ gameplay………………………………………...24 Figure 1-2 Screenshot of ‘Fold.it’ gameplay………………………………………………….....25 Figure 1-3 Screenshot of ‘Dragonbox Algebra’ gameplay………………………………………26 Figure 1-4 Screenshot of ‘Free Rice’ gameplay…………………………………………………26 Figure 1-5 Screenshot of ‘Nightmare: Malaria’ gameplay………………………………………27 Figure 1-6 Screenshot of ‘Grace’s Diary’ gameplay…………………………………………….28 Figure 1-7 Screenshot of ‘Monster School Bus’ gameplay……………………………………...29 Figure 1-8 Screenshot of ‘Gate’ gameplay………………………………………………………29 Figure 1-9 Screenshot of ‘Spent’ gameplay……………………………………………………...30 Figure 1-10 Screenshot of ‘Re-Mission 2’ gameplay……………………………………………31 Figure 2-1 Graphical representation of ‘Forgetting Curve’……………………………………...33 Figure 2-2 Graphical representation of ‘Forgetting Curve’ with time…………………………...34 Figure 2-3A Graphical representation of SIR with time…………………………………………37 Figure 2-3B A cartoon of brain about SIR……………………………………………………….37 Figure 2-4 Illustration by Christopher Brand…………………………………………………….38 Figure 2-5. St. Florian Monastery, Austria. Photo by Renate Dodell……………………………39 Figure 2-6 Illustration to show that SIR helps retaining information for a longer period……….39 Figure 2-7 Learning box with compartments…………………………………………………….42 Figure 2-8 Illustration of Leitner system flashcards transferred between decks………………...43 Figure 2-9. Screenshot of ‘VocBox’ website work area…………………………………………45 Figure 2-10. Screenshot of ‘Brain Power Leitner box’ application……………………..……….46 Figure 3-1. Textboxes to enter question & options and radio button to select correct answer…..48 Table 3-1. Representation of Leitner system decks in BTB Algorithm as question points……...49 Figure 3-2. Flowchart of question points changing based on player’s answers…………………51 Figure 4-1. Main characters……………………………………………………………………...55 Figure 4-2. Main backgrounds for different levels………………………………………………56 Figure 4-3. Different fonts used……………………………………………………………….....57

Figure 4-4. Buttons and their respective secondary images during mouse hover……………….57 Figure 4-5. Other Assets…………………………………………………………………………58 Figure 4-6. Flowcharts of navigation between different screens………………………………...59 Figure 4-7. Main Menu screen…………………………………………………………………...60 Figure 4-8. Button that starts ‘Learn’ level………………………………………………………61 Figure 4-9. Warning to show that there are no courses available to learn……………………….61 Figure 4-10 Button that starts ‘Test’ level……………………………………………………….61 Figure 4-11. Warning to show that there are no tests created……………………………………62 Figure 4-12. Button to enter/edit questions………………………………………………………62 Figure 4-13. Button to create a test………………………………………………………………62 Figure 4-14. Warning shown when teacher tries to create a test without any questions………...62 Figure 4-15. Buttons to turn music on/off……………………………………………………….63 Figure 4-16. ‘Edit Questions’ screen…………………………………………………………….63 Figure 4-17. Buttons to add or delete a question………………………………………………...64 Figure 4-18. Warning to enter a question in textbox before submitting…………………………64 Figure 4-19. Warning to fill all options before submitting………………………………………64 Figure 4-20. Warning to select a correct answer for a question before submitting……………...65 Figure 4-21. ‘Create Test’ screen………………………………………………………………...65 Figure 4-22. Warning to select at least one question to create a test…………………………….66 Figure 4-23.’Learn’ level instructions screen……………………………………………………66 Figure 4-24.’Test’ level instructions screen……………………………………………………...67 Figure 4-25. ‘Learn’ level screen………………………………………………………………...68 Figure 4-26. Progress bar to show questions left for level completion………………………….68 Figure 4-27. Question board…………………………………………………………….……….69 Figure 4-28. Progress bar to display score……………………………………………………….69 Figure 4-29. Hint Board to display number of hints……………………………………………..70 Figure 4-30. Button to use hint…………………………………………………………………..70 Figure 4-31. Player level board…………………………………………………………………..71 Figure 4-32. Change board………………………………………………………………………71 Figure 4-33. Pause button………………………………………………………………………..72

Figure 4-34. Help button…………………………………………………………………………72 Figure 4-35. ‘Test’ level screen………………………………………………………………….72 Figure 4-36. Pause screen………………………………………………………………………..73 Figure 4-37. Rewards/Collectibles screen - locked……………………………………………...74 Figure 4-38. Rewards/Collectibles screen - unlocked…………………………………………...75 Figure 4-39. End screen………………………………………………………………………….76 Figure 4-40. Frog eating bees……………………………………………………………………79 Figure 4-41. Warning shown after ‘Learn’ level is completed when no test is created………….79 Figure 4-42 Questions box blinking in ‘Test’ level………………………………………………80 Figure 4-43. Player catching eggs………………………………………………………………..81 Figure 4-44. Player collecting coins……………………………………………………………..82 Figure 4-45. Owl dialogue to show that a background is unlocked……………………………..83 Figure 4-46. Star when answered questions in a row……………………………………………84 Figure 4-47. Level up…………………………………………………………………………….85 Figure 4-48. Bubble event………………………………………………………………………..85 Figure 4-49. Bubbles emitting coins when popped……………………………………………...86 Figure 4-50. Coin………………………………………………………………………………...87 Figure 4-51. Bronze, silver and gold stars……………………………………………………….87 Figure 4-52. Buttons to activate unlocked collectibles…………………………………………..89 Figure 4-53. Changing unlocked background……………………………………………………90 Figure 4-54. Unlockable bee characters………………………………………………………….90 Figure 4-55. Unlockable frog characters…………………………………………………….…...91 Figure 4-56. Blinking options when hint is used…………………………………………….…...91 Figure 4-57. Owl master with dialogue box…………………………………………….………..92 Figure 4-58. Options blinking green when answered correct………………………….…………92 Figure 4-59. Options blinking red & green when answered wrong……………………………...93

LIST OF ABBREVIATIONS

BTB = Beat the Books. Project Title/ Application name SIR = Spaced Interval Repetition. A memory retention technique used to remember information for a longer period. LS = Leitner System. A SIR model which makes use of flashcards and decks to implement SIR. SG = Serious Games. Games whose primary purpose is to have useful outcomes rather than pure entertainment UI = User Interface. The interface between user and computer through which player controls the program. UX= User Experience. Process of improving the experience of user in handling the program through design. GPU = Graphics Processing Unit. The processing unit in a computer which handles the high graphic rendering functions especially in 3D applications. QP = Question Points. The points assigned to each question to determine the difficulty level of that question to the player. PYMOM = Pythagorean method of memorization. One of the SIR algorithm used in various applications to help users learn new information such as languages for a longer period. SM = SuperMemo. One of the SIR algorithm used in various applications to help users learn new information such as languages for a longer period. FC = Forgetting Curve. The curve that shows the ability to retain information as time progresses. It shows how a person forgets information over time. FPS = First Person Shooter. A video game genre where players won’t see their entire character but just the hands as if playing from a first-person perspective. IOS = IPhone Operating System. IOS is a mobile operating system developed by Apple company for their mobile phones and tablets knows as IPhone and IPad respectively.

TABLE OF CONTENTS

ACKNOWLEDGMENTS ...... 03

LIST OF FIGURES ...... 04

LIST OF ABBREVIATIONS ...... 07

ABSTRACT……………………………………………………………………………………...11

CHAPTERS

1. INTRODUCTION ...... 13

1.1 Computer and learning ...... 14

1.1.1 History...... 14

1.1.2 Uses of Computer in Education and Learning...... 16

1.1.3 Present trends of Computer and Education...... 17

1.2 Serious Games...... 19

1.2.1 Why serious games? ...... 19

1.2.2 History...... 19

1.2.3 Categorization of Serious Games...... 21

1.2.4 Examples...... 23

2. MEMORY RETENTION & LEARNING TECHNIQUES...... 32

2.1 Forgetting Curve...... 32

2.1.1 Description...... 32

2.1.2 Memory Strength Improvement...... 35

2.2 Spaced Interval Repetition...... 36

2.2.1 History...... 36

2.2.2 Algorithms...... 37

2.2.3 How brain works...... 37

2.2.4 How to use...... 38

2.2.5 How kids able to use it...... 39

2.3 Leitner system...... 41

2.3.1 Flashcards...... 41

2.3.2 Working of Leitner System...... 41

2.3.3 Pros of Leitner System...... 43

2.3.4 Cons of Leitner System...... 44

2.3.5 Application of Leitner System...... 44

2.3.6 Examples…………………………………………………………………………….44

2.4 Multiple Choice Questions...... 47

3. LEITNER ALGORITHM AND CODE...... 48

4. GAME DESIGN DOCUMENT...... 54

4.1 Overview...... 54

4.2 Target Platform...... 54

4.3 Visual Style...... 54

4.4 Assets...... 55

4.5 Software Used……………………………………………………………………………..58

4.6 Audio...... 59

4.7 UI and UX Design...... 59

4.8 Gameplay...... 77

4.8.1 Learn Level...... 77

4.8.2 Test Level...... 80

4.8.3 Challenges and Rewards...... 82

4.9 Game Mechanics...... 87

4.10 Controls...... 94

5. CONCLUSION...... 95

LIST OF REFERENCES ...... ……….97

BIOGRAPHICAL SKETCH………………………………………………….………..………100

Summary of Project in Lieu of Thesis Presented to the College of the Arts of the University of Florida in Partial Fulfillment of the Requirements for the Degree of Master of Arts

BEAT THE BOOKS GAMIFYING THE LEARNING EXPERIENCE FOR K-6 STUDENTS USING LEITNER SYSTEM

Santosh Vemula August 2017

Chair: Marko Suvajdzic Major: Digital Arts and Sciences Beat the Books(BTB) is an interactive quiz game for kids from age 6-10 or K-6. The motivation behind this game is to gamify the learning experience for kids. Unlike traditional quiz game, BTB

has multiple game mechanics and a learning technique algorithm to make it fun, interactive and

useful. The main research behind this game is to see how ‘Spaced Interval Repetition’ (SIR), a

memory retention technique can be used to help kids memorize multiple pieces of information. In

this project, I developed an application where teachers can put in questions that they want their

students to learn. After this, students or players can play different types of games to learn these questions and give a test after learning. This application uses an algorithm developed using Leitner system(LS) to implement SIR. This algorithm keeps track of questions entered and repeats questions just like LS until the user is able to memorize all the questions. The main advantage of

Leitner based algorithm is that it is self-sufficient and doesn’t require the presence of an instructor.

The most important feature of BTB which makes it more interactive and fun than the traditional quiz game is the way player answers questions. Unlike traditional quizzes where players click on option buttons to answer a question, BTB allows player to answer questions through gameplay. So, kids can have fun playing game while learning information. Players can also give a test of their newly gained knowledge in the same way as learning information i.e. through gameplay. The purpose of this project is to evolve the methods of teaching and learning using gamification and computer based learning.

1. INTRODUCTION

Early learning is a key foundation for healthy brain development among children. Those around the 6 to 10 age group are particularly more receptive to learning, and are more capable of retaining the information they perceive and take in. Studies suggest that performing such tasks are crucial in forming strong neural pathways over time [1]. It is therefore important for children to exercise cognitive abilities to explore their full potential. In order to develop new skills, children should be able to remember information across relatively long periods of time. However, at that age it is difficult for them to fully realize their long-term memory capabilities using traditional methods.

One way to help students address this problem is through SIR.

SIR helps children to retain information for longer stretches by making them learn additional information at a regular interval. Typically, this is implemented using flash cards. However, flash cards are not the best implementation of SIR when the targeted audience are children of age group

6-10. This age group is attracted to a more visual and illustrative approach that brings to them a sense of entertainment as they go about these tasks. So, I look at a fun and interactive way to implement SIR instead of the traditional way; Gaming. The novelty of our project is implementing

SIR in a gamified learning application for kids.

The outline of the paper is as follows: I begin with a brief literature review of gamification in a learning environment followed by a detailed description of SIR and LS. I then go through our

Leitner-based algorithm and its corresponding program implementation. Algorithm

Implementation description is succeeded by Game Design document which describes the User

Interface(UI) design and gameplay. Finally, I conclude with a summary of our key findings along with anticipated changes in the future.

1.1 COMPUTER AND LEARNING

Computer and learning refers to utilizing Computer as a medium to apply digital technology in enhancing and supplementing the learning experience. Computer, an electronic device that kept evolving right from its invention, enables us to use technology to transform and digitalize various forms of multimedia applications. Computers have become the lifeline of the present generation.

Nowadays, computers are predominantly being used in almost all the industries making our lives easier every day. From Space to Stock Market, Health Care to Hospitality, Telecommunications to Banking, whatever may be the industry, we find computers playing a prominent role.

Computers in the modern society play a prominent role in education as well by helping students learn more efficiently. There are many software tools and applications available, which help students to learn more efficiently and reinforce various skills like Reading Skills, Analytical and

Communication Skills etc. yet making the learning process more interesting and fun. Hence, the

usage of computing techniques in most schooling practices indeed empower the students today to

be more proactive and knowledgeable [2].

The integration of Computers and technology in Learning and Education has had a long history

since its invention and evolution across the years.

1.1.1 History

The History of Computers and Technology in school education can be traced back to the 1940’s,

where ENIAC, the first operational computer, was used at Harvard University and the University of Pennsylvania to solve the real world problems in different fields like engineering, mathematics and science. In the year of 1964, John Kemeny and Thomas Kurtz at the Dartmouth created BASIC which is a new computer language that replaced FORTRAN.

The personal computer revolution was sparked by the invention of first personal computer by IBM in the 1970s. In 1975, Bill Gates and Paul Allen newly formed a company called Micro-

Soft which was later changed to Microsoft. They got a contract from IBM to write the operating system called MS-DOS for its personal computer. In 1975, Steve Jobs and Steve Wozniac founded

Apple Computers. Apple created the existence of the “home/personal computer” that we have come to know today and can be used by everyone [3]. With the advancement in computer technology by the end of seventies, PCs were in high demand in various industries.

In the early seventies, Seymour Papert developed a new computer language called LOGO.

His goal was to influence the computer's utility in the field of education. LOGO is focused on children to improve their mathematical skills. LOGO improved their critical thinking in mathematics in a "micro world" setting which has elements like music and physics.

By the early 1980s, there were one million personal computers all over the world. Around twenty percent of educational institutions in the US and the UK had computer labs. As per the policy of National Science Foundation (NSF), around fifty percent of schools in the US included laptop facilities for students in the technology budget. By the end of 2005, nearly ninety percent of schools provided access to the Internet. By the end of 2011, tablet PCs for students and teachers was included in schools technology budget [4].

During 2007- 2010, smartphones became popular and had a huge impact on students. As of 2015, many mobile applications were developed which were interactive and were widely used for classroom learning. Because of these low cost apps, different learning styles were employed by teachers. With the advancement in technology, teaching and classroom equipment enhanced student learning.

1.1.2 Uses of Computer in Education and Learning

Computer education in schools plays an important role in student’s growth by enabling them to learn more quickly and efficiently. James Kulik, a professor of psychology at UCSD performed a meta-analysis on computer-based education. Based on his research, there was an increase in score from 10 to 20 percentile points using computer-based education. There was an increase in class performance by one-half a standard deviation using computers. Computers with internet are the most powerful devices that students can use to learn new skills. The usage of computers and internet is growing day by day at a high rate in almost all businesses, companies and schools. New technology tools are indeed helping students to learn better [5].

Computers can support meaningful learning by:

• Learning through animations.

• Collecting detailed information using videos, notes and pictures from web pages.

• Saving the documents and files as soft copy for future use.

• Online encyclopedias, E-books and online libraries save time and resources.

• Collecting videos and images for better PowerPoint slides.

• Saving time on doing repeated tasks.

• Helping to get new data and organize it.

• Providing resources to share information easily.

Apart from this, computers help students to showcase their creativity on the computer such as by using windows paint program. They not only help students to explore creativity and imagination but also help them to understand technologies.

Hence, the goal of technological education by using computers as a medium is to make students

more efficient and critical thinkers that help them in higher education and in life [6].

1.1.3 Present Trends of Computer and Education

The computer and the internet has undergone a great evolution over the past few years. Everything

seems to have changed drastically. This includes the education system as well. Educators have

already started to change with the times.

Following are some of the most popular trends with respect to using Computers and Technology

in education and learning [7]:

a) Using internet and social media for learning

Now a days all students have minimum knowledge in using computers with internet. Most of the students are using social media networks for information sharing. With the advancements in technology, teachers are also using social media networks to get their feedback and inputs from

students and also get to know students thoughts by keeping in touch with them.

b) How performance is affected by the educational infrastructure

With the better educational infrastructure, students perform better and their teachers. According to

a survey, schools with better infrastructure and facilities prompted less smoking, substance abuse

and truancy in the students. It was additionally discovered that with better framework, test scores

ascended essentially. Even Teachers also enhance their capabilities to raise teaching standards with

response to improvements in schools.

17 c) Students educating instructors

When the students have an opportunity to let the teacher know what improvements can be done in a class, they perform well. Presently there is a feedback system employed in schools for students.

This system gives an opportunity for students to give their inputs to teachers so that they could improve their teaching skills and students can benefit from it.

Hence, Education and technology are more interdependent than ever and they form an efficient partnership. Computers in education have allowed students to better understand the world around them. As technology provides a lot of information, education is evolved significantly. Even in the future, people continue to depend on computer-based education for all purposes.

1.2 SERIOUS GAMES

Serious games(SG) are the games whose primary purpose is something useful than mere fun and

entertainment [8]. These games are termed as “serious” as many industries use these games in

their field for educational or simulation purposes. A few examples of such industries are defense,

medical, engineering, scientific experiments and politics.

1.2.1 Why serious games?

SG provide a gamified virtual way to train a person or simulate any experiment. This saves lot of

resources while providing an immersive experience. For example, to understand the basics of

flying a plane, a person may have to go to a plane and practice multiple times to get good at

understanding the controls of a plane. But this way he must go to a plane every time he wants to

practice and it would cost him time, energy and money. All this just to learn basics. Using a SG

like flight simulator, it’s simple and efficient to do the same. He can learn all the basics at his own

place and convenient time through a smartphone or any other device. He doesn’t have to go to a

plane always but only when practicing for real. SG give the player an immersive experience to

match the real-life experience of flying a plane. Another advantage of using SG is, it can be

developed to simulate multiple types of planes instead of just one. So, by developing a flight

simulator for once, it can be used to train any number of people at any time with limited expenses.

1.2.2 History

The origin of games is older than what one may assume. Games are prevalent in all of the ancient

civilizations. Archeological studies point the existence of first game as back as 3000 years old,

where they found evidence of dice being used as part of the game. Though the existence of the game was found, its intention was unknown, i.e., whether the game was a part of amusement or is it a part of a learning process being practiced in those times in unclear. However, the term “Serious

game” hasn’t been in use until 1970. Social scientist Clark C. Abt coined the word “Serious game”

describing it as “games that have an explicit and thought-out educational purpose and are not

intended to be played primarily for amusement” [9].

Quite contrary to the popular belief, SG didn’t start from the need of providing fun and

interactive tool to teach children. The world’s first SG ‘American Army’ originated during World

War-II, where the game was used by the US army to raise awareness of army glory among the

general public. From then, a series of SG have emerged with various motivations, ranging from

American history education, business management to army training etc.. During 1981, American

army developed a set of simulation tools to train its people to operate tanks and fighter jets in the

form of missions. Marines followed similar tools in the later years [10]. Around 2000, Games for educational purposes moved to digital domain due to rapid technologic advancement. Especially, electronic industry has seen a rapid growth which brought many electronic devices into every

household. During this time, a wide range of SG came into the market targeting teenagers.

However, these were not computer based but relied on console and hand-held gaming system like

Gameboy and Nintendo. Leapfrog, an educational entertainment based electronics company came up with two educational games in 1999 and 2003, namely, LeapPad and Leapster. Global market

for SG has grown exponentially over the last decade, mainly attributing to technology revolution

[11]. Smart phone evolution paired with given Open source nature of application development in

Android and iOS lead to a surplus amount of SG, which are currently residing in Playstore

(Android) and Appstore (iOS).

1.2.3 Categorization of Serious Games

Since its inception, SG found applications in various domains. D Djaouti et. al [12] classified them in a three-stage hierarchy where each stage describes a characteristic of the game. The first stage takes about the gameplay. The second characteristic is the game purpose. It is the prime objective of the game. The final characteristic is the market or the targeted audience.

As mentioned earlier, SG spread among a huge and diverse field. Let us consider some of the key fields where SG have a significant impact.

1.2.3.1 Education & Training

SG made most impact in this field. Most of the SG population lies in this field, more particularly in education domain. The addictive nature of playing games among the children and adolescents is the key reason for the academia and industry to build these games. A middle-school in New

York, Quest to learn, designed their entire education systems on the SG [13]. It wouldn’t be too surprising to see more such schools in future. Some of the popular SG in this area are mentioned below:

1. SkillsArena is a SG which targets students and aims at developing their arithmetic

skills.

2. Making History teaches World War-II history in a more interactive way.

3. Lost in the middle is a great game which helps people learn a new language.

4. IBM CityOne and Clean world are some simulation games mimic which real life

conditions in an effort to make players understand the difficulties in designing and

maintaining the cities and the ill-effects of pollution.

One key challenge in developing these games is to make sure that the usability of game is good

enough for a teacher/administrator, who may not have a prior knowledge of the game. However,

it is noted that though most of the games are targeting the young children, games like IBM Cityone

and Clean World have no age restriction and suitable for all age groups.

1.2.3.2 Wellbeing

Obesity is becoming a dangerous chronic illness among the first world countries and most of that

is attributed to a sedimentary lifestyle. With the advent of wearable technology, there have been a

plethora of fitness apps/games which aim at promoting active lifestyles. Games like Pokemon Go,

though being an entertainment game does a surprisingly good job of motivating people to become

more active [14]. Apart from activity based games, there are many more SG which talk about the

nutrition, mental and physical health.

1.2.3.3 Advertisement

Due to the increase in the usage of technology of an average person, advertising companies are

building games to promote their products. This field has seen a tremendous growth in SG with the increase in game mediums like Laptops, Smartphones etc. over the last decade. One major advantage here is that the companies need not explicitly built a game as in the case of Education field, but rather include their content in some existing famous game to achieve the same result. For example, games like FIFA, Need for Speed have the details of some particular companies all over the games promoting their content. This phenomenon is generally referred to as “Branding” and meets the goal of both game and advertising companies with a single game. Also, mobile games like LogoQuiz promotes the content in a rather direct way.

1.2.3.4 Cultural Heritage

With the latest advances in parallel computing machines like GPU (Graphics Processor Units) and

other advanced image rendering techniques, simulation and real-time games have become more faster and cheaper. Such advances catapulted the progress of heritage games. These games aim at informing the players about the different cultures and traditions present across different parts of the world. It is to be noted that these games differ from that mentioned in the education field as these aims more at creating awareness than exactly teaching. These games are of great help and sometimes are the only resource to show the heritage of some historic monument which are either completely demolished or are in irreparable conditions. Virtual museums are also a great source of information which give the users an experience of a real museum while staying at home. With the recent advances in Virtual Reality and Artificial Intelligence, there will be a lot more games in this field which provides user many never-seen-before experiences.

1.2.4 Examples

1.2.4.1 American Army

Link: https://www.americasarmy.com/

American army is a first-person shooter(FPS) game developed by U.S government in 2002. It was a strategic game developed to give American citizens an experience to be in an army mission and their adventures so that Americans can decide if army is the right place for their interests and

abilities. This was the first game by U.S government to use gaming technology as a platform in

the process of recruiting new soldiers. Unreal Engine was used to developed this game and was

published as a free version.

Figure 1-1. Screenshots of ‘American Army’ gameplay.

This game was the brain child of Army’s Chief Economist, Colonel Casey Wardynski who was also a Professor at the United States Military Academy [15]. He wanted to give American citizens a glimpse of life at the army using games which are immersive and entertaining. This game laid a foundation for U.S government to create more simulating and training games for their soldiers to give them a virtual experience. This game was initially developed for windows platform but was later expanded to other gaming platforms like Xbox.

1.2.4.2 Fold.It

Link: http://fold.it/portal/

Fold.it is a puzzle solving game where players have to fold a protein in a well-structured manner as to reach specified score using tools provided in game. This game was created to help scientists in folding or breaking down complex proteins structures to use in biological operations like curing diseases or conversion of plants into fuel in an effective way. Creators are doing research on how human problem solving skills can outperform computer algorithms in folding the proteins. This is an innovative game which is very useful for solving real world’s problems. Even though the game is simple, using player’s method of folding the proteins to research on biological operations is a very smart way because it reduces the time and effort for actual scientists.

Figure 2-2. Screenshot of ‘Fold.it’ gameplay

1.2.4.3 Dragonbox Algebra

Link: http://dragonbox.com/algebra

Dragonbox Algebra is a math puzzle solving game which teaches kids how to solve algebra. The game starts with a goal to isolate a box which is a ‘x’ in algebra. This can be done by cancelling a pair of opposite cards like a daytime and night card or two same cards in numerator and denominator place of a division. These techniques of cancelling cards are in fact secretly performing additions, subtractions, multiplications and divisions. Players can also use cards from the deck to place on cards on board. This is like adding or dividing a number on both sides. So, using techniques like these, developers of game are secretly teaching kids algebra in a smart way.

The other feature I like about this game is, it doesn’t start with cards showing numbers or alphabets on them because it again feels like a math problem. It’s starts with cartoon characters on cards and a box and then slowly transforms into alphanumeric and ‘x’.

Figure 1-3. Screenshot of ‘Dragonbox Algebra’ gameplay

1.2.4.4 Free Rice

Link: http://freerice.com/#/english-vocabulary/2037

Free Rice is a simple online multiple choice game. You get 10 grains of rice for each question answered correctly. Creators promise to donate the earned grains of rice to needy. It teaches meanings and synonyms of various words. The difficulty of words increases as we answer

questions. The wrongly answered questions are repeated. The cause is great and appreciable.

Gamification is used for a better cause while teaching at the same time. The strategy is simple and

effective in attracting audience. Kids get motivated in learning as they get to donate rice. Multiple- choice questions cover a range of subjects and get easier or more difficult depending on whether they're answered correctly.

Figure 1-4. Screenshot of ‘Free Rice’ gameplay

1.2.4.5 Nightmare: Malaria

Link: http://nightmare.againstmalaria.com/

Nightmare Malaria is a SG that spreads the awareness about malaria. The visuals are impressive and the story is good. The goal is to collect teddy bears escaping mosquitoes by hiding in nets. It presents the facts about malaria at the end of each level and asks for donations. Kids learn about use of mosquito nets and how we must protect from them. The world in which game was set and sounds of mosquitoes are effective in experiencing the panic of mosquito bite for kids. The level design is simple and tactical. SG like these are much useful in creating awareness about a cause and providing entertainment to players at the same time.

Figure 1-5. Screenshot of ‘Nightmare: Malaria’ gameplay

1.2.4.6 Grace’s Diary

Link: https://jayisgames.com/review/graces-diary.php

Grace's Diary is an interactive visual novel that follows a girl called as Grace as she attempts to save her friend, Natalie, from a very abusive relationship with a man named Ken. During the game the player is given the opportunity to explore Grace's room, pointing and clicking on different items in an effort to recollect memories necessary to aid Grace in helping her friend. The game educates the player to look for warning signs if you suspect someone you know may be in an

27 abusive relationship as well as the steps that can be taken to help them. It's elegant in its simplicity, educational, relatable and beautiful.

Figure 1-6. Screenshot of ‘Grace’s Diary’ gameplay

1.2.4.7 Monster School bus

Link: http://mathsnacks.com/monstersb-en.html

Monster School Bus was developed to teach kids calculations through driving a school bus which carries monsters in groups. The challenge is to pick up and drive monsters without breaking their groups. Each monster takes just one seat at the beginning of the game. So, it’s easy to calculate how many seats a group need. But as the game progresses some monsters take fraction or decimal number of seats. This is where the games gets complex and challenges players to perform complex calculations. This game has visuals appealing for kids and might be boring for adults. The reward system of upgrading buildings to monster buildings when consuming potion adds fun to gameplay.

Overall this game helps kids to solve calculations through visualizing the numbers as monsters and interactive gameplay.

Figure 1-7. Screenshot of ‘Monster School Bus’ gameplay

1.2.4.8 Gate

Link: http://mathsnacks.com/gate_game.html

Gate is designed to strengthen number sense. Gate helps in developing algebra for kids and challenges them to use numbers to calculate more complex equations. It helps them to understand the application of numbers in various situations. The game designing and graphics looks interesting and give player an immersive experience. Player must defend himself from monsters coming towards him. He can beat them only using number, by adding or subtracting numbers. The key elements in gameplay are time and math. You must quickly come up with proper math to create the required number. If you see ‘9’ players might click +1 nine times, but it can also be done by pressing +10 and -1. So, game teaches the players number sense. It can also improve kids critical thinking skills and make him quick at math equations.

Figure 1-8. Screenshot of ‘Gate’ gameplay

1.2.4.9 Spent

Link: http:// playspent.org/html/

Spent is an online game that creates awareness about the life of people with low wages. It also

makes the player think the value of spending money efficiently. The challenge is to get through

the month with the little savings you have after you lost everything i.e. 1000$. The game poses

multiple choice questions where player must make a decision whether to spend money on a

particular situation or not. If you decide to spend money, it will be taken out of your savings. There

are also ways to earn money by working as a low wage worker or selling your belonging. The

game gives you real life situations where money plays a vital role in your decision-making skills

like playing bills, buying groceries, satisfying the needs of your children etc., This simple game is

effective in teaching players how the low-income life is and how poor people spend their days by making critical decisions that makes them suffer or opt out of happy situations in order to save money. The final day where you are left with very little money and rent is due on next day makes the player think of how miserable life can be for low income people.

Figure 1-9. Screenshot of ‘Spent’ gameplay

1.2.4.10 Re-Mission 2

Link: http://www.re-mission.net/

Re-Mission 2 is an online game to create awareness about fighting cancer. The game was created

on the basis medical research and gives the player information about various types of cancer and

available treatment options to fight it. The in-game characters talk about useful information about cancer to create awareness. It teaches cancer kids about process in which cancer cells work inside their bodies and how they must take care of themselves. The game is also a way to get through to young patients, especially willful teenagers, about the importance of their sticking to their treatment plans. This game based learning experience is fun and effective in achieving its goal.

Figure 1-10. Screenshot of ‘Re-Mission 2’ gameplay

2. MEMORY RETENTION & LEARNING TECHNIQUES

2.1 FORGETTING CURVE

Hermann Ebbinghaus, a German psychologist who instigated the study on the memory, is the founder of the concept of forgetting curve(FC). In 1885, Hermann developed a formula to calculate the period in which a person can lose his memory of certain information and conducted a study on the concept to prove this theory [16]. This curve is used to describe how a person gets rid of an information introduced to the person at a certain point of time or how we retain the information across a long period of time. The main idea of the curve is that it hypothesizes the memory retaining skill of an individual. The main discovery of his experiment is that the rate of memory decline is exponential with respect to the duration after the instruction is given. He is also the person who described the learning curve, which is a graphical representation of the increase of learning with experience.

2.1.1 Description

Ebbinghaus ran tests over various period of time on himself. He then analyzed all his data to find the shape of the FC and published his hypothesis in 1885 in his book, “Über das Gedächtnis:

Untersuchungen zur experimentellen Psychologie (Memory: A Contribution to Experimental

Psychology)”. The main point of the FC is that by training on a frequent basis, high percent of information is ensured, especially in the first 30 days after information is delivered to the person[17]. The FC is concluded further by Spacing effect, which is defined as the phenomenon,

where learning is greater where studying is spread over time. Hermann Ebbinghaus identifies this

phenomenon and publishes a book on it.

Figure 2-1. Graphical representation of ‘Forgetting Curve’[I]

The above graph shows a typical FC. The graph shows the rate of retention over time and the possibility of retaining the information. There are many factors which contribute to the retention of an information. Some of the factors described by him are the standard of the information i.e., difficulty of the information, usefulness of the information and other physiological factors such as sleep and stress. Ebbinghaus further stated according to his analysis that basal forgetting rate is very minimal between individuals. The performance difference can be explained further by mnemonic representation skills. The FC is further supported by the concept of strength of memory, which states that stronger the memory of the person, the longer he will be able to retain it.

The above statement is then analyzed and a further study is conducted to prove the statement. The study shows that initially, when a person is exposed to additional information, his retention rate is 100% since he just learned the information at that point of time. In the following

couple of days, if he did not do anything with the new information he learned during the beginning

of the study, the retention rate then drops to around 40-60% [18]. The mind retains information on a temporary basis. If it is not necessary, majority of the information is lost in the initial days, which means that the memory retention for redundant information is weak in the initial days. By a week, one would remember even less and after a month the person may remember 2-3%. The rate of retention depends on many factors such as difficulty of the information the person is exposed to, whether he can correlate to any known information or not, how it is represented to the person, the anxiety levels of the person when he is exposed to new information and if he’s properly rested before the gets exposed to the new information. The below graph shows the rate of retention from the study performed in detail.

Figure 2-2. Graphical representation of ‘Forgetting Curve’ with time[II].

2.1.2 Memory Strength Improvement

Ebbinghaus further went on to state that basic training with the mnemonic techniques mentioned below will increase the rate of retention of the information. The best methods to increase the rate are better memory representation with mnemonic techniques and spaced

repetition. Although later research also suggested higher original learning, i.e., giving more

importance while receiving the information also reduces the forgetting rate.

Ebbinghaus claimed that repetition in the process of learning increases the possibility of retaining the information as it takes less time to recollect the information from your long term memory and makes it faster and easier to recollect the information when needed. His theory is that each time an information is recollected in the learning process, optimum interval is increased with respect to the next time it is repeated. For perfect retention, repetitions are required mainly in the initial days of exposure to the information.

One of the ways for memory improvement is to connect the received information with any known information from the memory which makes it easy to recall it. We can use memory hooks or other mnemonic devices which can be used to connect additional information with already known information. Another important aspect is to recollect latest information in regular intervals.

Every time you repeat an information, its retention rate is back to maximum because the

user just got exposed to the information again. The FC again works in the same way before the

person is exposed to the information. However, in this case, what changes is the speed at which

the person forgets the information. Every time we recall the information, the memory retention

becomes faster and stronger which further states that, the stronger the memory, the longer the

person is able to recall the information.

2.2 SPACED INTERVAL REPETITION

Spaced interval repetition technique is a learning technique which helps in memorizing a large number of things. In this process of learning, the correct answers are revisited less frequently whereas the wrongly answered items are scheduled for frequent visits. This technique is well used in vocabulary build up and learning foreign languages [19].

2.2.1 History

In 1932, Prof. C. A. Mace proposed an idea of spaced repetition for memorizing a large number of items in his book Psychology of Study. He formulated that acts of revision should be spaced in gradually increasing intervals, rough intervals of one day, two days, four days and so on.

In 1939, H. F. Spitzer performed an analysis on sixth-grade students in Iowa to understand the effects of spaced repetition. After his analysis on 3600 students, spaced repetition was proved as an effective method. But his study was not recognized until Melton and Landauer & Bjork in 1960s examined the role of spaced repetition to recollect the information. During the same time, language learning courses were developed using spaced repetition known as Pimsleur language courses [20].

SIR has been formulated to memorize a large number of items without forgetting for a long period of time. There are only 24 hours a day, and naturally, we allocate our time to do many different things. So, we should find a solution to study more in a shorter span. The solution is to space out our studying by introducing space intervals between studying so that we can retain more information in the brain even if we spend fewer hours of study.

2.2.2 Algorithms

Algorithms developed for spaced repetition:

1. PYMOM(Pythagorean method of memorization)

2. Neural networks

3. Leitner System

4. SM family of algorithms

2.2.3 How brain works

Brain can store 5 to 7 new pieces of information at a time, and it forgets the information if it’s not revised periodically. The predominant reasons may be the stress and anxiety that scrambles our brain. The brain preferentially stores the information which it considers to be important. It strengthens and consolidates the memories when it's encountered frequently. In order to train the brain to memorize a lot of information in an effective manner, we use the SIR. It forces learning to be effortful, and the brain responds to the stimuli by strengthening the connections between the nerve cells [21]. On exercising these connections periodically, it allows us to have a retention of knowledge over a long period of time.

Figure 2-3A. Graphical representation of SIR with time[III]

Figure 2-3B. A cartoon of brain about SIR[IV]

2.2.4 How to use

A simple way to use SIR is to use flashcards organized into a box. The box has the cards placed in such a way that each of the cards can be revisited the way the user proceeds, described further in detailed manner across the following sections.

Figure 2-4. Illustration by Christopher Brand[V].

First, pick a card and if it is correct, place it in the section where you can revisit less frequently. However, if it is wrong, place the card in the section where you can revisit it more frequently. By continuing this process, brain retains the information for a long period of time.

The explanation for how memories stick around even as many perish can be explained from the book "how we learn", authored by Benedict Carey through a new theory called "forget to learn". The first principle of this theory denotes that memories have two strengths

1. storing strength

2. retrieval strength

This theory about the brain can be explained through a picture of a huge library. In the library, there's plenty of shelf space. When a book is added it is made sure that it's safe no thieves

38 enter, and that the place of the book is not changed. With a library of such magnitude, the catalog needs lots of care and maintenance to stay useful. Over time, it’ll get messy and less useful unless it’s timely updated and organized.

Figure 2-5. St. Florian Monastery, Austria. Photo by Renate Dodell [VI] Periodically rearranging the books in its proper manner retains the knowledge where the book is placed. In this way, brain stores the information and how it retrieves the information is explained through an example.

2.2.5 How kids use it

As kids are always involved in various activities, their concentration levels will be usually low.

Figure 2-6. Illustration to show that SIR helps retaining information for a longer period[VII]

The kids are made to use this technique in learning words through a computer or a tablet by displaying respective figures of the words. It has been found that they often tend to learn quickly this way. If they fail to learn for the first time, the SIR helps in retrieving the data more frequently.

This periodic retrieving of data subsequently tends to store the information for a long time.

2.3 LEITNER SYSTEM

The Leitner System is the most widely used learning strategy to memorize things quickly and efficiently. This system implements the method of studying and memorizing with Flashcards using

SIR. It is implemented by repeating certain parts of information while reading the question and trying to recall the answer. The German psychologist Sebastian Leitner proposed the LS in the

1970s, which is a learning system that enables selective learning possible with fewer efforts than

the traditional approach of studying flashcards in a sequential order [22].

Sebastian Leitner in his research on the psychology of learning in the early 1970s

conducted experiments with a goal to improve one’s learning and retention potential. As a result

of his experiments, he concluded that we could avoid forgetting the things we have learnt by

repeating them regularly. He then subsequently proposed the Leitner-System in which a

combination of Flashcards with SIR created a way to optimize learning further.

2.3.1 Flashcards

A Flashcard can be a note card which has two sides. One with the question and other side with the

respective answer. It can help in learning through repeating the pieces of information by reading

the question and trying to recall the answer. You could check if the answer was correct by flipping

the card. You can also recall the associated question by looking at the answer.

2.3.2 Working of Leitner’s System

Leitner's system has a cardboard box called Learning Box, separated into several compartments.

The flashcards on which the solution to be learned is written, are sorted into groups according to

how well the learner knows each one in the Leitner's cardboard box. New flashcards are added to

the 1st compartment. According to the current level of knowledge, the compartments are filled with

flashcards and the flashcards are moved from one compartment to the other. The learners try to

41 recall the information written on a flashcard. If they succeed, they shift the card to the next compartment. If they fail, they send it back to the first compartment. Each succeeding group has a longer period before the learner is required to revisit the cards. The schedule of repetition is dependent on the number of compartments the box is divided into. Before a repetition starts, the compartments should be reviewed and then the flashcards should be shifted to the next or previous compartments.

Figure 2-7. Learning box with compartments[VIII]

Correctly answered flashcards are moved to higher compartments without any efforts, and flashcards with which we have had trouble to memorize, are more often repeated till we become fluent and well verse with them.

The LS concludes that if we are able to memorize and remember information on a flashcard after a long period from the last compartment, then that information will be memorized forever, or that we achieve high consistency in recollecting that information.

Figure 2-8. Illustration of Leitner system flashcards transferred between decks[VIII]

The more we cannot recall the information on a flashcard, it is repeated frequently. Flashcards are repeated in such a way that the person learning them spends a quality of time on questions that are challenging. This provides a firm balance in the frequency the information of each type is repeated to ensure the user remembers all the information over the course of the whole period.

2.3.3 Pros of Leitner System

• Flashcards are good for memorizing. They divide topics into learnable chunks, develop

random-access knowledge, and game the learning process visually.

• Flashcards also make it easier for people to learn together, testing each other.

• One can learn the solution on Flashcard in small units of time. Progress in learning and

number of repetitions are in accordance to one’s memory.

• If we already know a solution, then it is not repeated after five times. Thus, it saves us time

by not letting us repeat already known things.

• The Information we forget is repeated until it is memorized.

• We can interrupt our study for a short while, and then resume at the same point.

• After waiting for some time, we can repeat again in the higher compartments.

2.3.4 Cons of Leitner System

• We should practice it regularly to have a good success.

• This system help us learn efficiently, but it cannot replace a good teacher.

• Using this system, we must study everything all by ourselves.

2.3.5 Applications of Leitner System

• As there is a tremendous increase in the utility of personal computers, laptops, tablets and

mobile phones, the LS can be implemented as a computer-assisted language learning

software-based solution.

• Many software products are modelled based on LS and SIR algorithms that concentrate on

primary school children to learn and memorize alphabets and numbers.

2.3.6 Examples

• VocBox:

Link: http://www.vocbox.com

VocBox is an online vocabulary learning website which also has a mobile application for

IOS where a user can create their own flashcards to learn any information like languages

or definitions. The repetition of these flashcards is based on LS. These sets of flashcards

can be made public or private and can be shared to other users. Teachers can create their

own set of flashcards to share with their students to learn. VocBox promotes their website

as useful learn new languages.

Figure 2-9. Screenshot of VocBox website work area [IX]

• Brain Power Leitner Box:

Link: https://play.google.com/store/apps/details?id=com.brain.power&hl=en

Brain Power Leitner Box is an android application that also uses flashcards to help users

retain information using LS. This application has user friendly features to control the

learning process effectively. Users can add images to flashcards to aid in memorization. It

also has a feature to pronounce words for those who want to learn new languages. Another

significant feature is to change the length of leitner period over which users can master

their flashcards.

Figure 2-10. Screenshot of ‘Brain Power Leitner box’ application

2.4 MULTIPLE CHOICE QUESTIONS

Beat the Books application has two games within it. Game 1 is called as Learn level and this is part where player learns new questions and game 2 is called as Test level where player gives a test on the questions he learnt in Learn level. These questions are entered into the application by their teachers who want students to memorize them. Each question has four options to choose from. So, this is like a multiple-choice quiz but its more interactive and gamified. I will discuss how this application was gamified to make a traditional multiple choice quiz more interactive and entertaining for kids and different mechanics and gameplay in later topics. Learn level uses the leitner algorithm which repeats the questions based on LS and player must answer until the player has memorized all the questions. Algorithm is responsible was repeating the questions which player finds difficult. Test level doesn’t use Leitner algorithm.

Even though this application is based on LS or spaced repetition, several studies show that spaced repetition should not be used for multiple choice questions because it seems that player’s retention might be effected due to other three wrong options. Player’s mind may get confused and try to remember these wrong answers [23]. But I can eliminate this situation by showing the player the right answer immediately after he answers a question. Having this quick feedback in our application is an effective way to use spaced repetition for multiple choice question.

3. LEITNER ALGORITHM AND CODE

In order to recreate LS digitally, we have to write an algorithm that repeats a set of questions which teacher want their students to learn. Just like how a user memorizes a card more frequently than other depending on their deck, this algorithm also must repeat these questions in a periodic manner based on its difficulty for the player. The question is marked as difficult to a player when he answers that question wrong. The difficult keeps increasing the more player answers the same question wrong and vice versa. So, we need a variable that keeps track of difficulty level for each question to a player.

Whenever a teacher enters questions into the system using enter questions screen which will be explained in the game design document, each question is assignment a variable ‘P’. Let’s call ‘P’ as question points (QP).

for (var i=0 ; i<10; i++){

quiz[i].p=0;

}

Where quiz[i] is an array of a set containing questions, their respective options and a correct answer. ‘i’ is the question number. For example, if teacher enters a following question into the application.

Figure 3-1. Textboxes to enter question & options and radio button to select correct answer

It is stored into the quiz[i] set as follows.

quiz[i].question = "Where is Taj Mahal located?";

quiz[i].answers[0]="A) "+"India";

quiz[i].answers[1]="B) "+"Spain";

quiz[i].answers[2]="C) "+"Japan";

quiz[i].answers[3]="D) "+"Canada";

quiz[i].correct=1;

As explained in the above section, LS uses cards and decks. The cards are changed into different decks based on player’s retention. But how do we convert this system into an algorithm. That is where QP comes in. Here, I replace cards with quiz[i] set and decks with QP. So, just like a card, quiz[i] has a question, options and correct answer. QP varies from ‘0’ to ‘5’ just like deck numbers in LS. So, if a card is in deck 1 in LS, it can be represented through QP = 1 or quiz[i].p=1.

Leitner system BTB Algorithm

Card in Deck 1 quiz[i].p=1

Card in Deck 2 quiz[i].p=2

Card in Deck 3 quiz[i].p=3

Card in Deck 4 quiz[i].p=4

Card in Deck 5 quiz[i].p=5

Table 3-1. Representation of Leitner system decks in BTB Algorithm as question points.

In LS, a card is changed from deck 1 to deck 2 if player could remember that card correctly. Here.

If the player answers the question right then QP is change from 1 to 2.

// quiz[i].p = 1

if( player_clicked == quiz[i].correct ) {

quiz[i].p++;

}

// quiz[i].p = 2

And vice versa if player answers the question wrong

else { // quiz[i].p = 2

quiz[i].p--;

} // quiz[i].p = 1

Because it is an integer in the code unlike decks, the QP keeps increasing for a question whenever player answers it right. As the card is declared as mastered once it reached deck 5, we also must restrict the question from repeating once its QP is 5. Similarly it cannot go below its initial value that is 0. So the code becomes,

if( player_clicked == quiz[i].correct ) {

if(quiz[qn].p<6)

quiz[i].p++;

}

else if(quiz[qn].p>0){

quiz[i].p--;

}

Figure 3-2. Flowchart of question points changing based on player’s answers

After QP is increased or decreased, we need to display next question. But, there are different situations here to choose the next question. Next question must be the one player hasn’t memorized yet. We cannot display a question that player has already mastered i.e. the next question should be chosen whose QP isn’t 5.

change_question=function() {

qn = Math.floor(Math.random() * (max - min + 1)) + min;

if( quiz[qn].p==required p)

qn = change_question();

return qn; }

Where qn= question number

Min = least question number (0)

Max = Total questions (Entered by teacher)

Math.random() function creates a random decimal number between 0 and 1 excluding 1.

Multiplying it by (max-min+1) gives us a number between our range. For example, if I want a

number between 1 and 10, min will be equal to 1 and max is equal to 10. Now, if Math.random()

gives us a decimal number 0.78, then,

Math.random()*(max-min+1)= 0.78*(10-1+1)= 7.8

Math.floor() function gives a closest integer which is less than or equal given number in brackets.

For example,

Math.floor(2.33) = 2 or Math.floor(-3.45) = -3

So, Math.floor(Math.random() * (max - min + 1)) + min = Math.floor(7.8) + 1 = 7+1=8.

Which is our required number within our question number range. The next step is checking if this question number’s QP is less than 5. If it’s 5 then we have to generate another random number i.e.,

if( quiz[qn].p==5)

qn = change_question();

This is repeated until we get a question number whose QP is not equal to five. In other words, this question hasn’t mastered yet by player. When we get such number then it is returned

return qn;

Through this ‘change question function’, the algorithm repeat questions whose QP is less than 5 until it becomes 5 i.e. all questions are mastered. We check if player has mastered all the questions using checker Boolean as follows.

var checker = true;

for(i=min;i

if(quiz[i].p!=5){

checker = false;

break; } }

Each time a question is answered, we have to check if all questions have been mastered or their

QP = 5 before going to ‘change question function’. So, each time we initiate a Boolean variable called as checker which is set to ‘true’ initially.

Using a ‘for’ loop and a ‘if’ function, we check if the QP or quiz[i].p is equal to 5 for all questions. During this if any of the question’s QP is not equal 5, then checker’s value is set to false. If checker’s value is set to false at any point, then we come out of function using ‘break’ keyword because there is no use in checking the QP of next questions if any one question has less than 5 QP.

After this function, if checker is still true then it means that QP of all questions if 5. In

other words, all questions are mastered by the player. Then the leitner algorithm ends and the

application moves to next level where we test if player can answer all the questions he learnt during

this algorithm correct.

if(checker == true){

//end game 1 and Leitner algorithm;

// start game 2 or test level;

}

We will discuss more about the game 1(learn level) and game 2 (test level) in game design

document section.

4. GAME DESIGN DOCUMENT

4.1 Overview

Beat the Books (BtB) is an interactive gamified quiz application where the primary gameplay is answering questions indirectly through playing game than the traditional ways of clicking on options. The application consists of two games in the form of it known as ‘Learn’ level and ‘Test’ level. The primary objective of these two levels is to answer quiz questions through game play.

Once the player enters the learn level, he plays a bee catching game to answer questions. After completion of this level he enters the test level where he answers questions by catching eggs. I will

discuss about both the levels and their significance in detail in following topics.

The entire application is set in an animated animal cartoon themed environment. The

characters and interface are presented as simple illustrations and overall feel of the game is

maintained as child friendly, simple and funny.

4.2 Target Platform

BtB is a web application developed using HTML5 and JavaScript programming languages. Most

of the modern browsers like Google Chrome and Mozilla Firefox should be able to run this

application without any problem.

4.3 Visual Style

All the visuals in this application are made keeping in mind the nature and aesthetics pleasing to

children. The style is maintained simple with less details when it comes to character design or any

other visual assets.

4.4 Assets

As the primary objective of this project is to use LS in gamified learning environment for kids and not about the visual graphics, most of the assets used in this game are borrowed from various license free websites. Some of these assets were modified using photoshop and illustrator according to the style and requirement in game.

4.4.1 Characters

Most of the characters are designed as animals like frog, bees, cow, owl, hens etc. These characters each have their own game mechanics and contribute to the gameplay. These characters are designed as cartoonlike and are made simple. Players can change the appearance of some characters through rewards. Once a player unlocks a reward, he can change the appearance of frog and bees. There are a total 3 types of frogs and bees in the game. Once unlocked, player will have a combination of characters he can choose from.

Figure 4-1. Characters

4.4.2 Backgrounds

The backgrounds during the menu screen, pause screen, learn level and test level are also set in a cartoonlike environment to maintain the feel of being in a fictional animal kingdom. The backgrounds of learn level and test level can changed once unlocked through rewards.

Figure 4-2. Main backgrounds for different levels

4.4.3 Colors

Bright colors are chosen to appeal to kids. Children usually get attracted to bright colors. According to the American Optometric Association, children distinguish bright colors and contrasting colors more easily than others as they stand out in their field of vision. Children like brighter colors from early age as their vision is not fully developed. As children grow, the things with bright colors interest and attract them. Colors also have an impact on their mood and helps them to remember some things. It’s been proven that children can learn through color for example to identify shapes,

sort things and associate other objects with colors. [1]

4.4.4 Font

Fonts in this application are also used to suit children. Most of them are chosen based on the

handwriting of children. They are simple and not so symmetrically shaped. Some of main fonts

used in this application are School bell and Fun Sized for title and instructions, KG Second

Chances Solid for buttons, Berlin Sans FB Demi for some assets and Arial for question and

answers.

Figure 4-3. Different fonts used

4.4.5 Buttons

All the buttons in BtB are designed to be of same style. Each button except lock has secondary image with the text or symbol on the button in white color. So, whenever the mouse hovers over the button, the secondary image is switched to create extra interaction for players. This shows that the player is in the area range of button and can click. Music button changes the symbol inside it whenever it is clicked to have a visual feedback that music is off or on.

Figure 4-4. Buttons and their respective secondary images during mouse hover

4.4.6 Other Assets

Some of the assets to display text and In-game HUD were chosen to be wooden to maintain that forest and animal kingdom theme. Bronze, silver and gold stars were created to give the player a piece of appreciation for answering questions in a row. Other assets like coin, bulb, bubble, egg and timer are also designed to be cartoonlike to maintain consistency of the application.

Figure 4-5. Other Assets

4.5 Software used:

4.5.1 Photoshop:

Photoshop was used to create most of the assets for this application. Some assets were obtained from online licensed stock images from various websites.

4.5.2 Notepad++:

Notepad++ editor was used to write all the code for this application. Code was separated into

various sections or scripts based on their functions to make it more modular.

4.5.3 Mozilla Firefox:

After of the code of written in Notepad++, html file was executed and tested in Mozilla Firefox

web browser and its console window was used to identify the errors in code.

4.6 Audio

All the audio files like background scores and sound effects in this application are borrowed from

www.freesound.org website which provides free creative commons licensed audio files. Every

audio file is played through a separate function which is called every time a sound must be played.

This way the overall sound behavior can be controlled through this single function.

4.7 UI and UX design

Figure 4-6. Flowcharts of navigation between different screens

In this section, I’m going to discuss the different elements of User Interface in each screen and the

workflow. Above flowchart shows the navigation between screens. There is a total of nine screens

in this application. Below is a list of these screens.

• Menu Screen

• Edit Questions Screen

• Create Test Screen

• Learn Level Instructions Screen

• Test Level Instructions Screen

• ‘Learn’ Level Screen

• ‘Test’ Level Screen

• Pause Screen

• Rewards Screen

• End Screen

4.7.1 Menu Screen

Figure 4-7. Main Menu screen

The first screen players are going to see once they start the application is the menu screen. It shows

the main title ‘Beat the Books’. Menu screen has four buttons to move to the next screen and a

music control button.

Learn: Learn button takes you to the learn level instructions screen. Learn level is the game where player is going to answer questions to learn.

Figure 4-8. Button that starts ‘Learn’ level

But if the teacher hasn’t entered any questions yet, it shows the following warning to create a course.

Figure 4-9. Warning to show that there are no courses available to learn

Test: Test button takes you to the test level instructions screen. Test level is the game where player is going to give a test on the questions he learnt during the learn level.

Figure 4-10 Button that starts ‘Test’ level

But if the teacher hasn’t created any test for the player to answer yet, it shows the following warning to create a test.

Figure 4-11. Warning to show that there are no tests created

Edit Questions: This button takes teacher to the edit questions screen where you can enter or edit questions for the quiz.

Figure 4-12. Button to enter/edit questions

Create Test: This button takes teachers to create test screen where they can create a test from the questions entered before.

Figure 4-13. Button to create a test

But its logical that one cannot create a test if there are no questions entered already. So, if teachers try to create a test without entering questiond first, application gives following warning.

Figure 4-14. Warning shown when teacher tries to create a test without entering questions first

Music: With this button, player will be able to turn music on and off. The symbol inside this button also changes to show the status of music visually.

Figure 4-15. Buttons to turn music on/off

4.7.2 Edit Questions Screen

Figure 4-16. ‘Edit Questions’ screen

Edit Questions screen is the place where teachers will be able to enter their own questions and four options. They can come back to this screen and edit question & options anytime. Each option has a radio button to it. Teacher selects the correct option to a question using this radio button. Teachers can increase or decrease the number of questions according their requirement using plus and minus buttons below the lowest question

Figure 4-17. Buttons to add or delete a question

After entering all the questions and answers, teachers can save these questions using submit button

at the bottom of the screen. But before submitting, the application checks if they entered all

question & options and properly selected the right answer for each question. If there’s anything

missing, the application won’t submit the questions and gives a warning as follows.

Figure 4-18. Warning to enter a question in textbox before submitting

Above warning is shown if teachers leave a question blank or try to submit without entering at least one question.

Figure 4-19. Warning to fill all options before submitting.

Above warning is shown if teachers forget to fill in all the options for a question.

Figure 4-20. Warning to select a correct answer for a question before submitting

Above warning is shown if teachers forget click a radio button to select a correct option for a question.

Load Demo Questions is button for application testing purposes. It loads five pre-defined questions into the form. This screen also has a back button which helps teachers go back to menu screen without saving the questions.

4.7.3 Create Test Screen

Figure 4-21. ‘Create Test’ screen

Create test is the screen where teachers can select a few or all questions they want to be on a test for the player to answer. This screen loads the questions teachers have entered using ‘Edit

Questions’ screen and displays a checkbox beside each question. Teachers must check the box of questions which they want to be in the test. After they are done selecting their questions, they can click submit button to create a test with selected questions which player will answer in ‘Test

Level’. If teachers try to submit without selecting any questions, they will get following warning.

Figure 4-22. Warning to select at least one question to create a test

This screen also has a back button to go back to menu screen without creating a test.

4.7.4 Learn Level Instructions Screen

Figure 4-23.’Learn’ level instructions screen

This screen shows the instructions for players to play the learn level. It explains how to play the game, collect coins, track score activity, change backgrounds, earn stars, level up, use hints, interact with various UI elements in learn level and understand various progress bars. After reading the instructions, players can start playing the learn level using play button at the bottom right of the screen. This screen also has a back button using which player can go back to menu screen.

4.7.5 Test Level Instructions Screen

Figure 4-24.’Test’ level instructions screen

This screen shows the instructions for players to play the test level. It explains how to play the game, collect coins, track score activity, change backgrounds, earn stars, level up, use hints, interact with various UI elements in learn level and understand various progress bars. After reading the instructions, players can start playing the test level using play button at the bottom right of the screen. This screen also has a back button using which player can go back to menu screen.

4.7.6 Learn Level

Figure 4-25. ‘Learn’ level screen

This is the most important level in this application. This is where the player learns the questions using LS algorithm explained previously. This level has the player controlled main character – frog sitting at the bottom center of the screen. Players control this character to answer questions and collect coins. This will be explained in detail in gameplay section. Bees with letters A, B, C,

D which are clicked to select options for a question are flying across the middle section of screen.

Questions Progress Bar:

Figure 4-26. Progress bar to show questions left for level completion

Question progress bar shows the remaining number of questions to be answered to complete this level. Once this progress bar reached its maximum length, learn level ends. More information about this progress bar will be explained in game mechanics section.

Question Board:

Figure 4-27. Question board

Questions board displays the questions and options. The colors yellow and blue distinguish the question and option text boxes. These text boxes are placed on a wooden plank image which hangs from top of the screen.

Score Progress Bar:

Figure 4-28. Progress bar to display score

Score progress bar shows the required number of coins to be collected to unlock a next reward.

This is placed above the question board. More information about this progress bar will be explained in game mechanics section.

Hint Board:

Hint board shows the number of hints remaining that player can use in this level. Hint Board is placed at the top right corner of the screen. More information about this board and its purpose will be explained in game mechanics section.

Figure 4-29. Hint Board to display number of hints

Use Hint Button:

Using this button, player can use a hint to answer a difficult question. This button is placed hanging from the hint board. More information about the interaction with this button will be explained in game mechanics section.

Figure 4-30. Button to use hint

Player Level Board

Player Level board shows the player the information about his current level of expertise in answering questions. This is like an experience level in games. Level board is placed at the top left corner of the screen and is divided into three parts. Stars, Level Progress Bar, Current Level

Display. More information about these functions are explained in game mechanics section.

Figure 4-31. Player level board

Change Board:

Change board contains buttons to change backgrounds, bees and frog characters once they are unlocked. This board is hanging below level board. More information about the function of these buttons will be explained in game mechanics section.

Figure 4-32. Change board

Pause Button

Player can pause the game anytime using the pause button. This will take them to the pause screen where player will have further options. Clicking on pause button freezes the game progress and blocks player from answering questions. Pause button is situated at the top left corner of screen above level board.

Figure 4-33. Pause button

Help Button:

Players can refer to instructions to play the current game if they need help during the game anytime using the help button. This will take them to the instructions screen of current game. Clicking on help button freezes the game progress and blocks player from answering questions. Help button is situated at the top right corner of screen above hint board.

Figure 4-34. Help button

4.7.7 Test Level

Figure 4-35. ‘Test’ level screen

This is the level where the players answer the questions they learned in previous level. The main character controlled by players to answer questions is replaced with a farm boy holding a basket.

Players control this character to answer questions and collect coins. 4 hens laying eggs periodically are sitting on a shelf at the top of the screen. The question board is moved down below these hens.

Eggs with letters A, B, C, D dropping down from hens are caught in the basket to answer questions.

This will be explained in detail in gameplay section. All other UI elements are same as learn level except a few. Change board doesn’t have changes bees and change frog button. Help button display instructions of test level and number of hints are reset to two.

4.7.8 Pause Screen

Figure 4-36. Pause screen

Pause Screen will be launched once player clicks the pause button in either of learn or test levels.

Clicking on help button freezes the game progress, animation and blocks player from answering questions. Pause screen has 4 buttons. They are

Music: Player can turn music on and off anytime using this button on pause screen.

Home: Player can return to menu screen anytime using this button. This will stop the current playing game. If the player is on learn level, the progress is saved and continued once player returns to play the game again. Progress includes number of hints, questions points, player level, coins collected, stars earned, rewards unlocked. But if the player is on test level, the game will reset and player must start from question one.

Back: Back button resumes the game. The animations start and screen is clear to answer questions.

Collectibles: This button will take the player to rewards screen. More information about this will be explained in reward screen section.

4.7.9 Reward Screen

Figure 4-37. Rewards/Collectibles screen - locked

Rewards screen is the place where player can see the rewards he unlocked. The way a player can unlock a reward will be explained in game mechanics section. I have a total of eight collectibles that player can unlock. Initially all these eight slots have images with locked symbols. Once player

74 unlocks a reward, the respective slot will change image to the content he unlocked like a background or any character.

Figure 4-38. Rewards/Collectibles screen - unlocked

Reward screen has two buttons to interact with. They are

Back: Back button resumes the game. The animations start and screen is clear to answer questions.

Cross: The cross button will take player back to pause screen.

4.7.10 End Game Screen

Figure 4-39. End screen

After completing the test level, player will reach the end screen where his score and current player

level is shown. The end screen has ten stars with some of them highlighted. The number of stars

highlighted depends upon how well the player has performed in test level. For example, if there

are ten questions in the quiz and player answers seven of them right, then he will get seven stars

at the end of the level. End screen also shows the game level of player by the end of the game

along with a congratulation note. Below this note there are two buttons player can interact with.

They are

Replay: Using this button, player can replay the test level. They can try to earn a better score or

simply replay the game for fun. This will reset the player progress back to the same as when player

started test level.

Home: Using this button, player can return to menu screen and replay any of the learn or test

levels.

4.8 Gameplay

4.8.1 Learn Level:

Once the player clicks the play button on learn level instructions screen, the learn level or bee catching game begins. During the first time the game launches, following are initiated or loaded before player starts playing the game.

1) The questions are loaded from the edit questions form.

2) All the question points are set to zero.

3) Player will be given three hints to use throughout the game.

4) Score progress bar, level progress bar and questions progress bar are initiated at zero.

So, after these features are initiated, assets load and the game animation is turned on. That’s when the bees start flying across the screen and frog can be controlled to move horizontally across of the screen.

Once the game starts, the main objective of the player is to answer questions by catching bees. In this level, the questions are repeated and follow the leitner algorithm I discussed earlier.

So, the game ends once the player memorizes all the questions using LS. First the player sees the question and the four options present below with letter A, B, C, D at the beginning of each answer respectively. These four letters are also on the bees flying across the screen. So, the player must select the option he thinks is right by clicking on the bee with matching letter. For example, if the player thinks that the option A is the right answer, he should click on the bee with letter A i.e., the purple bee in this case. Then the game checks if the selected option is the right answer or not.

Whatever the answer might be once the player clicks a bee, he is temporarily blocked from answering again until next question is displayed. If it’s a right answer, the correct option blinks

77 green and bee catching event starts.

Once bee catching event is activated, the frog gets the co-ordinates of the specific bee, frog’s current co-ordinates are stores and the frog jumps toward the bee to eat it. Once the frog position reached the bee position, the frog mouth animation is changed from still image to a mouth opening gif to create an effect of frog eating the bee. Once this animation is completed and the frog mouth is wide open, the bee image disappears from the screen to show that the frog has eaten the bee. At this point, the bee’s co-ordinates are given to a coin creating event and it is triggered to create two coins. So, two coins appear the exact same location where bee disappeared and start jumping randomly in either direction. But the frog will not be able to collect them yet as frog is still at the same position as bee. Now the frog mouth is changed from mouth opening to mouth closing animation and the frog begins coming down to its initial position on ground using the frog’s co-ordinates stored earlier.

Now the frog is back to its position, its mouth is changed back to normal and it is enabled to collect coins now that the coins have already began jumping towards the either sides of screen.

The coins can be collected by moving the frog horizontally across the screen using ‘right’ and ‘left’ arrow keys such that the frog and coin come in to contact with each other. Once they collide, the coin image disappears and its status changes to collected. The score bar increases. Player must collect these coins before they move out of the screen. More information about this will be explained in game mechanics section. But, the disappeared bee must be still replaced to have four bees for the next question. This is done by making the disappeared bee entering the screen from left side of the screen. This way everything is set ready for the next question to be answered. If the player answers the question wrong, the selected option blinks red and right option blinks green.

During this bees and frog remains same. Once, the options blink 3 times, next question is displayed

78 and player is again ready to answer questions.

Figure 4-40. Frog eating bees

After player is done with answering questions the game will move to the next level i.e. test level if there are any tests available or gives following warning if there are no tests available to answer.

Figure 4-41. Warning shown after ‘Learn’ level is completed when no test is created

4.8.2 Test Level:

Just like the learn level, test level also has the same objective, to answer questions indirectly through gameplay. But, just like the name, test level is a test to the player to see how efficiently he/she memorized questions during the learn level. So, the questions won’t repeat in this level and do not follow leitner algorithm but are given in a sequential order just like a normal quiz. But the way to answer these questions is by catching appropriate eggs in the basket. So once the game starts, following features change.

1) Number of hints is set to two, irrelevant of how many player has earned in previous level.

2) Change bees and change frog buttons are removed from the change board.

The test level is an egg catching game. Once the game starts, a question is displayed and player is given five seconds to read the question. During this, the text box of question blinks alternatively between yellow and blue color as to grab the attention of player to read the question. Eggs won’t start coming down until these five seconds are done. So, player won’t have anything to play other than read the question during this time.

Figure 4-42 Questions box blinking in ‘Test’ level

After these five seconds, the eggs animation is turned on and hens lay eggs. Eggs start coming

down with letter A, B, C, D on them. The player controls the farm boy holding a basket character

to catch these eggs in the basket. For example, if the player thinks that the option A is the right

answer, he must move to the position directly below egg A before it reaches the point below the

basket to catch it. If the player catches the wrong answer or doesn’t catch any egg before all the

eggs past the bottom line of the screen, it considered as false and players loses a point and game moves to next question. The options blink just like learn level for right and wrong answers. The player is also blocked from catching another egg once he caught one. If he catches a right egg, just like bees in learn level, eggs also emit two coins for player to collect. Player can collect these by moving the main character horizontally across the screen and touch the coins before they pass out of the screen.

Figure 4-43. Player catching eggs

4.8.3 Challenges and Rewards

To motivate kids for playing these games and make them more interactive and fun, I have built two challenges that player can complete which will provide extra gamified experience and unlocks some collectibles for the player to collect and use in game. These challenges are

Coin Collection

Whenever player answers a question right either by clicking a bee in learn level or catching a egg in test level, two coins are created at the current position of bee or egg. These coins are randomly assigned a direction and speed along this direction. Physics-like gravitational force and elasticity of floor act on these coins and make them jump while towards the sides. Players try to collect these coins by moving horizontally towards the coins using ‘right’ or ‘left’ arrow keys. While coins are still on the screen, a collision function keeps checking if the main character and either of the coins come into contact. Once it detects a collision, the coin disappears and player score increases by two points.

Figure 4-44. Player collecting coins

As player collects coins, score bar fills up and once it reaches the target, reward event is triggered.

Player unlocks a collectible like a background or new characters for bees or frog. An owl character appears at the bottom left side of the screen with a dialogue box giving information about what the player has unlocked and how to access it. More information about how to use these collectibles is explained in game mechanics section. Player can also check his collectibles anytime using collectibles button from pause screen explained previously. After the reward event, the score bar is set back to zero and the value of target increases so that player must collect more coins this time

to unlock next reward. This way it becomes more and more difficult to unlock a new reward than

the previous one.

Figure 4-45. Owl dialogue to show that a background is unlocked

Level Up

Apart from collecting coins through answering questions which gives only two coins at a time, there is another challenging way to collect bulk number of coins at a time and also a hint. That is to answer questions right in a row. If a player answers questions right three times a row, he will

83 receive a bronze star which shows up on the level board. A red star also zooms in at the center of screen to show the player has earned a new star. If the player answers five and seven questions right in a row, he gets a silver star and a gold star respectively. The level progress bar also starts to fill up based on type of star a player currently has. It fills up slowly if he has a bronze star to quickly if it’s a gold star. If player breaks this chain of right answers, he loses a star and the level progress bar pace also decreases. So the challenge is to answer questions correctly in a row as long as possible to level up quickly.

Figure 4-46. Star when answered questions in a row

Once the level progress bar reaches the target, player levels up. If the player is at a higher level by the end of game, it means that he is efficient at memorizing questions. More about what is a player level is explained in game mechanics section. Once the player levels up, a star board comes down on the screen displaying the game level player has achieved now. The owl character also shows up with information about this game level.

Figure 4-47. Level up

After the star board is gone, the regular game freezes except for the main character, player is blocked from answering questions and game won’t move to the next question. Instead a special bonus event known as ‘bubble event’ is triggered.

Figure 4-48. Bubble event

The bubble event lasts 15 seconds and the goal of this bonus game is to pop as many bubbles as possible within given time. Popping each bubble emits two coins from the same position where player has popped a bubble. Player can move his character horizontally across the game to collect these coins. Given that there are only 15 seconds to pop as many bubbles as possible and collect coins, player must be very quick at doing both activities simultaneously to make most of this event.

This way he can unlock collectibles quickly. Another feature about the bubble event is that there will be one bubble with a hint icon in it which player can pop to collect a hint and use it later. So, level up is an efficient way to collect a hint and bunch of coins. Once the 15 seconds are done, all the bubbles pop without giving any coins bringing the bubble event to an end. After this regular game starts, game moves to next question and player can answer questions once again.

Figure 4-49. Bubbles emitting coins when popped

4.9 Game Mechanics

4.9.1 Common Mechanics in learn level and test level

1. Coins

Coins are dropped whenever the main character eats a bee or catches an egg. Refer to coin

collection section under challenges and rewards for more information about coins.

Figure 4-50. Coin

2. Stars

Players can get stars by answering questions in a row. Collecting stars helps players to level up and unlock rewards. Refer to level up section under challenges and rewards for more information about stars.

Figure 4-51. Bronze, silver and gold stars

3. Progress Bars

3.1 Question Progress Bar

This depends on the number of questions their teacher puts in the quiz. The way question progress increase is different for learn level and test level. For learn level, according to the algorithm explained in LS, each question must be answered at least five times. For example, if teacher puts

10 questions into this game, the player must answer at least 50 times. As he answers each question, the level progress bar increase its length by 1/50th. If the player answers the question wrong, the length of progress bar decreases by 1/50th. Player can check the progress of the level through the length of this progress bar. Once the player has memorized all the questions, the question progress bar will be full and player can move to next screen. For test level, questions won’t repeat so player has to answer each question only one time. So, the question progress bar increases by 1/10th for each question answered.

3.2 Score Progress Bar

Score Progress bar shows the current score achieved by collecting coins and required score to reach the target visually. Length of the bar increases for coins collected or questions answered.

Once length of the bar reaches maximum, it resets to zero and player unlocks a reward such as backgrounds or characters.

3.3 Level Progress Bar

Level progress bar shows the current level of player and fills up based on the star achieved by player for answering questions in a row. More about answering questions in a row and events triggered after level progress bar fills up are explained in level up section under challenges and rewards. Player level is a unique achievement name given for answering questions right

88 continuously. This shows the excellence of player in memorizing questions. If the player is at a higher level by the end of the game, I can conclude that he is a quick learner.

Player level can also be used as a variable to compete with other players. Level up is a challenging activity and requires players to concentrate on the application effectively. It also adds a gamified experience to the application. The level number and level name given to player once he achieves a level progress bar target are,

0: Scientist

1: Aristotle

2: Pythagoras

3: Darwin

4: Hawking

5: Galileo

6: Newton

7: Tesla

8: Einstein

All the players start at level 0: Scientist and must make their way to level 8: Einstein which is the highest level a player can achieve.

4. Background & Character Unlocks

Figure 4-52. Buttons to activate unlocked collectibles

Whenever player reaches target on a level progress bar, an extra background or character image

for bees or frog is unlocked which can replace current background or character image. More

information about how to unlock collectibles is explained in coin collection section under

challenges and rewards. However, I will discuss how to use these collectibles here. Once unlocked,

a player can change a background or character image for bees or frog using change board. Change

board has three buttons on it. They are

4.1 Change Background: Changes the background of the screen to a unlocked image from

collectibles.

Figure 4-53. Changing unlocked background

4.2 Change Bees: Changes the bees character to an unlocked image from collectibles.

Figure 4-54. Unlockable bee characters

4.3 Change Frog: Changes the frog character to an unlocked image from collectibles.

Figure 4-55. Unlockable frog characters

5. Bubble Event

After player level ups, an event will be triggered where a lot of bubbles fill the screen from both sides. Player can pop these bubbles which then drop coins. One special bubble has a hint item in it. Popping this bubble will reward player with an extra hint which they can use anytime. More information how to trigger this bubble event is explained in level up section under challenges and rewards

6. Hints

Players have a ‘use hint’ button at the top right corner of the screen below the hint board which they can click anytime given that they have hints to use. Hints can be obtained by playing bubble event. When a hint is activated, all the four options start blinking and game removes two options.

Figure 4-56. Blinking options when hint is used

Now the player has only two options to choose from which makes it easy to answer the question.

A player can use only one hint per question. Once the player uses a hint, the number of hints on hint board decreases by one given that number of hints is greater than zero before activating hint.

7. Owl Master

Owl master is a character that guides the player through the game. Owl master appears whenever a player unlocks a reward or levels up. Owl master gives information about what a player has unlocked and how to access it or which level a player has achieved. Owl master also warns player when he cannot use a hint.

Figure 4-57. Owl master with dialogue box

8. Options blinking colors to Red and Green

Whenever player clicks a bee in learn level or catches an egg in test level, if the answer is correct the respective option blinks green color.

Figure 4-58. Options blinking green when answered correct

If the answer is wrong, chosen option blinks red with correct option blinking green.

Figure 4-59. Options blinking red & green when answered wrong

This gives player an indication about his chosen answer being right or wrong. If he answers wrong, he can know the right answer through green blinking option and may try to remember it next time.

4.9.2 Learn Level Mechanics

1. Bees

Bees with letters A, B, C, D on them are the flying objects across the screen player must click to

answer a question. If a player clicks the right bee, frog eats them and bees emit coins which player

can collect. The disappeared bee returns from the left side of the screen to be part of next question.

If player clicks the wrong bee, nothing happens to the bee. More information about them is

explained under learn level game play section.

2. Frog

Frog is the main character in learn level that catches and eats the bee whenever player clicks on

correct bee. Frog can also move horizontally across the screen to collect coins dropped by bees.

More information about frog behavior is explained under learn level game play section.

4.9.3 Test Level Mechanics

1. Eggs

Eggs are objects similar to bees in learn level. They drop down from hens at the top of the screen with letters A, B, C, D on them. Farm boy character should catch them in his basket to answer a question. If eggs pass the bottom line of the screen, it means the player hasn’t answered the question and is considered false. Eggs also give away coins when main character catches them.

More information about them is explained under test level game play section.

2. Farm Boy

Farm boy is the main character in test level who catches the falling eggs in his basket to answer a question. Farm boy can also move horizontally across the screen to collect coins dropped by eggs.

More information about Farm boy behavior is explained under test level game play section.

4.10 Controls

In BtB, the main way to interact the application is with mouse. Player interacts almost everything with mouse click. The only other controls which player uses to move the main character horizontally across the screen to collect coins are ‘right’ and ‘left’ arrow keys. Even though the current version of application is made only for desktops and laptops, having everything on screen that player can click on to interact with application makes it easy in the future to use from other devices which don’t have a keyboard, like touch screen mobiles and tablets.

5. CONCLUSION

The purpose of this project is to use spaced repetition in helping kids retain information for a longer period. I used LS, a SIR model to implement this project. Primarily, LS is used for flashcards and it is widely applied in learning languages. I found early education to be an important area where we can use spaced repetition. As the purpose of LS is to help recall information, this technique would be significant in child education. To make the process of learning through LS interesting and fun for kids, I decided to gamify this learning experience. So, I developed BTB to implement this technique which also gamifies the learning experience.

BTB has features to help both teachers and students in the process of education. Teachers can use BTB as teaching tool and embed it their teaching process. They can form a set of questions from any topic they want their students to learn and input these set of questions or course into

BTB. Teachers also have an option to create a test from all or chosen questions. Teachers can then ask their students to play BTB and see how they perform. The significance of LS is that it doesn’t require an instructor to learn. So, BTB can provide a motivating experience for students to learn on their own. BTB provides features to examine the performance of students and opens up a whole new research method to analyze much more information in terms of how a student is performing on different topics under various conditions. BTB can make the learning environment fun for both teachers and students. BTB has game mechanics and interesting gameplay to keep students distracted from the fact that they are learning. It provides fun and motivation to answer questions.

Rewards system upon answering more number of questions correctly can further enhance the game experience. I developed BTB as a learning tool which is flexible for further improvement. The idea is to propose an improvement in the learning process which is informative and at the same

95 time fun for students. In this generation of rapid advancements in science and technology, education is a key area to apply these advancements. Early learning is crucial in educational process and BTB makes an attempt to make learning fun and interactive.

5.1 Future Improvements

There are further improvements which can be done to enhance the gaming experience and ease of use. One of the major areas of enhancements lie in User Interface (UI). We can use separate login authentication for users (students) and administrators (teachers) to remove any confusion and unauthorized access, like, denying access to modify questions or test for a student. Code can be further improved to create multiple sets of questions and tests instead of just one. This way, player can access multiple courses or tests at any time. Similarly, we can make multiple changes in the game design, like, including new collectibles or limited edition items to motivate students to engage longer in the game. We can use famous superhero or cartoon characters which children like, to make the game interesting for them to play. Interesting stories can be told in game to keep children immersed, like, creating a game with four doors in which the correct option tells you the next part of the story and wrong answer kills the player. Different types of games can be used to teach different topics, such as, mixing chemicals to answer questions while learning chemistry.

This way it’s more relevant to the topic. BTB can also be used by parents, guardians or anyone who wants to teach kids any information. Apart from these, there are many further improvements which can be made to enhance the learning experience for the children while keeping the algorithm same.

LIST OF REFERENCES

[1] Phillips, Deborah A., and Jack P. Shonkoff, eds. From neurons to neighborhoods: The science of early childhood development. National Academies Press, 2000.

[2] Singh, Kamal Deep. "Computers in Education." 22 February 2009. Web.

[3] Bangert-Drowns, Robert L., James A. Kulik, and Chen-Lin C. Kulik. "Effectiveness of computer-based education in secondary schools." Journal of computer-based instruction (1985).

[4] C N Trueman "The Personal Computer". The History Learning Site, 2015. Web.

[5] Molnar, Andrew. "Computers in Education: A Brief History." The Journal. Public Sector

Media Group, n.d. Web. 08 Sept. 2014.

[6] Pannabecker, John R. "For a history of technology education: Contexts, systems, and narratives." (1995).

[7] National Research Council. A framework for K-12 science education: Practices, crosscutting concepts, and core ideas. National Academies Press, 2012.

[8] Wikipedia contributors. "Serious game." Wikipedia, The Free Encyclopedia. Wikipedia, The

Free Encyclopedia, 2 May. 2017. Web. 2 May. 2017.

[9] Abt, Clark C. Serious games. University Press of America, 1987.

[10] Susi, Tarja, Mikael Johannesson, and Per Backlund. "Serious games: An overview." (2007).

[11] Wilkinson, Phil. "A Brief History of Serious Games." Entertainment Computing and Serious

Games. Springer International Publishing, 2016. 17-41.

[12] Djaouti, Damien, Julian Alvarez, and Jean-Pierre Jessel. "Classifying serious games: the

G/P/S model." Handbook of research on improving learning and motivation through educational games: Multidisciplinary approaches 2 (2011): 118-136.

[13] Laamarti, Fedwa, Mohamad Eid, and Abdulmotaleb El Saddik. "An overview of serious games." International Journal of Computer Games Technology 2014 (2014): 11.

[14] Press Association. " Pokémon Go can boost health by making gamers exercise, says GP."

2016. Web.

[15] Alvarez, Julian, et al. "Serious Games: Training & Teaching-Healthcare-Defence & security-

Information & Communication." IDATE, France (2010).

[16] TrainingIndustry.com. "Forgetting Curve." Web.

[17] Murre, Jaap MJ, and Joeri Dros. "Replication and analysis of Ebbinghaus’ forgetting curve."

PloS one 10.7 (2015): e0120644.

[18] Finkenbinder, Erwin Oliver. "The curve of forgetting." The American Journal of Psychology

24.1 (1913): 8-32.

[19] Wikipedia contributors. "Spaced repetition." Wikipedia, The Free Encyclopedia. Wikipedia,

The Free Encyclopedia, 19 Apr. 2017. Web. 2 May. 2017.

[20] Gupta, James. "Spaced Repetition: A Hack to Make Your Brain Store Information." 2016.

Web.

[21] Frank, Thomas. "How to Remember More of What You Learn with Spaced Repetition."

August 7, 2016 2016. Web.

[22] Wikipedia contributors. "Leitner system." Wikipedia, The Free Encyclopedia. Wikipedia, The

Free Encyclopedia, 30 Dec. 2016. Web. 2 May. 2017.

[23] Butler, Andrew C., et al. "When additional multiple‐choice lures aid versus hinder later memory." Applied Cognitive Psychology 20.7 (2006): 941-956.

[I] https://www.trainingindustry.com/wiki/entries/forgetting-curve.aspx (Already there)

[II] http://www.flashcardlearner.com/articles/the-forgetting-curve/ (Already there)

[III]http://www.secretgeek.net/spaced_repetition_kids

[IV]http://colombianaccents.co/science-and-technology/spaced-repetition-systems-the-key-for- permanent-learning.html

[V] http://christopher-brand.com/

[VI]http://www.unmotivating.com/beautiful-libraries-around-the-world/25-5-st-florian- monastery-austria-pt2/

[VII] http://www.mylearningplanet.in/spaced-repetition.php

[VIII] http://leitnerportal.com/LearnMore.aspx

[IX] https://vimeo.com/22715016

[X] https://play.google.com/store/apps/details?id=com.brain.power&hl=en

BIOGRAPHICAL SKETCH Santosh Vemula is a digital video producer and a visual artist. Currently he is a candidate for Master of Arts in Digital Arts and Sciences at the University of Florida with expected graduation date in August 2017. He holds a Bachelor degree in Electronics and Communication Engineering from Osmania University, Hyderabad, India. He draws inspiration from people who bring viewers into a world of imagination through storytelling. His goal is to express his thoughts visually, which is why he joined multiple organizations to bring ideas to life.

100