Challenge tabs

Configure different tab types in challenges.

Overview

Tabs are how learners interact with your product and a track's sandbox. You can have the following tab types:

• Web based applications

• Your applications

• Code editor

• Terminal

• Virtual Browser

Web based applications

Web based applications are the simplest tab type - all they do is point to a website.

If your website is not displaying, it is likely blocking iframes. Use a site like https://iframetester.com to check compatibility. Try turning on the optional setting to open the link in a new tab, or use the Virtual browser.

Tabs that open in external browser tabs (when using the new_window option) are not considered by the idle timer.

🌐 Web UI

Field	Description	Type	Required
Tab name	This property sets the tab title. And each service has its own tab.	string	Required
Website link	The URL of the website opened in this browser. Must be a https:// address. Self-signed SSL certificates are OK. If you use ${_SANDBOX_ID} in a URL, it will be replaced with the sandbox ID.	string	Required
Open website in a new window	Whether to open the tab in a new window. Useful for when the service doesn't allow being run in an iframe.	boolean	Optional

💻 Instruqt CLI

tabs:
- title: <tab_title>
  type: website
  url: <website_url>
  new_window: <true/false> 

Your applications

Your applications are tabs that point to web services running inside a sandbox.

For example, if you select a host but don't specify a path, the application will display the service hosted at https://[HOSTNAME]-[PORT]-[PARTICIPANT_ID].env.play.instruqt.comwith the specified port number. You can think of this as https://localhost:port, but the concept of localhost doesn't exist within the Instruqt platform. For more details on networking within Instruqt, view the networking overview page.

🌐 Web UI

Field	Description	Type	Required
Tab name	This property sets the tab title. And each service has its own tab.	string	Required
Select your host	This property sets the tab hostname.	string	Required
Path	The filesystem path on the host that should be used in the editor. For example, if you specify the path to be /example then the web service shown in the tab will be https://[HOSTNAME]-[PORT]-[PARTICIPANT_ID].env.play.instruqt.com/example	string	Optional
Port	The port that is used to connect to the service running on the host. If the sandbox host is a container, the port must be exposed in the containers host settings.	string	Required

💻 Instruqt CLI

tabs:
- title: <tab_title>
  type: service
  hostname: <hostname>
  path: <path>
  port: <port> 
  new_window: <true/false>

If your service uses HTTPS, its port must end in 443, for example, 8443.

Code editor

Code editor tabs open a simple code editor to a specified path on a host.

🌐 Web UI

Field	Description	Type	Required
Tab name	This property sets the tab title. And each service has its own tab.	string	Required
Select your host	This property sets the tab hostname.	string	Required
Path	The filesystem path on the host that should be used in the editor. For example, in Linux start with /root/	string	Optional

💻 Instruqt CLI

tabs:
- title: <tab_title>
  type: code
  hostname: <hostname>
  path: <path> # optional

Terminal

Terminal tabs open a terminal on a specified host.

🌐 Web UI

Field	Description	Type	Required
Tab name	This property sets the tab title. And each service has its own tab.	string	Required
Select your host	This property sets the tab hostname.	string	Required
Working directory	This property sets the working directory of the terminal. It defaults to $HOME.	string	Optional
Custom commands	This property sets a command to run upon opening the terminal. Further commands cannot be run.	string	Optional

💻 Instruqt CLI

tabs:
- title: <tab_title>
  type: terminal
  hostname: <hostname>
  workdir: <working_directory> # optional
  cmd: <command_to_run> # optional

Virtual browser

Virtual browser tabs display the URL of a Website service host.

🌐 Web UI

Field	Description	Type	Required
Tab name	This property sets the tab title.	string	Required
Select your host	This property sets which website service host the tab displays.	string	Required

Second Tab

tabs:
- title: <tab_title>
  type: browser
  hostname: <hostname>

Virtual browser tabs only become available once a website service host is created.