H5P Guides

Documentation Tool Tutorial

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
Not using H5P yet?
Click the "Get started" button to explore all of the possible ways to use H5P!
Get started with H5P

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.

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

Select the New content option and choose Documentation Tool from the list of Content types: 

Step 3: Documentation Tool Editor

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

Step 4: Title and Heading

Type the following text in the Title field: "Documentation tool". The Heading will be displayed always throughout the tool even when you navigate to different pages. Type the following text in the Heading 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 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 11: 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 12: 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 13: Finishing up

Save the node/article to view your finished Documentation Tool.
You should now have a similar result as the example on top of this page.  
Feel free to leave any comments or suggestions on how to improve this tutorial.