显示正确答案javascript

时间：2017-07-19 05:52:41

标签： javascript jquery timer radio-button

我正在尝试获取以下代码，以便在timmer结束时显示正确答案的数量。任何帮助都会很棒。另外，我有一个问题，当计时器启动时scoreDiv消失了我希望它在计时器完成时出现。

注意：我为新杂乱的代码添加了一些代码，并尝试学习。

    $(function() {
//-------------Global Var-----------

//lets store our trivia questions in an object
    var trivia = [
                  // question 1
                    {
                        question: "01. What is CSS?",
                        answers: ["Casscading Style Sheets", "Carrot steamed soup", "Corruoted style sheets", "Casscading stairs sheets"],
                        correctAnswer: 0
                    },
                    // question 2
                    {
                        question: "02. Q2?",
                        answers: ["1", "2", "3", "4"],
                        correctAnswer: 1
                    },
                    // question 3
                    {
                        question: "03. Q3?",
                        answers: ["1", "2", "3", "4"],
                        correctAnswer: 3
                    },
                    // question 4
                    {
                        question: "04. Q4?",
                        answers: ["1", "2", "3", "4"],
                        correctAnswer: 3
                    }
                 ];
  
    var timerId;
    var timer      = 10;
    var selections = [];//Holds Selections
    var score      = $('#score');
    var counter    = 0;

    //----------------Create trivia questions in Div---------------
    //start Button  populate
    //Q1
    $("#startButton").on('click', function populate() {
        var testDiv = document.createElement("div");
        for (var i = 0; i < trivia.length; i++) {
              testDiv.innerHTML = '<h3>' + trivia[0].question + '</h3>'
                   + '<div> <form> <p> <input type="radio" name ="answer0" value="right">'
                   + trivia[0].answers[0] + '</p>'
                   + '<p><input type="radio" name ="answer1" value="2">' + trivia[0].answers[1] + '</p>'
                   + '<p><input type="radio" name ="answer2" value="3">' + trivia[0].answers[2] + '</p>'
                   + '<p><input type="radio" name ="answer3" value="4">' + trivia[0].answers[3] + '</p>'
                   + '<p></form> </div>';
              var questionsDiv = document.getElementById('questions');
              questionsDiv.appendChild(testDiv);
        }
    });

    //Q2
    $("#startButton").on('click', function populate() {
        var testDiv = document.createElement("div");
            for (var i = 0; i < trivia.length; i++) {
              testDiv.innerHTML = '<h3>' + trivia[1].question + '</h3>'
                   + '<div> <form> <p> <input type="radio" name ="answer" value="1">'
                   + trivia[1].answers[0] + '</p>'
                   + '<p><input type="radio" name ="answer" value="2">' + trivia[1].answers[1] + '</p>'
                   + '<p><input type="radio" name ="answer" value="3">' + trivia[1].answers[2] + '</p>'
                   + '<p><input type="radio" name ="answer" value="4">' + trivia[1].answers[3] + '</p>'
                   + '<p></form> </div>';
              var questionsDiv = document.getElementById('questions');
              questionsDiv.appendChild(testDiv);
        }
    });

    //Q3
    $("#startButton").on('click', function populate() {
        var testDiv = document.createElement("div");
        for (var i = 0; i < trivia.length; i++) {
              testDiv.innerHTML = '<h3>' + trivia[2].question + '</h3>'
                   + '<div> <form> <p> <input type="radio" name ="answer" value="1">'
                   + trivia[2].answers[0] + '</p>'
                   + '<p><input type="radio" name ="answer" value="2">' + trivia[2].answers[1] + '</p>'
                   + '<p><input type="radio" name ="answer" value="3">' + trivia[2].answers[2] + '</p>'
                   + '<p><input type="radio" name ="answer" value="4">' + trivia[2].answers[3] + '</p>'
                   + '<p></form> </div>';
              var questionsDiv = document.getElementById('questions');
              questionsDiv.appendChild(testDiv);
        }
    });

    //Q4
    $("#startButton").on('click', function populate() {
        var testDiv = document.createElement("div");
        for (var i = 0; i < trivia.length; i++) {
              testDiv.innerHTML = '<h3>' + trivia[3].question
                   + '</h3>'+ '<div> <form> <p> <input type="radio" name ="answer" value="1">'
                   + trivia[3].answers[0] + '</p>'
                   + '<p><input type="radio" name ="answer" value="2">' + trivia[3].answers[1] + '</p>'
                   + '<p><input type="radio" name ="answer" value="3">' + trivia[3].answers[2] + '</p>'
                   + '<p><input type="radio" name ="answer" value="4">' + trivia[3].answers[3] + '</p>'
                   + '<p></form> </div>';
              var questionsDiv = document.getElementById('questions');
              questionsDiv.appendChild(testDiv);
        }
    });
  
    //add radio buttons
    //Come back and loop the populate

    //------------------Start Game-------------------
    //Hide Start Button
    $(document).ready(function(){
        $("#startButton").click(function(){
            $("#startButton").fadeOut();
        });
    });
      
    //------------------Start Timer-------------------
    $("#startButton").on("click", run);

    function run() {
        timerId = setInterval(decrement, 1000);
    }

    function decrement() {
        timer--;
        $("#show-number").html("<h3>" + timer + "</h3>");

        if (timer === 0) {
            stop();
            alert("times up");
            $('#questions').fadeOut();
        }
    }

    function stop() {

      clearInterval(timerId);
    };

    //-----------------Check awnsers------------------------
    //Pushusers ansers to an array
    function choose() {
        selections[counter] = $("input[type='radio'][name='answer']:checked").val() === "right";
    }
    choose();

    function displayScore() {
        var score = $('<p>',{id: 'score'});

        var numCorrect = 0;
        for (var i = 0; i < selections.length; i++) {
            if (selections[i] === trivia[0].correctAnswer) {
                numCorrect++;
            }
        }

        score.append('You got ' + numCorrect + ' questions out of ' + trivia.length + ' right!!!');
        return score;
    }

    displayScore();

    var scoreElement = displayScore();
    score.append(scoreElement).fadeIn();

//-----------------Finish Button------------------------
// when finish button is click skip timer to 0
});
body{
	text-align: center;
	font-family: 'Poiret One', sans-serif;
	background-color:#8f16cc;
	color: white;
}

