Adding JavaScript activities to WordPress

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

First of all, install the plugin Scripts and Styles plugin as you normally would.

Create a new page in WordPress.

Then 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 as shown below.

The code to paste in is in the panels at the bottom of this page.

Javascript

Select the Scripts tab and paste in the Javascript code.

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

CSS

Select the styles tab and paste in the CSS from below.

.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;
}

Include jquery-core, jquery-ui-core and jquery-ui-sortable in the Inlude scripts.

HTML

Then finally paste the HTML code below into the HTML Area of your page content in WordPress.

Thats it…

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

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>