<!DOCTYPE html>
<head>
  {% load static %}
  <title>Pariksha | Quiz</title>
  <script src="{% static 'js/script.js' %}"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
  <link href="{% static 'css/quiz_attempt_page.css' %}" rel="stylesheet">
  <script>
      function launchFullScreen(element) {
            if(element.requestFullScreen) {
                element.requestFullScreen();
            } else if(element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if(element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            }
      }
      document.onkeydown = function (e) {
              return false;
      }
      document.addEventListener('contextmenu', event => event.preventDefault()); 
    </script>
</head>
<body>
  <section id="initial_screen">
    <div class="flexwrap">
      <h2>Please read following instructions carefully.</h2>
      <ul class="instructions_list">
        <li>The timer is set on the server side. When times runs out your quiz will be autosubmitted</li>
        <li>Dont use keyboard while attempting Quiz.</li>
        <li>Quiz will be in fullscreen to prevent accessing other tabs</li>
        <li>Mouse right click is disabled</li>
        <li>By clicking on I Agree you accept not to be part of malicious activities which may result in you submission being invalidated</li>
      </ul>
      <button type="button" id="agree_btn" onclick="launchFullScreen(document.documentElement)">I Agree</button>
    </div>
  </section>
  <section id="forcefs"><div class="flexwrap"><img width="100px" height="100px" src="{% static 'img/stop.svg' %}"><br/><a onclick="launchFullScreen(document.documentElement)">Oops! You must be fullscreen to continue. <br/>Click here to launch fullscreen</a></div></section>
  <form id="main_form" method="POST" action="/result/">{% csrf_token %}
  <!-- <h1>{{questions.quizId}} Question {{ questions.end_index }} of  {{count}}</h1> -->
  <aside id="question_palette">
    <section id="pallete_info">
      <ul class="pallete_structure">
        <li>Selected <span id="qselected">0</span> of <span id="qtotal">0</span></li>
      </ul>
    </section>
    <ul class="questions_list">
      {% for i in questions%}
      <li id="pallete_question_{{ forloop.counter0 }}" onclick="goto_question({{ forloop.counter0 }})">{{ forloop.counter }}. {{ i.question }}</li>
      {%endfor%}
    </ul>
    <section id="toolbar">
      <div class="button_group">
        <button class="quiz_btn submit" type="button" onclick="submit_form(0)"><strong>Submit</strong></button>
      </div>
      <div class="button_group">
        <button class="quiz_btn prev_ques" type="button" onclick="prev_question()"><strong>Previous</strong></button>
        <span class="separator"></span>
        <button id="nav_btn" class="quiz_btn next_ques" type="button" onclick="show_nav()"><strong>Nav</strong></button>
        <span class="separator"></span>
        <button class="quiz_btn next_ques" type="button" onclick="next_question()"><strong>Next</strong></button>
      </div>
    </section>
  </aside>
  <section id="questions_area">
    <input type="hidden" id="question_count" value="{{count}}">
    <p id="timer">00:00:00</p>
    <div id="questions_area_wrapper">
    {% for i in questions%}
      <div class="question">
        <div class="rubrics_header question_header">
          <p>Question <br/>{{ forloop.counter }} of {{ count }}</p>
          <p></p>
          <p class="marksarea">Marks: {{ i.marks }}<br/>Negative: -{{ i.negative }}</p>
        </div>
        <!-- <h1 id ='quizId'>{{i.quizId}}<h1> -->
        <h1 id ='questionId' hidden>{{i.questionId}} </h1>
        <h2 class="actual_question">{{i.question}}</h2>
        <!--<input type="hidden" id="qq{{forloop.counter0}}" name="qq{{forloop.counter0}}" value="{{i.questionId}}">-->
        <label class="op_box" onclick="set_option({{forloop.counter0}},0)"><span id="lbl_{{forloop.counter0}}_0"><strong>A</strong><span>{{i.option1}}</span></span></label>
        <label class="op_box" onclick="set_option({{forloop.counter0}},1)"><span id="lbl_{{forloop.counter0}}_1"><strong>B</strong><span>{{i.option2}}</span></span></label>
        <label class="op_box" onclick="set_option({{forloop.counter0}},2)"><span id="lbl_{{forloop.counter0}}_2"><strong>C</strong><span>{{i.option3}}</span></span></label>
        <label class="op_box" onclick="set_option({{forloop.counter0}},3)"><span id="lbl_{{forloop.counter0}}_3"><strong>D</strong><span>{{i.option4}}</span></span></label>
        <input type="hidden" id="q{{forloop.counter0}}" name="question_{{i}}" value="NA">
       

        <!-- <label ><input type="textarea" name="fame"  id="cribs" value="">Cribs...</label> -->
      </div>
    {%endfor%}
      <input type="hidden" id="quizId" name="quizId" value="{{questions.0.quizId}}">
       
    </div>
  </section>
  </form>
  <!--<button id="save_ans" >Submit Answer</button>-->
               
    
  <script src="{% static 'js/quiz_attempt_page.js' %}"></script>
  
  <script>
    var enddate = new Date({{ endtime|safe }});
    var endtime = enddate.getTime();
    var x = setInterval(function() {

      // Get today's date and time
      var now = new Date().getTime();

      // Find the distance between now and the count down date
      var distance = endtime - now;

      // Time calculations for days, hours, minutes and seconds
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      // Display the result in the element with id="demo"
      document.getElementById("timer").innerHTML = hours + ":" + minutes + ":" + seconds;

      // If the count down is finished, write some text
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("timer").innerHTML = "EXPIRED";
        console.log(endtime);
        console.log(distance);
        console.log(now);
        //submit_form(1);
      }
    }, 1000);

    var fsscreen = document.getElementById("forcefs");
    var initscr = document.getElementById("initial_screen");
    var prevfs = false;
    var checkfs = setInterval(function() {
        if(document.fullscreenElement || document.webkitFullscreenElement ||
        document.mozFullScreenElement) {
          fsscreen.style.display = "none";
          initscr.style.display = "none";
        } else {
          fsscreen.style.display = "block";
        }
    }, 1000);

    function get_fs() {
      if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) {
        return true;
      } else {
        return false;
      }
    }
    var heartbeat = setInterval(function() {
      var currfs = get_fs();
      var flag = false;
      if (currfs != prevfs) {
        flag = true;
        prevfs = currfs;
      }
      var quizId = {{quizId}};

      $.get("/heartbeat/",
      {
        question: selected_questions,
        quiz: quizId,
        fullscreen: currfs,
        log:flag
      },
      function(data, status){
          console.log("Heartbeat sent!");
          flag = false;
      });
    }, 1000);
  </script>
</body>
</html>
