Yo Scenario User Guide

This guide will show you how to create interactive fiction with Yo Scenario.

← Help

Introduction

Yo Scenario is a content authoring tool for creating engaging and interactive branching scenarios. A branching scenario is any activity where the player can choose their own path through the story. This could be an interaction with a tricky customer where you have to pick the store employee’s responses or a situation where you have been marooned on a desert island and you have to decide how to proceed.


Scenarios

A scenario is primarily made up of steps and choices. The steps contains the content for the user to interact with and the choices lead them to further steps. This is the basics of a scenario but it can get more complex if you require it. For example you could have a player pick from a selection of items and depending on the combination they pick you could send them to a specific step. Or you could set a variable and adjust it based on the player choices through the scenario then lead them down a path if the variable is a certain value. Whether you want to create something simple or a complicated behemoth, it all starts with the first step.


Configuration

The config editor is used to setup configuration elements for scenarios, choices and steps.

To use the config editor select an option from the drop-down menu, fill in the field or fields and press the ADD button. You can use the config editor for a scenario to manage variables and score categories, two important parts of Yo Scenario.

Scenario config options

Variable name Purpose
Default Background image Set the default background image for scenario
Start Button Text Change the start button text (shown on the intro screen). The default is “Start”.
Score Categories Setup a series of score category labels that can be used throughout the scenario. They all start at 0 and can be added to or subtracted from using actions.
Overlay Choices Toggle showing choices over the top of the content. Used in video scenarios.
Hide Choices Till Video Finished As it says allows you to hide choices until the video is finished. Used in video scenarios.
Show Audio Controls Toggle the audio controls.
Soundtrack Set a soundtrack to play during the scenario.
Variables Setup a series of variable names to be used in the scenario. An initial value can also be set.
Has VR Toggle whether the scenario has any VR components. This is automatically set if you add a VR component to one of your steps.

Step config options

Variable name Purpose
Show Step Titles Show or hide the step title (overrides the default setting in the styling setup).
Overlay Choices Toggle showing choices over the top of the content. Used in video scenarios.
Hide Choices Till Video Finished As it says allows you to hide choices until the video is finished. Used in video scenarios.
Soundtrack Set a soundtrack to play during the step.
Transcript A transcript of the step.

Choice config options

Variable name Purpose
Hidden Toggle if this choice is shown or not.
Show When Set a condition to toggle when the choice is show. E.g. when a variable is a certain value.

Breakout config options

Variable name Purpose
Delay Set a delay in seconds before the breakout is shown.
Can dismiss Toggle if the breakout can be dismissed.
Soundtrack Set a soundtrack to play during the step.
Transcript A transcript of the step.

Publish config options

Variable name Purpose
Disable Alerts Disable any alerts used in the scenario
Disable Breakouts Disable any breakouts in the scenario


Content Editor

The content editor is used to create your step content and scenario intro content.  It is an easy to use component based editor that makes it quick and simple to create your content.

Visual Components

The following components offer ways of displaying content.  They are listed along with their associated fields.

Text

The text component is for text content.  This can be formatted using the WYSIWYG editor.

Field name Purpose
Content The text content you wish to display

Image

The image component allows you to insert an image into your content.

Field name Purpose
Image The image file, linked from your media library
Size The image size you want to use, Full, Medium or Square
Alt Text The alternative text for the image (the img alt tag)

Video

The video component allows you to insert a video into your content.

Field name Purpose
MP4 The video file in mp4 format
Poster image The poster image (this will show before you play the video)
Webm The video file in webm format
External source The url of an external source (e.g. Youtube, Vimeo)
Full Screen Whether to make the video take up the whole screen
Auto Play Whether to make the video autoplay
Hide Controls Whether to hide the video player controls
Transcript A text transcript of the video
Captions (VTT) A vtt file of closed captions

Audio

The audio component allows you to insert audio into your content

Field name Purpose
MP3 The audio file in mp3 format
External Source The url of an external source
Narration for this step Is this audio the narration for the step
Transcript A text transcript of the video

Document

The document component allows you to insert a document into your content.

Field name Purpose
Document The document file (picked from media library)
Title The title of the document
Details A text description of what the document is

Choices

The choices component allows you to insert the current step choices where you like.  Choices are appended underneath the step content by default so you only need to use this if you want your choices elsewhere in the step content.

Field name Purpose
Title A title for the choices block

