<!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: "<h1 class='animate__animated animate__lightSpeedInRight'><img src='img/img_1.png'></h1><br>1. It is a handheld electronic device that provides the functionality of a traditional phone along with a computer that offers Internet access, data storage, email capability and other functions. <br>[<>]", 
				ans: ["Smartphone"]
			},{
				title: "<h1 class='animate__animated animate__lightSpeedInRight'><img src='img/img_2.png'></h1><br>2. This equipment is worn on head and covers the eyes completely to provide a wonderful experience of sounds, and moving images in 3D. The resulting effect is very engaging and feels real. <br>[<>]", 
				ans: ["VR headset"]
			},
			{
				title: "<h1 class='animate__animated animate__lightSpeedInRight'><img src='img/img_3.png'></h1><br>3. It is a unique system of satellites networked with a special device that is used to determine the location of something on the whole earth. It is very effective and accurate while moving on road, sea or air. <br>[<>]", 
				ans: ["GPS"]
			},
			{
				title: "<h1 class='animate__animated animate__lightSpeedInRight'><img src='img/img_4.png'></h1><br>4. It is a mobile electronic device that gives the facility of reading books and magazines on a specially designed screen. It has become a popular substitute for physical books. <br>[<>]", 
				ans: ["E-reader"]
			},
		 	{ 
				title: "<h1 class='animate__animated animate__lightSpeedInRight'><img src='img/img_5.png'></h1><br>5. This gadget provides an easy and convenient way to charge an electronic device that uses rechargeable battery. It eliminates the use of wire and plug for the same function. <br>[<>]", 
				ans: ["Wireless charger"]
			},
			{
				title: "<h1 class='animate__animated animate__lightSpeedInRight'><img src='img/img_6.png'></h1><br>6. It is a pair of electronic equipment that is worn inside the ears. It has built-in microphone and is normally used for communication and audio entertainment. <br>[<>]", 
				ans: ["Earbuds"]
			},
			{
				title: "<h1 class='animate__animated animate__lightSpeedInRight'><img src='img/img_7.png'></h1><br>7. This wireless, portable personal computer has touchscreen interface. It is used to access and work with computer apps without the use of an external keyboard or mouse.  <br>[<>]", 
				ans: ["Tablet PC"] 
			},
			{
				title: "<h1 class='animate__animated animate__lightSpeedInRight'><img src='img/img_8.png'></h1><br>8. This wireless, Internet-enabled electronic device responds to spoken commands of its user and gives information, plays music, provides weather forecast and does many such tasks. <br>[<>]", 
				ans: ["Smart speaker"]
			},
			{
				title: "<h1 class='animate__animated animate__lightSpeedInRight'><img src='img/img_9.png'></h1><br>9. It is a remote-operated, unmanned aircraft that is used in a variety of ways such as making a video, drop important supplies, deliver parcel, carry out military-related tasks and do much more. <br>[<>]", 
				ans: ["Drone"]
			},
			


			

          
			  
			
			
			
			
		
]
		}
	],
	
	
	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">Look at the pictures, read the descriptions of these gadgets and write 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>
