javascript - if ステートメントが true の場合に停止する FlipClock.js

Question

そのため、ユーザーが正しい答えを得ると FlipClock.js が停止し、ユーザーが正しい答えを得るまでにかかった時間を記録する単純なゲームを作成しようとしています。

私はJavaScriptを使用する初心者であり、時計を停止する機能を呼び出す方法がわからないため、これに多くの問題を抱えています。どんな助けでも大歓迎です。

これを実行すると、Uncaught TypeError: Cannot read property 'stop' of undefined というエラーがコンソール ウィンドウに表示されます。

これは私のコードです:

    <script type="text/javascript">
        var clock;

        $(document).ready(function() {
            var clock;

            clock = $('.clock').FlipClock(180, {
                clockFace: 'MinuteCounter',
                countdown: true,
                callbacks: {
                    stop: function() {
                        $('.message').html('Game Over!')
                    }
                }
            });

        });
    </script>



    <h1>LATEHENP</h1> <!-- ELEPHANT -->



<form id="inputForm">
<p>
<label for="userAnswer">Answer:</label>
<input id="userAsnwer" type="text" name="userAnswer" autocomplete="off" maxlength="8"/>
</p>
<input type="button" value="Submit" id="loginBtn"/>
</form>

<script type="text/javascript">



function process(){
    console.log("working");
        if(inputForm.userAnswer.value.toLowerCase()==="elephant")
    {   //Correct
     document.getElementById("message2").innerHTML = "Well done!";
         clock.stop();
         var time  = clock.getTime();
         console.log("time");

    }
    else
    {
        //Incorrect
    document.getElementById("message2").innerHTML = "Incorrect! <a href='javascript:location.reload(true)'>Retry?</a> ";
    }
};


var btn = document.getElementById("loginBtn");
btn.addEventListener("click", process, false);

</script>