0
수업 시간에 퀴즈 게임을 만들었습니다. 재시작을 누르는 순간 초가 빨라 졌습니까? 아니면 한 번에 너무 많은 답변을 클릭해도됩니까? 여러 번의 클릭이 발생하지 않도록하는 방법이 있습니까? https://alil0rphan.github.io/TriviaGame/퀴즈 게임의 타이머가 다시 시작될 때까지 속도를 높임
$(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>나는 그 말이 바랍니다. 나를 미쳤어.
기본적으로 너무 많은 답변을 클릭하면 타이머가 계속 빨라집니다. 실행 타이머 기능이 초 감소를 빠르게하기 때문에 그것이 나올지 모르겠습니다. –
클릭이 너무 빠르게 발생하는 경우 문제를 해결할 수 있습니다. document.addEventListener ("click", handler, true); 함수 핸들러 (e) { e.stopPropagation(); e.preventDefault(); } 이렇게하면 클릭 수가 중지됩니다. 클릭 이벤트 이후 설정된 시간 동안 모든 항목에 대해 명확한 오버레이를 표시하는 것이 좋습니다. –
그게 효과가 있지만 다음 질문이 나타나면 클릭 수를 다시 활성화하는 방법은 무엇입니까? –