---
title: "Trigger recipes"
description: "Ready-made trigger patterns with the clicks in the editor and the same trigger in the course script, ready to copy."
canonical_url: "https://docs.ols.yonn.online/en/interact/trigger-recipes"
---
# Trigger recipes

> Ready-made trigger patterns with the clicks in the editor and the same trigger in the course script, ready to copy.

Recipes are ready-made triggers for things almost every course needs: a button that opens a pop-up, a "Next" button, points that add up. Each recipe tells you what to click in the editor. Below it you find the same trigger in the [course script](https://docs.ols.yonn.online/en/ai/course-script), the text format AI apps use. You only need that part if you work with an AI; otherwise just skip the gray boxes.

What you need to know for this page:

- **Trigger**: a rule "when something happens, do something". How triggers work: [Triggers and variables](https://docs.ols.yonn.online/en/interact/triggers-and-variables).
- **Quick start**: six of the recipes are built right into the trigger window.
- **Key**: in the course script, objects, layers and slides are named by a short key such as `btn-next`. In the editor you simply pick them from a list.

## Use a recipe in 3 steps

<procedure>

### Select the object

Click the object that should react, for example your button. Then open the **Triggers** tab (lightning icon) in the properties panel on the right.

### Open a new trigger

Click **Trigger**. The window **New trigger** opens. At the top you see **Quick start**.

### Pick the recipe and adjust it

Click a template, for example **Button shows layer**. All fields below are filled in. Pick the right layer or slide where needed, check the sentence at the top and click **Add trigger**.

</procedure>

![Quick start in the trigger window with the six templates Button shows layer, Go to the next slide, Change state on click, Count points, Close layer and Skip slide if variable is true](https://docs.ols.yonn.online/screenshots/en/trigger-recipes-quick-start.png)

## The built-in templates

<table>
<thead>
  <tr>
    <th>
      Template
    </th>
    
    <th>
      What it does
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Button shows layer
      </strong>
    </td>
    
    <td>
      A click on an object shows a layer, for example a pop-up.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Go to the next slide
      </strong>
    </td>
    
    <td>
      A click on an object goes to the next slide.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Change state on click
      </strong>
    </td>
    
    <td>
      The clicked object changes to the "Selected" state.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Count points (variable +1)
      </strong>
    </td>
    
    <td>
      Every click adds 1 to a number variable.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Close layer
      </strong>
    </td>
    
    <td>
      A click hides the layer again, for example from an "X".
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Skip slide if variable is true
      </strong>
    </td>
    
    <td>
      When the slide starts, it moves on right away if a true/false variable is true.
    </td>
  </tr>
</tbody>
</table>

## Button shows a layer

A click on "Learn more" opens the layer "details".

- In the editor: select the button, click **Trigger**, Quick start **Button shows layer**, choose the layer under **Layer**.

```json
{ "when": { "type": "click", "object": "btn-more" }, "do": { "type": "showLayer", "layer": "details" } }
```

## Close a layer

A click on the "X" in the layer hides it again. Put this trigger on the layer itself: first click the layer at the top of the stage, then add the trigger.

- In the editor: select the close button on the layer, Quick start **Close layer**.

```json
{ "when": { "type": "click", "object": "btn-close" }, "do": { "type": "hideLayer" } }
```

## Go to the next slide

- In the editor: select your button, Quick start **Go to the next slide**.

```json
{ "when": { "type": "click", "object": "btn-next" }, "do": { "type": "nextSlide" } }
```

## Change state on click

The clicked card changes to "Selected", for example to show it was chosen.

- In the editor: select the card, Quick start **Change state on click**.

```json
{ "when": { "type": "click", "object": "card-a" }, "do": { "type": "changeState", "object": "card-a", "state": "selected" } }
```

## Count points

Every click adds 1 to the number variable "Points".

- In the editor: select the button, Quick start **Count points (variable +1)**, choose the variable.

```json
{ "when": { "type": "click", "object": "btn-correct" }, "do": { "type": "adjustVariable", "variable": "Points", "op": "add", "value": 1 } }
```

## Skip a slide when a variable is true

When the slide starts, it moves on at once if "ChapterDone" is true. Good for chapters someone has already finished.

- In the editor: nothing selected, Quick start **Skip slide if variable is true**, choose the variable.

```json
{ "when": { "type": "timelineStarts" }, "if": [{ "kind": "variable", "variable": "ChapterDone", "op": "==", "value": true }], "do": { "type": "nextSlide" } }
```

## Branch on a score

On a decision slide, go to the bonus slide with 8 or more points, otherwise to the review slide.

- In the editor: action **Jump to slide** (bonus), event **User clicks** on your button, under **3 Conditions** add **Variable**: "Points" is greater than or equal to 8. Under **Advanced**, turn on **Else action** and choose **Jump to slide** (review).

```json
{
  "when": { "type": "click", "object": "btn-continue" },
  "if": [{ "kind": "variable", "variable": "Points", "op": ">=", "value": 8 }],
  "do": { "type": "jumpToSlide", "slide": "bonus" },
  "else": { "type": "jumpToSlide", "slide": "review" }
}
```

## Unlock Next after a video

Hide your own Next button at the start and show it when the video ends.

- In the editor: action **Show object** (your Next button), event **Media completes** with the video as object.

```json
{ "when": { "type": "mediaCompletes", "object": "intro-video" }, "do": { "type": "showObject", "object": "btn-next" } }
```

## Show a hint after five seconds

- In the editor: action **Show layer** (hint), event **Timeline reaches**, point in time 5 seconds.

```json
{ "when": { "type": "timelineReaches", "time": 5000 }, "do": { "type": "showLayer", "layer": "hint" } }
```

## Keyboard shortcut for help (course-wide)

A project trigger: pressing H anywhere opens the help slide as a lightbox (a window on top of the current slide).

- In the editor: action **Slide as lightbox** (help slide), event **Key pressed**, key H. Under **Advanced: Save in**, choose **Project**.

```json
{ "when": { "type": "keyPress", "key": "h" }, "do": { "type": "lightboxSlide", "slide": "help" } }
```

## Store a name and greet

A text input stores what learners type in the text variable "Name". You link the two in the **Format** tab of the text input, field **Variable**. A text box on the next slide reads `Welcome, %Name%!`. To show the Next button only after something was typed:

- In the editor: action **Show object** (Next button), event **Focus lost** on the text input, condition **Variable**: "Name" is not empty.

```json
{ "when": { "type": "loseFocus", "object": "name-input" }, "if": [{ "kind": "variable", "variable": "Name", "op": "isNotEmpty" }], "do": { "type": "showObject", "object": "btn-next" } }
```

## Simpler layout on phones

Show a simplified layer when the player window is narrower than 600 px.

- In the editor: action **Show layer**, event **Timeline starts**, condition **Window width** narrower than 600 px.

```json
{ "when": { "type": "timelineStarts" }, "if": [{ "kind": "window", "op": "<", "width": 600 }], "do": { "type": "showLayer", "layer": "compact" } }
```

## Complete the course on the last slide

For the completion rule **By trigger** in the publish window (see [Preview and publish](https://docs.ols.yonn.online/en/ship/preview-and-export)).

- In the editor: on the last slide, action **Complete course** with status **Completed**, event **Timeline starts**.

```json
{ "when": { "type": "timelineStarts" }, "do": { "type": "completeCourse", "status": "completed" } }
```

<hint-box kind="tip" title="Keys, not names">

In the course script, triggers refer to objects, layers and slides by their **key** (`btn-next`, `details`). If a key is wrong, the check answers with a suggestion such as "Did you mean 'btn-next'?".

</hint-box>

## If something doesn't work

- **The layer opens but won't close**: the close trigger must be stored on the layer, not on the slide.
- **Points don't add up**: check that the variable has the type **Number** and starts at 0 (<ui-path path="View > Variables">



</ui-path>

).
- **The keyboard shortcut only works on one slide**: it must be a project trigger (**Advanced: Save in > Project**).
- **"Complete course" has no effect in Moodle**: in the publish window, the completion rule must be **By trigger**.


## Sitemap

See the full [sitemap](https://docs.ols.yonn.online/sitemap.md) for all pages.