<!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=.5">

	<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 countries correctly with their capitals and their currencies.</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": [
     	"UK",
		"Argentina",
		"Bangladesh",
		"Belgium",
		"Bhutan",
		"Brazil",
		"China",
		"Denmark",
		"Indonesia",
		"Iran",
		"Japan",
		"USA",
		
      	

      	
		
		
		
		
		
		
	   
    ],
    "Right": [
        
	    "Thimphu, Ngultrum",
		"Dhaka, Taka",
		"Washington DC, Dollar",
		"Tehran, Rial",
		"Brussels, Euro",
		"Buenos Aires, Argentine Peso",
		"Beijing, Yuan",
		"Tokyo, Yen",
		"London, Pound",
		"Brasilia, Real",
		"Copenhagen, Krone",
		"Jakarta, Rupiah",
		
		

	    
		
    ],
    "Answer": [
        "l1_r9",
        "l2_r6",
        "l3_r2",	
		"l4_r5",
		"l5_r1",
		"l6_r10",
		"l7_r7",
		"l8_r11",
		"l9_r12",
		"l10_r4",
		"l11_r8",
		"l12_r3",
		



		
		
		
		
		
       
    ],
    "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>
</head>

<body>


	

<div class="wrapper">

		
		<section class="content">
			
			<header class="header">
					<audio controls autoplay hidden>
     <source src="audio/bg_sound.mp3" type="audio/mpeg">
                unsupported !! 
    </audio>
				<h2 class="title-h2" id="app-title"></h2>
			</header>	
	

			
			<div class="body-container" >
				<div class="question-n">
								<!--Wrapper Start-->
					<div class="container" >
		<div id="popupContainer">
        <img id="popupImage" src="img/ans.png" alt="Popup Image">
        <button id="closePopup" onClick="resetActivity()">Close</button>
    </div>
     <div id="backdrop"></div>
				<div class="question-section" >
	
					<div id="mainWrapper">
						<div class="">
							<div class="leftSide div1" id="dvLeft"></div>
							<div class="rightSide div1" id="dvRight"></div>
						
						</div>
						<span id="main_span" style="position:absolute; left:0;top:0; width:0px; height:0px;"></span>
						<div class="clearfix"></div>
					</div>
					
				</div>
		
			
				
				<!-- <div class="feedbackImg">
					<div class="feedback-container" id="feedback-box">
						<img src="img/character.png" />
					</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 disabled id="btn-reset" onClick="resetActivity()" class="btn btn-primary">RESET</button>



					</div>
				</footer>
				
			</div>
		</section>
		
	</div>
</div>
</body>
</html>


<!--<div class="modal" id="modal-feedback">
	<div class="modal-container">
		<div class="modal-content">
			<p id="feedback-text" class="feedback-text"></p>
		</div>-->
		<!-- <button class="btn btn-primary" onClick="closeModal('modal-feedback')">Close</button> 
	</div>
</div>

<div id="myblocker"></div>-->

  <script>
$(document).ready(function() {
    $("#showAns").click(function() {
        // Show the backdrop and the popup container
        $("#backdrop").fadeIn();
        $("#popupContainer").fadeIn();
    });

    $("#closePopup").click(function() {
        // Close the backdrop and the popup container
        $("#backdrop").fadeOut();
        $("#popupContainer").fadeOut();
    });

    // Rest of your existing code...
});</script>

<script>
var intro_time = 6500;
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 type="text/javascript">// store components in variables
const page = document.querySelector(".wraper");
const wrapper = document.querySelector("boy");

// ease value to be used in interpolation
const ease = 0.06; // 20%

// create an object to store scroll details
const scroll = {
  current: 0, // current scroll position
  target: 0, // target scroll position
  limit: 0 // limit of scroll
};

// function to update target scroll position
const updateTarget = (e) => {
  // set the target value to deltaY
  // which is distance covered by mouseWheel
  scroll.target += e.deltaY;
};

// create an event listener to listen for mouse-wheel
document.addEventListener("mousewheel", updateTarget);

// linear interpolation function
const lerp = (current, target) => {
  // get distance between current & target scroll points
  const distanceBetween = target - current;

  // get a percentage of that distance, in this case 20%
  const distanceToTravel = distanceBetween * ease;

  // add the % distance to the current scroll value
  return current + distanceToTravel;

  // shorthand for lerp is
  // current = current + ((target - current) * ease)
};

// clamping function to limit mousewheel values
const clamp = (min, max, value) => {
  const clamped = Math.min(Math.max(value, min), max);
  return clamped;
};

// main scroll function
const smoothScroll = () => {
  const maxScroll = wrapper.clientHeight - window.innerHeight;
  // clamp scroll target value
  scroll.target = clamp(0, maxScroll, scroll.target);

  const { current, target } = scroll;

  const transition = lerp(current, target);
  scroll.current = transition;

  // translate page wrapper based on lerped value
  wrapper.style.transform = `translateY(-${scroll.current}px)`;

  // use requestAnimationFrame with callback
  // to create an infinite loop of this function
  // that updates 60 times per second
  // or 30 times per second
  // depending on browser refresh rate
  window.requestAnimationFrame(smoothScroll);
};

// call smoothScroll to start loop
smoothScroll();
</script>

