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.

Links

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:

Variant	Result
[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.

Scroll to section

If you want to guide your users to a specific section of the assignment, you can use either a section link or a button:

If you want to know more, you can use this [link](section-example-section) or this [button label="button" variant="success"](section-example-section) to scroll to the relevant section.

When you're done, you can return to the top by using this [button label="back button" background="#6c5ce7"](section-introduction).

By using the section-{section-id} syntax as the target for a link or button, the page will automatically scroll to the specified section and expand it.

How the section ID is generated:

• The link prefix always starts with section-.

• The section title is converted to lowercase.

• Special characters, symbols, and punctuation (except dashes) are removed.

• Spaces are replaced with dashes.

For example, if the section is titled "Example section", the corresponding link will be section-example-section

This format is similar to how GitHub handles links to headers.

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 type	Result
> [!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.

Code Blocks

You can create code blocks by using triple backticks ``` before and after the code block.

git commit -m 'Update the cloud account password'

By adding the language identifier, you can enable syntax highlighting.

```bash
git checkout master
```

By default there is a button on the top-right corner to copy the content of the code block. You can use nocopy to hide it.

```bash,nocopy
mkdir instruqt
```

If you want to show the line numbers beside the codes, you can do it by using line-numbers option after the language identifer.

```bash,line-numbers
mkdir instruqt
cd instruqt
ls
```

You also can give your users the power to run the code in the active terminal by using run option after the language identifier.

```bash,run
mkdir instruqt
```

If your code exceeds the width of the code block and you want it to wrap to the next line instead of scrolling horizontally, you can use the wrap option after the language identifier.

```bash,wrap
echo "This is a very long line of code that will now wrap to the next line instead of scrolling horizontally."
```

You have access to all these options from the code block button in the assignemnt editor.