2017-07-19 3 views
0

Ich versuche, den folgenden Code zu erhalten, um die Anzahl der richtigen Antworten am Ende des Timmers anzuzeigen, jede Hilfe wäre großartig. Außerdem habe ich ein Problem, bei dem das Scorediv verschwindet, wenn der Timer abgelaufen ist. Ich möchte, dass es erscheint, wenn der Timer beendet ist.Anzeige korrekte Antwort Javascript

Hinweis: Ich appoligize für den unordentlichen Code ich bin neu und versuche zu lernen.

$(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>

+0

Ihre Frage immer noch nicht klar ist. Willst du den FadeOut-Effekt? –

+0

mehrere Fehler 1 ist, warum Sie für jede Frage erneut loopen. Ändern Sie einfach Trivia [0] zu Trivia [i] evrywre in der ersten Schleife und alle Fragen werden geladen zweitens Sie verwenden zwei auf klicken Sie auf Start-Taste verschmelzen sie zu einem, wie es nur einmal löscht –

+0

Ich versuchte, die Kleinigkeiten [0] zu ersetzen Trivia [i] das war meine Absicht beim Schreiben des Codes, aber aus irgendeinem Grund, kann ich es nicht zur Arbeit, so dass ich eine Arbeit um es ist nicht schön, aber es funktioniert und ich werde zurück gehen und versuchen, es später zu reparieren und ich wird auch das Problem mit dem Startknopf beheben. Was ich tun möchte ist, die richtige Antwort aus der Trivia var zu nehmen und sie zu verwenden, damit jede Frage eine richtige Antwort hat und im score div angezeigt wird, wie viele sie am Ende des Countdowns bekommen haben. (Mein Versuch ist unten bei Check-Grannen in meinem JS) Ich hoffe, dass das alles aufräumt. –

Antwort

0

Ist das, was Sie wollen?

INFO: Ihr #score div war innerhalb der #questions Div. Wenn die Fragen div bekommt display:none; werden alle Kinder auch versteckt werden. Also habe ich die Punktzahl außerhalb der Fragen platziert und eine .hidden Klasse erstellt.

EDIT: Ich ersetzte die Warnung() mit einer console.log() nur für den Fall, dass Sie sich fragen ;-).

$(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>

+0

dies behoben mein verschwinden div groß, aber was ich tun möchte, ist die richtige Antwort aus der Trivia var und verwenden Sie es, um jede Frage eine richtige Antwort und Anzeige in der Score div haben, wie viele sie am Ende des Countdowns bekommen haben . (Mein Versuch ist unten bei Check-Grannen in meinem JS) Ich hoffe, dass das alles aufräumt. @hallleron –

0

außerhalb der Frage div Bewegen Sie die Punktzahl div:

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

Danke Dachte ich tat das, aber nach einem zweiten Blick fühlte ich mich nicht dumm jetzt. –

+0

Gern geschehen :) vielleicht können Sie versuchen, die Antwort mit dem grünen Häkchen auf der linken Seite zu akzeptieren, da Sie ein neuer Benutzer sind. – derrysan7