Get to know H5Ps to create Interactive Learning that can be collaborated with LMS

What is H5P?

This H5P is a “framework/framework” for free content collaboration and “open source/open source” JavaScript based. H5P actually stands for Paket HTML5 more correctly (HTML 5 Packagesin English), and aims to make it easy for everyone to create, share, and reuse interactive HTML5 content.

You can access many templates on the official website https://h5p.org/ , there are also many samples that can give you a direct understanding of the learning framework. So you can innovate to make interactive learning, according to your learning abilities.

H5P First Release

According to the site Wikipedia, it turns out that H5P was first released on January 25, 2013; 8 years ago it was used by 17,000+ websites. This means that the H5P is already quite popular among students.

In June 2018 the core team announced that H5P would be financially supported by the Mozilla Foundation in the MOSS program

This H5P framework consists of a web-based content editor, websites for sharing content types, plugins for existing content management systems, and file formats for combining HTML5 resources.

The web-based editor by default can add and replace multimedia files and textual content in all types of H5P content types and applications. In addition, content types can provide custom widgets for editors that allow all kinds of editing capabilities and experiences including wysiwyg editing of all content types.

H5P.ORG

H5P.org is a community site where H5P libraries, apps, and content types can be shared. H5P apps and content types work the same way on all H5P compatible websites.

A PLATFORM that can Integrate with H5P

There are currently four platform integrations, one for Drupal, WordPress, Tikiand Moodle. It is also possible for other LMS and CMS to follow.

Platform integration includes generic H5P code as well as implementation of the interfaces and platform-specific code required to integrate H5P with the platform.

H5P has been designed to have a platform-specific code minimum and a code minimum backend. Most of the codes are JavaScript. The goal is to make it easier to integrate H5P with new platforms.

As for the file format, it consists of metadata files in the format JSONa number of library files that provide features and designs for content and content folders where textual content is saved in JSON format and multimedia is stored as files or links to files on external sites

Examples of H5P Projects

On site H5P.org you can see various samples that you can see and use as a reference to create learning models according to your material abilities and subjects.

If you are a lecturer, then you can adapt to the courses you are capable of, so that from the various templates and samples provided, you can create interesting teaching materials for your students.

H5P Templates The ones that are most in demand and feature directly by the H5P org are

1. Interactive VideosYou can Create videos enriched with interaction
2. Course PresentationYou can Create presentations with interactive slides
3. Branching ScenarioYou can Create Branching Scenarios full of question mark dilemmas and self-study

There are many more bro…

• Accordion Create vertically stacked expandable items
• Advent Calendar (beta) Create an advent calendar
• Agamotto Create a sequence of images that gradually change
• Arithmetic Quiz Create time-based arithmetic quizzes
• Audio Recorder Create an audio recording
• Chart Quickly generate bar and pie charts
• Collage Create a collage of multiple images
• Column Column layout for H5P Content
• Crossword Create a crossword puzzle
• Dialog Cards Create text-based turning cards
• Dictation Create a dictation with instant feedback
• Documentation Tool Create a form wizard with text export
• Drag and Drop Create drag and drop tasks with images
• Drag the Words Create text-based drag and drop tasks
• Essay Create essay with instant feedback
• Fill in the Blanks Create a task with missing words in a text
• Find Multiple Hotspots Create many hotspots for users to find
• Find the Hotspot Create image hotspot for users to find
• Find the words Grid word search game
• Flashcards Create stylish and modern flashcards
• Guess the Answer Create an image with a question and answer button
• Iframe Embedder Embed from a url or a set of files
• Image Choice Create a task were the alternatives are images
• Image Hotspots Create an image with multiple info hotspots
• Image Juxtaposition Create interactive images
• Image pairing Drag and drop image matching game
• Image Sequencing Place images in the correct order
• Image Slider Easily create an Image Slider
• Impressive Presentation (ALPHA) Create a slideshow with parallax effects
• Interactive Book Create courses, books or tests
• KewAr Code Create QR codes for different purposes
• Mark the Words Create a task where users highlight words
• Memory Games Create the classic image pairing game
• Multiple Choice Create flexible multiple choice questions
• Personality Quiz Create personality quizzes
• Questionnaire Create a questionnaire to receive feedback
• Quiz (Question Set) Create a sequence of various question types
• Single Choice Set Create questions with one correct answer
• Sort the Paragraphs Create a set of paragraphs to be sorted
• Speak the Words Answer a question using your voice
• Speak the Words Set A series of questions answered by speech
• Summary Create tasks with a list of statements
• Timeline Create a timeline of events with multimedia
• True/False Question Create True/False questions
• Virtual Tour (360) Create interactive 360 ​​environments
• Interactive Videos Create videos enriched with interactions
• Course Presentation Create a presentation with interactive slides
• Branching Scenario Create dilemmas and self-paced learning
• Advanced fill the blanks Fill in the missing words

To see various examples and templates of h5p, you can go get over here

H5P Embedding Content

Turns out H5P when we can Embed also on the website by making learning materials directly through H5P, only that later it can’t be private, aka the learning content will be public and can be accessed by everyone.

With embedding use iframe… then we can embed it on the Website just like you do embed Instagram post, Facebook post, embed twitter post or youtube videos… 🙂

The condition is of course you need to create an account on H5P.org to be able to make interactive learning there.

Note: You need good Internet to run smoothly, because I tried when the internet is bad, the content doesn’t appear/load… yes yes yes….

This is an example

I took the source from Youtube or not. Upload videos on the site, so I connect youtube videos to make them interactive.

There you can also set the size of the content displayed on your website.

For display options advancethe following…

But you can see for yourself, now there are warning that the possible features embed there will be a limitation soon… that means, yes, it’s safer, you can host it on your own server… for example, if you subscribe Website Hosting.

That’s a brief discussion about H5P that can be used to support Distance Learning, and Interactive. So that you can create and design learning that is cool, contemporary and in accordance with the current generation, below the millennials who are difficult to be separated from the Internet…

Hopefully it can be useful, if anyone wants to add… please in the comments column… ty

FNA-RED