1

我想在不使用 PHP 的情况下进行 HTML 测验，并且所有问题都在同一页面上。

这里预览 http://bit.ly/17jlurT

单击“Nakijken”按钮后如何获得正确的遮阳篷

带有 JS 的 HTML 部分

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Kleuren</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
</head>
    <script type="text/javascript" src="jq/jq.js"></script>

<body>

<div id="container">

 <div id="links">   
<div style="width: 40%; float:left" >
</div> <div style="float:left; position:relative; margin-right:40px">

    <h2>Zo, eens kijken of jij goed hebt opgelet!</h2><br />

<form name="input" action="html_form_action.asp" method="get">

<p class="question">1. Welke kleuren zijn de primaire kleuren?</p>
    <p>
    <input type="radio" name="Q1" value="A1">Groen, rood en blauw
    <br>
    <input type="radio" name="Q1" value="A2">Oranje, geel en blauw
    <br>
    <input type="radio" name="Q1" value="A3">Rood, geel en blauw
    <br></p><br>

<p class="question">2. Wat betekend blauw bloed?</p>  
    <p>
    <input type="radio" name="Q2" value="A1">Dat iemand geen rood, maar blauw bloed heeft
    <br>
    <input type="radio" name="Q2" value="A2">Iemand van adel heeft blauw bloed
    <br>
    <input type="radio" name="Q2" value="A3">Als je het koud hebt is je bloed blauw
    <br></p><br>

<p class="question">3. Zwart...</p>  
    <p>
    <input type="radio" name="Q3" value="A1">Alle kleuren op en is daarom zwart
    <br>
    <input type="radio" name="Q3" value="A2">Stoot juist alle kleuren af, en is daarom zwart
    <br></p><br>
</div>
</div>

 <div id="rechts">   
    <div style="width: 60%; float:left">

<p class="question">4. Zwart...</p>  
    <p>
    <input type="radio" name="Q4" value="A1">Alle kleuren op en is daarom zwart
    <br>
    <input type="radio" name="Q4" value="A2">Stoot juist alle kleuren af, en is daarom zwart
    <br></p><br>


<p class="question">5. Zwart...</p>  
    <p>
    <input type="radio" name="Q5" value="A1">Alle kleuren op en is daarom zwart
    <br>
    <input type="radio" name="Q5" value="A2">Stoot juist alle kleuren af, en is daarom zwart
    <br></p><br>


    <br>
    <input type="submit" value="" onclick="checkTest()">
</form>


</div>


<script type="text/javascript"> 


function checkTest() {
    var count = 0;

    if ($('input[type="radio"][name=Q1]:checked').val() == "A1") {
        count++;
    }
    if ($('input[type="radio"][name=Q2]:checked').val() == "A2") {
        count++;
    }
    if ($('input[type="radio"][name=Q3]:checked').val() == "A1") {
        count++;

    if ($('input[type="radio"][name=Q4]:checked').val() == "A2") {
        count++;
    }
    if ($('input[type="radio"][name=Q5]:checked').val() == "A1") {
        count++;


    }
    if (count > 4) {
        alert("Gefeliciteerd, je hebt goed opgelet!");

    } else {
        alert("Dat kan beter, blader nog maar eens goed door de app en probeer het nog eens!");
        {
</script>
</body>
</html>

提前致谢

编辑-代码修复

4

2 回答 2

0

请注意，如果您想在前端存储答案，开发人员很容易作弊。也就是说，您的代码存在两个基本问题：

  1. 您正在重用ids。
  2. 您正在使用evalwhich 已经足够糟糕了，但是当有更简单的转换方法时，您似乎正在使用它将字符串转换为数字。

您可以删除它，js_set_rad因为您似乎不使用它。这也是不必要的。

您可以实现该checkTest功能（当前未使用）。事实上，你可能只是改变checkTest。 js_score可以删除，因为它没有被使用并且无论如何都不会工作。这是我的做法checkTest：

var i,
    score = 0,
    x = 1,
    q = document.getElementsByName("q" + x);

while (q.length) {
    for (i = 0; i < q.length; 1++) {
        if (q[i].checked) {
            score += q[i].value;
        }
    }
    x++;
    q = document.getElementsByName("q" + x);
}
alert("Your score: " + score);
于 2013-10-08T13:42:49.830 回答
0

我认为这对您来说是一个很好的解决方案

var currectAns = {Q1: "A1", Q2: "A1", Q3: "A1", Q4: "A1", Q5: "A1"}

$('#quiz').submit(function(e){
    e.preventDefault();
    checkTest(this);
});

function checkTest(self){
    var $allInputs = $(self).find('input[type="radio"]'),
        totalQuestion = $(self).find('.question').length;
    totalAnswer = $(self).find('input[type="radio"]:checked').length;

    if(totalQuestion > totalAnswer){
        $(self).find('.msgError').show();
    }
    else{
        $(self).find('.msgError').hide();
        var userAns = {};
        $.each($allInputs, function(index,elem){
            if($(elem).is(":checked")){
                userAns[$(elem).attr('name')] = $(elem).attr('value');
            }

        });
        if(JSON.stringify(currectAns) == JSON.stringify(userAns)){
            alert('good answer');
        }
        else{
            alert('bad answer');
        }
    }

}

我建议您使用每个函数，我将正确答案放在 javascript 中，这是一个非常糟糕的主意，您可以使用 Ajax 来比较答案或找出有多少答案是正确的

JSON.stringify(currectAns) == JSON.stringify(userAns)

这不是一个好主意，我建议你找到任何插件来比较 2 个对象

JSFIDDLE：http: //jsfiddle.net/prakashapkota/WCBsr/

于 2013-10-08T15:04:46.343 回答