Chapter 1. Designing a Simple Quiz Application

To begin with, we will design a simple quiz application where users have to match country names to their corresponding capital names by dragging a country name over its correct capital. A correct match will result in one point, and drag and drop will be disabled for both the country and its capital.

The display will contain two columns, the first one will have country names and the second one will have the names of the capitals of those countries. Both the columns will be shuffled randomly. Once the user has matched all the names successfully, a modal dialog will appear. Users will also be given the option to reset the quiz. Resetting will restart the game and shuffle the lists again.

Setting up jQuery ...

Get Mastering jQuery UI now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.