Video Choice Board

Here is a demo of a space with a video choice board:
https://app.learnbrite.com/dashboard/spaces/visit/spc781e9efcba0984aa7fcbee

Creating a Video Choice Board

Setting up the space

Place a Mediaboard with the videos pictured and labeled

Add a Transparent plane trigger item

From the “Add content” selection in the Pencil+ menu, find the “Transparent plane trigger” item.

You will use this item to connect to your ChatMapper conversation that contains the video play instructions (see ChatMapper section below).

It can be helpful to rename the Transparent plane trigger to something you can easily identify later, such as “Video Action Trigger”.

Place the Transparent plane in front of the video mediaboard.

Create a mediaboard for each video

Create a mediaboard for each video, and place each one in front of the main video choice board.

Place each board in the same general position. Again, for easy identification later, name the mediaboards something you can recognize, such as “Presentation_video.”

Set the video mediaboards to invisible

In the video mediaboard settings, make sure the “Visible” selection is unchecked, then click save at the bottom.

You will control the invisible/visible state of these videos with the ChatMapper you will create in the next section.

Creating the ChatMapper Conversation

Create a new conversation in your ChatMapper file including the Player and a Narrator.

If you do not have an actor for a Narrator or Camera role, basically a voice that can interact with the player in an off-screen manner, you should add one.

Select “New Actor”

Call the new actor Narrator, or Camera.

This actor will not be represented by a bot in the space.

Create a group for the videos

Create a child node for each of the videos

Create a child node for each of the videos, using the “Menu Text” field to identify the video. Add one additional for a Back choice, allowing players to exit. In this example, an icon is used in the “Menu Text” field for the Back node, showing a left arrow: “[f]<i class="fa fa-arrow-left fa-fw mr-2" aria-hidden="true"></i>&nbsp;Back”

Include a choiceCaption such as “Please choose a video”.

Example:

Constructing the Script

In the Script Editor for each video node, you will add elements to play the video mediaboard selected.

Change the visibility of the video mediaboard

Add an action to the Script Editor to make the video mediaboard visible

“LB.Actions.setObjectVisible({"visible":true, "objectName":"Mediaboard_NAME"});”

Zoom into the video mediaboard

Add an action to zoom into the video mediaboard. Add a 1 second delay to allow the previous action to complete

“LB.Actions.zoomInObject({"objectName":"Mediaboard_NAME", delay:"1"});”

Play the video

Add an action to play the video. Use a 2 second delay to allow the previous actions to complete.

“LB.Actions.setVideoboardControls({video:"Mediaboard_NAME", videoForcePlay:true, delay:"2"});”

Change the visibility of the video mediabord

Add an action to hide the video mediaboard after the video has played. You will need to use the length of the video in seconds. Add a delay equal to the length of the video + 2 seconds, to match the delay on the Play action above.

“LB.Actions.setObjectVisible({"visible":false, "objectName":"Mediaboard_NAME", delay:"xx"});”

Zoom out of the video mediaboard

Add an action to zoom out of the video mediaboard after the video has played. As above, this will be the length of the video in seconds + 2 second, to match the previous action.

“LB.Actions.zoomOutObject({"objectName":"Mediaboard_NAME", delay:"xx"});”

Reset the conversation

Add an action to send the conversation back to the beginning. Use the conversation ID of the video choice conversation, and the node ID that begins the video choice section. Add a delay on this action equal to the length of the video in seconds + 3 seconds, allowing the previous actions to complete.

“LB.Actions.playConversationId({cnvid:"x", nid:"x", getIntoCMMode:true, delay:"xx"});”

Example

All actions together will look like the below:

Save Your ChatMapper File, Add the File to Your Scenario

Activate the ChatMapper Conversation from Your Space

Open your space

Open the settings for the Transparent plane trigger item you created above

In the On Click field, enter an action to call your conversation

“{"action":"playConversationId","cnvid":"x"}”

Click “Save Item”