H5P Guides

Documentation Tool

The Documentation tool can be used to create form wizards and outputs a document when the user has reach the end of the wizard. The Documentation Tool is fully responsive and works great on smaller screens as well as on your desktop.

In this tutorial you will learn:

  • When to use the Documentation Tool
  • How to create form wizards using the Documentation Tool

Example

Below is the Documentation Tool which we are going to create in this tutorial:

When to use the Documentation Tool

The Documentation Tool content type aims to make it ease creating 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, goals definition and goals assessment.

Once published, the 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.

Prerequisites

Make sure H5P is up and running

If this is the first time you are using H5P, you should start off by reading this guide to ensure you are up and running with H5P on your platform.

Alternatively, you can test drive H5P right here on h5p.org and skip to step 1.

Make sure your platform can create Documentation Tool

Navigate to the menu that enables you to create new content. In Drupal, you select Interactive content. In WordPress, you press Add new under H5P Content in the admin menu. Select the Create option for H5P. If you find Documentation Tool in the list of Content types, skip to Step 1.

If you can’t find the Documentation Tool content type in the list:

  1. Download the .h5p file you can find here
  2. Select the Upload option when creating a new H5P
  3. Upload the file from step 1
  4. Save the node/article

You will now find Documentation Tool in the Content type list when creating a new H5P.

Step 1: Topic

In this tutorial, we are going to create the Documentation Tool mentioned in the above example

There are four different types of elements which document how you work on your project in a structured way, so we'll add these following elements in upcoming steps.

Step 2: Creating a Documentation Tool

Head over to where you usually create new content on your platform. In Drupal, you go to Create content and select Interactive content. Then select the Create option for H5P and choose Documentation Tool from the Content type list.

Step 3: Documentation Tool Editor

The Documentation Tool editor should now appear and it looks like this:

Step 4: Title

The Title will be displayed always throughout the tool even when you navigate to different pages. Type the following text in the Title field: "Document your project"

 

Step 5: Elements

Here, we'll add the actual pages that the Documentation Tool consists of. In this tutorial, we'll add four types of pages:

  • Standard Page
  • Goals Page
  • Goals Assessment Page
  • Export Document Page

When the Documentation Tool editor is launched, only one undefined content type is displayed below the Elements header. You will have something like this:

Step 6: Add Standard Page

In the Content type dropdown, select Standard page. This will load the Standard Page editor. We will add the exact same content as in the Documentation Tool mentioned in the above example. You should have now something like this:

Press the Add element button to add another content type as ‘Text input field editor element’. You should have something like this now:

Press the Add element button to add two more content type as ‘Text input field editor element’. You should have something like this now:

 

Step 7: Add Goals Page

Press the Add Page button to add another page to the Documentation Tool. This time, we'll choose Goals Page from the drop-down menu. The Goals Page editor will now appear. Add the exact same content for Goals Page as in the Documentation Tool mentioned in the above example. After adding content to the Goals Page you should have something like this:

Step 8: Add Standard Page

Press the Add Page button to add another page to the Documentation Tool. This time, we'll choose Standard Page from the drop-down menu. The Standard Page editor will now appear. Add the exact same content for Standard Page as in the Documentation Tool mentioned in the above example. After adding content to the Standard Page you should have something like this:

Step 9: Add Standard Page

Press the Add Page button to add another page to the Documentation Tool. This time, we'll choose Standard Page from the drop-down menu. The Standard Page editor will now appear. Add the exact same content for Standard Page as in the Documentation Tool mentioned in the above example. After adding content to the Standard Page you should have something like this:

Step 10: Add Goals Assessment Page

Press the Add Page button to add another page to the Documentation Tool. This time, we'll choose Goals Assessment Page from the drop-down menu. The Goals Assessment Page editor will now appear. Add the exact same content for Goals Assessment Page as in the Documentation Tool mentioned in the above example. After adding content to the Goals Assessment Page you should have something like this:

Step 11: Add Export Document Page

Press the Add Page button to add another page to the Documentation Tool. This time, we'll choose Document Export Page from the drop-down menu. The Document Export Page editor will now appear. Add the exact same content for Document Export Page as in the Documentation Tool mentioned in the above example. After adding content to the Document Export Page you should have something like this:

Step 12: Finishing up

Save the node/article to view your finished Documentation Tool.

You should now have the similar result as the example on top of this page.  

Feel free to leave any comments or suggestions on how to improve this tutorial.