.show()和.toggle()不会在琐事游戏中显示最终游戏屏幕

Question

我已经一遍又一遍地复习了代码。我曾尝试使用JQuery显示最终的游戏屏幕(结果屏幕)，然后再次通过定义全局变量来显示。我把它作为另一个函数的一部分，并在它自己的函数中调用。我想不出任何组合来显示我的最终结果屏幕。

var welcome = $("#welcome-screen")
var gameOver = $("#result-screen")
var game = $("#game-screen")

var playerInteract = {
    correctAnswers: 0,
    incorrectAnswers: 0,
    unanswered: 8,
    seconds: 10,
    //done: false,

    welcome: function() {
        gameOver.toggle();
        game.hide();
    },

    initiate: function() {
        welcome.hide();
        game.show();
        playerInteract.timer();
    },

    timer: function() {
        var windowTimeout = setTimeout(function() {
            //playerInteract.gameOver() 
            game.hide()
               playerInteract.answerCheck()
               playerInteract.gameOverLoad()
            },  10000);
        var intervalVariable = setInterval(playerInteract.decrement, 1000);
        var seconds = playerInteract.seconds;

    },  

    decrement: function () {
        if (playerInteract.seconds >= 2) {
                playerInteract.seconds--;
                console.log("seconds: " + playerInteract.seconds);
                $("#countdown").text(playerInteract.seconds);
            }
    },
   gameOverLoad: function() {
       gameOver.show();
       console.log("gameover");
   }

};


window.onload = playerInteract.welcome;

$("#start-button").on("click", function(event) {
    //event.preventDefault()
    playerInteract.initiate()
});

$("#countdown").text(playerInteract.seconds); 

<-HTML->

​

<div id="welcome-screen" class="container">

    <img id="header" src="assets/images/header-image.png" alt="Stephen King Killer Trivia">
    <h1>Take a stab at it!</h1>
    <button id=start-button><h2>STAB!</h2></button>

</div>

<div id="game-screen" class="container">
    <img id="header" src="assets/images/header-image.png" alt="Stephen King Killer Trivia">

    <h2>Take a stab at it!</h2>
    <h3>Time Remaining: <div id="countdown"></div></h3>

    <img id="penny" src="assets/images/penny.png" alt="Pennywise the clown.">

    <h4>What's the name of the killer clown in Stephen King's novel, <em>IT</em>?</h4>

        <div class="answer-boxes">
            <input type="radio" name="q1" class="radio-button" id="wrongA"> Torchy
            <input type="radio" name="q1" class="radio-button" id="wrongB"> Quarterdumb
            <input type="radio" name="q1" class="radio-button" id="correct1"> Pennywise
            <input type="radio" name="q1" class="radio-button" id="wrongC"> Boinko
        </div>

    <img id="georgie" src="assets/images/georgie.png" alt="Georgie from 'It'">

    <h4>Which King protagonist went crazy and killed<br> most of her classmates and teachers during prom?</h4>

    <div class="answer-boxes">
        <input type="radio" name="q2" class="radio-button" id="wrongD"> Sandy
        <input type="radio" name="q2" class="radio-button" id="wrongE"> Dolores
        <input type="radio" name="q2" class="radio-button" id="wrongF"> Sherrie
        <input type="radio" name="q2" class="radio-button" id="correct2"> Carrie
        </div>

    <h4>Stephen King regularly contributed to <em>Dave's Rag</em> in high school.</h4>

    <div class="answer-boxes">
        <input type="radio" name="q3" class="radio-button" id="correct3"> True
        <input type="radio" name="q3" class="radio-bitton" id="wrongG"> False
        </div>

    <h4>What year and model car was featured <br>in the movie <em>Christine</em> based on a Stephen King book?</h4>

    <div class="answer-boxes">
        <input type="radio" name="q4" class="radio-button" id="wrongH"> 1962 Ford Mustang
        <input type="radio" name="q4" class="radio-button" id="wrongI"> 1957 Chevy Chevelle
        <input type="radio" name="q4" class="radio-button" id="wrongJ"> 1951 Jaquar XK 120
        <input type="radio" name="q4" class="radio-button" id="corrcet4"> 1958 Plymouth Fury
        </div>

    <h4>Mike Hanlon made seven phone calls in Stephen King's novel, <em>IT</em>.</h4>

    <div class="answer-boxes">
        <input type="radio" name="q5" class="radio-button" id="wrongK"> True
        <input type="radio" name="q5" class="radio-button" id="correct5"> False
    </div>

    <h4>What's the name of Stephen King's western/fantasy saga?</h4>

    <div class="answer-boxes">
        <input type="radio" name="q6"class="radio-button" id="correct6"> <em>The Dark Tower</em>
        <input type="radio" name="q6"class="radio-button" id="wrongL"> <em>The Darkest Hour</em>
        <input type="radio" name="q6"class="radio-button" id="wrongM"> <em>The Dark Knight</em>
        <input type="radio" name="q6"class="radio-button" id="wrongN"> <em>The Dark Travels</em>
    </div>

    <h4>Which of the below is a Stephen King pseudonym?</h4>

    <div class="answer-boxes">
        <input type="radio" name="q7" class="radio-button" id="wrongO"> Dick Hallorann
        <input type="radio" name="q7" class="radio-button" id="correct7"> Richard Bachman
        <input type="radio" name="q7" class="radio-button" id="wrongP"> Sam Paul
        <input type="radio" name="q7" class="radio-button" id="wrongQ"> Benjamin Sanders
    </div>

    <h4>One of Stephen King's jobs prior to publication was as a high school teacher.</h4>

    <div class="answer-boxes">
        <input type="radio" name="q8" class="radio-button" id="correct8"> True
        <input type="radio" name="q8" class="radio-button" id="wrongR"> Flase
    </div>

<div id="result-screen" class="container">

    <img id="header" src="assets/images/header-image.png" alt="Stephen King Killer Trivia">

    <h1>All Done!</h1>
    <h4>Correct Answers: <div id="correct-answers"></div></h4>
    <h4>Incorrect Answers: <div id="incorrect-answers"></div></h4>
    <h4>Unanswered: <div id="unanswered"></div></h4>

</div>

我从JS中去掉的唯一代码是answerCheck函数。

在setTimeout结束后，我希望隐藏游戏屏幕，显示结果屏幕。隐藏、显示、切换代码中的所有工作，直到超时结束。

游戏屏幕隐藏起来，只剩下背景可见。运行将gameover打印到日志的console.log。控制台中没有错误。