How To Use IFrames And Multimedia To Enhance Your Assessments

How To Use IFrames And Multimedia To Enhance Your Assessments
Summary: Assessments can often underwhelm our learners. We invest a lot of time and energy creating rich, engaging content, only to present a bland final impression of the overall eLearning experience via the final assessment. IFrames, and the use of freely available social media streams, allow us to greatly enhance our assessments and engage the learner in a richer assessment process. In this article, I will show you how to introduce dynamic and interactive media to your assessments and hopefully engage your learners in new and interesting ways to interact with your content.

IFrames: IFraming The Question

We tend to spend the bulk of our time in creating (hopefully) engaging content with varying fonts, graphics, colors, calls to action, multimedia and considerable instructional design investment, before often presenting a bland final assessment which leaves our learners with a less than ideal impression of the amount of effort we put into the rest of the learning material.

Don’t forget that a large number of learners will either skip to the final assessment to try and end the torture of yet another eLearning course, or if this is prevented, skip as fast as possible through the intervening pages.

The scope of assessment variation is reduced to whether to use a Boolean, multiple choice or multiple answer question type.  We might stretch to the odd use of basic text formatting, emphasizing a particular word or phrase, or maybe even using still images. The use of animations, transitions, and engaging multimedia all take considerable time and effort unless we have a large instructional design team well versed in HTML5 and CSS3, or an all-singing and dancing content creation suite, along with the requisite graphic design, animation, video editing etc. skills to hand.

One way to improve the learner experience is to aim to improve engagement in our assessments by addressing the variety and format of the questions and answers we use.

An easy, quick and effective way to address this is to look to the use of embedded streaming media via the use of IFrames.

Wikipedia defines an IFrame as:

an HTML document embedded inside another HTML document on a website. The IFrame HTML element is often used to insert content from another source, such as an advertisement, into a Web page.

A number of social media streaming and other sites currently allow us to freely embed rich and engaging content for inclusion on our web sites, blog sites etc. We can harness this capability to greatly enhance our assessments. All you require is access to the underlying HTML that makes up your assessment questions. As we’ll see, using this content is generally a simple matter of copying and pasting to the appropriate location.

Screenshots from the examples shown are based on the WBT Systems TopClass LMS online content editor.
Any eLearning content creation tool which allows access to the underlying HTML code can be used.

The examples shown below are for demonstration purposes only. Any personal or commercial use of media from external sites must comply with the copyright and usage policies for that site.


Why not embed video from media streaming sites such as YouTube or Vimeo. Other sites such as MetaCafe can also be used.

Many organisations already have a repository of video uploaded to a corporate YouTube or Vimeo account. These videos, or any others (that fall within the appropriate copyright and usage policies) can easily be added to enhance a question.

For example, to embed a YouTube video:

  • Navigate to the video you wish to use.
  • Click on the Share link/icon.

YouTube Share Link

  • Click on Embed.

YouTube Embed

  • Copy the highlighted text
    <iframe> ... </iframe>.
  • Paste at the appropriate location within your HTML question body editor, e.g.

Paste iFrame Snippet

  • Test your generated question output in a browser.

Test YouTube Question

Don’t forget that you could consider using embedded video for assessment question answers as well. This is a good way to ensure that learners watch the video content you intend.

For example, an online course might contain a module with a number of videos relating to important organizational knowledge that you want employees to watch and take note of. By also embedding these videos within the body of answers, and by posing the related question in such a way that it requires the learner to have viewed the videos, there is an increased likelihood that the intended learning will occur.

An example based on the content shown above might look something like the following:

Embedding Media in Question Answers


What about embedding an important presentation in the body of a question (or answer)? SlideShare allows you to do this. Again, you can use your corporate account uploads, or the large volume of publicly available existing presentations (that fall within the appropriate copyright and usage policies).

Embedding a presentation involves similar steps to those used for YouTube.

  • Navigate to the presentation you wish to use.
  • Click on the Share link/icon.
  • Copy the Embed text
    <iframe> ... </iframe>

Embed SlideShare Presentation

  • Paste at the appropriate location within your HTML question body editor.
  • Test your generated question output in a browser.

SlideShare Question Output


Google Maps allows for similar functionality. You could introduce a sense of discovery and adventure using the Google Maps Street View of the interiors of many of the world’s most famous museums, such as the Tate Gallery (London), MoMa (New York) and the Musée d'Orsay (Paris).

  • Open Google Maps.
  • Search for your desired location (the example shown uses MoMa, New York).
  • Enter Street View.
  • When you find an appropriate starting point, click on the settings icon.

Google Maps Settings

  • Choose Share or embed image.
  • Copy the Embed text.
  • Paste at the appropriate location within your HTML question body editor.
  • Test your generated question output in a browser.

Google Maps Question

Learners can walk through the gallery and zoom in to view paintings, and in this example view the placard alongside the painting which lists the painter.

Other Possibilities

These are just some of the many web services that offer the possibility to host rich content using IFrames. Other examples include Flickr, which allows users to embed and display galleries of images via a similar offering employing IFrames.

If an assessment is being built for internal learners only, you might also want to consider the use of some of your existing Intranet pages, e.g. single page Terms and Conditions, HR policies, or any other relevant page of content (single page of moderate length works best).

An IFrame can be used to host any web page that is accessible to the learner, i.e. not outside the organisational firewall.

It is of course also possible to host any freely accessible page on the Internet as well - you will need the fully qualified URL to the appropriate page – be aware that the whole web page, including header, footer, navigational elements etc. will also be displayed.

For all of the examples discussed above it is possible to modify the IFrame dimensions (height and width) to best suit the content to be displayed. In order to allow for the IFrame to re-size to best fit the device it is being viewed on (desktop vs laptop vs mobile), a percentage value will give best results.