December 3, 2020

Gamification for Interactive Learning by Karl Kapp on

Game Thinking

Game thinking pulls on deeper game elements, like engagement loops, freedom to fail, player’s journey; used in opposition to gamification because it tries to use game elements that are more intrinsically motivating

Gamification capitalizes on the game element of replayability. Repetition without the content becoming boring, personalizes the pace and content, encourages exploration.

Reflection is often a part of playing, which helps learners internalize the content

Game (def.) a system in which players engage in an abstract challenge defined by rules, interactivity, and feedback, resulting in a quantifiable outcome or objective, often eliciting an emotional reaction

Gamification (def.) taking parts or elements on games and applying those elements to learning activities to engage the learners; it’s not about playing a game, it’s about engagement

Types of Gamification – Content v. Structural

Both use game elements and mechanics to engage the learner, but they differ in what elements they use and how they are applied

Structural – placing a game structure around the content without changing the content itself

Content – when the content is altered to become more game-like

Uses of gamification

Pre-work – activities completed before the main learning event

Pull-through – behavior or content intended to reinforce recently learning info

Daily-reminder – regular notification of and practice with important info

Winning does not equal mastery

Gamification, if not focused correctly, can push people towards a performance mindset (where they care more about how they are doing/perceived at doing than how well they are engaging with the content)

  • Performance oriented gamification discourages experimentation and exploration

Ideally, you achieve mastery orientation — signals are that users accept errors and seek challenges, hoping to develop their skills, knowledge, and behaviors, and have confidence in their ability to succeed

  • Achievements/badges can acknowledge efforts and support learners during challenges
  • Provide frequent progress feedback, notifications of improvement, and provide info about accomplishments

With good balance, no one player or group can always win, and each learner has an opportunity to be successful

Guidelines for Balanced Gamification

  1. Ensure scoring is transparent
  2. Ensure all players understand how points, advancement, and rewards are earned
  3. Ensure one team/person can’t “run away with the victory”
  4. Provide bonus features that allow for a catch up

Testing is crucial for establishing good balance! Encourage testers to try to game the system

Engagement requires that decisions the user makes can actually make a difference in the game, which means they’re should be “consequences” for mistakes

Encourage users to explore. This will help users to keep themselves engaged. Be mindful about not punishing a certain type of exploration.

  • Consider: creation, collection, socialization, exploration, etc.
  • Examples: Minecraft, Pokemon, WoW, Stanley Parable

 “People cannot influence their own motivation and actions very well if they do not pay adequate attention to their own performances.” – the conditions where something occurs, and the result

Action > Feedback > Motivation > Repeat

Feedback Loop = Engagement loop = Learning loop

At the heart of game thinking is learning. Engagement leads directly to learning

Loop basics – provide info about knowledge, skills, or behavioral development in real time; allow for opportunity to change and retry; have clear goals and indications of feedback

Progression Loop — the “player’s journey” through the entire experience, series or steps

These require deliberate action, and thoughtful consideration to work effectively

  1. Introduce new stimuli or changes into engagement loops
  2. Introduce a negative feedback loop

Gamification solutions require dozens of questions (there needs to be a lot of content in order for the thing to work and not become quickly repetitive)

Good multiple choice questions requiring more than rote recitation require more time to create

Types of Multiple Choice Questions

The further down the list you go, the greater you will need to understand the info to correctly and actively answer the question.

  1. Recall question — rote memorization, does not reinforce or test understanding
  2. Application question — recognize the info and apply to a situation
  3. Evaluation question — extension of current knowledge

Using Point Systems

Points can feel really cheap unless they are applied thoughtfully and carefully

  1. Tie points to performance — you get more points when you do better
  2. Use points to give deeper, immediate feedback — gauge understanding
  3. Indicate relative value of activities — certain actions or answers are worth more points, can be used to direct learners in a direction (ex. Prevent guessing)
  4. Provide variability and replayability — add more dimensions so that learners can still improve even if they know most of the answers

Badge — visible sign of mastery/achievement; if the badge has little or no relevance to people in the group, the badge will quickly lose value

Badge Prestige (perceived value)

  1. Perceived difficult of earning the badge
  2. Proper validation of the badge

