WordPress live, custom text box validation, how to?

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:

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;
}