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

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

To expoert to SCORM or HTML 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.