<!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" : "Read the descriptions and look at the pictures of some world-famous tourist attractions. Name the cities in which they are situated 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>Located in the northwest walls of the city, Damascus Gate is one of the main entrances of this old city. Built in 1537, this gate has weathered numerous wars and invasions.<br>[<>]",
		"<img src='assets/img/img2.png'><br>It is one of the world’s greatest monuments. Earlier it was a church but later it was turned into a mosque. Now, it is a museum.<br>[<>]",
		"<img src='assets/img/img3.png'><br>This is one of the ancient Roman temples. It is a circular building of bricks and concrete, with a great concrete dome rising from the walls.<br>[<>]",
		"<img src='assets/img/img4.png'><br>This is the Brooklyn Bridge, a brilliant specimen of 19th-century engineering. Spanning the East River, it connects Brooklyn to Manhattan. It was the first bridge to use steel for cable wire.<br>[<>]",
		"<img src='assets/img/img5.png'><br>This is a bridge across the Akashi strait in westcentral Japan. With the length of almost four kilometres, it is the world’s longest suspension bridge.<br>[<>]",
		"<img src='assets/img/img6.png'><br>This is called the Forbidden City. It is one of the world’s largest palace complexes. It was constructed by the Yongle emperor of the Ming dynasty and was first officially occupied by the court in 1420.<br>[<>]",
		"<img src='assets/img/img7.png'><br>It is the highest skyscraper in the world. Its total height is 829.8 m and it has 163 floors. The construction of Burj Khalifa began in 2004 and it was opened in 2010.<br>[<>]",
		"<img src='assets/img/img8.png'><br>It is often known in English as St Mark’s Square. Since it is the largest square in the city, many important government buildings are located here.<br>[<>]",
		

		
		
		
		
		
		
		
		
	],
	
	"OPTIONS" : [
		['Jerusalem'],
		['Istanbul'],
		['Rome'],
		['New York'],
		['Japan'],
		['Beijing'],
		['Dubai'],
		['Venice'],

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