# 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FtPkXw6OKlwsmACKuN7iB%2FScreenshot_11.png?alt=media&#x26;token=f2e5b84b-d082-49fa-b6bf-02424c4577ac" alt=""><figcaption></figcaption></figure>

## Edit General Simulation Element Settings

Open a simulation element settings window to start editing.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2Fd49uXCHDOSpWHyMepeiR%2FSimulation.01.png?alt=media&#x26;token=e3bcdb3f-9e46-4043-8d60-42f3a93b8f63" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2F7x98GsTEpISrfgv50weD%2FSimulation.02.png?alt=media&#x26;token=515be612-d61a-451c-8715-6c362dc14110" 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="../set-media-and-content-elements/image">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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FMu5hZMyj6Ogtj8p0DA38%2FSimulation.03.png?alt=media&#x26;token=a0eb4259-d747-43ef-b0dd-d2e3206cef35" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FKcLsjG6DINmtutXkzpiN%2FSimulation.04.png?alt=media&#x26;token=e518966d-6f03-4f4d-ac06-22a5459e7f7e" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2Fz1jYwUGgMF9ag8ESmJwR%2FSimulation.05.png?alt=media&#x26;token=827eeffb-a55f-4b5a-8a05-6c4c4f0c9926" 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.](https://help.parta.io/branding/create-branding/elements/simulations)

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