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:

Not using H5P yet?
Click the "Get started" button to explore all of the possible ways to use H5P!

Get started with H5P

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

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.

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.

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

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

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"

​

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

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

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:

​

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:
​

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:
​

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:
​

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:
​

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:
​

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:
​

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.