Tools & Technologies

DO ONE: Tools & Technologies

In Tools & Technology you will learn more about H5P and LearningApps. In this unit embedding is also introduced which enables you to add interactive content into your digital online material. H5P and LearningApps are tools which can be used to create different types of playful interactive content which can be added to the material with embedding. In this unit you will start with the Analysis phase of ADDIE model by analysing the tools available and thinking on the upcoming exercise and playful interactive material in general.

CONTENT
EXERCISES / TASKS
LEARNING OUTCOMES
TOOLS AND TECHNOLOGIES

Introduction to H5P and LearningApps interactive content creation tools

Introduction to embedding

Reflection about online interactive content creation tools

You will know what H5P and LearningApps are and how they are different.

You will know what can be done with H5P and LearningApps.

You will know how to embed content to a website.

QUICK OVERVIEW OF INTERACTIVE CONTENT CREATION TOOLS

First tool which will be discussed in this unit is H5P. All the different content types which are publicly available and can be made with H5P are accessible on their homepage under Examples and Downloads. The best examples which you should certainly give your attention to are Interactive Video and Course Presentation. Certainly take a closer look at the other examples as well as there are many options for different kinds of activities.

Second tool is called LearningApps and it can be found at LearningApps.org. All the examples and apps made with LearningApps can be found from their homepage under Browse Apps. Teachers and creators have already made a wide variety of ready-to-use interactive content which can be easily embedded to a website or used as a direct link.

There are more tools and programs which could be used in order to create interactive materials. We will not dive into them here but they have been brought out for you to discover. Some of them you can found in the following list: Adobe Animate CC, Adobe Captivate, Lectora, SnapApp, eXeLearning, PowToons.

If you have other great examples do not hesitate to share them in your learning journal or with the community by using the Facebook group.

ONLINE INTERACTIVE CONTENT CREATION TOOLS

Interactive content can be made with many tools. In this unit we will introduce H5P and LearningApps. We will also introduce embedding in general which later can be used to add interactive content to a website.

H5P 

H5P LogoH5P is a community-driven and constantly growing open source project with strong emphasis on sharing, ease of use and accessibility. All the content created with H5P is by default meant to be used in many places by embedding and with the authoring rights to be remixed and modified by others. If the content author wishes not to share work with others then author has the option to remove embedding and downloading option from the interactive content. 

HTML5 logo and wordmarkH5P "translates to" HTML5 Package which represents todays interactive web - the HTML5 standard. HTML5 can be taken as a combination of Hypertext Markup Language (HTML), JavaScript programming language (JS) and Cascading Style Sheet version 3 (CSS3) - simply as a formula HTML5 = HTML + JS + CSS3. Using this standard provides tools for cross-platform compatibility to a wide range of devices used today and solves the problem of content not working across devices, especially mobile devices. HTML5 gives us technology to create interactive digital materials through different tools and platforms like Google Sites, WordPress, Wix and more. All of H5P's content types resize automatically according to the screen so all the main types work on both desktop environments as on mobile devices. This is known as responsive design. Cross-platform compatibilty use to be an issue before as mainly all interactive elements and content was created with Flash technology which is nowadays not supported on mobile devices.

H5P is easy to use and has wide variety of content types (Interactive video, Interactive Presentation, Gallery, Quiz, more) which offer many options to create playful interactive materials. All of them can be integrated into your digital material, modified to your needs and shared with others. Using this content creation tool one can create playful interactive learning materials for learners and immediately let them test their knowledge to confirm that the material is learned by taking quizzes and providing instant feedback.

Take a look at the video introducing the capabilities of H5P and see if there is something for you.

 

(YouTube [Rich Colosi Media]: H5P For Teachers: Creating Interactive Online Content for LMS Platforms).

H5P is free and open-source and it can be integrated with content management systems (CMS) like Drupal and WordPress and even Learning Management Systems (LMS) like Moodle. As H5P is constantly growing then there will be more systems supported. This is important information as content created with H5P produces an .h5p file which can be reused only with H5P content creation module developed for these systems. One can create a content type on one platform and later upload it and modify it in the other. More info about the content types, development and documentation can be found on H5P.org

LearningApps

