Implementing the drag and drop CAPTCHA

For our first implementation, as mentioned previously, we will first create an array of five color names. Then, we will generate a random number between zero and four and pick the color on that index from the array. This color name will be saved in session for validation later on. Then, we will create five colored boxes in HTML and set their background color using the color names defined in the array earlier. We will then create a separate div where the user will drag and drop a colored box. Finally, we will make the dragging and dropping functional.

As far as rules go, we will apply two restrictions: the droppable box could have only one colored box inside it at a time and second, users should also be able ...

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.