A lot of people have been asking how to add their own interactive, home made, javascript Moodle activity.

Well here is how you can do it.

We are using Moodle 3.2 for this tutorial.

The activity you will add is a drag and drop, re-ordering activity that will provide feedback when the student re-orders the images correctly.

Demo is available HERE

Step 1: Add scripts to your Moodle install

Here we will add JQuery, JQuery UI, JQuery UI-touch-punch and Font Awesome to your Moodle site.

Note: This requires administrator access to your Moodle install.

Select Site administration > Appearance > Additional HTML

Copy and paste the code below into additionalhtmlhead as show in the diagram below.

Step 2: Go to a course and turn on editing

Step 3: Create a new page resource or edit an existing page resource

Step 4: Add the code below to the page content

  1. You will need to select the first icon in the page content menu as circled below.
  2. Then select the <> “code” icon on the right.
  3. Copy and paste the code below into the page content area as show in the image below.

Page content code

Step 5: Save

Click “Save and display” at the bottom of the page.

Step 6: Test your activity

If everything has been added correctly, you should now be able to test the re-order activity by clicking and dragging the items into the right order.

Because we added the jqueryui-touch-punch script, this will also work on a mobile device.

If you would like me to create a detailed course on “how to create your own Moodle activities using JavaScript” please contact me on LinkedIn https://www.linkedin.com/in/chrisrichterin/ or comment below.

Demo is available HERE

The image below is an example of how your interactive drag and drop activity should look.