<!DOCTYPE html>
<html lang="en">
<head>
	<title>Tick the correct answer</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<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/main.css" />
	<link rel="stylesheet" type="text/css" href="css/main1.css" />
	<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
	<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"/>
	
	<script type="text/javascript">
		const MASTER_DB = {
"CONFIG": {
"HINT": 2,
"TITLE": "Tick the correct answers.",
"INSTRUCTION": "",
"INSTRUCTIONS": [   
	"Click <b>Start</b> to begin the activity.",
	"Once you have decided on your answer, press Submit."
],
"FEEDBACK_TIME": 4500,
"RESULT_TIME": 2000
},

	"AUDIO": {
		"COMPLETE": [
			"audio/well-done.mp3",
		],
		"POSITIVE": [
			"audio/well-done.mp3"
		],
		"NEGATIVE": [
			"audio/try-again.mp3"
		]
	},

  "COMPLETE": {
    "TEXT": [
      "YIPPEE! <br/> Tick (✔) the correct answer",
      "CONGRAUTLATIONS! You are a star!"
    ]
  },

  "QUESTIONS": [
    {
     "title": "1. &nbsp; What should be first aid if a child gets deep wound while playing?",
      "options": {
        "a. Call nearest doctor": false,
        "b. Try to stop bleeding": true,
        "c. Run away to find help": false,
        
        
      },
      "feedback": {
        "positive": "<img src='img/icon-correct.png'>",
        "negative": "<img src='img/icon-wrong.png'>"
      }
    },{
      "title": "2. &nbsp; To cool down the burn area of a victim, we should use this.",
      "options": {
        "a. Antiseptic": false,
        "b. Ice water": false,
        "c. Tap water": true,
        
      },
      "feedback": {
        "positive": "<img src='img/correct_Img.gif'>",
        "negative": "<img src='img/incorrect_Img.gif'>"
      }
    },
    {
      "title": "3. &nbsp; What is the purpose of giving first aid to a victim?",
      "options": {
        "a. To save life": true,
        "b. To reduce pain": false,
        "c. To heal the victim": false,
        
        
      },
      "feedback": {
        "positive": "<img src='img/correct_Img.gif'>",
        "negative": "<img src='img/incorrect_Img.gif'>"
      }
    },
     {
      "title": "4. &nbsp; What should we do to stop the bleeding of nose?",
      "options": {
        "a. Make victim sneeze": false,
        "b. Pinch the nose": true,
        "c. Rub the nose": false,
        
      },
      "feedback": {
        "positive": "<img src='img/correct_Img.gif'>",
        "negative": "<img src='img/incorrect_Img.gif'>"
      }
    },
   {
      "title": "5.  &nbsp; What should we do as the first step when someone has fainted?",
      "options": {
        "a. Check their breathing": true,
        "b. Give them water to drink": false,
        "c. Slap them to wake up": false,
        
        
      },
      "feedback": {
        "positive": "<img src='img/correct_Img.gif'>",
        "negative": "<img src='img/incorrect_Img.gif'>"
      }
    },
   {
      "title": "6.   Which of the following is not kept in a first aid box?",
      "options": {
       "a. Scissors": false,
       "b. Knife": true,
       "c. Antiseptic lotion": false,
      },
      "feedback": {
        "positive": "<img src='img/correct_Img.gif'>",
        "negative": "<img src='img/incorrect_Img.gif'>"
      }
    },
   {
      "title": "7. What is the full form of acronym ABC that is used for first aid?",
      "options": {
       "a. Airway, Body check, Circulation": false,
       "b. Assessment, Breathing, Cardiac": false,
       "c. Airway, Breathing, Circulation": true,
      },
      "feedback": {
        "positive": "<img src='img/correct_Img.gif'>",
        "negative": "<img src='img/incorrect_Img.gif'>"
      }
    },
 
   {
      "title": "8.   What is the name of the special meal prepared on Onam?",
      "options": {
       "Pav Bhaji": true,
       "Dal Makhani": false,
       "Sandya": false,
      },
      "feedback": {
        "positive": "<img src='img/correct_Img.gif'>",
        "negative": "<img src='img/incorrect_Img.gif'>"
      }
    },

],
  "ANSWERS": {
    "INSTRUCTION": "Answer key"
  }
}
	</script>
	<script src="lib/js/jquery-3.2.1.min.js" type="text/javascript"></script>
	<script src="lib/js/soundmanagerv297a/script/soundmanager2-nodebug-jsmin.js"></script>
	<script src="js/app.mcq.js" type="text/javascript"></script>
</head>

<body>
	<div id="popupOverlay" class="popup-overlay">
    <div class="popup-content">
        <img src="img/welldone.gif" alt="Correct" id="correctGif" style="display: none;">
        <img src="img/TryAgain.gif" alt="Wrong" id="wrongGif" style="display: none;">
       <!-- <p id="popupText"></p>
        <button id="popupCloseButton">Close</button>-->
    </div>
