Refactor CID user overview template for improved layout and clarity
This commit is contained in:
@@ -1,68 +1,97 @@
|
|||||||
{% extends 'base.html' %}
|
{% extends 'base.html' %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="">
|
<div class="container my-4">
|
||||||
<h2>CID: {{ cid }}</h2>
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||||
<div class="alert alert-dark" role="alert">
|
<h2 class="mb-0">CID: {{ cid }}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-header">Help</div>
|
||||||
|
<div class="card-body">
|
||||||
<details>
|
<details>
|
||||||
<summary>Help</summary>
|
<summary class="mb-2">Brief guide</summary>
|
||||||
<p>This page shows the exam(s) to which you have access.</p>
|
<p class="mb-1">This page shows the exam(s) to which you have access.</p>
|
||||||
<p>When an exam is available to take it will have a "Start" button next to it.</p>
|
<p class="mb-1">When an exam is available to take it will have a "Start" button next to it.</p>
|
||||||
<p>Once you have submitted answers you will be able to view them from the Exam results section. (Please note: although your answers will be visible as soon as they are submitted, correct answers will only be available when the exam results have been published.)</p>
|
<p class="mb-1">Once you have submitted answers you will be able to view them from the Exam results section. Correct answers are visible only after results are published.</p>
|
||||||
<p>If you have not submitted any answer for an exam it will not appear in the Exam Results section below. In this case you can still review the pubilshed results by following the "Results Published" link in the assigend exams section.</p>
|
<p class="mb-0">If you have not submitted any answer for an exam it will not appear in the Exam Results section below. You can review published results from the assigned exams section.</p>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
<h3>Assigned exams</h3>
|
</div>
|
||||||
|
|
||||||
|
<h3 class="mb-3">Assigned exams</h3>
|
||||||
|
<p class="lead">The following exams will be available to take when active.</p>
|
||||||
<div id="exam-assigned">
|
<div id="exam-assigned">
|
||||||
The following exams will be available to take when active.
|
|
||||||
{% for exam_type, exams in available_exams %}
|
{% for exam_type, exams in available_exams %}
|
||||||
{% if exams %}
|
{% if exams %}
|
||||||
<h4>{{exam_type|title}}</h4>
|
<div class="card mb-3">
|
||||||
<ul class='{{exam_type|lower}}'>
|
<div class="card-header">{{ exam_type|title }}</div>
|
||||||
|
<ul class="list-group list-group-flush">
|
||||||
{% for exam in exams %}
|
{% for exam in exams %}
|
||||||
<li class="exam" data-exam-id="{{exam.pk}}">{{exam}}
|
<li class="list-group-item d-flex justify-content-between align-items-center" data-exam-id="{{exam.pk}}">
|
||||||
|
<div>
|
||||||
|
{{ exam }}
|
||||||
{% if exam.active %}
|
{% if exam.active %}
|
||||||
<a href="{{exam.get_take_url}}?cid={{cid}}&passcode={{passcode}}&exam_mode=true" target="_blank" title="Click to take exam">
|
<span class="badge bg-success ms-2">Active</span>
|
||||||
<button class="small-url-button start-button">Start</button>
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if exam.publish_results %}
|
{% if exam.publish_results %}
|
||||||
<a href= "{% url exam_type|add:':exam_scores_cid_user' pk=exam.pk cid=cid passcode=passcode %}" title="Click to view results">
|
<span class="badge bg-info text-dark ms-2">Results Published</span>
|
||||||
<button class="small-url-button results-button">Results Published</button>
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div class="text-end">
|
||||||
|
{% if exam.active %}
|
||||||
|
<a class="btn btn-sm btn-primary me-2" href="{{exam.get_take_url}}?cid={{cid}}&passcode={{passcode}}&exam_mode=true" target="_blank" title="Click to take exam">Start</a>
|
||||||
|
{% endif %}
|
||||||
|
{% if exam.publish_results %}
|
||||||
|
<a class="btn btn-sm btn-outline-secondary" href="{% url exam_type|add:':exam_scores_cid_user' pk=exam.pk cid=cid passcode=passcode %}" title="Click to view results">View Results</a>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% if all_exams %}
|
{% if all_exams %}
|
||||||
<h3>Exam results</h3>
|
<h3 class="mt-4 mb-3">Exam results</h3>
|
||||||
|
<p>The following exam results have been found. Click to view answers (and scores when published):</p>
|
||||||
<div id="exam-results">
|
<div id="exam-results">
|
||||||
The following exam results been found. Click to view answers (and scores when the results are published):
|
|
||||||
{% for exam_type, exams in all_exams %}
|
{% for exam_type, exams in all_exams %}
|
||||||
{% if exams %}
|
{% if exams %}
|
||||||
<h4>{{exam_type|title}}</h4>
|
<div class="card mb-3">
|
||||||
<ul class='{{exam_type|lower}}'>
|
<div class="card-header">{{ exam_type|title }}</div>
|
||||||
|
<ul class="list-group list-group-flush">
|
||||||
{% for exam in exams %}
|
{% for exam in exams %}
|
||||||
<li class="exam" data-exam-id="{{exam.pk}}"><a href="{% url exam_type|add:':exam_scores_cid_user' pk=exam.pk cid=cid passcode=passcode %}">{{exam}}</a> {% if exam.active %}[Active]{% endif %} {% if exam.publish_results %}[Results Published]{% endif %}</li>
|
<li class="list-group-item d-flex justify-content-between align-items-center" data-exam-id="{{exam.pk}}">
|
||||||
|
<a href="{% url exam_type|add:':exam_scores_cid_user' pk=exam.pk cid=cid passcode=passcode %}">{{ exam }}</a>
|
||||||
|
<div>
|
||||||
|
{% if exam.active %}<span class="badge bg-success ms-2">Active</span>{% endif %}
|
||||||
|
{% if exam.publish_results %}<span class="badge bg-info text-dark ms-2">Results Published</span>{% endif %}
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if case_collections %}
|
{% if case_collections %}
|
||||||
<div>
|
<div class="mt-4">
|
||||||
<h3>Case Collection</h3>
|
<h3>Case Collections</h3>
|
||||||
The following Case Collections have been found.
|
<p>The following Case Collections have been found.</p>
|
||||||
<ul>
|
<ul class="list-group">
|
||||||
{% for collection in case_collections %}
|
{% for collection in case_collections %}
|
||||||
<li><a href="{{collection.get_take_url}}?cid={{cid}}&passcode={{passcode}}">{{collection.name}}</a> {% if collection.active %}[Active]{% endif %} {% if collection.publish_results %}[Results Published]{% endif %}</li>
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||||
|
<a href="{{collection.get_take_url}}?cid={{cid}}&passcode={{passcode}}">{{ collection.name }}</a>
|
||||||
|
<div>
|
||||||
|
{% if collection.active %}<span class="badge bg-success ms-2">Active</span>{% endif %}
|
||||||
|
{% if collection.publish_results %}<span class="badge bg-info text-dark ms-2">Results Published</span>{% endif %}
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user