Available translations

Tutorial

education.png
tutorial.png
The tutorial hierarchy features a free arrangement of Tutorial Topic and Tutorial Step nodes that make up a tutorial. Each node in the hierarchy, including the parent tutorial node, represents an HTML page that may be overlaid on top of both the Design Space and the Charting Space.
Content
Nodes in the hierarchy may be arranged freely, meaning that there may be as many tutorial topics and tutorial steps as desired. Tutorial topics may contain tutorial steps but also other tutorial topics. This allows nesting topics to be used as subtopics.
The system – as usual – evaluates the hierarchy in a clockwise direction starting from the node to the right of the parent Tutorial node, and goes to the deepest node of each branch before moving to the next one.
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. That is, all nodes including the top-level Tutorial node, the Tutorial Topic node, and the Tutorial Step node may display a content page as a step in the tutorial. Subtle differences shall be pointed where appropriate.
Configuring
Tutorial Configuration
The configuration of each node in the tutorial hierarchy determines the content and behavior of each step. All types of nodes share the same basic configuration. However, Tutorial Step nodes have extra properties, described on the Tutorial Step node page.
The layout of the HTML page follows the layout of the associated page in the Docs, although displayed within the confines of the tutorial window.
In other words, you affect the layout of the particular step by writing content and applying styles to individual paragraphs in the associated Docs Page.
Configuration Properties
icon
The property icon requires two definitions:
  • The "name" of the icon without the extension;
  • The "project" the icon belongs to.
For your reference, icons are stored in the following path:
 \Projects\[Project-Name]\Icons
When the configuration exists, the icon is placed within a table, side by side with the text block that makes up the definition field of the associated Docs Page. When there is no icon, the definition occupies the full width of the page.
 "icon": {
        "name": "balance",
        "project": "Foundations"
    }
The above configuration places the balance.png icon of the Superalgos project in the table of the corresponding Docs page (see the docs property below).
position
The position property determines the position of the floating HTML. There are three alternatives... "Left", "Right", or leave the field empty to position the page on the center of the screen.
     "position": "Left"
The configuration above places the tutorial step on the left-hand side of the screen.
slider
The slider property determines the position of the horizontal slider. There are three alternatives... "toTop", "toBottom", "toMiddle".
 "slider": "toBottom" // Opens the Charting Space
 "slider": "toTop" // Opens the Design Space
 "slider": "toMiddle" // Enables using the Charting Space and the Design Space concurrently
pressButton
The pressButton property 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 property, the action is applied immediately.
 "pressButton": "Next"
The above configuration takes the user to the next step in the tutorial without displaying any content for the node in question.
docs
The docs property is used to point to the Docs Tutorial Page that feeds content to the particular tutorial step. The definition requires the name of the Project, the Docs Page Category which is always "Tutorial", and the complete name of the Docs Page, that is, the "type" as specified in the JSON file.
 "docs": {
        "project": "Foundations",
        "category": "Tutorial",
        "type": "Tutorial Step - Scales' Best-Kept Secrets"
    }
controlDocs
The property is used to control the behavior of the Docs panel. Within controlDocs, several properties are available, and all of them are optional. Let's review each in detail.
The panel property may be set to "Open" or "Close". This property controls the tab that allows you to open the Docs Panel in one step, and close it on a different step when it's no longer needed.
 "controlDocs": {
        "panel": "Open",
        }
The property closeTutorialEditor may switch on and off the Docs editor. When set to false or when there is no definition, and provided no specific Docs Page is called (see controlDocs below), the Docs panel shows the page associated with the current tutorial step in editing mode.
 "controlDocs": {
        "panel": "Open",
        "closeTutorialEditor": false,
        }
When the closeTutorialEditor property is set to true and there is no request to open a Docs page (see page property below), then the Docs panel shows whatever Docs Page was being displayed in the previous step.
 "controlDocs": {
        "panel": "Open",
        "closeTutorialEditor": true,
        }
The searchPage property overruns the tutorial editor settings and loads the home search page featuring the search box in the center.
 "controlDocs": {
        "panel": "Open",
        "searchPage": true,
        }
The page property is where you define which Docs Page must be loaded. You must specify the Project, the Docs Page Category, and the "type" which is the complete name of the page. The optional property anchor allows you to point the user to a specific paragraph in the page with the Docs Anchor Style.
 "controlDocs": {
        "panel": "Open",
        "page": {
            "project": "Foundations",
            "category": "Topic",
            "type": "Syntax Overview",
            "anchor": "Previous Property"
            }
         }
Initial Values
These are the Initial Values for Tutorial configuration:
 {
    "icon": {
        "name": "",
        "project": "Foundations"
    },
    "position": "Left",
    "slider": "toTop",
    "pressButton": "",
    "docs": {
        "project": "Foundations",
        "category": "Tutorial",
        "type": ""
    },
    "controlDocs": {
        "panel": "",
        "closeTutorialEditor": false,
        "page": {
            "project": "Foundations",
            "category": "",
            "type": ""
        }
    }
}
Examples
This is a list of properties featured by the Tutorial configuration. Expanding a property shows sample values for the property extracted from the current Workspace.
Tutorial Menu
The Tutorial node has the following Node Menu items:
The Play menu item has the following properties:
  • action: Play Tutorial
  • actionProject: Education
  • label: Play
  • iconPathOn: play
  • iconPathOff: play
  • actionFunction: payload.executeAction
The Resume menu item has the following properties:
  • action: Resume Tutorial
  • actionProject: Education
  • label: Resume
  • iconPathOn: resume
  • iconPathOff: resume
  • actionFunction: payload.executeAction
The Configure menu item has the following properties:
  • action: Configure
  • actionFunction: uiObject.configEditor.activate
  • label: Configure
  • iconPathOn: configuration
  • iconPathOff: configuration
The Add Tutorial Step menu item has the following properties:
  • action: Add UI Object
  • actionProject: Visual-Scripting
  • label: Add Tutorial Step
  • actionFunction: payload.executeAction
  • relatedUiObjectProject: Education
The Add Tutorial Topic menu item has the following properties:
  • action: Add UI Object
  • actionProject: Visual-Scripting
  • label: Add Tutorial Topic
  • actionFunction: payload.executeAction
  • relatedUiObjectProject: Education
The Reset Tutorial Progress menu item has the following properties:
  • action: Reset Tutorial Progress
  • actionProject: Education
  • askConfirmation: true
  • confirmationLabel: Confirm to Reset
  • label: Reset Tutorial Progress
  • iconPathOn: reset
  • iconPathOff: reset
  • actionFunction: payload.executeAction
The Delete menu item has the following properties:
  • action: Delete UI Object
  • actionProject: Visual-Scripting
  • askConfirmation: true
  • confirmationLabel: Confirm to Delete
  • label: Delete
  • iconPathOn: delete-entity
  • iconPathOff: delete-entity
  • actionFunction: payload.executeAction
Tutorial Children
The Tutorial node has the following childrenNodesProperties:
The Tutorial Steps node property features the following properties:
  • name: tutorialSteps
  • type: array
  • autoAdd: false
The Tutorial Topics node property features the following properties:
  • name: tutorialTopics
  • type: array
  • autoAdd: false