Question

请参阅下面有关测验问题的代码。我希望在错过单选按钮时有一个功能，弹出一个警告框，显示我点击“成绩单”按钮时错过的问题数量。

<!DOCTYPE html>
<html>
    <head>
        <script src = "quiz.js"> </script>
        <link rel = "stylesheet" href = "quiz_style.css">
    </head>
    <body>
       <center><h1> &copy; JavaScript Quiz by Hamsheed ! :) </h1></center> 
        <div id = "wrapper">
        <form id = "quiz">
            <fieldset>
                <legend> Question 1 </legend>
                He _____ it. <br>
                <label><input type = "radio" value = "wrong" name = "q1" id = "q"> don't like <br></label>
                <label><input type = "radio" value = "right" name = "q1" id = "q"> doesn't like <br></label>
                <label><input type = "radio" value = "wrong" name = "q1" id = "q"> don't likes <br></label>
            </fieldset> <br>

            <fieldset>
                <legend> Question 2 </legend>
                They _____ here very often. <br>
                <label><input type = "radio" value = "right" name = "q2" id = "q"> don't come <br></label>
                <label><input type = "radio" value = "wrong" name = "q2" id = "q"> doesn't comes <br></label>
                <label><input type = "radio" value = "wrong" name = "q2" id = "q"> doesn't coming <br></label>
            </fieldset> <br>

            <fieldset>
                <legend> Question 3 </legend>
                John and Mary _____ twice last week. <br>
                <label><input type = "radio" value = "wrong" name = "q3"> comes <br></label>
                <label><input type = "radio" value = "right" name = "q3"> came <br></label>
                <label><input type = "radio" value = "wrong" name = "q3"> coming <br></label>
            </fieldset> <br>

 var score = 0;
function validate(){               
 var rad = document.getElementById("quiz").getElementsByTagName('input');
    for(var i = 0; i < rad.length; i++){
     if (rad[i].checked == true && rad[i].value == "right") {
        score++; 
    } 

    }

         var pcnt = ((score/10) * 100);
     alert("The score is " + score + " and percentage is " + pcnt + " %" );
    }

Answer 1

你需要使用像jquery这样的框架，这会使得完成文本变得有点容易。尝试以下。

$(function(){
  var lastTraversed;
  $('#sendbtn').click(function(){
    $('input[type="radio"]:not(:checked)').each(function(a){
      if(!$("input:radio[name='"+this.name+"']").is(":checked") && lastTraversed !== this.name)
        {
         lastTraversed = this.name;
         alert(this.name);
        }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <script src = "quiz.js"> </script>
        <link rel = "stylesheet" href = "quiz_style.css">
    </head>
    <body>
       <center><h1> &copy; JavaScript Quiz by Hamsheed ! :) </h1></center> 
        <div id = "wrapper">
        <form id = "quiz">
            <fieldset>
                <legend> Question 1 </legend>
                He _____ it. <br>
                <label><input type = "radio" value = "wrong" name = "q1" id = "q"> don't like <br></label>
                <label><input type = "radio" value = "right" name = "q1" id = "q"> doesn't like <br></label>
                <label><input type = "radio" value = "wrong" name = "q1" id = "q"> don't likes <br></label>
            </fieldset> <br>

            <fieldset>
                <legend> Question 2 </legend>
                They _____ here very often. <br>
                <label><input type = "radio" value = "right" name = "q2" id = "q"> don't come <br></label>
                <label><input type = "radio" value = "wrong" name = "q2" id = "q"> doesn't comes <br></label>
                <label><input type = "radio" value = "wrong" name = "q2" id = "q"> doesn't coming <br></label>
            </fieldset> <br>

            <fieldset>
                <legend> Question 3 </legend>
                John and Mary _____ twice last week. <br>
                <label><input type = "radio" value = "wrong" name = "q3"> comes <br></label>
                <label><input type = "radio" value = "right" name = "q3"> came <br></label>
                <label><input type = "radio" value = "wrong" name = "q3"> coming <br></label>
            </fieldset> <br>
          <input id="sendbtn" type="button" value="send" />

Answer 2

        <script>
 var score = 0;
function validate(){               
 var rad = document.getElementById("quiz").getElementsByTagName('input');
    attend = 0
    for(var i = 0; i < rad.length; i++){
      if (rad[i].checked == true){ attend = attend +1}
     if (rad[i].checked == true && rad[i].value == "right") {
        score++; 
    } 

    }

         var pcnt = ((score/10) * 100);
     alert("The score is " + score + " and percentage is " + pcnt + " %" + "\n"+
      "not_attend: " + Math.floor((rad.length-(3*attend))/3) );
    }
         </script>

单击按钮时的JavaScript验证

2 个答案: