SkyLearn-Test/templates/result.html

{% extends "base.html" %}
{% load i18n %}

{% load quiz_tags %}


{% block title %} {{ quiz.title}} | Learning management system {% endblock %}
{% block description %} {% trans "Quiz Results for" %} {{ quiz.title }} {% endblock %}

{% block content %}

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="/">Home</a></li>
		<li class="breadcrumb-item"><a href="{% url 'programs' %}">Programs</a></li>
		<li class="breadcrumb-item"><a href="{% url 'program_detail' course.program.id %}">{{ course.program }}</a></li>
		<li class="breadcrumb-item"><a href="{{ course.get_absolute_url }}">{{ course }}</a></li>
		<li class="breadcrumb-item"><a href="{% url 'quiz_index' course.slug %}">Quizzes</a></li>
		<li class="breadcrumb-item"><a href="{% url 'quiz_take' course.id quiz.slug %}">{{ quiz.title|title }}</a></li>
		<li class="breadcrumb-item active" aria-current="page">Result</li>
	</ol>
</nav>

<div id="progress-card">
  <div class="col-md-6 mx-auto">
    <h5 class="lead">Calculating your result...</h5>
    <div class="progress">
      <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
</div>

<style>#progress-main{display: none;}</style>

<div class="container" id="progress-main">
  {% if previous.answers %}
    <div class="card bg-white p-3">
        <p class="muted"><small>{% trans "The previous question" %}:</small></p>
        <p>{{ previous.previous_question }}</p>
        <p>Your answer was
        <strong>
            {{ previous.previous_outcome|yesno:"correct,incorrect" }}
        </strong>
        </p>

        {% load i18n %}
        {% if previous.answers %}

          {% if user_was_incorrect %}
            <div class="alert alert-error">
              <strong>{% trans "You answered the above question incorrectly" %}</strong>
            </div>
          {% endif %}

          <table class="table table-striped table-bordered">
            <tbody>
              {% for answer in previous.answers %}
                {% if answer.correct %}
                  <tr class="success">
                    <td>{{ answer }}</td>
                  <td><strong>{% trans "This is the correct answer" %}</strong></td>
                {% else %}
                  <tr>
                    <td>{{ answer }}</td>
                    <td>
                    {% if previous.question_type.MCQuestion %}
                      {% if answer.id|add:"0" == previous.previous_answer|add:"0" %}
                        {% trans "This was your answer." %}
                      {% endif %}
                    {% endif %}
                    </td>
                  {% endif %}
                  </tr>
              {% endfor %}
            </tbody>
          </table>
        {% endif %}

        <p><strong>{% trans "Explanation" %}:</strong></p>
        <p class="p-2" style="background-color: #fcf8e3;">
          {% if previous.previous_question.explanation %}
            {{ previous.previous_question.explanation }}
          {% else %}
            {% trans "No explanation set to this question." %}
          {% endif %}
        </p>
        <hr>
    </div>

  {% endif %}

  {% if max_score %}

  <div class="card bg-white p-3">
    <div class="header-title-xl text-center">{% trans "Quiz result" %}</div>
    <div class="title-line"></div>
	<p class="text-center">
	  <small class="muted">{% trans "Quiz title" %}: </small>
	  <strong>{{ quiz.title }}</strong></p>

	<p class="lead text-center">
	  {% trans "You answered" %} {{ score }} {% trans "questions correctly out of" %} {{ max_score }}, {% trans "giving you" %} {{ percent }}{% trans "% correct" %}
    </p>

    <div class="score-wrapper mx-auto">
      <div class="score-wrapper-text">{{ percent }}%</div>
      <div class="score-wrapper-bar {% if percent >= 60 %} bg-success {% elif percent >= 50 %} bg-warning {% else %} bg-danger {% endif %}" 
        style="height: {{ percent }}%;" ></div>
    </div><br>

	{% if quiz.pass_mark %}
  <div class="card p-1" style="border: 1px solid #fd7e14;">
    <p class="lead bg-light p-3 text-orange"><span class="fa-1x">&CircleDot;</span> {{ sitting.result_message }}</p>
    {% endif %}
	    <p><span class="fa-2x text-orange">&LongRightArrow;</span> {% trans "Review the questions below and try the quiz again in the future"%}.</p>
      
      <p>
        <span class="fa-2x text-orange">&LongRightArrow;</span> 
        {% trans "The result of this quiz will be stored in your progress section" %} 
        <a class="text-primary" href="{% url 'quiz_progress' %}">Here</a> 
        {% trans "so you can review and monitor your progression" %}.
      </p>

  </div>

  {% endif %}

  <hr>

  {% if possible %}

  <p class="lead">
	{% trans "Your session score is" %} {{ session }} {% trans "out of a possible" %} {{ possible }}
  </p>

  <hr>

  {% endif %}

  {% if questions %}
  <div class="card bg-light p-2">
    <h2>Overview</h2>
    {% for question in questions %}

      <p class="lead">
		    {{ forloop.counter }}, {{ question.content }}
	    </p>

	  <p><strong>{% trans "Explanation" %}:</strong></p>
    {% if question.explanation %}
    <p class="p-2 alert alert-info">
      {{ question.explanation|safe }}
    </p>
    {% else %}
    <p class="p-2 alert alert-warning">
      {% trans "No explanation set for this question." %}
    </p>
    {% endif %}
    
    {% correct_answer_for_all question %}
    
    {% if question.user_answer %}
    <p>{% trans "Your answer" %}: {{ question|answer_choice_to_string:question.user_answer }}</p>
    {% endif %}

    <hr>

  {% endfor %}
  </div>

  {% endif %}

</div>

{% endblock %}

{% block js %}
<script>
    // loader
    // document.getElementById('progress-main').style.display = 'none';
    var timer = setInterval(function(){
        document.getElementById('progress-card').style.display = 'none';
        document.getElementById('progress-main').style.display = 'block';
        clearInterval(timer)
    }, 8000);           
</script>
{% endblock js %}