Simple javascript activities can be created in WordPress using the Scripts and Styles plugin.

Scripts n Styles

Re-order the social media icons first to last in the order that they were first established.

Just add the code below to the Scripts and Styles Javascript, add the CSS to the style and add JQuery, JQuery UI. JQuery UI Sortable to the Additional Scripts.

Paste the HTML code below into the HTML in the TEXT tab in WordPress.

Thats it…

Let me know in the comments if you would like to see more interactive activities in JavaScript for WordPress.

Hint: Linkedin – Facebook – Youtube – Twitter

  • 2005
  • 2006
  • 2003
  • 2004
Correct

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();
}
}

HTML

<div id=”slide21″>
<p class=”ch2″>Simple javascript activities can be created in WordPress using the Scripts and Styles plugin.</p>

Scripts n Styles

Re-order the social media icons first to last in the order that they were first established.
<blockquote><strong>The complete code is available to create this by just commenting below, I will then send you the code.</strong></blockquote>
If there is enough interest, I will put together some information on how to create your own javascript activities in WordPress.

Hint: Linkedin – Facebook – Youtube – Twitter
<ul id=”act” class=”ui-sortable” style=”list-style-type: none; margin: 0; padding: 0;”>
<li id=”img1″ class=”ui-state-default img1″><i class=”fa fa-youtube fa-2x” title=”Youtube”></i>
<div class=”correct”>2005</div></li>
<li id=”img2″ class=”ui-state-default img2 list-group-item”><i class=”fa fa-twitter fa-2x” title=”Twitter”></i>
<div class=”correct”>2006</div></li>
<li id=”img3″ class=”ui-state-default img3 list-group-item”><i class=”fa fa-linkedin fa-2x” title=”LinkedIn”></i>
<div class=”correct”>2003</div></li>
<li id=”img4″ class=”ui-state-default 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”><strong>Correct</strong></div>
</div>

CSS

.img1, .img2, .img3, .img4
{
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;
}

Pin It on Pinterest

Share This
%d bloggers like this: