Touch

In this tutorial, we will create a simple quiz to serve as an example for creating Touch for Digital Signage that responds to users touching or clicking.

Before we get started, check out the quiz yourself! (you can use the mouse to click on the buttons).

Building interactive content with Touch for Digital Signage

Touch Activity diagram

We’ve made a workflow diagram of the quiz to give you a better understanding of the possible paths users can take. The rectangles represent slides, the circles represent buttons, and the arrows point to where clicking or touching the button will take the user.

Slides

As seen in the diagram above, the quiz contains 6 different slides:

1. Landing/start page
2. First question
3. The correct answer to the first question
4. Second question
5. The correct answer to the second question
6. Incorrect answer

Creating the slides

When creating touch interfaces, you often don’t have the final picture in your head. I’d recommend creating all the slides before linking them together with click actions because adding click actions require you to select a specific slide. If you don’t have the full picture yet, then the order of your slides might change, therefore it is easier to create all slides first and then wire the click actions.

Adding click actions

You can add click actions to individual elements (such as images, text, rectangles, etc…) or you can use a ‘button’ element. The button element is actually a transparent element that you can position above other elements to react to touch events. In this quiz, our buttons are made up of rectangles and text positioned on top of it. Rather than assigning a click action to both the rectangle and text element, we add a button element on top of them and assign a click action to the button element instead.

We position the button element above the button and assign an action to jump to slide 2 when clicked.

Now that all slides are created, we go through all buttons and point them to the appropriate slide as shown in the workflow diagram. Buttons with incorrect answers point to a slide where “Wrong answer” is shown to the user and they can re-take the quiz. Buttons with correct answers point to a slide where “Correct answer” is shown and they can proceed to the next question.

Reset to a landing page

Sometimes users start the quiz but leave halfway through. We want the quiz to reset to the beginning after some time of inactivity. To do this, we’re going to use the slide duration and functionality to override which slide is played after.

We’re going to assume that if the user has not clicked on a button for 1 minute, then they have left the stand. So, we’re going to set the duration of the slides to 1 minute. Since we want the playlist to reset to the first slide, we also set the option “After this slide play slide” to value “Slide 1”, otherwise by default it would play the next slide (you can find this option also in the slide settings dialog under “Advanced” section).

Once you have changed the default behavior (by default it always plays the next slide), a small arrow appears in the slide thumbnail. When you mouse over it, it indicates which slide is played after that slide:

If you don’t need to reset the playlist back to the initial state, you can simply set all slides to “play forever”.

Get this playlist

You can clone this quiz example to your account to see and change it yourself. To do that, navigate to the “Playlists” page on our web portal, click on the “From template” button, and find the “Touch” tab. Click on the “Touch Quiz” playlist to clone it to your account.

• Alignment – Fit, align, and lock/unlock the plugin.
• On-Click – Choose what slide to jump to on click.
  • Jump to – jumps to the slide index in the playlist. This references a slide in position, so if the slide ordering changes, the slide that will be jumped to, also changes.
  • Anchor to – Anchor to a specific slide, so that if the slide order changes, the click function takes to the defined slide. To be able to anchor to a slide, give the slide a name first in the slide settings page (where you set the slide duration)
• Positioning – Fine-tune the size and position of the plugin.

The click actions go to the wrong slide after adding extra slides to the playlist.

By default, the click actions are linked to a slide by their index in the playlist. If the ordering of the slides changes, then the click action will also take to a different slide. You can however anchor click to a specific slide, first give the slide a name (in the slide settings page, where you set the slide duration), then you can select an option to anchor to a slide.

How do I prevent resetting the initial slide while the user is interacting with it? 

As in this example, we want the playlist to reset back to the landing slide after some time of inactivity. A common use case is to include a web form for users to fill out, but if the user is slow filling out the form, how do we prevent the playlist from resetting back to the initial state while the user is halfway through filling the form (or interacting with a website)?

There is a setting called “interaction delay” for playlists, you can find it in the playlist settings dialog (where you’d rename the playlist) under the “advanced” section. Interaction delay effectively delays the next slide from being played each time the user touches/clicks on the screen.

NB! This feature is NOT supported on web preview and Android (including FireTV) players.

Suppose you had a slide with 60 60-second duration – after 60 seconds of inactivity, it would reset back to the first slide. Suppose we set the interaction delay of the slide to 20 seconds. Now if the user touches/types/clicks on the screen while the slide has less than 20 seconds of playtime left, the playtime would be set back to 20 seconds on every interaction (and it would start ticking down from 20 seconds again). If the user interacts with the slide while it has more than 20 seconds of playtime left, the setting has no effect. A good value for interaction delay really depends on how frequently you expect the users to touch the screen.