Slider

A slider is an image carousel that allows you to show a number of images one at a time.  You can slide from one image to the next or use the controls underneath.

Field name Purpose
Title A title for the slider
Slides An array of slides for the slider with the following fields:
Title - The title of the slide
Caption - The caption for the slide
Image - The image for the slide

Gallery

A gallery is a collection of images.  For each image a thumbnail will be shown that you can press to view the full size image.

Field name Purpose
Title A title for the slider
Media An array of images for the gallery with the following fields:
Title - The title of the slide
Caption - The caption for the slide
Image - The image for the slide

Tabs

Tabs are a way of showing different sections of content in a tabular manner.

Field name Purpose
Title A title for the slider
Tabs An array of tabs with the following fields:
Title - The title of the tab Content - The content for the tab

Quote

Quotes are useful for showing text in a speech bubble or a block quote.

Field name Purpose
Quote The text of the quote
Author The author of the quote (if using a blockquote style)
Style The style of the quote, either a speech bubble or quote.
Bubble Position If a speech bubble, the position of the speech triangle
Background Colour If a speech bubble, the background colour

Accordion

Accordions work like tabs in a vertical way.  Each accordion has a title with associated content.

Field name Purpose
Title A title for the slider
Items An array of items with the following fields:
Title - The title of the item
Content - The content for the item

Button

A component to add a button with custom actions.

Field name Purpose
Title The button title
Image The button image
Action The actions for the button using the action editor

Chart

A component that adds a chart to your content.

Field name Purpose
Title The title of the chart
Type The type of chart, pie, bar, line or radar.
Data Type The data type allows you to choose between score categories or custom data
X Label The label of the x data
Y Label The label of the y data
Custom Data If not using score categories set your data here

Table

A component that adds a table to your content.

Field name Purpose

Title

The title of the table

Table Data

The table data, rows and columns.  First you need to add columns then you can add rows of data.

Advanced Sort

If you want to sort by multiple columns enter their names here separated by a comma


Embed

A component that allows you to embed content from other sites in your content.

Field name Purpose

Title

The title of the embed component

URL

The URL to embed

Width

The width of the embed component (e.g. 500px, 100%)

Height

The height of the embed component (e.g. 500px, 100vh)

Attributes

An array of attributes that can be added to the embed iframe



Activities

The following components are activities that the player needs to complete to continue on in the scenario.They are listed along with their associated fields.


Pick Task

With a pick task the player needs to pick from a selection of items.  You can define custom items or use items from a toolkit. You can set the actions that happen based on the items they picked (see the action editor for details).

Field name Purpose

Title

The title of the embed component

Instructions

The instructions explaining what the player should do

Use Scenario Toolkit

If you want to use a toolkit from your scenario select it here

Custom Items

If you don’t use a toolkit from your scenario define your items here

Max

The maximum number of items the player can pick

Min

The minimum number of items the player can pick

Allow Retake

Set if the player can retake the task if revisited

Allow Cancel

Set if the player can cancel out of the task

Action Editor

Set the actions to be performed on completion. See the action editor section.


Quiz

The quiz component allows you to insert an MCQ quiz into your content.  You can perform actions based on the outcome.

Field name Purpose

Title

The title of the embed component

Instructions

The instructions explaining what the player should do

Questions

The questions for the quiz.  Each question can have a number of answers.  Each answer can have text, an image and a

Action Editor

Set the actions to be performed on completion. See the action editor section.


Form

The form component allows you to add a form to your content to collect data.  This could be to enter a code, a player name, choose from a scale or a selection of options.

Field name Purpose

Title

The title of the form

Instructions

The instructions explaining what the player should do

Show Submission Data

Whether to show the submission data on completion.

Form Editor

See below

Action Editor

Set the actions to be performed on completion. See the action editor section.

 

Form editor

The form editor is used to setup the structure of the form.  A form is made up of pages and fields. Each page has a label and fields.  A field has the following options.

Field name Purpose

Label

The label for the field

Type

The type of field.  Choose from text, number, large text, checkbox, select, date, slider or typeahead (an auto completing text input)

Instructions

The instructions for the field (will be used as the placeholder for some field types)

Value(s)

The predefined value of the field.  In the case of select or typeahead use this to enter the options (put new options on a new line)

Visible

Is the field visible?

Required

Is the field required?

Multiple Select

