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.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
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
- You will need to select the first icon in the page content menu as circled below.
- Then select the <> “code” icon on the right.
- Copy and paste the code below into the page content area as show in the image below.
Page content code
<script language="javascript">
jQuery(document).ready(function(){
jQuery(".correct").hide();
jQuery( "#act" ).sortable({
stop: function (event, ui) {
checkact();
}})
})
function checkact()
{
var items = jQuery('#act li');
if(
jQuery(items[0]).attr('id') === "img3" &&
jQuery(items[1]).attr('id') === "img4" &&
jQuery(items[2]).attr('id') === "img1" &&
jQuery(items[3]).attr('id') === "img2"
) {
jQuery(".correct").show();
} else {
jQuery(".correct").hide();
}
}
</script>
<div id="slide21">
<div class="mh1">Activity</div>
<p class="ch2">Social Media</p>
<p>Re-order the social media icons first to last in the order that they were first established.</p>
<ul class="ui-sortable" id="act" style="list-style-type: none;
margin: 0;
padding: 0;">
<li style="
margin: 3px 3px 3px 3px;
padding: 1px;
width: 98%;
height: 70px;
border: 1px solid #c5c5c5;
background: #f6f6f6;
font-weight: normal;
color: #454545;
text-align: center;" class="ui-state-default img1" id="img1"><i class="fa fa-youtube fa-2x" title="Youtube"></i><div class="correct">2005</div></li>
<li style="
margin: 3px 3px 3px 3px;
padding: 1px;
width: 98%;
height: 70px;
border: 1px solid #c5c5c5;
background: #f6f6f6;
font-weight: normal;
color: #454545;
text-align: center;" class="ui-state-default img2 list-group-item" id="img2"><i class="fa fa-twitter fa-2x" title="Twitter"></i><div class="correct">2006</div></li>
<li style="
margin: 3px 3px 3px 3px;
padding: 1px;
width: 98%;
height: 70px;
border: 1px solid #c5c5c5;
background: #f6f6f6;
font-weight: normal;
color: #454545;
text-align: center;" class="ui-state-default img3 list-group-item" id="img3"><i class="fa fa-linkedin fa-2x" title="LinkedIn"></i><div class="correct">2003</div></li>
<li style="
margin: 3px 3px 3px 3px;
padding: 1px;
width: 98%;
height: 70px;
border: 1px solid #c5c5c5;
background: #f6f6f6;
font-weight: normal;
color: #454545;
text-align: center;" class="ui-state-default img4 " id="img4"><i class="fa fa-facebook fa-2x" title="Facebook"></i><div class="row correct">2004</div></li>
</ul>
<div class="alert alert-success correct">Correct</div>
</div>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.
Trackbacks/Pingbacks