Making the quiz functional

Our UI part is now complete and we can proceed to make the quiz functional. We will do this in a few steps. First of all, we will display the data on the page in two columns. Then, we will make the country names draggable. Finally, the list items with the capital names will be made droppable so that we can drop a country name inside a capital. We will also have to ensure that a droppable capital name accepts only the correct country name. Finally, the resetting logic will be built.

Displaying data on the page

Open the quiz.js file for editing and write the following code:

$(document).ready(function() { createQuizLayout(); });

On the document ready event we call a function named createQuizLayout which we need to define now.

function createQuizLayout() { //declare arrays of countries and their capitals. var countries = ["USA", "UK", "India", "Germany", "Turkey", "France", "Nepal", "Japan", "South Africa", "Maldives"]; var capitals = ["Washington", "London", "Delhi", "Berlin", "Istanbul", "Paris", "Kathmandu", "Tokyo", "Capetown", "Male"]; var arrCountry = []; for(var i=0; i<countries.length; i++) { arrCountry.push('<li data-index="' + (i+1) + '">' + countries[i] +'</li>'); } var arrCapital = []; for(var i=0; i<capitals.length; i++) { arrCapital.push('<li data-index="' + (i+1) + '">' + capitals[i] +'</li>'); } //shuffle the arrays arrCountry = shuffle(arrCountry); arrCapital = shuffle(arrCapital); // once country and capital items are ready, we insert them into DOM $('#source').html(arrCountry.join('')); $('#target').html(arrCapital.join('')); }

Here is what the preceding code does:

• We have defined two arrays named countries and capitals.
• The countries array contains names of 10 countries and the capitals array contains names of the capitals of the countries defined in the countries array. The names of capitals must be in the same order as their respective countries.
• Since we want to display the names of countries and capitals in a random order, we will create two arrays and fill them with list items and shuffle them.
• We started with country first. We declared an array named arrCountry. Then, we loop in the countries array and create a list item with the country name and push it into the arrCountry array.
• The same process is repeated for the capitals array.

An important point to note here is that we are giving a data attribute named index to each list item having a value from 1 to 10. Since we have both the countries and capital names in the same order, index will be used to match which country belongs to which capital.

After both arrays are populated, we will shuffle them so that the order of countries and capitals becomes random. For this, we will use a simple shuffle function from the website http://jsfromhell.com/array/shuffle. The shuffle function is defined as follows:

function shuffle(o) { for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; };

After calling the shuffle function on both arrays arrCountry and arrCapital, the array elements are inserted in DOM after combining them into a single string using the JavaScript join function. The elements in the array arrCountry are inserted in ul with the id value source and those in the array arrCapital are inserted in ul with the id value target.

Open your browser and point it to the index.html file of the Chapter1 folder now. You will see a page similar to the one shown in the following screenshot:

If you reload the page, you will see that the order of countries and capitals changes each time. This is because shuffling creates a new order for items of both lists.

Draggable country names

To make the country names draggable, we will use the draggable component of jQuery UI. As the name suggests, the draggable component allows DOM components to be moved around using a mouse. To do this, go to the $(document).ready() section of our quiz.js file and call another function named initQuiz. The $(document).ready() callback function should look like this now:

$(document).ready(function() { createQuizLayout(); initQuiz(); });

Now define the initQuiz function outside document ready handler as follows:

function initQuiz() { $('#source li').draggable( { revert : true, revertDuration: 200, cursor: "move" }); }

The preceding code calls the draggable method of the jQuery UI library. It is being called upon the li elements of the ul source, which means it will make all the list items draggable inside the source ul. Further, we are also giving the draggable method three options that we need for our application: revert, revertDuration, and cursor. Let's look at these in more detail:

• revert: This decides whether the element being dragged should revert to its original position or not. In our case, we will set it to true. We will drag a country name onto a capital name and revert it to its original position, that is, the country list. Another possible value for revert is false, which means it will stay at the place where it is when dragging stops. The values, valid and invalid, can also be provided (as strings) for the revert option. The value valid means the draggable object will revert only if the draggable object has been dropped on a droppable element. The value invalid means the draggable fuction will revert if the draggable object has not been dropped. Alternatively, a function can also be provided to revert. This is required in complex cases where we need to perform any manipulations. The return value for this function will decide if it will revert or not. If true is returned, the element will revert.
• revertDuration: This defines the duration for the revert option in milliseconds. The lower the value, the faster it will revert. This value is not considered if the revert option is set to false.
• cursor: This is the style of cursor while an element is being dragged.

Our draggable elements are ready now, and so it is time to make the capital names droppable and build the logic to match countries to their correct capitals.

Droppable capital names and scoring

In the previous section, we created an initQuiz function where we made our countries draggable. After the draggable code, write the following code to make the capitals droppable:

var totalScore = 0; $('#score').text(totalScore + ' points.'); $('#target li').droppable( { accept : function(draggable) { if(parseInt(draggable.data('index'), 10) === parseInt($(this).data('index'), 10)) { return true; } else { return false; } }, drop: function( event, ui ) { var that = $(this); that.addClass( "ui-state-highlight" ).html( 'Correct!' ).effect('bounce'); that.droppable('disable'); ui.draggable.addClass('correct ui-state-error'); (ui.draggable).draggable('disable'); totalScore++; $('#score').text(totalScore + ' points.'); if($('li.correct').length == 10) { $( "#dialog-complete" ).dialog({ resizable: false, modal: true }); } } });

Now save the quiz.js file and refresh your browser. You will be able to drag the country names now. Drag a country name to its correct capital and you will see that the country will revert to its original position. The capital list item will show a bounce effect and its text will change to Correct!. Both the country and capital names will be disabled now. You will not be able to drag the country name as well. On the top left hand side, the page will show the score as 1 points.

The screen will look like the following screenshot:

Try the drag and drop for all countries in the left-hand side list. When you have matched all countries correctly, you will see a dialog box and the page will look like the following screenshot:

So, a lot is happening in the preceding code. We will look at it step by step.

We defined a variable named totalScore and set it to 0. We also inserted the score inside the HTML element with the id value score. Each time the quiz starts, the score will be reset as well. After this, we call the droppable method of jQuery UI on the list items of ul with the id value target to make them ready to accept the draggable country elements.

We are using the...