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

フロントエンドに回答を保存したい場合、開発者がチートするのはかなり簡単であることに注意してください。とはいえ、コードには 2 つの基本的な問題があります。

  1. を再利用していidます。
  2. あなたはeval十分に悪いものを使用していますが、キャストする簡単な方法がある場合、文字列を数値に変換するために使用しているようです。

js_set_rad使用していないようですので、削除していただいてもかまいません。それも不要です。

機能を実装できcheckTestます(現在未使用)。実際、おそらく単に変更できますcheckTestjs_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 に答える