<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="description" content="Tux Paint">
    <title>Circle the picture</title>
    <link rel="stylesheet" href="lib/font-awesome.css">
	<link href="css/style.css" rel="stylesheet">
	<script src="lib/jquery.js"></script>
	<script src="lib/jcanvas.min.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div class="wrapper">

		<div id="tryAgainPopup" class="popup" style="display: none;">
    <div class="popup-content">
        <p class="text_1">TryAgain!</p>        
    </div>
</div>

<div id="wellDonePopup" class="popup" style="display: none;">
    <div class="popup-content">
        <p class="text_2">welldone!</p>
    </div>
</div>
	<div id="step2" class="startScreen">
		<audio controls autoplay hidden>
     <source src="audio/bg_sound.mp3" type="audio/mpeg">
                unsupported !! 
    </audio></div>
			<div class="h_title">Look at both the pictures carefully. There are ten differences between them. Circle all the differences in the second picture.</div>
		<header> 
				<div class="obj_img">
				
				<div id="leaf_01" class="ab"><img src="img/correct.png" style="margin-left: 0px;margin-top: 0px;"></div>
				<div id="leaf_02" class="ab"><img src="img/correct.png" style="margin-left: 0px;margin-top: 0px;"></div>
				<div id="leaf_03" class="ab"><img src="img/correct.png" style="margin-left: 0px;margin-top: 0px;"></div>
				<div id="leaf_04" class="ab"><img src="img/correct.png" style="margin-left: 0px;margin-top: 0px;"></div>
				<div id="leaf_05" class="ab"><img src="img/correct.png" style="margin-left: 0px;margin-top: 0px;"></div>
				<div id="leaf_06" class="ab"><img src="img/correct.png" style="margin-left: 0px;margin-top: 0px;"></div>
				<div id="leaf_07" class="ab"><img src="img/correct.png" style="margin-left: 0px;margin-top: 0px;"></div>
				<div id="leaf_08" class="ab"><img src="img/correct.png" style="margin-left: 0px;margin-top: 0px;"></div>
				<div id="leaf_09" class="ab"><img src="img/correct.png" style="margin-left: 0px;margin-top: 0px;"></div>
				<div id="leaf_10" class="ab"><img src="img/correct.png" style="margin-left: 0px;margin-top: 0px;"></div>
				

				


				<!--<div id="leaf_07" class="ab"><img src="img/correct.png" style="margin-left: -2px;margin-top: 36px;"></div><img src="img/welldone.gif" style="margin-left: -182px;margin-top: -324px;background: rgb(0 0 0 / 72%);height: 760px;">
				<div id="leaf_08" class="ab"><img src="img/correct.png" style="margin-left: -2px;margin-top: 36px;"></div>-->
				
				
		
			
		
				
                <div id="leaf_01_div">&nbsp;</div>
				<div id="leaf_02_div">&nbsp;</div>
				<div id="leaf_03_div">&nbsp;</div>
				<div id="leaf_04_div">&nbsp;</div>
				<div id="leaf_05_div">&nbsp;</div>
				<div id="leaf_06_div">&nbsp;</div>
				<div id="leaf_07_div">&nbsp;</div>
				<div id="leaf_08_div">&nbsp;</div>
				<div id="leaf_09_div">&nbsp;</div>
				<div id="leaf_10_div">&nbsp;</div>









				

				







				
				
				
				
			</div>
			<input type="hidden" id="choosen-color" value="#fff;">
		</header>
        
       <!-- <div id="finish" style="display:none;" class="startScreen">
			<div class="msg">
				<h1 class="gameTitle">Well done!</h1>
				<h1 class="gameTitle">You have Completed the Activity!</h1>
			</div>
		</div>-->
		
		
	</div>
	<div class="clear"></div>
	<footer>
		<button disabled type="button" id="nextButton" class="btn submit" >Submit</button> 
		<button disabled type="button" id="ansButton" class="btn submit">Answer</button>		
		<button  type="button" id="resetButton" class="btn submit">Reset</button>

	</footer>
</div>

<script>
var intro_time = 8000;
var soundPlaying = true;
var total_ques = 0;
var selected_ques = 0;
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>