Tutorials done

AppSchema.json

@@ -14151,7 +14151,7 @@
             "config": true
         },
         "initialValues": {
-            "config": "{ \n\"title\": \"\",\n \"summary\": \"\",\n \"subTitle\": \"\",\n \"image\": \"\",\n \"definition\": \"\",\n \"bulletListIntro\": \"\",\n \"bulletArray\": \n[\n [\"\", \"\"], \n[\"\", \"\"], \n[\"\", \"\"] \n],\n \"paragraph1\": \"\",\n \"callOut\": \"\",\n \"externalLink\": [\"\", \"\"],\n \"paragraph2\": \"\",\n \"note\": \"\",\n \"tip\": \"\",\n \"important\": \"\",\n \"warning\": \"\", \n \"position\": \"\",\n \"documentationURL\": \"\" \n}"
+            "config": "{ \n\"title\": \"\",\n \"summary\": \"\",\n \"subTitle\": \"\",\n \"gif\": \"\",\n \"image\": \"\",\n \"definition\": \"\",\n \"bulletListIntro\": \"\",\n \"bulletArray\": \n[\n [\"\", \"\"], \n[\"\", \"\"], \n[\"\", \"\"] \n],\n \"paragraph1\": \"\",\n \"callOut\": \"\",\n \"externalLink\": [\"\", \"\"],\n \"paragraph2\": \"\",\n \"note\": \"\",\n \"tip\": \"\",\n \"important\": \"\",\n \"warning\": \"\", \n \"position\": \"\",\n \"slider\": \"toTop\",\n \"documentationURL\": \"\" \n}"
         },
         "isTitleAllwaysVisible": true,
         "isHierarchyHead": true,