For select field types only, can the player select multiple options

Min, Max, Default

For sliders only, set a min, max and default value

Data Source

For typeaheads only, set a JSON data source for the input (use a JSON file from the media library)


Chat

The chat component enables you to add an interactive conversation into your content.  Rather than using several steps with branching content you can create simple branching chat nodes within the chat component and perform actions based on the chat stem selected.

Field name Purpose

Title

The title of the chat component

Instructions

The instructions explaining what the player should do

Character

The name of the character you are chatting to

Avatar

An image of the character

Chat Style

The style the chat should be presented in.  Either messenger (a messenger style chat with previous chat stems remaining on show) or conversational (a speech bubble style chat with only the current stem showing)  

Chat editor

A chat is made up of stems.  Each stem has a question, an answer and optional child stems.  The child stems will be presented to the player if the parent stem is selected.

Action Editor

Set the actions to be performed. See the action editor section.


Hot Spot

A hot spot component is an image with selected areas that can be selected by the player.  You can then perform actions based on the selections.

Field name Purpose

Title

The title of the hotspot component

Image

The image used in the hotspot component

Action Editor

Set the actions to be performed. See the action editor section.


VR

A vr component in a 360 environment that can be explored.  You can choose an image to use and then add objects to the scene.  These objects can be selected to perform actions.

Field name Purpose

Title

The title of the VR component

Height

The height of the VR component (e.g. 500px, 100vh)

Image

The image used as the background

Objects

You can add objects to the scene once you have chosen a background.  Each object has a title and a shape (sphere, box, plane or ring). The title is used when selecting actions.  Each shape has different variables that can be altered but all have a x, y and z coordinates and colour.

Action Editor

Set the actions to be performed. See the action editor section.


Football Match

The football match component allows you to include a football management style activity into your content.

Field name Purpose

Title

The title of the match

Home team

The toolkit to use for the home team.  The toolkit must conform to the Football Team type (when you create a new toolkit choose the football team type)

Away team

The toolkit to use for the away team.  The toolkit must conform to the Football Team type (when you create a new toolkit choose the football team type)

Extra time

If there should be extra time and penalties

Action Editor

Set the actions to be performed. See the action editor section.


Settings

Container Settings

The container has the following settings.  Where these settings affect styling they will override the style defaults.

Field name Purpose

Background colour

The background colour of the step

Background image

The background image

Content background colour

The background colour of the content container

Content container width

The width of the content container (either fluid or contained)

Padding

The padding of the step

Animation

The animation to use when the step is chosen

Animation delay

Optional delay for the animation

Choice style

The style of choice to use (button or speech bubble)

Column break point

The column breakpoint for responsive layouts


Section Settings

Each section has the following settings.  Where these settings affect styling they will override the style defaults.

Field name Purpose

Background colour

The background colour of the section

Background image

The background image of the section

Content container width

The width of the section(either fluid or contained)

Animation

The animation to use when the section is shown

Animation delay

Optional delay for the animation


Row Settings

Each row has the following settings.  Where these settings affect styling they will override the style defaults.

Field name Purpose

Background colour

The background colour of the section

Background image

The background image of the section


Component Settings

Each component has the following settings.  Where these settings affect styling they will override the style defaults.

Field name Purpose

Background colour

The background colour of the section

Background image

The background image of the section

Animation

The animation to use when the section is shown

Animation delay

Optional delay for the animation

Show when

Define a condition for when to show the component in four ways; on a variable being a certain value, on a score category being a certain value, on the top score category or the bottom score category matching a value.


Then under "Show When" select your condition, fill in the associated fields the press the ADD CONDITION button. Remember, when using "On Variable" you can prefix the value with an optional comparator of either >, >=, <, <= or !=. If no comparator is set it will default to "=" and perform a direct comparison.


Snippets

With snippets you can save templates for later use.  To do this you create the content layout you want then press the save button on the top right of the content editor.  Give it a name and it will be added to your snippet list. You can then insert this same layout into any step by pressing the load snippet button on the top right of the content editor.  Common snippets have been added to the “Template” button at the bottom of the editor to allow you to quickly insert common layouts.

 

Previewing

You can preview your content while editing by pressing the Preview button on the top right of the content editor.  You can switch between small screen and large screen layouts using the buttons in the preview container.

 

Action Editor

Overview

