Description

Create an in house Bot Detection Image Verification Application, a CAPTCHA.

User Flow:

A user loads the bot detection captcha and is instructed to select all dogs. The CAPTCHA shows a collection of images including cats and dogs. The user picks all the dogs, leaving only cat images, and clicks submit. The CAPTCHA validates successfully, notifies the user, and resets to a fresh CAPTCHA state.

Requirements:

• Display a 3x3 grid filled with random generated images sized 200x200 in pixels.
• The random generated images will be either of a cat or a dog.
• Use a service like LoremFlickr for requesting these images.
• Randomly decide which animal type should be the target of the CAPTCHA: Cats or Dogs.
• The target is how we will validate this captcha and it will direct the user's actions
• Use this for the following prompt: “Select all images that contain dogs”
• Toggle the animal images when they are picked.
• When a user clicks on an image of any animal, replace it with an image of the other animal.
• Example: if I click a cat image, replace it with a dog image. If I click a dog image, replace it with a cat image.
• Validate the CAPTCHA upon user submission
• When a user clicks the submit button, determine if the CAPTCHA is valid.
• All visible images should be the opposite animal of the CAPTCHA target.
• For ex: If the target is CATS, the user should have clicked all the cats, leaving only dog images.
• If its valid, display a success message and generate a new grid.
• If its not valid, display a failure message and generate a new grid.