var questions; // objects containing the quiz questions
var count, score, scorePercentage, answer; // tracking variables
var correctAnswer, prevFlag; // flags
var choices, question, resultsPara, choicesPara; // elements being updated
var resetButton, prevButton; // buttons
var progress, progressPercentage; // progress bar
var totalQuestions; //Total number of questions
var flag=0;
/*questions = [{number:0,question:"Q1. test123",choices:["A. a","B. b","C. c","D. d","E. e","F. f"],answer:3,src:"https://images.mid-day.com/images/images/2021/may/cc712d72-bb1c-4f63-a279-ea38a691b02a_l.jpg"},{number:1,question:"Q2. ",choices:["A. ","B. ","C. ","D. ","E. ","F. "],answer:0,src:""},{number:2,question:"Q3. ",choices:["A. ","B. ","C. ","D. ","E. ","F. "],answer:0,src:""},{number:3,question:"Q4. ",choices:["A. ","B. ","C. ","D. ","E. ","F. "],answer:0,src:""},{number:4,question:"Q5. ",choices:["A. ","B. ","C. ","D. ","E. ","F. "],answer:0,src:""},{number:5,question:"Q6. ",choices:["A. ","B. ","C. ","D. ","E. ","F. "],answer:0,src:""},{number:6,question:"Q7. ",choices:["A. ","B. ","C. ","D. ","E. ","F. "],answer:0,src:""},{number:7,question:"Q8. ",choices:["A. ","B. ","C. ","D. ","E. ","F. "],answer:0,src:""},{number:8,question:"Q9. ",choices:["A. ","B. ","C. ","D. ","E. ","F. "],answer:0,src:""},{number:9,question:"Q10. ",choices:["A. ","B. ","C. ","D. ","E. ","F. "],answer:0,src:""}];*/
var actual_url = window.location.href;
 $.ajax({
    type:"GET",
    //url:domain + 'api/getQuizDetails.php?actual_link=http://14.143.131.38/timepass/quiz/How-well-do-you-know-Nathan-Lyon-20',
    url:domain + 'api/getQuizDetails.php?actual_link='+actual_url,
    data:{},
    success: function(response){
        //console.log(response);
        questions = JSON.parse(response);
        $('.page-title').text(questions[0].title);
        setTimeout(function(){
            if(window.location.pathname.split('/').length==4){
                var refresh = window.location.protocol + "//" + window.location.host + window.location.pathname + '/1';    
                window.history.pushState({ path: refresh }, '', refresh);
            } else {
                var pathname = window.location.pathname.split('/');
                var remove_last_part = pathname.pop();
                var refresh = window.location.protocol + "//" + window.location.host + pathname.join('/') + '/1';
                window.history.pushState({ path: refresh }, '', refresh);  
            }
        },200);
    },
    async: false,
});

console.log(questions);

// set tracking variables
count = 0;
score = 0;
correctAnswer = false;
prevFlag = false;



// grab html elements
choices = document.querySelectorAll('.choices');
question = document.getElementsByClassName('quest')[0];
// resultsPara = document.getElementsByTagName('p')[0];
// choicesPara = document.getElementsByTagName('p')[1];

resetButton = document.getElementsByClassName('reset')[0];
nextQuizButton = document.getElementsByClassName('nextQuiz')[0];
nextButton = document.getElementsByClassName('next')[0];
prevButton = document.getElementsByClassName('prev')[0];
progress = document.getElementsByClassName('progress-bar')[0];

var finishbutton = document.getElementById("finish");
var elementchoice = document.getElementById("choicesParagraph");
var elementresult = document.getElementById("resultParagraph");
//finding the number of questions
// function lengthfinder(){
//     totalQuestions=Object.keys(questions).length;
//     console.log(totalQuestions);
// }
// lengthfinder();


// add the event listeners
window.onload = renderQuestion();
/*setTimeout(function(){
window.onload = renderQuestion();
},2000);*/

prevButton.addEventListener('click', prevQuestion);
resetButton.addEventListener('click', resetQuiz);
choices.forEach(function(choice) {
    choice.addEventListener('click', scoring);
    
});

$(".attempted").text(count + 1);
$(".outof").text(questions.length);

// functions used
function scoring() {
    // grab the answer of the current question 
    // $(".choices").css('box-shadow','none')
    
    answer = questions[count].answer;
    // console.log("what i answered :",this.innerText,"Correct ans :",questions[count].choices[answer])
    // prevButton is visible when a choice is selected
    // console.log('answer',answer)
    prevFlag = true;
    
    
    myidhere = this.id ;
    $("#"+myidhere).css("box-shadow"," 0 0 10px rgb(81 203 238)");
    // THIS is the span.choice that the user clicked
    //alert(this.innerText.split('.')[1]);
    //alert(questions[count].choices[answer].split('.')[1]);

    if (this.innerText === questions[count].choices[answer] && flag==0) {
        // correctAnswer waves for prevButton use
        correctAnswer = true;
        score++;
        flag=1;
        // console.log('score',score);
    } else {
        correctAnswer = false;
        flag=0;
    }
    setTimeout(function(){
        trackquizquestion();
        var pathname = window.location.pathname.split('/');
        var remove_last_part = pathname.pop();
        var refresh = window.location.protocol + "//" + window.location.host + pathname.join('/') + '/'+(parseInt(remove_last_part)+1);
        window.history.pushState({ path: refresh }, '', refresh); 
        $("#"+myidhere).css("box-shadow","none");
       
       }, 500);
    //break;
    // this.style.boxShadow  = '0 0 10px rgba(81,203,238,1)';
    // then render next question
   // nextQuestion();
}