The action editor allows you to define events and assign actions to them.  For example, when a variable is a certain value go to a certain step. The event you can select vary depending on where the action editor is being used in either a step, a choice, a component, a toolkit or a breakout.  Events can be grouped so that multiple events have to be true for them to trigger.


Events

The following events are available, arranged by context.

Step events

Event Description

When it starts

When the step starts

When it ends

When the step is complete

After x seconds

Lets you define a number of sections after which the event will trigger

On variable is

When a variable is a certain value.  You can use >, <, >= or <= as a prefix.

Has item in toolkit

When a specific item is in a specific toolkit the event will trigger.  


Choice events

Event Description

When chosen

When the choice is chosen

After x seconds

Lets you define a number of sections after which the event will trigger

On variable is

When a variable is a certain value.  You can use >, <, >= or <= as a prefix.

Has item in toolkit

When a specific item is in a specific toolkit the event will trigger.  


Toolkit events

Event Description

On Pick all of item(s)

When all of the selected items are picked

On NOT Pick all of item(s)

When all of the selected items are not picked

On Pick any of item(s)

When any of the selected items are picked

On Pick only the item(s)

When only the selected items are picked

On Pick none of item(s)

When none of the selected items are picked

On variable is..

When a variable is a certain value.  You can use >, <, >= or <= as a prefix.

Has item in toolkit

When a specific item is in a specific toolkit the event will trigger.  


Button component

Event Description

On Press

When the button is pressed

On variable is..

When a variable is a certain value.  You can use >, <, >= or <= as a prefix.

Has item in toolkit

When a specific item is in a specific toolkit the event will trigger.  


Toolkit events

Event Description

On Pick all of item(s)

When all of the selected items are picked

On NOT Pick all of item(s)

When all of the selected items are not picked

On Pick any of item(s)

When any of the selected items are picked

On Pick only the item(s)

When only the selected items are picked

On Pick none of item(s)

When none of the selected items are picked

On variable is..

When a variable is a certain value.  You can use >, <, >= or <= as a prefix.

Has item in toolkit

When a specific item is in a specific toolkit the event will trigger.  


Pick task

Event Description

On Complete

When the task is complete

On Pick all of item(s)

When all of the selected items are picked

On NOT Pick all of item(s)

When all of the selected items are not picked

On Pick any of item(s)

When any of the selected items are picked

On Pick only the item(s)

When only the selected items are picked

On Pick none of item(s)

When none of the selected items are picked

On variable is..

When a variable is a certain value.  You can use >, <, >= or <= as a prefix.

Has item in toolkit

When a specific item is in a specific toolkit the event will trigger.  


Chat task

Event Description

On Complete

When the task is complete

On choose stem

When a chat stem is chosen

Has item in toolkit

When a specific item is in a specific toolkit the event will trigger.  

On variable is..

When a variable is a certain value.  You can use >, <, >= or <= as a prefix.


Form Task

Event Description

On Complete

When the task is complete

On Field Equals

When a selected field is equal to a defined value

On Field Not Equals

When a selected field is not equal to a defined value

Has item in toolkit

When a specific item is in a specific toolkit the event will trigger.  

On variable is..

When a variable is a certain value.  You can use >, <, >= or <= as a prefix.


Quiz Task

Event Description

On Complete

When the task is complete

On Score =

When the quiz score is equal to a defined value

On Score <

When the quiz score is less than a defined value

On Score >

When the quiz score is greater than a defined value

On Score <=

When the quiz score is less than or equal to a defined value

On Score >=

When the quiz score is greater than or equal to a defined value

Has item in toolkit

When a specific item is in a specific toolkit the event will trigger.  

On variable is..

When a variable is a certain value.  You can use >, <, >= or <= as a prefix.


Football Match Task

Event Description

On Complete

When the task is complete

On Result

When the result is a defined outcome (win, lose or draw)

Has item in toolkit

When a specific item is in a specific toolkit the event will trigger.  

On variable is..

When a variable is a certain value.  You can use >, <, >= or <= as a prefix.


Hotspot Task

Event Description

On Complete

When the task is complete

On Hotspot

When a hotspot is chosen

Has item in toolkit

When a specific item is in a specific toolkit the event will trigger.  

On variable is..

When a variable is a certain value.  You can use >, <, >= or <= as a prefix.


VR task

Event Description

On select object

When a object is chosen in the VR scene

Has item in toolkit

