DIY: linkbait in 5 minutes

Introduction

The term "linkbait" is mostly used among SEO specialists. In human language linkbait is something that attracts user attention (thus creating links and traffic). However, I won't go much into details here. I'll just show you how to build a simple game that could serve as a linkbait or at least entertain your visitors.

Games are usually about playing and winning. Many Internet users like procrastinating at work playing games and gaining scores. Thus, if a game is entertaining people share it with their friends. Also people tend to brag about scores they gained (you can even adjust this game to make a blog/website widget to show somebody's score).

What kind of a game we will be building?

It is going to be a simple game where a player is required to type in object names from a particular group. It is difficult to define the game type or category, but you can take a quick look at examples:

Before you start

You should know some HTML basics (no coding experience is required). You should have downloaded jQuery library from their official site. And you should have downloaded this library from here.

The very basic usage

Task: we need to build a game where a user must enter as much non regional top level TLDs as he can remember in two minutes.

(Q: Why not all the TLDs? A: Because you can get most of the answers just randomly hitting the keyboard).

First, you need to have a HTML file template to add this game to. Build it on your own. Also you should place jquery.js and howmany.js somewhere on your disk. Presenting the following example I presume that you have placed both files to the same directory the game will reside.

1. Add the required JavaScript libraries

Add this code to your HTML head:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="howmany.js"></script>

(Bonus tip: sometimes I see people complaining about some JavaScripts not working with IE7. It's because they specify script type="application/x-javascript" and not type="text/javascript").

2. Specify game parameters:

Put these hidden input fields somewhere in your HTML body:

<input type="hidden" name="timelimit" id="timelimit" value="2" />

Value="2" is the game's time limit. This should be any integer bigger than 0. No real numbers are accepted.

<input type="hidden" name="items" id="items" value="edu, gov, info, ..." />

In this case value holds all the possible answers. I replaced some data with dots to save some space. You should separate individual items with comas. Do not put comas at the beginning or at the end of this parameter.

3. Setting up game controls

These elements can be placed anywhere you want in your document body. You can apply any design elements or styles you want. Just keep element id's in place.

<input type="text" id="iteminput" name="iteminput" value=""/>

This input field will be used to enter data. It gains focus automatically when the game starts.

<span id="remaining"></span>

This element will serve as a little helper during the game. It will show how many items are remaining. It's an optional element. 

<span id="named">none</span>

This element is used to display what data a user entered correctly.

<p id="missed"></p>

When the game ends, missed items are shown here. 

<p id="clock">02:00</p>

Clock. It will be ticking during the game. I suggest you put the initial time limit here, because the clock does not show anything until the game starts.

That's it! You are ready to go. You can also see a working demo here (feel free to check the source of that page to see how it's built).

A little more advanced usage

1. I want the game to start when a user pushes the button/clicks something!

Glad you asked. Simply put any element in your HTML with the id="startbutton". E.g.:

<div id="startbutton">Start!</div>

You can also see a working demo here.

2. And what about the score?

You should add something like this:

 <div id="onfinish">
   You scored: <span class="score"><!-- score !--></span>
 </div>

to show a player the score when the game ends.

An element with the id="onfinish" should be hidden at start. You can simply do that in your CSS. It will magically appear at the end of the game.

Note the <!-- score !-->. You can place as many of them as you want inside the element with id="onfinish". The <!-- score !--> will be replaced with a player's score (i.e., how many elements he got right). Using this you can create "link back to us", "put your score on your website/blog" blocks with ease.

See the demo here.

Tips and tricks

What if you want to create an entertaining game but you can't decide how to name particular items in your guessing list?

For example, you want to create a game titled "How many losties (from the TV show "Lost") can you name in 3 minutes?" and you are not sure what to put in the list: "Sawyer" or "James Ford". It's the same person and it would be inaccurate to put two separate entries for his two names.

The solution is very simple. You can specify alternative item names separating them with |. For example:

<input type="hidden" name="items" id="items"
  value="James Ford | Sawyer, Johnathan Locke | Lock | John, ..." />

In this case "James Ford | Sawyer" is treated as a single item with one alternative name. And John has two alternative names.

During the game, any of the answers "James Ford" or "Sawyer" will be treated as correct, however the script will display only the first name "James Ford" as a confirmation. And when missing items will be shown at the end of the game only first name will be used.

Anything more?

Should you have any questions - you can ask me directly. And if you want some more incredible thingies built - you can hire me.

Wait! You said "5 minutes"!

Yes, just grab source code from this tutorial or from working examples and paste it in your website's template. Now you have 4 minutes to replace some headlines and add your own answers to the quiz.

 
And in the end some ideas on what games you can build on your own.

Ideas:

Upd: for ideas you can also check comments on this blog post.

In summary: pick any group of objects that is larger than 10 entities and build your own game.

Before saying goodbye:

A link back or honorable mention would be appreciated.