Simple PHP math captcha image

Simple PHP math captcha image

Friday, June 22nd, 2007 in PHP

math captcha image There are tons of captcha scripts on the web. The problem is that, from the enthusiasm of making them more flexible, a lot of code and pages are added and instead of a simple solution one may end up with several files necessary to display the captcha image. I’m not saying that they are useless, but for most of the time, such complexity is not quite welcomed. I strongly believe that less is more and that things should be kept simple. Having that in mind, I want to share a way to protect your forms using a math captcha image that requires a single file and a font file.

This is a very simple, easy to understand example that shows you how to display a math captcha image that requires the user to do a little thinking. Simple operation like subtraction or addition is displayed on the math captcha and the user needs to input the result. Math captcha result is stored in session and from the page doing the form validation you just need to compare the value from session with the value that the user inputed.

If you want to implement the code ‘as is’, you have several options you can set. To do that, open image.php and play with the following settings:

11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// captcha width
$captcha_w = 150;
// captcha height
$captcha_h = 50;
// minimum font size; each operation element changes size
$min_font_size = 12;
// maximum font size
$max_font_size = 18;
// rotation angle
$angle = 20;
// background grid size
$bg_size = 13;
// path to font - needed to display the operation elements
$font_path = 'fonts/courbd.ttf';
// array of possible operators
$operators=array('+','-','*');
// first number random value; keep it lower than $second_num
$first_num = rand(1,5);
// second number random value
$second_num = rand(6,11);

$captcha_w and $captcha_h are the math captcha width and height values. For each of the operation’s elements, font will vary on each page load/reload. To set the minimum and maximum font sizes used to display the elements, set a minimum font size on $min_font_size and a maximum font size on $max_font_size. I think it’s obvious that the font size must be significantly smaller than the math captcha height, otherwise you’ll end up with an image showing only parts of the operators used so don’t exagerate on the max font size.

Again, for each element from the captcha, you can set a rotation angle. The angle takes values from -angle to angle in a random way. If for example you set this to 10 degrees, it will take values from anything in between -10 to 10.

On the background, the captcha displays a grid. To set the size of that grid, you’ll need to change the $bg_size value to whatever you feel comfortable with. The grid starts from top left, so any loose ends will end up on the right and bottom.

This captcha uses the GD library with freetype support. This means that the math operation displayed on the captcha uses a true type font that must be uploaded on the server and you’ll need to provide the path to that font file ( in this example’s case courbd.ttf). You can use any other font you want or like but always remember to set its path on the $font_path variable. For example you could use multiple fonts like this:

1
2
3

$my_fonts = array('font_file_1.ttf','font_file_2.ttf','font_file_3.ttf'...);
$element = rand(0, count($my_fonts)-1 );
$font_path = $my_fonts[$element];

Where font_file_1.ttf … include the complete path to the font files.

The last 3 variables ( $operators, $first_num and $second_num ) are the actual operation elements. You can extend the $operators array with let’s say division, but you’ll end up with operations that probably are a little hard for humans ( for example: 11/7 ) so stickying to this example’s values would be more than enough. Again, to not confuse the user, keep the second operand ($second_num) bigger that the first one ( $first_num ) so that you won’t end up with negative values that may confuse people ( ie: 3-9 ).

The rest of the script is for display purposes and it’s the actual code that displays the captcha. You probably won’t even have to change anything, but if you do, all the code is commented so I’m more than sure you’ll find your way.

Related posts

Was this useful? Show your support.

digg Simple PHP math captcha image

52 comments

prev( )
  1. Sofia says:
    May 24, 2011 at 4:22 AM

    Hi, im trying to have a math captcha in my registration form, but having trouble with setting it up in my form. sorry for the large code. If i change the value of $_POST['Submit'] to something else like $_POST['Submit1'] and then same for the math image captcha then it works, but i would like it to work as part of the form, makes sense? lol right now the form just posts the value and doesnt check for captcha values! if someone could help me out here that would be great! thank you.

    0) {//Email already been used
    header( “Location:Messages.php?msg=11″ );
    exit();
    }else{
    $query=(“Select * from user where uname=’$name’”);
    $result= mysql_query($query);
    $num=mysql_num_rows($result);
    if ($num > 0) {//Username already exist
    header( “Location:Messages.php?msg=6″ );
    exit();
    }else{
    //if username does not exist insert user details
    $query=( “INSERT INTO user (uname, pw,email,date_joined,ip,level) VALUES (‘$name’,md5(‘$pw1′),’$email’,NOW(),’$ip’,'Normal’)”);
    if (@mysql_query ($query)) {
    header(“location:login.php?reg=1″);
    exit;
    }
    }
    }
    mysql_close();
    }
    ?>


    Registration


    function reloadCaptcha()
    {
    document.getElementById(‘captcha’).src = document.getElementById(‘captcha’).src+ ‘?’ +new Date();
    }

    New User Registration

    Name

    Email

    Password

    Confirm Password

    Reply
prev( )

Leave a comment