</div>
<div class="wrapper" id="devilzApp">

	<div class="container">

		<div class="header">
        	<div id="con">
        		<audio controls autoplay hidden>
     			<source src="audio/bg_sound.mp3" type="audio/mpeg">
                unsupported !! 
				    </audio>
                
                <h2 class="title-h2" id="app-title">Given below are some multiple-choice questions on first aid. Tick (✔) the right answer.</h2>
            </div>
		</div>	


        <div class="content">

            <div id="content">			
            </div>
        </div>
        <div class="footer">
            <button disabled class="btn submit" id="btnSubmit">Submit</button>           
            <button disabled  class="btn btn-primary" id="btn_ans" onclick="fnShowAns(this)">Answer</button>
            <button  class="btn btn-primary" id="btnTry" onclick="location.reload()">Reset</button>
        </div>
	</div>
</div>

<script>
var intro_time = 800000;

var level = 0;
var arr1 = []; var q_set = [];
for(i = 0; i< MASTER_DB.QUESTIONS.length; i++){
	var j = i+1;
	arr1.push(MASTER_DB.QUESTIONS[i]);
	if(j%7 == 0){
		q_set.push(arr1);
		arr1 = [];
	}
}

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'
	});	
}

var total_ques = 0;
var selected_ques = 0;

function loadQuestion(itr)
{
	var str = '';
	for( i=0;i <q_set[itr].length;i++){
		var opts = q_set[itr][i].options;
		var title = q_set[itr][i].title;		
		var j = i+1;
		var end_title = String(title).substr(parseInt(String(title).indexOf('.'))+2,String(title).length);
		var start_title = String(title).substr(0,parseInt(String(title).indexOf('.'))+2);
		
		
		str+='<div class="questions" id="'+j+'"><div class="title-h4"><span id = "s_no">'+start_title+'</span><span id = "_txt">'+end_title+'</span></div><p>';
		
		for(var key in opts) {
			//console.log(key,opts[key]);
			str+='<span> <input type="radio" class="radio" class="radio1" class="radio2" marging-left=30px; name="q'+j+'" value="'+opts[key]+'" onclick=checkvalues(this); > '+key+' </span>';
			
		}
		str+='</p> <span style="display:none;" class="showans" id="ans'+j+'"></span> </div>';
		
		$('#content').html(str);
	}
	// hide next if not available
	var nxtLevel = parseInt(itr) + 1;
	var chk = q_set[nxtLevel];
	if(chk == undefined){
		$('#btnNext').hide();
	}
}

loadQuestion(0);


function checkvalues(evt)
{
	total_ques = $('.questions').length;
	
	selected_ques = 0
	$('.questions').find('.radio').each(function (index, element)
	{
		if($(this).prop('checked') == true)
		{
			selected_ques++
		}
	})
	
	if(selected_ques == total_ques)
	{
		$('#btnSubmit').removeAttr('disabled');
	}
	
	console.log(evt, total_ques, selected_ques)
}

$('#btnSubmit').click(function(){
    var incorrect = false;
    $(".questions").each(function() {
        var id = $(this).attr('id');
        var radioValue = $("input[name='q"+id+"']:checked").val();
        if (radioValue == 'true'){ 
            $('#ans'+id).html('<img src="img/correct.png" class="icon_correct"> '); // Display a correct GIF
        } else {
            $('#ans'+id).html('<img src="img/incorrect.png" class="icon_incorrect"> '); // Display a "try again" GIF
            incorrect = true;
        }
        $('#ans'+id).show();
    });
    
    if (!incorrect) {
        showPopup("Right! Well done.", true); // Show the "right" GIF
        playAudio('well-done.mp3');
    } else {
        showPopup("Wrong! Please try again.", false); // Show the "wrong" GIF
        playAudio('try-again.mp3');
    }
    $(this).attr('disabled', 'disabled');
    $('#btnNext').removeAttr('disabled');
    $('#btn_ans').removeAttr('disabled');
    $('#btnTry').removeAttr('disabled');
});

function showPopup(message, isCorrect) {
    $('#popupText').text(message);

    if (isCorrect) {
        $('#correctGif').show();
        $('#wrongGif').hide();
    } else {
        $('#correctGif').hide();
        $('#wrongGif').show();
    }

    $('#popupOverlay').fadeIn();

    // Set a timeout to close the popup after 3 seconds
    setTimeout(function() {
        $('#popupOverlay').fadeOut();
    }, 4000); // 3000 milliseconds (3 seconds)
}

$('#popupCloseButton').click(function() {
    $('#popupOverlay').fadeOut();
});



function fnShowAns(_this)
{
	var id;
	
	var radioValue;
	
	$(".questions").find('p').find('span').each(function(index) {
			
		radioValue = $(this).find('input').attr('value');
		
		var id = $(this).parent().parent().attr('id')
		
		if(radioValue == 'true'){ 
			
			//$(this).find('input').prop('checked', true);
			$('#ans'+(id)).append('<span class="show_ans">' + $(this).text() + "</span>");
		}else{
			
			//$(this).find('input').prop('checked', false);
			
		}
		
		$('#ans'+(index+1)).show();
		$('#btn_ans').attr('disabled','disabled');
	});
}
$('#btnNext').click(function(){
	var newLevel = parseInt(level)  + 1;
	level = newLevel;
	loadQuestion(newLevel);
});


function playAudio(audioname) {
	var audio = new Audio("audio/" + audioname);
	audio.play();
}

</script>



</body>
</html>