Checkmate

Checkmate is a jQuery plugin to build simple step tutorial and step-by-step guide systems out of HTML checkbox inputs.

Browser Compatibility

Works well with Internet Explorer 9, and beyond. Internet Explorer 8 or below - use at your own risk.

Features

• Super easy setup
• Create step-by-tutorial with simple HTML checkboxes in minutes
• Increase engagement by giving users instant feedback via notifications
• Automatically save tutorial progress through LocalStorage

Example of Checkmate in action Click here to see Checkmate in action.

Here's another example.

Usage

Example:

$(document.body).checkmate();

Checkmate will use any input with type="checkbox" that is a child of the element that is passed to the jQuery selector.

History

Created by Erik August Johnson originally for Cabin, the React/Redux Tutorial series, by Stream.

Latest Version

0.1.0: "Save your progress via localStorage" edition
0.0.2: "I've added some basic options" edition.
0.0.1: "I created this in an hour in my living room" edition.

Installation

bower install checkmate

Order your scripts like so:

<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/growl/javascripts/jquery.growl.js"></script>
<script src="../dist/jquery.checkmate.js"></script>

jQuery Options

Here are the current options that can be passed via an object to Checkmate:

defaultTitle
The title that will be used if a checkbox title is not specified via data-checkmate

Defaults to: 'Checkmate'
Input type: String

growlPlacement
The placement of the jquery-growl alert/notification box.

Options: 'tl' | 'tr' | 'bl' | 'br' | 'tc' | 'bc'
Defaults to: 'br'
Input type: String

growlDuration
The duration of time (in milliseconds) the jquery-growl alert/notification box is visible:

Defaults to: 2000
Input type: Integer

saveProgress
Saves a record of checkboxes checked for a page via Local Storage. Works well in Internet Explorer 9, and beyond.
For a checkbox to be saved, either the id attribute or data-checkmate-id attribute must be set for the checkbox.

Defaults to: false
Input type: Boolean (True or False)

An example of setting options:

$(document.body).checkmate({
  defaultTitle: "Cabin",
  growlDuration: 1000,
  saveProgress: true
});

Markup-Based Options

The following can be set as attributes:

data-checkmate The title of any checkbox can be set by using the data-checkmate attribute. Something like:

data-checkmate="Example Title"

data-checkmate-id Can be used to set a unique id for a checkbox - which is used to store the completion progress, if saveProgress is set to true.

Dependencies

jQuery
Checkmate is a jQuery plugin.

jQuery Growl
Growl is used for the notification/alerts on checkbox change.
Repo: https://github.com/ksylvest/jquery-growl