<!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: "<img src='img/img_1.png'class=img><br>It is a machine with hose that sucks up dirt.<br>V [<>] [<>] [<>] [<>] M<br>C [<>] [<>] [<>] [<>] [<>] R",
			    ans: ['A','C','U','U','L','E','A','N','E',]
			},
			{
				title: "<img src='img/img_2.png'class=img><br>It turns bread slices into warm, crunchy delight.<br>T [<>] [<>] [<>] [<>] [<>] R",
				ans: ['O','A','S','T','E',]
			},
			{
				title: "<img src='img/img_3.png'class=img><br>It cleans our clothes with water and detergent.<br>W [<>] [<>] [<>] [<>] [<>] G<br>M [<>] [<>] [<>] [<>] [<>] E",
				ans: ['A','S','H','I','N','A','C','H','I','N',]
			},
			{
				title: "<img src='img/img_4.png'class=img><br>Its hot surface is used to smoothen cloth wrinkles.<br>I [<>] [<>] N",
				ans: ['R','O',]
			},
			{
				title: "<img src='img/img_5.png'class=img><br>It blows out hot air to dry our wet hair.<br>H [<>] [<>] R<br>D [<>] [<>] [<>] R",
				ans: ['A','I','R','Y','E',]
			},
			{
				title: "<img src='img/img_6.png'class=img><br>It turns food items into powder or paste form.<br>B [<>] [<>] [<>] [<>] [<>] R",
				ans: ['L','E','N','D','E',]
			},


          
			  
			
			
			
			
			
]
		}
	],
	
	
	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>

<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">Descriptions of some home appliances are given below. Complete their names.</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">
						
					
						<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>
