Assets
This reference describes assets and how you apply them.

What are assets?

Assets are images or video files referenced in assignment files or notes. For example, you might add a screenshot of your software to show a learner where to click. Or you might show a video before your learner starts a challenge.
Assets can only be managed from Instruqt CLI.

How to apply assets

Place all your assets in a directory called assets located in the track root directory like in the following example:
1
.
2
├── 01-title
3
│ └── assignment.md
4
├── assets
5
│ ├── image.png
6
│ └── video.mp4
7
├── config.yml
8
└── track.yml
Copied!
↳ Here the assets directory contains a png image file and an mp4 video file.

Refer to assets

Refer to assets by using the relative paths. For example, refer to ../assets/img.png if you want to use the img.png file within the assignment.md file. The ../ part of the path tells to go up one directory and from there the assets/ part tells to go to the assets subdirectory.
You can also create nested folders inside the assets directory to keep them organized.
Windows backslash as directory separator
When working from a Windows machine, use the backslash as the directory separator in your relative path— for example, ..\assets\img.png. Otherwise, you will get an error stating that your asset does not exist when pushing your track to the Instruqt platform.

Local and remote assets

Push

Your assets are also pushed when you push a track to the Instruqt platform. And the relative paths to images and videos are converted to fully qualified URLs. So they can be viewed in the sandbox by your learners.
For example, if your local track has this code in an assignment.md file:
1
![My Image](../assets/image.png)
Copied!
The instruqt track push command automatically converts this to:
1
![My Image](https://play.instruqt.com/assets/tracks/[TRACK_ID]/[ASSET_HASH]/assets/image.png
Copied!

Pull

When you pull a track to your machine, the fully qualified URLs are converted into relative paths to images and videos so you can preview your files locally.
Work with assets from your code editor
You can install a Markdown plugin in your code editor to make it easy to insert videos and images. The Markdown All in One plugin works well with VS Code. Point the completion.root setting to your assets directory and VS Code will show a handy autocomplete menu when you start to insert image code in your markdown.

Access

Only learners who are currently playing a track can view track assets. Furthermore, assets can not be shared across multiple tracks.

Examples

Embed an image into the assignment text

This example embeds an image in the assignment.md sidebar text. This is useful for showing a screenshot or other image to your learner as part of the challenge instructions:
YAML/Markdown
1
---
2
slug: my-challenge
3
id: un6vygpcp3mj
4
type: challenge
5
title: My Challenge
6
tabs:
7
- title: Google tab
8
type: website
9
url: https://google.com
10
difficulty: basic
11
timelimit: 600
12
---
13
Hello there, assets!
14
15
![Image Description](../assets/image.png)
Copied!

Embed a video in a challenge note

This example embeds a video in a challenge note. Notice the relative path format on line 12 of the assignment.md file:
YAML/Markdown
1
---
2
slug: title
3
id: un6vygpcp3mj
4
type: challenge
5
title: Title
6
tabs:
7
- title: Challenge title
8
type: website
9
url: https://google.com
10
notes:
11
- type: video
12
url: ../assets/video.mp4
13
difficulty: basic
14
timelimit: 600
15
---
16
17
See the video URL on line 12 of this file.
Copied!

Embed an image in the track description

This example embeds an image in the track description. Notice how there is only a single dot before the slash ./ which means the assets directory is in the current directory:
YAML/Markdown
1
slug: my-new-track
2
id: 7gespmlsjdzq
3
type: track
4
title: Track Title Here
5
teaser: This is the best track ever!
6
description: |-
7
Want to put an image in your track description? It's easy:
8
![Image Description](./assets/image.png)
Copied!