[<a href='/'>end</a>] [7%]<br><center><script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<audio autoplay src="../files/_2021-4a_440.mp3" id="word" autostart="true"></audio>
<audio src="../files/try_again.mp3" id="try_again" autostart="false"></audio>
<audio src="../files/l_1.mp3" id="l_1" autostart="false"></audio>
<audio src="../files/l_2.mp3" id="l_2" autostart="false"></audio>
<audio src="../files/l_3.mp3" id="l_3" autostart="false"></audio>
<audio src="../files/l_4.mp3" id="l_4" autostart="false"></audio>



<div id='note' style='height: 50px; font-size: 20px; font-weight: bold; font-size: 30px;margin-top: 50px;'></div><br><div id='preview_word' style='height: 50px; font-size: 20px; font-weight: bold; font-size: 30px;visibility: hidden;'>service</div><br><a href='#' id='preview'>show me the word / math</a> - <a id='say_again' href='#'>say again</a> 🔊<br><table style='margin-top: 20px;'><tr><td><input style='width: 400px;' type='text' name='answer' id='answer' autocomplete='off' autofocus> <input type='button' value='NEXT' id='next' style='background-color: #FF6A66; font-weight: bold;'></td></tr></table><br><table cellspacing='1' cellpadding='1'><tr><td style='width:20px;height:20px;background-color: green;' id='t1'></td><td style='width:20px;height:20px;background-color: green;' id='t2'></td><td style='width:20px;height:20px;background-color: green;' id='t3'></td><td style='width:20px;height:20px;background-color: green;' id='t4'></td><td style='width:20px;height:20px;background-color: green;' id='t5'></td><td style='width:20px;height:20px;background-color: green;' id='t6'></td><td style='width:20px;height:20px;background-color: green;' id='t7'></td><td style='width:20px;height:20px;background-color: green;' id='t8'></td><td style='width:20px;height:20px;background-color: green;' id='t9'></td><td style='width:20px;height:20px;background-color: green;' id='t10'></td></tr></table> </center><style>
    html {
        font-family: Arial;
        background-color: #C7F759;

    }
    input[type=text]:focus {
        outline: none !important;
        border:1px solid #ccc;
    }

    input[type=text], select {
        width: 200px;
        height: 50px;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        font-size: 2em;
        float: left;
        text-align: center;
    }
    input[type=button], select {
        width: 60px;
        height: 50px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        float: left;
        margin-left: 5px;
        text-align: center;

    }
</style>
<script>
    var orgTimeout = 310000

    function playSound ( soundname = "word") {
        var thissound = document.getElementById( soundname );
        thissound.play();
    }
    function playSoundResult ( soundname = "word_result") {
        var thissound = document.getElementById( soundname );
        thissound.play();
    }
    const soundEffect = new Audio();

    // onClick of first interaction on page before I need the sounds
    soundEffect.play();

    // later on when you actually want to play a sound at any point without user interaction
    $( document ).ready(function() {
        console.log( "ready!" );
        var resultCheck = function() {
                        console.log( $( "#answer" ).val());
            var answer = $.trim($( "#answer" ).val());
            if(answer != "service") {
                console.log( "try again" );

                $( "#note" ).text("try again");
                /* start json */
                console.log("error440");
                $.getJSON( "./error.php?id=440", function( data ) {});
                playSound ( 'try_again' );
                setTimeout(function() {
                    playSound();
                }, 2000);

                $('#answer').prop('readonly', true);
                $("#answer").focus();
                setTimeout(function() {
                    $( "#note" ).text("");
                    $( "#answer" ).val("");
                    $("#answer").css('border-color',"ccc");
                    $("#answer").css('background-color',"#fff");
                    $('#answer').prop('readonly', false);

                }, 2000);
                $("#answer").css('border-color',"red");
                $("#answer").css('background-color',"#ffcccd");

                //alert("ewfdwef");
                $("#t10").css("background-color", "green");
                $("#t9").css("background-color", "green");
                $("#t8").css("background-color", "green");
                $("#t7").css("background-color", "green");
                $("#t6").css("background-color", "green");
                $("#t5").css("background-color", "green");
                $("#t4").css("background-color", "green");
                $("#t3").css("background-color", "green");
                $("#t2").css("background-color", "green");
                $("#t1").css("background-color", "green");
                timeout = orgTimeout+2;
            } else {
                $( "#note" ).html("<div style='z-index: 1000;background-color: #ffffff; min-height: 50px; width: 50%!important;'><img src='https://media.giphy.com/media/BBkKEBJkmFbTG/source.gif' style='z-index: 100; width: 100%'><br>Very good!</div>");
                console.log( "gut gemacht" );
                var l = Math.floor((Math.random() * 4) + 1);
                console.log('l_'+l);
                //alert("wort wiederholung");
                                playSound();
                                                setTimeout(function() {
                    playSound ( 'l_'+l );
                }, 800);
                
                $('#answer').prop('readonly', true);
                setTimeout(function() {
                    window.location.href = './correct.php?list=2021-4a&term=41&lang=en&correct=440&'+Math.random();
                }, 4000);

                $("#answer").css('border-color',"green");
                $("#answer").css('background-color',"#7fff7f");
            }
        };


        $(document).on('keypress',function(e) {
            if(e.which == 13) {
                resultCheck();
            }
        });
        $( "#next" ).click(function() {
            resultCheck();
        });
        $( '[name=mathResultNext_1]' ).click(function() {
            var thisResult = $( '[name=mathResultNext_1]' ).text();
            $("#answer").val(thisResult);
            console.log("klick"+$( '[name=mathResultNext_1]' ).text());
            resultCheck();
        });
        $( '[name=mathResultNext_2]' ).click(function() {
            var thisResult = $( '[name=mathResultNext_2]' ).text();
            $("#answer").val(thisResult);
            console.log("klick"+$( '[name=mathResultNext_2]' ).text());
            resultCheck();
        });
        $( '[name=mathResultNext_3]' ).click(function() {
            var thisResult = $( '[name=mathResultNext_3]' ).text();
            $("#answer").val(thisResult);
            console.log("klick"+$( '[name=mathResultNext_3]' ).text());
            resultCheck();
        });
        $( '[name=mathResultNext_4]' ).click(function() {
            var thisResult = $( '[name=mathResultNext_4]' ).text();
            $("#answer").val(thisResult);
            console.log("klick"+$( '[name=mathResultNext_4]' ).text());
            resultCheck();
        });
        /*$("#preview_word").css("visibility", "hidden");*/

        $( "#preview" ).click(function() {
            $("#preview_word").css("visibility", "visible");
            setTimeout(function() {
                $("#preview_word").css("visibility", "hidden");
            }, 300000);

            $("#answer").focus();

        });
        $( "#say_again" ).click(function() {
            playSound();
            $("#answer").focus();

        });

        /*
        $("#t5").css("background-color", "red");
        $("#t4").css("background-color", "red");
        $("#t3").css("background-color", "red");
        $("#t2").css("background-color", "red");
        $("#t1").css("background-color", "red");
*/
        var timeout = orgTimeout;
        setTimeoutAgain();
        function setTimeoutAgain() {
            var t = setTimeout(function() {
                timeout = timeout - 1;
                //console.log(timeout);
                $("#t"+timeout).css("background-color", "red");
                if(timeout <= 0) {

                    resultCheck();
                }
                setTimeoutAgain();
            }, 1000);
        }
    });
</script>