<!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 following crossword puzzle.</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>



						<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>
						<p id="p25" class="p">
							<span class="inptBox25">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b25t1" placeholder="" maxlength="8">
                                
                                	<span class="icons25" id="box25-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons25" id="box25-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>



						<p id="p26" class="p">
							<span class="inptBox26">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b26t1" placeholder="" maxlength="8">
                                
                                	<span class="icons26" id="box26-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons26" id="box26-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>



						<p id="p27" class="p">
							<span class="inptBox27">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b27t1" placeholder="" maxlength="8">
                                
                                	<span class="icons27" id="box27-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons27" id="box27-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('l').css('color','green');		
			var b2t1 = $('#b2t1').val('a').css('color','green');			
			var b3t1 = $('#b3t1').val('o').css('color','green');			
			var b4t1 = $('#b4t1').val('n').css('color','green');			
			var b5t1 = $('#b5t1').val('e').css('color','green');			
			var b6t1 = $('#b6t1').val('t').css('color','green');
			var b7t1 = $('#b7t1').val('f').css('color','green');
			var b8t1 = $('#b8t1').val('c').css('color','green');
			var b9t1 = $('#b9t1').val('i').css('color','green');
			var b10t1 = $('#b10t1').val('r').css('color','green');
			var b11t1 = $('#b11t1').val('r').css('color','green');
			var b12t1 = $('#b12t1').val('u').css('color','green');
			var b13t1 = $('#b13t1').val('c').css('color','green');
			var b14t1 = $('#b14t1').val('u').css('color','green');
			var b15t1 = $('#b15t1').val('l').css('color','green');
			var b16t1 = $('#b16t1').val('e').css('color','green');
			var b17t1 = $('#b17t1').val('b').css('color','green');
			var b18t1 = $('#b18t1').val('e').css('color','green');
			var b19t1 = $('#b19t1').val('r').css('color','green');
			var b20t1 = $('#b20t1').val('e').css('color','green');
			var b21t1 = $('#b21t1').val('g').css('color','green');
			var b22t1 = $('#b22t1').val('o').css('color','green');
			var b23t1 = $('#b23t1').val('a').css('color','green');
			var b24t1 = $('#b24t1').val('t').css('color','green');
			var b25t1 = $('#b25t1').val('d').css('color','green');
			var b26t1 = $('#b26t1').val('e').css('color','green');
			var b27t1 = $('#b27t1').val('u').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');
			$('#box25-wrong').css('display','none');
			$('#box26-wrong').css('display','none');
			$('#box27-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');
			$('#box25-tick').css('display','block');
			$('#box26-tick').css('display','block');
			$('#box27-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++;}
	var b25t1 = $('#b25t1').val(); if(b25t1 != ''){val_counter++;}
	var b26t1 = $('#b26t1').val(); if(b26t1 != ''){val_counter++;}
	var b27t1 = $('#b27t1').val(); if(b27t1 != ''){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');
	$('#box25-tick').css('display','none');$('#box25-wrong').css('display','none');
	$('#box26-tick').css('display','none');$('#box26-wrong').css('display','none');
	$('#box27-tick').css('display','none');$('#box27-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 b25t1 = $('#b25t1').val().toUpperCase();
	var b26t1 = $('#b26t1').val().toUpperCase();
	var b27t1 = $('#b27t1').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 == 'l' || b1t1 == 'L' || b1t1 == 'L'){ $('#box1-tick').css('display','block'); chk++;	}
	if(!(b1t1 == 'l' || b1t1 == 'L'|| b1t1 == 'L' )){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 == 'o' || b3t1 == 'O' || b3t1 == 'O'){ $('#box3-tick').css('display','block'); chk++;	}
	if(!(b3t1 == 'o' || b3t1 == 'O'|| b3t1 == 'O' )){wrong = true;	$('#box3-wrong').css('display','block');}
   
	

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

	if(b5t1 == 'e' || b5t1 == 'E' || b5t1 == 'E'){ $('#box5-tick').css('display','block'); chk++;	}
	if(!(b5t1 == 'e' || b5t1 == 'E'|| b5t1 == 'E' )){wrong = true;	$('#box5-wrong').css('display','block');}
	
	
	
	if(b6t1 == 't' || b6t1 == 'T' || b6t1 == 'T'){ $('#box6-tick').css('display','block'); chk++;	}
	if(!(b6t1 == 't' || b6t1 == 'T'|| b6t1 == 'T' )){wrong = true;	$('#box6-wrong').css('display','block');}
	


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


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



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


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

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



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


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


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


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



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


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


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


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


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


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

 

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



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



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


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


	if(b26t1 == 'e' || b26t1 == 'E' || b26t1 == 'E'){ $('#box26-tick').css('display','block'); chk++;	}
	if(!(b26t1 == 'e' || b26t1 == 'E'|| b26t1 == 'E' )){wrong = true;	$('#box26-wrong').css('display','block');}



	if(b27t1 == 'u' || b27t1 == 'U' || b27t1 == 'U'){ $('#box27-tick').css('display','block'); chk++;	}
	if(!(b27t1 == 'u' || b27t1 == 'U'|| b27t1 == 'U' )){wrong = true;	$('#box27-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('');
	var b19t1 = $('#b19t1').val('');
	var b20t1 = $('#b20t1').val('');
	var b21t1 = $('#b21t1').val('');
	var b22t1 = $('#b22t1').val('');
	var b23t1 = $('#b23t1').val('');
	var b24t1 = $('#b24t1').val('');
	var b25t1 = $('#b25t1').val('');
	var b26t1 = $('#b26t1').val('');
	var b27t1 = $('#b27t1').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');
	$('#box25-tick').css('display','none');
	$('#box26-tick').css('display','none');
	$('#box27-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');
	$('#box25-wrong').css('display','none');
	$('#box26-wrong').css('display','none');
	$('#box26-wrong').css('display','none');

	
	
}

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