<!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: "1. MAMMALS<br>[<>] [<>] [<>] [<>]",
				ans: ["Crocodile","Kangaroo","Whale","Bat"]
			},{
				title: "2. REPTILES<br>[<>] [<>] [<>] [<>]",
				ans: ["Python","Lizard","Crocodile","Tortoise"]
			},
			{
				title: "3. INSECTS<br>[<>] [<>] [<>] [<>]",
				ans: ["Grasshopper","Cricket","Butterfly","Ant"]
			},
			{
				title: "4. BIRDS<br>[<>] [<>] [<>] [<>]",
				ans: ["Parrot","Duck","Penguin","Kiwi"]
			},
		

			
			
			
		
]
		}
	],
	
	
	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>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

<body>

<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 the names of given animals in correct groups.</h1></h4>
		</div>
		<section class="content">
			<div class="body-container">
			
				<div class="question-n">
				
				<!-- Well Done Popup -->
<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">
						<img src='img/img1.png'class=img>
						
					
						<ol id="handler-bar">
						</ol>
						
					</div>
					
				</div>

				<footer class="footer">
					<div class="button-wrapper">
						<h1 class="animate__animated animate__backInUp"><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></h1>
					</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>

</body>
</html>