When a specific item is in a specific toolkit the event will trigger.  

On variable is..

When a variable is a certain value.  You can use >, <, >= or <= as a prefix.



The actions

The following actions can be selected depending on the context.

Action Description

Go to step

Go to a chosen step

Add item to toolkit

Add selected items to a selected toolkit

Remove item from toolkit

Remove selected items from a selected toolkit

Add To Score

Add to the score

Add To Score Category

Add to a selected score category

Show Feedback

Show feedback for a task.  Choose the type, title and message.

Show Alert

Show an alert (a message that pops up for the player).  Choose the type, title and message.

Set Variable

Set a variable.  You can use += (add to current value), -=(subtract from current value), ++ (increment)  or -- (decrement) as a prefix.

Play Sound

Play a sound selected from your media library

Stop Sounds

Stop sounds playing

End Activity

End the current activity (e.g. pick task)

Hide Choice

Hide a choice

Hide Breakout

Hide a breakout

Complete Breakout

Complete a breakout

Start Countdown

Start a new countdown.  Set the timer (in seconds), name and description (the text shown to the player)

End Countdown

End any active countdown

Show toolkit

Show a selected toolkit

Restart

Restart the scenario

End Scenario

End the scenario

Launch a breakout

Launch a selected breakout

Set BG image

Set the background image

Set Countdown Time

Set the countdown timer

Set SCORM variable

Set a SCORM variable

Set Toolkit Item Value

Set the value of a toolkit item

Add selected items to toolkit

For pick tasks.  Add selecteditems to a selected toolkit.

Set Root Stem

For chat tasks.  Set the root stem to a selected stem.

Reset Root Stem

For chat tasks.  Reset the root stem.

Set Variable to Form Field

For form tasks.  Set a variable to a form field value.

Set VR BG image

For VR component.  Set the background image.


Variables

Overview

You can use variables to perform actions based on their values.  You can also toggle choices and components based on their value and you can use them in your component content.  Variables are setup using the Config editor in the scenario settings (edit the scenario to see this). Here you can give a variable a name and an initial value.  You can then use it in your scenario.

 

For example, you could have a variable called lives with an initial value of 3.  If a player makes a certain choice in your scenario you can trigger an action to reduce the value of lives by 1 (The action would be set var and you would use --).  Then when lives is 0 you could trigger an action to go to a game over screen.  You could also show how many lives are left by using the {var.lives} syntax in component content.

 

Using variables in component content

You can use curly braces to display a variable like to {var.variable} where "variable" is the name of the variable as defined in the scenario configuration.

 

Score categories

Score categories are a special set of variables that you can use to rank a players score over different sections.  For example you could setup the score categories (from the Config editor for the scenario) to speed, skill, strength and stamina.  You could then add to these values based on the choices taken.  These scores can then be used in the charts component to show a player their score breakdown by category.



Style editor

Overview

The style editor is used to make your scenarios look the way you want them to.  If you have branding guidelines to adhere to this is the place to apply them. The editor is broken down into sections that have their associated options.  You can set different value based on the screen size using the tabs at the top of each section for either large, medium or small screens. This is useful if, for example, you want a different font size for each screen size.  The sections and their associated options are outlined below.


General

Option Description

Primary Colour

The default / fallback colour for components if no others are selected

Default breakpoint

Breakpoints refer to responsive layouts.  Here you can select at which point your columns should “break” and fill the full width.  You can choose Mobile, Tablet or Desktop.

Border radius

The default border radius for elements.  The border radius refers to round edges on buttons, content containers, images etc. Use the CSS syntax for border radius, e.g. 25px or 10px 10px 20px 30px.

Box shadow

The default box shadow for elements.  The box shadow refers to drop shadow on buttons, content containers, images etc. Use the CSS syntax for Box Shadow , e.g. 5px 10px #888888;


Step Style

Option Description

Background Colour

The background colour for the step

Header Background Colour

The background colour of the step header

Content Background colour

The background colour of the content container

Content Container Width

The content container width(either fluid or contained)

Show Title

Toggle whether to show the step title

Title Align

Select the text alignment of the title

Heading Padding

The padding of the step heading.  Use the CSS syntax for padding, e.g. 25px or 10px 10px 20px 30px

Animation

Optional animation to use when the step is first shown

Animation Delay

Optional delay for the animation

Content Vertical Align

How to align the step content vertically

