<!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">
	
		<header class="header"><h2 class="title-h2" id="app-title">Pictures of some computer devices are given below. Place them in the right column by writing their correct names.</h2>
			<audio controls autoplay hidden>
     <source src="audio/bg_sound.mp3" type="audio/mpeg">
                unsupported !! 
    </audio></header>
		<section class="content">
			<div class="body-container">
				<div class="question-n">
					
					<div class="question-section text-center">
					
						<p id="p1" class="p">
							<span class="inptBox1">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b1t1" placeholder="_" maxlength="30" autocomplete="off">
                                
								<!-- <span class="icons" id="box1-tick"><i class="fa fa-check" aria-hidden="true"></i></span> -->
								<span class="icons" id="box1-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></span>
								<!--<span class="icons" id="box1-wrong"><i class="fa fa-close" aria-hidden="true"></i></span>-->
                                <span class="icons" id="box1-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
                               
							</span>
						</p>
						<p id="p2" class="p">
							<span class="inptBox2">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b2t1" placeholder="_" maxlength="30" autocomplete="off">
                                
								<span class="icons2" id="box2-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons2" id="box2-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>
						<p id="p3" class="p">
							<span class="inptBox3">
								<span class="inptLabel"></span> 
                                <input type="text" class="inptTxt" id="b3t1" placeholder="_" maxlength="30" autocomplete="off">
                                 
								<span class="icons3" id="box3-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons3" id="box3-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>
						
						<p id="p4" class="p">
							<span class="inptBox4">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b4t1" placeholder="_" maxlength="30" autocomplete="off">
                                
								<span class="icons4" id="box4-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons4" id="box4-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>

						<p id="p5" class="p">
							<span class="inptBox5">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b5t1" placeholder="_" maxlength="30" autocomplete="off">
                                
								<span class="icons5" id="box5-tick"><img src="img/correct.png" class="fa fa-check" aria-hidden="true"></i></span>
								<span class="icons5" id="box5-wrong"><img src="img/wrong.png" class="fa fa-close" aria-hidden="true"></i></span>
							</span>
						</p>

						<p id="p6" class="p">
							<span class="inptBox6">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b6t1" placeholder="_" maxlength="30" 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="p7" class="p">
							<span class="inptBox7">
								<span class="inptLabel"></span>
                                <input type="text" class="inptTxt" id="b7t1" placeholder="_" maxlength="30" 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="30" 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="30" 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="30" 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>


					
						


	
                       
					</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 = 1000000;
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('Keyboard');			
			var b2t1 = $('#b2t1').val('Mouse');			
			var b3t1 = $('#b3t1').val('Scanner');			
			var b4t1 = $('#b4t1').val('Joystick');
			var b5t1 = $('#b5t1').val('Microphone');
			var b6t1 = $('#b6t1').val('Monitor');
		    var b7t1 = $('#b7t1').val('Headphones');			
			var b8t1 = $('#b8t1').val('Printer');			
			var b9t1 = $('#b9t1').val('Speakers');			
			var b10t1 = $('#b10t1').val('Projector');
		
			
			

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

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

			
		
			
			
			$("#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++;}
	



	
	
	

	
	
	
	if(val_counter == 0){		  
	$("#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');

	

	

	
	
	
	
			
	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 chk = 0;
	
	var wrong = false;
	var sound2 = new Audio('audio/try-again.mp3'); 
	var sound1 = new Audio('audio/well-done.mp3');
	

	if(b1t1 == 'Keyboard' || b1t1 == 'KEYBOARD' || b1t1 == 'keyboard'){ $('#box1-tick').css('display','block'); chk++;	}
	if(!(b1t1 == 'Keyboard' || b1t1 == 'KEYBOARD'|| b1t1 == 'keyboard' )){wrong = true;	$('#box1-wrong').css('display','block');}
	
	

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

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

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

	if(b5t1 == 'Microphone' || b5t1 == 'MICROPHONE' || b5t1 == 'microphone'){ $('#box5-tick').css('display','block'); chk++;	}
	if(!(b5t1 == 'Microphone' || b5t1 == 'MICROPHONE'|| b5t1 == 'microphone' )){wrong = true;	$('#box5-wrong').css('display','block');}
	
	
	
	if(b6t1 == 'Monitor' || b6t1 == 'MONITOR' || b6t1 == 'monitor'){ $('#box6-tick').css('display','block'); chk++;	}
	if(!(b6t1 == 'Monitor' || b6t1 == 'MONITOR'|| b6t1 == 'monitor' )){wrong = true;	$('#box6-wrong').css('display','block');}
	
	


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

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


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



	if(b10t1 == 'Projector' || b10t1 == 'PROJECTOR' || b10t1 == 'projector'){ $('#box10-tick').css('display','block'); chk++;	}
	if(!(b10t1 == 'Projector' || b10t1 == 'PROJECTOR'|| b10t1 == 'projector' )){wrong = true;	$('#box10-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('');


	
	
	
	
	

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



	
	


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

	



	
}

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