Looking at the index.html in the root of the project, there's a few things to note.
- The CSS files listed in the
<link>tags in the document's<head>are required for the 3rd party MDL libraries to function. - It's recommended to have a top level container with the
mdl-gridclass, which acts like a "row" for those familiar with Bootstrap - The child div with
mdl-cellandmdl-cell--12-colare the equivalent of columns in Bootstrap, and the latter class indicates that the entire width of the grid should be used for its content. - At a bare minimum, even if the last two steps are not followed, then you MUST have
<ul>tag with a readily referenceableidattribute. Everything else provided by this wrapper library is dynamically generated within the<ul>tag. - The JavaScript that's listed in the bottom
<script>tags is all required and must be imported in that exact order. - The script that says
WizardBuilder.initialize("demo-stepper", "wizard-content.json");should be customized with the<ul>tag'sidas the first attribute (no#) and a path/URL to the JSON file that holds the dynamic wizard's contents.
There's ample JSDoc strings throughout the wizardBuilder.js file to learn how the code works. More importantly, there's content that must be written from which the wizard is generated. This content can reside in any file as long as it adheres to a specific JSON format.
The layout of this JSON can be mostly intuited from the example wizard-content.json, but this is supplemented by an informal schema provided in the wizard-content-schema.yaml file. The schema file defines what the various JS objects look like when writing the wizard's content. Descriptions for each of the fields are provided such that it should be fairly obvious what the purpose of the field is, as well as any constraints on the field.
- Pull the repository down using either
gitor downloading the ZIP file - Navigate into the root of the project
- Start your favorite local server
- Install Python
- Run
python -m http.server
- Go into a web browser and enter the URL provided by your local web server
- Play around with the wizard
Several wizard libraries were considered for this initial implementation. Ultimately, the MDL Stepper won the day; however, the test page for demoing the different libraries still exists for reference purposes.
This test page can be accessed by going to the root of the project. Navigating down into the archive/wizard-test/ directory, and then starting a local
web server, the same as above. Both this test and the actual dynamic wizard demo page are self-contained.