Book Image

Build Gamified Websites with PHP and jQuery

By : Detrick DeBurr
Book Image

Build Gamified Websites with PHP and jQuery

By: Detrick DeBurr

Overview of this book

Gamification involves the process of leveraging the features of real games into real life. A gamified website has the potential to increase user engagement, ROI, and learning. This book will help you build gamified websites with PHP and jQuery by making you understand the gamification design process to implement game mechanics in practical applications. Gamified websites are very popular amongst Internet users. The gamification of a web content draws users into action to empower them and help them develop new skills. Games engage user attention into the task and each task accomplished will mean the development and enhancement of new skills. This book will help you to apply the essence of games into real word applications such as business and education. Build Gamified Websites with PHP and jQuery aims at empowering and educating the users with an educational gamified website. The book walks through the process of developing a gamified website. Through the course of the book, you will learn gamification development process. The book emphasizes on the application of game mechanics to motivate the user. You will then use the Fogg behaviour model to influence the user behaviour. By the end of the book, you will see yourself building more engaging yet simple websites based on rational principles.
Table of Contents (15 chapters)

History of gamification in education

Some of the earliest uses of gamification in a learning environment dates back to the 1980s with video and computer games, such as Where in the world is Carmen San Diego. Software developer Broderbund Software published it in 1985. It was a huge success. This game teaches geography and history to players as they act like detectives, with the ACME Detective Agency looking for a former ACME Detective Carmen SanDiego. It's received over 70 awards, in particular the Silver Apple Award from the National Educational Media Network in 1996.

A short history of gamification in learning is shown in the following diagram:

Other early computer games that became household names include Mavis Beacon Taught Typing and Civilization. Some others are shown in the following diagram:

Monopoly Academy

