Creating interactive videos in the TeachCenter using H5P
H5P is a web-based open source tool for creating interactive learning content that you can add to your TeachCenter course (TC course) as an H5P activity. One interactive learning content in particular is the H5P Interactive Video, where you can add various interactions to a video. Some possibilities for interactive content in a video are for example:
As of Moodle 3.9, all H5P videos are created in the so-called Content bank.
The option described in this section is the fastest and easiest way to create an H5P video. However, this option does not allow you to see students' scores or results; the video can only be used for self-assessment. Instructions for H5P videos where you can also see the students‘ scores can be found below.
In your TeachCenter course, click on Content bank in the menu on the left.
Fig. 1: Content bank in the menu
Now add the video to the content bank: Click Add at the top right and search for Interactive Video.
Fig. 2: Add an interactive video
Add a Title for the video.
In the section Add a video, click on the +-Symbol to add a video file. Please do not upload MP4 files directly to the TeachCenter; instead, only use web links, e.g. to YouTube videos. To use a TUbe video with H5P, please contact the TUbe team for a static link.
Fig. 3: Add a video
Switch to Step 2 - Add interactionsin order to add interactive questions or tasks (for detailed instructions, see section 2).
In Step 3 - Summary task, you can add a final task for self-checking of the learning goals, which will be displayed at the end of the video.
Save the interactive video by clicking on Save above or below the video.
Fig. 4: Save the video
You will see a preview; click Close. You can find and edit the video anytime in the content bank.
To make the video available to the students in your TeachCenter course, you need to embed it in a label.
Add a new blue H5P activity to the course: Turn editing on > Add an activity or resource > H5P.
Name the activity.
In the section Package file, click on the file icon. Select the interactive video from the content bank. Leave Create an alias/shortcut to the file as it is - otherwise, any subsequent changes to the video in the content bank will not be automatically applied to the activity.
Fig. 10: Choose a package file
Fig. 11: Content bank in the file picker
If you want to embed the video in the course (see section 2.3), tick Embed button in the section H5P options.
Fig. 12: H5P options
Change further settings, e. g. the maximum grade and the grade to pass, which you can find in the section Grade.
A window opens with a code fragment for embedding. Select the desired video size or dynamic format and copy the corresponding code to the clipboard.
Fig. 14: Code fragment for embedding
Add a label: Turn editing on > Add an activity or resource > Label.
Switch to HTML mode by clicking </> in the menu bar.
Paste the code you copied earlier.
Close the HTML mode by clicking </> again. Click Save and return to course.
To make students only see the embedded video but not the blue H5P activity, go to the blue H5P activity settings > Common module settings and select Make available but not shown on course page.
Fig. 15: Availability of the H5P activity
Detailed instructions on how to add interactive questions
Navigate to the video in the content bank and click Edit.
In step 2, stop the video at the point where you would like to include a question or an activity. The exact start time can also be adjusted when editing the interaction.
In Step 2, select the Multiple Choice icon in the tool bar.
Fig. 16: Tool bar
It is best to tick the option Pause video so that it stops at the start time of the interaction. Select Display as > Poster so that the activity is not overlooked by students.
Fig. 17: Interaction settings
Write a title and a question into the corresponding text fields.
Fig. 18: Creating a multiple choice question
Enter the available answers (options) in the text boxes and check Correct if it is a correct answer - there may be multiple correct answers. To enter additional answer options, click ADD OPTION.
Fig. 19: Adding answer options
If desired, check Enable “Retry” Button under Behavioural Settings. This allows students to repeat the question several times.
The Drag and Drop content type allows learners to move a text or image to one or more corresponding drop zones. To do this, you first need to add the background, the drop zones and the answers, and only in the last step you need to state which answers belong to which drop zone.
Choose the Drag and Drop icon from the toolbar.
Fig. 23: Tool bar
It is best to tick Pause video so that it stops at the start time of the interaction. Select Display as > Poster so that the activity is not overlooked by students.
Write a name into the text field. The name will also be displayed later. This is where you can explain the task, for example.
Select the tab Step 1 - Settings in the upper left half of the editor.
Fig. 24: Step 1 - Settings
Upload a background image by clicking + Add. If you want to edit the image (crop, rotate etc.), click Edit image.
Under Task size, specify (in pixels) how large the background image should be.
Select the tab Step 2 - Task in the upper right half of the editor.
Fig. 25: Step 2 - Task
To place the drop zones, click on the concentric circle icon. Place as many drop zones as necessary.
Fig. 26: Button to create drop zones
Write the names of the zones into the text box (not visible to students later) and click Done.
Fig. 27: Creating a drop zone
Click on the drop zone inserted in the video to adjust the size and position. By double-clicking, you can edit the interaction again.
Fig. 28: Editing a drop zone
Now click on the text icon to add answer options.
Fig. 29: Button for creating answer options
Write a text (this is how the element will appear to the students) in the corresponding text field and select the drop zones where the element can be dragged - even the wrong ones.
Fig. 30: Creating an answer option
You can also edit and adjust this later in the preview window.
Fig. 31: Preview of an answer option
To define which drop zone is the correct one for certain answers, double-click on the drop zone. Select the correct answer, check This drop zone can only contain one element (if applicable) and Enable Auto-Align. Click Done.
Please note: Students‘ results can only be viewed if the file from the content bank has been uploaded to an H5P acitivity as a package file, and not if the file was embedded from the content bank directly into a label.
Please note: To save and submit the the answers for grading, students must click the small star at the end of the timeline and click Submit Answers. Make sure that the students are informed about this.
Students‘ grades can be accessed directly via the blue H5P activity. Click on the activity, then click View All Attempts in the upper right corner. Filter by student name if necessary.
Fig. 34: Viewing attempts
In the overview, you can see the percentages the students received.
Click View user attempts to see an overview of each attempt.
Each H5P activity for which points are awarded also appears in the grade overview (in the main menu on the left: Grades) as its own graded activity - similar to quizzes and assignments.
Help & Contact
For questions on TeachCenter / TeachCenter Exam: tc@tugraz.at
TU Graz Educational Technology