<body>
<!--<div class="door" id="door-left"></div>
<div class="door" id="door-right"></div>-->
<div class="wrapper">
	<video class="fullscreen-video" id="myVideo" autoplay="autoplay" muted loop>
        <source src="../img/bg1.mp4">
        Your browser does not support the video tag.
    </video>
	<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 animate[<>]heartBeat animate[<>]delay-2s">Write T for true statements and F for the false ones.</h4>
		</div>
		<section class="content">
			<div class="body-container">
			
				<div class="question-n animate[<>]zoomIn" class="">
				
				<!-- Well Done Popup -->
				<div id="well-done-popup" class="popup">
   				 <img src="../img/welldone.gif" alt="Well Done">
				</div>


				<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">
						<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 disabled class="btn btn-primary" id="btn-reset">Reset</button>
					</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>