// to change the question on option selection
function answered10() {
    // console.log("clicked");
    
    
    setTimeout(function(){
         if (count <= questions.length){
        nextQuestion();
        } 
        }, 500);
    
}



function nextQuestion() {
    if(prevFlag == true){

        // count goes up
        count++;
        // console.log((count+1) , questions.length)
        if (count > questions.length) {
            count = questions.length;
            // console.log(count);
            $(".attempted").text(count);
            $(".outof").text(questions.length);
        } else if ((count) == questions.length) {
            // quiz is over when count reaches 20
            // console.log(  '(render completion)', count);
            renderCompletion();
            $(".attempted").text(count);
            $(".outof").text(questions.length);
        } else if (count !== questions.length) {
            // numbers between 0 and 20 have questions that can be rendered
            // console.log(  '(render next)', count);
            renderQuestion();
            prevFlag = false;
            $(".attempted").text(count +1 );
            $(".outof").text(questions.length);
        }
    }
}



// the prevButton will only be available to go back one question
function prevQuestion() {
    // when the previous question renders, remove the prevButton
    // debugger;
    prevFlag = false;
    nextButton.classList.remove('hide');
    // if the user originally clicked the correctAnswer, remove score
    if (correctAnswer) {
        correctAnswer = false;
        score--;
    }
    
    // then go back and render the old question
    count--;
    renderQuestion();
    $(".attempted").text(count+1);
    $(".outof").text(questions.length);
    var pathname = window.location.pathname.split('/');
    var remove_last_part = pathname.pop();
    var refresh = window.location.protocol + "//" + window.location.host + pathname.join('/') + '/'+(parseInt(remove_last_part)-1);
    window.history.pushState({ path: refresh }, '', refresh);
    trackquizquestion();
}




function renderQuestion() {
    
    // prevButton is hidden on the first page
    // and if the user attempts to go back more than one question
    if (!prevFlag) {
        if(count==0){
            prevButton.classList.add('hide');
        }
        
    } else if (prevButton.classList.contains('hide')) {
        prevButton.classList.remove('hide');
    }

    if (count+1 == questions.length){
        finishbutton.classList.remove('hide');
        nextButton.classList.add('hide');
    }else{
        finishbutton.classList.add('hide');
    }
    
    if(questions[count].next_quiz_url!=''){
        $('.nextQuiz').attr('href',questions[count].next_quiz_url);
    } else {
        $('.nextQuiz').css('display','none');
    }
    // update question div with current question

    question.innerText = questions[count].question;

    $(".quizimg").attr("src", questions[count].src);
    if(questions[count].src==''){
        $('.quizdiv').addClass('hide')
    }else(
        $('.quizdiv').removeClass('hide')
    )

    // update each choice with the choices available in current question
    choices.forEach(function(choice, i) {
        // alert($(choices).closest("a").find('img').attr('src'));
        /*if(questions[count].choices[i]!=''){
            choice.innerText = questions[count].choices[i];
        }*/
        choice.innerText = questions[count].choices[i];
        if(choice.innerText==''){
            choice.classList.add('hide');
        } else {
            choice.classList.remove('hide');
        }
    });
    
    /*if(questions.length>1){
        updateProgress();
    } else {
        $('.progress-bar').closest("div.card-header").css('display','none');
    }*/
    updateProgress();
    
}

//next button direct with no answer
function renderQuestionnoans() {
    if((count+2) == questions.length){
        console.log("chnage of buttons");
        nextButton.classList.add('hide');  
        finishbutton.classList.remove('hide');
    }
    // if (count+1 == questions.length){
    //     finishbutton.classList.remove('hide');
    // }else{
    //     finishbutton.classList.add('hide');
    // }
    count++
    // prevButton is hidden on the first page
    // and if the user attempts to go back more than one question
    if (!prevFlag) { 
        
        if(count==0){
            prevButton.classList.add('hide');
        }
        
    } else if (prevButton.classList.contains('hide')) {
        prevButton.classList.remove('hide');
    }
    prevButton.classList.remove('hide');
    // update question div with current question
    question.innerText = questions[count].question;
    $(".quizimg").attr("src", questions[count].src);
    if(questions[count].src==''){
        $('.quizdiv').addClass('hide')
    }else(
        $('.quizdiv').removeClass('hide')
    )

    // update each choice with the choices available in current question
    choices.forEach(function(choice, i) {
        choice.innerText = questions[count].choices[i];
        if(choice.innerText==''){
            choice.classList.add('hide');
        } else {
            choice.classList.remove('hide');
        }
    });
    
    updateProgress();
    var pathname = window.location.pathname.split('/');
    var remove_last_part = pathname.pop();
    var refresh = window.location.protocol + "//" + window.location.host + pathname.join('/') + '/'+(parseInt(remove_last_part)+1);
    window.history.pushState({ path: refresh }, '', refresh);
    trackquizquestion();
}

