Introduction to W3C DOM

Introduction to W3C DOM | Part 2

For the second part of this tutorial we are going to create a fun game using the DOM.

The purpose of the game is to successfully click on a number of coloured boxes in alphabetical order. the coloured boxes will initialy be grouped in a box at the top of the page. When a user clicks/selects a box we want it move out of the initial container box to a new one so as to display the selection they have made in order. Upon selecting all boxes we then need to verify whether the order was correct and display the results.

We'll get started with the CSS. I'm just going to give you the code for this without going into detail as this is a DOM tutorial.

Now for the HTML markup.

Now we get to the interesting stuff, the javascript and DOM

function moveElem(id)
{
// We will be refering to the 'moveTo' div a number of times in this function so for convenience we put it into a var  called moveToDiv. 
var moveToDiv = document.getElementById('moveTo');

// We can also put the div that was clicked on into a var as its id was passed as the first argument of the function
var currentNode = document.getElementById(id);

// Next we copy the selected node using cloneNode(false); setting cloneNode to true will copy all the child nodes of the element too, in this instance that is not needed
var movedNode = currentNode.cloneNode(true);

// Hide the selected node in the moveFrom div
document.getElementById(id).style.visibility='hidden';

// Move the copied node to the moveTo div using appendChild.
// document.getElementById('moveTo').appendChild(copiedNode)
moveToDiv.appendChild(movedNode);

// That's basically it! All we need to do now is verify whether the selection was correct.

// First check that all 4 boxes have been selected using x.childNodes.length which returns the number of child nodes of x
if (moveToDiv.childNodes.length==4)
{
// Now we check to see if the selected order was correctby comparing the child node heirarchy to the order of the elemnts ids
if (moveToDiv.childNodes[0].id=='box2' && moveToDiv.childNodes[1].id=='box4' && moveToDiv.childNodes[2].id=='box1' && moveToDiv.childNodes[3].id=='box3')
{
// If correct we alert a success msg
alert('Well done!\n\nYou got it correct');
// and print one too in place of the original instructional msg
document.getElementById('msg').innerHTML='<h2>Task complete</h2>';
}
else
{
// If the selection was wrong we alert a 'fail' msg and reload the page
var restartURL = unescape(window.location.pathname);
alert('sorry you got it wrong');
window.location.href = restartURL;
}
}
}
</script>

Comments:

Featured Script

PHP Send this page to a friend script
as the title suggests you can add this script to any of your pages and and it will allow your visito... (read more)

Tutorials @ WebDesignPro