Lab Instructions are written for hands-on labs, for learners to follow while working in the lab environment. This article describes the features available in the Instructions Editor and how to use them. The Skillable Studio Instructions Editor is a powerful Markdown editor for anyone writing lab instructions, offering robust content and formatting options. You don’t need to know Markdown to use the editor—thanks to our simple ribbon bar and left-pane navigation, you can apply formatting like bold text or headings with just a click.
Editor Key Features
Markdown Code: Format instructions in Markdown and see a live preview of the formatted text with the Learner Preview pane.
Syntax Highlighting: Easily read and write code.
Scroll-Sync: Keep your editor and preview in sync as you scroll.
Drag and drop: Simply drag and drop tokens, variables, and Activities right into the Editor.
Instructions Editor Features
Ribbon Bar: Apply general formatting, layout, paragraph formatting, and power tools.
Left Action Panel: Effortlessly work with all of Skillable’s specialized features, including Lab Tokens, Lab Activities, Replacement Tokens, and Swap Text.
Top Menu Bar: Use the Editor tab, Activities tab, Help tab, Settings menu, and the Instructions Set dropdown menu.
Bottom Bar: Control the Autosave toggle or save your changes manually.
Learner Preview: Update the lab’s theme and see a live preview of the instructions as they would show for a learner.
Ribbon Bar Features
General Formatting
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
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. Task lists can be created by first creating an ordered (numbered) list, then highlighting the list and then selecting the Task list button from the ribbon bar. | ||
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, Section, and Horizontal Rule at the current cursor position. | Horizontal Rule: Ctrl+L | |
Table | Opens the table menu for inserting tables. |
Power Tools
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. To learn more about these AI features, check out this documentation page. | |
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 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 | Provides 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. |
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 enable 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
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). For more information, see the section for Editor Settings. | |
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. | |
Close | Closes the Instructions editor. |
Bottom Bar
Button | Item | Description |
---|---|---|
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. |
Editor Settings
Setting | Description |
---|---|
Learner Preview | When this is enabled, a preview of the lab instructions is displayed next to the code view and updated in real time as changes are made to the lab instructions. |
Sync Learner Preview Location | When this is enabled, the position of the code view and position of the preview view of the lab instructions will be synced while scrolling in the lab instructions editor. |
Code Editor Word Wrap | When this is enabled, this allows text to wrap to the next line when the text reaches the end of a line in the editor pane. |
Code Editor Zoom | Adjusts the zoom level while viewing the editor. |
Lab Options
Setting | Description |
---|---|
Track Task Progress | When this is enabled, a progress bar will be shown at the bottom of the lab instruction window with the total number of tasks the lab user has to complete. When they check a task, the progress bar will reflect their progress. |
Require tasks to be completed in order | When this is enabled, this requires lab users to complete tasks in the order that they appear in the lab instructions. |
Auto-Check Previous Tasks | This option is only available when “Require tasks to be completed in order” is enabled. When this is enabled, this allows a lab user to select a task in the lab instructions and all previous tasks will be automatically checked as completed. |
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. Providing a live preview speeds up the content creation process.
To enable or disable Learner Preview:
Along the top of the editor, select the Gear icon to open the settings menu.
Toggle Learner Preview on or off and then click anywhere on the screen to close out of the settings menu.
Frequently Asked Questions
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.