Home Web Development Build Gamified Websites with PHP and jQuery

Build Gamified Websites with PHP and jQuery

By Detrick DeBurr
books-svg-icon Book
eBook $24.99 $16.99
Print $41.99
Subscription $15.99 $10 p/m for three months
$10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
BUY NOW $10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
eBook $24.99 $16.99
Print $41.99
Subscription $15.99 $10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
About 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.
Publication date:
September 2013
Publisher
Packt
Pages
124
ISBN
9781782168119

 

Chapter 1. Gamifying the Educational Process

Games have the potential to bring about phenomenal changes in an individual. Games have been used historically to improve skills, and in some cases develop new skills. The most visible example of gamification can be of the armed forces the world over, who conduct "war-games" to help soldiers experience the war environment and use their training skills to achieve the results. These games help them use and develop their skills. Although gamification methods need to be used cautiously, the advantages outweigh the cautions if the gamified process is implemented smartly.

 

What exactly is gamification?


Gamification is the use of strategies and techniques used by game designers, in situations other than games to get people to treat those situations more like a game. People confuse serious games, game theory, video game design, and gamification as one and the same. These could be things such as fun, rules, competition, points, and so on, and then applying them to non-game situations.

Gamification differs from serious games. Serious games are considered games, but they are not designed for the purpose of having fun. They are for more practical uses. Flight simulators, for example, have all the mechanics, technologies, and design processes found in a flight video game. Developers, however, create the video game for entertainment purposes, while the flight simulator has a more serious purpose.

Game theory, on the other hand, is merely the study of strategic decision making, which takes "Game-Like" thinking into consideration when making a decision.

Gamification pertains to the structure and design process applied in good game design, whether it is a video game, board game, or a serious game. Gamification is simply a set of tools and materials used in game design, which also applies to jobs other than creating a game.

Most gamification applications that you will see in the near future will be serious games. We will begin to see game elements cropping up more and more in our daily lives.

One huge growth area in the gamification arena is gamifying education. There is a lot of promise in applying gamification to the learning process.

Schools using gamification

If we were to think about what a school is, we would quickly conclude that school itself is a game. It has all the classic game elements built into our traditional school system already. In almost every type of learning environment, you will find the idea of a reward system. This reward system could be in the form of grades or grade point average. Schools reward those with good performance with higher grades as opposed to someone who does not perform as well.

