I’ve been using Babbel for a few years now to learn Spanish and I find it a very well structured learning experience. Having completed lessons you are then prompted to review those items soon after and then again in the near future. If you correctly review items they are then presented for review periodically.
I had got into a routine where I liked to clear my review items down to zero before doing any new lessons but a recent update to the app forced me into a change of habit. A bit like arriving at the supermarket to find they’ve rearranged the isles my first reaction was “why have they done this?”.
For a little while it felt like I could never clear my review list and move on to a lesson. Every time I opened the app there were more items to review. In the past the review list was only updated once a day.
But just like being forced into taking a bit more time to look around the supermarket I’m now finding that this altered way of approaching my learning is having a positive effect and I currently feel more productive than ever.
I’m taking the opportunity to complete a lesson at a different time of day than I had previously done or tackle the newly added review items that are presented to me.
I think we can take a few things away from this update.
Learning creators
If you are someone who creates learning experiences look at the habits people have formed and see if a change can actually help your learners. This is hard as people may seem to have formed good habits. It was certainly the case for me. I was very consistent in my Spanish reviews and lessons but it turns out that maybe this consistency wasn’t the most productive way of learning.
Learners
It’s not generally in people’s nature to force themselves into a change, especially one that seems to be difficult at first. But rather than wait for someone else to change your learning habits I’d encourage you to try something new. Maybe you like to read new material, try watching a video or listen to a podcast. If like me you use an app to learn a language, or other subject, try engaging this activity in a new way. I’ve downloaded some children’s books written in Spanish to give me something different to work with.
Overall keep it fresh and fun. Learning new things can be frustrating but ultimately it is hugely satisfying and getting stuck in a rut is a sure fire way of sapping your enthusiasm.
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.
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": “",
{
"_id":"c-03",
"_parentId":"b-05",
"_type":"component",
"_component":"helloSomething",
"_classes":"",
"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.
Laravel comes with some very good testing tools but I also wanted to use Vue’s testing tools on my components. I ended up reading quite a few tutorials and watching a few videos before finding enough information to get it working.
I decided a good idea would be to list the most helpful resources and also setup a GitHub repo for future reference.
My starting point was the series of videos on Laracasts. Despite being nearly 3 years old the videos contain some very useful tips and techniques. Some of the examples need a bit of updating but I’d highly recommend watching all of them to get started.
I found two other articles that were of use although I did find I couldn’t follow them exactly, but it gave enough information that I could get up and running.
The now deprecated Instagram API was one of my favourite APIs to use. It was well documented, simple to use and provided some great data. It’s unfortunate that they decided to stop its usage, but I understand that companies need to protect their data as it’s often their most valuable asset.
I recently found out though that Instagram provides a public feed of users recent posts. So I thought I’d look at creating something with it.
As there isn’t any server side processing that is essential I decided to use a frontend framework to build it out. I went for Vue.js having used it for some Laravel work and find there are also plenty of good resources available for the framework.
I think using Vue gives the SPA a nice snappy feel and the lack of page reload when submitting the form helps engage the user.
Having heard lots of good things about Tailwind CSS I wanted to give that a try. It took a little bit of time to get used to the abbreviated syntax but once I started to get my head around it I found there are lots of useful features. I particularly like the media queries for each element. Again there are some very good resources out there, especially Tailwind Components.
Finally I added Animate on Scroll library to add some visual interest when the user scrolls through the feed.
Rather than just dump out the feed I also separated out the most recent, most like and most commented on posts and finished up by showing the remaining posts.
A couple of times I’ve thought about trying to get my best 1 mile below 5 minutes but never dedicated time to it, I’ve always moved on to doing some other training.
The other evening I gave it a go to see what I’m currently capable of. My best is currently 5:27.8 and this test came in at 5:28.8.
Encouraged by this I think I’m going to give this a go over the coming months and see if I can get it under 5 minutes or if not how close I can get.
Update 1st June 2020
My initial thought is No, I can’t run a sub 5 minute mile. But then it’s sort of early days in this.
I’ve done a couple of 1 mile efforts that have stayed around the 5:30 mark and then another session of 400m sprints.
I’ll keep going but it would be at least encouraging to get a new PR time on 1 mile.
Update 14th June 2020
After a week where I did a long ride and a half marathon training run I tried a mile today and it was the slowest I’ve done so far. A good 6 or 7 seconds slower than what I’ve been doing lately. This has been the problem before, I think I’ll try the fast mile and then do other training and never keep at it.
On the plus side I do feel like I’ve got a 5k PR in me at the moment, maybe that will be this week.
<h2>Update 17th June 2020</h2>
I was very wrong. My 5k was nearly a minute slower than usual. The first mile was ok, second mile terrible and 3rd mile picked up a bit.
Update 26th June 2020
I thought I had a PR today. Turned out to be 1.5 seconds off but felt good and if it weren’t for the slight incline at the end I think I would have had it. But sub 5 still feels like a big ask. All good fun trying though.
Update 4th August 2020
One of the good, or bad depending on how you look at it, things of tracking this is I can see just how often I attempt a hard mile or put some effort into improving my pace. It’s been a while. I tried a hard mile but as soon as I set off I knew the legs weren’t quite there today but still did a decent enough effort.
I am starting to think I should have called this post Can I Beat My Mile PR.
This tutorial will not go into depth about some of the code used. The idea is to give an overview of creating a basic Adapt plugin that will output some static text.
The Adapt framework comes with a good selection of components to help you build your e-learning course, then added to this are the contributed plugins. But what if there isn’t quite the thing you need? The good news is that like all good Open Source software you can just make your own.
In this tutorial I’m going to make a very simple bare bones plugin that will allow us to add a component that simply says Hello World.
Before you begin you will need to install the Adapt CLI and Bower.
To give us somewhere to test our plugin we will create a new Adapt course. In terminal run the following command
adapt create course
Accept all of the defaults except the name which we will set to plugin-development.
Once the framework has been downloaded follow the instructions to build and run the course.
From within the plugin-development directory navigate to src/extensions and create a new directory called adapt-helloWorld which will contain our plugin.
In a terminal window cd into the adapt-helloWorld directory and run bower init
Name adapt-helloWorld
Description An example Adapt plugin to say Hello World
Main file js/adapt-helloWorld.js
Keywords adapt-plugin,adapt-component
Authors Accept default
License Accept default
Homepage Accept default
Set currently installed components as dependencies No
Add commonly ignored files to ignore list? Yes
Would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes
Looks good? Yes
We now have a bower.json file inside the adapt-helloWorld directory. In addition to the elements Bower has created for us we need to add some extra ones for this to be a valid Adapt component.
Open up bower.json in a text editor and add a comma after the closing square bracket of the ignore array so it looks like this
Then for good measure we say Hello World in a H1, as it’s very important.
The last thing we need to do to make this a valid Adapt component is to add a properties.schema file. According to the Adapt wiki “properties.schema is a JSON file that is provided by a plug-in. It is the point of contact between the authoring tool, the plug-in, and the course author who configures it.”
As we are only making a simple plugin our schema file will also be quite simple. In the adapt-helloWorld directory create the properties.schema file and add the following to it.
The main section to note here is the properties _supportedLayout which includes the three options, inside the enum element, that Adapt uses to layout components.
We are now at the point where we can see our component in action. We will add our component to an existing block.
In your text editor open src/course/en/components.json
This will add the helloWorld component to the first block.
If we now run the build and server command again
grunt build
grunt server
And navigate to the Presentation Components page you will see a nice Hello World.
The plugin can also be used in the Adapt Authoring Tool. All we need to do is create a zip file of the adapt-helloWorld directory and then in the Authoring Tool navigate to Plugin Management there will be a green button in the left minute Upload Plugin.
That concludes the introduction to the building blocks of an Adapt plugin.
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
Assessment
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:
{{{feedback}}}
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.
If you’ve been following on from the previous post you will be on the Page Structure page, if not then from the dashboard double click on the Hello World course, then from the Course structure page double click on the Take the test and say “Hello World” page.
You’ll now be back on the Course structure page. Double click on the page box which is now labelled Take the test and say “Hello World!”
To give ourselves a blank canvas we will first remove the default article, which will also remove its child block and component. Click the bin icon to the right of New Article Title and then click Yes, I’m sure in the confirmation dialog.
Now we can add in our articles, blocks and components.
Click Add article and then double click New Article Title
Change the title value to Hello World Test
Change the Instruction text to Answer all the questions
And then click the green Save button in the top left.
Double click New Block Title
Change the title to Question 1
And then click the green Save button in the top left.
Click on Add component and scroll to the bottom of the list that appears and click on Text Input. You may need to scroll the list down a bit more to see the options that appear for adding the Text Input. From those options choose Add full.
Click the cog icon in the top left of the Text Input component that will now be inside the Question 1 block and click Edit.
Change the Title to What will be our greeting?
Under Input Items click the Add button. For answers enter Hello and then click the blue OK button.
Change attempts to 2 so the user can have another attempt if they get it wrong the first time.
Tick the Allow ‘any case’ answers input so the user can enter hello or Hello.
Feedback
We can add some feedback for our users to help them out during their learning. Update the following fields.
Correct
You are correct we will say Hello
Incorrect
That is not our greeting
Incorrect Not Final
That is not our greeting, please try again
Leave everything else as the defaults and click the green Save button in the top left.
If you now click the green Preview course button and then the View button to take you to the questions you can try adding correct and incorrect answers.
Where’s the feedback?
If you enter an incorrect answer and then click Show feedback you will notice that nothing happens. To fix this we need to enable an extension.
Back in the Authoring Tool select Manage extensions form the left hand menu. Under Available extensions find the Tutor extension and click the green Add button beside it.
This will now appear in the Enabled extensions at the top of the page.
If you read the description of the Tutor extension you will see it does exactly what we are after “An extension which provides a basic feedback overlay for question components”.
If you now return to our course, preview it and enter an incorrect answer you will see our feedback now appears.
To finish up we will add one more component to utilise a different question format.
Multiple choice
Return to the Page structure page and click on Add block below our Text input.
As we did earlier we will change the block title, this time to Question 2
Click Add component and choose Multiple Choice Question from the list and Add full.
Click the cog icon to edit the Multiple Choice and update the following fields
Title
What are we greeting?
Answers
Sun
Moon
World – Mark this as a correct answer, see the image below
Stars
Sea
Attempts
2
Randomise answers
TRUE
Correct feedback
You are correct we are greeting the world
Incorrect feedback
That is not what we are greeting
Incorrect Not Final feedback
That is not what we are greeting, please try again
If you now preview the course you will see our second question in the format of a multiple choice list.
Now we have a couple of questions for our users the next post will cover letting our user know how they did with by adding an assessment.
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
Title
Hello World
Subtitle
Welcome to the Adapt Authoring Tool Hello World elearning course.
Body
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.
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.
