Visual Instructions Editor
- 04 Nov 2024
- 11 Minutes to read
- Print
Visual Instructions Editor
- Updated on 04 Nov 2024
- 11 Minutes to read
- Print
Article summary
Did you find this summary helpful?
Thank you for your feedback
Lab Instructions are written for hands-on labs, for learners to follow while working in the lab environment. This document will discuss the features available in the Instructions Editor and explain how to use them. The Skillable Studio Visual Instructions Editor is a versatile and powerful Markdown editor. It supports both Markdown (Code) mode and Visual mode, making it easy to switch between writing in plain text and a more visual format.
Editor Key Features
Visual Mode: You can write documents in Visual mode with ease using common editing tools. There is no need to know Markdown, to create great lab content.
Markdown Code and Visual Modes: You can write in Markdown and see a live preview of the formatted text.
Syntax Highlighting: Helps you easily read and write code.
Scroll-Sync: Keeps your editor and preview in sync as you scroll.
Spell Checker: Visual mode has a spell check option that can be enabled from the editor settings menu.
Drag and drop: You can simply drag and drop tokens, variables, and Activities right into the Editor.
Clickable content objects in Visual Mode: You can double click action objects to edit action objects in a modal dialog without needing to learn any complex markdown. Let the dialog write the markdown for you.
The Visual Editor is a great tool for anyone who needs a robust editor for writing lab instructions.
Switch to the Visual Instructions Editor
To access the Visual Editor, select the "Visual Editor" button located at the top of the existing Markdown instructions editor.
Edit an Instruction Set.
Select the "Try the new Instructions Editor Preview!" button at the top of the editor to switch to the Visual Instructions Editor.
After selecting the button, you will be using the Visual Instructions Editor.
Switch Back to the Legacy Editor
In the Visual Editor there is a "New Editor" toggle in the top toolbar. Disabling this toggle will switch to the legacy editor.
Features of the Visual Instructions Editor
.png?sv=2022-11-02&spr=https&st=2024-11-15T18%3A53%3A15Z&se=2024-11-15T19%3A03%3A15Z&sr=c&sp=r&sig=Dth04Fko6FYU69prV9qY%2FAG5Xc7S2RSD%2BoQIwwOsTAM%3D)
Ribbon Bar: This contains general formatting, layout, paragraph formatting, and power tools.
Left Action Panel: This panel is used to effortlessly work with all of the Skillable specialized features such as Lab Tokens, Lab Activities, Replacement Tokens, and Swap Text.
Top Menu Bar: This controls the editor tab, activities tab, access to help, the settings menu, Managing Instruction Sets menu, and the toggle for the New Editor.
Bottom Bar: This shows the current editor mode, editor toggle, and the autosave toggle.
Learner Preview: The learner preview (if enabled in the Editor Settings), will show the live preview of the instructions as it would show for a learner.
Ribbon Bar Features
General Formatting
.png?sv=2022-11-02&spr=https&st=2024-11-15T18%3A53%3A15Z&se=2024-11-15T19%3A03%3A15Z&sr=c&sp=r&sig=Dth04Fko6FYU69prV9qY%2FAG5Xc7S2RSD%2BoQIwwOsTAM%3D)
Button | Item | Description | Key Combo |
|---|---|---|---|
| Bold | Adds bold emphasis to selected text. Use this to emphasize important words or phrases. | Ctrl+B |
| Italic | Adds italic emphasis selected text. This is often used for emphasis or to denote titles of works. | Ctrl+I |
| Strike | Adds a strikethrough to selected text. This can be useful for showing deletions or changes. | Ctrl+Shift+X |
| Heading | Changes the selected text to a heading. Headings are used to organize content into sections. | |
| Blocks | Formats the selected text as a block element, such as a blockquote or Skillable special formatting. Special formatting is predefined when you select (Alert, Note, Help, Hint, and Knowledge blocks). | |
| Links | Adds a hyperlink to the selected text. This is useful for linking to external resources or other parts of the document. | Ctrl+K |
| Code | Formats the selected text as code. | Code Sample: |
Layout and Paragraph
.png?sv=2022-11-02&spr=https&st=2024-11-15T18%3A53%3A15Z&se=2024-11-15T19%3A03%3A15Z&sr=c&sp=r&sig=Dth04Fko6FYU69prV9qY%2FAG5Xc7S2RSD%2BoQIwwOsTAM%3D)
Button | Item | Description | Key Combo |
|---|---|---|---|
| Bulleted List | Formats the selected text with a bullet list style. Each line in a multi-line selection will have a bullet. | Ctrl+U |
| Numbered List | Formats the selected text with a numbered list style. Each line in a multi-line selection will be numbered starting from 1. | Ctrl+O |
| Task List | Formats the selected text with an unordered task list style. Each line in a multi-line selection will have a task checkbox. | |
| Decrease Indent | Outdents the selected sub-elements one level within the context of a Bulleted List, Numbered List, or Task List. Multiple clicks allow only one level outdent from its parent. | Shift+Tab |
| Increase Indent | Indents the selected sub-elements one level within the context of a Bulleted List, Numbered List, or Task List. Multiple clicks allow only one level indent from its parent. | Tab |
| Insert | Inserts page-level objects like Page Break and Horizontal Rule at the current cursor position. | Horizontal Rule: Ctrl+L |
| Table | Opens the table menu for inserting tables. |
Powertools
.png?sv=2022-11-02&spr=https&st=2024-11-15T18%3A53%3A15Z&se=2024-11-15T19%3A03%3A15Z&sr=c&sp=r&sig=Dth04Fko6FYU69prV9qY%2FAG5Xc7S2RSD%2BoQIwwOsTAM%3D)
Button | Item | Description |
|---|---|---|
| AI | AI Menu: Provides a chat prompt with options to teach, show steps, quiz, or find resources on a topic, using AI. |
| Type Text | Inserts Type Text tokens at the cursor’s current position, streamlining the content creation process. There are three variations: |
| Input Field | Allows inserting various input field types as tokens within the Visual Instructions Editor. |
| Author Comment | Inserts a comment section. Whether text is selected or not, the modal popup provides an intuitive interface for adding comments, preserving existing content. |
| Include Instructions | Providing a more versatile approach to incorporating external instructions into your lab content. This will allow for external instructions to be included or referenced instructions that are defined in the current instruction set. |
| Upload Media | Easily insert images, videos, and audio without pasting them into the editor. The dialog box supports drag-and-drop for multiple files and offers options to display files inline or as links, and to overwrite existing files. |
Additional AI Information
AI Menu: Provides a chat prompt to the user with instructions. Commonly used to wrap text with syntax that serves as a topic. The text of the link will be the topic (e.g., Azure Storage Accounts). Selecting the link displays a menu with four options:
Teach me: Generates a text response designed to teach the learner about the provided topic.
Show me: Generates a list of steps on how to perform the topic. Useful if the topic text starts with a verb, such as "Create an Azure Storage Account."
Quiz me: Generates multiple choice questions on the topic. Attempts to process responses interactively, providing "Correct" or "Sorry, try again." feedback based on the answer.
Find Resources: Generates a list of links to web resources about the topic.
AI Chat
AI Chat: Provides a chat-style interface to the user based on the provided topic.
AI Generated Content
Overview: Expands on AI features with four new tags that leverage AI to respond to a given topic and format the output according to the specified format:
ai-teach
ai-show
ai-quiz
ai-resources
AI Content Tags: These new tags (ai-teach, ai-show, ai-quiz, ai-resources) are designed to generate specific types of content directly, without needing an intermediary selection menu. They allow content creators to specify the type of AI-generated content required at any point in their documents, simplifying the creation process.
Left Actions Panel
Button | Item | Description |
|---|---|---|
| Tokens | Tokens are dynamic text placeholders that enhance your lab's interactivity and personalization. |
| Activities | Activities provide ways for interaction with lab instructions and environments when used for scoring. |
| Variables | Variables empower you to personalize and fine-tune your lab like never before. |
| Text Swap | Text Swap empowers you to seamlessly change what users see in your lab without altering the actual content. |
Functions within Left Actions Panel
Item | Description |
|---|---|
Text Search | Allows users to easily start typing and search text within the token name or description and present the corresponding token cards. |
Filter | This operates as a quick filter to quickly filter based on available groups. |
Search Results | Displays a results message to the user to indicate how many cards are filtered of the total available. |
Drag Icon | Allows a user to drag and drop the token card into the editor. |
Hovering over Card | Hovering over the token card will highlight in the instructions where the token is inserted. |
Top Menu Bar
.png?sv=2022-11-02&spr=https&st=2024-11-15T18%3A53%3A15Z&se=2024-11-15T19%3A03%3A15Z&sr=c&sp=r&sig=Dth04Fko6FYU69prV9qY%2FAG5Xc7S2RSD%2BoQIwwOsTAM%3D)
Button | Item | Description |
|---|---|---|
| Editor | Displays the Editor screen. |
| Activities | Displays the Activities Manager screen. |
| Help | Allows users to easily navigate to the Help documentation. |
| Settings | Allows users to set Editor Settings and Lab Options. Editor Mode context is now supported (Code Editor specific settings only visible when in Code Editor). |
| Instruction Sets | Allows user to easily switch between different Instruction Sets while staying in the Editor. There is also an option to Manage Instruction Sets. |
| Use Legacy Editor | Sets the Users preference for the Editor of choice. Selecting the button Use Legacy Editor will switch the default editor back to the legacy editor. NOTE: This will stay active until the user changes the Editor. |
| Close | Closes the Instructions editor. |
.png?sv=2022-11-02&spr=https&st=2024-11-15T18%3A53%3A15Z&se=2024-11-15T19%3A03%3A15Z&sr=c&sp=r&sig=Dth04Fko6FYU69prV9qY%2FAG5Xc7S2RSD%2BoQIwwOsTAM%3D)
Bottom Bar
Button | Item | Description |
|---|---|---|
| Editor | Allows users to easily switch between Visual mode and Code editor mode. |
| Autosave | Default = ON when editing and will auto save the changes. Once toggled to OFF, it will allow the user to select the Save Changes button. |
| Save Changes | Default = OFF when editing. Once Autosave is toggled to OFF, it will allow the user to select the Save Changes button to save any changes to the instructions. |
Learner Preview
The Learner Preview, if enabled, will display a pane to the right of the Editor representing the instructions as viewed within the Lab Client. This is what a typical user will see when they launch a lab. By providing a live preview, it speeds up the content creation process.
To enable or disable Learner Preview:
Select the Gear icon at the top of the editor, to enter the settings menu.
Select the toggle to enable or disable Learner Preview.
Frequently Asked Questions
What happens when I add in some markdown tha the Visual Editor can not render?
Some times there are certain markdown patterns that the user can add into the Code mode that the Visual mode cannot display properly and there will be a popup displayed to the user that the Visual Mode is currently disapbled which this pattern is still in the code mode. No worries, you will be directed back to the Code mode directly and the Visual Mode will be disabled so you do not have any issues with editing. You will always have an editor that will allow you to work effectively.
Can I Change My Default Editor?
If your lab has some advanced or unique patterns that the Visual Editor cannot render properly, you can change the Default editor mode.
You may also prefer to write your lab instructions in Markdown, at which your preference is to have the Code Editor as the first editor to use when editing instructions. In the settings menu, select the toggle for “Set Code Editor as Default”.
Enabling this setting will set the Code Editor as your default editor. To reset to the visual editor, use this toggle to change the default.
What are Tokens?
Tokens, also known as Replacement Tokens, are dynamic text placeholders that enhance your lab's interactivity and personalization. By inserting structured text (of the format @lab.TokenName) into instructions or scripts, it will dynamically be replaced in each lab launch with personalized text or interactive components like user-specific names, unique identifiers, questions, or dropdown menus. Tokens empower you to create engaging, personalized, and ever-changing lab experiences, fostering interaction and customization for a more immersive skills journey. For more information about Replacement Tokens, read our Replacement Tokens documentation.
What are Activities?
Activities provide ways for users to interact with lab content. Activities also allow authors to assess how well a user is doing in their lab. Activities can consist of interactive questions, automated scripts, or even groups of multiple activities.
You can reference activities in your instructions by using the activity's Alias. For example, if you have a question with the alias "q1", you can reference it in your instructions like this: @lab.Activity(q1). When a learner reaches this point in the instructions, they will see the question you created. For more information about Activities, read our Activities documentation.
What are Variables?
Variables empower you to personalize and fine-tune your lab like never before. Think of them as dynamic settings that you control, allowing you to tailor each launch to your exact needs. While some variables could be as simple as 'Personalized: Yes/No,' others might be complex like SSH keys or completely unique identifiers. This customization injects dynamism into your lab, making every instance distinctive and precisely suited to your requirements. For more information about Variables, read our Variables documentation.
What is Text Swap?
Text Swap empowers you to seamlessly change what users see in your lab without altering the actual content. Just like using find/replace in documents, Text Swap allows you to transform visible text elements while keeping the original text unchanged. For instance, you can transform 'Sign in to the environment' to 'Login' for users, while preserving the original wording for backend operations. Whether you need case-sensitive changes, case-insensitive adjustments, or even more intricate transformations using regular expressions (Regex), Text Swap provides a user-friendly solution to enhance the user experience.
Was this article helpful?