Week 12: Interactive Media (Winter 2025 Webster)

 

Overview

Interactive media was once something that required a web developer or programmer to build in partnership with an instructor. Today there are several web services that make the development and use of interactive media relatively simple. The weight has now shifted to designing the interaction, not programming a widget so, as an instructor, your effort is devoted to where your expertise is.

What makes media interactive? Good design for online learning involves sequencing steps of content consumption (with or without integrated interactivity) and activity. So you might have students read an article, and then comment in a discussion thread or answer questions in a quiz. Does this make the article interactive? That’s a good question, and perhaps it’s all a matter of degree. For the purposes of this week, we are looking at our ability to allow the learner to interact directly with the media.

Learning Outcomes

When you have completed this week, you should be able to:

  • Apply research and established practice to the selection and configuration of interactive media.
  • Develop interactive media.

Topic 1: Text

You’ve been using interactive text for years: Each time you click on linked text you interact with text that has been designed to offer a jump to another web page (or a spot within a web page). Hyperlinks and the title text associated with these links are options for interactive text that any instructor can use.

The difference between typical links within a web page and effective use of links and title text for learning is design. As an educator you need to think through what links will support learning, where they should be placed, and how they should be seen by learners. Consistency is important. A standardized structure by which certain words are linked to definitions or further resources will have more benefit than multiple links of varying impact placed out of context. In this course, links and accompanying title text have been used for unfamiliar terms in an effort to support learning. Hovering over a term causes a short description to display. Clicking the term leads to a new window with a definition or further resources on the term. See the phrase “title text” above.

There are a few shortcomings of using title text in a link. It is not experienced the same way by learners using accessibility software. Screen readers are likely to read out the title text before reading the word or phrase being linked. Reader plugins for common web browsers are likely to ignore the title field. Learners accessing with mobile devices that use a touch screen are unlikely to be able to hover over your link to read the text, though some newer “3D” touch screens support a hover as opposed to a tap.

Typically you should limit the number of characters in your title text to around 100 to 140. If you use too many characters, some browsers may not display them all. You can add title text by using the Text tab on your WordPress post/page editor, but many systems will also let you add it in the regular editor. “Title” is one of the settings in many editors when you set up a hyperlink. Here is an example of a link with title text as you would enter it using the Text tab in WordPress:

Interactive media tools, like <a href=”https://h5p.org/” title=”H5P is an online tool that lets educators create interactive media”>H5P</a> offer instructors the ability to mix student activity within media.

This results in a sentence that has H5P linked, and when a user hovers over that link the text “H5P is an online tool that lets educators create interactive media” appears. For example:

Interactive media tools, like H5P offer instructors the ability to mix student activity within media.

The URL of the page you are linking to is contained within double quotes in the href element, while the text to be displayed when a user hovers over the link is contained within double quotes in the title element.

Activity 1: Readings

The readings for this week, Kwok et al. on interactive media in K–12 and Shelton et al. on interactive media for post-secondary education, report on research asserting that integrating student interaction into media makes it more effective for learning. Each of the readings present an example of the effective use of interactive media.

Read Children Can Learn New Facts Equally Well From Interactive Media Versus Face to Face Instruction (Kwok, Ghrear, Li, Haddock, Coleman, & Birch, 2016) and Exploring the Use of Interactive Digital Storytelling Video (Shelton, Warren, & Archambault, 2016).

After reading these articles, write a short blog post with your reaction to them, and answer the following questions.

  1. In the educational context where you teach or support learning, what outcomes and associated content could be supported by interactive media?
  2. What challenges would you or your institution face in developing interactive media and integrating it into your courses?

Review the posts from other students and comment as you see fit. Offer suggestions on resolving the challenges from question 2 if you have any possible solutions.

 

Activity 2: Create Interactive Text

In this activity you will take some simple text you would use online to support learning and make it interactive by adding title text to provide an explanation of a term and a link to further reading or a resource.

Take some text you have already produced for learning, or generate some from scratch, and add it to a portfolio post. Within the text you need to have at least one term that is key to student learning. Add title text that describes or explains the term and a link to a further resource.

Below this example of interactive text write a short paragraph explaining where this example (and others like it) might fit within your teaching and the learning experience of your students.

Topic 2: Interactive Graphics

You’ve created educational graphics earlier in this course and integrated them into an online lesson. These graphics can have a new dimension of effectiveness if they provide interactions to support student learning. Just as you did with text, images can be linked and have title text added to provide information to students, but there are other interactions you can add to images. In the past interactive graphics were created with specialized web design tools, but in this topic we will start using an interactive media tool called H5P.

