Tablet Scenario

***All template files are tested using modern browsers, such as Chrome and Firefox. We do not support or test using Internet Explorer.***

Do you want to learn how to use xAPI in this template? Learn Now!! 

In this video, we're going to take a look at the basic structure of our Tablet Scenario Storyline template, and how to make simple edits like changing text in the file. First let's look at the structure.

This is a multi-screen template. Slide 1 provides the user with a tablet-based scenario. Slide 2 uses a mobile phone to frame the scenario. Design is different, but functionality is generally the same. We'll focus on just the first slide for now.

On initial visit, the user will be presented first with an introductory layer that explains the slide. When this closes, the main layer is shown, presenting the bulk of content. On this layer, the user interacts with and reads a scenario presented on a device by clicking the arrows shown on that device. Once all screens on the device have been viewed the content pane at left of the screen will disappear, and the user will be presented with four choices. When the user makes a selection from these choices a content feedback layer will appear, covering the scenario and device screen.

To edit content on the Introductory and Content Feedback layers, simply access those layers, select the text box you wish to change, and edit at will.

There are a few areas on the base layer that are slightly more involved. Starting at the left of the screen, a scenario-specific content block and the 4 questions overlap one another. Each of these elements can be edited as any standard SL object click to enter and overwrite the text.

It looks a little tricky onscreen in edit mode, however, because 1) these objects overlap, and 2) the initial visibility of these buttons is Hidden, and thus semi-transparent.

The final visibility at publish of each button is controlled via a variable you set at the top of the triggers pane. Use the NumOfTabs_ variable to control the number of buttons visible on screen. Only want your user to select from two choices? Set NumOfTabs to 2, and preview for the result.

Moving to the right side of the stage, we see the tablet. To edit the content and images shown on the device, drill down to the Content layer. Enter this object's states to adjust for each of the three screens cycled on the device.

The device itself is a vector custom shape. You can edit each object that makes up both the tablet and phone in this template as you would any standard Storyline shape; fill, stroke, style, etc.

For more advanced editing, you'll need to pay close attention to variables in this template. Use xTabletSlider triggers to control the state changes of navigational elements, scenario content, intro content, and side-bar buttons.

This article last reviewed July, 2018. The software may have changed since the last review.