There are several innovative educators working diligently to implement game mechanics in their classrooms. One in particular is Hesperia Unified School District (Orange County, CA) teacher, Tim Vandenberg. Vandenberg runs the Monopoly Academy for sixth graders in his school district. ( A screenshot from the game is as follows:

Monopoly Academy teaches mathematics concepts using the game Monopoly. Vandenberg, a champion Monopoly player uses the game to teach ratios, probability, expected values, and other maths concepts that, traditionally, kids have had a hard time grasping.

Vandenberg implements Leveling, a game element, in his class. He divides the class into levels and students need to reach certain milestones to play the game. He uses a Wall of Fame with high scores of past players, which acts like a leaderboard. Leaderboards are the other important game element.

Vandenberg has turned his math class into a fun interactive place where students learn simply by playing Monopoly. When the Monopoly Academy began in 2007, only ten of Vandenberg's students were rated as advanced on the California Standardized Math Test. As of 2010, he has increased that number to 37 using Monopoly as his primary teaching tool.

Khan Academy

Another leading organization using gamification in the educational sphere on the Web is the Khan Academy ( It is a non-profit organization with a mission to change education for the better, all over the world.

Their collection of over 100 self-paced exercises, 1,800 lessons, and 2,100 videos are available for free to anyone visiting their website. Although most of their instructional materials are video based, there is a strong use of game elements on the site. It offers challenges for learners. It rewards students based on the correctness and speed with which they answer questions. The website quantifies progress and shares that feedback with the student each time they log in to the site.

According to Shauntanu Sinha, President of Khan Academy, "Our current education system has a poorly designed motivation and incentive system. It doesn't work for most."


There are several other uses of gamification in a learning setting. Canadian game developer Spongelab has created the video game History of Biology that is used throughout Canada to teach biology. Users gain badges for playing the different biology-related games.

The site quickly gets the students on board by simply offering the initial Welcome badge for joining the site. Students can use points and credits accumulated in the site's online marketplace to purchase premium content. Spongelab has even gone so far as to introduce cash-based rewards for participating in certain challenges on their website


Youtopia allows teachers to apply game elements to their learning environments. Because teachers use this website ( as an extension to their classrooms, designers refer to it as a blended learning platform. This online platform allows teachers and homeschool parents to plug-n-play game elements, such as points, badges, and leaderboards into their classrooms. Students earn points and badges that they can redeem in the teacher's Youtopia store. Friends, family, and other Youtopians can see a student's accumulation of achievements and badges. Teachers have the ability to create leaderboards for their classes and their schools. They allow teachers to implement a team concept by grouping points, badges, and achievements as a class as well as a school. This makes it possible to take advantage of class- and school-based competitions.

Youtopians can build a Youtopia resume, which many students can use to build their initial resumes when applying for their first work experience. Teachers are able to quickly log in and see how their students are performing. An example of a Youtopia report card is shown in the following screenshot:

Youtopia does not stop with just school-related activities. Students are able to log volunteer hours and extracurricular activities on the site too. This documents their soft-skill development as well as concrete skills all in the same place. This allows for a truer picture of the student's abilities and potential.


Quest2Learn, a Manhattan-based school, is a collaboration between the Department of Education, New Visions for Public Education, and the Institute of Play. They have actually created a school with a curriculum based 100 percent on game mechanics.

Quest students matriculate through the curriculum as if they are working their way through a game. Rather than grade levels, students move through ten-week Missions made up of a series of Quests. At the end of a Mission, a student moves up to Boss-Level (Challenge). Students stay at this Challenge level for 2 weeks and teachers assign them a complex problem to solve based on the skills they learned during their Mission. Experts in the area of the challenge judge the outcome of the challenge. Students need to actually demonstrate what they've learned by creating an outcome rather than simply answering questions on a test.

One mission called Ghost vs. Ghost challenged the school's seventh graders to grapple with the idea of perspectives. Students were to learn how people having various experiences bring their experiences to an event. A group of fictional ghosts of different ancestries and backgrounds held different positions on various events related to the founding of the original American Colonies. The ghosts fight each other over the interpretation of the different events. Over the course of the mission, students dig into primary documents to uncover evidence supporting various versions of the contested events.

Quest students must still meet the same standards as other New York public education students. However, teachers also measured them on a set of core competencies, such as empathy and collaboration. To date, test results show that Quest students, on average, score slightly higher on the standardized test than other students in their same demographic. Moreover, the school also won the New York City Math Olympiad.

They even learn geography using Google Earth. One of their key benefits is Scaffold Problem-based learning, which according to Rutgers University study, is shown to improve academic skills and motivation. We want all schools to become fun again. This is at the heart of the gamification in education movement. (

World of Classcraft

World of Classcraft is an augmented reality computer-based game for the classroom. Interestingly, it was not funded by the public education system but by Kickstarter. Students play the game to acquire real powers and to transform the classroom into an adventure. Players defeat monsters (homework) and bosses (exams). Students gain experience points (XP), hit points (HP), action points (AP), and power points (PP), as shown in the following screenshot:

A player gains experience points when he accomplishes certain tasks. Examples of such tasks are:

  • Finding a mistake in the class notes

  • Scoring for every point above 70 percent in an exam

  • Giving the proper answer to a question in class

  • Helping another student with his classwork

  • Helping another player by using one's powers

  • Being positive and hardworking for the duration of a class

Game masters (teachers) divide students into teams of eight. They join one of three classes: the priest, the mage, or the warrior. The teacher is the game master. Students call out the tasks they want to take in the classroom and the game master (teacher) records them in the game system. (

Gamification in universities

Universities are using game mechanics more than K-12, primary, and secondary educational institutions. Many of the professors have a lot more control over the teaching process. For example, Professor Shawn Graham at Carleton University has an elaborate achievement system in place to teach "The Historian's Craft Class" (History 2809 The system is voluntary, which is exactly why students seem to like it. They are not forced to participate, making it feel more like a game.

In a traditional college-level course, your grade is based primarily on your scores from a few exams. A student starts with a 100 percent grade, and throughout the semester loses points until he/she settles with a final grade. Graham set up a system where students could earn points for different types of achievements. According to Graham, "I wanted students to have more opportunities to practice the craft of being a historian, beyond the formal assessments of the classroom." These achievements ranged from exam grades to participation in class. Students could get point achievements, such as doing outside research to visiting the professor. Some of the game challenges included transcribing lines of ancient papyrus, learning the rhetoric embedded in computer code, completing tutorials on logical fallacies, learning some Latin, and participating in online crowdsourcing history projects A student's grade was based on his/her level of achievements rather than on his/her exam grades only. More importantly, the system was voluntary, so one student's path to an A grade could be very different from another student's path to the same grade. Although voluntary, Graham saw about a 40 percent participation rate, with all students completing more than ten achievements, finishing the course with an A or B grade.

Students had a sense of autonomy in their learning process, which studies show to be a primary component of intrinsic (self-generated) motivation. Professor Graham is proving that the level of engagement increases tremendously when there is a level of autonomy, challenge (mastery), and context for the engagement (purpose).

Professor Steven L. Johnson, Assistant Professor at Temple University Fox School of Business, introduced gamification into his MIS3538 Course Social Media Innovation by adding what he calls "The Quest" to the class. Johnson's goal was to encourage self-paced learning through a series of required and voluntary activities that are progressively more difficult.

He used basic off-the-shelf tools to implement his program. He used the WordPress achievements plugin and Google Forms. Students earned points and badges. There was a class leaderboard and Johnson recognized students weekly for reaching the next level in the game.

Johnson set it up so students earn points and badges for their first three posts and for pre-set levels of comments (for example, 1st, 5th, 10th, 20th, and so on up to 100th). He even left some achievements hidden from students, which added a level of surprise when they reached them.

Students found the competitive environment challenging as well as fun. Interestingly, Johnson didn't find the level of fun and engagement any different between students that did well in the game and students that were at the bottom of the leaderboard. It appears that fun and engagement were equally distributed regardless of the student's individual progress in the class. In the end, he was able to create what most teachers are looking to create—an exciting and engaging learning experience that students can take advantage of and have ability to do so.