A Web App to Implement Gamification in the

Classroom
Proposal to K20
David Smith, Adam Smith, and James Smith
The University of Oklahoma
April 25, 2016

Executive Summary
Educators, especially those teaching kindergarten through high school,
struggle to keep their students engaged. In response to that need, our team
of three Computer Science majors from the University of Oklahoma would
like to develop a web application for teachers to implement gamification in
their classrooms. This application will allow teachers to manage their
students achievements online and award accomplishments with any one of
wide range of digital perks. These perks serve as the extrinsic motivation for
students to participate in class. Moreover, our application will be both easy to
use out-of-the-box with a set of default perks created in collaboration with
educators experienced with gamification and also very customizable with the
ability to create completely customizable perks. In addition to perks, users of
this application can create economies in which perks can be traded and
exchanged for other perks. In the same way as the perks, these economies
will have both default and customizable settings. Because this application is
targeted toward teachers, we are assuming a minimal level of technical
expertise and monetary resource. Therefore, the application will be very
intuitive to use, requiring no programming knowledge and minimal
instruction. In order to achieve this, we will use an agile development
methodology. We will develop the app in cycles, producing a testable
prototype every couple weeks. Testing the application with educators, we will
see the usability issues early on and ensure that the application is as
intuitive as possible. To solve the financial burden on teachers, our
application will be free and open source. This not only opens use of our app
to anyone willing to use it, but also the open source nature allows anyone to
contribute to the code and creation of perks and economies. By encouraging
sharing of perks, economies, and feedback among teachers, our application
will create a community of educators passionate about engaging their
students. They will be able to share ideas both within and without the
application, working together to more effectively teach.

Table of Contents
Executive Summary.............................................................................2
Introduction.......................................................................................4
Background................................................................................................4
What is gamification?...............................................................................4
Applications of gamification.......................................................................4
Opportunity...............................................................................................5
Purposes...................................................................................................5
Interviews.................................................................................................6

Proposed Program...............................................................................7
Methodology..............................................................................................7
Procedure..................................................................................................7
Road Map (May - July).................................................................................7
Feature List v0.1.........................................................................................7
Wire Frames...............................................................................................8
Implementation.....................................................................................10

Testing.............................................................................................11
Automated Testing..................................................................................11
Usability Testing.....................................................................................11
Educator Use Cases................................................................................11
Student use cases..................................................................................13

Budget & Qualifications......................................................................14

Budget....................................................................................................14
Qualifications............................................................................................15

References.......................................................................................16
Appendix..........................................................................................17

Introduction
There is an epidemic today of disinterest among students. We would like to create a
gamification application for teachers to increase engagement in the classroom. We
are seeking grant funding to be able to see this application to creation. With our
funding, we would hire designers to collaborate with us on the design. We want to
involve educators who use gamification so we can address their needs.

Background
What is gamification?
Gamification is the application of turning undesirable activities into games. Because
games are inherently entertaining, people will want to do them. We can therefore
use gamification to get people to do things that they would otherwise not want to
do. The most obvious example is in schools. Never has there been a majority of
students that have enjoyed school. Gamification, however, allows us to turn that
majority into a minority, by incentivizing students to do schoolwork under the
semblance of a game.
Because games involve willful interaction, they encourage future interaction.
Gamification cannot be a long-term solution. At some point, people just have to be
professional and do what needs to be done. But starting this process can be very
difficult. Gamification helps us ease people into this process by allowing people to
do it under a more harmless setting. In essence, gamification is a tutorial that
eases people into various settings. Over time, gamification elements can be
stripped away as people learn to do the corresponding activity without thinking
much about it. In the best scenarios, people retain the joy of doing the activity
without any gamification elements.

