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

ErikAugust/checkmate