ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance exam review question fragment to display parts and responses with HTMX support for improved interactivity and user experience

Browse Source
This commit is contained in:
Ross
2025-11-10 13:00:47 +00:00
parent 24c35148b0
commit 66899b54bd
2 changed files with 133 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
physics/templates/physics/partials/exam_review_question_fragment.html
+98
View File
@@ -1,3 +1,101 @@
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Question</h5>
<p class="lead">{{ question|safe }}</p>
<div class="mt-3">
<h6>Parts</h6>
<ul class="list-group">
{% if question.get_questions %}
{% for part in question.get_questions %}
<li class="list-group-item d-flex justify-content-between align-items-start">
<div>
<strong>Part {{ forloop.counter }}.</strong>
<span class="ms-2">{{ part }}</span>
</div>
<div>
{# If we can determine the correct answer for this part show a badge - best-effort #}
{% if question.get_answers %}
{% with ans=question.get_answers|get_item:forloop.counter0 %}
{% if ans %}
<span class="badge bg-primary">Answer: {{ ans }}</span>
{% endif %}
{% endwith %}
{% endif %}
</div>
</li>
{% endfor %}
{% else %}
<li class="list-group-item">No parts defined for this question.</li>
{% endif %}
</ul>
</div>
<p class="mt-2">
<a class="btn btn-sm btn-outline-secondary" href="{% url app_name|add:':question_detail' question.pk %}" target="_blank">View full question details</a>
</p>
<div class="mt-3">
<h6>Response summary</h6>
<div id="physics-response-summary"
hx-get="{% url 'physics:exam_review_question_summary' exam.pk q_index %}"
hx-trigger="load"
hx-swap="innerHTML"
hx-indicator="#physics-summary-indicator-{{ question.pk }}">
<div id="physics-summary-indicator-{{ question.pk }}" style="display:none">
<span class="spinner-border spinner-border-sm text-primary" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading summary</span>
</div>
<style> #physics-summary-indicator-{{ question.pk }}.htmx-request{display:inline-block !important;} </style>
<div class="small text-muted">Loading summary…</div>
</div>
</div>
<div class="mt-3">
<div class="d-flex justify-content-between align-items-center">
<h6 class="mb-0">Responses in this exam</h6>
<div>
<button class="btn btn-sm btn-outline-primary"
hx-get="{% url 'physics:exam_review_question_responses' exam.pk q_index %}"
hx-target="#physics-responses-container"
hx-swap="innerHTML"
hx-indicator="#physics-responses-indicator-{{ question.pk }}">Show responses</button>
</div>
</div>
<div class="mt-2" id="physics-responses-container">
<div id="physics-responses-indicator-{{ question.pk }}" style="display:none">
<span class="spinner-border spinner-border-sm text-primary" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading responses</span>
</div>
<style> #physics-responses-indicator-{{ question.pk }}.htmx-request{display:inline-block !important;} </style>
<div class="text-muted small">Responses are hidden — click “Show responses” to load.</div>
</div>
</div>
<div class="d-flex justify-content-between mt-3">
{% if prev_index is not None %}
<a class="btn btn-outline-primary"
hx-get="{% url app_name|add:':exam_review_question' exam.pk prev_index %}"
hx-target="#review-content"
hx-swap="innerHTML"
hx-push-url="true">&larr; Previous</a>
{% else %}
<span></span>
{% endif %}
{% if next_index is not None %}
<a class="btn btn-primary"
hx-get="{% url app_name|add:':exam_review_question' exam.pk next_index %}"
hx-target="#review-content"
hx-swap="innerHTML"
hx-push-url="true">Next &rarr;</a>
{% else %}
<a class="btn btn-success" href="{% url app_name|add:':exam_overview' exam.pk %}">Complete review</a>
{% endif %}
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<div class="mb-2"><span class="badge bg-primary">Physics</span></div>