<!DOCTYPE html>
<html lang="en">
<head>
	<title>Complete the given blanks</title>
	 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="author" content="" />
	<meta name="description" content="HTML5 True/False Interactivity" />
	<meta name="keywords" content="html5, elearning, true/false" />
	<meta name="website" content="" />
	<meta name="robots" content="index,follow" />
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/animate.css" />
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<script src="js/data.js" type="text/javascript"></script>
	<script src="js/keycode.js" type="text/javascript"></script>
	<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
</head>

<body>
<div class="wrapper">
	<div class="container">
		<audio controls autoplay hidden>
     <source src="audio/bg_sound.mp3" type="audio/mpeg">
                unsupported !! 
    </audio>
		<header class="header"><h2 class="title-h2" id="app-title">Write the names of oceans marked in the map, in the given space.</h2></header>
		<section class="content">
			<div class="body-container">
				<div class="question-n">
					
					<div class="question-section text-center">
					
						<p id="p1" class="p">
							<span class="inptBox1">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b1t1" placeholder="" maxlength="30" autocomplete="off">
                                
								<!-- <span class="icons" id="box1-tick"><i class="fa fa-check" aria-hidden="true"></i></span> -->
								<span class="icons" id="box1-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></span>
								<!--<span class="icons" id="box1-wrong"><i class="fa fa-close" aria-hidden="true"></i></span>-->
                                <span class="icons" id="box1-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
                               
							</span>
						</p>
						<p id="p2" class="p">
							<span class="inptBox2">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b2t1" placeholder="" maxlength="30" autocomplete="off">
                                
								<span class="icons2" id="box2-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons2" id="box2-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>
						<p id="p3" class="p">
							<span class="inptBox3">
								<span class="inptLabel"></span> 
                                <input type="text" class="inptTxt" id="b3t1" placeholder="" maxlength="30" autocomplete="off">
                                 
								<span class="icons3" id="box3-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons3" id="box3-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>
						
						<p id="p4" class="p">
							<span class="inptBox4">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b4t1" placeholder="" maxlength="30" autocomplete="off">
                                
								<span class="icons4" id="box4-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons4" id="box4-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>
						<p id="p5" class="p">
							<span class="inptBox5">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b5t1" placeholder="" maxlength="30" autocomplete="off">
                                
                                <span class="icons5" id="box5-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons5" id="box5-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>
						

					


					


						


                       
					</div>
				</div>
				<div id="modal-feedback">
					<p id="feedback-text" class="feedback-text"></p>
				</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="ans-btn">Answer</button>
                        <button   class="btn btn-primary" id="btn-reset" onClick="window.location.reload()">Reset</button>
					</div>
				</footer>
			</div>
		</section>
	</div>
</div>

<!--- modal popup -
<div id="wellDone" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<div id="content" style="height:250px;margin-top:65px;">ACTIVITY COMPLETED!</div> 
</div>
</div>-->

<!-------------------->
<script>
var intro_time = 10000;
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>

<script>
$( document ).ready(function() {
	
	$( ".inptTxt" ).focus(function() {
		chk_vals();	
	});

	$( "#btn-done" ).click(function() {	ans_chk();
		$("#ans-btn").removeAttr("disabled" );
		$("#btn-reset").removeAttr("disabled" );
		$("#btn-done").prop('disabled','disabled');
	});

	$( "#btn-reset" ).click(function() {	reset();
		$("#ans-btn").prop('disabled','disabled');
	});

	/*$( ".close" ).click(function() {
		$('#wellDone').removeClass('show');
	});*/

	$( "#ans-btn" ).click(function() {

			var b1t1 = $('#b1t1').val('Arctic Ocean').css('color','green');		
			var b2t1 = $('#b2t1').val('Pacific Ocean').css('color','green');			
			var b3t1 = $('#b3t1').val('Atlantic Ocean').css('color','green');			
			var b4t1 = $('#b4t1').val('Indian Ocean').css('color','green');			
			var b5t1 = $('#b5t1').val('Southern Ocean').css('color','green');			


			

			$('#box1-wrong').css('display','none');
			$('#box2-wrong').css('display','none');
			$('#box3-wrong').css('display','none');
			$('#box4-wrong').css('display','none');
			$('#box5-wrong').css('display','none');

		



			$('#box1-tick').css('display','block');
			$('#box2-tick').css('display','block');
			$('#box3-tick').css('display','block');
			$('#box4-tick').css('display','block');
			$('#box5-tick').css('display','block');


			
			
			$("#ans-btn").prop('disabled','disabled');
	});
});

function chk_vals()
{
	var val_counter = 0;
	var b1t1 = $('#b1t1').val(); if(b1t1 != ''){val_counter++;}
	var b2t1 = $('#b2t1').val(); if(b2t1 != ''){val_counter++;}
	var b3t1 = $('#b3t1').val(); if(b3t1 != ''){val_counter++;}
	var b4t1 = $('#b4t1').val(); if(b4t1 != ''){val_counter++;}
	var b5t1 = $('#b5t1').val(); if(b5t1 != ''){val_counter++;}

	

	
	
	
	
	
	if(val_counter == 5){		  
	$("#btn-done").removeAttr("disabled");
	$("#btn-reset").removeAttr("disabled");
	$("#btn-ans").removeAttr("disabled");	
	}
}

