<!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 pictures of these famous Indian environmental activists with their correct descriptions.</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/page_36_1.png'>",
		"<img src='img/page_36_2.png'>",
		"<img src='img/page_36_3.png'>",
		"<img src='img/page_36_4.png'>",
		"<img src='img/page_36_5.png'>",
		"<img src='img/page_36_6.png'>",
		"<img src='img/page_36_7.png'>",
		"<img src='img/page_36_8.png'>",
		
		
      	

      	
		
		
		
		
		
		
	   
    ],
    "Right": [
        
	    "a. He gave up film-making to photograph and write about trees.",
		"b. He was the man behind the Chipko Movement. He died in 2021 due to Covid-19.",
		"c. Better known as the Forest Man of India, he spent thirty years of his life planting trees and creating a real man-made forest.",
		"d. She is an editor of the fortnightly magazine ‘Down to Earth’. She is one of the most prominent environmental activists in India.",
		"e. She has been focussing on the effects of globalisation on India’s food supply for decades.",
		"f. He founded the Dasholi Gram Swarajya Sangh in 1964. He was involved in the Chipko Movement.",
		"g. She is a famous environmentalist who also works for the rights of displaced people.",
		"h. Known as the 'Waterman of India', he is an Indian water conservationist and environmentalist from Rajasthan.",
		
		

	    
		
    ],
    "Answer": [
        "l1_r7",
        "l2_r5",
        "l3_r4",	
		"l4_r8",
		"l5_r1",
		"l6_r2",
		"l7_r3",
		"l8_r6",
		
		
		
		
		
		
       
    ],
    "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{
	border-radius: 2px;
}
.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;
	position: sticky;
	background: #d8935b;
	border-radius: 5px;
	z-index: 999999;
	width: 95%;
	top: 0px;
	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>