H5P is a community developed, open source platform that lets you create a variety of interactive resources. It is designed to be integrated within a learning management system like Moodle or a content management system like WordPress. We will use it to create interactive media that previously would have required advanced web design skills. H5P is integrated in your WordPress portfolio site. To enable it you will need to go to your portfolio dashboard and select ‘Plugins’ in the left-side navigation. From there select ‘Activate’ under the H5P plugin. You will now have an ‘H5P Content’ area in your left-side navigation.

H5P has tutorials that support each media type that can be produced. You should realize that since this tool is integrated in a variety of different platforms, the layout displayed in tutorials may not always match your platform, but the steps and terminology will be accurate.

On the H5P site you will find several types of media tools, but we will concentrate on a few that make interactive graphics.

To learn more about each H5P object type visit the Tutorials for Authors page. (If the link provided does not work, select Documentation in the main navigation menu at the top of the page and then “Tutorials for Authors” under the Content Author Guide heading.)

Read and/or view the Image Hotspots Tutorial and Find the Hotspot Tutorial (H5P, 2016).

Activity 3: Create an Interactive Graphic

In this activity, you will add interaction to an existing or new educational graphic and integrate it within a short one-page activity or lesson.

  1. Take an educational graphic you have created, create a new one, or download a graphic with an appropriate shareable license.
  2. Write a learning outcome that your graphic can support.
  3. Choose one of the two image hotspots tutorials (above) and create an interactive version of the graphic.
  4. Once you have created your interactive graphic, use the embed code offered by H5P to embed it in a portfolio post.
  5. Ensure your interactive image is integrated with enough supporting text or structure for learners to make sense of the activity.
  6. Once you have completed your post, visit and try out the interactive graphics from other students.
  7. Comment on the interactive graphics. How well did they support learning? Do they give you ideas for further examples?

Topic 3: Interactive Video

Video is a very popular media format for supporting learning but it can be the most passive format as well. More than text, audio, or graphics, video can let users zone-out. One way of combatting this is to keep video clips short, and precede them with questions to keep in mind during viewing.

There have been two varieties of interactive video developed recently: videos that insert questions at specific timestamps, and those that reveal discussion threads associated with specific timestamps. There have been several tools developed that will do the former, and one persistent tool that will do the latter. In this unit we will concentrate on H5P for questions integrated within video, and VideoAnt for discussion integrated within video.

H5P and VideoAnt will work with videos you have created as long as they are hosted on a web server as an MP4 file or if you have hosted them on YouTube. You can also apply the interactions available from these tools to existing videos on YouTube produced by others. This does not create a copy of these videos, so you don’t need to worry about copyright. You should, however, be reasonably sure that the video is going to stay on the service for a while. If you create annotations on a video hosted on YouTube and the video’s creator deletes it, you won’t have a working media piece anymore.

The two platforms we explore in this topic both offer embed code or links to the interactive videos you create. You can use embed code on your TRU WordPress portfolio because your admin role allows you to enter many types of embed code into a post or page. In other platforms (depending on your role) you may be limited in what you can embed or how you can embed it. It is always a good idea to check what your permissions are in a platform before embarking on a major project. In some instances you may be able to get additional site permissions in order to embed media like this, or your institutional IT team may be able to add the appropriate embed code to your course site for you.

When to Use Interactive Video

The range of ways to make video and other media interactive with a tool like H5P or VideoANT invites the question: When is it worthwhile to integrate interactive components within media?

In considering your best interaction strategy, you will need to consider if you are limited in some aspects of interaction. You may be able to pose questions to learners, but you might not be able to record these answers for later review. You may be able to embed discussion within your video, but you may not be able to integrate this discussion within your learning management system. This may affect how the interaction is approached by some learners.

In considering these options, you should remember that when developing interaction for online media, you should plan for students to use your media online without your intervention. This could be in your classroom at a computer station or in a computer lab, or it could be at home as part of an online or blended course.

An initial approach to guide interaction in your media is to ask: What would I add to the student’s use of the media if I was watching over his or her shoulder, ready to answer questions and extend learning?

This means recognizing opportunities to make learning deeper and places where learners need to keep going uninterrupted in order to make sense of the whole piece. A general approach to developing interaction in video is to add interaction at points where you might make a comment or add a question if you were in the room, and avoid interactions where you want learners to keep on a thread that is building towards something.

