Refactor question detail layout for improved readability; enhance card structure and styling for better user experience.
This commit is contained in:
Ross
@@ -18,7 +18,7 @@
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-4">
|
||||
<div class="col-12 col-lg-4">
|
||||
<h6>1 mark</h6>
|
||||
<ul class="list-group mb-2">
|
||||
{% for answer in half_mark_answers %}
|
||||
@@ -28,7 +28,7 @@
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-4">
|
||||
<div class="col-12 col-lg-4">
|
||||
<h6>0 marks</h6>
|
||||
<ul class="list-group mb-2">
|
||||
{% for answer in incorrect_answers %}
|
||||
|
||||
@@ -3,116 +3,129 @@
|
||||
{% block content %}
|
||||
{% load static %}
|
||||
{% include 'anatomy/question_link_header.html' %}
|
||||
<div id="anatomy-dicom-image" class="dicom-image-legacy" data-url="{{ question.get_image_url }}"
|
||||
data-annotations='{{question.image_annotations}}' data-edit_annotation=true>
|
||||
<details class="help-text">
|
||||
<summary><i class="bi bi-info-circle"></i> Help</summary>
|
||||
<p>Annotate the image using the right mouse button to click and drag an arrow. To remove an arrow drag it out of the image boundaries. To save the changes click the "Save Annotations" button.</p>
|
||||
|
||||
<p>There is no limit to the number of arrows that can be added to the image.</p>
|
||||
</details>
|
||||
<button id="save-annotations">Save Annotations</button>
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div id="anatomy-dicom-image" class="dicom-image-legacy w-100" data-url="{{ question.get_image_url }}" data-annotations='{{question.image_annotations}}' data-edit_annotation=true style="min-height:300px">
|
||||
</div>
|
||||
<div class="mt-3 d-flex justify-content-between align-items-center">
|
||||
<details class="mb-0">
|
||||
<summary class="small text-muted"><i class="bi bi-info-circle"></i> Image help</summary>
|
||||
<div class="small text-muted mt-2">Annotate the image using the right mouse button to click and drag an arrow. To remove an arrow drag it out of the image boundaries. Click <strong>Save Annotations</strong> to persist.</div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
<div class="question">
|
||||
<div class="date">
|
||||
Created: {{ question.created_date|date:"d/m/Y" }}
|
||||
<button id="save-annotations" class="btn btn-sm btn-primary">Save Annotations</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Question type: {{question.question_type}}</h2>
|
||||
<h3>Primary answer: {{ question.get_primary_answer }}</h3>
|
||||
<div>
|
||||
<details>
|
||||
<summary title="Click to view the question answers">
|
||||
Answers:
|
||||
</summary>
|
||||
<table>
|
||||
<tr><th>Answer</th><th>Score</th></tr>
|
||||
{% for answer in question.answers.all|dictsortreversed:"status" %}
|
||||
<tr>
|
||||
<td {% if answer.proposed %}class="proposed-answer" data-aid="{{answer.pk}}" data-question-type="anatomy"
|
||||
{% endif %}>
|
||||
<span >
|
||||
{{ answer }}
|
||||
</span>
|
||||
<td>
|
||||
<td>{{answer.status}}</td>
|
||||
{% if answer.proposed %}
|
||||
<td>
|
||||
<button class="btn btn-sm accept-button" data-aid={{answer.id}}
|
||||
hx-get="{% url 'anatomy:confirm_answer' answer.id %}"
|
||||
title="Click to accept the proposed answer">Accept</button>
|
||||
<button class="btn btn-sm delete-button" data-aid={{answer.id}}
|
||||
hx-get="{% url 'anatomy:delete_answer' answer.id %}"
|
||||
title="Click to delete the proposed answer"
|
||||
>Delete</button>
|
||||
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<h5 class="card-title mb-1">Question</h5>
|
||||
<div class="text-muted">Created: {{ question.created_date|date:"d/m/Y" }}</div>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<h6 class="mb-0">Type: <span class="badge bg-secondary">{{ question.question_type }}</span></h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6 class="mt-2">Primary answer</h6>
|
||||
<div class="mb-2"><strong>{{ question.get_primary_answer }}</strong></div>
|
||||
|
||||
<h6>Answers</h6>
|
||||
<details class="mb-3">
|
||||
<summary class="small">Show answers</summary>
|
||||
<table class="table table-sm mt-2">
|
||||
<thead>
|
||||
<tr><th>Answer</th><th>Score</th><th></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for answer in question.answers.all|dictsortreversed:"status" %}
|
||||
<tr>
|
||||
<td {% if answer.proposed %}class="proposed-answer" data-aid="{{answer.pk}}" data-question-type="anatomy"{% endif %}>
|
||||
<pre class="mb-0">{{ answer.answer }}</pre>
|
||||
</td>
|
||||
{% endif %}
|
||||
<td>{{ answer.get_status_display|default:answer.status }}</td>
|
||||
<td>
|
||||
{% if answer.proposed %}
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<button class="btn btn-outline-success accept-button" data-aid={{answer.id}} hx-get="{% url 'anatomy:confirm_answer' answer.id %}" title="Accept">Accept</button>
|
||||
<button class="btn btn-outline-danger delete-button" data-aid={{answer.id}} hx-get="{% url 'anatomy:delete_answer' answer.id %}" title="Delete">Delete</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr><td colspan="3" class="small text-muted">No stored answers</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</details>
|
||||
|
||||
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</details>
|
||||
</div>
|
||||
<div>
|
||||
Answer help: {{ question.answer_help|safe }}
|
||||
</div>
|
||||
<div>
|
||||
{% partialdef suggest-incorrect-form inline %}
|
||||
<span id="incorrect-answers">
|
||||
Answer suggest incorrect: {{ question.answer_suggest_incorrect }}
|
||||
<button id="answer-suggest-incorrect-button" class="btn btn-sm" hx-get="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}"
|
||||
hx-target="#incorrect-answers"
|
||||
hx-swap="innerHTML">Edit suggestions</button>
|
||||
</span>
|
||||
{% endpartialdef %}
|
||||
</div>
|
||||
<div>
|
||||
Description: {{ question.description }}
|
||||
</div>
|
||||
<div>
|
||||
Exams: {% for exam in question.exams.all %}
|
||||
<a href="{% url 'anatomy:exam_overview' pk=exam.pk %}">{{ exam }}</a>
|
||||
{% endfor %}
|
||||
<button class="btn btn-sm" hx-get="{% url 'anatomy:question_add_exam' question_id=question.pk %}"
|
||||
hx-target="#exam-list"
|
||||
hx-swap="innerHTML">Edit exam(s)</button>
|
||||
<span id="exam-list"></span>
|
||||
</div>
|
||||
<div>
|
||||
Modality: {{ question.modality }}
|
||||
</div>
|
||||
<div>
|
||||
Region: {{ question.region }}
|
||||
</div>
|
||||
<div>
|
||||
Structure: {{ question.structure }}
|
||||
</div>
|
||||
<div>
|
||||
Body Part: {{ question.body_part }}
|
||||
</div>
|
||||
<div>
|
||||
Author: {% for author in question.author.all %}
|
||||
{{ author }},
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div>
|
||||
Open access: {{ question.open_access }}
|
||||
</div>
|
||||
{% include 'question_notes.html' %}
|
||||
<div>
|
||||
<details>
|
||||
<summary>
|
||||
<span id="annotation-json-toggle">Annotation JSON (+/-):</span> <span id="annotation-json-content">
|
||||
</summary>
|
||||
|
||||
{% if question.image_annotations %}
|
||||
<pre>{{ question.image_annotations }}</pre>
|
||||
{% else %}
|
||||
No saved annotations.
|
||||
{% if question.answer_help %}
|
||||
<div class="mb-3">
|
||||
<h6>Answer help</h6>
|
||||
<div class="small text-muted">{{ question.answer_help|safe }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</span>
|
||||
</details>
|
||||
|
||||
<div class="mb-2">
|
||||
{% partialdef suggest-incorrect-form inline %}
|
||||
<div id="incorrect-answers" class="small text-muted">
|
||||
<strong>Answer suggest incorrect:</strong> {{ question.answer_suggest_incorrect }}
|
||||
<div class="mt-1"><button id="answer-suggest-incorrect-button" class="btn btn-sm btn-outline-secondary" hx-get="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}" hx-target="#incorrect-answers" hx-swap="innerHTML">Edit suggestions</button></div>
|
||||
</div>
|
||||
{% endpartialdef %}
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<h6>Description</h6>
|
||||
<div class="small text-muted">{{ question.description }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="mb-1"><strong>Modality:</strong> {{ question.modality }}</div>
|
||||
<div class="mb-1"><strong>Region:</strong> {{ question.region }}</div>
|
||||
<div class="mb-1"><strong>Structure:</strong> {{ question.structure }}</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="mb-1"><strong>Body part:</strong> {{ question.body_part }}</div>
|
||||
<div class="mb-1"><strong>Open access:</strong> {{ question.open_access }}</div>
|
||||
<div class="mb-1"><strong>Author:</strong> {% for author in question.author.all %}{{ author }}{% if not forloop.last %}, {% endif %}{% endfor %}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<h6>Exams</h6>
|
||||
<div class="small">
|
||||
{% for exam in question.exams.all %}
|
||||
<a href="{% url 'anatomy:exam_overview' pk=exam.pk %}" class="me-2">{{ exam }}</a>
|
||||
{% empty %}
|
||||
No exams
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="mt-2"><button class="btn btn-sm btn-outline-secondary" hx-get="{% url 'anatomy:question_add_exam' question_id=question.pk %}" hx-target="#exam-list" hx-swap="innerHTML">Edit exam(s)</button>
|
||||
<span id="exam-list"></span></div>
|
||||
</div>
|
||||
|
||||
{% include 'question_notes.html' %}
|
||||
|
||||
<div class="mt-3">
|
||||
<details>
|
||||
<summary class="small">Annotation JSON</summary>
|
||||
<div class="mt-2 small">{% if question.image_annotations %}<pre class="mb-0">{{ question.image_annotations }}</pre>{% else %}No saved annotations.{% endif %}</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
@@ -182,9 +195,9 @@
|
||||
content: "\F505";
|
||||
font-family: bootstrap-icons;
|
||||
}
|
||||
/* Ensure pre-wrapped content inside cards and tables so long answers don't overflow */
|
||||
.card pre, .table pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
|
||||
|
||||
.question div {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.card .mb-2, .card .mb-3 { margin-bottom: .75rem; }
|
||||
</style>
|
||||
{% endblock css %}
|
||||
Reference in New Issue
Block a user