# Simulations

## What is a Simulation Element?

The **simulation** element allows learners to move from slide to slide by clicking on interactive areas on each slide, mimicking real-world systems and how learners must interact with them.

<figure><img src="/files/lVDc5q3OtkbvHHUcBKE0" alt=""><figcaption></figcaption></figure>

## Edit General Simulation Element Settings

Open a simulation element settings window to start editing.

<figure><img src="/files/80Pbg5gVcy6wkfOICyC7" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="50">№</th><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Display clickable Area (preview)</td><td><p>Shows / hides the clickable areas.<br></p><p>Select an option:</p><ul><li><strong>Yes</strong>: Displays all clickable areas to the learner on all slides;</li><li><strong>No</strong>: Hides all clickable areas from the learner on all slides. The areas become visible if the learner clicks outside the designated areas.</li></ul></td></tr><tr><td>2</td><td>Navigation</td><td><p>Shows / hides the navigation buttons.</p><p></p><p>Select an option from the drop-down menu:</p><ul><li><strong>Left</strong>: Displays the navigation buttons at the left bottom of the slide;</li><li><strong>Center</strong>: Displays the navigation buttons at the center bottom of the slide;</li><li><strong>Right</strong>: Displays the navigation buttons at the right bottom of the slide;</li><li><strong>Hide</strong>: Hides the navigation buttons and disables the Progress counter setting.</li></ul></td></tr><tr><td>3</td><td>Progress counter</td><td><p>Shows / hides the progress counter along with the navigation buttons.<br></p><p>Select an option:</p><ul><li><strong>Yes</strong>: Displays the progress counter to the left from the navigation buttons;</li><li><strong>No</strong>: Hides the progress counter.</li></ul></td></tr></tbody></table>

The changes will be saved automatically.

## Manage a Slide&#x20;

Open a simulation element settings window to start editing.

<figure><img src="/files/oTXZAQ7EuUa3scjSYHvu" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="50">№</th><th width="200">Action</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Add a slide</td><td>Click the <strong>Add</strong> button.</td></tr><tr><td></td><td>Add a slide</td><td><p><strong>a.</strong> Select a clickable area;<br>A pop-up window will appear.</p><p><strong>b.</strong> Click <strong>Connect to</strong>;<br>A pop-up window will appear.</p><p><strong>c.</strong> Click the <strong>Add slide</strong> button.</p></td></tr><tr><td>2</td><td>Change the slide order</td><td>Hold and drag the icon next to the slide name in the slides list.</td></tr><tr><td>3</td><td>Upload an image as a slide</td><td><p><strong>a.</strong> Click the <strong>+</strong> icon;<br>A pop-up window will appear.</p><p><strong>b.</strong> Upload an image in the same way as for the <a href="/pages/kw9bvHO0VzglNQK3be2E">image element</a>.</p></td></tr><tr><td>4</td><td>Rename a slide</td><td><p><strong>a.</strong> Click the <strong>+</strong> icon;</p><p><strong>b.</strong> Enter a name at the first input field.</p></td></tr><tr><td>5</td><td>Delete a slide</td><td>Click the <strong>Delete</strong> icon.</td></tr><tr><td>6</td><td>Navigate between slides in the editor</td><td>Click on the arrows to go to the previous / next slide.</td></tr></tbody></table>

The changes will be saved automatically.

## Manage Clickable (Connection) Area&#x20;

Select a slide to start editing.

<figure><img src="/files/cQEavZpQiWuudCwdK4yP" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="50">№</th><th width="200">Action</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Add a clickable area on the slide</td><td><p><strong>a.</strong> Hover over the slide;</p><p><strong>b.</strong> Click and hold the cursor;</p><p><strong>c.</strong> Drag the area.</p></td></tr><tr><td>2</td><td>Move a clickable area around the slide</td><td><p><strong>a.</strong> Click and hold inside the area;</p><p><strong>b.</strong> Drag the clickable area.</p></td></tr><tr><td>3</td><td>Resize a clickable area</td><td><p><strong>a.</strong> Select a clickable area;</p><p><strong>b.</strong> Click and hold the cursor at the area corner;</p><p><strong>c.</strong> Drag the area border.</p></td></tr><tr><td>4</td><td>Connect a clickable area to another slide</td><td><p><strong>a.</strong> Select a clickable area;<br>A pop-up window will appear.</p><p><strong>b.</strong> Click <strong>Connect to</strong>;<br>A pop-up window will appear.</p><p><strong>c.</strong> Select a slide to connect.</p></td></tr><tr><td>5</td><td>Show clickable area</td><td><p>Shows / hides the selected clickable area.<br></p><p>The option is available with the enabled <strong>Display clickable Area (preview)</strong> setting.<br></p><p><strong>a.</strong> Select a clickable area;<br>A pop-up window will appear.</p><p><strong>b.</strong> Click <strong>Settings</strong>;<br>A pop-up window will appear.</p><p><strong>c.</strong> Enable the <strong>Show clickable area</strong> toggle.</p></td></tr><tr><td>6</td><td>Enable right-click trigger</td><td><p>Requires the learner to right-click on an area instead of left-clicking.<br></p><p><strong>a.</strong> Select a clickable area;<br>A pop-up window will appear.</p><p><strong>b.</strong> Click <strong>Settings</strong>;<br>A pop-up window will appear.</p><p><strong>c.</strong> Enable the <strong>Right-click trigger</strong> toggle.</p></td></tr><tr><td>7</td><td>Go to the slide connected to the specific area</td><td><p><strong>a.</strong> Select a clickable area;<br>A pop-up window will appear.</p><p><strong>b.</strong> Click the <strong>Go to the connected Slide</strong> icon.</p></td></tr><tr><td>8</td><td>Delete a clickable area</td><td><p><strong>a.</strong> Select a clickable area;<br>A pop-up window will appear.</p><p><strong>b.</strong> Click the <strong>Delete clickable area</strong> icon.</p></td></tr></tbody></table>

The changes will be saved automatically.

## Manage a Hint&#x20;

Select a clickable area to start editing.

<figure><img src="/files/NRPcfJ25cwgvL5wMh4dV" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="50">№</th><th width="200">Action</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Add a hint</td><td><p><strong>a.</strong> Select a clickable area;<br>A pop-up window will appear.</p><p><strong>b.</strong> Click <strong>Hint</strong>;<br>A hint window will appear.</p><p><strong>c.</strong> Enter the hint text.<br>A hint icon will appear at the clickable area.</p></td></tr><tr><td>2</td><td>Set hint position</td><td><p><strong>a.</strong> Select a clickable area with a hint;<br>A pop-up window will appear.</p><p><strong>b.</strong> Click <strong>Settings</strong>;<br>A pop-up window will appear.</p><p><strong>c.</strong> Select a hint position.</p></td></tr><tr><td>3</td><td>Display pointer</td><td><p>Displays a pointer between the hint and the related area.<br></p><p><strong>a.</strong> Select a clickable area with a hint;<br>A pop-up window will appear.</p><p><strong>b.</strong> Click Settings;<br>A pop-up window will appear.</p><p><strong>c.</strong> Enable the <strong>Display pointer</strong> toggle.</p></td></tr><tr><td>4</td><td>Display a hint on hover</td><td><p><strong>a.</strong> Select a clickable area with a hint;<br>A pop-up window will appear.</p><p><strong>b.</strong> Click <strong>Settings</strong>;<br>A pop-up window will appear.</p><p><strong>c.</strong> Enable the Display a hint on hover toggle.</p></td></tr><tr><td>5</td><td>Show close button on a hint window</td><td><p><strong>a.</strong> Select a clickable area with a hint;<br>A pop-up window will appear.</p><p><strong>b.</strong> Click <strong>Settings</strong>;<br>A pop-up window will appear.</p><p><strong>c.</strong> Enable the <strong>Show close button</strong> toggle.</p></td></tr><tr><td>6</td><td>Delete a hint</td><td><p><strong>a.</strong> Select a clickable area with a hint;<br>A pop-up window will appear.</p><p><strong>b.</strong> Click the <strong>Delete hint</strong> icon.</p></td></tr></tbody></table>

The changes will be saved automatically.

## Manage a Text Area&#x20;

Select a slide to start editing.

<figure><img src="/files/b6eH13gGeuxAAaPkRm4N" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="50">№</th><th width="200">Action</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Add a text area on the slide</td><td>Click the <strong>Add text area</strong> button.</td></tr><tr><td>2</td><td>Move a text area around the slide</td><td><p><strong>a.</strong> Click and hold the drag icon;</p><p><strong>b.</strong> Drag the text area.</p></td></tr><tr><td>3</td><td>Resize a text area</td><td><p><strong>a.</strong> Select a text area;</p><p><strong>b.</strong> Click and hold the cursor at the area corner;</p><p><strong>c.</strong> Drag the area border.</p></td></tr><tr><td>4</td><td>Make a text area transparent</td><td><p><strong>a.</strong> Select a text area;<br>A pop-up window will appear.</p><p><strong>b.</strong> Click <strong>Appearance</strong>;<br>A pop-up window will appear.</p><p><strong>c.</strong> Enable the <strong>Make transparent</strong> toggle.</p></td></tr><tr><td>5</td><td>Display a text area placeholder</td><td><p><strong>a.</strong> Select a text area;<br>A pop-up window will appear.</p><p><strong>b.</strong> Click <strong>Appearance</strong>;<br>A pop-up window will appear.</p><p><strong>c.</strong> Enable the D<strong>isplay placeholder</strong> toggle.</p></td></tr><tr><td>6</td><td>Set required answer value logic</td><td><p><strong>a.</strong> Select a text area;<br>A pop-up window will appear.</p><p><strong>b.</strong> Click <strong>Logic</strong>;<br>A pop-up window will appear.</p><p><strong>c.</strong> Select an option:</p><ul><li><strong>Any text required</strong>: Requires a learner to enter any value to the field;</li><li><strong>Match specific value</strong>: Requires a learner to enter the specified value to the field.</li></ul><p>Click <strong>+ Add value</strong> button to add one or multiple required answer variations.<br><br>Click the <strong>Delete</strong> icon to remove the answer variation from the list.</p></td></tr><tr><td>7</td><td>Delete a text area</td><td><p><strong>a.</strong> Select a clickable area with a hint;<br>A pop-up window will appear.</p><p><strong>b.</strong> Click the <strong>Delete</strong> icon.</p></td></tr></tbody></table>

The changes will be saved automatically.

## Brand a Simulation Element

[Set corporate branding for a simulation element.](/branding/create-branding/elements/simulations.md)

{% hint style="success" %}
Use the [pro mode](/no-code-editor/work-in-the-no-code-editor.md) of the editor to set an element branding different from the corporate branding template.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.parta.io/editor/edit-elements/set-interactive-elements/simulations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.