Tutorial Hierarchy

The tutorial hierarchy features the definitions of tutorials.

Note: Hover your mouse over a node for a tooltip definition, and click to get all the details.


Tutorial Topic
	Tutorial Topic
		Tutorial Step
	Tutorial Step
Tutorial Step

Tutorial

Nodes in the hierarchy may be arranged freely, meaning that there may be as many tutorial topics and tutorial steps as desired. In general terms, all types of nodes behave similarly in the sense that each node, independently of the precise type, represents a tutorial step in and of itself. There are subtle differences to be covered where appropriate.

Adding a Tutorial Node

To add the tutorial node, select Add Tutorial on the parent node menu.

Configuring the Tutorial

The configuration of each node in the tutorial hierarchy determines the content of each step. All types of nodes share the same basic configuration. However, tutorial step nodes have extra properties, described elsewhere.

The layout of the HTML page is fixed (CSS styles are fixed too) and is made out of a sequence of HTML elements, each of which may or may not be used, depending on whether the corresponding configuration parameter exists or not in the configuration.

In other words, you may choose which elements of a potentially long list are used by filling the corresponding parameters with content or not.

Note: The HTML page features a limited space and does not support scrolling. If too much information is defined in the configuration, the resulting content overflows the available space. There is no system-side control to deal with such overflows, so it’s up to you to spread information across multiple steps and keep each page within its limits.

Tip: You may use HTML element tags and inline CSS as part of the content of parameters. Just consider that they shall be embedded in the fixed layout and their effectiveness may vary.

Select Configure on the menu to access the configuration.

{
    "title": "",
    "summary": "",
    "subTitle": "",
    "gif": "",
    "image": "",
    "definition": "",
    "bulletListIntro": "",
    "bulletArray": [
        [
            "",
            ""
        ],
        [
            "",
            ""
        ],
        [
            "",
            ""
        ]
    ],
    "paragraph1": "",
    "callOut": "",
    "externalLink": [
        "",
        ""
    ],
    "paragraph2": "",
    "note": "",
    "tip": "",
    "important": "",
    "warning": "",
    "position": "",
    "slider": "toTop",
    "pressButton": "",
    "documentationURL": ""
}

Tip: Configuration items are listed in the order of appearance in the HTML layout, that is, the sequence of HTML elements mentioned earlier.

title is the <H1> tag, the main title of the page.
summary is a block of text preceded with the word Summary.
subTitle is the <H2> tag, the secondary title of the page.
gif is the name of an image in the GIF format. Do not include the .gif extension in the configuration, and make sure that the name of the file features the extension in lowercase. The file must be stored in the \Projects\[Project-Name]\Gifsfolder. The optimum size of the image is 400 px in width. For a step showing only a gif image, use 580 px for the height.
image is the name of one of the icons stored in the \Projects\[Project-Name]\Iconsfolder, without the extension. When the configuration exists, the icon is placed within a table, on the left-hand side of the text block featured in the definition field. When there is no icon, the definition occupies the full width.
definition is a block of text in bold style (<strong> HTML tag).
bulletListIntro is a block of text that serves as an introduction to the array of bullet points below.
bulletArray is the definition of any number of bullet points. The first field on each bullet is rendered in bold style and the second, in plain style. If the fields are left empty, the bullet list will still be included in the HTML, therefore, if you don’t want bullets you must delete the whole definition of the bullet array from the configuration.
paragraph1 is a regular block of text.
callOut is a block of text in bold style with a green border and the left-hand side of the block.
externalLink allows you to set up a link that opens in a new tab at the end of the callOut block. Enter the URL in the first field and the anchor text in the second.
paragraph2 is a regular block of text.
note is a block of text within a blue box preceded with the string Note:.
tip is a block of text within a green box preceded with the string Tip:.
important is a block of text within a yellow box preceded with the string Important:.
warning is a block of text within a red box preceded with the string Warning:.
position determines the position of the floating HTML. There are three alternatives: Left, Right, or leave the field empty to position the page in the center of the screen.
slider determines the position of the horizontal slider. There are four alternatives: toTop, Right, or leave the field empty to position the page in the center of the screen.
pressButton allows you to forcefully Stop the tutorial, go to the Next step, go to the Previous step, or Skip a step. When a step is loaded and one of these options is configured in this field, the action is applied immediately.
documentationURL opens the Superalgos Documentation in the URL you configure. Use the complete URL, including the https:// protocol header.

