我在我的网站上教英国手语，在字母部分，我有一个拼写单词的“符号”图像。下面我想要一个文本框，要求用户输入正确的单词，文本框验证live并在旁边显示一个勾号。
很像这里看到的“主页示例”的功能，您必须输入单词“hello”：
http://livevalidation.com/examples#exampleStyles[1]
是否有人知道我将如何在Wordpress网站上实现这一点，或者是否有允许自定义或“这种类型”验证的插件？
我已经搜索和阅读了几个小时，但作为编程新手，我无法找到解决方案。
我正在努力保持我的网站干净和易于使用。我知道一个测验或类似的东西会有用，但点击次数太多，太臃肿等。我只想要一个快速文本框，当输入正确答案时，它会变成绿色或出现勾号。
我也知道重力等插件；联系人表格7确实有效，但仅日期和；电子邮件地址等。
非常感谢您的帮助！
最合适的回答,由SO网友:birgire 整理而成
如果您正在寻找这样的短代码：
[question text="What has four legs?" answer="Horse" message="Right answer!" messageid="message1" ]
输出如下：
下面是一个非常简单的非jQuery框架版本：
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;
}
