Grow your CSS skills. Land your dream job.

Where to find/How to create a Question Captcha

  • # December 1, 2009 at 1:41 pm

    Ok, you all have seen the "Enter the letters in the image" captcha. But I would like to know how to create a question-based captcha, such as "What color is snow/sky/grass/etc." or even a simple addition captcha like "What is 2+1" etc. with a different question/answer on reload, say 5 possibilities.

    Anyone have any good resources? I did some Google searches, came back with some hits, but nothing to write home about.

    Chris, how about doing a tut on creating one?

    Thanks!

    –Jason A.

    # December 1, 2009 at 1:51 pm

    It’s not really a "captcha" at this point, it’s just an extra form input. When processing the form, just check the value of that input. If it’s what you want, continue processing, if it’s not, stop and output a message of the failure.

    # December 2, 2009 at 9:59 am

    You could do something like this.

    Code:
    < ?php

    // Start Sessions to store the question
    session_start();

    // The numbers are hooks, so we can pull a specific question
    $questions = array(
    1 => array(
    ‘question’ => ‘1 + 3′,
    ‘answer’ => ‘4’
    ),
    2 => array(
    ‘question’ => ‘What is the color of snow’,
    ‘answer’ => ‘white’
    )
    );

    function create_question() {
    global $questions;

    $question_id = rand(1, count($questions));

    // Will generate something like $questions[1]
    $question = $questions[$question_id];

    // Store the question id in a session
    $_SESSION['question_id'] = $question_id;

    echo $question['question'];
    }

    function get_answer() {
    global $questions;

    $q_id = $_SESSION['question_id'];

    return $questions[$q_id]['answer'];
    }

    ?>

    When you want to add a new question, do something like this

    Code:
    3 => array(
    ‘question’ => ‘5 + 6′,
    ‘answer’ => ’11’
    )

    And then add that to the end of the questions array (so it will look like this)

    Code:
    $questions = array(
    1 => array(
    ‘question’ => ‘1 + 3′,
    ‘answer’ => ‘4’
    ),
    2 => array(
    ‘question’ => ‘What is the color of snow’,
    ‘answer’ => ‘white’
    ),
    3 => array(
    ‘question’ => ‘5 + 6′,
    ‘answer’ => ’11’
    )
    );

    To add a question to your form

    Code:

    To check the answer from the user

    Code:
    < ?php

    if( isset($_POST['submit']) ) {
    $validate = $_POST['validate'];

    if( $validate != get_answer() ) {
    $error_message['validate'] = "Your Answer is incorrect";
    }
    }else {
    // Display Form
    }

    ?>

    – Baylor

    # December 5, 2009 at 8:59 pm

    Awesome, thanks Chris and Baylor.

    # December 6, 2009 at 4:58 pm

    It looks like theres a pile of php classes out there you can use to make math captchas. Here’s one:
    http://www.phpclasses.org/browse/package/4785.html

    # December 8, 2009 at 11:30 am

    Hey, Guys–

    I am using Baylor’s code from above for this.

    Not getting the validation to recognize an incorrect answer. I’m also not getting a display message saying that my answer is incorrect. I am getting the email, though, when I hit submit I’ll past my complete PHP code first, then break down what is new and what I had before. Perhaps it’s my ordering? I am using the jQuery Validation plug-in to validate the form client-side. My validation is catching when the field is blank, though.

    Do I need to put the 3rd chunk into my HTML near the actual question?

    Sorry for being dense on this, and thanks for any help.

    Complete code (new stuff with my old stuff):

    Code:
    < ?php
    // The numbers are hooks, so we can pull a specific question
    $questions = array(
    1 => array(
    ‘question’ => ‘1 + 4′,
    ‘answer’ => ‘5’
    ),
    2 => array(
    ‘question’ => ‘What is the color of snow’,
    ‘answer’ => ‘white’
    )
    );

    function create_question() {
    global $questions;

    $question_id = rand(1, count($questions));

    // Will generate something like $questions[1]
    $question = $questions[$question_id];

    // Store the question id in a session
    $_SESSION['question_id'] = $question_id;

    echo $question['question'];
    }

    function get_answer() {
    global $questions;

    $q_id = $_SESSION['question_id'];

    return $questions[$q_id]['answer'];
    }

    if( isset($_POST['submit']) ) {
    $captcha = $_POST['captcha'];

    if( $captcha != get_answer() ) {
    $error_message['captcha'] = “Your Answer is incorrect”;
    }
    }else {
    // Display Form
    }

    //If the form is submitted
    if(isset($_POST['submit'])) {

    //Check to make sure that the name field is not empty
    if(trim($_POST['contactname']) == ”) {
    $hasError = true;
    } else {
    $name = trim($_POST['contactname']);
    }

    //Check to make sure that the Company field is not empty
    if(trim($_POST['company']) == ”) {
    $hasError = true;
    } else {
    $company = trim($_POST['company']);
    }

    //Check to make sure sure that a valid email address is submitted
    if(trim($_POST['email']) == ”) {
    $hasError = true;
    } else if (!eregi(“^[A-Z0-9._%-]+@[A-Z0-9._%-]+.[A-Z]{2,4}$”, trim($_POST['email']))) {
    $hasError = true;
    } else {
    $email = trim($_POST['email']);
    }

    //Check to make sure that the Budget field is not empty
    if(trim($_POST['budget']) == ”) {
    $hasError = true;
    } else {
    $budget = trim($_POST['budget']);
    }

    //Check to make sure that the Timeline field is not empty
    if(trim($_POST['timeline']) == ”) {
    $hasError = true;
    } else {
    $timeline = trim($_POST['timeline']);
    }

    //Check to make sure comments were entered
    if(trim($_POST['message']) == ”) {
    $hasError = true;
    } else {
    if(function_exists(‘stripslashes’)) {
    $comments = stripslashes(trim($_POST['message']));
    } else {
    $comments = trim($_POST['message']);
    }
    }

    //If there is no error, send the email
    if(!isset($hasError)) {
    $emailTo = ‘mail@jasonandreoni.com'; //Put your own email address here
    $body = “Name: $name nCompany: $company nEmail: $email nPhone: $phone nWebsite: $website nBudget: $budget nTimeline: $timeline nHear: $hear nComments: $comments”;
    $headers = ‘From: JASONANDREONI.COM < '.$emailTo.'>‘ . “rn” . ‘Reply-To: ‘ . $email;
    $subject = “JA.COM – REQUEST FOR A FREE QUOTE”;

    mail($emailTo, $subject, $body, $headers);
    $emailSent = true;
    }
    }
    ?>

    First new bit:

    Code:
    // The numbers are hooks, so we can pull a specific question
    $questions = array(
    1 => array(
    ‘question’ => ‘1 + 4′,
    ‘answer’ => ‘5’
    ),
    2 => array(
    ‘question’ => ‘What is the color of snow’,
    ‘answer’ => ‘white’
    )
    );

    function create_question() {
    global $questions;

    $question_id = rand(1, count($questions));

    // Will generate something like $questions[1]
    $question = $questions[$question_id];

    // Store the question id in a session
    $_SESSION['question_id'] = $question_id;

    echo $question['question'];
    }

    function get_answer() {
    global $questions;

    $q_id = $_SESSION['question_id'];

    return $questions[$q_id]['answer'];
    }

    Second new bit:

    Code:
    if( isset($_POST['submit']) ) {
    $captcha = $_POST['captcha'];

    if( $captcha != get_answer() ) {
    $error_message['captcha'] = “Your Answer is incorrect”;
    }
    }else {
    // Display Form
    }

    My original code:

    Code:
    //If the form is submitted
    if(isset($_POST['submit'])) {

    //Check to make sure that the name field is not empty
    if(trim($_POST['contactname']) == ”) {
    $hasError = true;
    } else {
    $name = trim($_POST['contactname']);
    }

    //Check to make sure that the Company field is not empty
    if(trim($_POST['company']) == ”) {
    $hasError = true;
    } else {
    $company = trim($_POST['company']);
    }

    //Check to make sure sure that a valid email address is submitted
    if(trim($_POST['email']) == ”) {
    $hasError = true;
    } else if (!eregi(“^[A-Z0-9._%-]+@[A-Z0-9._%-]+.[A-Z]{2,4}$”, trim($_POST['email']))) {
    $hasError = true;
    } else {
    $email = trim($_POST['email']);
    }

    //Check to make sure that the Budget field is not empty
    if(trim($_POST['budget']) == ”) {
    $hasError = true;
    } else {
    $budget = trim($_POST['budget']);
    }

    //Check to make sure that the Timeline field is not empty
    if(trim($_POST['timeline']) == ”) {
    $hasError = true;
    } else {
    $timeline = trim($_POST['timeline']);
    }

    //Check to make sure comments were entered
    if(trim($_POST['message']) == ”) {
    $hasError = true;
    } else {
    if(function_exists(‘stripslashes’)) {
    $comments = stripslashes(trim($_POST['message']));
    } else {
    $comments = trim($_POST['message']);
    }
    }

    //If there is no error, send the email
    if(!isset($hasError)) {
    $emailTo = ‘mail@jasonandreoni.com'; //Put your own email address here
    $body = “Name: $name nCompany: $company nEmail: $email nPhone: $phone nWebsite: $website nBudget: $budget nTimeline: $timeline nHear: $hear nComments: $comments”;
    $headers = ‘From: JASONANDREONI.COM < '.$emailTo.'>‘ . “rn” . ‘Reply-To: ‘ . $email;
    $subject = “JA.COM – REQUEST FOR A FREE QUOTE”;

    mail($emailTo, $subject, $body, $headers);
    $emailSent = true;
    }
    }

    # December 9, 2009 at 11:49 am

    I uploaded a video on creating a captcha using this technique.

    You can find it on youtube. http://www.youtube.com/watch?v=OW3NolAqsqk

    # December 9, 2009 at 1:06 pm

    Wow, that’s great Baylor, thanks! I’ll run through this tonight from scratch. I’m not getting the "undefined variable" error any more, but the captcha is just not validating and the form is going through. Hopefully going from scratch will shake some things loose.

    I’ll let you know!

    "BaylorRae" wrote:
    I uploaded a video on creating a captcha using this technique.

    You can find it on youtube. http://www.youtube.com/watch?v=OW3NolAqsqk

    Anonymous
    # September 5, 2012 at 6:24 pm

    css-tricks.com is a one of the more impressive phorums I’ve seen. Thanks so much for keeping the internet classy for a change. Youve got style, class, bravado. I mean it. Please keep it up because without the internet is definitely lacking in intelligence.

    # September 6, 2012 at 4:52 am

    You could also ask your users if they are humans. If the answer is any kind of yes, you process, else, you kill.

    mll
    # April 19, 2013 at 7:16 am

    Hi everyone! I am a 2 second old member now :D I just registered for this. How to make a captcha like this in sql? THx

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".