jQuery Plugin API Reference

Loading Content

There are a variety of ways to get content into Stepwise.

Stepwise XML file or document

You can load a Stepwise XML file directly by specifying the path to the file and the appropriate data type:

$("#output").stepwise({source:"myscript.xml", dataType:"xmlfile"});

You can also pass a Stepwise XML document directly into the plugin by using the "xml" data type:

$("#output").stepwise({source:xmlDoc, dataType:"xml"});

Plain text file or document

Content creators will rarely want to author in XML directly, so Stepwise includes a plain text parser which converts every line into a discrete step. To load a text file, specify the path to the file and use the "textfile" data type:

$("#output").stepwise({source:"myscript.txt", datatype:"textfile"});

You can also load a string directly:

var str = "Hello" + "\n" + "world";
$("#output").stepwise({source:str, datatype:"text"});

Google Sheets document

A more robust option is the Google Sheets parser, which converts a specially formatted Sheets document into Stepwise XML. This is the fastest way to author sophisticated Stepwise content.

The document must first be published to the web in Google Sheets using File > Publish to the Web. You can pass in either the document's URL (its actual URL, not its Publish to the Web URL) or its id.

$.fn.stepwise.getXMLFromSheet(sheetURLOrId, function(xml) {
	$("#output").stepwise(source: xml, dataType: 'xml');
});

Handling Output

By default, Stepwise will output the visible content of individual steps to the DOM element referenced in the selector (in the examples above, the element with the id "output").

For more sophisticated output handling with minimal effort, you can use an effect. Stepwise effects bundle commonly used functionality into discrete modules, including the ability to direct output from specific characters to specific DOM elements. Stepfade, the effect used below, adds a quick fade in when each step is displayed.

// Load the script and store the instance
var stepwiseInstance;
$("#output").stepwise({source:"myscript.xml", dataType:"xmlfile",
	handleLoad: function(instance) { stepwiseInstance = instance; }
});

// Initialize the effect and bind it to the instance
var stepfade = new $.fn.stepwise.effects.Stepfade();
stepfade.bindToInstance(stepwiseInstance);

// Bind output from specific characters to different DOM elements
stepfade.bindCharacterToElement("amiri", "#left-column");
stepfade.bindCharacterToElement("maya", "#right-column");

Core

• Stepwise
• Score
• Step

Utilities

• Sheets

Effects

• AbstractEffect
• Stepfade