<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Fill in the blanks</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" />
      <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
      <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>
   <body>
      <div class="wrapper">
         <div class="container">
            <header class="">
               <h2 class="" id="app-title"></h2>
            </header>
            <div class="sub-header">
               <audio id = "bg_player" src="audio/bg_sound.mp3"></audio>
               <div id = "button_play_intro" onClick="play_pause_intro(this)" title="Play Intro"></div>
               <h4 class="title-h4" id="app-instruction"></h4>
               <h4 class="title-h4">Write the missing letters to complete the names of persons. Picture clues are given.</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>
                     <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 disabled 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">
	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: "b [<>] y <img src='img/img1.png' class='img2'>",
            ans: ["o"]
         },{
            title: "<img src='img/img2.png' class='img2'> f a [<>] m [<>] [<>]",
            ans: ["r","a","r",]
         },
         {
            title: "n [<>] r [<>] e <img src='img/img3.png' class='img2'>",
            ans: ["u","s"]
         },
         {
            title: "<img src='img/img4.png' class='img2'> m [<>] n",
            ans: ["a"]
         },
        
]
      }
   ],
   
   ANSWERS: {     INSTRUCTION: ''      }
}  
</script>

</body>
</html>
