创建一个页面，要求用户在打开主页之前回答数学公式

Creating a page that requires the user to answer a math equation before opening the home page

本文关键字：打开主页 用户 数学公式 一个 创建      更新时间：2023-09-26

所以我试图让我的index.html成为一个在允许用户访问home.html之前向用户提问的页面。（用户可以简单地打开site_name.com/home这一事实是我稍后会处理的，哈哈。暂时忍耐一下）。

这是我的游戏计划：

当用户打开页面时，一个随机算术问题将被粘贴到div 中。算术问题将是 2 个个位数的正整数和 + 、- 或 * 的二进制运算之一。答案以某种方式需要存储为全局变量（这是我坚持的事情之一）。为此，我构造了以下函数。

    var randquest = function ()
    {
        var ops = ["+", "-", "*"];
        var num1 = Math.floor(Math.rand() * 10);
        var num2 = Math.floor(Math.rand() * 10);
        var thisOp = ops[Math.floor(Math.rand() * 10) % 3];
        var myDiv = document.getElementById("questiondiv");
        var myNewNode = document.createElement('div class="outerdiv" id="questiondiv"')
        var myContent = document.createTextNode("<p><b>Question:</b> " + num1 + " " + thisOp + " " + num2 + "</p>");
        var myNewNode.appendChild(myContent);
        var myDiv.appendChild(myNewNode);
        answer = new String();
        switch (thisOp)
        {
            case "+"
            {
                answer = (num1 + num2).toString();
            }
            case "-"
            {
                answer = (num1 - num2).toString();
            }
            case "*"
            {
                answer = (num1 * num2).toString();
            }
        }
    }

然后，我需要一个函数来检查用户输入到带有 id ans 的输入文本单元格的内容是否是生成问题的正确答案。 

    var checker = function()
    {
        var ipt = document.getElementById("answers").value;
        if (ipt != answer)
        {
            alert("Wrong answer. Entrance not granted.");
            return;
        }
        else
        {
            // Open up home.html
        }
    }
但是要做到这一点，我不知何故

需要答案是一个全局变量，并且我不知何故需要在 else 语句中打开一个打开home.html的过程。我该怎么做？我遇到了路障。

这是到目前为止的整个页面，如果你想看的话： 

<html>
<head>
    <title>
        Sentinel page 
    </title>
    <style type="text/css">
        body
        {
        }
        .innerdiv
        {
            z-index: -1;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 700px;
        }
        .outerdiv
        {
            width: 700px;
            border: 2px solid #FFF;
            padding: 10px;
            margin: 5px;
            text-color: blue;
        }
        .outerdiv:nth-of-type(2n+0)
        {
            background: grey;
        }
        .outerdiv:nth-of-type(2n+1)
        {
            background: #FFFFCC;
        }
        #headerdiv
        {
            text-align: center;
        }
        #maindiv
        {
        }
        #footerdiv
        {
        }
        p
        {
            color: blue;
        }
        h1
        {
            color: red;
            text-shadow: 2px 2px white;
        }
    </style>
    <script>
        var randquest = function ()
        {
            var ops = ["+", "-", "*"];
            var num1 = Math.floor(Math.rand() * 10);
            var num2 = Math.floor(Math.rand() * 10);
            var thisOp = ops[Math.floor(Math.rand() * 10) % 3];
            var myDiv = document.getElementById("questiondiv");
            var myNewNode = document.createElement('div class="outerdiv" id="questiondiv"')
            var myContent = document.createTextNode("<p><b>Question:</b> " + num1 + " " + thisOp + " " + num2 + "</p>");
            var myNewNode.appendChild(myContent);
            var myDiv.appendChild(myNewNode);
            answer = new String();
            switch (thisOp)
            {
                case "+"
                {
                    answer = (num1 + num2).toString();
                }
                case "-"
                {
                    answer = (num1 - num2).toString();
                }
                case "*"
                {
                    answer = (num1 * num2).toString();
                }
            }
        }
        var checker = function()
        {
            var ipt = document.getElementById("answers").value;
            if (ipt != answer)
            {
                alert("Wrong answer. Entrance not granted.");
                return;
            }
            else
            {
                // Open up home.html
            }
        }

    </script>
</head>
<body>
    <div class="innerdiv">
    </div>
    <div class="outerdiv" id="headerdiv">
        <h1>my_site</h1>
    </div>
    <div class="outerdiv" id="introdiv">
        <p>Welcome to my site. Before you can enter the main page, I need to make sure you're human. So please answer the question below.</p>
    </div>
    <div class="outerdiv" id="questiondiv">
        <!-- Div to house the arithmetic quesiton -->
    </div>
    <div class="outerdiv" id="answerswerdiv">
        <p><b>Answer:</b></p> <input type="text" id="answers"> <input type="button" value="Submit" onclick="checker">
    </div>
    <div class="outerdiv" id="footerdiv">
        <p>Last modified: 03/31/2014</p>
    </div>
</body>
</html>

如果你使用JavaScript，你就有可能让人们使用开发人员工具找到使用自动化系统进入的答案。仅仅因为用户看不到答案并不意味着它不在 HTML 代码中。浏览器可以访问此答案，尝试进入该站点的机器人也可以访问它。如果您在Internet Explorer中按F12键，您将获得开发人员工具，包括DOM资源管理器，它将使您能够以原始HTML代码访问整个页面。

在这种情况下，您应该使用类似 PHP 的东西。PHP 比 JavaScript 更容易打印元素和文本，而且它是服务器端的，因此代码在 Web 服务器上执行。以下是您应该如何设置它。

当用户第一次访问网站时，服务器将重定向到页面captcha.php。index.php以外的页面（我假设是主页）也应该重定向到captcha.php，如果他们没有回答这个问题。此页面包含由 PHP 生成的随机数学问题，<form>使用两个 POST 变量：问题的答案，以及每个问题的唯一 CAPTCHA 代码，该代码已经在<form>中通过 <input type="hidden"> 标签。PHP 可以将这个唯一的 CAPTCHA 会话代码放入 value 属性中，而无需 JavaScript。回答问题后，浏览器应转到页面以检查答案（例如。 captcha_check.php ）。

示例captcha.php页面：

<p>Math problem generated by PHP</p>
<form action="captcha_check.php" method="post">
    <input type="hidden" name="captcha-id" value="CAPTCHA code generated by PHP" />
    <input type="text" name="captcha-solution" />
    <input type="submit" value="Continue" />
</form>

captcha_check.php页面应使用POST发送给它的CAPTCHA会话代码和解决方案进行检查，并重定向到captcha.php页面是答案是错误的，否则重定向到index.php页面。如果答案正确，则在重定向到index.php页面之前，captcha_check.php页面应存储会话的cookie。这样，cookie 就会发送到 HTTP 标头中的所有页面，因此每个页面都可以验证会话。如果您愿意，cookie可以永久保留在计算机上，让用户无需负担即可访问多个会话。

一般来说，CAPTCHA的数学问题并不安全，但它们比Google的标准RECAPTCHA容易得多。如果您正在寻找一个不会完全刺激的安全验证码，请查看 PlayThru by areyouahuman.com.http://areyouahuman.com/site-owners/playthru/

只需全局声明变量ipt，即在函数定义之外。

var ipt;
var checker = function() {
    // set ipt value here. 
}
相关文章：