Question

我对JS和HTML5有点新鲜。我正在创建一个简单的测验，只是为了它。我知道需要使每个问题都能够独立于其他问题标记为“正确”。我怎么能通过JS，甚至CSS / HTML5来做到这一点？我有一种感觉，我需要更改jquery文件，但我有点坚持如何做到这一点。测验工作完美，就像我想要的那样，但是当用户选择答案时，我想显示正确或错误。谢谢！

if (jQuery) {
  var checkAnswers = function() {
    var answerString = "";
    var answers = $(":checked");
    answers.each(function(i) {
      answerString = answerString + answers[i].value;
    });
    $(":checked").each(function(i) {
      var answerString = answerString + answers[i].value;
    });
    checkIfCorrect(answerString);
  };

  var checkIfCorrect = function(theString) {
    if (parseInt(theString, 16) === 811124566973) {
      $("body").addClass("correct");
      $("h1").text("You Win!");

    }
  };

  $("#question1").show();
};
if (impress) {
  $("#question2").show();
};
if (atom) {
  $("#question3").show();
};
if (createjs) {
  $("#question4").show();
};
if (me) {
  $("#question5").show();
};
if (require) {
  $("#question6").show();
};
if ($().playground) {
  $("#question7").show();
};
if (jaws) {
  $("#question8").show();
};
if (enchant) {
  $("#question9").show();
};
if (Crafty) {
  $("#question10").show();
};

body {
  margin-left: 50px;
}

#question1,
#question2,
#question3,
#question4,
#question5,
#question6,
#question7,
#question8,
#question9,
#question10 {
  display: none;
}

canvas {
  display: none;
}

.correct {
  background-color: #24399f;
  color: white;
}

#question1 {
  background-color: #EBF5D1;
}

#question2 {
  background-color: #E0F0D4;
}

#question3 {
  background-color: #D6EBD6;
}

#question4 {
  background-color: #CCE6D9;
}

#question5 {
  background-color: #C2E0DB;
}

#question6 {
  background-color: #B8DBDE;
}

#question7 {
  background-color: #ADD6E0;
}

#question8 {
  background-color: #A3D1E3;
}

#question9 {
  background-color: #99CCE6;
}

#question10 {
  background-color: #8FC7E8;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Quiz</title>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body onclick="checkAnswers();">
  <h1>Quiz</h1>
  <div id="quiz">
    <div id="question1">
      <div class="question">Which is not a main file type that we use to make websites?</div>
      <input type="radio" name="question1" value="a" />
      <label>.html</label>
      <input type="radio" name="question1" value="b" />
      <label>.exe</label>
      <input type="radio" name="question1" value="c" />
      <label>.js</label>
      <input type="radio" name="question1" value="d" />
      <label>.css</label>
    </div>
    <br />
    <div id="question2">
      <div class="question">A JavaScript object is wrapped by what charaters?</div>
      <input type="radio" name="question2" value="a" />
      <label>[]</label>
      <input type="radio" name="question2" value="b" />
      <label>;;</label>
      <input type="radio" name="question2" value="c" />
      <label>{}</label>
      <input type="radio" name="question2" value="d" />
      <label>()</label>
    </div>
    <br />
    <div id="question3">
      <div class="question">Moles are which of the following?</div>
      <input type="radio" name="question3" value="a" />
      <label>Omniverous</label>
      <input type="radio" name="question3" value="b" />
      <label>Adorable</label>
      <input type="radio" name="question3" value="c" />
      <label>Whackable</label>
      <input type="radio" name="question3" value="d" />
      <label>All of the above</label>
    </div>
    <br />
    <div id="question4">
      <div class="question">In Japanese "か" is prounounced...</div>
      <input type="radio" name="question4" value="a" />
      <label>ka</label>
      <input type="radio" name="question4" value="b" />
      <label>ko</label>
      <input type="radio" name="question4" value="c" />
      <label>ke</label>
      <input type="radio" name="question4" value="d" />
      <label>ki</label>
    </div>
    <br />
    <div id="question5">
      <div class="question">The gravitational constant on earth is approximately...</div>
      <input type="radio" name="question5" value="a" />
      <label>10m/s^2</label>
      <input type="radio" name="question5" value="b" />
      <label>.809m/s^2</label>
      <input type="radio" name="question5" value="c" />
      <label>9.81m/s^2</label>
      <input type="radio" name="question5" value="d" />
      <label>84.4m/s^2</label>
    </div>
    <br />
    <div id="question6">
      <div class="question">45 (in base 10) is what in binary (base 2)?</div>
      <input type="radio" name="question6" value="a" />
      <label>101101</label>
      <input type="radio" name="question6" value="b" />
      <label>110011</label>
      <input type="radio" name="question6" value="c" />
      <label>011101</label>
      <input type="radio" name="question6" value="d" />
      <label>101011</label>
    </div>
    <br />
    <div id="question7">
      <div class="question">4
        << 2=. ..</div>
          <input type="radio" name="question7" value="a" />
          <label>16</label>
          <input type="radio" name="question7" value="b" />
          <label>4</label>
          <input type="radio" name="question7" value="c" />
          <label>2</label>
          <input type="radio" name="question7" value="d" />
          <label>8</label>
      </div>
      <br />
      <div id="question8">
        <div class="question">Given the lengths of two sides of a right triangle (one with a 90 degree angle), how would you find the hypotenuse?</div>
        <input type="radio" name="question8" value="a" />
        <label>Pi*Radius^2</label>
        <input type="radio" name="question8" value="b" />
        <label>Pythagorean Theorem</label>
        <input type="radio" name="question8" value="c" />
        <label>Calculator?</label>
        <input type="radio" name="question8" value="d" />
        <label>Sin(side1 + side2)</label>
      </div>
      <br />
      <div id="question9">
        <div class="question">True or False: All games must run at at least 60 frames per second to be any good.</div>
        <input type="radio" name="question9" value="a" />
        <label>True</label>
        <input type="radio" name="question9" value="b" />
        <label>False</label>
      </div>
      <br />
      <div id="question10">
        <div class="question">Using a server can help you to...</div>
        <input type="radio" name="question10" value="a" />
        <label>hide your code.</label>
        <input type="radio" name="question10" value="b" />
        <label>have a performant game.</label>
        <input type="radio" name="question10" value="c" />
        <label>create shared experiences for players.</label>
        <input type="radio" name="question10" value="d" />
        <label>all of the above.</label>
      </div>

    </div>
    <script src="jquery.js"></script>
    <script src="impress.js"></script>
    <!-- atom needs this to run -->
    <canvas></canvas>
    <script src="atom.js"></script>
    <script src="easel.js"></script>
    <script src="melon.js"></script>
    <script src="yabble.js"></script>
    <script src="jquery.gamequery.js"></script>
    <script src="jaws.js"></script>
    <script src="enchant.js"></script>
    <script src="crafty.js"></script>
    <script src="game.js"></script>
</body>

</html>

Answer 1

我不知道我是否理解得很好，但你是否尝试过onChange活动？首先，我建议使用正确的答案创建JSON文件，并且每个复选框后必须是answer元素。像这样：

jQuery('your-form your-input').on('change', function(e) { 
e.preventDefault();
var actualAnswer = (jQuery(this).val() == 'your-correct-answer-in-json') ? 'Correct' : 'Incorrect';
/* add actualAnswer to element, for     example with parent and find answer   element to actual input */
});

选择单选按钮并显示正确

1 个答案: