> For the complete documentation index, see [llms.txt](https://help.parta.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.parta.io/editor/edit-elements/set-interactive-elements/simulations.md).

# 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 %}