Hello Something Plugin

In a previous post I stepped through creating a basic Adapt plugin that outputs the static text Hello World https://ianluckraft.co.uk/2020/05/adapt-learning-hello-world-plugin/ . 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 https://github.com/ianckc/adapt-hello-something-plugin/commit/c6c66b2c700e82a6061ce48f81a7b78b710a8fdd

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.

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": “",

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.