<!DOCTYPE html>
<head>
  {% load static %}
  <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="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap" rel="stylesheet">
  <link href="{% static 'css/quiz_attempt_page.css' %}" rel="stylesheet">
  <style>
    .score_area {
      margin: auto;
      max-width: 800px;
      height: 220px;
      background-image: url('{% static "img/O5X8IJ0.jpg" %}');
      background-size: cover;
      background-repeat: repeat;
      padding: 40px;
      text-align: center;
    }
    .score {
      color:white;
      font-size: 8em;
      font-family: 'Fredericka the Great', cursive;
    }
    .sepa {
      font-size: 8em;
      position:relative;
      top: 20px;
    }
    .tota {
      font-size: 6em;
      position:relative;
      top: 40px;
    }
    #questions_area_wrapper {
      background-color: white;
      padding: 40px;
      margin: auto;
      max-width: 800px;
    }
    .question_score {
      text-align: center;
      font-size: 1.4em;
      margin: 0px;
    }
    </style>
</head>
<body>

  <section id="ques_area">
    <div class="score_area">
      <span class="score">{{ score }}</span>
      <span class="score sepa">/</span>
      <span class="score tota">{{ total }}</span>
    </div>
  <div id="questions_area_wrapper">
    
    {% for sub in submissions %}
      <div class="sadsad">
        <h2 class="actual_question">{{forloop.counter}}. {{ sub.questionId.question }}</h2>
        <label class="op_box"><span id="lbl_{{forloop.counter0}}_0"><strong>A</strong><span>{{sub.questionId.option1}}</span></span></label>
        <label class="op_box"><span id="lbl_{{forloop.counter0}}_1"><strong>B</strong><span>{{sub.questionId.option2}}</span></span></label>
        <label class="op_box"><span id="lbl_{{forloop.counter0}}_2"><strong>C</strong><span>{{sub.questionId.option3}}</span></span></label>
        <label class="op_box"><span id="lbl_{{forloop.counter0}}_3"><strong>D</strong><span>{{sub.questionId.option4}}</span></span></label>
        <br/>
        <div class="rubrics_wrapper">
        <div class="question_header">
          <p class="rubrics">
            You selected: {% if sub.option == '0' %} A {% elif sub.option == '1' %} B {% elif sub.option == '2' %} C {% elif sub.option == '3' %} D {% else %} NA {% endif %} <br/>
            Correct answer: {% if sub.questionId.answer == '0' %} A {% elif sub.questionId.answer == '1' %} B {% elif sub.questionId.answer == '2' %} C {% elif sub.questionId.answer == '3' %} D {% else %} NA {% endif %}
          </p>
          <p id="blankspace"></p>
          <p class="marksarea rubrics">Marks: {{ sub.questionId.marks }}<br/>Negative: -{{ sub.questionId.negative }}</p>
        </div>
        <p class="question_score">Score: {% if sub.option == sub.questionId.answer %} +{{ sub.questionId.marks }} {% else %} -{{ sub.questionId.negative }} {% endif %} </p>
        <br/>
        <p style="font-size: 1.2em">
          {{ sub.questionId.explainations }}
        </p>
        <button type="button" onclick="report_crib({{ sub.questionId }}, {{ quizId }})">Report Crib</button>
        </div>
      </div>
      <br/>
      <hr/>
    {%endfor%}
  </div>
  </section>
  <script>
    var correct_color = '#f4fa9c';
    var wrong_color = '#ffb174';
    function set_subs( question_id, option_id, colorss ) {
      if(typeof question_id == "number" && typeof option_id == "number") {
        var cbox = document.getElementById("lbl_"+question_id+"_"+option_id);
        cbox.style.backgroundColor = colorss;
      }
    }
    {% for sub in submissions %}
      set_subs({{forloop.counter0}}, {{sub.option}}, wrong_color);
      set_subs({{forloop.counter0}}, {{sub.questionId.answer}}, correct_color);
    {%endfor%}

    function report_crib( questionId, quizId ) {
      var crib_txt = prompt("Please enter your crib", "");
      $.get("/save_cribs/",
      {
        question: questionId,
        quiz: quizId,
        cribs: crib_txt
      },
      function(data, status){
        alert(status);
      });
    }
  </script>
</body>
</html>
