A troubleshooting guide is an interactive learning article that provides specific steps to self-diagnose an issue or to complete a series of configuration tasks.
The path consists of two main components: the step-progress bar, and the sections.
This component helps to visualise and keep track of the progress made.
The bar has three different states of activation:
inactive - the bar has not been activated at all and no steps have been marked as completed.
active - some or all the steps of the bar are marked as completed
completed - all the steps and bars are completed and the path has reached its end.
Sections are containers that wraps the content of the article, and serve two purposes:
- organize the content more legibly
- expand or collapse the content as you complete and move between steps
Example of a collapsed section:
Example of an expanded section
Sections have four different components:
title - the main topic discussed in the section
sub-title - provides a quick summary of the section
expand button - when clicked, fully expands the section
section-button - marks the section as completed and updates progress bar
The last section, when marked as completed by clicking the section-button, activates the reset button:
When clicked, the reset button automatically collapses all the sections, scrolls the article page back up, and resets both sections and step-progress bar to their inactive states.
To get the most out of the experience, we recommend to following workflow steps:
- Click on the section expand button to expand the first section
- When you're done reading and/or testing, mark the first section as completed by clicking the section button
- Collapse the section
- Repeat steps 1-3 for the following section