Many teachers are left in the cold when it comes to adding interactivity to their online resources. Just upload a PDF document and everything will be fine. But the web lends itself to interactivity and there is no reason why we can’t make more use of online interaction.
When it comes to the web we often find it really easy to over complicate things, especially in the world of technology with HTML, CSS, HTML5, Flash, WebGL and every other flavour of web development code.
Sometimes it is nice to just create something simple with very little code that you can drop into your WordPress page or into a Moodle page and let people use it.
Having said that, it is never quite that simple…
The activity below only uses 62 lines of code using javascript, CSS plus a little bit of HTML (no HTML5). To keep the code simple I used JQuery and JQueryUI which are used in many web frameworks and can easily be added to WordPress or Moodle.
Activity
How good is your memory and how well do you know your social media?
Re-order the social media icons from left to right, earliest to most recent in the order that they were established.
The code for this activity is below.
[ct_separator title=”” icon=”” style=”normal” color=”” top=”” ][/ct_separator]
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js”></script>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”>
<script>
jQuery(document).ready(function($){
$(“.correct”).hide();
$( “#act” ).sortable({
placeholder: “ui-state-highlight”,
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();
}
}
</script>
<style type=”text/css”>
#act li i {
cursor: pointer;
}
#act li span {
position: absolute;
margin-left: -1.3em;
}
#act {
list-style-type: none;
padding: 0;
display:inline-block;
width: 100%;
}
#act li {
float: left;
font-size: 1.4em;
width: 150px;
margin-top: 0;
margin-right: 3px;
margin-bottom: 3px;
margin-left: 3px;
}
</style>
<div id=”slide21″>
<div class=”mh1″>Activity</div>
<p class=”ch2″>Scoial Media</p>
<p>Re-order the social media icons from left to right in the order that they were established.</p>
<ul id=”act”>
<li class=”ui-state-default img1″ id=”img1″><i class=”fa fa-youtube fa-3x” title=”Youtube”></i><p class=”correct”>2005</p></li>
<li class=”ui-state-default img2″ id=”img2″><i class=”fa fa-twitter fa-3x” title=”Twitter”></i><p class=”correct”>2006</p></li>
<li class=”ui-state-default img3″ id=”img3″><i class=”fa fa-linkedin fa-3x” title=”LinkedIn”></i><p class=”correct”>2003</p></li>
<li class=”ui-state-default img4″ id=”img4″><i class=”fa fa-facebook fa-3x” title=”Facebook”></i><p class=”correct”>2004</p></li>
</ul>
<div class=”alert alert-success correct”>Correct</div>
</div>
[ct_separator title=”” icon=”” style=”normal” color=”” top=”” ][/ct_separator]
If you have some ideas you want to try, send me some details and we can have a chat about how we could make your idea work in WordPress or in Moodle.
