5. Implementing CAPTCHA using Draggable and Droppable | Mastering jQuery UI

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Mastering jQuery UI

By : Vijay Joshi

Mastering jQuery UI

By: Vijay Joshi

Overview of this book

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.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Designing a Simple Quiz Application

1. Designing a Simple Quiz Application

Setting up jQuery UI

Creating the layout

Making the quiz functional

Improving the quiz

Summary

2. Building a Jigsaw Puzzle Game

2. Building a Jigsaw Puzzle Game

Getting ready

Creating the layout

Making the puzzle functional

Improving the puzzle

Summary

3. Creating a Website Tour

3. Creating a Website Tour

Getting ready

Designing the home page

Making the tour functional

Improving the tour

Summary

4. Creating a Tabbed News Reader

4. Creating a Tabbed News Reader

Creating the folder structure

Designing the page

Getting the code structure ready

Adding event handlers in the init method

Displaying posts of a subreddit

Getting comments for a post

Improving MyjqReddit

Summary

5. Implementing CAPTCHA using Draggable and Droppable

5. Implementing CAPTCHA using Draggable and Droppable

Creating the folder structure

Implementing the drag and drop CAPTCHA

Creating the slider CAPTCHA

Creating the number CAPTCHA

Summary

6. Creating an Event Timeline Using a Slider

6. Creating an Event Timeline Using a Slider

Creating the folder structure

Designing the page

Styling the content

Getting the code structure ready

Creating the timeline markup from data

Implementing the timeline functionality

Improving the timeline

Summary

7. Using jQuery UI with Google Maps API

7. Using jQuery UI with Google Maps API

Creating the folder structure

Designing the page

Displaying the map

Improving the functionality

Summary

8. Creating a Photo Album Manager

8. Creating a Photo Album Manager

Creating the folder structure

Designing the page

Creating the JSON file for albums

Getting code structure ready

Implementing the initialize method

Filling album names

Editing, deleting, and rearranging pictures

Improving album manager

Summary

9. Creating Widgets Using the Widget Factory

9. Creating Widgets Using the Widget Factory

The folder structure

Creating a widget to search data in a table

Improving the searchable widget

Creating a widget to display a slideshow

Improving the banner widget

Summary

10. Building a Color Picker with Hex RGB Conversion

10. Building a Color Picker with Hex RGB Conversion

Setting up the folder structure

Writing markup for the page

Styling the content

Implementing the color picker

Improving the Colorpicker

Summary

11. Creating a Fully Functional Dashboard

11. Creating a Fully Functional Dashboard

Setting up the stage

Designing the page

Getting the code structure ready

Initializing the portlets

Implementing sharing buttons

Displaying Flickr photos

Creating a weather widget

Displaying posts from the reddit front page

Creating an image display widget

Improving the portlets

Summary

A. Best Practices for Developing with jQuery UI

A. Best Practices for Developing with jQuery UI

General Guidelines

Using jQuery UI Themeroller to customize a theme

Index

Index

Creating the slider CAPTCHA

In our second implementation, we will use jQuery UI's slider component to create a CAPTCHA. Two numbers between 0 and 100 will be generated from the server and will be stored in session. In the page, a range slider with two handles from 0 to 100 will be displayed. The user will have to drag the slider handles and set the slider values so that they match the values generated from the server side.

Generating minimum and maximum values for the slider

Inside the Chapter5 folder, create a new file named sliderCAPTCHA.php and start by adding the following code to it:

<?php 
  session_start();
  $randomNumber1 = (string)rand(0, 49);
  $randomNumber2 = (string)rand(50, 100);
  $_SESSION['sliderMin'] = $randomNumber1;
  $_SESSION['sliderMax'] = $randomNumber2;
?>

The first line after the PHP opening tag <?php is a call to the session_start function (which you will remember from the previous CAPTCHA implementation). In the next two lines, we generate two random numbers...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Mastering jQuery UI

Search

Your notes and bookmarks