Step Padding

The padding of the step. Use the CSS syntax for padding, e.g. 25px or 10px 10px 20px 30px

Step Content Padding

The padding of the step content. Use the CSS syntax for padding, e.g. 25px or 10px 10px 20px 30px

Step Content Margin

The margin of the step content. Use the CSS syntax for margin, e.g. 25px or 10px 10px 20px 30px

Content Shadow

The shadow for the step content.  Use the CSS syntax for Box Shadow , e.g. 5px 10px #888888;


Typography

Option Description

Default font colour

The default colour for the text

Default font

The default font to use

Default font size

The default font size

Heading font colour

The colour for the heading text

Heading font

The heading font to use

Heading font size

The heading font size


Buttons

Option Description

Background Colour

The background colour of buttons

Text Colour

The colour of the button text

Background Hover Colour

The background hover colour of buttons

Text Hover Colour

The hover colour of the button text

Font

The font to use for buttons

Hover Animation

Optional animation to use on hover

Box shadow

The shadow for the buttons.  Use the CSS syntax for Box Shadow , e.g. 5px 10px #888888;

Text Shadow

The text shadow for the buttons.  Use the CSS syntax for Text Shadow , e.g. 5px 10px #888888;

Border radius

The default border radius for buttons.  The border radius refers to round edges. Use the CSS syntax for border radius, e.g. 25px or 10px 10px 20px 30px.


Choices

Option Description

Style

Choose how choices are presented to the player.  Either Button, Speech Bubble, Block Button (full width) or New Line (each button on a new line)

Choice Align

If using button or new line, how to align choices, left, right or centre

Background Colour

The background colour of choices

Text Colour

The colour of the choices text

Background Hover Colour

The background hover colour of choices

Text Hover Colour

The hover colour of the choices text

Font

The font to use for buttons

Choice font size

The font size for choices

Box shadow

The shadow for the choices.  Use the CSS syntax for Box Shadow , e.g. 5px 10px #888888;

Text Shadow

The text shadow for the choices.  Use the CSS syntax for Text Shadow , e.g. 5px 10px #888888;

Border radius

The default border radius for choices.  The border radius refers to round edges. Use the CSS syntax for border radius, e.g. 25px or 10px 10px 20px 30px.

Container padding

The padding of the choices container. Use the CSS syntax for padding, e.g. 25px or 10px 10px 20px 30px

Container margin

The margin of the choices container. Use the CSS syntax for margin, e.g. 25px or 10px 10px 20px 30px

Container Divider

Option border between the content and choices. Use the CSS syntax for a border, e.g. 2px solid #333

Choice padding

The padding of the choices. Use the CSS syntax for padding, e.g. 25px or 10px 10px 20px 30px

Choice margin

The margin of the choices. Use the CSS syntax for margin, e.g. 25px or 10px 10px 20px 30px

Animation

Optional animation to use when the choices are first shown

Overlay Background Colour

If using “Overlay Choices” in a video style scenario, the background colour of the overlay


Breakouts

Option Description

Title background

The background colour of the breakout title

Title text

The text colour of the breakout title

Background colour

The background colour of the breakout

Text Colour

The text colour of the breakout

Animation

The animation to use when the breakout is shown


Component Defaults

Option Description

Text animation

The optional animation to use when text components are shown

Image animation

The optional animation to use when image components are shown

Quote animation

The optional animation to use when quote components are shown

Card animation

The optional animation to use when cards are shown.  Cards are used for pick tasks when items are shown

Card border radius

The border radius of cards.   Use the CSS syntax for border radius, e.g. 25px or 10px 10px 20px 30px.

Card image border radius

The border radius of card images.   Use the CSS syntax for border radius, e.g. 25px or 10px 10px 20px 30px.



Previewing

When styling up your content it is useful to see how different steps will look and how it will look on different screen sizes.  You can change the step by using the Pick Step button on the nav bar of the style editor. This will show you a dropdown menu with all the steps as options.  Simply select the one you want to view to preview its content. You can change the screen size by selecting either large screen, medium screen or small screen from the nav bar of the style editor.

 

Creating brands

If you have a pro or enterprise account you can create your own brands.  A brand is a configuration using the style editor that you can save and then apply to other scenarios.  Use the style editor in the same way you would when styling a scenario with the added option of being able to select different scenarios from extra dropdown option in the style editor nav bar.  This lets you pick any scenario and step to see how your brand would look.

 

