Skip to content
Erik Loyer edited this page Sep 24, 2017 · 5 revisions

The base format for Stepwise content is Stepwise XML. However, there are a variety of convenient ways to get content into Stepwise apart from authoring Stepwise XML directly.

Plain text file or document

Content creators will rarely want to author natively in Stepwise XML, so Stepwise includes a plain text parser. To load a text file and convert each line into a separate step, use the "textfile" data type and pass "newline" as the delimiter:

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

You can also load a string directly (this is Stepwise's default input method, which uses spaces as delimiters between steps):

$("#output").stepwise("Hello world");

Array of strings

If the default space-delimited string is too limiting a format, you can pass in an array of strings to be parsed as separate steps.

$("#output").stepwise(["Hello there", "wonderful world"]);

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.

First, make sure you've made the Sheets module available to the page:

<script type="text/javascript" src="js/utils/Sheets.js"></script>

Your document must also be made public in Google Sheets using File > Publish to the Web. You can pass in either the document's URL (it's actual URL copied from the browser's location bar, not the URL shown when you Publish to the Web) or its id.

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

Stepwise XML file or document

Of course, you can always load a Stepwise XML file directly by specifying the path to the file along with the "xmlfile" 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"});

Options when loading

When a string is passed into the plugin, Stepwise will parse it as a space-delimited series of steps. Passing a object instead allows the instance to be configured using the following options:

Option Description
source Required. Either a URL to an XML or text file, an XML document, or a string (be sure to specify the dataType option accordingly).
dataType Sets the type of content the plugin expects: array, string, textfile, xml, or xmlfile. Defaults to string.
clickInput If true, Stepwise will listen for mouse clicks on the input element. Defaults to true.
delimiter Set the delimiter to be used when splitting string input into steps. Defaults to a single space. Use "newline" to split the string line by line.
inputElement Selector for the element to which click and tap handlers will be attached for input. If left unspecified, the element to which the instance is attached will be used.
keyInput If true, Stepwise will listen to keypresses for input. Defaults to true.
keyCodesToIgnore An array of key codes that will be ignored when listening for keyboard input.
onLoad A function that will be called once the content specified in source has been loaded. The current Stepwise instance will be passed in as the sole parameter.
onStep A function that will be called every time a step is executed, with the event and the Step object as parameters.
outputToElement If true, visible output will automatically be directed to the DOM element the plugin was instantiated with. Defaults to true.
tapInput If true, Stepwise will listen for taps on the input element. Defaults to true.