Use the Layout content type in H5P

The Accordion content type allows you to present content in a nested format. You can use the Accordion to chunk text into collapsible panels, which are organised with headers. Students can click on the headers to expand and collapse the panels, controlling what content is visible on the screen without having to scroll.

When to use it

Accordions are a particularly useful tool for formatting text when there is limited vertical space. They also provide a way to order and structure content, allowing students to select the information they what to display at any one time.

How to use it

Go to the Accordion H5P tutorial.

Example

This feature allows you to present multiple images in a custom layout.

When to use it

A collage is useful when you want to neatly organise a collection of images into one composition. This can be used as a way to present a preview or summary of a topic or process from a lesson.

How to use

1. Select ‘Collage’ content type.
2. Choose a layout format.
3. Upload images from your computer into each section of the collage.
   Note: the image you upload to each section will be cropped according to the size of the area. You can change this by dragging the image or zooming in/out.
4. Optional: change the spacing/height sliders.
5. Click Save and Insert to add to your page.

This feature allows you to organise and combine multiple H5P content types, including Multiple Choice, Drag and Drop, Fill in the Blanks, and True/False, into a column layout, presenting multiple content types simultaneously.

When to use it

The Column is useful for grouping different H5P content types into a sequence of related learning activities that address similar material to create a consistent learning experience. You can combine and order almost all of the existing H5P content types.

How to use it

Go to the H5P Column tutorial.

Using Columns with other content types

The Column is used to aggregate other H5P content types.

The Course Presentation content type allows you to create a slide-based presentation of your learning material. Elements such as slide titles, text, links, pictures, audio and video clips, and various quiz types, can be embedded into the presentation for a richer learning experience. Students can navigate the presentation either by moving one slide at a time, jumping to a specific slide, or by accessing slides that contain a new topic.

Within Course Presentations, students can be given new, interactive learning material, and also have their knowledge and skills tested.

When to use it

A typical Course Presentation activity would begin with a few slides to introduce a topic and follow these with integrated activities which test students’ understanding and knowledge.

Course Presentations can incorporate formative self-assessments in the form of short quizzes presented throughout to reinforce learning. Performance feedback can also be included by presenting the overall progress for each one of the formative assessments. This summary helps students to reflect on what topics they have mastered and what areas they still need to improve to make more progress.

Course Presentations may also be used, for example, as a presentation tool for use in the classroom.

How to use it

Go to H5P Course Presentation tutorial.

Example

The Dialog Cards content type allows you to create ‘cards’ with a prompt, question or problem on one side, and a corresponding answer or solution on the other. You can insert a combination of text, sounds and images. Students click the cards to flip them and reveal the extra content.

When to use it

Dialog Cards can be used as a drill to help learners memorise, for example, concepts, words, or facts. You can also use Dialog Cards to give students a chance to self-test and get a sense of their progress.

Although Dialog Cards are often used in language learning, they can also be used to present maths problems or help learners remember facts such as historical events, formulas or names. Used creatively, they can be used to guide group activities or used for discussion prompts with expert summaries on their reverse sides.

How to use it

Go to the HP5 Dialog Cards tutorial.

Using Dialogue Cards with other content types

Dialog Cards is a stand-alone content type; it cannot be incorporated into others.

Example

The Image Hotspots content type allows you to present students with an image and enrich it with points of interest and/or in-depth information about the details depicted. When a student clicks on a hotspot, a pop-up containing a header, and text or video is displayed.

When to use it

Image Hotspots can be used to provide students with specific details regarding, for example, diagrams, maps, paintings, and schematics. They can direct students towards key content or areas of significance within images and provide a way of scaffolding and layering content presentation.

How to use it

Go to the H5P Image Hotspots tutorial.

Using Image Hotspots with other content type

Image Hotspots is a stand-alone content type; it cannot be incorporated into others.

Example

Add multiple images into a single content area so the user can click to slide between them.

When to use it

This is a useful tool when you have multiple images that you want to present to students without taking up large amounts of page space. Students can view the images at their own pace and view them in full-screen mode if they wish.

How to use it

1. Select the ‘Image Slider’ content type.
2. Add a title for the content type.
3. Add your images. For each image you want to add:
   1. Include a title;
   2. Add alt text for accessibility; and
   3. Optional: add hover text so students can view text if they move their cursor over the image.
4. Set the Aspect ratio to automatic.
5. Click Save and Insert to add to your page.

When to use it

This is a useful tool to create exciting interactive content with quizzes and other activities. You can create a classic interactive book with a mix of informational content and tasks or just pure informational content that resembles a PowerPoint presentation.

Each page in the book has its own URL allowing you to link to a specific page and also making sure that every page is indexed by Google.

Example

When to use it

This is a useful tool to create QR codes that can not only encode URLs, but also contact information, calendar events or geo-locations. People can scan the codes with a QR code reader in order to trigger the selected action.

Example

Sort the Paragraphs is an H5P layout tool that asks learners to arrange a set of paragraphs into chronological order.

When to use it

Sort the Paragraphs helps learners think about the link between one event and another. It could be useful for the steps involved in a medical procedure, recipe, mechanical repair or anywhere where one action leads to another. It is also useful for learning linking words such as ‘first’, ‘then’ and ‘finally’.

How to use it

Learners use the up and down arrows on the right hand side of each paragraph to sort. Then they click the ‘Check’ button underneath to show correct and incorrect answers highlighted in green or red and a score, with the option to ‘Show solution’ or ‘Retry’ the exercise.

Structure Strip is an H5P layout tool to help learners scaffold an essay or written argument.

When to use it

Structure Strip is useful for guiding learners to formulate an argument around a question. This helps learners chunk down a lot of information into manageable sections.

How to use it

Add section titles to help guide learners to write an essay or organise a written argument. Typically sections would include an introduction, body (that could be further broken down to successes and failures) and conclusion. You can add as many sections as you wish.

You can also optionally add hints or particular instructions for each section – these hints appear as pop ups when you click on a question-mark icon. You can also choose the section colours and minimum/maximum text lengths.

The Virtual Tour (360) content type allows you to enrich 360˚ and normal, static images with explanations, videos, audio, and interactive questions. The images may also be linked together to give students an impression of moving between environments or between different viewpoints within the same environment.

When to use it

This content type may be used to give a feeling of exploring and learning within a realistic environment. For example, Virtual Tour (360) can be used to create virtual tours through rooms where each part of the room is explained in detail using text or images and may also contain questions for students to consider. It could also be used to create virtual explorations of works of art, natural or urban environments, or the inner workings of the human body or complex machines.

How to use it

Go to the H5P Virtual Tour (360) tutorial.

Example