Transform HTML input checkboxes into simple tutorial and step-by-step guide systems
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bower_components
dist
examples
.gitignore
README.md
bower.json

README.md

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