Applications of gamification
The ability of video games to captivate the attention of its audience has been
noticed and used in a variety of fields. The attempt to emulate this retentiveness of
users results in gamification - enriching products, services, and information
systems with game-design elements in order to positively influence motivation,
productivity, and behavior of users (Blohm and Leimeister 203, p. 1). Most notably
in recent years, fitness apps like FitBit track steps and create competitions between
friends. These programs award virtual awards or trophies when one reaches certain
goals. Not only are these approaches innovative, but also extremely effective.
NikeFuel made two million users burn more than 68 bn. calories (Blohm and
Leimeister 203, p. 1). However, the effectiveness of gamification is not limited to
fitness app. It has great potential and indeed has already shown its value in
educational environments. Richard Landers, a professor at Old Dominion University

used a gamification system called GradeCraft in his classroom and found that
across those approximately 400 students, 113 (28%!) willingly chose to take
optional multiple choice quizzes (Landers 2010). Gamification is an effective way
to keep students engaged in the material. It is important to note that gamification
describes adding a game-like structure around the existing elements of the
classroom, as opposed to moving all the teaching into a game, or Game-based
learning.

Opportunity
Although gamification is not a new idea, it is a recent development in education.
The youth has grown up with iPhone apps and games that are riddled with
gamification. We would be speaking to motivation that they act on outside of class.
A Gallup poll from 2015 shows student engagement in school dropping (Brenneman
2016). Only 32% of eleventh graders were engaged in the classroom. Keeping
students interested has always been a goal of educators. In the modern world of
constant stimulus from omnipresent technological devices, attention grows more
difficult to attain. There is a need - now more than ever - for new tools to keep
students interested in school. Engaging them with a world that gives them the
possibility to expand and learn more encourages those actions. These assignments
become more than a task that gives them a grade. We want to use this opportunity
to form them into learners and feed their curiosity. Gamification tools work, but
existing ones are difficult to use/too expensive. Education technology companies
are jumping on this opportunity as an economical gain. Our success and value lies
in these students having new ways to engage in the classroom. Our priority is
getting a suitable platform in more teachers hands.

Purposes

Create greater access to gamification platforms

Many people can benefit from gamification and we want to increase that
benefit
Reduce the barrier to entry into gamification platforms
Current gamification platforms can be difficult to get into. We want to
decrease that difficulty.
Relieve pressure and time on educators
Current educators spend a lot of time encouraging educational interest in
youth. If they suddenly do not need to spend as much doing this, they are
free to do other important things.
Promote long-term educational achievement in youth

This particular project will be designed for educators. We hope that our
gamification platforms will help youth develop self-interest in education,
achieving much far after they have stopped using the gamification platform