Here are some ways to use interactive video:

  • Force learners to “click to continue” to ensure focus is on the video.
  • Ask questions (multiple-choice or short-answer) that assess comprehension of previous video section.
  • Engage students in an asynchronous discussion at a key point in a video.
  • Ask questions for learners to keep in mind as they view a video segment (whether they are to be formally answered or not).
  • Ask learners to re-view a segment of a video with a specific objective.
  • Direct learners to another tool for reflection, questions, or discussion.

Developments to avoid in interactive video:

  • Interrupting video segments inhibits learning.
  • Asking questions at too high or low a level does not provoke further learning. They may be beyond the current level of the learners.
  • Integrating an asynchronous discussion with ineffective questions, or around a topic without the depth to support discussion.
  • Starting a learner discussion at the end of a video when it could just as easily be held within the learning management system.
  • Asking questions that do not relate to the current segment. (Possibly distracting learners.)
  • Asking for detailed short answers when a multiple-choice question would support learning.
  • Asking for a detailed response that learners will want to keep, but posing the question in a platform that does not preserve answers.

You’ve already tried H5P earlier this week, so now check-out the Interactive Video Tutorial (H5P, 2018).

VideoAnt is a service developed and provided by the College of Education and Human Development at the University of Minnesota. It allows you to annotate your video so your comments can appear at specific points. You can also use these comments as discussion thread starters so your video is interspersed with opportunities to engage in a discussion.

The three videos below will give you the information you need to get started with VideoAnt, while the documentation page provides a text version. There is reference to being able to set up an account with an email address, but it appears that currently non-UofM users must log-in via Google or Facebook.

Activity 4: Create Interactive Video

In this activity you will create an interactive video from an existing video on YouTube. The video can be one created by you or one put up by another user.

For your interactive video

  1. Create a learning outcome that could be supported by an interactive video.
  2. Find a suitable video on YouTube to generate an interactive version for learning.
  3. Use H5P or VideoAnt to create either an interactive video with embedded questions or with embedded discussion.
  4. On a blog post add your learning outcome and then embed your video and integrate it within instructions and text so that it effectively supports your learning outcome.

References and Resources

Required Readings and Resources

CEHD Digital Education and Innovation. (2017, March 2). VideoAnt: Getting started [Video]. YouTube.
https://youtu.be/1SOE2aQky2I

CEHD Digital Education and Innovation. (2017, March 8). VideoAnt: Sharing and permissions [Video]. YouTube.
https://youtu.be/6F33Sjy-A8Y

CEHD Digital Education and Innovation. (2016, December 21). VideoAnt web-based annotation tool [Video]. YouTube.
https://youtu.be/pH9TTFsPaCw

College of Education and Human Development. (n.d.). About VideoAnt. University of Minnesota.
https://ant.umn.edu/documentation

College of Education and Human Development. (n.d.). VideoAnt [Web application]. University of Minnesota.
https://ant.umn.edu/

H5P. (n.d.).
https://h5p.org/

H5P. (2016). Find the hotspot tutorial.
https://h5p.org/documentation/content-author-guide/tutorials-for-authors/find-the-hotspot

H5P. (2016). Image hotspots tutorial.
https://h5p.org/tutorial-image-hotspots

H5P. (2018). Interactive video tutorial.
https://h5p.org/tutorial-interactive-video

Kwok, K., Ghrear, S., Li, V., Haddock, T., Coleman, P., & Birch, S. J. (2016, October 25). Children can learn new facts equally well from interactive media versus face to face instruction. Frontiers in Psychology, 7.
https://www.frontiersin.org/articles/10.3389/fpsyg.2016.01603/full

Shelton, C., Warren, A., & Archambault, L.M. (2016). Exploring the use of interactive digital storytelling video: Promoting student engagement and learning in a university hybrid course. TechTrends, 60(5), 465-474.
https://ezproxy.tru.ca/login?url=https://search.ebscohost.com/login.aspx?direct=true&db=a9h&AN=117420345&site=ehost-live

Optional Readings and Resources

EdLab, Teachers College, Columbia University. (n.d.). Vialogues: Experience dynamic video discussions.
https://vialogues.com/

EDPuzzle. (n.d.). EDPuzzle: Make any video your lesson.
https://edpuzzle.com/

PlayPosit. (n.d.).
https://www.playposit.com/

TedEd. (n.d.).
http://ed.ted.com/

Thinglink. (n.d.).
https://www.thinglink.com/


top
Share via
Facebook
Twitter
LinkedIn
Mix
Email
Print
Copy Link
Powered by Social Snap
Copy link
CopyCopied
Powered by Social Snap