<!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">Match the terms related to pack information to their correct meanings.</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": [
     	"1. FSSAI mark",
		"2. Ingredients",
		"3. Green dot",
		"4. MRP",
		"5. Net weight",
		"6. Mfg. date",
		"7. Best before",
		"8. Manufacturer",


		
      	

      	
		
		
		
		
		
		
	   
    ],
    "Right": [
        
	    "a. It shows the date on which the product was made.",
		"b. It shows the weight of the product.",
		"c. It shows that the product does not contain any animal product.",
		"d. It shows the name of the company that produces it.",
		"e. It shows the date after which the product should not be consumed.",
		"f. It shows the food items it contains.",
		"g. It shows that the product is safe to consume.",
		"h. It shows the maximum price at which the product can be sold.",

		


		
		

	    
		
    ],
    "Answer": [
        "l1_r7",
        "l2_r6",
        "l3_r3",	
		"l4_r8",
		"l5_r2",
		"l6_r1",
		"l7_r5",
		"l8_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: 4px #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: 86%;
	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>
