<!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">CROSSWORD</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="box6-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons9" id="box6-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>



						<p id="p19" class="p">
							<span class="inptBox19">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b19t1" placeholder="" maxlength="1" autocomplete="off">
                                
                                	<span class="icons19" id="box19-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons19" id="box19-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>




						<p id="p20" class="p">
							<span class="inptBox20">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b20t1" placeholder="" maxlength="1" autocomplete="off">
                                
                                	<span class="icons20" id="box20-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons20" id="box20-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>



						<p id="p21" class="p">
							<span class="inptBox21">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b21t1" placeholder="" maxlength="1" autocomplete="off">
                                
                                	<span class="icons21" id="box21-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons21" id="box21-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>



						<p id="p22" class="p">
							<span class="inptBox22">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b22t1" placeholder="" maxlength="1" autocomplete="off">
                                
                                	<span class="icons22" id="box22-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons22" id="box22-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>



						<p id="p23" class="p">
							<span class="inptBox23">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b23t1" placeholder="" maxlength="1" autocomplete="off">
                                
                                	<span class="icons23" id="box23-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons23" id="box23-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>



						<p id="p24" class="p">
							<span class="inptBox24">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b24t1" placeholder="" maxlength="1" autocomplete="off">
                                
                                	<span class="icons24" id="box24-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons24" id="box24-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('A').css('color','green');		
			var b2t1 = $('#b2t1').val('I').css('color','green');			
			var b3t1 = $('#b3t1').val('T').css('color','green');			
			var b4t1 = $('#b4t1').val('N').css('color','green');			
			var b5t1 = $('#b5t1').val('E').css('color','green');			
			var b6t1 = $('#b6t1').val('C').css('color','green');
			var b7t1 = $('#b7t1').val('R').css('color','green');
			var b8t1 = $('#b8t1').val('W').css('color','green');
			var b9t1 = $('#b9t1').val('A').css('color','green');
			var b10t1 = $('#b10t1').val('I').css('color','green');
			var b11t1 = $('#b11t1').val('M').css('color','green');
			var b12t1 = $('#b12t1').val('E').css('color','green');
			var b13t1 = $('#b13t1').val('A').css('color','green');
			var b14t1 = $('#b14t1').val('Y').css('color','green');
			var b15t1 = $('#b15t1').val('L').css('color','green');
			var b16t1 = $('#b16t1').val('A').css('color','green');
			var b17t1 = $('#b17t1').val('U').css('color','green');
			var b18t1 = $('#b18t1').val('R').css('color','green');
			var b19t1 = $('#b19t1').val('A').css('color','green');
			var b20t1 = $('#b20t1').val('C').css('color','green');
			var b21t1 = $('#b21t1').val('S').css('color','green');
			var b22t1 = $('#b22t1').val('E').css('color','green');
			var b23t1 = $('#b23t1').val('N').css('color','green');
			var b24t1 = $('#b24t1').val('S').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');



			$('#box19-wrong').css('display','none');
			$('#box20-wrong').css('display','none');
			$('#box21-wrong').css('display','none');
			$('#box22-wrong').css('display','none');
			$('#box23-wrong').css('display','none');

			$('#box24-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');
			

			$('#box19-tick').css('display','block');
			$('#box20-tick').css('display','block');
			$('#box21-tick').css('display','block');
			$('#box22-tick').css('display','block');
			$('#box23-tick').css('display','block');


			$('#box24-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++;}
	
	var b19t1 = $('#b19t1').val(); if(b19t1 != ''){val_counter++;}
	var b20t1 = $('#b20t1').val(); if(b20t1 != ''){val_counter++;}
	var b21t1 = $('#b21t1').val(); if(b21t1 != ''){val_counter++;}
	var b22t1 = $('#b22t1').val(); if(b22t1 != ''){val_counter++;}
	var b23t1 = $('#b23t1').val(); if(b23t1 != ''){val_counter++;}


	var b24t1 = $('#b24t1').val(); if(b24t1 != ''){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');
	
	$('#box19-tick').css('display','none');$('#box19-wrong').css('display','none');
	$('#box20-tick').css('display','none');$('#box20-wrong').css('display','none');
	$('#box21-tick').css('display','none');$('#box21-wrong').css('display','none');
	$('#box22-tick').css('display','none');$('#box22-wrong').css('display','none');
	$('#box23-tick').css('display','none');$('#box23-wrong').css('display','none');


	$('#box24-tick').css('display','none');$('#box24-wrong').css('display','none');

	
	
	var b1t1 = $('#b1t1').val().toUpperCase();
	var b2t1 = $('#b2t1').val().toUpperCase();
	var b3t1 = $('#b3t1').val().toUpperCase();
	var b4t1 = $('#b4t1').val().toUpperCase();
	var b5t1 = $('#b5t1').val().toUpperCase();
	var b6t1 = $('#b6t1').val().toUpperCase();
	
	var b7t1 = $('#b7t1').val().toUpperCase();
	var b8t1 = $('#b8t1').val().toUpperCase();
	var b9t1 = $('#b9t1').val().toUpperCase();
	var b10t1 = $('#b10t1').val().toUpperCase();
	var b11t1 = $('#b11t1').val().toUpperCase();
	var b12t1 = $('#b12t1').val().toUpperCase();
	
	var b13t1 = $('#b13t1').val().toUpperCase();
	var b14t1 = $('#b14t1').val().toUpperCase();
	var b15t1 = $('#b15t1').val().toUpperCase();
	var b16t1 = $('#b16t1').val().toUpperCase();
	var b17t1 = $('#b17t1').val().toUpperCase();
	var b18t1 = $('#b18t1').val().toUpperCase();
	var b19t1 = $('#b19t1').val().toUpperCase();
	var b20t1 = $('#b20t1').val().toUpperCase();
	var b21t1 = $('#b21t1').val().toUpperCase();
	var b22t1 = $('#b22t1').val().toUpperCase();
	var b23t1 = $('#b23t1').val().toUpperCase();


	var b24t1 = $('#b24t1').val().toUpperCase();

	
	
	

	var chk = 0;
	
	var wrong = false;
	var sound2 = new Audio('audio/try-again.mp3'); 
	var sound1 = new Audio('audio/well-done.mp3');
	if(b1t1 == 'A'){		$('#box1-tick').css('display','block');		chk++;	}
	if(!(b1t1 == 'A')){	wrong = true;	$('#box1-wrong').css('display','block');	incorrect = true;}
	
	if(b2t1 == 'I'){		$('#box2-tick').css('display','block');		chk++;	}
	if(!(b2t1 == 'I')){	wrong = true;	$('#box2-wrong').css('display','block');	incorrect = true;}
	
	if(b3t1 == 'T'){		$('#box3-tick').css('display','block');		chk++;	}
	if(!(b3t1 == 'T')){	wrong = true;	$('#box3-wrong').css('display','block');	incorrect = true;}
   
	if(b4t1 == 'N'){		$('#box4-tick').css('display','block');		chk++;	}
	if(!(b4t1 == 'N')){	wrong = true;	$('#box4-wrong').css('display','block');	incorrect = true;}
		
	if(b5t1 == 'E'){		$('#box5-tick').css('display','block');		chk++;	}
	if(!(b5t1 == 'E')){	wrong = true;	$('#box5-wrong').css('display','block');incorrect = true;	}
	
	if(b6t1 == 'C'){		$('#box6-tick').css('display','block');		chk++;	}
	if(!(b6t1 == 'C')){	wrong = true;	$('#box6-wrong').css('display','block');incorrect = true;	}
	
	if(b7t1 == 'R'){		$('#box7-tick').css('display','block');		chk++;	}
	if(!(b7t1 == 'R')){	wrong = true;	$('#box7-wrong').css('display','block');incorrect = true;	}
	
	
	if(b8t1 == 'W'){		$('#box8-tick').css('display','block');		chk++;	}
	if(!(b8t1 == 'W')){	wrong = true;	$('#box8-wrong').css('display','block');incorrect = true;	}
	
	if(b9t1 == 'A'){		$('#box9-tick').css('display','block');		chk++;	}
	if(!(b9t1 == 'A')){	wrong = true;	$('#box9-wrong').css('display','block');incorrect = true;	}
	
	if(b10t1 == 'I'){		$('#box10-tick').css('display','block');		chk++;	}
	if(!(b10t1 == 'I')){	wrong = true;	$('#box10-wrong').css('display','block');incorrect = true;	}
	
	if(b11t1 == 'M'){		$('#box11-tick').css('display','block');		chk++;	}
	if(!(b11t1 == 'M')){	wrong = true;	$('#box11-wrong').css('display','block');incorrect = true;	}  

	
	if(b12t1 == 'E'){		$('#box12-tick').css('display','block');		chk++;	}
	if(!(b12t1 == 'E')){	wrong = true;	$('#box12-wrong').css('display','block');incorrect = true;	}	
	
	if(b13t1 == 'A'){		$('#box13-tick').css('display','block');		chk++;	}
	if(!(b13t1 == 'A')){	wrong = true;	$('#box13-wrong').css('display','block');incorrect = true;	}
	
	if(b14t1 == 'Y'){		$('#box14-tick').css('display','block');		chk++;	}
	if(!(b14t1 == 'Y')){	wrong = true;	$('#box14-wrong').css('display','block');incorrect = true;	}


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


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

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

	if(b18t1 == 'R'){		$('#box18-tick').css('display','block');		chk++;	}
	if(!(b18t1 == 'R')){	wrong = true;	$('#box18-wrong').css('display','block');incorrect = true;	}

	if(b19t1 == 'A'){		$('#box19-tick').css('display','block');		chk++;	}
	if(!(b19t1 == 'A')){	wrong = true;	$('#box19-wrong').css('display','block');	}

	if(b20t1 == 'C'){		$('#box20-tick').css('display','block');		chk++;	}
	if(!(b20t1 == 'C')){	wrong = true;	$('#box20-wrong').css('display','block');incorrect = true;	}

	if(b21t1 == 'S'){		$('#box21-tick').css('display','block');		chk++;	}
	if(!(b21t1 == 'S')){	wrong = true;	$('#box21-wrong').css('display','block');incorrect = true;	}

	if(b22t1 == 'E'){		$('#box22-tick').css('display','block');		chk++;	}
	if(!(b22t1 == 'E')){	wrong = true;	$('#box22-wrong').css('display','block');incorrect = true;	}

	if(b23t1 == 'N'){		$('#box23-tick').css('display','block');		chk++;	}
	if(!(b23t1 == 'N')){	wrong = true;	$('#box23-wrong').css('display','block');incorrect = true;	}


	if(b24t1 == 'S'){		$('#box24-tick').css('display','block');		chk++;	}
	if(!(b24t1 == 'S')){	wrong = true;	$('#box24-wrong').css('display','block');incorrect = true;	}

    
	
	
	
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/well-done.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('');

	var b19t1 = $('#b19t1').val('');

	var b20t1 = $('#b20t1').val('');

	var b21t1 = $('#b21t1').val('');

	var b22t1 = $('#b22t1').val('');

	var b23t1 = $('#b23t1').val('');

	var b24t1 = $('#b24t1').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');
	$('#box19-tick').css('display','none');
	$('#box20-tick').css('display','none');
	$('#box21-tick').css('display','none');
	$('#box22-tick').css('display','none');
	$('#box23-tick').css('display','none');
	$('#box24-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');
	$('#box19-wrong').css('display','none');
	$('#box20-wrong').css('display','none');
	$('#box21-wrong').css('display','none');
	$('#box22-wrong').css('display','none');
	$('#box23-wrong').css('display','none');
	$('#box24-wrong').css('display','none');

	
	
}

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