@@ -14222,10 +14222,11 @@
             "config": true
         },
         "initialValues": {
-            "config": "{ \n\"title\": \"\",\n \"summary\": \"\",\n \"image\": \"\",\n \"definition\": \"\",\n \"bulletListIntro\": \"\",\n \"bulletArray\": \n[\n [\"\", \"\"], \n[\"\", \"\"], \n[\"\", \"\"] \n],\n \"paragraph1\": \"\",\n \"callOut\": \"\",\n \"externalLink\": [\"\", \"\"],\n \"paragraph2\": \"\",\n \"note\": \"\",\n \"tip\": \"\",\n \"important\": \"\",\n \"warning\": \"\", \n \"position\": \"\",\n \"documentationURL\": \"\" \n}"
+            "config": "{ \n\"title\": \"\",\n \"summary\": \"\",\n \"gif\": \"\",\n \"image\": \"\",\n \"definition\": \"\",\n \"bulletListIntro\": \"\",\n \"bulletArray\": \n[\n [\"\", \"\"], \n[\"\", \"\"], \n[\"\", \"\"] \n],\n \"paragraph1\": \"\",\n \"callOut\": \"\",\n \"externalLink\": [\"\", \"\"],\n \"paragraph2\": \"\",\n \"note\": \"\",\n \"tip\": \"\",\n \"important\": \"\",\n \"warning\": \"\", \n \"position\": \"\",\n \"slider\": \"toTop\",\n \"documentationURL\": \"\" \n}"
         },
         "referenceAttachesTo": {
-            "compatibleTypes": "->*Any Node*->"
+            "compatibleTypes": "->*Any Node*->",
+            "incompatibleTypes": "->Tutorial->Tutorial Topic->Tutorial Step->"
         },
         "chainAttachesTo": {
             "compatibleTypes": "->Tutorial->"
@@ -14285,10 +14286,11 @@
             "config": true
         },
         "initialValues": {
-            "config": "{ \n  \"subTitle\": \"\",\n \"image\": \"\",\n \"definition\": \"\",\n \"bulletListIntro\": \"\",\n \"bulletArray\": \n[\n [\"\", \"\"], \n[\"\", \"\"], \n[\"\", \"\"] \n],\n \"paragraph1\": \"\",\n \"callOut\": \"\",\n \"externalLink\": [\"\", \"\"],\n \"paragraph2\": \"\",\n \"note\": \"\",\n \"tip\": \"\",\n \"important\": \"\",\n \"warning\": \"\", \n \"position\": \"\",\n \"documentationURL\": \"\" \n}"
+            "config": "{ \n  \"subTitle\": \"\",\n \"gif\": \"\",\n \"image\": \"\",\n \"definition\": \"\",\n \"bulletListIntro\": \"\",\n \"bulletArray\": \n[\n [\"\", \"\"], \n[\"\", \"\"], \n[\"\", \"\"] \n],\n \"paragraph1\": \"\",\n \"callOut\": \"\",\n \"externalLink\": [\"\", \"\"],\n \"paragraph2\": \"\",\n \"note\": \"\",\n \"tip\": \"\",\n \"important\": \"\",\n \"warning\": \"\", \n \"position\": \"\",\n \"slider\": \"toTop\",\n \"documentationURL\": \"\" \n}"
         },
         "referenceAttachesTo": {
-            "compatibleTypes": "->*Any Node*->"
+            "compatibleTypes": "->*Any Node*->",
+            "incompatibleTypes": "->Tutorial->Tutorial Topic->Tutorial Step->"
         },
         "chainAttachesTo": {
             "compatibleTypes": "->Tutorial->Tutorial Topic->"

BackendServers/WebServer/AppLoader.js

@@ -65,6 +65,7 @@ function newAppLoader() {
                 'Utilities/Clipboard.js',
                 'Utilities/DrawPrint.js',
                 'Utilities/LoadSaveFrame.js',
+                'Utilities/LoadSaveTutorial.js',
                 'Utilities/NodeConfig.js',
                 'Utilities/HiriarchyMap.js',
                 'Utilities/Folders.js',

BackendServers/WebServer/index.html

@@ -54,13 +54,13 @@
             <table class="tutorial-buttonsTable">
                 <tr>
                     <td>
-                        <label class="tutorial-stop-button" onclick="canvas.tutorialSpace.stop()" value="">Stop Tutorial</label>
+                        <label class="tutorial-font-small tutorial-stop-button" onclick="canvas.tutorialSpace.stop()" value="">Stop Tutorial</label>
                     </td>
                     <td>
-                        <label class="tutorial-skip-button" onclick="canvas.tutorialSpace.skip()" value="">Skip / Later</label>
+                        <label class="tutorial-font-small tutorial-skip-button" onclick="canvas.tutorialSpace.skip()" value="">Skip / Later</label>
                     </td>
                     <td>
-                        <label class="tutorial-done-button" onclick="canvas.tutorialSpace.done()" value="">Done / Next</label>
+                        <label class="tutorial-font-small tutorial-done-button" onclick="canvas.tutorialSpace.done()" value="">Done / Next</label>
                     </td>
                 </tr>
             </table>

BackendServers/WebServer/main.css

@@ -15,6 +15,13 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+@font-face {
+  font-family: segoeui;
+  src: url(Fonts/segoeui.woff) format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
 .tutorial-step {
   padding: 15px;
   margin-bottom: 20px;
@@ -139,38 +146,42 @@
   -moz-osx-font-smoothing:grayscale
 }
 
-.tutorial-saira-small {
+.tutorial-font-small {
   
-  font:normal normal normal 14px/1 "Saira";
+  font:normal normal normal 14px/1 "segoeui";
   font-size:inherit;
   text-rendering:auto;
   -webkit-font-smoothing:antialiased;
-  -moz-osx-font-smoothing:grayscale
+  -moz-osx-font-smoothing:grayscale;
+  line-height: 150%
 }
 
-.tutorial-saira-medium {
+.tutorial-font-medium {
   
-  font:normal normal normal 30px/1 "Saira";
+  font:normal normal normal 30px/1 "segoeui";
   text-rendering:auto;
   -webkit-font-smoothing:antialiased;
-  -moz-osx-font-smoothing:grayscale
+  -moz-osx-font-smoothing:grayscale;
+  line-height: 150%
 }
 
-.tutorial-saira-large {
+.tutorial-font-large {
   
-  font:bold normal normal 40px/1 "Saira";
+  font:bold normal normal 40px/1 "segoeui";
   text-rendering:auto;
   -webkit-font-smoothing:antialiased;
-  -moz-osx-font-smoothing:grayscale
+  -moz-osx-font-smoothing:grayscale;
+  line-height: 150%
 }
 
-.tutorial-saira-bold-small {
+.tutorial-font-bold-small {
   
-  font:bold normal normal 14px/1 "Saira";
+  font:bold normal normal 14px/1 "segoeui";
   font-size:inherit;
   text-rendering:auto;
   -webkit-font-smoothing:antialiased;
-  -moz-osx-font-smoothing:grayscale
+  -moz-osx-font-smoothing:grayscale;
+  line-height: 150%
 }
 
 .tutorial-stop-button {

CanvasApp/DesignSpace/Workspace/FunctionLibraries/ProtocolNode.js

@@ -179,6 +179,12 @@ function newProtocolNode() {
             }
         }
 
+        if (node.payload.tutorial !== undefined) {
+            savedPayload.tutorial = {
+                status: node.payload.tutorial.status
+            }
+        }
+
         if (includeReferencesInSavedPayload) {
             /* Next for the ones that have a reference parent, we include it */
             if (node.payload.referenceParent !== undefined) {

CanvasApp/DesignSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js

@@ -576,6 +576,12 @@ function newUiObjectsFromNodes() {
                 frame.radius = node.savedPayload.frame.radius
                 saveFrame(payload, frame)
             }
+            if (node.savedPayload.tutorial !== undefined) {
+                let tutorial = {
+                    status: node.savedPayload.tutorial.status
+                }
+                saveTutorial(payload, tutorial)
+            }
         }
 
         /* Now we mount the floating object where the UIOBject will be laying on top of */

CanvasApp/FloatingSpace/UiObject.js

@@ -618,6 +618,11 @@ function newUiObject() {
             let floatingObject = nearby[1]
             let nearbyNode = floatingObject.payload.node
             if (compatibleTypes.indexOf('->' + nearbyNode.type + '->') >= 0 || compatibleTypes === "->*Any Node*->" ) {
+                if (nodeDefinition.referenceAttachesTo.incompatibleTypes !== undefined) {
+                    if (nodeDefinition.referenceAttachesTo.incompatibleTypes.indexOf('->' + nearbyNode.type + '->') >= 0) {
+                        continue
+                    }
+                }
                 if (foundCompatible === false) {
                     if (distance < thisObject.payload.floatingObject.container.frame.radius * 1.5 + floatingObject.container.frame.radius * 1.5) {
                         nearbyNode.payload.uiObject.getReadyToReferenceAttach()

CanvasApp/Spaces/TutorialSpace.js

@@ -10,8 +10,6 @@ function newTutorialSpace() {
         resumeTutorialTopic: resumeTutorialTopic,
         playTutorialStep: playTutorialStep,
         resumeTutorialStep: resumeTutorialStep,
-        tutorialTopicDone: tutorialTopicDone,
-        tutorialStepDone: tutorialStepDone,
         resetTutorialProgress: resetTutorialProgress,
         container: undefined,
         physics: physics,
@@ -41,6 +39,9 @@ function newTutorialSpace() {
 
     let tutorialDiv = document.getElementById('tutorialDiv')
     let tutorialFormDiv = document.getElementById('tutorialFormDiv')
+    let htmlGif = document.createElement("IMG")
+    let currentGifName = 'Never Set'
+    let newGifName = 'Never Set'
     let htmlImage = document.createElement("IMG")
     let currentImageName = 'Never Set'
     let newImageName = 'Never Set'
@@ -48,6 +49,7 @@ function newTutorialSpace() {
     let newConfig
     let newDocumentationURL
     let currentDocumentationURL
+    let resumeModeActivated // In this mode, we skip all the node which status is 'Done'
 
     return thisObject
 
@@ -65,6 +67,7 @@ function newTutorialSpace() {
         tutorialDiv = undefined
         tutorialFormDiv = undefined
         image = undefined
+        gif = undefined
     }
 
     function resize() {
@@ -105,11 +108,26 @@ function newTutorialSpace() {
             }
         }
 
+        checkGif()
         checkImage()
         checkDocumentation()
+        checkSlider()
         checkReference()
         return
 
+        function checkGif() {
+            let tutorialGifDiv = document.getElementById('tutorialGifDiv')
+            if (tutorialGifDiv !== null && tutorialGifDiv !== undefined) {
+                tutorialGifDiv.appendChild(htmlGif)
+            }
+
+            if (currentGifName === newGifName) { return }
+            currentGifName = newGifName
+            htmlGif.src = 'Images/Tutorial/Gifs/' + currentGifName + '.gif'
+            htmlGif.width = "400"
+            //htmlGif.height = "100"
+        }
+
         function checkImage() {
             let tutorialImageDiv = document.getElementById('tutorialImageDiv')
             if (tutorialImageDiv !== null && tutorialImageDiv !== undefined) {
@@ -124,18 +142,63 @@ function newTutorialSpace() {
         }
 
         function checkDocumentation() {
-            if (currentNode === undefined) {return}
+            if (currentNode === undefined) { return }
             let config = JSON.parse(currentNode.config)
             let newDocumentationURL = config.documentationURL
-            if (newDocumentationURL === undefined || newDocumentationURL === "") {
+            if (newDocumentationURL === undefined) {
+                /*
+                The doc panel will remain as it is, and the user will be free to open or close it at will.
+                */
+                return
+            }
+            if (newDocumentationURL === "") {
+                /*
+                This forces the tutorial to close the documentation panel and to keep it closed.
+                */
                 canvas.docSpace.sidePanelTab.close()
+                return
             }
             if (newDocumentationURL === currentDocumentationURL) { return }
-            
+
             currentDocumentationURL = newDocumentationURL
             canvas.docSpace.navigateTo(currentDocumentationURL)
         }
 
+        function checkSlider() {
+            if (currentNode === undefined) { return }
+            let config = JSON.parse(currentNode.config)
+            if (config.slider === undefined) {
+                /*
+                The cockpit space will remain where it is. The user is free to move it.
+                */
+                return
+            }
+            switch (config.slider) {
+                case "toTop": {
+                    /*
+                    This forces the tutorial to close the charting space and to keep it closed.
+                    */
+                    canvas.cockpitSpace.toTop()
+                    return
+                }
+                case "toMiddle": {
+                    /*
+                    This forces the tutorial to share the screen half with the designer and half 
+                    with the charting space and force it in that way.
+                    */
+                    canvas.cockpitSpace.toMiddle()
+                    return
+                }
+                case "toBottom": {
+                    /*
+                    This forces the tutorial to fully open the charting space and to keep it open.
+                    */
+                    canvas.cockpitSpace.toBottom()
+                    return
+                }
+            }
+        }
+
         function checkReference() {
             /* 
             If there is a reference parent defined, we will highlight it 
@@ -240,10 +303,15 @@ function newTutorialSpace() {
         tutorialRootNode = node
         currentNode = node
         currentStatus = 'Playing Tutorial'
+        resumeModeActivated = false
     }
 
     function resumeTutorial(node) {
-
+        tutorialRootNode = node
+        currentNode = node
+        currentStatus = 'Playing Tutorial'
+        resumeModeActivated = true
+        advance()
     }
 
     function stop() {
@@ -252,11 +320,18 @@ function newTutorialSpace() {
     }
 
     function skip() {
-
+        let tutorial = {
+            status: 'Skipped'
+        }
+        saveTutorial(currentNode.payload, tutorial)
+        advance()
     }
 
     function done() {
-        /* If we are standing at the Tutorial Node, we do this. */
+        let tutorial = {
+            status: 'Done'
+        }
+        saveTutorial(currentNode.payload, tutorial)
         advance()
     }
 
@@ -264,34 +339,56 @@ function newTutorialSpace() {
         currentTopicNode = node
         currentNode = node
         currentStatus = 'Playing Topic'
+        resumeModeActivated = false
         findTutorialNode(node)
     }
 
     function resumeTutorialTopic(node) {
-
+        currentTopicNode = node
+        currentNode = node
+        currentStatus = 'Playing Topic'
+        resumeModeActivated = true
+        findTutorialNode(node)
     }
 
     function playTutorialStep(node) {
         currentStepNode = node
         currentNode = node
         currentStatus = 'Playing Step'
+        resumeModeActivated = false
         findTutorialNode(node)
     }
 
     function resumeTutorialStep(node) {
-
+        currentStepNode = node
+        currentNode = node
+        currentStatus = 'Playing Step'
+        resumeModeActivated = true
+        findTutorialNode(node)
     }
 
-    function tutorialTopicDone() {
+    function resetTutorialProgress(node) {
+        resetNextNode(node)
 
-    }
+        function resetNextNode(node) {
 
-    function tutorialStepDone() {
-
-    }
-
-    function resetTutorialProgress() {
+            for (let i = 0; i < node.tutorialSteps.length; i++) {
+                let tutorialStep = node.tutorialSteps[i]
+                let tutorial = {
+                    status: 'Reset'
+                }
+                saveTutorial(tutorialStep.payload, tutorial)
+            }
 
+            for (let i = 0; i < node.tutorialTopics.length; i++) {
+                let tutorialTopic = node.tutorialTopics[i]
+                let tutorial = {
+                    status: 'Reset'
+                }
+                saveTutorial(tutorialTopic.payload, tutorial)
+                resetNextNode(tutorialTopic)
+            }
+        }
     }
 
     function findTutorialNode(node) {
@@ -354,10 +451,23 @@ function newTutorialSpace() {
 
                 let tutorialStep = node.tutorialSteps[i]
                 if (found === true) {
-                    currentNode = tutorialStep
-                    currentStatus = 'Playing Step'
-                    advanced = true
-                    return
+                    if (resumeModeActivated !== true) {
+                        currentNode = tutorialStep
+                        currentStatus = 'Playing Step'
+                        advanced = true
+                        return
+                    } else {
+                        let tutorial = {
+                            status: undefined
+                        }
+                        loadTutorial(tutorialStep.payload, tutorial)
+                        if (tutorial.status !== 'Done') {
+                            currentNode = tutorialStep
+                            currentStatus = 'Playing Step'
+                            advanced = true
+                            return
+                        }
+                    }
                 }
                 if (tutorialStep.id === currentNode.id) {
                     found = true
@@ -372,10 +482,23 @@ function newTutorialSpace() {
 
                 let tutorialTopic = node.tutorialTopics[i]
                 if (found === true) {
-                    currentNode = tutorialTopic
-                    currentStatus = 'Playing Topic'
-                    advanced = true
-                    return
+                    if (resumeModeActivated !== true) {
+                        currentNode = tutorialTopic
+                        currentStatus = 'Playing Topic'
+                        advanced = true
+                        return
+                    } else {
+                        let tutorial = {
+                            status: undefined
+                        }
+                        loadTutorial(tutorialTopic.payload, tutorial)
+                        if (tutorial.status !== 'Done') {
+                            currentNode = tutorialTopic
+                            currentStatus = 'Playing Topic'
+                            advanced = true
+                            return
+                        }
+                    }
                 }
                 if (tutorialTopic.id === currentNode.id) {
                     found = true
@@ -395,14 +518,18 @@ function newTutorialSpace() {
         let nodeConfig = JSON.parse(currentNode.config)
         let html = ''
         if (nodeConfig.title !== undefined && nodeConfig.title !== '') {
-            html = html + '<div><h1 class="tutorial-saira-large">' + nodeConfig.title + '</h1></div>'
+            html = html + '<div><h1 class="tutorial-font-large">' + nodeConfig.title + '</h1></div>'
         }
         html = html + '<div>'
         if (nodeConfig.summary !== undefined && nodeConfig.summary !== '') {
-            html = html + '<div class="tutorial-summary">' + nodeConfig.summary + '</div>'
+            html = html + '<div class="tutorial-font-small tutorial-summary">' + nodeConfig.summary + '</div>'
         }
         if (nodeConfig.subTitle !== undefined && nodeConfig.subTitle !== '') {
-            html = html + '<h2 class="tutorial-saira-medium">' + nodeConfig.subTitle + '</h2>'
+            html = html + '<h2 class="tutorial-font-medium">' + nodeConfig.subTitle + '</h2>'
+        }
+        if (nodeConfig.gif !== undefined && nodeConfig.gif !== '') {
+            html = html + '<div id="tutorialGifDiv" width="400"/>'
+            newGifName = nodeConfig.gif
         }
         if (nodeConfig.definition !== undefined && nodeConfig.definition !== '') {
             html = html + '<table class="tutorial-definitionTable">'
@@ -414,51 +541,51 @@ function newTutorialSpace() {
             }
             html = html + '</td>'
             html = html + '<td>'
-            html = html + '<strong class="tutorial-saira-bold-small">' + nodeConfig.definition + '</strong>'
+            html = html + '<strong class="tutorial-font-bold-small">' + nodeConfig.definition + '</strong>'
             html = html + '</td>'
             html = html + '</tr>'
             html = html + '</table>'
         }
         if (nodeConfig.bulletListIntro !== undefined && nodeConfig.bulletListIntro !== '') {
-            html = html + '<p class="tutorial-saira-small">' + nodeConfig.bulletListIntro + '</p>'
+            html = html + '<p class="tutorial-font-small">' + nodeConfig.bulletListIntro + '</p>'
         }
         if (nodeConfig.bulletArray !== undefined) {
             html = html + '<ul>'
             for (let i = 0; i < nodeConfig.bulletArray.length; i++) {
                 let bullet = nodeConfig.bulletArray[i]
                 html = html + '<li>'
-                html = html + '<p class="tutorial-saira-small"><strong class="tutorial-saira-bold-small">' + bullet[0] + ':</strong> ' + bullet[1] + '</p>'
+                html = html + '<p class="tutorial-font-small"><strong class="tutorial-font-bold-small">' + bullet[0] + ':</strong> ' + bullet[1] + '</p>'
                 html = html + '</li>'
             }
             html = html + '</ul>'
         }
         if (nodeConfig.paragraph1 !== undefined && nodeConfig.paragraph1 !== '') {
-            html = html + '<p class="tutorial-saira-small">' + nodeConfig.paragraph1 + '</p>'
+            html = html + '<p class="tutorial-font-small">' + nodeConfig.paragraph1 + '</p>'
         }
         if (nodeConfig.callOut !== undefined && nodeConfig.callOut !== '') {
-            html = html + '<div class="tutorial-saira-bold-small tutorial-callout" > ' + nodeConfig.callOut + ''
+            html = html + '<div class="tutorial-font-bold-small tutorial-callout" > ' + nodeConfig.callOut + ''
             if (nodeConfig.externalLink !== undefined) {
                 html = html + '<a href="' + nodeConfig.externalLink[1] + '" target="_blank">' + nodeConfig.externalLink[0] + '</a>'
             }
             html = html + '</div>'
         }
         if (nodeConfig.paragraph2 !== undefined && nodeConfig.paragraph2 !== '') {
-            html = html + '<p class="tutorial-saira-small">' + nodeConfig.paragraph2 + '</p>'
+            html = html + '<p class="tutorial-font-small">' + nodeConfig.paragraph2 + '</p>'
         }
         if (nodeConfig.paragraph2 !== undefined && nodeConfig.paragraph2 !== '') {
-            html = html + '<p class="tutorial-saira-small">' + nodeConfig.paragraph2 + '</p>'
+            html = html + '<p class="tutorial-font-small">' + nodeConfig.paragraph2 + '</p>'
         }
         if (nodeConfig.note !== undefined && nodeConfig.note !== '') {
-            html = html + '<div class="tutorial-saira-bold-small tutorial-alert-info" role="alert"><i class="tutorial-fa tutorial-info-circle"></i> <b>Note:</b> ' + nodeConfig.note + '</div>'
+            html = html + '<div class="tutorial-font-bold-small tutorial-alert-info" role="alert"><i class="tutorial-fa tutorial-info-circle"></i> <b>Note:</b> ' + nodeConfig.note + '</div>'
         }
         if (nodeConfig.tip !== undefined && nodeConfig.tip !== '') {
-            html = html + '<div class="tutorial-saira-bold-small tutorial-alert-success" role="alert"><i class="tutorial-fa tutorial-check-square-o"></i> <b>Tip:</b> ' + nodeConfig.tip + '</div>'
+            html = html + '<div class="tutorial-font-bold-small tutorial-alert-success" role="alert"><i class="tutorial-fa tutorial-check-square-o"></i> <b>Tip:</b> ' + nodeConfig.tip + '</div>'
         }
         if (nodeConfig.important !== undefined && nodeConfig.important !== '') {
-            html = html + '<div class="tutorial-saira-bold-small tutorial-alert-warning" role="alert"><i class="tutorial-fa tutorial-warning"></i> <b>Important:</b> ' + nodeConfig.important + '</div>'
+            html = html + '<div class="tutorial-font-bold-small tutorial-alert-warning" role="alert"><i class="tutorial-fa tutorial-warning"></i> <b>Important:</b> ' + nodeConfig.important + '</div>'
         }
         if (nodeConfig.warning !== undefined && nodeConfig.warning !== '') {
-            html = html + '<div class="tutorial-saira-bold-small tutorial-alert-warning" role="alert"><i class="tutorial-fa tutorial-warning"></i> <b>Important:</b> ' + nodeConfig.warning + '</div>'
+            html = html + '<div class="tutorial-font-bold-small tutorial-alert-warning" role="alert"><i class="tutorial-fa tutorial-warning"></i> <b>Important:</b> ' + nodeConfig.warning + '</div>'
         }
         html = html + '</div>'
 

CanvasApp/Utilities/LoadSaveTutorial.js

@@ -0,0 +1,18 @@
+function saveTutorial(payload, tutorial) {
+    payload.tutorial = {
+        status: tutorial.status
+    }
+}
+
+function loadTutorial(payload, tutorial) {
+    if (payload.tutorial !== undefined) {
+        tutorial.status = payload.tutorial.status
+        return
+    }
+    if (payload.node.savedPayload !== undefined) {
+        if (payload.node.savedPayload.tutorial !== undefined) {
+            tutorial.status = payload.node.savedPayload.tutorial.status
+            payload.node.savedPayload.tutorial = undefined
+        }
+    }
+}