Instruction Components

Check out the components that you can use inside the markdown of instructions

Link

Simple link to a URL:

<instruqt-link to="…">
  Link
</instruqt-link>

Attribute	Type	Description
to	string required	URL to link to
color	string optional	Custom text color

Button

Choose between different variants or customize it with your own colors:

<instruqt-button to="…">
  Button
</instruqt-button>

Attribute	Type	Description
to	string required	URL to link to
variant	enum optional	Pick a style: white, danger, warning, success or outline
background	string optional	Custom background color
color	string optional	Custom text color

Switch tab: link

Place a link that takes the user to a specific tab inside the lab:

<instruqt-switch-tab-link id="…">
  Go to tab
</instruqt-switch-tab-link>

Attribute	Type	Description
id	string required	Resource id of the target tab
color	string optional	Custom text color

Switch tab: button

Place a button that takes the user to a specific tab inside the lab:

<instruqt-switch-tab-button id="…">
  Go to tab
</instruqt-switch-tab-button>

Attribute	Type	Description
id	string required	Resource id of the target tab
variant	enum optional	Pick a style: white, danger, warning, success or outline
background	string optional	Custom background color
color	string optional	Custom text color

Code block

Show a code snippet to the user:

<instruqt-code language="shell">
  curl parrot.live
</instruqt-code>

Attribute	Type	Description
language	string optional	Which syntax highlight to use
line-numbers	boolean optional	Show each line number
line-numbers-start	number optional	What number to start counting from
no-copy	boolean optional	Hide the copy button
run	boolean optional	Offer to run the code in a terminal
title	string optional	Used only by the code group component

Code group

Group code snippets together:

<instruqt-code-group>
  <instruqt-code language="shell" title="parrot.sh">
    curl parrot.live
  </instruqt-code>
  <instruqt-code language="sql" title="query.sql">
    SELECT * FROM table
  </instruqt-code>
</instruqt-code-group>

Completion

Show how the user is progressing on their tasks, with a call to action when they are all complete:

<instruqt-completion
  heading="Congratualtions!"
  finish-button-label="Take me home"
></instruqt-completion>

Attribute	Type	Description
heading	string optional	Greetings message
finish-button-label	string optional	Call to action button text

While in progress

When complete

Feedback

Ask the user to rate the track with an optional message:

<instruqt-feedback></instruqt-feedback>

First step: rate the track

Second step: leave a message

PDF

Show the user an embedded PDF:

<instruqt-pdf url="…"></instruqt-pdf>

Attribute	Type	Description
url	string required	URL to the file

Quiz

Interactively ask questions to the user:

<instruqt-quiz id="…"></instruqt-quiz>

Attribute	Type	Description
id	string required	Resource id of the quiz

Slides

Embed a presentation from Google Slides:

<instruqt-slides id="…"></instruqt-slides>

Attribute	Type	Description
id	string required	Google Slides id

Task

Show the user a breakdown of task conditions:

<instruqt-task id="…"></instruqt-task>

Attribute	Type	Description
id	string required	Resource id of the task

Video

Embed a video from Vimeo or YouTube:

<instruqt-video id="…"></instruqt-video>

Attribute	Type	Description
id	string required	The id of the video
source	enum optional	Either vimeo or youtube, defaults to youtube