When badges are predictively earned and broadcasted beforehand, it can be linear motivation

When badges are not broadcasted, they are nonlinear motivation (secret achievements); it can be a reward for exploration

Leaderboards can create a competitive environment for points or badges. However, they can also be demotivating for people who are further down on the board.

You need to develop a strategy to motivate as many learners as possible with leaderboards and not accidentally demotivate people (think Duolingo’s tired leaderboards)

Well designed leaderboards can provide direction and motivation

Losing can be frustrating, demotivating, and not fun, but with competition, someone has to end up at the bottom. This means that you are at risk of alienating someone who loses.

Deemphasize Winning to combat this

Limit praise for winners, offer a small/no prize for winning, emphasize learning aspects; remind learners that failure is part of the learning process; reframe success to a shorter timescale, or only personal progress

Or use cooperative games instead of competitive, where people have to collaborate to succeed

Reflection is key to true learning, so try to lead learners towards doing so

Some users will only focus on winning, and will try to cheat in order to do so

How to Minimize Cheating

  1. Test and Retest (try to find ways to cheat, and fix those issues)
  2. Monitor Continuously
  3. Consider methods that aren’t exactly cheating, but could be interpreted that way by other learners
  4. Establish and Check System Parameters (dotting i’s on if all settings are correct)

Structural Gamification — application of game elements to propel a learner though content with no alteration or changes to the content

The content stays the same, but it’s inserted into a game framework

    A training video does not change, but there are points or badges attached to viewing it.

The number of structural gamification tools has expanded and diversified, many measure behaviors and actions as well

You need to have lots of questions in order to have enough content to sustain any real duration

Game based gamification — learners engage in small games unrelated to the content, and which are intended to grab attention and clear the mind

    Used to prep users for learning, put then in a “flow”

Flow — a mental state in which a person is fully immersed, only paying attention to the task at hand

The content that you are trying to teach appears after a few moments of playing, hoping to be easier to learn and retain after clearing their mind playing

It’s possible that playing the minigame enhances learning because it increases the learner’s vigilance and alertness (stress), which preps their mind to taking in new information.

When learners are given the choice to play a minigame with the questions or just answer a question, most learners will choose the game, those learners answer more questions correctly, and have longer correct answer streaks than those who did not play

    These learners were also motivated to pursue extra learning opportunities, “so they could answer more questions correctly” (confidence = more open to opportunities = more chances of success?)

Competition based gamification – players are prevented from directly competing with opponents, and have to entirely focus on optimizing their own play

    It helps to keep the number of competitors small in these setups. The fewer the competitors, the more likely someone sees their own chances of success, so they try harder. This phenomenon is known as the N-effect.

    Consider breaking people out into teams to shrink groups of competitors

Competition is not appealing to everyone, and can become demotivating to players. Consider who your audience is, what you are hoping they will learn.

Progression based gamification — showing learners their progress based on their mastery of desired knowledge, skills, or behavior

Types of Progression Based Competition

    Against the computer

    Against time

    Against other learners

Categories of Badges — time, accuracy, learning, competency

Performance based gamification — measures what a person does and rewards appropriately

  1. Self reporting — self measured
  2. Observation — supervisor measured
  3. Systematic — interface measured

Content gamification — application of game dynamics, mechanics, and elements to alter instructional content itself to the content more game-like

Views gamification as a design affordance — if a designer adds many game elements, content gamification can shift into a learning or serious game

Design affordance — properties of objects which show users the actions they can take

Requires more advanced design skills, does not have preexisting framework

Techniques — story/context, characters, challenge

Characters can spark better engagement than text only in content

    Give learners options about who is their teacher, mentor, aide…

    Think about diversity

Challenge should exist! Users are not engaged when things are too easy. Challenge has been correlated with both intrinsic motivation and motivation related to fostering competence and learner confidence

    Adults learn best when they have a need to know

People have been shown to better retain facts from when they are included in a story than when they are presented on their own. So, set up the right content for your learners!

If you set up good contexts for presenting info, then the users know what kinds of situations that that info is useful