function ans_chk()
{
	$('#box1-tick').css('display','none');$('#box1-wrong').css('display','none');
	$('#box2-tick').css('display','none');$('#box2-wrong').css('display','none');
	$('#box3-tick').css('display','none');$('#box3-wrong').css('display','none');
	$('#box4-tick').css('display','none');$('#box4-wrong').css('display','none');
	$('#box5-tick').css('display','none');$('#box5-wrong').css('display','none');

	

	var b1t1 = $('#b1t1').val();
	var b2t1 = $('#b2t1').val();
	var b3t1 = $('#b3t1').val();
	var b4t1 = $('#b4t1').val();
	var b5t1 = $('#b5t1').val();

	

	var chk = 0;
	
	var wrong = false;
	var sound2 = new Audio('audio/try-again.mp3'); 
	var sound1 = new Audio('audio/well-done.mp3');

	if(b1t1 == 'Arctic Ocean' || b1t1 == 'ARCTIC OCEAN' || b1t1 == 'arctic ocean'){ $('#box1-tick').css('display','block'); chk++;	}
	if(!(b1t1 == 'Arctic Ocean' || b1t1 == 'ARCTIC OCEAN'|| b1t1 == 'arctic ocean' )){wrong = true;	$('#box1-wrong').css('display','block');}
	
	

	if(b2t1 == 'Pacific Ocean' || b2t1 == 'PACIFIC OCEAN' || b2t1 == 'pacific ocean'){ $('#box2-tick').css('display','block'); chk++;	}
	if(!(b2t1 == 'Pacific Ocean' || b2t1 == 'PACIFIC OCEAN'|| b2t1 == 'pacific ocean' )){wrong = true;	$('#box2-wrong').css('display','block');}
	
	

	if(b3t1 == 'Atlantic Ocean' || b3t1 == 'ATLANTIC OCEAN' || b3t1 == 'atlantic ocean'){ $('#box3-tick').css('display','block'); chk++;	}
	if(!(b3t1 == 'Atlantic Ocean' || b3t1 == 'ATLANTIC OCEAN'|| b3t1 == 'atlantic ocean' )){wrong = true;	$('#box3-wrong').css('display','block');}
   
	

	if(b4t1 == 'Indian Ocean' || b4t1 == 'INDIAN OCEAN' || b4t1 == 'indian ocean'){ $('#box4-tick').css('display','block'); chk++;	}
	if(!(b4t1 == 'Indian Ocean' || b4t1 == 'INDIAN OCEAN'|| b4t1 == 'indian ocean' )){wrong = true;	$('#box4-wrong').css('display','block');}
		
	

	if(b5t1 == 'Southern Ocean' || b5t1 == 'SOUTHERN OCEAN' || b5t1 == 'southern ocean'){ $('#box5-tick').css('display','block'); chk++;	}
	if(!(b5t1 == 'Southern Ocean' || b5t1 == 'SOUTHERN OCEAN'|| b5t1 == 'southern ocean' )){wrong = true;	$('#box5-wrong').css('display','block');}
	
	



	
	
if (wrong) {
    sound2.play();
    $("#feedback-box").html('<img src="img/incorrect_Img.png" />').show();
    $("#btn-tryagain").removeAttr('disabled');
    showFullScreenGif('img/TryAgain.gif');
} else {
    sound1.play();
    $("#feedback-box").html('<img src="img/correct_Img.png" />').show();
    $("#btn-tryagain").attr('disabled', 'disabled');
    showFullScreenGif('img/welldone.gif');
}

setTimeout(function() {
    $("#feedback-box").html('<img src="img/character.png" />').show();
}, 4500);

function showFullScreenGif(gifSrc) {
    // Create a full-screen div
    var fullScreenDiv = $('<div>').css({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        zIndex: 9999,
        background: 'rgba(0,0,0,0.5)',
        textAlign: 'center'
    });

    // Create an img element for the GIF
    var gifImg = $('<img>').attr('src', gifSrc).css({
        maxWidth: '100%',
        maxHeight: '100%',
        margin: 'auto'
    });

    // Append the img to the full-screen div and then append the div to the body
    fullScreenDiv.append(gifImg);
    $('body').append(fullScreenDiv);

    // Remove the full-screen div after 5 seconds
    setTimeout(function() {
        fullScreenDiv.remove();
    }, 5000);
}

	
	/*if(chk == 5){
		$('#wellDone').addClass('show');
	}*/
}

function reset()
{
	var b1t1 = $('#b1t1').val('');
	var b2t1 = $('#b2t1').val('');	
	var b3t1 = $('#b3t1').val('');	
	var b4t1 = $('#b4t1').val('');	
	var b5t1 = $('#b5t1').val('');	


	


	
	
	
	
	


	$('#box1-tick').css('display','none');
	$('#box2-tick').css('display','none');
	$('#box3-tick').css('display','none');
	$('#box4-tick').css('display','none');
	$('#box5-tick').css('display','none');

	

	
	$('#box1-wrong').css('display','none');
	$('#box2-wrong').css('display','none');
	$('#box3-wrong').css('display','none');
	$('#box4-wrong').css('display','none');
	$('#box5-wrong').css('display','none');

	
	
}

</script>
</body>
</html>