Use PHP to shuffle list and create random value for form input then validate?

Question

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>

Danijel · Accepted Answer · 2014-07-07 11:44:35Z

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.

edited Jul 7, 2014 at 11:44

answered Jul 5, 2014 at 14:20

Danijel

12.8k5 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

mattroberts33 Over a year ago

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 =)

mattroberts33 Over a year ago

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!

mattroberts33 Over a year ago

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> =)

Danijel Over a year ago

@mattroberts33, I updated the answer, now js will add class .error to label if submit is invalid.

Danijel Over a year ago

@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' );

|

Tanatos · Accepted Answer · 2014-07-06 06:27:27Z

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>

edited Jul 6, 2014 at 6:27

answered Jul 5, 2014 at 13:19

Tanatos

1,9271 gold badge13 silver badges13 bronze badges

6 Comments

mattroberts33 Over a year ago

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)

mattroberts33 Over a year ago

It seems to always say "Wrong answer!". I really like this solution so far though, just gotta get it working!

Tanatos Over a year ago

Made a few modifications.

mattroberts33 Over a year ago

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?

mattroberts33 Over a year ago

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?

|

Collectives™ on Stack Overflow

Use PHP to shuffle list and create random value for form input then validate?

2 Answers 2

EDIT: The PHP solution.

9 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

EDIT: The PHP solution.

9 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related