Completion Component

The Completion component is the “you’re done” panel of a lab. While the user still has work left, it shows how much of the lab remains. Once every activity is complete, it turns into a closing message with a button that ends the lab session.

Every lab should have one. A lab does not show a finish button on its own, so a lab without a Completion component leaves users with no clear way to wrap up – they would have to close the tab or wait for the session to time out. Placing a Completion component on your final page gives users a clean ending and stops the lab session (and its sandbox) the moment they are done.

Adding a Completion component

The Completion component is available in the Instructions editor.

1. Place your cursor on an empty line and type / to open the insert menu, then choose Completion under Blocks.
2. Alternatively, click + Insert in the toolbar and choose Completion under Blocks.

The block appears as a live preview of the finished card – a checkmark, the heading, the message, and the finish button – with a settings panel underneath. A new block comes pre-filled with the heading “Hooray!”, the message “You finished the lab. Hit the button when you’re ready.”, and the button label “Finish & Exit” – edit any of them and the preview updates as you type. Click the block at any time to reopen its settings, and confirm your edits with Add changes as you would for any other content change.

Note that the editor always previews the completed state of the card. Users only see this version once they have finished everything – until then, the card shows their progress instead (see below).

Configuration

Field	Description	Default
Heading	The title shown once the user has completed everything	Hooray!
Text	An optional message under the heading – a good place for next steps, links, or a thank-you	You finished the lab. Hit the button when you’re ready.
Finish button label	The wording on the button that ends the lab	Finish & Exit

Clearing the Heading or Finish button label falls back to the default; clearing the Text hides the message line entirely. The heading and button label only appear once the lab is complete – before that, the component shows progress instead.

What users see

The component has two states, depending on the user’s progress across the whole lab – not just the current page.

While work remains, the card reads “Complete every task to finish” together with a progress counter, for example 3 / 5, and a lock icon. The counter covers every activity in the lab, so a user on the last page with an unfinished task back in chapter one is still locked. Clicking the counter opens the progress outline, showing exactly which activities are still open. If you set a Text message, it is shown here too.

Once everything is complete, the card switches to your heading, your message, and the finish button. Clicking the button ends the lab session, shuts down the sandbox, and takes the user to the exit page for however they entered the lab.

Whether users ever see the locked state depends on how your lab is structured. If your pages gate progression on completing their tasks, users arrive at the final page with everything already done and see the finished card straight away. The locked state appears when a user can reach the component with activities still open – for example in a lab without gating, when an activity sits on the final page itself, or when you place a Completion component mid-lab as a progress indicator.

Because the locked state doubles as a progress indicator, you can also place a Completion component earlier in the lab to show users how far along they are. Most labs only need one, on the final page.

Using the code workflow

In markdown, the component is stored as a tag:

<instruqt-completion heading="Nice work!" text="You finished the lab." finish-button-label="Finish & Exit"></instruqt-completion>

All three attributes are optional. An attribute that is missing falls back to its default, so the shortest valid form is:

<instruqt-completion></instruqt-completion>

Best practices

1. Always end your lab with one. It is the only finish button users get, and finishing immediately stops the sandbox, which avoids unnecessary running time.
2. Use the Text field to point users somewhere. A link to the next lab, related docs, or a call to action turns the ending into a handoff instead of a dead end.
3. Keep one Completion component per lab as a rule of thumb. The editor does not stop you from adding more, and each renders independently – but multiple finish panels are confusing. If you want to show progress mid-lab, that is the one good reason to add a second.
4. Pair it with a Feedback component. The final page is a natural place to ask users how the lab went before they leave.