{% extends "elearning.html" %}

{% load staticfiles %}

{% block headtitle %}Exam - {{ course }} - {{ block.super }}{% endblock %}

{% block headstyle %}
<link rel="stylesheet" type="text/css" href="{% static 'js/libs/jquery.countdown/jquery.countdown.css' %}">
{% endblock %}

{% block content %}
    <div class="row">
        <div class="span6">
            <ul class="breadcrumb">
                <li><a href="{% url 'learner_dashboard' %}">Dashboard</a> <span class="divider">/</span></li>
                <li><a href="{% url 'learner_course' course.slug %}">{{ course }}</a> <span class="divider">/</span></li>
                <li class="active">{{ course }} Exam</li>
            </ul>
        </div>
        <div class="span6">
            <div class="pull-right"><div id="timer">45:00</div></div>
        </div>
    </div>

    <div class="row">
        <div class="span12">
            <div class="progress progress-striped">
                <div class="bar" style="width: {{ complete_percentage }}%;"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="span12">
            <form action="" method="post">{% csrf_token %}

                <input type="hidden" name="question" value="{{ question.id }}" />

                {% if question.tutorial %}
                <h2>{{ question.tutorial }}</h2>
                {% endif%}

                <label>Q{{ question_num }}. {{ question|safe }}</label>

                {% if question.get_type == "MCQ" %}
                    {% with mcq=question.get_mcq %}
                        {% for option in mcq.get_option_list %}
                            <label class="radio">
                                <input type="radio" name="mcq_option" value="{{ option }}" {% if question_submission %}{% if question_submission.answer == option %}checked="checked"{% endif %}{% endif %}>{{ option }}
                            </label>
                        {% endfor %}
                    {% endwith %}
                {% endif %}

                {% if question.get_type == "Gap" %}
                    {% with gap=question.get_gap gap_option_submissions=question_submission.get_gap_option_submissions %}
                        <p>
                            {% for option in gap.get_options %}
                                {{ option.pre_text }}
                                <select name="gap{{ option.id }}">
                                    <option value="">--------</option>
                                   {% for choice in gap.get_option_list %}
                                        <option value="{{ choice }}" {% for option_submission in gap_option_submissions %}{% if option_submission.gap_option.id == option.id and option_submission.answer == choice %}selected="selected"{% endif %}{% endfor %}>{{ choice }}</option>
                                   {% endfor %}
                                </select>
                            {% endfor %}
                            {{ gap.post_text}}
                        </p>
                    {% endwith %}
                {% endif %}

                {% for option in question.get_option_list %}
                    <label class="radio">
                        <input type="radio" name="question" value="{{ option }}" {% if question_submission %}{% if question_submission.answer == option %}checked="checked"{% endif %}{% endif %}>{{ option }}
                    </label>
                {% endfor %}
                <br />
                <button type="submit" class="btn btn-primary" id="exam-submit-button">Submit</button>
            </form>
        </div>
    </div>

    <div id="course" value="{{ course.slug }}"></div>
    <div id="learner" value="{{ learner.user.username }}"></div>
{% endblock %}

{% block footerscript %}
<script type="text/javascript" src="{% static 'js/libs/jquery.countdown/jquery.countdown.min.js' %}" ></script>
<script>
$('#timer').countdown({until: +{{timer}}, format: 'MS', compact: true});
</script>
{% endblock %}