<!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 src="js/data.js" type="text/javascript"></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">Tick (✔) the correct option which you think is earth-friendly.</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%4 == 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>