Topic outline

  • Accordion

    Reduce the amount of text presented to readers by using this responsive accordion. Readers decide which headlines to take a closer look at by expanding the title. Excellent for providing an overview with optional in-depth explanations. 

    Learn how to create Accordion in this tutorial.

    • Agamotto

      Add a sequence of images that people are supposed to look at sequentially, e.g.

      • photos of an item that changes over time,
      • schematics or maps that are organized in different layers or
      • images that reveal more and more details.

      You can optionally add some text information that describes the current image, you can decide whether the slider should display a tick for each image, and you can let the slider snap to an image position.

      Learn how to create Agamotto in this tutorial.


      • Arithmetic Quiz

        This content type generates random arithmetic quizzes in a flash. As an author, all you have to do is decide the type and length of the quiz. Users keep track of score and time spent when solving the quiz.

        • Audio Recorder

          Audio Recorder allows you to record your voice and play it back immediately or download a .wav file for future use. A fitting content type for open-ended questions and language courses. 

          Important note: This content type currently has limited browser support. It works on Edge, Chrome and FireFox. We hope more browsers will implement support for the ways this content type does recordings.

          • Branching Scenario

            Branching Scenario is a flexible content type that enables authors to present a variety of rich interactive content and choices to learners. Learners make choices that determine the content they will see.

            The authoring tool can be used in full screen and allows authors to structure the content as a tree with multiple branches and endings.

            Learn how to create Branching Scenarios in this tutorial.

            • Chart

              Need to present simple statistical data graphically without creating the artwork manually? Chart is your answer.

              • Select between bar and pie chart view
              • Add label and value to each data element
              • Select background color each data element
              • Set font color for each data element

              • Collage

                The Collage tool allows you to put together beautiful images in a soothing composition. If you want to impress your followers by adding cool image collages to your blog, this is definitely the tool for you!

                Choose from 11 layouts and configure:

                • image pan and zoom
                • image spacing (inner frame size)
                • outer frame size
                • height of the collage

                • Column

                  Organize your content type into a column layout with H5P Column. Content types that address similar material or share a common theme can now be grouped together to create a coherent learning experience. In addition, authors are free to be creative by combining almost all of the existing H5P content types. 

                  H5P Column is also a way to easily share multiple content types simultaneously as it can be embedded or downloaded just like any other H5P. 

                  • Course Presentation

                    Course presentations consist of slides with multimedia, text, and many different types of interactions like interactive summaries, multiple choice questions and interactive videos. Learners can experience new interactive learning material and test their knowledge and memory in Course Presentations. As always with H5P, content is editable in web browsers, and the Course Presentation activity type includes a WYSIWYG drag and drop based authoring tool.

                    A typical use of the Course Presentation activity is to use a few slides to introduce a subject and follow these with a few more slides in which the user’s knowledge is tested. Course Presentations may however be used in many different ways, including as a presentation tool for use in the classroom, or as a game where the usual navigation is replaced with navigation buttons on top of the slides to let the user make choices and see the consequences of their choices.

                    Learn how to create Presentations in this tutorial.

                    • Dialog Cards

                      Dialog cards can be used as a drill to help learners memorize words, expressions or sentences. On the front of the card, there's a hint for a word or expression. By turning the card the learner reveals a corresponding word or expression. 

                      Dialog cards can be used in language learning, to present math problems or help learners remember facts such as historical events, formulas or names. 

                      • Fully responsive
                      • Add image to a card
                      • Add audio to a card
                      • Add tips

                      Learn how to create Dialog cards in this tutorial.

                      • Dictation

                        You can add audio samples containing a sentence for dictation and enter the correct transcription. Your students can listen to the samples and enter what they have heard into a text field. Their answers will be evaluated automatically.

                        Several options will allow you to control the exercise's difficulty. You can optionally add a second audio sample for a sentence that could hold a version spoken slowly. You can also set a limit for how often a sample can be played, define if punctuation should be relevant for scoring, and decide whether small mistakes like typing errors should be counted as no mistake, a full mistake, or just a half mistake.

                        Learn how to create Dictations in this tutorial.

                        • Documentation Tool

                          The documentation tool aims to make it easy to create assessment wizards for goal driven activities. It can also be used as a form wizard.

                          While editing, the author can add multiple steps to the wizard. In each step, the author can define which content goes into that step. Content can be plain text, input fields, goal definition and goal assessment. 

                          Once published, the end user will be taken through the steps of the wizard. On the last step of the wizard, the user can generate a document with all the input that has been submitted. This document can be downloaded.

                          The Documentation tool is fully responsive and works great on smaller screens as well as on your desktop. 

                          Learn how to create Documentation tool in this tutorial.

                          • Drag and Drop

                            Drag and drop questions enable the learner to associate two or more elements and to make logical connections in a visual way. Create Drag and drop questions using both text and images as draggable alternatives. H5P Drag and drop questions support multiple draggable to drop zone combinations; one-to-one, one-to-many, many-to-one and many-to-many.

                            Learn how to create a Drag and drop question in this tutorial.

                            Drag and drop questions may be used standalone, but can also be included in:

                            • Drag the Words

                              Drag the Words allows content designers to create textual expressions with missing pieces of text. The end user drags a missing piece of text to its correct place, to form a complete expression.

                              May be used to check if the user remembers a text she has read, or if she understands something. Helps the user think through a text.

                              It's super easy to create a drag the words task. The editor just writes the text and encloses the words that are to be draggable with asterix signs like *draggableWord*.

                              • Add as many expressions and missing pieces of text as you like
                              • A hint may be added to each missing piece of text
                              • Drag the Words can be included in PresentationInteractive video and Question set content types

                              Learn how to create Drag the Words in this tutorial.

                              • Essay

                                The text which students created will be scanned for keywords that have been defined by an author before. Several options allow to make this rather simple approach still quite flexible for giving feedback.

                                Authors can restrict the number of characters that the students may use to cover all the important aspects of a given topic. This way they can stimulate cognitive efforts that are needed to distinguish between important facts and less relevant details. Also, authors cannot only award points for keywords that have been found (multiple times), but they can provide verbal feedback. If a crucial keyword is missing, one could e.g. point out that an important aspect seems to have been neglected and should be considered when writing the next iteration of the text. On the contrary, if a keyword is found, one could praise the student and confirm the significance of the aspect which the word represents.

                                The content type does not replace grading by teachers, but could assist them.

                                Learn how to create Essays in this tutorial.

                                • Fill in the Blanks

                                  Learners fill in the missing words in a text. The learner is shown a solution after filling in all the missing words, or after each word depending on settings.

                                  Authors enter text and mark words to be replaced with an asterix. In addition to native and second language learning, Fill in the blanks can be used to test the learner's ability to reproduce facts or produce mathematical inferences. 

                                  Learn how to create Fill in the blanks in this tutorial.

                                  • Fill in the Blanks - Advanced

                                    Learners fill in the missing words in a text or choose the correct answer from a drop-down menu. For each blank, the learners are told if the entered answer is correct. If an answer is incorrect, an individual feedback text is shown for the exact mistake they've made and their attention is drawn to relevant parts of the text. If they only make a minor mistake, they get a warning message telling them what the exact problem is.

                                    Authors enter text and mark blanks with ____. The correct answers, incorrect answers, and the respective feedback texts are then entered in another section below. Authors can also mark parts of the text as 'highlight sections' by surrounding them with !!. They can then reference these highlight sections when they enter the feedback texts for incorrect answers.

                                    'Advanced Fill in the Blanks's is most useful in second language learning, where you can give the users individual hints, why certain tenses or word forms can't be used in this case. While it is possible to have a 'Check' button at the bottom of the exercise and give feedback for all blanks at once, it makes more sense to enable the auto-check setting as the user is guided through the 'fill the blanks' exercise step by step.

                                    If you don't want to use individual feedback or 'drop-down' mode, the regular 'Fill in the Blanks' content type is easier to use and might be the better choice.

                                    • Find Multiple Hotspots

                                      This content type can be used for questions where the end users for instance are to find all the hotspots in an image. The end users are provided with relevant feedback based on where they click.


                                      • Upload an image for the specified task. (Find all the fruits, molecules or kitchen tools in an image)
                                      • The author can select how many correct hotspots need to be found before marking the question as complete.
                                      • Hotspots can either be defined as correct or incorrect, and the author provides appropriate feedback text in both cases. The author can also define a feedback if the end user presses somewhere which is neither defined as a correct nor incorrect hotspot. 

                                      • Find the Hotspot

                                        This content type allows end users to press somewhere on an image and get feedback on whether that was correct or incorrect according to the task description.

                                        The author uploads an image and defines various hotspots corresponding to details or sections of the image. 

                                        Hotspots can either be defined as correct or incorrect, and the author provides appropriate feedback text in both cases. The author can also define a feedback if the end user presses somewhere which is neither defined as a correct nor incorrect hotspot.

                                        • Find the Words

                                          A free HTML5-based word search activity that allows authors to create a list of words that will be drawn in a grid. The learners' task is to find and select the words in the grid. 

                                          • Flashcards

                                            This content type allows authors to create a single flash card or a set of flashcards that have both questions and answers. Learners are required to fill in the text field and then check the correctness of their solution.

                                            Learn how to create Flashcards in this tutorial.

                                            • Guess the Answer

                                              This content type allows authors to upload an image and add a suitable description. End users can guess the answer and press the bar below the image to reveal the correct answer. 

                                              • Add a task description and image
                                              • Add a descriptive solution label and a solution text
                                              • Solution text is revealed on input from the user

                                              • Iframe Embedder

                                                The Iframe embedder makes it easy to make an H5P of already existing JavaScript applications.

                                                This library supports:

                                                1. External embedding using a URL (supported by the editor)
                                                2. Internal embedding, i.e an H5P has to be created and uploaded. The H5P must contain all relevant resources (html, javascript, css and so forth)

                                                • Image Hotspots

                                                  Image hotspots makes it possible to create an image with interactive hotspots. When the user presses a hotspot, a popup containing a header and text or video is displayed. Using the H5P editor, you may add as many hotspots as you like. The following is configurable:

                                                  • The number of hotspots
                                                  • The placement of each hotspot, and the associated popup content
                                                  • The color of the hotspot

                                                  Learn how to create Image hotspots in this tutorial.

                                                  • Image Juxtaposition

                                                    You can choose between a horizontal slider and a vertical slider, set its starting position and optionally label your images.

                                                    The Image Juxtaposition is based on Juxtapose that was created by Alex Duner and Northwestern University Knight Lab.

                                                    • Image Pairing

                                                      Image pairing is a simple and effective activity that requires learners to match pairs of images. Since it is not required for both images in a pair to be the same, authors are also able to test the understanding of a relation between two different images.

                                                      • Image Sequencing

                                                        The Image Sequencing content type challenges the learner to order a randomized set of images according to a task description. 

                                                        This content type is developed by Jithin under Learning and Media Lab of ICFOSS

                                                        Learn how to create Image Sequences in this tutorial.

                                                        • Image Slider

                                                          Present your images in an appealing way with ease. Authors just have to upload images and provide alternative texts for the images.

                                                          The next two images are always preloaded so switching between images will usually be snappy with no delay for loading the next image.

                                                          Images may be experienced as part of the page or in full-screen mode. When used as part of the page the system will pick a fixed aspect ratio depending on the images being used. Authors may decide to handle aspect ratios differently.

                                                          • Impressive Presentation

                                                            Unfold your creativity on an infinite 3D canvas. Images, text and other H5Ps can be combined to create presentations with 3D transitions between steps. This content type is experimental, creating Impressive Presentations might be very difficult, and impossible for people not familiar with 3D creation tools.

                                                            The authoring tool is only tested in Google Chrome, does not work in Firefox.

                                                            • Interactive Videos

                                                              Videos may be enriched with interactivities like explanations, extra pictures, tables, Fill in the Blank and multiple choice questions. Quiz questions support adaptivity, meaning that you can jump to another part of the video based on the user's input.  Interactive summaries can be added at the end of the video. Interactive videos are created and edited using the H5P authoring tool in a standard web browser.

                                                              Learn how to create Interactive videos in this tutorial.

                                                              This Interactive Video demonstrates some of the key features. You can add many different types of questions and informational resources. Interactions may or may not pause the video when they appear. They may appear directly or as a button that users can choose to click to reveal the resource. Questions may be adaptive in the sense that the user's answer determines where the user is sent after the answer is provided.

                                                              Here we demonstrate how Interactive Video may be used to create a game. We've disabled skipping forward in the video under "Behavioural settings" and instead added hidden layers on top of the video that users click to navigate in the video.

                                                              • Mark the Words

                                                                Mark the words allows content designers to create textual expressions with a defined set of correct words. The end user highlights words according to the task description and is given a score.

                                                                For the editor it is super easy to create a click the words challenge. The editor types in the text and encloses the words that the user is supposed to click, the right answers, in asterisk like *correctWord*.

                                                                • Add as many expressions and correct words as you like
                                                                • End users can highlight any word within the expressions
                                                                • Mark the words can be included in PresentationInteractive video and Question set content types

                                                                • Memory Game

                                                                  Create your own memory games and test the memory of your site's users with this simple yet beautiful HTML5 game.

                                                                  Learn how to create a Memory game in this tutorial.

                                                                  • Multiple Choice

                                                                    Multiple Choice questions can be an effective assessment tool. The learner is given immediate performance feedback. The H5P Multiple Choice questions can have a single or multiple correct options per question.

                                                                    Learn how to create a Multiple Choice question in this tutorial.

                                                                    • Personality Quiz

                                                                      In this content type, the author defines a series of questions with alternatives, where each alternative is matched against one or more personalities. At the end of the quiz, the end user will see which personality matches the best. There are several ways of making this quiz visually appealing, by eg. representing questions, alternatives, and personalities using images.

                                                                      • Questionnaire

                                                                        Gain feedback and ask open ended questions in Interactive Videos and other content types with Questionnaire.

                                                                        • Quiz (Question Set)

                                                                          Question Set is your typical quiz content type. It allows the learner to solve a sequence of various question types. You can combine many different question types like MultichoiceDrag and drop and Fill in the blanks in a Question set. As an author there are many settings you can use to make it behave just the way you want it to. You may for instance customize the Question set with background images and define a pass percentage for the learner.

                                                                          The Question Set also allows you to add videos that are played at the end. One video for success, another if the learner fails the test. This might motivate learners to try again if they fail so that they get to see the success video. 

                                                                          Learn how to create a Question set in this tutorial.

                                                                          • Single Choice Set

                                                                            Single choice set allows content designers to create question sets with one correct answering alternative per question, in just a few seconds. The end user gets immediate feedback after submitting each answer. 

                                                                            • Sound effects for correct and wrong (sound effects may be turned off)
                                                                            • Fully responsive design
                                                                            • Summary at the end showing the solution to all questions
                                                                            • Single choice sets can be included in Presentation and Interactive video content types

                                                                            • Speak the Words

                                                                              Create your own questions and make the user answer with their own voice.

                                                                              Important note: This content type has limited browser support and currently works only on Chrome. 

                                                                              • Speak the Words Set

                                                                                Speak the words set allows authors to combine multiple Speak the Words tasks into a set so they can be delivered together as a single piece of content, similar to Question Set. As an author, there are a few settings you can use to make it behave just the way you want it to. You may, for example, define different messages for different scores achieved by the learner.

                                                                                Important note: This content type has limited browser support and currently works only on Chrome.

                                                                                • Summary

                                                                                  Summaries help the learner remember key information in a text, video or presentation, by actively buliding a summary about the topic at hand. When the learner has completed a summary, a complete list of key statements about the topic is the end result.

                                                                                  Learn how to create a Summary in this tutorial.

                                                                                  • Timeline

                                                                                    This is Timeline and was developed by Knight Lab, packaged as an H5P content type in order to make timelines easily editable, shareable and reusable. 

                                                                                    The Timeline content type allows you to place a sequence of events in a chronological order. For each event you may add images and texts. You may also include assets from Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud.

                                                                                    Learn how to create a Timeline in this tutorial.

                                                                                    • True/False Question

                                                                                      True/False Question is a simple and straightforward content type that can work by itself or combined into other content types such as Course Presentation. A more complex question can be created by adding an image or a video.

                                                                                      • Virtual Tour (360)

                                                                                        360 (equirectangular) and normal images may be enriched with interactivities like explanations, videos, sounds, and interactive questions. The images may also be linked together to give the user an impression of moving between environments or between different viewpoints within the same environment.

                                                                                        This content type may be used to give a feeling of exploring and learning within a realistic environment. It includes an easy to use drag and drop authoring widget making it easy for everyone to create their own virtual tours.

                                                                                        Learn how to create Virtual Tours (360) in this tutorial.