H5P - Interactive Video Part 2 - Crossroads

 

Click on any image below to view it original size

1) If you are still viewing your interactive video, then choose 'Edit Settings' from the Administration block.

2) If you're in the class, make sure editing is on in the class and click 'Edit' and 'Edit settings' from your H5P object. 

3) Click the 'Add interactions' tab.

4) Click the 'Crossroads' button which looks like this  

The 'Crossroads' interaction is one which allows you to ask a multiple choice question and jump to a specific part of the video using the timecode (e.g 1:40).

This could be a very useful tool, in this case we are using it to skip to various stages of the video content. But if the video content is created by your video team then it's conceivable you could create a 'choose your own adventure' branching type video with a bit of planning.

5) Make sure the 'Display time' is set to 1:40 - 1:50 and check the tickbox to make the video pause while the choice is made.

For the Question text enter the following questions;

'Do you want to continue to the next stage 'Plan', skip to  'Differentiation' or go back and review from 'Title'?'

 

6) Add in the following details to create the first 'choice' (i.e. the first possible answer)

 

FieldText to enter
Choice TextPlan
Go To1:41
If Chosen TextThe video will restart from section 5 - 'Plan'

 



7) Enter the following details to create the next 'choice'.

 

FieldText to enter
Choice TextDifferentiation
Go To3:08
If Chosen TextThe video will restart from section 9 - 'Differentiation'

 

As we require a 3rd choice for this question, click the 'Add Choice' button which will give you another set of 'choice' fields below. 

8) Enter the following details to create the 3rd and final 'choice'.

 

FieldText to enter
Choice TextTitle
Go To0:17
If Chosen TextThe video will restart from section 1 - 'Title'

 

When you've finished, click 'Done' which will take you to a view of what the interaction will look like.

9) You might notice that some of the text of the question is hidden. We need to resize the question box. 

Use the outline of the question box as indicated by the red arrows to resize your question box so that all the text can be seen at one time. 

10) Scroll down and click 'save and display' to see your handiwork. 

11) Play the video through (or skip through if you like) until 1:40 into the video. 

Then check that the question box looks right to you and that it works as expected, i.e. when you click the buttons to answer it takes you to the right part of the video. 

12) If you find that there is a problem with the look or functionality of the interaction then you'll need to edit that interaction. To do this, follow steps 1-3 again to get yourself back to the editing view.

Click the small blue dot which indicates where interaction 2 was set previously. 

13) The question box will appear in the middle of the video. Click on the box anywhere and a small blue and white label will appear above it indicating it's position and size. If you want to change these you can change them by dragging the border as you did before.

But if you want to edit other elements then click on the 'resize' symbol  then a new panel will appear (see below).

Click the 'edit' crayon symbol highlighted above which will take you to the full settings you set up in steps 5 - 9. Check through each setting to make sure they are as required.