Assignment editor

Modify the instructions presented to the learner

Overview

Our assignment markdown editor allows you to see real-time changes as you edit, making it easier to format your text the way you want it. It supports GitHub Flavoured Markdown for text formatting.

Editing assignments locally using the Instruqt CLI uses all of the same Markdown formatting described below. Check out this GitHub guide for additional details.

Basic components

First, let's review the basic actions:

  • Bold: Makes the selected text bold.

  • Italic: Italicizes the selected text.

  • Strikethrough: Strikes through the selected text.

  • H1, H2, H3: To create headings with the relative size.

  • Code block: To insert code snippets into your text.

  • Bullet List: Insert a bulleted list.

  • Number List: Insert a numbered list.

  • Image: To upload an image to your track and insert it into the text.

  • Table: To insert a basic 3-column table into your text.

  • Help: If you need a complete guide on markdown syntax, the help button is a shortcut to this good source.

The "Links" dropdown in our WYSIWYG Markdown Editor offers several unique buttons to enhance your user experience. Each button serves a distinct purpose, and this guide will help you understand their functionality and uses.

  • Text link: To create a simple markdown link

  • Button: To show the link as a button

  • Switch tab text link: To guide users to your target tab with a text link

  • Switch tab button: To guide users to your target tab with a button link

Buttons

You can choose between different colors or create your unique buttons by setting your brand colors:

[button label="Read more"](https://)

To customize the button, you can choose from of the variants:

VariantResult
[button label="Default button"](https://)
[button label="Delete" variant="danger"](https://)
[button label="Report" variant="warning"](https://)
[button label="Done" variant="success"](https://)
[button label="More" variant="outline"](https://)

You also can set your custom colors for background and text color:

[button label="Blue button" background="blue" color="white"](https://)

[button label="Custom colors" background="#ffc814" color="#000000"](https://)
[button label="Custom colors" background="#c2fbd7" color="green"](https://)

[button label="Custom colors" background="#6c5ce7"](https://)
[button label="Another button" background="#7d13ba"](https://)

If you need a full-width button, there is a block option available:

[button label="Sign in" block](https://)
[button label="Sign in" block variant="danger"](https://)
[button label="Sign in" block background="#6c5ce7" color="#fff"](https://)

Switch tab

If you want to guide your users to the correct tab, you can use either a switch tab link or a button:

If you want to know more, you can use this [link](tab-1) or this [button label="button" variant="success"](tab-1) to switch to our documentation tab.

When you're done, you can get back to the terminal using this [button label="back button" background="#6c5ce7" ](tab-0)

By using the tab-{index} syntax as the link target, the link or the button will have an action to change the current tab in the lab. The index starts from zero.

Alerts

The "⚠️ Alerts" dropdown in our Markdown Editor offers a convenient way to emphasize specific information within your text by creating annotations. You can utilize the Note, Important, and Warning options to annotate text related to your assignment.

Alert typeResult
> [!NOTE]
> Do the following...
> [!IMPORTANT]
> Do the following...
> [!WARNING]
> Do the following...
> [!NOTE]
> When using Terraform with Google Cloud, it's recommended to use service accounts for authentication rather than user tokens to improve security and manageability.

> [!IMPORTANT]
> Before running Terraform Apply, always run the Terraform plan to review the changes that will be made to your Google Cloud infrastructure. Failing to do this could result in unexpected changes and potential downtime.

> [!WARNING]
> Be cautious when enabling public IP addresses for VM instances in Google Cloud. This exposes your instances to the internet and may lead to unauthorized access if not properly secured.

Sections

If you need to split your content into different sections, you can use the Add section button to create an expandable section inside the assignment text. The syntax of each section would be like this:

Step 1
======

Click "Explorer" > "NPM Scripts" to open the corresponding panel.
Run the "test" task from it.

The tests should run, and you should see the failing one in the terminal panel.

Step 2
======

Update the function in src/sum.ts to correctly return the sum.
At this point, you might want to re-run the tests to see whether the fix is helping.

Check
=====

To complete this track, press **Check**. It will run the tests and pass if all the tests are passing.

Previews

The toolbar in our Markdown Editor includes a set of advanced viewing options designed to enhance your editing experience. In this guide, we will focus on three special buttons: Toggle Fullscreen, Toggle Side-by-Side, and Toggle Preview.

  • The Toggle Fullscreen button allows you to expand the editor to take up the entire browser window, minimizing distractions and providing more space to work.

  • The Toggle Side-by-Side button enables a dual-pane view where you can see both the Markdown code and its live preview simultaneously.

  • The Toggle Preview button lets you switch between the Markdown editor and a preview pane that shows how your text will appear after formatting.

Last updated