<!DOCTYPE html>
<html lang="en">
<head>
<title>Match the following</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="Ashok Shah" />
<meta name="description" content="HTML5 Match the following Interactivity" />
<meta name="keywords" content="html5, elearning, match the following" />
<meta name="website" content="https://www.shahnashok.com" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, initial-scale=1">
 
 <link href="https://fonts.googleapis.com/css?family=Salsa" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet">
<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" />
<link rel="stylesheet" type="text/css" href="css/mtf.css" />

<script type="text/javascript">
	const MASTER_DB = {
	
	CONFIG: {
		MAX_INPUT: 100,						// max length of typing
		MAX_ATTEMPT_ANS: 2,					// attempts for showing answer button
		INPUT_FILTER_STATUS: false,
		INPUT_FILTER: [84, 116, 70, 102],	//T AND F
		
		INPUT_TRANSFORM: 'default',		// uppercase | lowercase | default
		INPUT_TEXT_CODE: '[<>]',

		FEEDBACK_TIME: 2500
	},
	
	TITLE: '<h1 class="animate__animated animate__rubberBand">Pictures of helpers are given in Column A. Match them correctly with the boxes that contain objects/items used by them.</h1>',
	INSTRUCTION: 'Match the following shapes.',
	QUESTIONS: [
		{
			feedback: {
				positive: '<img src="img/correct_Img.gif" alt="" />',
				negative: '<img src="img/incorrect_Img.gif" alt="" />'
			}
		}
	],
	
	ANSWERS: {
		INSTRUCTION: 'Answers'
	}
}

var tempJsonObj =
{
	"LeftHeading"  : "",
	"RightHeading" : "",
     "Left": [
     	"<img src='img/img_1.png' class='img2'>",
		"<img src='img/img_2.png'class='img2'>",
		"<img src='img/img_3.png'class='img2'>",
		"<img src='img/img_4.png'class='img2'>",
		"<img src='img/img_5.png'class='img2'>",
		
      	
		
		
		
		
		
		
	   
    ],
    "Right": [
        
	    "<img src='img/img_6.png' class='img_2'>",
		"<img src='img/img_7.png' class='img_2'>",
		"<img src='img/img_8.png' class='img_2'>",
		"<img src='img/img_9.png' class='img_2'>",
		"<img src='img/img_10.png' class='img_2'>",
		
		

	    
		
    ],
    "Answer": [
        "l1_r3",
        "l2_r1",
        "l3_r5",	
		"l4_r2",
		"l5_r4",
		
		
		
		
		
       
    ],
    "text": "Click on an option in Column A and then click on the correct answer in Column B.<br /> <br /> After completing, click on Submit.<br /> <br />To check answer, click on Show Answer."
}
var button_text={
	"1" : "Submit",
	"2" : "Show Answers"
}
var language_code={
 "1":"0"//0 for english and 1 for hindi
}
var information_text={
	"1": "Information",
	"2": "Audio"
}
</script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/app.mtf.js" type="text/javascript"></script>
<script src="js/mtf.js" type="text/javascript"></script>
<style>
@font-face {
  font-family: "Sehaj";
  src: url('All Fonts/Sehaj-ENG-Bold.otf');
}
img{}

.question-section{
	background: aliceblue;
	border: 0px #d8935b solid;
	border-radius: 5px;
	box-shadow: #0000006b 0px 0px 6px 1px;
	margin: auto;
}

.question-n{
	background-image: url('img/b1.png');
	background-repeat:no-repeat;
	background-size:cover;
	width:100%;
	border-radius:50px;
}
.sub-header{
	display: grid;
	text-align:left;
	background: #d8935b;
	border-radius: 5px;
	width: 95%;
	top: 7px;
	border: 1px rgb(255 255 255) solid;
	margin: auto;
	position: relative;
	margin-bottom: 38px;
	justify-content: space-around;
	
	
	
	
.title-h4{
	font-family: auto;
	color: #ffffff !important;
	text-align: center;
	text-shadow: 2px 1px 3px #00000029;
}

@media screen and (max-width: 768px) {
    .sub-header {
        font-size: 12px;
        padding: 6px;
    }
}

@media screen and (max-width: 480px) {
    .sub-header {
        font-size: 10px;
        padding: 4px;
        width: 75%;
    }
}



.btn{
	marg
	margin-top: 5px;
</style>
</head>

<body>

<div class="wrapper">
	<div class="container">
		<section class="content">
			<div class="sub-header">
						<audio controls autoplay hidden>
     <source src="audio/bg_sound.mp3" type="audio/mpeg">
                unsupported !! 
    </audio>
				<h2 class="title-h2" id="app-title"></h2>
			</div>
			<div class="body-container">
				<div class="question-n" style="margin-top:-20px !important;">
					
					<div class="question-section">
						<div id="mainWrapper" style="margin-top:-40px !important;">
							<div class="">
								<div class="leftSide div1" id="dvLeft"></div>
								<div class="rightSide div1" id="dvRight"></div>
								<div class="clear"></div>
							</div>
							<span id="main_span" style="position:absolute; left:0;top:0; width:0px; height:0px;"></span>
							<div class="clearfix"></div>
						</div>
						<div class="clearfix"></div>
					</div>
					<footer class="footer">
					<div class="button-wrapper">
						<!-- <button disabled id="btn-tryagain" onClick="tryAgainAct()" class="btn btn-primary">Try Again</button> -->
						<button disabled id="submitAns" class="btn btn-primary">Submit</button>
						<button disabled id="showAns" class="btn btn-primary">Answer</button>
						<button  id="btn-reset" onClick="resetActivity()" class="btn btn-primary">Reset</button>
					</div>
				</footer>				
			</div>
		</section>
		
	</div>
</div>
		</section>
	</div>
	

<div id="myblocker"></div>
</div>
<div class="tab hidden">
	<center><img src="img/Welldone.gif"  height="auto" width="100%"></center>
</div>
</body>
</html>