Toolkits

Overview

Toolkits are collections of data that you can use throughout your scenario.  They could be an inventory of items used on a quest or a squad of football players used for the football match component.  Toolkits are made up of sections and items. Each section can have many items and the items can be of different types. You can define your own item type or stick to the defaults.  Each toolkit has a title, an icon, a visibility flag, a config (the sections and items) and actions. The actions are managed using the action editor and can be used to perform actions based on items being selected.

 

If you toolkit is set to visible the player will be able to access it when playing using a button with the toolkit icon located on the top left of the player.  You can add and remove items dynamically using the action editor throughout the scenario. You can also alter the values of items and check if items are in the toolkit.

 

Item Types

There are currently four global item types -  thing, text thing, team data and football player.  The first two are generic item types that can be used as inventory items and the latter two are used solely for football match components.

 

An item type has a title, description and config.  The config enabled you to define a template (currently used to define whether to show the field labels to the player or not) and a set of fields.  You can create custom items as required. For example you could create a new item type called monster that had the fields name, image, strength, size, power and agility.  These could then be used in a scenario and you could compare the field values in the action editor to perform certain actions. By default, if you call a field “image” it will be used as a thumbnail for the item.

 

Using in activities

Toolkits are used in pick tasks and football matches.



Media Library

Overview

The media library is the place to manage all your media across all your scenarios. Upload it here and you can use it in any scenario or toolkit as required.  You can organise you media by creating custom folders. This is useful if you want to keep all your media for a particular scenario separate.

 

Uploading

Uploading content is simple.  Go to the media library and press the Upload Media button.  Now select an upload folder and drag your files into the upload area.  They will now be uploaded.

Using in scenarios

Wherever you can use media in Yo Scenario you will see the Choose From Media Library button.  Press this to launch the media library and select your file.

 

Breakouts

Overview

Breakouts are standalone steps that launch in a modal window.  You can set the content using the content editor so they are useful for tasks that you want the player to complete but don’t want to take them out of the flow of the scenario.


Global vs step  

There are two ways to use a breakout, either global or step.  A global breakout can be triggered by the action editor from any step.  It can also be set to appear after x number of seconds during the scenario regardless of what step the player is on.  A step scenario is associated with a specific step and will be triggered by that step. It can be set to appear before, after or during the step (after x number of seconds).  See the config editor section for the breakout options.



Previewing

Overview

An important part of scenario building is being able to preview and test your content as you go.  This is simple with Yo Scenario, you just hit the preview option form the scenario overview or the scenario side nav.  When in preview mode you are presented with the scenario as if it was published without using any plays. To enable better testing there is a preview settings menu that you can access via the settings button on the top right when in preview mode.  Press this to activate the preview settings menu from which you can jump to a specific step, set variable values and tinker with toolkit items. This enabled you to mock being in a certain part of the scenario with certain items and variables set to test the various paths.



Publishing

Overview

To get people playing your scenarios you need to publish them.  Publishing a scenario will give you a playable link that can be used from anywhere to play your content.  You can use this URL to embed a scenario into other platforms and systems if required.

 

Options

When publishing you give your content a title, a version and optional configuration (see the config editor section for publish).  This enables you to have multiple playable versions of your scenario at the same time as when you publish it is the current content, config etc that is published.  If you need to make changes you will need to republish your scenario after these changes. This is simple via the Republish button (which overwrite the existing published version) or by publishing a new version.

 

SCORM and HTML

If you have an enterprise account you also have the option to export to SCORM or HTML.  To do this you first need to publish your scenario as standard. You will then have buttons next to your published version to export a SCORM or HTML package.  This is a great option if you wish to use your scenarios in your LMS.

 

Analytics

Overview

Once you have published your scenario you can start collecting analytics.  Each time someone plays your scenario they generate detailed analytics of the route they took, the items they picked in tasks, how long they spend over each choice and their overall score.

 

Stats

The scenario analytics page gives you an overview of how the scenario is performing.  It will show you the total plays, average time spent, average score and average end step.  You will also be shown a breakdown of score categories (if used). Below that will be a table of sessions which equate to each play through the scenario.  Follow the View Journey link to be taken to a page showing the detailed progress the player has made through the scenario. It will show you each choice they made, how long they took to make it, how they interacted with the components and their ultimate destination.