Schools also have a penalty system in place. If a learner doesn't perform to a certain standard, the school penalizes him/her. It holds him/her back, ostracizes him/her, and in some cases removes him/her from the community. School is probably the most widely played game in the world. Unfortunately, most of the people don't see much fun in school today. Hence, the idea of school as a game is virtually nonexistent. You can expect this change, however, over the coming decades as we make our learning environments more engaging.

 

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. (http://www.youtube.com/watch?v=3iHv3vrW2Lo) 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 (https://www.khanacademy.org/). 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."

Spongelab

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 http://www.spongelab.com/.

Youtopia

Youtopia allows teachers to apply game elements to their learning environments. Because teachers use this website (http://home.youtopia.com/) 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

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. (http://q2l.org/)

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. (http://worldofclasscraft.com/en/)

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 http://www.playthepast.org/?p=848). 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.

 

The future of gamification in education


Games and sports, in general, teach us invaluable soft skills. For example, they teach us teamwork, communication, delegation, and collaboration. Most of the learning in a school today is focused on crystallized learning objectives. Crystallized learning consists of facts, figures, formulas, and so on. The real untapped benefit of gamification in education is in the area of fluid intelligence. Fluid intelligence is more about problem solving and emotional intelligence.

The primary purpose of an educational system is to prepare a society for the future. Our current educational system is preparing a society for a reality that no longer exists. It is trying to catch up in the areas that games excel.

There is already over 50 years of research that suggests that games enhance the learning experience in certain areas. Unfortunately, it's not in areas that we traditionally measure. Since we don't measure areas such as communication ability, emotional restraint, and leadership on a report card, we haven't put much attention on ensuring that students learn these skills. However, these are the types of skills that we are discovering, which matter most in society.

Games have shown these types of skills uniquely well. They are also very good vehicles for showing a learner why an action or behavior is incorrect. For example, when a player makes a mistake in a video game, he/she loses a turn or loses a man. It is through safely failing that we ultimately learn. Games allow for safe failure. Most lessons in a traditional school environment are learned only after an irreversible failure, such as the failure of an exam.

Games generally build in failure. When we consider video games, it's commonly understood that every player has a certain number of players to experiment with. If a mistake is made, the player is destroyed in the game, but generally has another opportunity to try again with another game token.

This immediate feedback is very important in the learning process. Learners need a system that lets them know when they are progressing. Unfortunately, via our traditional educational system, learners need to wait as long as 12 years to find out if they really learned what they need to be a productive citizen. This prolonged delay leads the feedback loop failure to give the learner adequate feedback on time.

Games, on the other hand, allow for immediate feedback and correction. This gives the students, parents, and teachers the information that they need to ensure that the student is learning properly.

Gamification in the classroom

Despite all the excitement about gamification in the classroom, there are several skeptics. The first obvious question is how scalable is gamification in education, whether online or not. A few examples of success are not cause enough to revamp our entire educational system.

It's safe to assume that gamification in an educational setting doesn't always work. As a matter-of-fact, according to a 2013 Gartner report, over 80 percent of gamification projects will fail to reach their objectives. Of course they are referring to gamification projects in particular, but many of these will be education related.

According to Gartner, most will fail due to:

  • Poor design

  • Lack of planning and strategy

  • Bad processes

  • Unrealistic expectations

Even Professor Graham, who attempted to model the game Civilization in his classroom, admits to it being a dismal failure. He attributes his failure to the game mechanics not being voluntary. He, in this instance, required all students to participate in the game, which seems to have affected students' ability to have fun with the course. This, however, would be a real problem in most schools. The whole purpose of a state board of education is to set a standard and decide what's required from a student. This is completely contradictory to the concept of giving a student a level of autonomy in the process.

Another fundamental question to ask before attempting to apply gamification in an educational environment is, "Should school be fun?" Many education proponents suggest that giving a student a pleasurable experience is not the goal of school, the acquisition of skills is necessary to be a productive citizen.

The real questions from my vantage point are:

  • What are the skills necessary to be a productive citizen in the future?

  • Can game mechanics be used to teach those skills necessary to be a productive citizen?

  • Are students being motivated and incentivized to learn these skills to be productive citizens?

Proponents of gamifying the educational experience argue that games and game elements are not replacements for teachers. Good game design in accordance with passionate teachers lead to a vibrant learning environment. Furthermore, the traditional education system has proven to be very adequate in delivering critical literacy-oriented skills. It has, however, done a poor job of teaching thinking skills, soft skills, and experiential learning. It appears that the role of gamification education is not to replace or disrupt. Its role is more about enhancing and extending the current process.

The success or failure of gamifying the learning environment will boil down to a good gamification design. We see a plethora of sites adding points, badges, and leaderboards (PBLs) and calling it gamification. Good design implies a framework and a structure. A framework results in clear, measureable objectives. A design framework includes a clear understanding of the audience and what makes them do what they do. And it gives a process to follow. When these things happen in a learning setting, students will be motivated to learn. At that moment, when there is a clear understandable reward and it's in the proper context, there will be motivation. These moments become fertile opportunities for learning.

When we develop a learning environment correctly, students should not even realize they are learning. They should simply participate in a game and have fun. Learning is the by-product of that environment.

Having fun at school

Traditionally, when we think about school, a lot of words come to mind, but fun is not one of them. As a matter of fact, to date schools penalize learners for things that games consider normal play. For example, learners are penalized for not keeping up and learning at a prescribed pace. This pressure to learn is counterproductive. Pressure makes the process no fun. A regularly used game element is the concept of progression. When students learn and progress at their own pace, they have considerably more fun.

The F-word (fun) is frowned upon in some gamification circles, such as gamification for education. We tend to dodge the main game element, fun, in lieu of striving for engagement and motivation. Engagement and motivation are definitely results of a good gamification application, but they are not a replacement for fun; rather, they are a result of the designer-targeted-fun experience.

We must, however, keep in mind that fun is not a "one size fits all" proposition. What's fun for one person is not fun for another. This is one of the critics of trying to gamify the classroom setting. One set of game elements that translate into fun for one student simply does not and will not translate into fun for another.

Gamification implementers must be very clear on their audience (players) and what they are trying to accomplish (target behaviors) with their system.

 

Summary


So far we looked at some of the educational institutes that have successfully gamified the educational process. In the next chapter, you will learn how to gamify your process by understanding the gamification design framework.

About the Author
  • Detrick DeBurr

    Detrick DeBurr currently serves as a co-founder of CUPID On The Go! Prior to this, he was Founder/CEO of Digital Rhythm Inc., an information technology services provider based in Dallas, Texas, USA. Detrick has served in various software development roles through his career. In 2005, Black Engineer Magazine named him a Modern Day Technology Leader. He is a graduate of Darden University's Minority Equity Boot camp, a program that educates minority business owners to access the private equity capital markets. In 2001, Mr DeBurr received Stanford University's Digital Visions Fellowship for his efforts with the Digital Literacy Alliance in Ghana, West Africa. Mr. DeBurr is the author of Deal Us In! How Black America Can Play and Win in the Digital Economy, Anji Publishing, 2001. He has served his community as Chairman of the Planning and Zoning Commission in Cedar Hill, Texas. He has also served on the Board of St. Philips School and Community Center and chaired the Dallas Blueprint for Leadership Program, a program that prepares minorities to serve non-profit boards and committees. He is an active member of Omega Psi Phi Fraternity Inc..

    Browse publications by this author
Build Gamified Websites with PHP and jQuery
Unlock this book and the full library FREE for 7 days
Start now