Wizard
v0.0.0
The wizard shows a series of single-answer questions. When an answer is given the next button is enabled. When the next button is clicked data is sent to server through Ajax. The response can be Ajax or JSON. Examples of Ajax and JSON data are included down this page.
The last step is supposed to be a redirect to given url.
After the first step a back button can be used to go back one step. The progress indicators of previous steps also act as back-buttons.
The questions and answers follow a decision tree, which leads to the most relevant outcome for the visitor (be it content on the website in the form of articles, a Facebook post or page, or a contact form). The logic and content of the decision tree are out of scope of this Component.
JSON #
Set the data-type attribute to json to load and parse json responses.
To get checkboxes, add "checkbox": true to the options. (see 'json response 2')
For examples of json format please see:
Question 1
<!-- Wizard -->
<div class="vi-wizard" data-type="json">
<div class="vi-wizard__head">
<ol class="vi-wizard__progress">
<li class="vi-wizard__progress-item">
<!-- Button type: pagination -->
<button type="button" class="active vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">1</span></button>
</li>
<li class="vi-wizard__progress-item">
<!-- Button type: pagination -->
<button disabled type="button" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">2</span></button>
</li>
<li class="vi-wizard__progress-item">
<!-- Button type: pagination -->
<button disabled type="button" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">3</span></button>
</li>
<li class="vi-wizard__progress-item">
<!-- Button type: pagination -->
<button disabled type="button" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">4</span></button>
</li>
<li class="vi-wizard__progress-item">
<!-- Button type: pagination -->
<button disabled type="button" class="vi-btn-pagination vi-btn-pagination--tick vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--tick vi-btn__label">5</span></button>
</li>
</ol>
</div>
<div class="vi-wizard__main">
<!-- Separator (mods: --dotted) -->
<hr class="vi-separator vi-separator--dotted">
<div class="vi-wizard__set">
<div class="vi-wizard__step">
<p class="vi-wizard__chapeau">Question 1</p>
<div class="vi-wizard__form">
<!-- Form (mods: --accent) -->
<form action="/api/wizard/2.json" autocomplete="off" class="vi-form vi-form--accent vi-typesystem">
<div class="form-group" role="group" aria-labelledby="label-c519b5">
<div class="mb-10 vi-form__text vi-form__text--label vi-typesystem vi-typesystem--collapse-last" id="label-c519b5">
<p>How is this person related to you?</p>
</div>
<div class="custom-checkbox custom-control">
<input class="custom-control-input" id="control-a1c136" name="name-ee522b" type="checkbox" value="Father">
<label class="custom-control-label" for="control-a1c136">
Father
</label>
</div>
<div class="custom-checkbox custom-control">
<input class="custom-control-input" id="control-423d14" name="name-383025" type="checkbox" value="Mother">
<label class="custom-control-label" for="control-423d14">
Mother
</label>
</div>
<div class="custom-checkbox custom-control">
<input class="custom-control-input" id="control-c121a1" name="name-831e43" type="checkbox" value="A close family member">
<label class="custom-control-label" for="control-c121a1">
A close family member
</label>
</div>
<div class="custom-checkbox custom-control">
<input class="custom-control-input" id="control-3be89a" name="name-12019e" type="checkbox" value="Spouse">
<label class="custom-control-label" for="control-3be89a">
Spouse
</label>
</div>
</div>
<div class="vi-wizard__actions">
<!-- Button type: solid -->
<button disabled type="submit" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn-solid--no-pointer vi-btn">Next</button>
</div>
</form>
</div>
</div>
</div>
<!-- Separator (mods: --dotted) -->
<hr class="mb-0 vi-separator vi-separator--dotted">
</div>
</div>Ajax #
Set the data-type attribute to ajax to load responses.
Checkboxes can be used. (see source of 'ajax response 2')
For examples of ajax format please see:
Question 1
<!-- Wizard -->
<div class="vi-wizard" data-type="ajax">
<div class="vi-wizard__head">
<ol class="vi-wizard__progress">
<li class="vi-wizard__progress-item">
<!-- Button type: pagination -->
<button type="button" class="active vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">1</span></button>
</li>
<li class="vi-wizard__progress-item">
<!-- Button type: pagination -->
<button disabled type="button" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">2</span></button>
</li>
<li class="vi-wizard__progress-item">
<!-- Button type: pagination -->
<button disabled type="button" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">3</span></button>
</li>
<li class="vi-wizard__progress-item">
<!-- Button type: pagination -->
<button disabled type="button" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">4</span></button>
</li>
<li class="vi-wizard__progress-item">
<!-- Button type: pagination -->
<button disabled type="button" class="vi-btn-pagination vi-btn-pagination--tick vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--tick vi-btn__label">5</span></button>
</li>
</ol>
</div>
<div class="vi-wizard__main">
<!-- Separator (mods: --dotted) -->
<hr class="vi-separator vi-separator--dotted">
<div class="vi-wizard__set">
<div class="vi-wizard__step">
<p class="vi-wizard__chapeau">Question 1</p>
<div class="vi-wizard__form">
<!-- Form (mods: --accent) -->
<form action="/api/wizard/2.html" autocomplete="off" class="vi-form vi-form--accent vi-typesystem">
<div class="form-group" role="group" aria-labelledby="label-269296">
<div class="mb-10 vi-form__text vi-form__text--label vi-typesystem vi-typesystem--collapse-last" id="label-269296">
<p>How is this person related to you?</p>
</div>
<div class="custom-checkbox custom-control">
<input class="custom-control-input" id="control-b3a92b" name="name-11d940" type="checkbox" value="Father">
<label class="custom-control-label" for="control-b3a92b">
Father
</label>
</div>
<div class="custom-checkbox custom-control">
<input class="custom-control-input" id="control-462617" name="name-bbd43e" type="checkbox" value="Mother">
<label class="custom-control-label" for="control-462617">
Mother
</label>
</div>
<div class="custom-checkbox custom-control">
<input class="custom-control-input" id="control-6cb2a9" name="name-d1e34b" type="checkbox" value="A close family member">
<label class="custom-control-label" for="control-6cb2a9">
A close family member
</label>
</div>
<div class="custom-checkbox custom-control">
<input class="custom-control-input" id="control-a9ae65" name="name-18a399" type="checkbox" value="Spouse">
<label class="custom-control-label" for="control-a9ae65">
Spouse
</label>
</div>
</div>
<div class="vi-wizard__actions">
<!-- Button type: solid -->
<button disabled type="submit" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn-solid--no-pointer vi-btn">Next</button>
</div>
</form>
</div>
</div>
</div>
<!-- Separator (mods: --dotted) -->
<hr class="mb-0 vi-separator vi-separator--dotted">
</div>
</div>Contextual fields #
The data-type must be ajax for contextual fields to work. Checkbox/radio with an extra text field
have data-attribute data-contextual defined, pointing to the id of the collapse containing
the extra field.
Step validation checks that when contextual checkbox/radio is selected, the corresponding text field is not empty.
Question 1
<!-- Wizard -->
<div class="vi-wizard" data-type="ajax">
<div class="vi-wizard__head">
<ol class="vi-wizard__progress">
<li class="vi-wizard__progress-item">
<!-- Button type: pagination -->
<button type="button" class="active vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">1</span></button>
</li>
<li class="vi-wizard__progress-item">
<!-- Button type: pagination -->
<button disabled type="button" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">2</span></button>
</li>
<li class="vi-wizard__progress-item">
<!-- Button type: pagination -->
<button disabled type="button" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">3</span></button>
</li>
<li class="vi-wizard__progress-item">
<!-- Button type: pagination -->
<button disabled type="button" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">4</span></button>
</li>
<li class="vi-wizard__progress-item">
<!-- Button type: pagination -->
<button disabled type="button" class="vi-btn-pagination vi-btn-pagination--tick vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--tick vi-btn__label">5</span></button>
</li>
</ol>
</div>
<div class="vi-wizard__main">
<!-- Separator (mods: --dotted) -->
<hr class="vi-separator vi-separator--dotted">
<div class="vi-wizard__set">
<div class="vi-wizard__step">
<p class="vi-wizard__chapeau">Question 1</p>
<div class="vi-wizard__form">
<!-- Form (mods: --accent) -->
<form action="/api/wizard--contextual/2.html" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
<div class="form-group">
<div class="custom-checkbox custom-control">
<input class="custom-control-input" id="control-0a1eb5" name="name-086219" type="checkbox" value="Father">
<label class="custom-control-label" for="control-0a1eb5">
Father
</label>
</div>
<div class="custom-checkbox custom-control">
<input class="custom-control-input" data-contextual="mother-2bad29" id="control-853888" name="name-6277c7" type="checkbox" value="Mother">
<label class="custom-control-label" for="control-853888">
Mother
</label>
</div>
<div class="collapse" id="mother-2bad29">
<div class="py-10">
<div class="vi-form__inset">
<div class="form-group">
<label for="control-09c71e">Your email
<span aria-hidden="true" class="vi-form__required">(required)</span></label>
<input aria-describedby="help-a61eb0" aria-required="true" class="form-control" id="control-09c71e" name="name-180e22" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Your email" required type="text">
<div id="help-a61eb0" class="vi-form__feedback vi-form__feedback--hint">Pattern validation using [^@\s]+@[^@\s]+\.[^@\s]+ to require a TLD (see pattern attribute)</div>
</div>
</div>
</div>
</div>
<div class="custom-checkbox custom-control">
<input class="custom-control-input" id="control-e83288" name="name-c66d8c" type="checkbox" value="A close family member">
<label class="custom-control-label" for="control-e83288">
A close family member
</label>
</div>
<div class="custom-checkbox custom-control">
<input class="custom-control-input" data-contextual="other-078947" id="control-627158" name="name-844aca" type="checkbox" value="Other">
<label class="custom-control-label" for="control-627158">
Other
</label>
</div>
<div class="collapse" id="other-078947">
<div class="py-10">
<div class="vi-form__inset">
<div class="form-group">
<label for="control-5c7133">Your email
<span aria-hidden="true" class="vi-form__required">(required)</span></label>
<input aria-describedby="help-e5032c" aria-required="true" class="form-control" id="control-5c7133" name="name-4dcabc" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Your email" required type="text">
<div id="help-e5032c" class="vi-form__feedback vi-form__feedback--hint">Pattern validation using [^@\s]+@[^@\s]+\.[^@\s]+ to require a TLD (see pattern attribute)</div>
</div>
</div>
</div>
</div>
</div>
<div class="vi-wizard__actions">
<!-- Button type: solid -->
<button disabled type="submit" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn-solid--no-pointer vi-btn">Next</button>
</div>
</form>
</div>
</div>
</div>
<!-- Separator (mods: --dotted) -->
<hr class="mb-0 vi-separator vi-separator--dotted">
</div>
</div>Stylesheets #
The following stylesheets are required to display this component.
JavaScript #
The following javascripts are required to display this component.
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Fix
- 12 Oct 2022 - Hide contextual field radio button when unselected
- 04 Oct 2022 - Glitch when navigating back.
Changed
- 14 Nov 2022 - Form validation required by step validation.
- 07 Oct 2022 - Add Contextual field suppport
- 04 Oct 2022 - Add memory, when fields in a step are identical in name and value.
- 03 Oct 2022 - Revert changes for text field.
- 19 Sep 2022 - Sharpen step validation to allow for text field.
- 17 Aug 2022 - Add checkbox support
- PBS support
Added
- 21 Nov 2022 - When top of wizard not in viewport on prev step, scroll top into view.
- 07 Nov 2022 - When top of wizard not in viewport on new step, scroll top into view.
- Initial draft