Register

This is an error
This is an error

Captcha Image


How to use:


Include this needed css file ( style-captcha.css ) in your head tag:

<link rel="stylesheet" type="text/css" href="PATH/TO/STYLE/FILE/style/style-captcha.css">

Replace this css file ( style-captcha-rtl.css ) with style-captcha.css if your web page is RTL:

<link rel="stylesheet" type="text/css" href="PATH/TO/STYLE/FILE/style/style-captcha-rtl.css">

You should also include these needed js files in your head tag:

<script type="text/javascript" src="PATH/TO/JS/FILE/src/js/jquery-1.9.1.js"></script> <!-- Required -->
<script type="text/javascript" src="PATH/TO/JS/FILE/src/js/jquery-ui.js"></script> <!-- Required -->
<script type="text/javascript" src="PATH/TO/JS/FILE/jquery-captcha-1.0.0.js"></script> <!-- Plugin -->

Choose a tag with a unique ID in your form or wherever you like to use the captcha:
As you see in the following example we gave a div inside the form the id of "captchaIdImage"
We will use this id in the next step.

<form action="your_php_file.php" class="register active" method="post">
    <h3>Register</h3>
    <div class="column">
        <label>First Name:</label>
        <input type="text" name="fname" id="fname" value="John"/>
    </div>
    <div class="column">
        <label>Last Name:</label>
        <input type="text" id="lname" value="Doe"/>
    </div>
    <div class="bottom">
        <div id="captchaIdImage"></div> <!-- Captcha code goes here -->
        <div class="clear"></div>
        <button type="button" class="btn" name="register" >Register</button>
        <button type="button" class="btn" onclick="$('#captchaIdImage').CaptchaReset(); /* for refreshing captcha*/" >Refresh</button>
    </div>
</form>

Call captcha code:
Now you should enter the ID that we mentioned above like the following line in your body.
Then you should assign a name ( id ) for the first argument. For example; NameOfYourAnswerHiddenInput_Image
This will be the hidden input id which the plugin makes and puts the captcha asnwer in it.
NOTE: The first argument ( required ) will be also used in the next step
The second argument ( required ) is the address of the captchaBuilder folder which is placed in this item
The third argument ( optional )is the Option for the captcha which will be described in the next steps

<script type="text/javascript" >
    $("#captchaIdImage").CaptchaImage("NameOfYourAnswerHiddenInput_Image","PATH/TO/CAPTCHA/BUILDER/FOLDER/captchaBuilder", options);
</script>

In your php file to which the form data will be sent ( "your_php_file.php"):
In order to check whether the captcha answer is true or false you should firstly include the session_start() method at the beginning of codes
Then include captchaSecure.php file which is in captchaBuilder folder and initialize the captchaSecure class
There is a public function named check() in captchaSecure class that has an argument. This argument is the exact input hidden value we had given in previous steps

<?php
session_start(); /* You must start session. This is Required for checking captcha */
if(isset($_POST['register']))
{
    require_once 'PATH/TO/CAPTCHA/BUILDER/FOLDER/captchaBuilder/captchaSecure.php';
    $secret = new captchaSecure();
    if($secret->check($_POST['NameOfYourAnswerHiddenInput_Image']))
    {
        // If captcha is true
        // Write your surce code
        echo 'Hello '.$_POST['fname'].' '.$_POST['lname'];
    }
    else
    {
        echo "Captcha is false";
    }
}
else
{
    echo "Form is not sent";
}
?>


Options

Remember the third argument we talked above. You can set these below parameters in options argument otherwise the default will be set as your captcha options.
Please also see the below example.

Params Type Example Description Default
colorCaptchaSquare String 666666 Set background of left square 153f56
colorAnswerSquare String 666666 Set background of right square 153f56
colorSmallSquare String 999999 Set color for small background in left 0e5b83
colorAnswerSquareActive String 999999 Set background of right square when drag starts 0e5b83
size String large small, medium or large medium
type String drag Captcha event ( drag or click ) drag
rtl Boolean false If your web page is RTL this must be true false
ondragCaptcha Function name_of_your_function When items are dragged this function will be called ( only for drag type ) null
ondropCaptcha Function name_of_your_function When items are dropped this function will be called ( only for drag type) null
onclickCaptcha Function name_of_your_function When items are clicked this function will be called ( only for click type ) null

Example:

<script type="text/javascript" >
    $("#captchaIdImage").CaptchaImage(
        "NameOfYourAnswerHiddenInput_Image",
        "PATH/TO/CAPTCHA/BUILDER/FOLDER/captchaBuilder",
        {
            colorCaptchaSquare: '666',
            colorAnswerSquare: '666',
            colorSmallSquare: '999',
            colorAnswerSquareActive: '999',
            size: 'large',
            type: 'drag',
            rtl: false,
            ondragCaptcha: callback_drag,
            ondropCaptcha: callback_drop
        }
    );

    function callback_drag()
    {
        // when images are dragged this function is called
    }
    function callback_drop()
    {
        // when images are dropped this function is called
    }
</script>