如何在html中创建弹出窗口以解锁网站

Question

我正在为一个孩子创建一个网站（用HTML格式）。我希望每次网站打开时都会显示一个弹出窗口。这个窗口将有简单的数学问题（对于一年级学生），用户需要回答才能继续。有任何想法吗？谢谢:)）

Answer 1

您想使用像colorbox这样的jquery插件来创建弹出窗口：http://www.jacklmoore.com/colorbox/

至于问题本身，如果你只是使用jquery / html，我可能会在json对象中创建问题和答案的数组：http://www.mkyong.com/jquery/jquery-loop-over-json-string-each-example/

然后我会使用javascript在数组中获取一个随机数来选择要显示的问题。

Answer 2

也许你可以做这样的事情。 DEMO

这有点粗糙，但基本上它会根据array检查用户的输入。如果答案的值与数组中的最后一项不同，则用户的答案错误。如果答案相同，则问题框会应用class来隐藏div。