# Challenge tabs

## 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. 

{% hint style="warning" %}
If your website is not displaying, it is likely blocking iframes. Use a site like [https://iframetester.com](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. 
{% endhint %}

{% hint style="warning" %}
Tabs that open in external browser tabs (when using the `new_window` option) are not considered by the [idle timer](https://docs.instruqt.com/manage/time-limits-and-idle-timeouts#idle-timeouts).
{% endhint %}

{% tabs %}
{% tab title="🌐 Web UI" %}

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

{% tab title="💻 Instruqt CLI" %}

```markdown
tabs:
- title: <tab_title>
  type: website
  url: <website_url>
  new_window: <true/false> # optional
```

{% endtab %}
{% endtabs %}

## Your applications

Your applications are tabs that point to web services running *inside* a sandbox.&#x20;

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.com` with the specified port number. You can think of this as [https://localhost:port](https://docs.instruqt.com/tracks/challenges/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](https://docs.instruqt.com/reference/platform/networking#overview) page.

{% tabs %}
{% tab title="🌐 Web UI" %}

<table><thead><tr><th width="168">Field</th><th width="376">Description</th><th>Type</th><th>Required</th></tr></thead><tbody><tr><td><strong>Tab name</strong></td><td>This property sets the tab title. And each service has its own tab.</td><td><code>string</code></td><td>Required</td></tr><tr><td><strong>Select your host</strong></td><td>This property sets the tab hostname.</td><td><code>string</code></td><td>Required</td></tr><tr><td><strong>Path</strong></td><td>The filesystem path on the host that should be used in the editor. For example, if you specify the path to be <strong>/example</strong> then the web service shown in the tab will be <code>https://[HOSTNAME]-[PORT]-[PARTICIPANT_ID].env.play.instruqt.com/example</code></td><td><code>string</code></td><td>Optional</td></tr><tr><td><strong>Port</strong></td><td>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.</td><td><code>string</code></td><td>Required</td></tr><tr><td><strong>Protocol</strong></td><td><p>The protocol used to connect to the service running on the host.</p><p></p><p>Note: When the <strong>Default</strong> protocol option is selected, the protocol is determined by the port number. Ports ending in <strong>443</strong> use <strong>HTTPS</strong>; all other ports use <strong>HTTP</strong>.</p></td><td><code>string</code></td><td>Optional</td></tr></tbody></table>
{% endtab %}

{% tab title="💻 Instruqt CLI" %}

```markdown
tabs:
- title: <tab_title>
  type: service
  hostname: <hostname>
  path: <path> # optional
  port: <port>
  protocol: <http/https> # optional
  new_window: <true/false>
```

{% endtab %}
{% endtabs %}

## Code editor

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

{% tabs %}
{% tab title="🌐 Web UI" %}

<table><thead><tr><th width="170">Field</th><th width="367">Description</th><th>Type</th><th>Required</th></tr></thead><tbody><tr><td><strong>Tab name</strong></td><td>This property sets the tab title. And each service has its own tab.</td><td><code>string</code></td><td>Required</td></tr><tr><td><strong>Select your host</strong></td><td>This property sets the tab hostname.</td><td><code>string</code></td><td>Required</td></tr><tr><td><strong>Path</strong></td><td>The filesystem path on the host that should be used in the editor.  <br>For example, in Linux start with /root/ </td><td><code>string</code></td><td>Optional</td></tr></tbody></table>
{% endtab %}

{% tab title="💻 Instruqt CLI" %}

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

{% endtab %}
{% endtabs %}

## Terminal

Terminal tabs open a terminal on a specified host.

{% tabs %}
{% tab title="🌐 Web UI" %}

<table><thead><tr><th width="140">Field</th><th width="359">Description</th><th>Type</th><th>Required</th></tr></thead><tbody><tr><td><strong>Tab name</strong></td><td>This property sets the tab title. And each service has its own tab.</td><td><code>string</code></td><td>Required</td></tr><tr><td><strong>Select your host</strong></td><td>This property sets the tab hostname.</td><td><code>string</code></td><td>Required</td></tr><tr><td><strong>Working directory</strong></td><td>This property sets the working directory of the terminal. It defaults to <code>$HOME</code>.</td><td><code>string</code></td><td>Optional</td></tr><tr><td><strong>Custom commands</strong></td><td>This property sets a command to run upon opening the terminal. Further commands cannot be run.</td><td><code>string</code></td><td>Optional</td></tr></tbody></table>
{% endtab %}

{% tab title="💻 Instruqt CLI" %}

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

{% endtab %}
{% endtabs %}

## Virtual browser

Virtual browser tabs display the URL of a [*Website service* host](https://docs.instruqt.com/sandboxes/hosts/website-service). You must have the website service host created in your sandbox before you can add the virtual browser to your challenge.

{% tabs %}
{% tab title="🌐 Web UI" %}

<table><thead><tr><th>Field</th><th width="304">Description</th><th>Type</th><th>Required</th></tr></thead><tbody><tr><td><strong>Tab name</strong></td><td>This property sets the tab title. </td><td><code>string</code></td><td>Required</td></tr><tr><td><strong>Select your host</strong></td><td>This property sets which website service host the tab displays.</td><td><code>string</code></td><td>Required</td></tr></tbody></table>
{% endtab %}

{% tab title="Second Tab" %}

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

{% endtab %}
{% endtabs %}

{% hint style="info" %}
Virtual browser tabs only become available once a website service host is created.
{% endhint %}