<!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; If the day before yesterday was Saturday, what will be day after tomorrow?",
      "options": {
        "a. Wednesday": true,
        "b. Tuesday": false,
        "c. Monday": false,
        "d. Saturday": false,
        
        
      },
      "feedback": {
        "positive": "<img src='img/icon-correct.png'>",
        "negative": "<img src='img/icon-wrong.png'>"
      }
    },{
      "title": "2. &nbsp; How many possible combinations of 1 owl and 1 tree can be made from 3 owls and 6 trees?",
      "options": {
        "a. 15": false,
        "b. 3": false,
        "c. 18": true,
        "d. 5": false,
        
      },
      "feedback": {
        "positive": "<img src='img/correct_Img.gif'>",
        "negative": "<img src='img/incorrect_Img.gif'>"
      }
    },
    {
      "title": "3. &nbsp; Razia decides to take a break starting from Wednesday. She returns only on days that are multiples of 3. If she returns on the 9th day, on which day did she initially start her break?",
      "options": {
        "a. Monday": false,
        "b. Tuesday": false,
        "c. Wednesday": false,
        "d. Thursday": true,
        
        
      },
      "feedback": {
        "positive": "<img src='img/correct_Img.gif'>",
        "negative": "<img src='img/incorrect_Img.gif'>"
      }
    },
     {
      "title": "4. &nbsp; How many different ways are there for the fish to reach the lake? <br> <img src='img/4.png'>",
      "options": {
        "a. 4": false,
        "b. 5": true,
        "c. 2": false,
        "d. 7": false,
        
      },
      "feedback": {
        "positive": "<img src='img/correct_Img.gif'>",
        "negative": "<img src='img/incorrect_Img.gif'>"
      }
    },
   {
      "title": "5.  &nbsp; How many days were there in the month of February 2024?",
      "options": {
        "a. 28": false,
        "b. 29": true,
        "c. 30": false,
        "d. 31": false,
        
        
      },
      "feedback": {
        "positive": "<img src='img/correct_Img.gif'>",
        "negative": "<img src='img/incorrect_Img.gif'>"
      }
    },
   {
      "title": "6.  &nbsp; How many possible combinations of 1 noodles and 1 juice can be formed from the given types of noodles and juices? <br> <img src='img/6.png'>",
      "options": {
       "a. 6": false,
       "b. 9": true,
       "c. 10": false,
       "d. 12": false,
      },
      "feedback": {
        "positive": "<img src='img/correct_Img.gif'>",
        "negative": "<img src='img/incorrect_Img.gif'>"
      }
    },
   {
      "title": "7. &nbsp; ____________",
      "options": {
       "a. ____________": false,
       "b. ____________": false,
       "c. ____________": true,
      },
      "feedback": {
        "positive": "<img src='img/correct_Img.gif'>",
        "negative": "<img src='img/incorrect_Img.gif'>"
      }
    },
 
   {
      "title": "8. &nbsp;  ____________",
      "options": {
       "____________": true,
       "____________": false,
       "____________": 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">Tick (✓) the correct 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%6 == 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>