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

feat: Refactor collection take start template for improved layout and user experience

Browse Source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Ross
2026-04-28 14:11:19 +01:00
parent f7cc51c221
commit e894e02445
1 changed files with 103 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atlas/templates/atlas/collection_take_start.html
+103 -45
View File
@@ -1,69 +1,127 @@
{% extends 'atlas/base.html' %}
{% block content %}
<h2>Start: {{collection.name}}{% if cid_exam.completed %} <span class="stamp-white">REVIEW</span>{% endif %}</h2>
<style>
.take-start-hero {
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(135deg, rgba(13, 110, 253, 0.22), rgba(25, 135, 84, 0.2));
border-radius: .75rem;
padding: 1rem 1.25rem;
margin-bottom: 1rem;
}
.take-start-card {
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
border-radius: .75rem;
padding: 1rem;
}
.take-start-meta {
display: grid;
grid-template-columns: 9rem 1fr;
gap: .35rem .75rem;
}
.take-start-meta dt {
font-weight: 600;
color: var(--bs-secondary-color);
margin: 0;
}
.take-start-meta dd {
margin: 0;
}
</style>
<section class="take-start-hero">
<div class="d-flex flex-wrap align-items-center gap-2 justify-content-between">
<h2 class="mb-0">Start: {{ collection.name }}</h2>
{% if cid_exam.completed %}
<span class="badge bg-light text-dark">Review Mode</span>
{% endif %}
</div>
<p class="mb-0 mt-2 text-body-secondary">Open the collection and begin or resume your session.</p>
</section>
{% if request.user.is_authenticated and valid_user %}
User: {{request.user}}<br/>
<section class="take-start-card">
<dl class="take-start-meta mb-3">
<dt>User</dt>
<dd>{{ request.user }}</dd>
{% if cid_exam %}
<dt>Started</dt>
<dd>{{ cid_exam.start_time }}</dd>
{% if cid_exam %}
Started: {{cid_exam.start_time}} <br/>
{% if cid_exam.completed %}
<dt>Ended</dt>
<dd>{{ cid_exam.end_time }}</dd>
{% endif %}
{% endif %}
</dl>
<div class="d-flex flex-wrap gap-2">
<a class="btn btn-primary"
href="{% url 'atlas:collection_case_view_take_user' pk=collection.pk case_number=0 %}">
{% if cid_exam.completed %}Review{% else %}Start{% endif %}
</a>
{% if cid_exam.completed %}
Ended: {{cid_exam.end_time}} <br/>
{% endif %}
{% endif %}
<a href="{% url 'atlas:collection_case_view_take_user' pk=collection.pk case_number=0 %}">
{% if cid_exam.completed %}
<button>Review</button>
{% else %}
<button>Start</button>
{% endif %}
</a>
{% if cid_exam.completed %}
<a href="{% url 'atlas:collection_take_overview_user' pk=collection.pk %}"><button>Overview</button></a>
{% endif %}
{% if cid_exam.completed %}
<a class="btn btn-outline-secondary"
href="{% url 'atlas:collection_take_overview_user' pk=collection.pk %}">Overview</a>
{% endif %}
</div>
</section>
{% else %}
Enter your CID and passcode in the below boxes. (Registered user should login <a href="{% url 'login' %}?next={% url 'atlas:collection_take_start' pk=collection.pk %}">here</a>)<br />
<p><input id="cid-box" type="text" value="Candidate ID"></p>
<p><input id="passcode-box" type="text" value="Passcode"></p>
<section class="take-start-card">
<p class="mb-3">
Enter your CID and passcode below.
Registered users can
<a href="{% url 'login' %}?next={% url 'atlas:collection_take_start' pk=collection.pk %}">log in here</a>.
</p>
<button>Start</button>
<div class="row g-2 align-items-end">
<div class="col-12 col-md-5">
<label class="form-label" for="cid-box">Candidate ID</label>
<input id="cid-box" class="form-control" type="text" value="Candidate ID">
</div>
<div class="col-12 col-md-5">
<label class="form-label" for="passcode-box">Passcode</label>
<input id="passcode-box" class="form-control" type="text" value="Passcode">
</div>
<div class="col-12 col-md-2 d-grid">
<button id="start-candidate-btn" class="btn btn-primary" type="button">Start</button>
</div>
</div>
</section>
<script type="text/javascript">
$(document).ready(function () {
window.location.search.substr(1).split("&").forEach((item) =>
{
s = item.split("=");
if (s[0] == "cid") {
$("#cid-box").val(s[1]);
}
if (s[0] == "passcode") {
$("#passcode-box").val(s[1]);
}
});
$("#cid-box, #passcode-box").keypress(function(e) {
// Enter pressed?
console.log(e)
if(e.which == 10 || e.which == 13) {
$("button").click();
window.location.search.substr(1).split("&").forEach((item) => {
const s = item.split("=");
if (s[0] === "cid") {
$("#cid-box").val(s[1]);
}
if (s[0] === "passcode") {
$("#passcode-box").val(s[1]);
}
});
$("button").click(() => {
let cid = $("#cid-box").val();
let passcode = $("#passcode-box").val();
$("#cid-box, #passcode-box").keypress(function (e) {
if (e.which === 10 || e.which === 13) {
$("#start-candidate-btn").click();
}
});
$("#start-candidate-btn").click(() => {
const cid = $("#cid-box").val();
const passcode = $("#passcode-box").val();
if (Number.isInteger(parseInt(cid))) {
window.location.replace("{% url 'atlas:collection_case_view_take' pk=collection.pk case_number=0 cid='0000000' passcode='ZZZZZZ' %}".replace("0000000", cid).replace("ZZZZZZ", passcode));
} else {
alert("Please enter a valid Candidate ID (CID).")
alert("Please enter a valid Candidate ID (CID).");
}
});
});