无法在Javascript测验中显示最终得分

时间：2016-03-11 14:47:26

标签： javascript jquery html5

我是Javascript的初学者 我想用单选按钮创建一个基本的javascript测验应用程序。 在测验结束时，我想要一条带有最终得分的警告信息。 我无法显示最终得分。 这就是我编码的.. HTML：

   var allQuestions = [{
    question: "Who is the Prime Minister of the United Kingdom?",
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
    correctAnswer: 0
  },

  {
    question: "Who is the Prime Minister of India?",
    choices: ["Rahul Gandhi", "Arvind Kejrival", "Narendra Damodardas Modi"],
    correctAnswer: 2
  },

  {
    question: "Who is the Prime Minister of America?",
    choices: ["Donald Trump", "Barack Obama", "Hilary Clinton"],
    correctAnswer: 2
  }
];

var correctAnswers = 0;
$(document).ready(function() {
  var currentquestion = 0;

  $('#question').html(allQuestions[currentquestion].question);
  $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
  $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
  $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");

  $("#next").click(function() {
    if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
      correctAnswers++;
    };
    currentquestion++;
    if (currentquestion < allQuestions.length) {
      $('#question').html(allQuestions[currentquestion].question);
      $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
      $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
      $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");
      if (currentquestion == allQuestions.length - 1) {
        $('#next').html("Submit");
        $('#next').click(function() {
         /*If I comment out the following if statement, but retain correctAnswers++, I do get alert message,but the result is obviously wrong*/
          if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
            correctAnswers++;
          }
          alert(correctAnswers);
          //alert("Your Score is " + correctAnswers + " out of " + currentquestion + " and your percentage is " + (correctAnswers*100/currentquestion) + "%");
        });

      }

    };
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
  <div>
    <h3 id="question"></h3>
    <form id="form">
      <input type="radio" name="option" value="0" id="option0" checked>
      <label for='option0'>
        <br/>
      </label>
      <input type="radio" name="option" value="1" id="option1">
      <label for='option1'>
        <br/>
      </label>
      <input type="radio" name="option" value="2" id="option2">
      <label for='option2'>
        <br/>
      </label>
    </form>
  </div>
  <br/>
  <a href="#" id="next" class="button hvr-bounce-to-right">Next</a>

</body>

请帮忙！ 这是JSFiddle。

5 个答案:

答案 0 :(得分：1)

我修复你的代码

jsFiddle

问题出在这里

     For i = 0 To ((participants) - 1) Step 2
        con.Open()
        con2.Open()


        Console.WriteLine("")
        Console.WriteLine("New Loop")
        Console.WriteLine(i)

        SQL2 = "SELECT * FROM Pairings WHERE TournamentId = ('" & TournamentId & "') AND RoundNumber = ('" & roundNumberValue & "')"

        Console.WriteLine(SQL2)
        da2 = New OleDb.OleDbDataAdapter(SQL2, con2)
        da2.Fill(ds2, "Pairings")

        'searching for playerid

        matchId = ds2.Tables("Pairings").Rows(i).Item("MatchID")
        player1ID = Outputlist(i).ToString
        Console.WriteLine("")
        Console.WriteLine("New Information")
        Console.WriteLine(matchId)
        Console.WriteLine(player1ID)


        'dataset only contains row 0 with player1id and tournamentid
        SQL = "SELECT * FROM Standings WHERE (TournamentID) = (" & TournamentId & ") AND PlayerID = (" & player1ID & ")"
        Console.WriteLine(SQL)

        da = New OleDb.OleDbDataAdapter(SQL, con)
        da.Fill(ds, "Standings")

        Dim dbCommand As New OleDb.OleDbCommand
        dbCommand.Connection = con
        dbCommand.CommandText = SQL
        dbCommand.ExecuteNonQuery()

        Dim playerName As String
        'can only pull 1 piece of data out ( there is only row 0)
        'not changing the value even though the search changes. ( can the dataset not be overwritten?, Or is not being overwritten? )
        playerName = ds.Tables("Standings").Rows(0).Item(2).ToString
        Console.WriteLine(playerName)
        player1Name = playerName
        Console.WriteLine(player1Name)
        If player1Name = "Bye" Then
            SQL2 = "update Pairings Set Player1Name'" & player1Name & "' WHERE MatchID = " & matchId & ""
        Else
            'SQL = "UPDATE Standings SET Points='" & playerNewScore(1) & "' WHERE PlayerID= '" & lblPlayer1.Text & "'"
            SQL2 = "UPDATE Pairings SET Player1Name='" & player1Name & "' WHERE MatchID = " & matchId & ""
            Console.WriteLine(SQL2)
        End If

        Dim dbCommand2 As New OleDb.OleDbCommand
        dbCommand2.Connection = con2
        dbCommand2.CommandText = SQL2
        dbCommand2.ExecuteNonQuery()
        con.Close()
        con2.Close()
    Next

答案 1 :(得分：1)

这里有一个有效的演示。

var allQuestions = [{
    question: "Who is the Prime Minister of the United Kingdom?",
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
    correctAnswer: 0
  },

  {
    question: "Who is the Prime Minister of India?",
    choices: ["Rahul Gandhi", "Arvind Kejrival", "Narendra Damodardas Modi"],
    correctAnswer: 2
  },

  {
    question: "Who is the Prime Minister of America?",
    choices: ["Donald Trump", "Barack Obama", "Hilary Clinton"],
    correctAnswer: 2
  }
];


$(document).ready(function() {
  var currentquestion = 0;
  var correctAnswers = 0;
  var done = false;

  $('#question').html(allQuestions[currentquestion].question);
  $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
  $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
  $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");

  $("#next").click(function() {
    if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
      correctAnswers++;
    };

    if (done) {
      alert(correctAnswers);
    } else {
      currentquestion++;
      if (currentquestion < allQuestions.length) {
        $('#question').html(allQuestions[currentquestion].question);
        $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
        $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
        $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");
        if (currentquestion == allQuestions.length - 1) {
          $('#next').html("Submit");
          done = true;
        }
      }
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
  <div>
    <h3 id="question"></h3>
    <form id="form">
      <input type="radio" name="option" value="0" id="option0" checked>
      <label for='option0'>
        <br/>
      </label>
      <input type="radio" name="option" value="1" id="option1">
      <label for='option1'>
        <br/>
      </label>
      <input type="radio" name="option" value="2" id="option2">
      <label for='option2'>
        <br/>
      </label>
    </form>
  </div>
  <br/>
  <a href="#" id="next" class="button hvr-bounce-to-right">Next</a>

</body>

答案 2 :(得分：1)

这是我解决您问题的方法。在最后一个问题之后，你正在增加currentQuestion一次。

https://jsfiddle.net/k7874vjn/5/ 

if(currentquestion<allQuestions.length){
                $('#question').html(allQuestions[currentquestion].question);
                $('label[for=option0]').html(allQuestions[currentquestion].choices[0]+"<br/>");
                $('label[for=option1]').html(allQuestions[currentquestion].choices[1]+"<br/>");
                $('label[for=option2]').html(allQuestions[currentquestion].choices[2]+"<br/>");
                if(currentquestion==allQuestions.length-1){
                    $('#next').html("Submit");
                    $('#next').click(function(){
                        if($("input[name=option]:checked").val()==allQuestions[currentquestion].correctAnswer){
                            correctAnswers++;
                        }
                        alert(correctAnswers);
                        //alert("Your Score is " + correctAnswers + " out of " + currentquestion + " and your percentage is " + (correctAnswers*100/currentquestion) + "%");
                    });

                } else
            currentquestion++; //MOVED HERE

            };

答案 3 :(得分：1)

问题是你在下一个按钮上设置了另一个点击事件回调，而第一个仍处于活动状态。

只需像这样添加$('#next').unbind("click");：

$('#next').html("Submit");
$('#next').unbind("click");
$('#next').click(...

这会在您设置新按钮之前删除按钮上的单击侦听器。

代码段：

＆＃13;
＆＃13; 
var allQuestions = [{
    question: "Who is the Prime Minister of the United Kingdom?",
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
    correctAnswer: 0
  },

  {
    question: "Who is the Prime Minister of India?",
    choices: ["Rahul Gandhi", "Arvind Kejrival", "Narendra Damodardas Modi"],
    correctAnswer: 2
  },

  {
    question: "Who is the Prime Minister of America?",
    choices: ["Donald Trump", "Barack Obama", "Hilary Clinton"],
    correctAnswer: 2
  }
];

var correctAnswers = 0;
$(document).ready(function() {
  var currentquestion = 0;

  $('#question').html(allQuestions[currentquestion].question);
  $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
  $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
  $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");

  $("#next").click(function() {
    if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
      correctAnswers++;
    };
    currentquestion++;
    if (currentquestion < allQuestions.length) {
      $('#question').html(allQuestions[currentquestion].question);
      $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
      $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
      $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");
      if (currentquestion == allQuestions.length - 1) {
        $('#next').html("Submit");
        $('#next').unbind("click");
        $('#next').click(function() {
         /*If I comment out the following if statement, but retain correctAnswers++, I do get alert message,but the result is obviously wrong*/
          if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
            correctAnswers++;
          }
          alert(correctAnswers);
          //alert("Your Score is " + correctAnswers + " out of " + currentquestion + " and your percentage is " + (correctAnswers*100/currentquestion) + "%");
        });

      }

    };
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
  <div>
    <h3 id="question"></h3>
    <form id="form">
      <input type="radio" name="option" value="0" id="option0" checked>
      <label for='option0'>
        <br/>
      </label>
      <input type="radio" name="option" value="1" id="option1">
      <label for='option1'>
        <br/>
      </label>
      <input type="radio" name="option" value="2" id="option2">
      <label for='option2'>
        <br/>
      </label>
    </form>
  </div>
  <br/>
  <a href="#" id="next" class="button hvr-bounce-to-right">Next</a>

</body>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

如果您对if和correctAnswers ++语句发表评论，那么您的代码就可以正常运行。

         /*If I comment out the following if statement, but retain correctAnswers++, I do get alert message,but the result is obviously wrong*/
          /*if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
            correctAnswers++;
          }*/
          alert(correctAnswers);
          alert("Your Score is " + correctAnswers + " out of " + currentquestion + " and your percentage is " + (correctAnswers*100/currentquestion) + "%");
相关问题
最新问题