Display Rule
Patrick Farley avatar
Written by Patrick Farley
Updated over a week ago

Friendly Warning: welcome to developer territory. 

You will have a lot of fun if you are comfortable with HTML, Javascript and CSS, or have a friend / colleague that is. If not, you may have a bad time. 

If you are a real do-it-yourselfer and want to learn yourself, we highly recommend first taking Codeacademy's free HTML/CSS and JavaScript courses.

The Display Rule allows you to make an annotation appear only under certain conditions. Common conditions include:

  • Display when a viewer clicks on a different annotation.

  • Display when the viewer gets a question right or wrong.

  • Display based on a parameter passed in from an external API.


Here's a basic example. Clicking on one annotation will make another appear.

Here's a more sophisticated example.

How to do it

The first (or "target") annotation can be a text, image or hotspot annotation.
Set the Link / Evaluate expression field to something like: displayTextBox=true.

The second (or "destination") annotation can be any type - text, image, hotspot, iframe, even a quiz.
On this, set the Display Rule field to something like: displayTextBox==true.

Optional Configuration

The more sophisticated example has the following configuration:

Target Annotation
Link / Evaluate expression: player.pause(), displayTextBox=true, displayQuestionBox=false
Display Rule: displayQuestionBox==true || displayQuestionBox==undefined

Destination Annotation
Link / Evaluate expression: player.play(), displayTextBox=false, displayQuestionBox=true
Display Rule: displayTextBox==true
Start time and Duration for both the target and destination annotations are identical.

Did this answer your question?