function renderCompletion() {
    updateProgress();
    scorePercentage = Math.round(score/questions.length * 100) + '%';
    
    // update with a thank you note and the user's percentage
    question.innerText = 'Thank you for Completing the Quiz!';
    // resultsPara.innerText = 'Your score is: ' + scorePercentage;
    // console.log("quizcompletion")
    // reset avail, prevButton and choicesPara are removed


    
    finishbutton.classList.add("hide");
    elementchoice.classList.add("hide");
    elementresult.classList.remove("hide");
    elementresult.innerHTML = "You scored : " + score + " / " + questions.length;
    var results='<div class=" text-center answer_result1"><p class="answer_result1_text">Correct answers are :</p></div><div class="row answer_result">';
    for (var i = 0; i < questions.length; i++) {
        results+= '<div class="col-md-4"><p>Q.'+(i+1)+' -> '+questions[i].column_ans_text+'</p></div>';
    }
    results+= '</div>';
    $(elementresult).after(results);
    question.classList.add("text-center");
    $('.quizdiv').addClass('hide')

    // choicesPara.classList.add('hide');
    prevButton.classList.add('hide');
    nextButton.classList.add('hide');
    nextQuizButton.classList.remove('hide');
    resetButton.classList.remove('hide');

}



function updateProgress() {
    // progress bar will be updated as count goes up
    progressPercentage = Math.round(((count+1)/questions.length) * 100);
    progress.style.width = progressPercentage + '%';
    $(".attempted").text(count+1);
    $(".outof").text(questions.length);
}


function resetQuiz() {
    // reset tracking variables
    count = 0;
    score = 0;
    correctAnswer = false;
    prevFlag = false;
    
    // resultsPara is hidden
    // resultsPara.innerText = '';
    
    // choicesPara displays while resetButton is hidden
    // choicesPara.classList.remove('hide');
    resetButton.classList.add('hide');
    nextQuizButton.classList.add('hide');
    nextButton.classList.remove('hide');

    elementchoice.classList.remove("hide");
    elementresult.innerHTML = "";
    question.classList.remove("text-center");
    elementresult.classList.add("hide");
    finishbutton.classList.remove("hide");
    $('.answer_result,.answer_result1').remove();
    renderQuestion();
    var pathname = window.location.pathname.split('/');
    var remove_last_part = pathname.pop();
    var refresh = window.location.protocol + "//" + window.location.host + pathname.join('/') + '/1';
    window.history.pushState({ path: refresh }, '', refresh);
}

function  trackquizquestion() {
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-2326030-39', 'auto');
        ga('send', 'pageview');
        ga('send', {
            'hitType': 'event',
            'eventCategory': 'quiz',
            'eventAction': 'pageview',
            'eventLabel': $('.page-title').html(),
            //'eventValue': 1,
            'hitCallback': function() {
               console.log('Sent!!');
              //callback function
            },
           'hitCallbackFail' : function () {
              console.log("Unable to send Google Analytics data");
              //callback function
           }
        });
}

/*
Created By    : Sagar Pund
Created At    : 2020-05-03 07:35 PM
Updated By    : Sagar Pund
Updated At    : 2020-05-03 07:35 PM
Section Name  : quiz load more
Purpose       : Get Data From api/getTimepassQuizData.php
*************************** START ***********************************/
/*var app = angular.module("quizdetails", []);
app.controller('quizdetailsCtrl', function($scope, $http) {
    // Variables
    $scope.showLoadmore = true;
    $scope.row = 0;
    $scope.rowperpage = 4;
    $scope.buttonText = "Load More Quiz";
    $scope.actual_url = window.location.href;
    // Fetch data
    $scope.getPosts = function() {
        $http({
            method: 'get',
            url: domain + "api/getTimepassQuizData.php?start_limit=" + $scope.row + "&end_limit=" + $scope.rowperpage+"&actual_link="+$scope.actual_url,
        }).then(function successCallback(response) {
            $scope.authorarticleloadmoredatas = response.data;
            if (typeof $scope.authorarticleloadmoredatas != 'undefined' && $scope.authorarticleloadmoredatas.length>0) {
                $scope.row += $scope.rowperpage;
                if ($scope.posts != undefined) {
                    $scope.buttonText = "Loading ...";
                    setTimeout(function() {
                        $scope.$apply(function() {
                            angular.forEach(response.data, function(item) {
                                
                                $scope.posts.push(item);
                            });
                            $scope.buttonText = "Load More Quiz";
                        });
                    }, 1);

                } else {
                    $scope.posts = response.data;
                }
            } else {
                
                $scope.buttonText = "End of content";
               // $scope.showLoadmore = false;
            }
        });
    }

    // Call function
    //$scope.getPosts();

    
});
angular.bootstrap(document.getElementById("quizdetails"), ['quizdetails']);*/
/************************** END ************************************/