<!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" : "Look at the pictures, and read the descriptions of these great Indian rulers of the past. Write their names using 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" : [		
		"1.<img src='assets/img/img1.png'><br>He founded the Mauryan Dynasty and is said to be the first ruler to have unified most of India under one administration. During his reign of 24 years, he worked towards improving governance and preventing foreign attack.<br>[<>]",
		"2.<img src='assets/img/img2.png'><br>Being the greatest ruler of his time, he developed a strong and powerful kingdom. With his strong navy and army fleet, he expanded his empire to Sri Lanka. He was a great warrior, skilled ruler and builder.<br>[<>]",
		"3.<img src='assets/img/img3.png'><br>Also known as ‘Tiger of Mysore’, he ruled Mysore for nearly 18 years. He was a good scholar, a great warrior as well as a poet. Pioneering the rocket technology in war, he was the last Indian ruler to beat the British in a battle.<br>[<>]",
		"4.<img src='assets/img/img4.png'><br>A great king and successful commander, he founded the Maratha Empire. Because of his maritime warfare and strategy, he is also called the ‘Father of the Indian Navy’. He was crowned ‘Chhatrapati’ at his Raigad Fort.<br>[<>]",
		"5.<img src='assets/img/img5.png'><br>The queen of Kittur (now Karnataka), she was a legendary fighter who fought against British rule in India. She led her army into a battle with British forces and succeeded in winning the first half of the battle.<br>[<>]",
		"6.<img src='assets/img/img6.png'><br>He was one of the most powerful rulers of the Mughal Dynasty in India. He built a vast empire covering most of the Indian subcontinent. He was brave on the battlefield, intelligent at his court and kind towards his people.<br>[<>]",
		"7.<img src='assets/img/img7.png'><br>Popularly known as ‘Sher-e-Punjab’, he was the founder of Sikh Empire in Punjab. Under his reign, whole of Punjab was united and he regularly overcame the threats from Pathans and other Pashtun tribes.<br>[<>]",
		"8.<img src='assets/img/img8.png'><br>This brave and courageous ruler took control of Delhi and Ajmer at the age of 20. He joined hands with many Rajput kings of that period and defeated Muhammad Ghori of Afghanistan seventeen times.<br>[<>]",
		"9.<img src='assets/img/img9.png'><br>She was the only female to have ruled the Delhi Sultanate. She ascended the throne after overthrowing her oppressive brother Ruknuddin Firuz by leading general public to fight for freedom.<br>[<>]",
		

		
		
		
		
		
		
		
		
	],
	
	"OPTIONS" : [
		['Chandragupta Maurya'],
		['Rajaraja Chola'],
		['Tipu Sultan'],
		['Shivaji Maharaj'],
		['Rani Chennamma'],
		['Akbar'],
		['Maharaja Ranjit Singh'],
		['Prithviraj Chauhan'],
		['Razia Sultan'],

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