LearningApps is another great tool created for teachers to build interactive exercises for learners. It is a simple tool which helps to bring your digital material to life through game-like exercises and immediate feedback. Many types which can be created are found on the LearningApps website under Create App (https://learningapps.org/createApp.php). Some examples like The Millionaire Game, Voting, Pinboard and Matching Pairs are some of the many available content types.

As with H5P, LearningApps uses HTML5 in order to create and publish content so no need to worry that your newly created interactive content will not work on a mobile device. LearningApps and H5P also offer fullscreen mode which works well on different devices.

LearningApps has been around longer than H5P and has many exercises which could be used in teaching - just go to their Browse Apps (https://learningapps.org/index.php?overview&s=&category=0&tool=) and start browsing or use Search in Apps search bar. This is a good implementation on LearningApps environment which gives quick access to a great library of ready-to-use content types.

Remixing others work on LearningApps is simple as click on a button - modify their work e.g. translate their exercise to your language and publish. PS! Do not forget to have an account first as Apps are connected to your account.

Why are we introducing H5P and LearningApps?

Interactive content used to be mainly created with Flash technology but as mobile devices became more popular and dropped support for Flash Players for reasons like excessive battery drain and security reasons then usage and market share of Flash has dropped marginally. Flash development will end in late 2020 (https://theblog.adobe.com/adobe-flash-update/) and developers will be moving towards HTML5, WebGL, WebAssembly. More info and history about how the web has evolved can be found on the graph of web technologies history until 2012 here (http://www.evolutionoftheweb.com) plus more info about HTML itself here (https://www.w3.org/TR/html51/introduction.html#introduction-history)

Embedding

Embedded content is seen everywhere in today’s web. For example YouTube videos on blogs or advertisements on local newspaper sites. In our topic we are interested in how to take what we have created from other sites and how to add them to our digital materials which could be a blog, learning journal or a simple HTML page.

To embed you have to use the embed code which starts with <iframe> HTML tag. Websites who offer embedding usually have a place where they offer the code you can simply copy and paste to your website. Let's take a look at some examples.

Embed code's most important attribute is src. This tells where the content comes from and opens that exact page in an inline frame (iframe). The other attributes like width, height, allowfullscreen and so on, are to specify and allow certain properties. Usually all the necessary attributes are already added to the embed code. Simply said - embedding content from other sites is like borrowing and displaying it on your own site. But what to do next? How can we add content from one site to our page?

In order to add iframe to your webpage successfully you may need to follow instructions of your website or content management system. Usually you need to get access to the HTML view of your webpage which is usually marked as HTML or <> in web-based text editors (also known as WYSIWYG [What You See Is What You Get] editor) or Text in WordPress. Also there may be plugins or filters to add iframes to your site and these are usually very site specific. Try to find documentation about your site if you are unable to locate the right place. Adding iframe pasted code directly to text usually does not work as special characters like < and > will be filtered and changed. E.g. for YouTube links usually just pasting in the URL works, but yet again it depends on the website you use.

After finding the right place where to add the code it is time to proceed with coping and pasting. While adding the embed code be sure to not break any other HTML tag and pay attention where the code will be added. If you notice any problems after publishing then be sure to check for any errors from HTML view for HTML tags which have not been closed properly.

Sometimes you may encounter that embedding will not work as you are not allowed to embedded content from certain sites (X-Frame-Options restriction) or you have mismatch of transfer protocols (look in the beginning of the link for HTTPS, e.g if you site has HTTPS in the beginning then you cannot embed content from sites with start with HTTP - this is a security measure).  If this happens and you are left with an empty box, then first try to check if there is any problem with the url, then check if the iframe has been added correctly by looking at the HTML view and finally if these seem alright then check by right clicking on that iframe and selecting Inspect from opened context menu and see if you see any errors on Console tab of browsers' Developer tools. In Console tab there may be an error message which could give you more information about the problem. This all gets too technical really quickly but usually this also means you are not able to embed content from this kind of site.

EMBEDDED EXAMPLES

Following are two examples of embedded content from LearningApps (left) and H5P (right). Both types can be added to sites which allow embedding and which do not strip out some parts of HTML. If you happen to have issues after adding the embed code for example it showing only the full code then it is wise to check that if the code is still the same as you copied before. Some systems switch out certain characters which may be one cause of iframe and embedding not working.

Example of LearningApps' Matching Pairs

Example of H5P's Course Presentation

REFLECT AND ANALYZE

Use the table below to help yourself to reflect on the subject of interactive content creation tools. The information provided is focused on H5P and LearningApps but you are most welcome to address some other tool which you have found. We are eager to see what you can make later in the upcoming topic. While reflecting do not forget to analyse the difference of H5P and LearningApps - both have their pros and cons. Use the links provided and look at the documentation which gives you an overview of how different content types work.

REFLECTION POINTS / LEARNING JOURNAL PROMPTS
RESOURCES LINKS
OUTCOMES

Reflect about information and examples in both sites.

  • Analyse the complexity of documentation and extra options of both sites
  • Try to make a SWOT analysis about H5P and LearningApps

Knows how to navigate on H5P.org and is able to find relevant information and documentation.

Knows how to navigate on LearningApps.org and is able to find relevant information and documentation.

Knows the pros and cons of both sites by analyzing the content and website structure by providing a comparison.

Analyse content types from both sites and choose which types you would like to use in your teaching.

  • Find common exercises and describe their differences
  • Find the exercises you would like to use and write them down.

Knows different content types offered on H5P and LearningApps sites and is able to name at least two content types from both sites.

Knows how to select relevant content type for creating playful interactive content.

Choose some examples and analyse if you can use them without any modifications or what modifications would you like to do.

  • Learn to use available exercises as templates and collect them together for later use.

Gets familiar with existing examples and is able to analyze if some can be used in teaching.