0
Also machte ich ein Quiz-Spiel für den Unterricht und jedes Mal, wenn ich Neustart klicke, werden die Sekunden schneller, oder wenn ich zu viele Antworten gleichzeitig klicke? Gibt es eine Möglichkeit, mehrere Klicks zu verhindern? https://alil0rphan.github.io/TriviaGame/Timer auf Trivia Spiel fährt schneller auf Neustart
$(document).ready(function() {
\t // Variables that I need
var correct = 0;
\t \t wrong = 0;
\t \t noanswer = 0;
\t \t question = 0;
\t \t timer = 10;
\t \t $('.restart').hide();
\t //Function to start game
\t function setupGame() {
\t \t $('.timeLeft').hide();
\t \t $('.question').hide();
\t \t $('.options').hide();
\t \t $('.result').hide();
\t \t $('.restart').hide();
\t \t $('.directions').show();
\t };
\t //Establish start button behavior
\t $('.start').on('click', function(startGame) {
\t \t $('.timeLeft').show();
\t \t $('.question').show();
\t \t $('.options').show();
\t \t $('.result').show();
\t \t $('.restart').show();
\t \t $('.start').hide();
\t \t $('.directions').hide();
\t \t showQuestion();
\t });
\t //Showing the question
\t function showQuestion(){
\t \t $(this).off('click');
\t \t $('.result').html('');
\t \t startTimer();
\t \t var obj = questions[question];
\t \t
\t \t var qText = obj.q_text;
\t \t $('.question').html(qText);
\t \t
\t \t var qAnswers = [obj.q_options_1, obj.q_options_2, obj.q_options_3, obj.q_options_4]
\t \t $('.options').html('');
\t \t for (var i = 0; i < qAnswers.length; i++) {
\t \t \t var ans = qAnswers[i];
\t \t \t var id = i + 1;
\t \t \t var first = '<li id="'+id+'">'
\t \t \t var last = '</li>'
\t \t \t $('.options').append(first+ans+last);
\t \t }
\t \t for (var j = 1; j <= 4; j++) {
\t \t \t $('#'+j).click(function(){
\t \t \t \t showAnswer($(this).attr('id'));
\t \t \t });
\t \t }
\t \t $(this).off('click');
\t }
\t //Shows the answer
\t function showAnswer(num) {
\t \t stopTimer();
\t \t timer = 10;
\t \t var count = question;
\t \t var obj = questions[count];
\t \t var objCorrect = obj.q_correct_option
\t \t if (num == 0){
\t \t \t noanswer++
\t \t \t $('.result').html('Please Answer the Questions');
\t \t } else if (num == objCorrect) {
\t \t \t correct++
\t \t \t $('.result').html('Correct!');
\t \t } else {
\t \t \t wrong++
\t \t \t $('.result').html('Incorrect!');
\t \t \t $('#'+num).addClass('wrong');
\t \t }
\t \t $('#'+objCorrect).addClass('correct');
\t \t $('.result').append('<br> Correct: ' + correct + '<br>');
\t \t $('.result').append('Wrong: ' + wrong + '<br>');
\t \t $('.result').append('Missed: ' + noanswer);
\t \t question++
\t \t if (question < 15) {
\t \t \t setTimeout(showQuestion, 2000); \t
\t \t } else {
\t \t \t setTimeout(gameOver);
\t \t }
\t \t $(this).off('click');
\t }
//Establish timer for each question
function startTimer(){
\t \t timer = 10;
\t \t $('.timeLeft').html('Time Remaining: ' + timer + ' seconds');
\t \t counter = setInterval(runTimer, 1000);
\t \t $(this).off('click');
}
// run the timer
function runTimer(){
\t
\t // remove a second
\t \t timer--
\t \t // display timer
\t \t $('.timeLeft').html('Time Remaining: ' + timer + ' seconds');
\t \t
\t \t // you ran out of time
\t \t if (timer === 0){
\t \t \t // stop the counter from going negative
\t \t \t stopTimer();
\t \t \t // show answer and mark no answer
\t \t \t showAnswer(0);
\t \t }
}
// stop counting down
function stopTimer(){
\t \t clearInterval(counter);
}
//Establishes a restart buttom
$('.restart').on('click', restart);
\t // Restart
\t function restart() {
\t \t stopTimer();
\t \t $('.start').show();
\t \t correct = 0;
\t \t wrong = 0;
\t \t noanswer = 0;
\t \t question = 0;
\t \t timer = 10;
\t \t setupGame();
\t }
\t
\t function gameOver() {
\t \t
\t \t $('.options').html('Hit Restart if you want to try again!');
\t \t $('.question').html('');
\t \t $('.result').html('<br> Correct: ' + correct + '<br>');
\t \t $('.result').append('Wrong: ' + wrong + '<br>');
\t \t $('.result').append('Missed: ' + noanswer);
\t \t if (correct == 15) {
\t \t \t $('.timeLeft').html('You are a Menu Master!');
\t \t } else if (correct > wrong) {
\t \t \t $('.timeLeft').html('Almost! See if you can get the all correct.');
\t \t } else if (noanswer == 15) {
\t \t \t $('.timeLeft').html('Do you even care?');
\t \t } else if (wrong > correct) {
\t \t \t $('.timeLeft').html('Sad! Try again.');
\t \t } else if (wrong == correct) {
\t \t \t $('.timeLeft').html('You should keep studying the menu.');
\t \t } else {
\t \t \t $('.timeLeft').html('Thanks for trying!');
\t \t }
\t \t $('.restart').on('click', restart);
\t }
});
\t //Establish questions
\t function question(number, text, opt1, opt2, opt3, opt4, ans) {
\t \t this.id = number;
\t \t this.q_text = text;
\t \t this.q_options_1 = opt1;
\t \t this.q_options_2 = opt2;
\t \t this.q_options_3 = opt3;
\t \t this.q_options_4 = opt4;
\t \t this.q_correct_option = ans;
\t };
\t var question1 = new question (
\t \t 1,
\t \t 'What makes Slims unique?',
\t \t 'They are smaller.',
\t \t 'They have only meats or cheese, we can\'t add veggies or sauce.',
\t \t 'They get less mayo.',
\t \t 'They get extra veggies.',
\t \t 2
\t)
\t var question2 = new question (
\t \t 2,
\t \t 'Which subs and clubs have lettuce and tomato?',
\t \t 'All of them.',
\t \t 'All but the ones with tuna.',
\t \t 'The clubs only.',
\t \t 'The subs only.',
\t \t 1
\t)
\t var question3 = new question (
\t \t 3,
\t \t 'Which sandwiches have no mayo?',
\t \t 'The 3, 5 and 15.',
\t \t 'The 2, 3, 4, 14, 16 and 17.',
\t \t 'The 6 and 13.',
\t \t 'The Gargantuan.',
\t \t 1
\t)
\t var question4 = new question (
\t \t 4,
\t \t 'Which sandwiches get Onions, Herbs and Sauce?',
\t \t 'The ones with Cheese.',
\t \t 'The ones with Tuna.',
\t \t 'The Billy Club and the Ultimate Porker.',
\t \t 'The ones with Vito.',
\t \t 4
\t)
\t var question5 = new question (
\t \t 5,
\t \t 'What comes on the #8?',
\t \t 'Mayo, tomato, lettuce, Bacon and Ham.',
\t \t 'Mayo, tomato, lettuce, Beef and Turkey.',
\t \t 'Mayo, tomato, lettuce, Beef, Dijon, Ham and Cheese.',
\t \t 'Mayo, tomato, lettuce, Beef, more Beef and Cheese.',
\t \t 3
\t)
\t var question6 = new question (
\t \t 6,
\t \t 'How many pieces of bacon do we put as a portion?',
\t \t '4.',
\t \t 'Enough to cover the sandwich.',
\t \t '6.',
\t \t '5.',
\t \t 4
\t)
\t var question7 = new question (
\t \t 7,
\t \t 'What comes on a #14?',
\t \t 'Mayo, tomato, lettuce, Turkey and Bacon.',
\t \t 'Mayo, tomato, lettuce, Beef and Turkey.',
\t \t 'Mayo, tomato, lettuce, Beef, Dijon, Ham and Cheese.',
\t \t 'Mayo, tomato, lettuce, Ham and Bacon.',
\t \t 2
\t)
\t var question8 = new question (
\t \t 8,
\t \t 'What comes on the #10?',
\t \t 'Mayo, tomato, lettuce, Bacon and Ham.',
\t \t 'Mayo, tomato, lettuce, Beef and Turkey.',
\t \t 'Mayo, tomato, lettuce, Beef, Dijon, Ham and Cheese.',
\t \t 'Mayo, tomato, lettuce, Beef, more Beef and Cheese.',
\t \t 4
\t)
\t var question9 = new question (
\t \t 9,
\t \t 'What comes on the #17?',
\t \t 'Mayo, tomato, lettuce, Bacon and Ham.',
\t \t 'Mayo, tomato, lettuce, Beef and Turkey.',
\t \t 'Mayo, tomato, lettuce, Beef, Dijon, Ham and Cheese.',
\t \t 'Mayo, tomato, lettuce, Beef, more Beef and Cheese.',
\t \t 1
\t)
\t var question10 = new question (
\t \t 10,
\t \t 'Which sandwiches have Avo spread on them?',
\t \t 'The 5 and 9.',
\t \t 'The 6, 12 and 13.',
\t \t 'The 3 and 15.',
\t \t 'The 16 and 17.',
\t \t 2
\t)
\t var question11 = new question (
\t \t 11,
\t \t 'What comes on the #12?',
\t \t 'Mayo, tomato, lettuce, Bacon and Ham.',
\t \t 'Mayo, tomato, lettuce, Beef and Turkey.',
\t \t 'Mayo, tomato, lettuce, Turkey, Cheese, Avo and Cheese.',
\t \t 'Mayo, tomato, lettuce, Beef, more Beef and Cheese.',
\t \t 3
\t)
\t var question12 = new question (
\t \t 12,
\t \t 'What comes on the #9?',
\t \t 'Mayo, tomato, onions, lettuce, sauce, herbs, Vito, Ham and Cheese.',
\t \t 'Mayo, tomato, lettuce, Beef and Turkey.',
\t \t 'Mayo, tomato, lettuce, Beef, Dijon, Ham and Cheese.',
\t \t 'Mayo, tomato, lettuce, Beef, more Beef and Cheese.',
\t \t 1
\t)
\t var question13 = new question (
\t \t 13,
\t \t 'What comes on the #11?',
\t \t 'Mayo, tomato, lettuce, Bacon and Ham.',
\t \t 'Mayo, tomato, lettuce, Beef and Turkey.',
\t \t 'Mayo, tomato, lettuce, Beef, Dijon, Ham and Cheese.',
\t \t 'Mayo, tomato, lettuce, Turkey, Ham and Cheese.',
\t \t 4
\t)
\t var question14 = new question (
\t \t 14,
\t \t 'What comes on the #16?',
\t \t 'Mayo, tomato, lettuce, Bacon and Ham.',
\t \t 'Mayo, tomato, lettuce, Bacon and Turkey.',
\t \t 'Mayo, tomato, lettuce, Turkey, Ham and Cheese.',
\t \t 'Mayo, tomato, lettuce, Beef, more Beef and Cheese.',
\t \t 2
\t)
\t var question15 = new question (
\t \t 15,
\t \t 'Which sandwiches have cucumbers?',
\t \t 'Sandwiches with Tuna.',
\t \t 'Sandwiches with Avo.',
\t \t 'The 3, 6, 12, 13 and 15.',
\t \t 'All of the above.',
\t \t 4
\t)
\t var questions = [question1, question2, question3, question4, question5, question6, question7, question8, question9, question10, question11, question12, question13, question14, question15]<!DOCTYPE html>
<html lang="en-us">
<head>
\t <meta charset='UTF-8'>
\t <meta name='viewport' content='width=device-width, initial-scale=1.0'>
\t <title>Jimmy Trivia</title>
\t <link rel='stylesheet' type='text/css' href='assets/css/style.css'>
\t <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
\t <script type='text/javascript' src='assets/javascript/app.js'></script>
</head>
<body>
\t <section id='container'>
\t \t <img src='assets/images/jimmy.png' title="Jimmy John's" alt="Jimmy John's Logo" id='jjlogo'>
\t \t <h1>Menu Madness</h1>
\t \t <button class='start'>Start</button>
\t \t <p class='directions'>Press Start to continue the quiz. <br>Only select one answer at a time. <br>Press Restart if you are having any problems.</p>
\t \t <h2 class='timeLeft'></h2>
\t \t <h3 class='question'></h3>
\t \t <p class='options'></p>
\t \t <p class='result'></p>
\t \t <button class='restart'>Restart</button>
\t \t <br>
\t \t <br>
\t </section>
</body>
</html>Ich hoffe, das macht Sinn. Es hat mich verrückt gemacht.
Im Wesentlichen, wenn Sie zu viele Antworten klicken, wird der Timer immer schneller. Ich weiß nicht, ob es daran liegt, dass die Lauftimer-Funktion sich anhäuft, um die Sekunden schneller dekrementieren zu lassen? –
Wenn Sie Probleme mit zu schnellen Klicks haben, können Sie sie schließen. document.addEventListener ("click", handler, true); Funktionshandler (e) { e.stopPropagation(); e.preventDefault(); } Dies wird Klicks stoppen. Sie können nach einem Klickereignis auch eine klare Überlagerung über alles für eine bestimmte Zeit erstellen. –
Das funktioniert, aber wie kann ich Klicks wieder aktivieren, nachdem die nächste Frage auftaucht? –