0

I understand the name of this question is a little vague, not sure how to phrase it short enough but here is my question: I have a form, and at the end of the form I want to add an input that asks the user (for example) what 1 + 7 is, and the only accepted value can be 8 - except I want to use PHP to randomize the number between 2 and 9 on page load, how do I go about doing that?

Here is the input:

<label>What is $question?
<input type="text" id="human" placeholder="What is it?"></label>

The way I picture this I see two end variables, one being the question and the other being the answer. There would be a series of questions with the appropriate answers that would be shuffled on page load. Like 1+1, 1+2, 1+3, 4+4, 3+6, etc... and the PHP would have some fun with that in the background before a bot can determine what the value is.

I can sort of read PHP, I just don't know where to start when writing it. All help is appreciated!


Based on what you gave me for the above answer, this is what I've come up with for the alternate code I'm using here (it obviously doesn't work though haha):

EDIT: I actually got it working, you can view the working code below... but if you could take a look and polish it that would be awesome =)

<div>
    <div><label id="question-label"><span data-tooltip class="has-tip tip-top" title="This is how we know you're actually human!" id="question-tip-f"><span id="question-f"></span>?</span> <span class="star">*</span></label></div>
    <div><input type="text" id="human-f" placeholder="What is it?"></div>
</div>

<script>
var num1 = Math.floor( Math.random()*9 ) + 1,
    num2 = Math.floor( Math.random()*9 ) + 1,
    result = num1 + num2;
document.getElementById( 'question-f' ).innerHTML = num1 + ' + ' + num2;
document.getElementById( 'form-footer' ).addEventListener( 'submit', function(e) {
    var el = document.getElementById( 'human-f' );
    var ql = document.getElementById( 'question-tip-f' );
    if ( el.value != result ) {
        ql.parentNode.setAttribute( "class", 'error' );
        e.preventDefault();         
    }
});
</script>
0

2 Answers 2

1

Here's a simple client side example. I generates random numbers and prevents form submission if the field is blank or has wrong value. PHP solution is more bullet proof, and will involve sessions, similar as captcha.

<form id="myform" action="index.php" method="post">
    <label>What is <span id="question"></span>
    <input type="text" id="human" placeholder="What is it?"/></label>
    <input type="submit">
</form>
<script>
    var num1 = Math.floor( Math.random()*9 ) + 1,
        num2 = Math.floor( Math.random()*9 ) + 1,
        result = num1 + num2;

    document.getElementById( 'question' ).innerHTML = num1 + ' + ' + num2;

    document.getElementById( 'myform' ).addEventListener( 'submit', function(e) {
        var el = document.getElementById( 'human' );
        if ( el.value != result ) {
            el.parentNode.setAttribute( "class", 'error' ); // add .error class to label
            e.preventDefault();         
        }
    });
</script>

FIDDLE


EDIT: The PHP solution.

The statement

PHP solution is more bullet proof, and will involve sessions, similar as captcha.

in my original answer is ambiguous. While writing that I forgot the main reason why I offered JavaScript solution in the first place. In practice it realy does not matter. Any solution that will show the question as a machine-readable text can be easily solved and bypassed. More secure way is to use an image verification, ie captcha, and place the question as obfuscated text inside image.

9
  • I'll test your answer, I really would rather be using PHP for this, but I do appreciate your answer and maybe I'll find a use for it =) Jul 5, 2014 at 19:38
  • My friend, your answer doesn't technically solve the question, but it does solve the problem and it actually goes beyond that and only allows the form to be processed if the answer it right! The only problem is that a computer with a bot could just turn off JS and have their way with it haha. I'm going to go ahead and give you the big green check though! Jul 6, 2014 at 18:16
  • The only thing I ask of you is if you could add that when the submit button is clicked and the result is returned as error that .error class will be added to the <label> =) Jul 6, 2014 at 18:21
  • 1
    @mattroberts33, I updated the answer, now js will add class .error to label if submit is invalid.
    – Danijel
    Jul 6, 2014 at 18:51
  • 1
    @mattroberts33. Usually labels are bound to an input element by using "for" attribute, so you can put for="human-f" attribute inside label and use document.querySelector( "label[for='human-f']" ).setAttribute( "class", 'error' ); ( querySelector is not supported in IE<8). Or, since you have put the id attribute in label just use getElementById like document.getElementById( 'question-label' ).setAttribute( "class", 'error' );
    – Danijel
    Jul 9, 2014 at 12:16
1

Try this (make sure you have session_start() at the top of the page) :

<?php
session_start();
$_SESSION['numbers'] = array(rand(2,9),rand(2,9));
$question = 'What is '.$_SESSION['numbers'][0].' + '.$_SESSION['numbers'][1].' ?';
$error = 0;
$error_msg = 'Wrong answer!';
if(isset($_POST)) {
   $correct_answer = $_SESSION['numbers'][0] + $_SESSION['numbers'][1];
   if(intval(trim($_POST['human'])) != $correct_answer) {
      $error = 1;
   }
}
?>
<label><?php echo $question; ?><input type="text" name="human" id="human" placeholder="What is it?" value="<?php echo (($error == 1) ? $error_msg : ''); ?>" /></label>
6
  • I like this so far, sorry I saw your answer earlier but I was out, any ways I'm about to test this - is there any way we can echo "Wrong answer!" in the input box itself or make the question text turn red? I don't have any room for text to appear (good for testing purposes though of course) Jul 5, 2014 at 19:37
  • It seems to always say "Wrong answer!". I really like this solution so far though, just gotta get it working! Jul 5, 2014 at 20:03
  • Made a few modifications.
    – Tanatos
    Jul 6, 2014 at 3:10
  • This actually caused an Internal Server Error, not sure what happened, I tried a few things out but as long as that 'if' statement is on the page there is an Internal Server Error. Any ideas? Jul 6, 2014 at 5:54
  • Okay nevermind I don't want it to say anything at all then if it isn't right, it's not what I thought it would be and it's not worth the time figuring out haha, how do I stop the form from being submitted if this answer isn't right though? Jul 6, 2014 at 6:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.