Tutorial Topic

A tutorial topic is an organizational device that helps to keep tutorial step nodes arranged in a logical hierarchy by topics and subtopics.

Tutorial topics may be nested within other tutorial topics in unlimited levels, and each level may feature multiple tutorial steps.

Adding a Tutorial Topic Node

To add the tutorial topic node, select Add Tutorial Topic on the parent node menu.

Configuring the Tutorial Topic

Note: The configuration of the tutorial topic node is the same as the tutorial node. Refer to the latter, please.

Tutorial Step

A tutorial step is a type of node within a tutorial that may not have offspring. As such, it is the smallest unit of information in the hierarchy.

Adding a Tutorial Step Node

To add the tutorial step node, select Add Tutorial Step on the parent node menu.

Configuring the Tutorial Step

Note: The basic configuration of the tutorial step node is the same as the tutorial node. Refer to the latter, please.

In addition to the basic configuration, tutorial step nodes feature a large collection of resources that allows you to manipulate the user interface and actual nodes in many ways.

Setting up a reference to any node in the workspace and using the below parameter makes the step load next to the referenced node.

    "positionAtReferenceParent": true,

Messages

Setting up a reference to any node in the workspace and using the below parameters allows placing different types of messages on the referenced node.

    "setErrorMessageReferenceParent": "This is a simulated error message!"
    "setInfoMessageReferenceParent": "This is a simulated info message!"
    "setValueReferenceParent": "This is a simulated value message!"
    "setPercentageReferenceParent": "This is a simulated progress message!"
    "setStatusReferenceParent": "This is a simulated status message!"

Centering and Zooming Into a Time Machine

Setting up a reference to a time machine node in the charting space hierarchy while using the below parameter causes the following:

The charting space viewport is centered on the referenced time machine.
The time machine is adjusted to fit the aspect ratio of the screen.
The viewport zooms into the time machine.

    "repositionAtTimeMachineReferenceParent": true,

Pressing Keys When on a Time Machine

Setting up a reference to a time machine node in the charting space hierarchy and using the below parameters allows simulating the pressing of relevant key combinations when on a time machine.

    "keyPressedTimeMachineReferenceParent": {
        "shiftKey": true,
        "ctrlKey": true,
        "metaKey": true,
        "key": "A"
    }

shiftKey, ctrlKey, and metaKey (Mac OS equivalent to Control) may be true or false.
key may be any letter or number.

Modifying the Configuration of Nodes

Setting up a reference to any node in the design space and using the following parameters allows you to edit the configuration of the referenced nodes and their offspring.

The example below changes the configuration of the three different scale nodes under a time machine. In this case, the time machine is the node referenced, the nodePath is the path of the node whose configuration must be changed relative to the referenceParent, and the properties parameter is the actual configuration to be set.

    "batchConfigChangesReferenceParent": [
        {
            "nodePath": "referenceParent.timeScale",
            "properties": {
                "autoMinScale": false,
                "autoMaxScale": false,
                "fromDate": "2020-08-31T23:40:00.000Z",
                "toDate": "2020-09-01T01:00:00.000Z"
            }
        },
        {
            "nodePath": "referenceParent.rateScale",
            "properties": {
                "autoMinScale": false,
                "autoMaxScale": false,
                "minValue": 11400,
                "maxValue": 11800
            }
        },
        {
            "nodePath": "referenceParent.timeFrameScale",
            "properties": {
                "value": "01-min"
            }
        }
    ]