顯示正確的答案javascript

我想獲得下面的代碼來顯示在timmer結束時的正確答案的數量任何幫助將是偉大的。另外，我有一個問題，當定時器到達時scoreDiv會消失，我希望它在定時器完成時出現。顯示正確的答案javascript

注：我appoligize亂碼我是新的，試圖學習。

$(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{ 
 
\t text-align: center; 
 
\t font-family: 'Poiret One', sans-serif; 
 
\t background-color:#8f16cc; 
 
\t color: white; 
 
} 
 

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

 
h2 { 
 
\t font-size: 2em; 
 
} 
 

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

 
.radio { 
 
\t display: block; 
 
} 
 

 
.answers { 
 
\t display: block; 
 
\t color: or 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Trivial Game!</title> 
 

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

 
\t <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> 
 

 

 
\t 
 
</body> 
 
</html>

來源

2017-07-19 Brooklee Wilson

你的問題還不清楚。你想淡出效果嗎？ –

幾個錯誤 1就是爲什麼你再次循環每個問題。只需改變瑣事[0]瑣事[i] evrywhre在第一個循環中，所有問題將加載其次，你使用兩個點擊開始按鈕將它們合併爲一個，因爲它只觸發一次 –

我試圖將瑣事[0]替換爲瑣事[我]這是我編寫代碼時的意圖，但由於某種原因，我不能讓它工作，所以我做了一個工作，它不是很漂亮，但它的工作原理，我會回去嘗試修復它，將修復啓動按鈕問題。我想要做的是從Trivia var中獲取correctAnswer，並用它來讓每個問題都有一個正確答案，並在score div中顯示他們在倒計時結束時有多少人。（我的嘗試是在我的JS檢查awnsers下的底部）我希望清除的東西。 –

這是你想要的嗎？

信息：您的#score div是在#questions格內。當問題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{ 
 
\t text-align: center; 
 
\t font-family: 'Poiret One', sans-serif; 
 
\t background-color:#8f16cc; 
 
\t color: white; 
 
} 
 

 
.hidden{ 
 
    display:none; 
 
} 
 

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

 
h2 { 
 
\t font-size: 2em; 
 
} 
 

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

 
.radio { 
 
\t display: block; 
 
} 
 

 
.answers { 
 
\t display: block; 
 
\t color: or 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Trivial Game!</title> 
 

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

 
\t <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> 
 

 

 
\t 
 
</body> 
 
</html>

來源

2017-07-19 06:00:26 hallleron

這固定了我的消失div很大，但我想要做的是從Trivia var中獲取correctAnswer並使用它來讓每個問題都有一個正確的答案並在score div中顯示他們在倒數結束時得到了多少。（我的嘗試是在我的JS檢查awnsers下的底部）我希望清除的東西。 @hallleron –

移動你的分數DIV問題的div之外：

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

來源

2017-07-19 06:01:15 derrysan7

謝謝我以爲我確實這麼做了，但一看後，我就沒有覺得現在啞了。 –

不客氣:)也許你可以試着用左邊的綠色複選標記來接受答案，因爲你是一個新用戶。 – derrysan7

顯示正確的答案javascript

回答

相關問題