Interviews
We interviewed Scott Hasselwood (@TeachFromHere https://twitter.com/TeachFromHere). He is a math teacher who uses gamification in
his classroom. He is a Phd. student at Oklahoma State University. Scott started by
building his own gamification setup through using google forms and sheets. This
worked for a simple solution yet there was low automation and a large amount of
upkeep. Google allowed him to have a free solution that did what he needed. His
second solution was to use rezzly. This had quest and did some more automation
for handing out achievements/badges. Rezzly did not however handle the economy.
An underlying issue we realized that these gamification websites are lacking in
design and organization. There were upsides to rezzly. We talked about how his
high school students received the gamification change. Our discussion lead to good
examples of gamification.
We talked with Keegan Long-Wheeler (@KeeganSLW). He is an Ed Technologist at
OU CTE. Goblin is a gamification project he has been working on for a long time. It
is used in a course he and others teach to educators on gamification. Yes, Goblin
uses gamification to teach gamification. He showed us the incredible results he
received from his character development system he had built. Keegan offered
insights into how we could improve our platform. Taking the correct road to having
a success open source platform is an area Keegan was able to help us with as
goblin is open sourced.
Our gamification platform will create an extrinsic motivation source for students.
The immediate reward system inherent to gamification reshapes students
perspectives about school work. Dr. Patrick O'Connor, a professor at Chicago School
of Professional Psychology, implemented gamification courses. His gamification was
based on a website he built on top of his blackboard classroom. He gave students
xp for participating and doing homework. They participated in a game that he
created. Although he asserted that course included the heaviest workload, a survey
of his students revealed that they felt the coursework had been light. Analyzing this
effect, he believed that due to ownership, and self motivation, the students did not
categorize the incremental approach as work. Students built up to larger
assignments instead of being assigned a five page essay.

Proposed Program
Methodology
Our software development methodology will be what software developers call Agile.
Typically, development is very linear where there is well-defined stage of design,
implementation, and testing. In agile development, however, these steps are sped
through to allow multiple iterations of this cycle. This allows the stages of this cycle
of the development to be reached several stages. For the first stage, this means
adaptive planning.
In a single, long development iteration, changes will be difficult because resources
have been devoted to a long-term, static design. This is slightly corrected in the
testing phase, but, for the most part, the majority of design does not change.
However, in agile development, no long-term resources are devoted to anything and
so it is easy to make slight changes without disrupting the entire system.

Procedure
Road Map (May - July)
1.
2.
3.
4.
5.
6.
7.

Review & Decide on MVP - 3 day

Prioritize Features - 1 day
Begin Initial Hosting, Server, Environment Setup - 2 day
Develop UI and UX with Design Team - 1 and half weeks
Launch Planning
Development - 2 months
Release - End of July

Feature List v0.1

1. Classroom Creation
a. A teacher can upload an document included their roster with the student names.
Alternatively, they can manually enter each student in the class.
b. A teacher can specify the classs grade and name.
2. Perk Creation
a. Default packages available during on boarding.
b. A teacher can create perks which have a name, cost, description, and custom fields
for advanced authoring.
3. Economy Creation
a. Default packages available during on boarding.
b. A teacher can map out a set of point values to tasks, assignments, extra credit, and
more.
4. Tasks/Assignment Creation
a. A teacher can create a entry which will have a name and category in the economy.
b. After creation, a teacher can assign the grades or completion for each student in
her roster.
5. Roster Management

a. A teacher can view the following on her roster:

i.
All of the students in the class
ii.
Levels, XP gained of the students
6. Simple Student Portal
a. A student can see their profile which has their name, avatar, level, xp/point
accumulated, and perks purchased.

Wire Frames

Classes Overview:

Perk Creation:

On Boarding Process:

Implementation
The implementation of our web application will be an open sourced library of
ReactJS components that builds on top of either a basic web application or an open
source content management system. Content Management Systems such as
PageKit or Drupal could be used to create the structures of courses, class rosters,
perks, avatars and more. Our gamification would sit on top of this platform and
function as a plugin for gamification add-ons.
Our second option would be to create a completely separate web application using
React router, ReactJS, webpack, post-css to build the web application. With this
solution, we would use react native to build the mobile version of our platform.
Business logic would be shared between the two libraries but the user interface
would be separate.
Prototyping with PageKit is taking place right now using the hosting services of
Create OU. Create OU allows students and faculty to host various systems on their
subdomains. Rough wireframe samples can found later in this document. Our
prototyping will be to see what will be the most efficient and lasting solution.

Testing
Automated Testing
Use unit testing to simulate every unique way the code can run and find errors in
logic. This will allow us to repair coding issues before presenting the application to a
user. Therefore, we can focus on design issues in the usability tests.

Usability Testing
We will schedule testing days at the K20 center. Our team will coordinate with local
secondary schools to have random sets of teachers participate in our usability tests.
To connect with these schools, we will use our contacts to meet with administration
to feel out the interest. These teachers have the ability to opt not to participate in
our offer. Our incentive will be a training session afterwards that they can partake in
to gain professional development hours with their schools.

Testing Setup
Three Sessions
Ten Educators per Session
Hour of testing at K20 Center
Facilitated by a proctor
Pre & Post Interviews

Educator Use Cases

Name

Create a class

Description

User creates a class on our web application to manage

a class that he or she is teaching

Actions

1.
2.
3.
4.
5.

User
User
User
User
User

opens the application.

logs in to the site as an educator.
selects Create new class option.
adds a class title and optionally a description.
selects Create class button.

Special
Requirements

This action is only applicable to users who have

educator accounts. Students may not create classes.

Post-Condition

A new class with the specified name and description

are added to this user's account

Name

Add a section to a class

Description

User creates a specific instance of a class that they

teach. These can be different time slots of the same
class or the same class offered during different
semester.

Pre-condition

The user has created at least one class

Actions

1.
2.
3.
4.
5.

User opens the application.

User logs in to the site as an educator.
User chooses a class from his or her list of classes.
User selects Add section to class option
User inputs the dates that the section is offered and
the meeting times.
6. Optionally, the user will add a nickname for this
section.
7. Optionally, the user will add the roster of students by
email.

Special
Requirements

This action is only applicable to users who have

educator accounts. Students may not add sections.

Post-Condition

A new section with the specified date and meeting and

possibly nickname and roster is added to this users
class.
If a roster was added, invitations to join the class will
be sent to the emails of the students on the roster.

Name

Modify section roster

Description

User creates a specific instance of a class that they

teach. These can be different time slots of the same
class or the same class offered during different
semester.

Pre-condition

The user has created at least one class

Actions

1.
2.
3.
4.
5.

User opens the application.

User logs in to the site as an educator.
User chooses a class from his or her list of classes.
User selects Add section to class option
User inputs the dates that the section is offered and
the meeting times.
6. Optionally, the user will add a nickname for this
section.
7. Optionally, the user will add the roster of students
with emails. This can be done by manual entry or file
upload (csv, json, etc).

Special
Requirements

This action is only applicable to users who have

educator accounts. Students may not add sections.

Post-Condition

A new section with the specified date and meeting and

possibly nickname and roster is added to this users
class.
If a roster was added, invitations to join the class will
be sent to the emails of the students on the roster.

Name

Create perk

Description

User adds a perk to his or her account that can be

added to any of this user's sections or optionally
shared for any educators to use.

Actions

Special
Requirements

1.
2.
3.
4.
5.
6.

User opens the application.

User logs in to the site as an educator.
User selects Create perk option
User specifies the name of the perk.
Optionally, the user adds a image/badge for this perk.
Optionally, the user adds a description.
This action is only applicable to users who have
educator accounts. Students may not add sections.

Post-Condition

A new perk is created and added to this users

account for use in any of their classes.

Student use cases

Name

Join section

Description

The student joins the section of his or her class by an

invite from the professor

Pre-Condition

Student has been added to the roster of the section

and an email invite has been sent

Actions

Post-Condition

1.
2.
3.
4.

User starts email application.

User opens email invite from this web application.
User clicks the link in the email to join the section.
The user logins to the web application if he or she has
an account.
5. Otherwise, the user creates an account for the web
application.
6. User views the section.
This student joins the section and is able to access the
section info.

Budget & Qualifications

Budget
Expenses
Salaries

Description

Software Developers - 3

Backend, Frontend, Mobile

Designer - 1

Create UI and UX
Consultant fee (hourly or
flat)

Education Consultant - 1

Quantity
(Hrs)

960
320
200

Cost
Total
32 $30,720
30
$9,600
20

$4,000

Two months

$43,040

Sub - total Salaries

Supplies

Description

Quantity

Cost

Total

Technology & Software

1 1000

$1,000
$1,000

Cost
1 3500
1 75
1 400

Total
$3,500
$75
$400
$0
$0
$3,975

Sub-total Supplies
Indirect Costs

Description

Office Space

renting out an office

Online Hosting
Office Furniture

Quantity

Sub-total Events
Total Expense

$49295

There are three software developers on the team. During this time, each developer
will be paid an hourly salary of $32, or about $66,000/year. Over the two months of
this project, a little over eight weeks, the three software developers will put in 960
hours of work. Each developer will work 40 hours a week for eight weeks, a total of
320 hours. That amounts to $10,240 per developer.
We will hire a designer to optimize the user experience of our web app. A
professional web designer will ensure that our app is as usable as possible. The web
developer will be paid an hourly salary of $30. Working full time for eight weeks,
the developer will put in 320 hours and be paid a total of $9,600.
The education consultant will work in conjunction with us to create content for a
web app. We will contract a teacher who uses gamification and understands the
best ways to implement it. This information will allow us to create default perks for
different education levels. In this way, our app will be functional for new user
immediately, instead of requiring creation of his or her own perks.

Qualifications
Our team consists of Computer Science majors at the University of Oklahoma. Our
degree has required us to take courses that prepare us for creating sustainable
programming projects. We have studied multiprogramming in our Operating
Systems course, where we learned to use the many processors found in modern
computers to increase computer efficiency. These skills will be especially necessary
as we expand our project and prepare to handle possibly thousands of requests
instantly from people around the country. We built on these skills in Data Structures
and are able to use various data structure to create fast and space-efficient
programs. Through our course work, we have experience with Java, C, C++,
Python, and Scheme. Most of these language are high-leveled, or far away from the

computer detail, and therefore designed to handle highly abstract projects like
those dealing with user interfaces.
We have also studied interfaces more closely in our Human Computer Interaction
course. We have studied many elements and tools found in good user interfaces.
We have also completed many projects and built our own user interfaces. We have
completed all of these projects using different UI toolkits and thus have a lot of
flexibility and power in regard to the types of UIs we are able to create.
David Smiths fiance is currently student teaching and using gamification. She has
given us insight into how gamification in her classroom works and what she needs.
We will be able to run a pilot project in her classroom. David Smith works currently
for an educational technology company here in Norman, NextThought. He is on the
web development team. With this experience, he has worked on creating an online
classroom platform used by universities all across the state. At NextThought, he
has worked on the web application and an internal tool. He first built an internal
content management system (CMS) using Plone, an Open Source CMS. With this
internal tool, content authors were able to build out the structure of courses to go
on to NextThought's platform.
This team member has also attended 5 Edcamps. Edcamps are unconference style
professional development for educators. At the event, attendees go to various
sessions on topics they choose. This gives our team not only connections to
educators within Oklahoma but also experience in hearing how educators use
technology in the classroom. This team member has connections with the State
Superintendent of Public Instruction, countless education administrators, and other
educators across the state. This provides a pool for testers, a group of people for
getting their input and feedback and much more.
One of our other members, Adam Smith, has some experience with teaching. He
regularly helps and tutors his friends. He also has previously worked on project
where he was asked to interview specifics teachers and write a article on his
findings in online magazine. He can use these skills to help design a more teachingfriendly project.

References
http://www.edweek.org/ew/articles/2016/03/23/gallup-student-poll-findsengagement-in-school.html

Appendix

1) Interview Transcript - Skype - Scott Haselwood

First Solution - Google
Google Forms
Google Spreadsheet
Points
HMWK 1 Points
Youtube Video 3 Points
1 hour week tops
Shortened url (Google Shortened)
Webaddress easy to enter
Phone, iPad, Computer (Students Use)
Problem
Asked, Buy Perks (Struggled)
Second Solution - Rezzly
1 year - Dr. Stansberry
Rezzly.com
Paysite, Some Free Stuff
Kid Account, create accounts
Quests
Requirements
Points
Average Time
Rating
When its due
Category
Sharable
Copy Back and Forth Between Educators
High school Student
Freedom over how they chose to learn
Figured out the economy system
Give economy to buy a perk
No economy
Disabled scheduling
Controlled Behavior
Organize the classroom
Resources
Class craft
Class dojo