Joshi Mastering jQuery UI

Become an expert in creating real-world Rich Internet Applications using the varied components of jQuery UI
1. Auflage 2025
ISBN: 978-1-78328-666-9
Verlag: De Gruyter
Format: PDF
Kopierschutz: Adobe DRM (»Systemvoraussetzungen)

E-Book, Englisch, 312 Seiten

If you are a frontend developer with considerable knowledge of jQuery UI and want to take this expertise to the next level, then this book is for you.

Autoren/Hrsg.

Joshi, Vijay

Fachgebiete

• Mathematik | Informatik EDV | Informatik Programmierung | Softwareentwicklung Software Engineering

Leseproben

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 file for editing and write the following code:

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

On the document ready event we call a function named 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[i] +'

'); } var arrCapital = []; for(var i=0; i

' + capitals[i] +'

'); } //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 and .
• The array contains names of 10 countries and the 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 . Then, we loop in the array and create a list item with the country name and push it into the array.
• The same process is repeated for the array.

An important point to note here is that we are giving a data attribute named to each list item having a value from 1 to 10. Since we have both the countries and capital names in the same order, 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 function from the website http://jsfromhell.com/array/shuffle. The 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 function on both arrays and , the array elements are inserted in DOM after combining them into a single string using the JavaScript function. The elements in the array are inserted in with the value and those in the array are inserted in with the id value .

Open your browser and point it to the file of the 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 component of jQuery UI. As the name suggests, the component allows DOM components to be moved around using a mouse. To do this, go to the section of our file and call another function named . The callback function should look like this now:

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

Now define the function outside document ready handler as follows:

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

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

• : This decides whether the element being dragged should revert to its original position or not. In our case, we will set it to . 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 is , which means it will stay at the place where it is when dragging stops. The values, and , can also be provided (as strings) for the option. The value means the draggable object will revert only if the draggable object has been dropped on a droppable element. The value means the 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 value for this function will decide if it will revert or not. If is returned, the element will revert.
• : This defines the duration for the option in milliseconds. The lower the value, the faster it will revert. This value is not considered if the revert option is set to .
• : 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 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 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 and set it to . We also inserted the score inside the HTML element with the value . Each time the quiz starts, the score will be reset as well. After this, we call the method of jQuery UI on the list items of with the value to make them ready to accept the draggable country elements.

We are using the...

Über Autor(innen)

Joshi Vijay :

Vijay Joshi is a full stack web developer having more than a decade of experience in working with PHP and JavaScript.