<!DOCTYPE html>
<html lang="en">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<link rel="stylesheet" type="text/css" href="assets/lib/js/jquery-ui-1.11.4/jquery-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="assets/css/main.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>	
	<script type="text/javascript">
		const MASTER_DB = {
	"CONFIG" : {
		"HINT" : 2,
		"RANDOM_SHUFFLE" : true,
		"TITLE" : "Drag and Drop",
		"INSTRUCTION" : "Descriptions of some nutrient groups are given below. Identify and write their names from the Clues Box.",
		"INSTRUCTIONS" : [
			"Click <b>Start</b> to begin the activity.",
			"Drag and drop the percentages in the boxes."
		],
		"ANSWER_TITLE": "Answer Key",
		"FEEDBACK_TIME" : 3000,
		"RESULT_TIME" : 2000
	},
	"AUDIO" : {
		"COMPLETE" : [
			"",
			""
		],
		"POSITIVE" : [
			""
		],
		"NEGATIVE" : [
			""
		]
	},
	"COMPLETE": {
		"TEXT": [
			"WELLDONE!",
			"WELLDONE!"
		]
	},
	"QUESTIONS" : [		
		"<img src='assets/img/img1.png'><br>It is a group of essential nutrients that help us stay healthy and fight off germs. They are found in most vegetables and fruits.<br>[<>]",
		"<img src='assets/img/img2.png'><br>These foods give us energy and help our body keep warm. They help keep us cozy and also provide safety to our internal organs.<br>[<>]",
		"<img src='assets/img/img3.png'><br>These foods act like fuel to our body. They give us energy to run, play and do other activities throughout the day. They make our brain and nervous system work well.<br>[<>]",
		"<img src='assets/img/img4.png'><br>These are the type of food that help build strong bones and teeth, maintain healthy blood flow, boost immune system and heal injuries and wounds.<br>[<>]",
		"<img src='assets/img/img5.png'><br>These foods help us grow big and strong. They makeour muscles and bones tough. They also help worn out muscles and tissues to repair.<br>[<>]",
		
		

		
		
		
		
		
		
		
		
	],
	
	"OPTIONS" : [
		['Vitamins'],
		['Fats'],
		['Carbohydrates'],
		['Minerals'],
		['Proteins'],
		

		
		
		
	
	]
}
	</script>
	<script src="assets/lib/js/jquery-3.2.1.min.js" type="text/javascript"></script>
	<script src="assets/lib/js/jquery-ui-1.11.4/jquery-ui.min.js" type="text/javascript"></script>
	<script src="assets/lib/js/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
	<!--<script src="assets/js/app.js" type="text/javascript"></script>-->
	<script src="assets/js/dragdrop.js" type="text/javascript"></script>
</head>
<head>
  
</head>

<body>

<div class="wrapper" id="devilzApp">
	<div class="container">
	
		<header class="header"><h3 class="title-h3" id="app-instruction"></h3>
		<audio controls autoplay hidden>
     			<source src="assets/audio/bg_sound.mp3" type="audio/mpeg">
                unsupported !! 
				    </audio>
		
		
			
				

		</header>

		
		<section class="content">
			
					
			<div class="body-container" id="devilz-content">

				<div class="question-n" id="screen-activity">
				
		
					
					<div class="question-section">
					
					<!--	<div class="section-hdivider">-->
					
							<div class="stage">
								<div class="border-box">
										<div class="" id="container-items-box"></div>
									<div id="container-box">
                                    	<ol>                                          
                                        </ol>
                                    </div>
								</div>
							
							</div>
						
						</div>
					
					</div>
				
				</div>
				
				<footer class="footer">
					<div class="button-wrapper" id="btn-wrapper-holder">
						<h1 class="animate__animated animate__backInUp"><button class="btn btn-primary" id="submit" disabled onClick="checkAnswers()">SUBMIT</button>
                        <button class="btn btn-primary" id="next" disabled onClick="showAnswers()">ANSWER</button>
                        <button class="btn btn-primary" onclick="window.location.reload();">RESET</button></h1>
					</div>
				</footer>
			</div>
		</section>
		
	</div>
</div>


<div class="modal" id="modal-feedback">
	<div class="modal-container animated bounceInDown">
		<div class="modal-content">
			<p id="feedback-text" class="feedback-text">Oops you have submitted the answer incorrectly.</p>
		</div>
		<button class="btn btn-primary" onClick="closeModal('modal-feedback')">Close</button>
	</div>
</div>
<script>
var intro_time = 6500;
var mytime = setTimeout(remove_Audio, intro_time, mytime, $("#button_play_intro"));
var level = 0;


var soundPlaying = true;
var total_ques = 0;
var selected_ques = 0;

function play_pause_intro(_this) 
{
	console.log(soundPlaying, ' soundPlaying');
	
	console.log($("#bg_player").attr("src"));
	
	$("#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>
