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:
- Labels
- Links
- Images
- Single Choice-Questions
- Multiple Choice Questions
- True/False Questions
- Fill in the Blanks
- Drag-and-Drop
- Mark the Words
- Drag Text
- Crossroads
Adding a H5P video for self-assessment
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.
- Now add the video to the content bank: Click Add at the top right and search for 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.
- Switch to Step 2 - Add interactions in 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.
- 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.
- To embed a previously created H5P video in a TC course, add a label first: Turn editing on > Add an activity or resource > Label.
- Click the H5P button in the text editor.
- Select Browse repositories > Content bank and then select the H5P video.
- Select Create an alias/shortcut to the file; this way, any subsequent changes to the file in the content bank are also applied to the embedded file.
- If necessary, change author and licence and click Select this file, then Insert H5P. You will now see a placeholder for the H5P activity in the label.
- If desired, add additional text to the label. You can also change further settings for the label, e. g. access restrictions/visibility.
- Click Save and return to course. The video is now embedded in the course.
Adding a H5P video with grading
This option must be selected if the H5P activity is to be assessed and if you want to view the students' detailed results and scores.
See above in "Creating a video in the content bank".
- 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.
- If you want to embed the video in the course (see section 2.3), tick Embed button in the section H5P options.
- Change further settings, e. g. the maximum grade and the grade to pass, which you can find in the section Grade.
- Click Save and display.
- Click Embed below the video.
- 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.
- 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.
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.
- 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.
- Write a title and a question into the corresponding text fields.
- 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.
- If desired, check Enable “Retry” Button under Behavioural Settings. This allows students to repeat the question several times.
- Scroll to the end of the editor and click Done.
In this interaction, students should select the correct statement from several, similar to a single choice question.
- After the video is uploaded in step 1, select the Statements icon in Step 2 - Add interactions.
- It is best to tick the Pause video so that it stops at the start time of the interaction. Select Display as > Poster.
- Write a name and a clear task description in the appropriate text fields.
- Add multiple statements. Remember that the first statement is always the correct one.
- Click on the dark gray Add statement field to add a single additional statement.
- To add a new set of statements, click on the blue ADD STATEMENTS button.
- Scroll to the end of the editor and click Done.
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.
- 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.
- 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.
- To place the drop zones, click on the concentric circle icon. Place as many drop zones as necessary.
- Write the names of the zones into the text box (not visible to students later) and click Done.
- Click on the drop zone inserted in the video to adjust the size and position. By double-clicking, you can edit the interaction again.
- Now click on the text icon to add 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.
- You can also edit and adjust this later in the preview window.
- 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.
- Scroll to the end of the editor and click Done.
View students' answers
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.
- In the overview, you can see the percentages the students received.
- Click View user attempts to see an overview of each attempt.
- Click View report to view the answers in detail.
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
Licensed under a Creative Commons Attribution CC BY 4.0 International
TU Graz Educational Technology