Adapt Learning Hello Something Plugin

Hello Something Plugin

In a previous post I stepped through creating a basic Adapt plugin that outputs the static text Hello World . But a plugin that only outputs some static text is possibly less than useful. In this post we’ll look at the next logical step of allowing a course builder to add some dynamic text to the output.

As a starter we will clone the Hello World plugin and then replace World with Something. If you want to follow along clone the repo from this commit

The complete plugin code can be seen in the GitHub repo.

To add extra fields to the plugin we need to edit the properties.schema file.

There is already a properties object with a _supportedLayout key. We need to add two more JSON objects at the same level as _supportedLayout

I’ll paste them here and then we will look at each of them to identify their purpose.

"instruction": {
  "type": "string",
  "required": false,
  "default": "",
  "inputType": "Text",
  "validators": [],
  "help": "Enter the instruction text for this component.",
  "translatable": true
"somethingElse": {
  "type": "string",
  "required": true,
  "default": "Enter your something else here.",
  "title": "Text to say hello to",
  "inputType": "Text",
  "validators": [],
  "help": "When output the component will say Hello followed by the text you enter",
  "translatable": true

The first property with the key of instruction allows an author to add some instructional text applicable to the component. This could be something such as “Select all of the images containing the world” for a component requiring users to select from a set of images.

If used in the authoring tool it will display as a text input and is not required.

The second property with the key somethingElse is the string that we will be outputting in the template file. It contains the same properties as the instruction object but we set a default value that will appear in the input and also make it required.

The next step is to update the template file templats/helloSomething.hbs

We only need to make a single change to output the text entered in the somethingElse input.

Change the H1 tag to the following

<h1>Hello {{{somethingElse}}}</h1>

If there is instruction text it will be output by default due to the Handlebars partial being called with

{{> component this}}

To use our new component in an Adapt course there are two options, built via the command line tool or in the authoring tool.

Via the Command Line Tool

Open up the components file inside the correct language directory. I am using English so the path to my file is src/course/en/components.json

Add a new JSON object with a unique ID and the correct parent ID, this is the block ID that the component will be nested in. If you do not require instruction text then leave it as an empty string e.g. "instruction": “",

    "instruction": “Look at the text we are outputting",
    "somethingElse": “The Sun"

If we then launch our course it will look like this

Via the Authoring Tool

First we need to create a zip file of the adapt-hello-something-plugin directory that contains all of our code. Next in the Authoring Tool click the hamburger menu icon in the top left and choose Plugin Management from the dropdown menu.

You will now be on the Manage Available Extensions page. Click the green Upload Plugin menu in the left hand column. On the Upload Plugin page select the zip file you have just created and then click the green Upload button in the left hand column. After a successful upload you should be on the Manage Available Components and the Hello Something plugin is listed and is enabled.

To use the Hello Something component navigate to your chosen course and edit a page. Select Add component inside a block and look for the Hello Something option inside the Add component drawer. Select the layout you wish to use (left, full or right).

Now the component has been added double click it to edit the settings. Under Properties you will see the two fields we defined in properties.schema, Instruction and Text to say hello to. The instruction is optional but you will need to add something in the Text to say hello to field.

After saving the updates to the component you can now preview the course and you will see the component output with the text you have entered. Below is a screenshot where I have added it to my Hello World course.

Now you have seen how to add fields to your Adapt plugin the next step would be to add some creative interactivity to really engage the learner and deliver high value courses.

Adapt Authoring Tool Hello World Part 4: Adding assessment results

Now that we have a course setup and the user can answer some questions and get feedback we’ll add an assessment result to let them now how they did.

In the Adapt Authoring Tool go into our Hello World course and then choose Manage extensions from the left menu.

In the Manage extensions page click the green Add button to the right of Assessment. You should now have two enabled extensions

  1. Assessment
  2. Tutor

Now return to the Course structure and double click on the Take the test and say “Hello World” page.

In the article titled Hello World Test click the cog icon and choose Edit. Scroll down to the section titled Extensions and click on Assessment to expand it.

Update the fields with the following

Enabled: checked

Assessment Name: Hello World Assessment

Pass mark: 50

Show Feedback: checked

Show Marking: checked

Now click the green Save button in the left hand menu which will return us to the Page structure page.

Click Add article at the bottom of the main content area. Change the Article title to Assessment Results and also click the Unlink from title icon next to Display Title. Delete the contents of the Display Title field as we do not want it appearing for the users. Click the green Save button on the left hand menu.

Repeat these steps for the Assessment Block. After that your page should look like the following image.

Add a component to the Assessment block. From the list choose Assessment Results and Add full.

In the Assessment Results Component update the following fields

Title: Assessment Results

Set completion on: pass

Assessment Name: Hello World Assessment

Feedback Text:


You got a score {{{score}}} out of {{{maxScore}}}

The Feedback Text contains Handlebars syntax that outputs the feedback and a dynamic score that the user obtained.

Still in the Component edit settings we need to add three bands to determine the pass scores.

Under Bands click the blue Add button.

For the first band leave the score at 0 and set the Feedback to

You failed

Then click the blue Ok button

Add two more bands with the following settings

Score: 1
Feedback: You passed with half of the questions correct

Score: 2
Feedback: Well done you said Hello World

You should now have three bands as shown in the below image

Click the green Save button in the left hand menu.

Back on the Page Structure page click the green Preview course button in the left menu. Answer the two questions, try a combination of both correct, neither correct and only one correct and you will see the different fail or pass scores and feedback.

We have now completed a course using the Adapt Authoring Tool.

Adapt Authoring Tool Hello World Part 2: Course creation and introductory text

As I mentioned in the overview page I won’t be covering the installation of the Adapt Authoring Tool as the documentation covers it thoroughly.

With the Authoring Tool started navigate to the Dashboard which will probably be at http://localhost:5000 if you have followed the installation defaults.

If this is the first time starting it up the Dashboard will be blank.

Click the green Add new course button in the top left.

This takes you to the General settings for the course. Set the following values


Hello World


Welcome to the Adapt Authoring Tool Hello World elearning course.


Why are we saying Hello to the World?

Hello World! Is often the simplest tutorial when learning to create computer programs. Just because we’re using a Graphical User Interface (GUI) to create this course doesn’t mean we can’t stick with convention.

Everything else we will leave as the defaults.

Click the green Save button in the top left which will take you to the Course structure page.

On the Course structure page you will see a single page titled New Menu/Page Title. Click on the cog icon in the top left of the New Menu/Page Title box and select Edit.

Set the title to 

Take the test and say “Hello World”

Then click the green Save button in the top left.

We are now in a position to preview our course so far. Click the green Preview course button in the top left. This will open up a new tab with our course menu page.

In the next post we will look at adding some questions to our course.

Adapt Authoring Tool Hello World Part 1: Storyboard

Like most development that requires logic, whether this is created through code or a user interface, it’s best to have a plan of what you will be producing rather than diving in and ending up with a result that is hard to maintain.

Even though this elearning course is fairly simple we’ll create a storyboard to refer to throughout its creation.

For this I have used Pages and exported it as a PDF. You can download the PDF version and the other assets used in this tutorial as a zip file.

I’ve chosen to keep the storyboard simple here by just using a text document but if you have a Google there are a lot of very good storyboard authoring tools available.

Now we have a storyboard to follow the next post will cover creating the course with introductory text.

Adapt Authoring Tool Hello World

I’ve created a small series of blog posts showing how you can create a simple Adapt elearning course using the Adapt Authoring Tool. These posts assume you have already installed the Authoring Tool. If you have not then please follow the very comprehensive installation instructions.

To start off we will create a storyboard that will guide our development of the course.

Further posts will cover