<!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">Solve the crossword puzzle by taking clues from the descriptions given below.</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="1" 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="1" 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="1" 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="1" 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="1" 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>
						<p id="p6" class="p">
							<span class="inptBox6">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b6t1" placeholder="_" maxlength="1" autocomplete="off">
                                
                                	<span class="icons6" id="box6-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons6" id="box6-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>

						<p id="p6" class="p">
							<span class="inptBox7">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b7t1" placeholder="_" maxlength="1" autocomplete="off">
                                
                                	<span class="icons7" id="box7-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons7" id="box7-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>


						<p id="p8" class="p">
							<span class="inptBox8">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b8t1" placeholder="_" maxlength="1" autocomplete="off">
                                
                                	<span class="icons8" id="box8-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons8" id="box8-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>


						<p id="p9" class="p">
							<span class="inptBox9">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b9t1" placeholder="_" maxlength="1" autocomplete="off">
                                
                                	<span class="icons9" id="box9-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons9" id="box9-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>


						<p id="p10" class="p">
							<span class="inptBox10">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b10t1" placeholder="_" maxlength="1" autocomplete="off">
                                
                                	<span class="icons10" id="box10-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons10" id="box10-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>

						<p id="p11" class="p">
							<span class="inptBox11">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b11t1" placeholder="_" maxlength="1" autocomplete="off">
                                
                                	<span class="icons11" id="box11-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons11" id="box11-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>


						<p id="p12" class="p">
							<span class="inptBox12">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b12t1" placeholder="_" maxlength="1" autocomplete="off">
                                
                                	<span class="icons12" id="box12-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons12" id="box12-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>



						<p id="p13" class="p">
							<span class="inptBox13">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b13t1" placeholder="_" maxlength="1" autocomplete="off">
                                
                                	<span class="icons13" id="box13-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons13" id="box13-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>



						<p id="p14" class="p">
							<span class="inptBox14">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b14t1" placeholder="_" maxlength="1" autocomplete="off">
                                
                                	<span class="icons14" id="box14-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons14" id="box14-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>



						<p id="p15" class="p">
							<span class="inptBox15">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b15t1" placeholder="_" maxlength="1" autocomplete="off">
                                
                                	<span class="icons15" id="box15-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons15" id="box15-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>



						<p id="p16" class="p">
							<span class="inptBox16">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b16t1" placeholder="_" maxlength="1" autocomplete="off">
                                
                                	<span class="icons16" id="box16-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons16" id="box16-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>



						<p id="p17" class="p">
							<span class="inptBox17">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b17t1" placeholder="_" maxlength="1" autocomplete="off">
                                
                                	<span class="icons17" id="box17-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons17" id="box17-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>



						<p id="p18" class="p">
							<span class="inptBox18">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b18t1" placeholder="_" maxlength="1" autocomplete="off">
                                
                                	<span class="icons18" id="box18-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons18" id="box18-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('R').css('color','green');		
			var b2t1 = $('#b2t1').val('A').css('color','green');			
			var b3t1 = $('#b3t1').val('H').css('color','green');			
			var b4t1 = $('#b4t1').val('A').css('color','green');			
			var b5t1 = $('#b5t1').val('P').css('color','green');			
			var b6t1 = $('#b6t1').val('U').css('color','green');
			var b7t1 = $('#b7t1').val('R').css('color','green');
			var b8t1 = $('#b8t1').val('A').css('color','green');
			var b9t1 = $('#b9t1').val('N').css('color','green');
			var b10t1 = $('#b10t1').val('D').css('color','green');
			var b11t1 = $('#b11t1').val('S').css('color','green');
			var b12t1 = $('#b12t1').val('A').css('color','green');
			var b13t1 = $('#b13t1').val('N').css('color','green');
			var b14t1 = $('#b14t1').val('O').css('color','green');
			var b15t1 = $('#b15t1').val('V').css('color','green');
			var b16t1 = $('#b16t1').val('A').css('color','green');
			var b17t1 = $('#b17t1').val('A').css('color','green');
			var b18t1 = $('#b18t1').val('N').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');
			$('#box6-wrong').css('display','none');
			$('#box7-wrong').css('display','none');
			$('#box8-wrong').css('display','none');
			$('#box9-wrong').css('display','none');
			$('#box10-wrong').css('display','none');
			$('#box11-wrong').css('display','none');
			$('#box12-wrong').css('display','none');
			$('#box13-wrong').css('display','none');
			$('#box14-wrong').css('display','none');
			$('#box15-wrong').css('display','none');
			$('#box16-wrong').css('display','none');
			$('#box17-wrong').css('display','none');
			$('#box18-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');
			$('#box6-tick').css('display','block');			
			$('#box7-tick').css('display','block');
			$('#box8-tick').css('display','block');
			$('#box9-tick').css('display','block');
			$('#box10-tick').css('display','block');
			$('#box11-tick').css('display','block');
			$('#box12-tick').css('display','block');			
			$('#box13-tick').css('display','block');
			$('#box14-tick').css('display','block');
			$('#box15-tick').css('display','block');
			$('#box16-tick').css('display','block');
			$('#box17-tick').css('display','block');
			$('#box18-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++;}
	var b6t1 = $('#b6t1').val(); if(b6t1 != ''){val_counter++;}
	
	var b7t1 = $('#b7t1').val(); if(b7t1 != ''){val_counter++;}
	var b8t1 = $('#b8t1').val(); if(b8t1 != ''){val_counter++;}
	var b9t1 = $('#b9t1').val(); if(b9t1 != ''){val_counter++;}
	var b10t1 = $('#b10t1').val(); if(b10t1 != ''){val_counter++;}
	var b11t1 = $('#b11t1').val(); if(b11t1 != ''){val_counter++;}
	var b12t1 = $('#b12t1').val(); if(b12t1 != ''){val_counter++;}
	
	var b13t1 = $('#b13t1').val(); if(b13t1 != ''){val_counter++;}
	var b14t1 = $('#b14t1').val(); if(b14t1 != ''){val_counter++;}
	var b15t1 = $('#b15t1').val(); if(b15t1 != ''){val_counter++;}
	var b16t1 = $('#b16t1').val(); if(b16t1 != ''){val_counter++;}
	var b17t1 = $('#b17t1').val(); if(b17t1 != ''){val_counter++;}
	var b18t1 = $('#b18t1').val(); if(b18t1 != ''){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');
	$('#box6-tick').css('display','none');$('#box6-wrong').css('display','none');
	
	$('#box7-tick').css('display','none');$('#box7-wrong').css('display','none');
	$('#box8-tick').css('display','none');$('#box8-wrong').css('display','none');
	$('#box9-tick').css('display','none');$('#box9-wrong').css('display','none');
	$('#box10-tick').css('display','none');$('#box10-wrong').css('display','none');
	$('#box11-tick').css('display','none');$('#box11-wrong').css('display','none');
	$('#box12-tick').css('display','none');$('#box12-wrong').css('display','none');
	
	$('#box13-tick').css('display','none');$('#box13-wrong').css('display','none');
	$('#box14-tick').css('display','none');$('#box14-wrong').css('display','none');
	$('#box15-tick').css('display','none');$('#box15-wrong').css('display','none');
	$('#box16-tick').css('display','none');$('#box16-wrong').css('display','none');
	$('#box17-tick').css('display','none');$('#box17-wrong').css('display','none');
	$('#box18-tick').css('display','none');$('#box18-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 b6t1 = $('#b6t1').val();
	
	var b7t1 = $('#b7t1').val();
	var b8t1 = $('#b8t1').val();
	var b9t1 = $('#b9t1').val();
	var b10t1 = $('#b10t1').val();
	var b11t1 = $('#b11t1').val();
	var b12t1 = $('#b12t1').val();
	
	var b13t1 = $('#b13t1').val();
	var b14t1 = $('#b14t1').val();
	var b15t1 = $('#b15t1').val();
	var b16t1 = $('#b16t1').val();
	var b17t1 = $('#b17t1').val();
	var b18t1 = $('#b18t1').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 == 'R' || b1t1 == 'r' || b1t1 == 'r'){ $('#box1-tick').css('display','block'); chk++;	}
	if(!(b1t1 == 'R' || b1t1 == 'r'|| b1t1 == 'r' )){wrong = true;	$('#box1-wrong').css('display','block');}
	
	

	if(b2t1 == 'A' || b2t1 == 'a' || b2t1 == 'A'){ $('#box2-tick').css('display','block'); chk++;	}
	if(!(b2t1 == 'A' || b2t1 == 'a'|| b2t1 == 'A' )){wrong = true;	$('#box2-wrong').css('display','block');}
	
	

	if(b3t1 == 'H' || b3t1 == 'h' || b3t1 == 'h'){ $('#box3-tick').css('display','block'); chk++;	}
	if(!(b3t1 == 'H' || b3t1 == 'h'|| b3t1 == 'h' )){wrong = true;	$('#box3-wrong').css('display','block');}
   
	

	if(b4t1 == 'A' || b4t1 == 'a' || b4t1 == 'A'){ $('#box4-tick').css('display','block'); chk++;	}
	if(!(b4t1 == 'A' || b4t1 == 'a'|| b4t1 == 'A' )){wrong = true;	$('#box4-wrong').css('display','block');}
		
	

	if(b5t1 == 'P' || b5t1 == 'p' || b5t1 == 'p'){ $('#box5-tick').css('display','block'); chk++;	}
	if(!(b5t1 == 'P' || b5t1 == 'p'|| b5t1 == 'p' )){wrong = true;	$('#box5-wrong').css('display','block');}
	
	
	
	if(b6t1 == 'U' || b6t1 == 'u' || b6t1 == 'u'){ $('#box6-tick').css('display','block'); chk++;	}
	if(!(b6t1 == 'U' || b6t1 == 'u'|| b6t1 == 'u' )){wrong = true;	$('#box6-wrong').css('display','block');}
	
	


	if(b7t1 == 'R' || b7t1 == 'r' || b7t1 == 'r'){ $('#box7-tick').css('display','block'); chk++;	}
	if(!(b7t1 == 'R' || b7t1 == 'r'|| b7t1 == 'r' )){wrong = true;	$('#box7-wrong').css('display','block');}	
	


	if(b8t1 == 'A' || b8t1 == 'a' || b8t1 == 'a'){ $('#box8-tick').css('display','block'); chk++;	}
	if(!(b8t1 == 'A' || b8t1 == 'a'|| b8t1 == 'a' )){wrong = true;	$('#box8-wrong').css('display','block');}   	



	if(b9t1 == 'N' || b9t1 == 'n' || b9t1 == 'n'){ $('#box9-tick').css('display','block'); chk++;	}
	if(!(b9t1 == 'N' || b9t1 == 'n'|| b9t1 == 'n' )){wrong = true;	$('#box9-wrong').css('display','block');}		
	


	if(b10t1 == 'D' || b10t1 == 'd' || b10t1 == 'd'){ $('#box10-tick').css('display','block'); chk++;	}
	if(!(b10t1 == 'D' || b10t1 == 'd'|| b10t1 == 'd' )){wrong = true;	$('#box10-wrong').css('display','block');}	
	

	if(b11t1 == 'S' || b11t1 == 's' || b11t1 == 's'){ $('#box11-tick').css('display','block'); chk++;	}
	if(!(b11t1 == 'S' || b11t1 == 's'|| b11t1 == 's' )){wrong = true;	$('#box11-wrong').css('display','block');}	



	if(b12t1 == 'A' || b12t1 == 'a' || b12t1 == 'A'){ $('#box12-tick').css('display','block'); chk++;	}
	if(!(b12t1 == 'A' || b12t1 == 'a'|| b12t1 == 'A' )){wrong = true;	$('#box12-wrong').css('display','block');}	
	


	if(b13t1 == 'N' || b13t1 == 'n' || b13t1 == 'n'){ $('#box13-tick').css('display','block'); chk++;	}
	if(!(b13t1 == 'N' || b13t1 == 'n'|| b13t1 == 'n' )){wrong = true;	$('#box13-wrong').css('display','block');}	


	if(b14t1 == 'O' || b14t1 == 'o' || b14t1 == 'o'){ $('#box14-tick').css('display','block'); chk++;	}
	if(!(b14t1 == 'O' || b14t1 == 'o'|| b14t1 == 'o' )){wrong = true;	$('#box14-wrong').css('display','block');}	


	if(b15t1 == 'V' || b15t1 == 'v' || b15t1 == 'v'){ $('#box15-tick').css('display','block'); chk++;	}
	if(!(b15t1 == 'V' || b15t1 == 'v'|| b15t1 == 'v' )){wrong = true;	$('#box15-wrong').css('display','block');}



	if(b16t1 == 'A' || b16t1 == 'a' || b16t1 == 'a'){ $('#box16-tick').css('display','block'); chk++;	}
	if(!(b16t1 == 'A' || b16t1 == 'a'|| b16t1 == 'a' )){wrong = true;	$('#box16-wrong').css('display','block');}


	if(b17t1 == 'A' || b17t1 == 'a' || b17t1 == 'a'){ $('#box17-tick').css('display','block'); chk++;	}
	if(!(b17t1 == 'A' || b17t1 == 'a'|| b17t1 == 'a' )){wrong = true;	$('#box17-wrong').css('display','block');}


	if(b18t1 == 'N' || b18t1 == 'n' || b18t1 == 'n'){ $('#box18-tick').css('display','block'); chk++;	}
	if(!(b18t1 == 'N' || b18t1 == 'n'|| b18t1 == 'n' )){wrong = true;	$('#box18-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('');	
	var b6t1 = $('#b6t1').val('');
	var b7t1 = $('#b7t1').val('');
	var b8t1 = $('#b8t1').val('');
	var b9t1 = $('#b9t1').val('');
	var b10t1 = $('#b10t1').val('');
	var b11t1 = $('#b11t1').val('');
	var b12t1 = $('#b12t1').val('');
	var b13t1 = $('#b13t1').val('');
	var b14t1 = $('#b14t1').val('');
	var b15t1 = $('#b15t1').val('');
	var b16t1 = $('#b16t1').val('');
	var b17t1 = $('#b17t1').val('');
	var b18t1 = $('#b18t1').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');
	$('#box6-tick').css('display','none');
	$('#box7-tick').css('display','none');
	$('#box8-tick').css('display','none');
	$('#box9-tick').css('display','none');
	$('#box10-tick').css('display','none');
	$('#box11-tick').css('display','none');
	$('#box12-tick').css('display','none');
	$('#box13-tick').css('display','none');
	$('#box14-tick').css('display','none');
	$('#box15-tick').css('display','none');
	$('#box16-tick').css('display','none');
	$('#box17-tick').css('display','none');
	$('#box18-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');
	$('#box6-wrong').css('display','none');
	$('#box7-wrong').css('display','none');
	$('#box8-wrong').css('display','none');
	$('#box9-wrong').css('display','none');
	$('#box10-wrong').css('display','none');
	$('#box11-wrong').css('display','none');
	$('#box12-wrong').css('display','none');
	$('#box13-wrong').css('display','none');
	$('#box14-wrong').css('display','none');
	$('#box15-wrong').css('display','none');
	$('#box16-wrong').css('display','none');
	$('#box17-wrong').css('display','none');
	$('#box18-wrong').css('display','none');

	
	
}

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