{% load notes %}

<div id="quiz" class="content">
  <div class="row">
    <div class="small-12 columns">
      <div id="quiz-intro">
        {% if questions %}
          These quiz questions have been randomly generated from the keywords and definitions associated
          with this note. Refresh to get different questions.
        {% else %}
          Not enough keywords with definitions have been supplied, so we can't generate any quiz questions.
          Provide at least 4 key terms with their definitions, and we'll create questions based on them.
        {% endif %}
      </div>
    </div>
  </div>

  {% for question in questions %}
    <div class="quiz-question-wrapper">
      <div class="row">
        <div class="small-12 columns correct-label hide">
          <div class="correct-label-inner">Correct</div>
        </div>
      </div>
      <div class="row">
        <div class="small-12 columns incorrect-label hide">
          <div class="incorrect-label-inner">Incorrect</div>
        </div>
      </div>
      <div class="row">
        <div class="small-12 columns quiz-question">
          <div class="quiz-question-inner">
            <div class="question-text"><strong>{{ forloop.counter }}. {{ question.question_text }}</strong></div>
            {% if question.question_type == 'MultipleChoiceQuestion' %}
              {% for choice in question.choices %}
                <div class="question-choices">
                  <input type="radio"
                         name="group_{{ forloop.parentloop.counter0 }}"
                         id="choice_{{ forloop.parentloop.counter0 }}_{{ forloop.counter0 }}"
                         value="choice_{{ forloop.parentloop.counter0 }}_{{ forloop.counter0 }}"
                         data-correct="{% if choice.correct %}true{% else %}false{% endif %}" />
                  <label for="choice_{{ forloop.parentloop.counter0 }}_{{ forloop.counter0 }}">{{ choice.text }}</label>
                </div>
              {% endfor %}
            {% endif %}
            {% if question.question_type == 'TrueFalseQuestion' %}
              <div class="question-choices">
                <input type="radio"
                       name="group_{{ forloop.counter0 }}"
                       id="choice_{{ forloop.counter0 }}_true"
                       value="choice_{{ forloop.counter0 }}_true"
                       data-correct="{% if question.true %}true{% else %}false{% endif %}" />
                <label for="choice_{{ forloop.counter0 }}_true">True</label>
              </div>
              <div class="question-choices">
                <input type="radio"
                       name="group_{{ forloop.counter0 }}"
                       id="choice_{{ forloop.counter0 }}_false"
                       value="choice_{{ forloop.counter0 }}_false"
                       data-correct="{% if question.true %}false{% else %}true{% endif %}" />
                <label for="choice_{{ forloop.counter0 }}_false">False</label>
              </div>
            {% endif %}
            {% if question.question_type == 'MatchingQuestion' %}
              {% for row in question.rows %}
                <div class="question-choices row">
                  <div class="small-6 columns">
                    {% with left_row=row.0 %}
                      <div class="matching-choice">
                        <div class="select-wrapper matching-select-wrapper inline">
                          <select class="inline matching-select" id="group_{ forloop.parentloop.counter0 }}_{{ forloop.counter0 }}">
                            {% for right_row in question.right_column %}
                              <option {% if question.left_right_mapping|keyvalue:left_row == right_row %}
                                        data-correct="true"
                                      {% else %}
                                        data-correct="false"
                                      {% endif %}>
                                {{ forloop.counter0|ordinal_letter }}
                              </option>
                            {% endfor %}
                          </select>
                        </div>
                        <label class="matching-select-label" for="group_{ forloop.parentloop.counter0 }}_{{ forloop.counter0 }}">{{ left_row }}</label>
                      </div>
                    {% endwith %}
                  </div>
                  <div class="small-6 columns">
                    {% with right_row=row.1 %}
                      <div class="matching-choice">
                        <strong>{{ forloop.counter0|ordinal_letter }}.</strong> {{ right_row }}
                      </div>
                    {% endwith %}
                  </div>
                </div>
              {% endfor %}
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  {% endfor %}

  <div class="row">
    <div class="small-12 columns">
      <button id="check-answers-button">Check Answers</button>
    </div>
  </div>

</div>