Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am teaching British Sign Language on my website, on the alphabet section I have an image of 'signs' that spell out a word. Below I would like a text box that requires the user to input the correct word and for the text box to validate live and appear with a tick next to it.

Much like the functionality of the 'Homepage Example' seen here where you have to enter the word 'hello':

http://livevalidation.com/examples#exampleStyles[1]

Does anyone know how I would implement this on a Wordpress Site, or is there a plugin that allows custom or 'this type' of validation?

I have been searching and reading for hours and only being a novice at programming I am unable to find a solution.

I am trying to keep my site clean and easy to use. I know a quiz or something similar would work, but it's too many clicks, too bloated etc. I just want a quick text box that turns green or a tick appears when the correct answer is entered.

I am also aware that plugins such as Gravity Forms & Contact Form 7 do validate but only dates & email addresses etc.

Any help is greatly appreciated!

share|improve this question
    
Sounds like a neat project but it may be "too localized" for this site, and if you don't know how to write PHP you may be better off hiring someone. –  s_ha_dum Feb 24 '13 at 14:25

1 Answer 1

up vote 1 down vote accepted

If you are looking for a shortcode like this:

[question text="What has four legs?" answer="Horse" message="Right answer!" messageid="message1" ]

with output like this:

enter image description here

then here is a very simple non-jQuery skeleton version:

add_shortcode('question','question_func_wpse_88192');
function question_func_wpse_88192($atts, $content = null ){
    extract( shortcode_atts( array(
        'text' => '',
        'answer' => '',
        'message' => 'Right answer!',
        'messageid' => 'message', 
    ), $atts ) );

    // format input:
    $messageid=esc_attr($messageid);
    $answer=strtolower(esc_attr($answer));
    $text=esc_attr($text);
    $message=esc_html($message);

    // inline js:
    $onkeyup="this.value.toLowerCase()=='".$answer."'?getElementById('".$messageid."').style.display='inline':getElementById('".$messageid."').style.display='none';";

    // html output:
    $output  = "<div class=\"question\">";
    $output .= "<span class=\"question_text\">".$text."</span>";
    $output .= "<input type=\"text\" class=\"question_input\"";
    $output .= " onkeyup=\"".$onkeyup."\" />";
    $output .= "<span id=\"".$messageid."\" class=\"question_message\" style=\"display:none;\">".$message."</span>";
    $output .= "</div>";

    return $output;
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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