h1 {
	font-family: 'Poiret One', sans-serif;
	font-size: 4em;
}

h2 {
	font-size: 2em;
}

button {
	color: white;
	border-radius: 20px;
	background-color: #8f16cc;
	font-size: 2em;
}

.radio {
	display: block;
}

.answers {
	display: block;
	color: or
}
<!DOCTYPE html>
<html>
<head>
	<title>Trivial Game!</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="assets/styles/styles.css">

	<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
</head>
<body>
<h1>Trivia Game</h1>
<h2>Test your Knowledge</h2>
<div id="header"></div>

<div id="show-number"></div>

<button id="startButton">Start</button>

<div id="questions">

<div id="score"></div>


</div>

<div id="footer"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="assets/scripts/app.js"></script>


	
</body>
</html>

2 个答案:

答案 0 :(得分：0)

这是你想要的吗？

信息：您的#score div位于#questions div内。当问题div获得display:none;时，所有孩子也将被隐藏。所以我把分数放在问题之外并创建了.hidden类。

编辑：我用console.log（）替换了alert（）以防你想知道; - ）。

$(function() {
//-------------Global Var-----------

//lets store our trivia questions in an object
  var trivia = [
  // question 1
    {
        question: "01. What is CSS?",
        answers: ["Casscading Style Sheets", "Carrot steamed soup", "Corruoted style sheets", "Casscading stairs sheets"],
        correctAnswer: 0
    },
    // question 2
    {
        question: "02. Q2?",
        answers: ["1", "2", "3", "4"],
        correctAnswer: 1
    },
    // question 3
    {
        question: "03. Q3?",
        answers: ["1", "2", "3", "4"],
        correctAnswer: 3
    },
    // question 4
    {
        question: "04. Q4?",
        answers: ["1", "2", "3", "4"],
        correctAnswer: 3
    }
];
  
    var timer = 10;
    var timerId;

   var selections = [];//Holds Selections
    var score = $('#score');
    var counter = 0;

//----------------Create trivia questions in Div---------------
//start Button  populate
  //Q1
  $("#startButton").on('click', function populate() {
var testDiv = document.createElement("div");
for (var i = 0; i < trivia.length; i++) {
  testDiv.innerHTML = '<h3>' + trivia[0].question + '</h3>'+ '<div> <form> <p> <input type="radio" name ="answer0" value="right">'
       + trivia[0].answers[0] +'</p>'
       + '<p><input type="radio" name ="answer1" value="2">' + trivia[0].answers[1] +'</p>'
       + '<p><input type="radio" name ="answer2" value="3">' +trivia[0].answers[2] +'</p>'
       + '<p><input type="radio" name ="answer3" value="4">' +trivia[0].answers[3] +'</p>'
       + '<p></form> </div>';
  var questionsDiv = document.getElementById('questions');
  questionsDiv.appendChild(testDiv);
  }
});

  //Q2
  $("#startButton").on('click', function populate() {
var testDiv = document.createElement("div");
for (var i = 0; i < trivia.length; i++) {
  testDiv.innerHTML = '<h3>' + trivia[1].question + '</h3>'+ '<div> <form> <p> <input type="radio" name ="answer" value="1">'
       + trivia[1].answers[0] +'</p>'
       + '<p><input type="radio" name ="answer" value="2">' + trivia[1].answers[1] +'</p>'
       + '<p><input type="radio" name ="answer" value="3">' +trivia[1].answers[2] +'</p>'
       + '<p><input type="radio" name ="answer" value="4">' +trivia[1].answers[3] +'</p>'
       + '<p></form> </div>';
  var questionsDiv = document.getElementById('questions');
  questionsDiv.appendChild(testDiv);
  }
});

  //Q3
  $("#startButton").on('click', function populate() {
var testDiv = document.createElement("div");
for (var i = 0; i < trivia.length; i++) {
  testDiv.innerHTML = '<h3>' + trivia[2].question + '</h3>'+ '<div> <form> <p> <input type="radio" name ="answer" value="1">'
       + trivia[2].answers[0] +'</p>'
       + '<p><input type="radio" name ="answer" value="2">' + trivia[2].answers[1] +'</p>'
       + '<p><input type="radio" name ="answer" value="3">' +trivia[2].answers[2] +'</p>'
       + '<p><input type="radio" name ="answer" value="4">' +trivia[2].answers[3] +'</p>'
       + '<p></form> </div>';
  var questionsDiv = document.getElementById('questions');
  questionsDiv.appendChild(testDiv);
  }
});

  //Q4
  $("#startButton").on('click', function populate() {
var testDiv = document.createElement("div");
for (var i = 0; i < trivia.length; i++) {
  testDiv.innerHTML = '<h3>' + trivia[3].question + '</h3>'+ '<div> <form> <p> <input type="radio" name ="answer" value="1">'
       + trivia[3].answers[0] +'</p>'
       + '<p><input type="radio" name ="answer" value="2">' + trivia[3].answers[1] +'</p>'
       + '<p><input type="radio" name ="answer" value="3">' +trivia[3].answers[2] +'</p>'
       + '<p><input type="radio" name ="answer" value="4">' +trivia[3].answers[3] +'</p>'
       + '<p></form> </div>';
  var questionsDiv = document.getElementById('questions');
  questionsDiv.appendChild(testDiv);
  }
});

 
  

//add radio buttons
  //Come back and loop the populate

  


  //------------------Start Game-------------------
  //Hide Start Button
  $(document).ready(function(){
    $("#startButton").click(function(){
        $("#startButton").fadeOut();
    });
});

      
  //------------------Start Timer-------------------
  $("#startButton").on("click", run);

  function run() {
      timerId = setInterval(decrement, 1000);
    }

    function decrement() {
      timer--;
      $("#show-number").html("<h3>" + timer + "</h3>");

      if (timer === 0) {
        stop();
        console.log("times up");
        $('#questions').fadeOut();
        $('#score').removeClass('hidden');

      }
    }

    function stop() {

      clearInterval(timerId);
    };



    

  //-----------------Check awnsers------------------------
  //Pushusers ansers to an array
  function choose() {
   selections[counter] = $("input[type='radio'][name='answer']:checked").val() === "right";
  }
  choose();

  function displayScore() {
    var score = $('<p>',{id: 'score'});
    
    var numCorrect = 0;
    for (var i = 0; i < selections.length; i++) {
      if (selections[i] === trivia[0].correctAnswer) {
        numCorrect++;
      }
    }
    
    score.append('You got ' + numCorrect + ' questions out of ' +
                 trivia.length + ' right!!!');

    return score;
  }
  displayScore();

  var scoreElement = displayScore();
        score.append(scoreElement).fadeIn();




//-----------------Finish Button------------------------
// when finish button is click skip timer to 0
});
body{
	text-align: center;
	font-family: 'Poiret One', sans-serif;
	background-color:#8f16cc;
	color: white;
}

.hidden{
  display:none;
}

h1 {
	font-family: 'Poiret One', sans-serif;
	font-size: 4em;
}

h2 {
	font-size: 2em;
}

button {
	color: white;
	border-radius: 20px;
	background-color: #8f16cc;
	font-size: 2em;
}

.radio {
	display: block;
}

.answers {
	display: block;
	color: or
}
<!DOCTYPE html>
<html>
<head>
	<title>Trivial Game!</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="assets/styles/styles.css">

	<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
</head>
<body>
<h1>Trivia Game</h1>
<h2>Test your Knowledge</h2>
<div id="header"></div>

<div id="show-number"></div>

<button id="startButton">Start</button>

<div id="questions"></div>

<div id="score" class="hidden"></div>

<div id="footer"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="assets/scripts/app.js"></script>


	
</body>
</html>

答案 1 :(得分：0)

将得分div移到问题div之外：

<div id="score"></div>
<div id="questions"></div>
相关问题
最新问题