Clic Captcha is a Captcha that simulates the "pairs game", created with php 5.3,
the Captcha shows an image which you must select its par image in the image grid,
so on until the end of the test
Magnific Popup is used to visualize the image grid, it is a lightbox that uses "iframe" with jquery 1.9.1:


For the grid works it is required:
Css files:
<link rel="stylesheet" href="cliccaptcha/magnific-popup.css">
<link rel="stylesheet" href="page.css">

Javascript files:
<script src="cliccaptcha/jquery-1.9.1.min.js"></script>
<script src="cliccaptcha/jquery.magnific-popup.min.js"></script>
<script src="page.js"></script>

A "button" and a link "<a>" are inserted in the page This is the html code:
<button id="validacion" type="submit" form="form1" value="Submit" onclick="OpenGrid()">Soy un robot ??</button>
<a id="myiframe" class="popup-iframe" href="cliccatpcha/index.php"></a>

In the javascript file of the page, "page.js", next code is included:
function OpenGrid(){
    $('#myiframe').click();
}
function CambiaBotonTxt(m){
    $('#validacion').html(m);
}
$(document).ready(function() {
    $.ajax({dataType:"json", url:"cliccaptcha/index2.php", data:{"ztxt":1}, success:function(d){CambiaBotonTxt(d["txt"]);}});
    $('.popup-iframe').magnificPopup({type:'iframe'});
});
To use this Captcha in PHP files, reference is made to the session variable $_SESSION["pc"]["Valid"]
to evaluate the code according to this variable; its value will be "true" if the Captcha was completed
<? php
session_start();

if(!$_SESSION["pc"]["Valido"]){
    echo "No ha pasado la prueba del robot";
    exit();
}
?>


Example














Configuration

 It is important!! adjust iframe size and update image directory
In the file "config.php" you will find the session variables that are used to configure the Captcha:

$_SESSION["pc"]["DirData"]
Directory where the "sqlite" database and the language files are located

$_SESSION["pc"]["DirImages"]
Directory where the image files that the grid can use are located

$_SESSION["pc"]["DirTempPair"]
Directory where the par image is temporarily saved

$_SESSION["pc"]["DirTempGrid"]
Directory where the images of the displayed grid are temporarily saved

$_SESSION["pc"]["CacheClearPair"]
Number of accumulated files of the even image in the temporary directory before being deleted

$_SESSION["pc"]["CacheClearGrid"]
Number of accumulated files from the grid in the temporary directory before being deleted

$_SESSION["pc"]["Rows"]
Number of grid rows

$_SESSION["pc"]["Cols"]
Number of grid columns

$_SESSION["pc"]["Pasos"]
Number of times the grid will be viewed and validated before the user is accepted

$_SESSION["pc"]["CaptchaLive"]
Captcha life in seconds being still valid in the database

$_SESSION["pc"]["CaptchaWait"]
Waiting seconds to click on the grid before invalidating the Captcha

$_SESSION["pc"]["CaptchaTimeSecs"]
Time in seconds that if the grid is clicked, the selected image will not be valid,
this serves to avoid the automation of some robot giving fast clicks

$_SESSION["pc"]["language"]
Language of the texts displayed in the Captcha process
Available in two languages: es = Spanish, eng = English
The language files are in the "data" directory
Example: the Spanish language is contained in the file "lang-es.php"

$_SESSION["pc"]["ClickErrorsMax"]
Number of failed clicks for the Captcha to reset from scratch (var Pasos)
For security leave value=1

Iframe dimensions

 The Magnific Popup iframe occupies almost the entire screen, to adapt it to the size of the grid is necessary
change the dimensions in the file "magnific-popup.css":

Adjust width, height and left until the content is centered

Execution options

path/to/captcha/index.php?do=update
Scan the image directory to update the database
It must be run every time the images directory changes, if any image is added or deleted
See configuration variables:
$_SESSION["pc"]["DirImages"]

path/to/captcha/index.php?do=clean
Delete all expired content from the temporary directories of the grid and even image
See configuration variables:
$_SESSION["pc"]["CacheClearPair"]
$_SESSION["pc"]["CacheClearGrid"]


Downloads

DescriptionFile
Php codecliccaptcha.zip
Images set #1(500 files)imagenes1.zip
Images set #2(500 files)imagenes2.zip
The DONATIVE helps running webpage
* The sets of images are already modified in their dimensions

The image sets are unzipped and the files moved to the image directory: "path/to/captcha/imagenes/"
after the Database is updated, then execute: path/to/captcha/index.php?do=update


License

 You can include and modify the code in any project but you cannot charge money for the Captcha code
Regarding the sets of images, they are free images according to the site pixabay.com

© 2021  jcarrascochih@gmail.com