Key points for use

  1. Ensure characters and the situation are relevant and relatable to the learner
  2. Make the story interactive (have consequences for good and bad actions)

Provide juicy feedback — designing for visceral reactions in the learners so they experience emotions; it should be natural within the context of the world, consistently given, and coherent

Crafting Meaningful HTML by Jen Kramer

Identify major elements of the page (the content).

    Create notes on what components are, understand the content before marking it up.

Heading 1, generally only one per page, the name of the website.

Remaining headings should have hierarchical info

    Never skip a level!

Don’t use HTML to add any style to text (bolds, strongs, italics, sizes…) Use CSS

    Exception is when style directly adds significant meaning to the content

Keep in mind that HTML is really for people who are interacting with the text without the CSS visuals (when CSS doesn’t load, screen readers,etc.). It should still be easy to read (or listen to) and convey the intended meaning.

Don’t pick list types by appearance, but by the meaning that list type would convey.

    (this is not expanded on…)

Remember alt tags! Make it meaningful to the people who really need it

This really applies to the footer, considering the amount of info usually present

Use <span> tags to apply style elements to text that add meaning that’s isn’t as important to be included more directly in the HTML

Full list of HTML Tags:

Tags that could be potentially useful outside of standard range

<address> defines an address

<article> defines an article

<aside> defines content that is not necessarily part of the pages content

<dl>, <dt>, <dd> defines description lists, terms, and values of those items (FAQ)

<figure> can also be used to define images, different use cases

<noscript> defines alternate content for users not using client-side scripts

CSS: Enhancing Interfaces with Animations by Christina Gorton

Performance and accessibility should always be a priority! Animation should never reduce the impact of either

You want to only impact the Composite portion of the rendering pipeline

    Style > Layout > Paint > Composite

You can check this on

You can also use CSS feature Prefers-Reduced-Motion to minimize the nonessential motion for users who have this requested

Keep in mind 12 principles of animation for web animations as well. They don’t all apply one to one, but it can help make more effect animations

Squash and Stretch



Straight Ahead and Pose to Pose

Follow Through

Slow in and Slow Out


Secondary Actions



Consider it as choreography.

Sequencing – order designated to parts of animation; incoming, outgoing, and persistence.

Easings – linear, ease-in/ease-out, ease-in-out, cubic bezier

    Cubic Bezier is most customizable

Transforms — scale, rotate, skew, translate

    Consider X and Y axis

    Translate moves items across the screen

A focal element in a transition is a persistent element that is significant to the overall hierarchy of element in transition

Colon and tag create a pseudo element

Button animations

    Hover has new background slide in from left, changes text color

    .button:before (this does not animate, it established a pseudo element to animate with)

    Set color, size, font, etc. parameters.

Z-index controls the depth, used in example to hide pseudo element behind button

Transform-origin controls starting place of animation

Transform controls animation

Overflow: hidden hides element when it is outside bounds of original button (?)


background-color: transparent will allow pseudo element appear


transform: translateX(0px)

Hover has new background slide in from top, quicker than first animation


Transform: translateY(-100%)

Transition: all 0.2s ease-out

Z-index: -1




Transform: translateY(0)

A lot of possibilities with the same basic tools. Remember to just try combos and explore!

x:hover creates an in effect, x:after creates an out effect

Video Script Writing by Rick Allen Lippert

Informational videos have goals. Try to limit them to three or four, tops.

They often want to motivate, train, or inform. These are kind of “baked” into the format. These kind of break down to trying to persuade someone to act in the desired way you want them to.

Remember logos, pathos, and ethos!


    Header — contains the page number, draft number, and title

    Slug — video, scene description

    Parenthetical — advice on delivery, use sparingly

    Shot types

        LS — long shot

        MS — medium shot

        CU — close up

Two column script — video directions are on left side, audio directions are on right side

Screenplay style — standard movie script, text is still formatted similarly to two column, which video aligned left and audio aligned right

The video is supposed to solve a problem, so you need to know what the problem is.

    Identify the Need

    Identify the Solution Topic

    Identify the Audience

    Identify where it will be shared

It’s helpful to start with a vision identified and create a budget to match than doing the reverse

    This is where to decide the length, the most important points, the goal, style