{% extends 'main/base.html' %}
{% load static %}

{% block scripts %}
  <script src="{% static 'question/question.js' %}" defer></script>
{% endblock scripts %}

{% block title %} {{ q.ques }} {% endblock %}

{% block content %}

<a href="{% url 'course:each-courses' pk=q.section.course.course_id %}" class="btn btn-danger" style="margin-top:20px; margin-left:20px">Exit Quiz</a>

<hr>
<form id="question-form" class="mt-3 mb-3" style="position:relative; left:60px">
  {% csrf_token %}
  <div id="question-box">
    <div class="mb-2">
        <h3 id="question">{{ q.text }}</h3>
    </div> 
  </div>
  <button type="submit" id ="button1" class="btn btn-primary mt-3">Submit</button>
</form>

<div id="question-prompt" style="position:relative; left:60px; font-size:170%;"></div>
<br>
<div id="corr-ans" style="position:relative; float:left; left:60px; font-weight:550">Correct answer is</div>
<div id="correct-prompt" style="position:relative; left:60px;"></div>
<div id="feedback-symbol"></div>
<div id="your-ans" style="position:relative; float:left; left:60px; font-weight:550">You answered</div>
<div id="answer-prompt"style="position:relative; left:60px;"></div>
<br>
<div id="explanation-prompt"style="position:relative; left:60px; opacity:75%"></div>

{% endblock %}