<!DOCTYPE html>
<html lang="en">

<head>
    <title>Complete these words with the missing letters. </title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/animate.css" />
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />

    <script type="text/javascript">
        
        const MASTER_DB = {
    CONFIG: {
        MAX_INPUT: 3,                       // max length of typing
        MAX_ATTEMPT_ANS: 1,                 // attempts for showing answer button
        INPUT_FILTER_STATUS: false,
        INPUT_FILTER: [84, 116, 70, 102],   //T AND F
        INPUT_TRANSFORM: 'default',     // uppercase | lowercase | default
        INPUT_TEXT_CODE: '[<>]',
        FEEDBACK_TIME: 2500
    },

    TITLE: '',
    INSTRUCTION: '',
    QUESTIONS: [
        {
            feedback: {
                positive: '',
                negative: ''
            },
            data: [
            {
                title: 'Water can exist in all three states: solid, liquid, and gas. [<>]',
                ans: ["T"]
            },
            {
                title: "Ice-cream melts into gas when heated. [<>]",
                ans: ["F"]
            },
            {
                title: "Butter changes from solid to liquid when cooled. [<>]",
                ans: ["F"]
            },

            {
                title: "Gold can change from solid to liquid without forming a new substance. [<>]",
                ans: ["T"]
            },
            {
                title: "Water turns into ice when frozen. [<>]",
                ans: ["T"]
            },
        

          
              
            
            
            
            
            
]
        }
    ],
    
    
    ANSWERS: {      INSTRUCTION: ''     }
}

    </script>
    <script src="js/keycode.js" type="text/javascript"></script>
    <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="js/app.fib.js" type="text/javascript"></script>
</head>

<head>
</head>

<body>
    <video class="fullscreen-video" id="myVideo" autoplay="autoplay" muted loop>
        <source src="../img/background.mp4"> Your browser does not support the video tag.
    </video>
    <div class="wrapper">
        <div class="container">


            <header class="">
                <h2 class="" id="app-title"></h2>
            </header>
            <div class="sub-header">
                <audio controls autoplay hidden>
                    <source src="audio/bg_sound.mp3" type="audio/mpeg"> unsupported !!
                </audio>
                <h4 class="title-h4" id="app-instruction"></h4>
                <h4 class="title-h4">Write ‘T’ for true and ‘F’ for false.</h4>
            </div>
            <section class="content">
                <div class="body-container">

                    <div class="question-n">

                        <div id="well-done-popup" class="popup">
                            <img src="../img/welldone.gif" alt="Well Done">
                        </div>

                        <!-- Try Again Popup -->
                        <div id="try-again-popup" class="popup">
                            <img src="../img/TryAgain.gif" alt="Try Again">
                        </div>


                        <div class="question-section">
                            <ol id="handler-bar">
                            </ol>

                        </div>

                    </div>

                    <footer class="footer">
                        <div class="button-wrapper">
                            <button disabled class="btn btn-primary" id="btn-done">Submit</button>
                            <button disabled class="btn btn-primary" id="btn-answers">Answer</button>
                            <button disabled class="btn btn-primary" id="btn-tryagain" style="display:none">Try Again</button>
                            <button class="btn btn-primary" id="btn-reset">Reset</button>
                        </div>
                    </footer>

                    <div id="modal-feedback">
                        <p id="feedback-text" class="feedback-text"></p>
                    </div>
                </div>
            </section>

        </div>
    </div>

    <script>
        var intro_time = 13000;
        var mytime = setTimeout(remove_Audio, intro_time, mytime, $("#button_play_intro"));
        var soundPlaying = true;
        function play_pause_intro(_this) 
        {
        	console.log(soundPlaying, ' soundPlaying');
        	$("#bg_player").get(0).play();
        	console.log($(_this))
        	$(_this).css(
        	{
        		'opacity':.7,
        		'pointer-events':'none'
        	});
        	var mytime = setTimeout(remove_Audio, intro_time, mytime, _this);
        }
        function remove_Audio(_mytime, _btn)
        {
        	clearTimeout(_mytime);
        	$("#bg_player").get(0).pause();
        	$(_btn).css(
        	{
        		'opacity':1,
        		'pointer-events':'auto'
        	});	
        }
    </script>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function(){
            document.body.addEventListener("touchstart", playVideo);
            function playVideo() {
                const video = document.getElementById('myVideo');
                if(video.playing) {
                } else {
                    video.play();
                }
            }
        });
    </script>
    <style type="text/css">
        .fullscreen-video {
            position: fixed;
            overflow: hidden;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translateX(-50%) translateY(-50%);
            z-index: -10;
        }
        
        .bg-overlay {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background-color: #000;
            opacity: 0.6;
            z-index: -9;
        }
    </style>


</body>

</html>