viveksantayana/ska-referee-test
viveksantayana/ska-referee-test
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases 19 Wiki Activity

Restored static and template files

Browse Source
This commit is contained in:
Vivek Santayana 2022-06-15 11:43:04 +01:00
parent 1a7983052f
commit 62160beab2
57 changed files with 4085 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

260
ref-test/app/admin/static/css/style.css Normal file
View File

@ -0,0 +1,260 @@
body {
padding: 80px 0;
}
.site-footer {
background-color: lightgray;
font-size: small;
}
.site-footer p {
margin: 0;
}
.form-container {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
}
.form-display {
width: 100%;
max-width: 420px;
padding: 15px;
margin: auto;
}
.form-heading {
margin-bottom: 2rem;
}
.form-label-group {
position: relative;
margin-bottom: 2rem;
}
.form-label-group input,
.form-label-group label {
padding: var(--input-padding-y) var(--input-padding-x);
font-size: 16pt;
}
.form-label-group label {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
margin-bottom: 0; /* Override default `<label>` margin */
line-height: 1.5;
color: #495057;
cursor: text; /* Match the input under the label */
border: 1px solid transparent;
border-radius: .25rem;
transition: all .1s ease-in-out;
z-index: -1;
}
.form-label-group input {
background-color: transparent;
border: none;
border-radius: 0%;
border-bottom: 2px solid #585858;
}
.form-label-group input:active, .form-label-group input:focus {
background-color: transparent;
}
.form-label-group input::-webkit-input-placeholder {
color: transparent;
}
.form-label-group input:-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-moz-placeholder {
color: transparent;
}
.form-label-group input::placeholder {
color: transparent;
}
.form-label-group input:not(:placeholder-shown) {
padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
padding-bottom: calc(var(--input-padding-y) / 3);
}
.form-label-group input:not(:placeholder-shown) ~ label {
padding-top: calc(var(--input-padding-y) / 3);
padding-bottom: calc(var(--input-padding-y) / 3);
font-size: 12px;
color: #777;
}
.form-check {
margin-bottom: 2rem;
}
.checkbox input {
transform: scale(1.5);
margin-right: 1rem;
}
.signin-forgot-password {
font-size: 14pt;
}
.form-submission-button {
margin-bottom: 2rem;
}
.form-submission-button button, .form-submission-button a {
margin: 1rem;
vertical-align: middle;
}
.form-submission-button button span, .form-submission-button button svg, .form-submission-button a span, .form-submission-button a svg {
margin: 0 2px;
}
table.dataTable {
border-collapse: collapse;
width: 100%;
}
.table-row {
vertical-align: middle;
}
.row-actions {
text-align: center;
white-space: nowrap;
}
.dataTables_wrapper .dt-buttons {
left: 50%;
transform: translateX(-50%);
float:none;
text-align:center;
}
.row-actions button, .row-actions a {
margin: 0px 5px;
}
#cookie-alert {
padding-right: 16px;
}
#dismiss-cookie-alert {
margin-top: 16px;
width: fit-content;
}
.alert-db-empty {
width: 100%;
max-width: 720px;
font-size: 14pt;
margin: 20px auto;
}
.form-date-input, .form-select-input {
position: relative;
margin: 2rem 0;
}
.form-date-input input,
.form-date-input label, .form-select-input select, .form-select-input label {
padding: var(--input-padding-y) var(--input-padding-x);
font-size: 16pt;
width: 100%;
background-color: transparent;
border: none;
border-bottom: 2px solid #585858;
}
.datepicker::-webkit-calendar-picker-indicator {
border: 1px;
border-color: gray;
border-radius: 10%;
}
.form-date-input label, .form-select-input label {
/* position: absolute; */
/* top: 0;
left: 0; */
display: block;
width: 100%;
margin-bottom: 0; /* Override default `<label>` margin */
line-height: 1.5;
color: #495057;
cursor: text; /* Match the input under the label */
border: 1px solid transparent;
border-radius: .25rem;
transition: all .1s ease-in-out;
z-index: -1;
}
.button-icon {
font-size: 20px;
}
.form-upload {
margin: 2rem 0;
font-size: 14pt;
}
.result-action-buttons, .test-action {
margin: 5px auto;
width: fit-content;
}
.accordion-item {
background-color: unset;
}
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
transition: background-color 5000s ease-in-out 0s;
}
/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
.form-label-group label {
display: none;
}
.form-label-group input::-ms-input-placeholder {
color: #777;
}
}
/* Fallback for IE
-------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.form-label-group label {
display: none;
}
.form-label-group input:-ms-input-placeholder {
color: #777;
}
}

BIN
ref-test/app/admin/static/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
ref-test/app/admin/static/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

2
ref-test/app/admin/static/js/jquery-3.6.0.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

247
ref-test/app/admin/static/js/script.js Normal file
View File

@ -0,0 +1,247 @@
// Menu Highlight Scripts
const menuItems = document.getElementsByClassName('nav-link');
for(let i = 0; i < menuItems.length; i++) {
if(menuItems[i].pathname == window.location.pathname) {
menuItems[i].classList.add('active');
}
}
const dropdownItems = document.getElementsByClassName('dropdown-item');
for(let i = 0; i< dropdownItems.length; i++) {
if(dropdownItems[i].pathname == window.location.pathname) {
dropdownItems[i].classList.add('active');
$( "#" + dropdownItems[i].id ).closest( '.dropdown' ).find('.dropdown-toggle').addClass('active');
}
}
// General Post Method Form Processing Script
$('form.form-post').submit(function(event) {
var $form = $(this);
var data = $form.serialize();
var url = $(this).prop('action');
var rel_success = $(this).data('rel-success');
$.ajax({
url: url,
type: 'POST',
data: data,
dataType: 'json',
success: function(response) {
if (response.redirect_to) {
window.location.href = response.redirect_to;
}
else {
window.location.href = rel_success;
}
},
error: function(response) {
error_response(response);
}
});
event.preventDefault();
});
// Form Upload Questions - Special case, needs to handle files.
$('form[name=form-upload-questions]').submit(function(event) {
var $form = $(this);
var data = new FormData($form[0]);
var file = $('input[name=data_file]')[0].files[0]
data.append('file', file)
$.ajax({
url: window.location.pathname,
type: 'POST',
data: data,
processData: false,
contentType: false,
success: function(response) {
window.location.reload();
},
error: function(response) {
error_response(response);
}
});
event.preventDefault();
});
// Edit and Delete Test Button Handlers
$('.test-action').click(function(event) {
let _id = $(this).data('_id');
let action = $(this).data('action');
if (action == 'delete') {
$.ajax({
url: `/admin/tests/delete/`,
type: 'POST',
data: JSON.stringify({'_id': _id}),
contentType: 'application/json',
success: function(response) {
window.location.href = '/admin/tests/';
},
error: function(response){
error_response(response);
},
});
} else if (action == 'edit') {
window.location.href = `/admin/test/${_id}/`
} else if (action == 'close'){
$.ajax({
url: `/admin/tests/close/`,
type: 'POST',
data: JSON.stringify({'_id': _id}),
contentType: 'application/json',
success: function(response) {
$(window).scrollTop(0);
window.location.reload();
},
error: function(response){
error_response(response);
},
});
}
event.preventDefault();
});
// Edit Dataset Button Handlers
$('.edit-question-dataset').click(function(event) {
var filename = $(this).data('filename');
var action = $(this).data('action');
var disabled = $(this).hasClass('disabled');
if ( !disabled ) {
$.ajax({
url: `/admin/settings/questions/${action}/`,
type: 'POST',
data: JSON.stringify({'filename': filename}),
contentType: 'application/json',
success: function(response) {
window.location.reload();
},
error: function(response){
error_response(response);
},
});
};
event.preventDefault();
});
function error_response(response) {
const $alert = $("#alert-box");
$alert.html('');
if (typeof response.responseJSON.error === 'string' || response.responseJSON.error instanceof String) {
$alert.html(`
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<i class="bi bi-exclamation-triangle-fill" title="Danger"></i>
${response.responseJSON.error}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
`);
} else if (response.responseJSON.error instanceof Array) {
var output = ''
for (var i = 0; i < response.responseJSON.error.length; i ++) {
output += `
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<i class="bi bi-exclamation-triangle-fill" title="Danger"></i>
${response.responseJSON.error[i]}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
`;
$alert.html(output);
}
}
$alert.focus()
}
// Dismiss Cookie Alert
$('#dismiss-cookie-alert').click(function(event){
$.ajax({
url: '/cookies/',
type: 'GET',
data: {
time: Date.now()
},
dataType: 'json',
success: function(response){
console.log(response);
},
error: function(response){
console.log(response);
}
})
event.preventDefault();
})
// Script for Result Actions
$('.result-action-buttons').click(function(event){
var _id = $(this).data('_id');
if ($(this).data('result-action') == 'generate') {
$.ajax({
url: '/admin/certificate/',
type: 'POST',
data: JSON.stringify({'_id': _id}),
contentType: 'application/json',
dataType: 'html',
success: function(response) {
var display_window = window.open();
display_window.document.write(response);
},
error: function(response){
error_response(response);
},
});
} else {
var action = $(this).data('result-action')
$.ajax({
url: window.location.href,
type: 'POST',
data: JSON.stringify({'_id': _id, 'action': action}),
contentType: 'application/json',
success: function(response) {
if (action == 'delete') {
window.location.href = '/admin/results/';
} else window.location.reload();
},
error: function(response){
error_response(response);
},
});
}
event.preventDefault();
});
// Script for Deleting Time Adjustment
$('.adjustment-delete').click(function(event){
var user_code = $(this).data('user_code');
var location = window.location.href;
location = location.replace('#', '')
$.ajax({
url: location + 'delete-adjustment/',
type: 'POST',
data: JSON.stringify({'user_code': user_code}),
contentType: 'application/json',
success: function(response) {
window.location.reload();
},
error: function(response){
error_response(response);
},
});
event.preventDefault();
});

56
ref-test/app/admin/templates/admin/auth/account.html Normal file
View File

@ -0,0 +1,56 @@
{% extends "admin/components/input-forms.html" %}
{% block content %}
<div class="form-container">
<form name="form-update-account" class="form-display form-post" action="{{ url_for(request.endpoint, **request.view_args) }}" data-rel-success="{{ url_for('admin_views.home') }}">
{% include "admin/components/server-alerts.html" %}
<h2 class="form-heading">Update Your Account</h2>
{{ form.hidden_tag() }}
<div class="form-label-group">
Please confirm <strong>your current password</strong> before making any changes to your user account.
</div>
<div class="form-label-group">
{{ form.password_confirm(class_="form-control", placeholder="Current Password", value = user.email, autofocus=true) }}
{{ form.password_confirm.label }}
</div>
<div class="form-label-group">
You can use this panel to update your email address or password.
</div>
<div class="form-label-group">
{{ form.email(class_="form-control", placeholder="Email Address", value = user.email) }}
{{ form.email.label }}
</div>
<div class="form-label-group">
{{ form.password(class_="form-control", placeholder="Password") }}
{{ form.password.label }}
</div>
<div class="form-label-group">
{{ form.password_reenter(class_="form-control", placeholder="Password") }}
{{ form.password_reenter.label }}
</div>
{% include "admin/components/client-alerts.html" %}
<div class="container form-submission-button">
<div class="row">
<div class="col text-center">
<a href="{{ url_for('admin_views.users') }}" class="btn btn-md btn-danger btn-block" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
<span>
Cancel
</span>
</a>
<button class="btn btn-md btn-primary btn-block" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person-lines-fill" viewBox="0 0 16 16">
<path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"/>
</svg>
<span>
Update
</span>
</button>
</div>
</div>
</div>
</form>
</div>
{% endblock %}

32
ref-test/app/admin/templates/admin/auth/login.html Normal file
View File

@ -0,0 +1,32 @@
{% extends "admin/components/input-forms.html" %}
{% block content %}
<div class="form-container">
<form name="form-login" class="form-display form-post" action="{{ url_for(request.endpoint, **request.view_args) }}" data-rel-success="{{ url_for('admin_views.home') }}">
{% include "admin/components/server-alerts.html" %}
<h2 class="form">Log In</h2>
{{ form.hidden_tag() }}
<div class="form-label-group">
{{ form.username(class_="form-control", autofocus=true, placeholder="Enter Username") }}
{{ form.username.label }}
</div>
<div class="form-label-group">
{{ form.password(class_="form-control", placeholder="Enter Password") }}
{{ form.password.label }}
</div>
<div class="form-check">
{{ form.remember(class_="form-check-input") }}
{{ form.remember.label }}
</div>
{% include "admin/components/client-alerts.html" %}
<div class="container form-submission-button">
<div class="row">
<div class="col text-center">
<button class="btn btn-md btn-success btn-block" type="submit">Log In</button>
</div>
</div>
</div>
<a href="{{ url_for('admin_auth.reset') }}" class="signin-forgot-password">Reset Password</a>
</form>
</div>
{% endblock %}

44
ref-test/app/admin/templates/admin/auth/register.html
View File

@ -1 +1,43 @@
<h1>Register</h1> {% extends "admin/components/input-forms.html" %}
{% block navbar %}
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a href="{{ url_for('admin_views.home') }}" class="navbar-brand mb-0 h1">RefTest | Admin</a>
</div>
</nav>
{% endblock %}
{% block content %}
<div class="form-container">
<form name="form-register" class="form-display form-post" action="{{ url_for(request.endpoint, **request.view_args) }}" data-rel-success="{{ url_for('admin_auth.login') }}">
{% include "admin/components/server-alerts.html" %}
<h2 class="form-heading">Register an Account</h2>
{{ form.hidden_tag() }}
<div class="form-label-group">
{{ form.username(class_="form-control", autofocus=true, placeholder="Username") }}
{{ form.username.label }}
</div>
<div class="form-label-group">
{{ form.email(class_="form-control", placeholder="Email Address") }}
{{ form.email.label }}
</div>
<div class="form-label-group">
{{ form.password(class_="form-control", placeholder="Password") }}
{{ form.password.label }}
</div>
<div class="form-label-group">
{{ form.password_reenter(class_="form-control", placeholder="Password") }}
{{ form.password_reenter.label }}
</div>
{% include "admin/components/client-alerts.html" %}
<div class="container form-submission-button">
<div class="row">
<div class="col text-center">
<button class="btn btn-md btn-success btn-block" type="submit">Register</button>
</div>
</div>
</div>
</form>
</div>
{% endblock %}

27
ref-test/app/admin/templates/admin/auth/reset.html Normal file
View File

@ -0,0 +1,27 @@
{% extends "admin/components/input-forms.html" %}
{% block content %}
<div class="form-container">
<form name="form-reset" class="form-display form-post" action="{{ url_for(request.endpoint, **request.view_args) }}" data-rel-success="{{ url_for('admin_auth.login') }}">
{% include "admin/components/server-alerts.html" %}
<h2 class="form-heading">Reset Password</h2>
{{ form.hidden_tag() }}
<div class="form-label-group">
{{ form.username(class_="form-control", autofocus=true, placeholder="Enter Username") }}
{{ form.username.label }}
</div>
<div class="form-label-group">
{{ form.email(class_="form-control", placeholder="Enter Email Address") }}
{{ form.email.label }}
</div>
{% include "admin/components/client-alerts.html" %}
<div class="container form-submission-button">
<div class="row">
<div class="col text-center">
<button class="btn btn-md btn-success btn-block" type="submit">Reset Password</button>
</div>
</div>
</div>
</form>
</div>
{% endblock %}

29
ref-test/app/admin/templates/admin/auth/update-password.html Normal file
View File

@ -0,0 +1,29 @@
{% extends "admin/components/input-forms.html" %}
{% block content %}
<div class="form-container">
<form name="form-update-password" class="form-display form-post" action="{{ url_for(request.endpoint, **request.view_args) }}" data-rel-success="{{ url_for('admin_auth.login') }}">
{% include "admin/components/server-alerts.html" %}
<h2 class="form-heading">Update Password</h2>
{{ form.hidden_tag() }}
<div class="form-label-group">
{{ form.password(class_="form-control", placeholder="Password") }}
{{ form.password.label }}
{{ form.password.errors[0] }}
</div>
<div class="form-label-group">
{{ form.password_reenter(class_="form-control", placeholder="Password") }}
{{ form.password_reenter.label }}
{{ form.password_reenter.errors[0] }}
</div>
{% include "admin/components/client-alerts.html" %}
<div class="container form-submission-button">
<div class="row">
<div class="col text-center">
<button class="btn btn-md btn-success btn-block" type="submit">Update Password</button>
</div>
</div>
</div>
</form>
</div>
{% endblock %}

82
ref-test/app/admin/templates/admin/components/base.html Normal file
View File

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
<link
rel="stylesheet"
href="{{ url_for('.static', filename='css/style.css') }}"
/>
{% block datatable_css %}
{% endblock %}
<title>{% block title %} SKA Referee Test | Admin Console {% endblock %}</title>
{% include "admin/components/og-meta.html" %}
</head>
<body class="bg-light">
{% block navbar %}
{% include "admin/components/navbar.html" %}
{% endblock %}
<div class="container">
{% block top_alerts %}
{% include "admin/components/server-alerts.html" %}
{% endblock %}
{% block content %}{% endblock %}
</div>
<footer class="container site-footer mt-5">
{% block footer %}
{% include "admin/components/footer.html" %}
{% endblock %}
</footer>
<!-- JQuery, Popper, and Bootstrap js dependencies -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script>
window.jQuery || document.write(`<script src="{{ url_for('.static', filename='js/jquery-3.6.0.min.js') }}"><\/script>`)
</script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous">
</script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"
></script>
<!-- Custom js -->
<script type="text/javascript">
var csrf_token = "{{ csrf_token() }}";
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrf_token);
}
}
});
</script>
<script
type="text/javascript"
src="{{ url_for('.static', filename='js/script.js') }}"
></script>
{% block datatable_scripts %}
{% endblock %}
{% block custom_data_script %}
{% endblock %}
</body>
</html>

84
ref-test/app/admin/templates/admin/components/certificate.html Normal file
View File

@ -0,0 +1,84 @@
{% extends "admin/components/base.html" %}
{% block title %} SKA Referee Test | Detailed Results {% endblock %}
{% block navbar %}{% endblock %}
{% block top_alerts %}{% endblock %}
{% block content %}
<div class="d-flex justify-content-center">
<h1 class="center">SKA Referee Theory Exam Results</h1>
</div>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-lg-6">
<ul class="list-group">
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Candidate</h5>
</div>
<h2>
{{ entry.name.surname}}, {{ entry.name.first_name }}
</h2>
</li>
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Email Address</h5>
</div>
{{ entry.email }}
</li>
{% if entry['club'] %}
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Club</h5>
</div>
{{ entry.club }}
</li>
{% endif %}
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Exam Code</h5>
</div>
{{ '—'.join([entry.test_code[:4], entry.test_code[4:8], entry.test_code[8:]]) }}
</li>
{% if entry['user_code'] %}
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">User Code</h5>
</div>
{{ entry.user_code }}
</li>
{% endif %}
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Start Time</h5>
</div>
{{ entry.start_time.strftime('%d %b %Y %H:%M:%S') }}
</li>
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Submission Time</h5>
{% if entry.status == 'late' %}
<span class="badge bg-danger">Late</span>
{% endif %}
</div>
{{ entry.submission_time.strftime('%d %b %Y %H:%M:%S') }}
</li>
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Score</h5>
</div>
{{ entry.results.score }}&percnt;
</li>
<li class="list-group-item list-group-item-action {% if entry.results.grade == 'fail' %}list-group-item-danger {% elif entry.results.grade == 'merit' %} list-group-item-success {% endif %}">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Grade</h5>
</div>
{{ entry.results.grade[0]|upper }}{{ entry.results.grade[1:]}}
</li>
</ul>
<div class="site-footer mt-5">
These results were generated using the SKA RefTest web app on {{ now.strftime('%d %b %Y at %H:%M:%S') }}.
</div>
{% block footer %}{% endblock %}
</div>
</div>
</div>
{% endblock %}

1
ref-test/app/admin/templates/admin/components/client-alerts.html Normal file
View File

@ -0,0 +1 @@
<div id="alert-box" tabindex="-1"></div>

28
ref-test/app/admin/templates/admin/components/datatable.html Normal file
View File

@ -0,0 +1,28 @@
{% extends "admin/components/base.html" %}
{% block datatable_css %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.5.5/css/colReorder.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.2.0/css/fixedHeader.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/keytable/2.6.4/css/keyTable.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchbuilder/1.3.0/css/searchBuilder.dataTables.min.css"/>
{% endblock %}
{% block datatable_scripts %}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.5.5/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.2.0/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/keytable/2.6.4/js/dataTables.keyTable.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap5.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/searchbuilder/1.3.0/js/dataTables.searchBuilder.min.js"></script>
{% endblock %}

2
ref-test/app/admin/templates/admin/components/footer.html Normal file
View File

@ -0,0 +1,2 @@
<p>This web app was developed by Vivek Santayana. The source code for the web app, excluding any data pertaining to the questions in the quiz, is freely available at <a href="https://git.vsnt.uk/viveksantayana/ska-referee-test">Vivek&rsquo;s personal GIT repository</a> under an MIT License.</p>
<p>All questions in the test are &copy; The Scottish Korfball Association {{ now.year }}. All rights are reserved.</p>

4
ref-test/app/admin/templates/admin/components/input-forms.html Normal file
View File

@ -0,0 +1,4 @@
{% extends "admin/components/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block top_alerts %}
{% endblock %}

79
ref-test/app/admin/templates/admin/components/navbar.html Normal file
View File

@ -0,0 +1,79 @@
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a href="{{ url_for('admin_views.home') }}" class="navbar-brand mb-0 h1">RefTest (Beta) | Admin</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar"
aria-controls="navbar"
aria-expanded="false"
aria-label="Toggle Navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbar">
<ul class="navbar-nav">
{% if not check_login() %}
<li class="nav-item" id="nav-login">
<a href="{{ url_for('admin_auth.login') }}" id="link-login" class="nav-link">Log In</a>
</li>
{% endif %}
{% if check_login() %}
<li class="nav-item" id="nav-results">
<a href="{{ url_for('results._results') }}" id="link-results" class="nav-link">View Results</a>
</li>
<li class="nav-item" id="nav-tests">
<a href="{{ url_for('admin_views.tests') }}" id="link-tests" class="nav-link">Manage Exams</a>
</li>
<li class="nav-item dropdown" id="nav-settings">
<a
class="nav-link dropdown-toggle"
id="dropdown-account"
role="button"
href="{{ url_for('admin_views.settings') }}"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Settings
</a>
<ul
class="dropdown-menu"
aria-labelledby="dropdown-account"
>
<li>
<a href="{{ url_for('admin_views.users') }}" id="link-users" class="dropdown-item">Users</a>
</li>
<li>
<a href="{{ url_for('admin_views.questions') }}" id="link-questions" class="dropdown-item">Question Datasets</a>
</li>
</ul>
</li>
<li class="nav-item dropdown" id="nav-account">
<a
class="nav-link dropdown-toggle"
id="dropdown-account"
role="button"
href="{{ url_for('admin_auth.account') }}"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Account
</a>
<ul
class="dropdown-menu"
aria-labelledby="dropdown-account"
>
<li>
<a href="{{ url_for('admin_auth.account') }}" id="link-account" class="dropdown-item">Account Settings</a>
</li>
<li>
<a href="{{ url_for('admin_auth.logout') }}" id="link-logout" class="dropdown-item">Log Out</a>
</li>
</ul>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>

17
ref-test/app/admin/templates/admin/components/og-meta.html Normal file
View File

@ -0,0 +1,17 @@
<meta name="description" content="A web app for taking the Scottish Korfball Association Refereeing Theory Exam on-line." />
<meta property="og:locale" content="en_UK" />
<meta property="og:type" content="website" />
<meta property="og:description" content="A web app for taking the Scottish Korfball Association Refereeing Theory Exam on-line." />
<meta property="og:url" content="{{ url_for(request.endpoint, _external = True, **request.view_args) }}" />
<meta property="og:site_name" content="Scottish Korfball Association Referee Theory Exam" />
<meta property="og:image" content="{{ url_for('static', filename='favicon.png', _external = True) }}" />
<meta property="og:image:alt" content="Logo of the SKA Refereeing Exam App" />
<meta property="og:image:width" content="512" />
<meta property="og:image:height" content="512" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" content="A web app for taking the Scottish Korfball Association Refereeing Theory Exam on-line." />
<meta name="twitter:image" content="{{ url_for('static', filename='favicon.png', _external = True) }}" />
<meta name="twitter:image:alt" content="Logo of the SKA Refereeing Exam App" />
<meta name="twitter:creator" content="@viveksantayana" />
<meta name="twitter:site" content="@viveksantayana" />
<meta name="theme-color" content="#343a40" />

23
ref-test/app/admin/templates/admin/components/secondary-navs/tests.html Normal file
View File

@ -0,0 +1,23 @@
<div class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container-fluid">
<div class="expand navbar-expand justify-content-center" id="navbar_secondary">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('admin_views.tests', filter='active') }}">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('admin_views.tests', filter='scheduled') }}">Scheduled</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('admin_views.tests', filter='expired') }}">Expired</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('admin_views.tests', filter='all') }}">All</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('admin_views.tests', filter='create') }}">Create</a>
</li>
</ul>
</div>
</div>
</div>

43
ref-test/app/admin/templates/admin/components/server-alerts.html Normal file
View File

@ -0,0 +1,43 @@
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% set cookie_flash_flag = namespace(value=False) %}
{% for category, message in messages %}
{% if category == "error" %}
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<i class="bi bi-exclamation-triangle-fill" title="Error" aria-title="Error"></i>
{{ message|safe }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% elif category == "success" %}
<div class="alert alert-success alert-dismissible fade show" role="alert">
<i class="bi bi-check2-circle" title="Success" aria-title="Success"></i>
{{ message|safe }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% elif category == "warning" %}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<i class="bi bi-info-circle-fill" aria-title="Warning" title="Warning"></i>
{{ message|safe }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% elif category == "cookie_alert" %}
{% if not cookie_flash_flag.value %}
<div class="alert alert-primary alert-dismissible fade show" id="cookie-alert" role="alert">
<i class="bi bi-info-circle-fill" title="Cookie Alert" aria-title="Cookie Alert"></i>
{{ message|safe }}
<div class="d-flex justify-content-center w-100">
<button type="button" id="dismiss-cookie-alert" class="btn btn-success" data-bs-dismiss="alert" aria-label="Close">Accept</button>
</div>
</div>
{% set cookie_flash_flag.value = True %}
{% endif %}
{% else %}
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<i class="bi bi-info-circle-fill" title="Alert"></i>
{{ message|safe }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}
{% endfor %}
{% endif %}
{% endwith %}

148
ref-test/app/admin/templates/admin/index.html Normal file
View File

@ -0,0 +1,148 @@
{% extends "admin/components/base.html" %}
{% block content %}
<h1>Dashboard</h1>
<div class="container">
<div class="row">
<div class="col-sm">
<div class="card m-3">
<div class="card-body">
<h5 class="card-title">Current Exams</h5>
{% if current_tests %}
<div class="card-text">
<table class="table table-striped">
<thead>
<tr>
<th>
Exam Code
</th>
<th>
Expiry Date
</th>
</tr>
</thead>
<tbody>
{% for test in current_tests %}
<tr>
<td>
<a href="{{ url_for('admin_views.view_test', _id=test._id) }}">{{ '—'.join([test.test_code[:4], test.test_code[4:8], test.test_code[8:]]) }}</a>
</td>
<td>
{{ test.expiry_date.strftime('%d %b %Y') }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<a href="{{ url_for('admin_views.tests', filter='active') }}" class="btn btn-primary">View Exams</a>
{% else %}
<div class="alert alert-primary">
There are currently no active exams.
</div>
<a href="{{ url_for('admin_views.tests', filter='create') }}" class="btn btn-primary">Create Exam</a>
{% endif %}
</div>
</div>
</div>
<div class="col-sm">
<div class="card m-3">
<div class="card-body">
<h5 class="card-title">Recent Results</h5>
{% if recent_results %}
<div class="card-text">
<table class="table table-striped">
<thead>
<tr>
<th>
Name
</th>
<th>
Date Submitted
</th>
<th>
Result
</th>
</tr>
</thead>
<tbody>
{% for result in recent_results %}
<tr>
<td>
<a href="{{ url_for('admin_views.view_entry', _id=result._id) }}">{{ result.name.surname }}, {{ result.name.first_name }}</a>
</td>
<td>
{{ result.submission_time.strftime('%d %b %Y %H:%M') }}
</td>
<td>
{{ result.percent }}&percnt; ({{ result.results.grade }})
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<a href="{{ url_for('admin_views.view_entries') }}" class="btn btn-primary">View Results</a>
{% else %}
<div class="alert alert-primary">
There are currently no exam results to preview.
</div>
{% endif %}
</div>
</div>
</div>
</div>
<div class="row g-3">
<div class="col-sm">
<div class="card m-3">
<div class="card-body">
<h5 class="card-title">Upcoming Exams</h5>
{% if upcoming_tests %}
<div class="card-text">
<table class="table table-striped">
<thead>
<tr>
<th>
Exam Code
</th>
<th>
Expiry Date
</th>
</tr>
</thead>
<tbody>
{% for test in upcoming_tests %}
<tr>
<td>
<a href="{{ url_for('admin_views.view_test', _id=test._id) }}">{{ '—'.join([test.test_code[:4], test.test_code[4:8], test.test_code[8:]]) }}</a>
</td>
<td>
{{ test.expiry_date.strftime('%d %b %Y') }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<a href="{{ url_for('admin_views.tests', filter='scheduled') }}" class="btn btn-primary">View Exams</a>
{% else %}
<div class="alert alert-primary">
There are currently no upcoming exams.
</div>
<a href="{{ url_for('admin_views.tests', filter='create') }}" class="btn btn-primary">Create Exam</a>
{% endif %}
</div>
</div>
</div>
<div class="col-sm">
<div class="card m-3">
<div class="card-body">
<h5 class="card-title">Help</h5>
<p class="card-text">This web app was developed by Vivek Santayana. If there are any issues with the app, any bugs you need to report, or any features you would like to request, please feel free to <a href="https://git.vsnt.uk/viveksantayana/ska-referee-test/issues">open an issue at the Git Repository</a>.</p>
<a href="https://git.vsnt.uk/viveksantayana/ska-referee-test/issues" class="btn btn-primary">Open an Issue</a>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

188
ref-test/app/admin/templates/admin/result-detail.html Normal file
View File

@ -0,0 +1,188 @@
{% extends "admin/components/base.html" %}
{% block title %} SKA Referee Test | Detailed Results {% endblock %}
{% block content %}
{% include "admin/components/client-alerts.html" %}
<h1>Exam Results</h1>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6">
<ul class="list-group">
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Candidate</h5>
</div>
<h2>
{{ entry.name.surname }}, {{ entry.name.first_name }}
</h2>
</li>
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Email Address</h5>
</div>
{{ entry.email }}
</li>
{% if entry['club'] %}
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Club</h5>
</div>
{{ entry.club }}
</li>
{% endif %}
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Exam Code</h5>
</div>
{{ '—'.join([entry.test_code[:4], entry.test_code[4:8], entry.test_code[8:]]) }}
</li>
{% if entry['user_code'] %}
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">User Code</h5>
</div>
{{ entry.user_code }}
</li>
{% endif %}
{% if 'start_time' in entry %}
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Start Time</h5>
</div>
{{ entry.start_time.strftime('%d %b %Y %H:%M:%S') }}
</li>
{% endif %}
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Submission Time</h5>
{% if entry.status == 'late' %}
<span class="badge bg-danger">Late</span>
{% endif %}
</div>
{% if 'submission_time' in entry %}
{{ entry.submission_time.strftime('%d %b %Y %H:%M:%S') }}
{% else %}
Incomplete
{% endif %}
</li>
{% if 'results' in entry %}
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Score</h5>
</div>
{{ entry.results.score }}&percnt;
</li>
<li class="list-group-item list-group-item-action {% if entry.results.grade == 'fail' %}list-group-item-danger {% elif entry.results.grade == 'merit' %} list-group-item-success {% endif %}">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Grade</h5>
</div>
{{ entry.results.grade[0]|upper }}{{ entry.results.grade[1:]}}
</li>
{% endif %}
</ul>
{% if 'results' in entry %}
<div class="accordion" id="results-breakdown">
<div class="accordion-item">
<h2 class="accordion-header" id="by-category">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#by-category-breakdown" aria-expanded="false" aria-controls="by-category-breakdown">
Score By Categories
</button>
</h2>
<div id="by-category-breakdown" class="accordion-collapse collapse" aria-labelledby="by-category" data-bs-parent="#results-breakdown">
<div class="accordion-body">
<table class="table table-striped">
<thead>
<tr>
<th>
Category
</th>
<th>
Score
</th>
<th>
Max
</th>
</tr>
</thead>
<tbody>
{% for tag, scores in entry.results.tags.items() %}
<tr>
<td>
{{ tag }}
</td>
<td>
{{ scores.scored }}
</td>
<td>
{{scores.max}}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="by-question">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#by-question-breakdown" aria-expanded="false" aria-controls="by-question-breakdown">
View All Answers
</button>
</h2>
<div id="by-question-breakdown" class="accordion-collapse collapse" aria-labelledby="by-question" data-bs-parent="#results-breakdown">
<div class="accordion-body">
<table class="table table-striped">
<thead>
<tr>
<th>
Question
</th>
<th>
Answer
</th>
</tr>
</thead>
<tbody>
{% for question, answer in entry.answers.items() %}
<tr>
<td>
{{ question }}
</td>
<td>
{{ answer }}
{% if not correct[question] == answer %}
<span class="badge badge-pill bg-danger badge-danger">Incorrect</span>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endif %}
<div class="container justify-content-center">
<div class="row">
<a href="#" class="btn btn-primary result-action-buttons" data-result-action="generate" data-_id="{{ entry._id }}">
<i class="bi bi-printer-fill button-icon"></i>
Printable Version
</a>
</div>
<div class="row">
{% if entry.status == 'late' %}
<a href="#" class="btn btn-warning result-action-buttons" data-result-action="override" data-_id="{{ entry._id }}">
<i class="bi bi-clock-history button-icon"></i>
Allow Late Entry
</a>
{% endif %}
<a href="#" class="btn btn-danger result-action-buttons" data-result-action="delete" data-_id="{{ entry._id }}">
<i class="bi bi-trash-fill button-icon"></i>
Delete Result
</a>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

138
ref-test/app/admin/templates/admin/results.html Normal file
View File

@ -0,0 +1,138 @@
{% extends "admin/components/datatable.html" %}
{% block title %} SKA Referee Test | View Results {% endblock %}
{% block content %}
{% include "admin/components/client-alerts.html" %}
<h1>View Results</h1>
{% if entries %}
<table id="results-table" class="table table-striped" style="width:100%">
<thead>
<tr>
<th data-priority="1">
Name
</th>
<th data-priority="4">
Club
</th>
<th data-priority="5">
Exam Code
</th>
<th data-priority="3">
Status
</th>
<th data-priority="4">
Submitted
</th>
<th data-priority="2">
Result
</th>
<th data-priority="3">
Grade
</th>
<th data-priority="1">
Details
</th>
</tr>
</thead>
<tbody>
{% for entry in entries %}
<tr class="table-row">
<td>
{{ entry.name.surname }}, {{ entry.name.first_name }}
</td>
<td>
{% if 'club' in entry %}
{{ entry.club }}
{% endif %}
</td>
<td>
{{ '—'.join([entry.test_code[:4], entry.test_code[4:8], entry.test_code[8:]]) }}
</td>
<td>
{% if 'status' in entry %}
{{ entry.status }}
{% endif %}
</td>
<td>
{% if 'submission_time' in entry %}
{{ entry.submission_time.strftime('%d %b %Y') }}
{% endif %}
</td>
<td>
{% if 'results' in entry %}
{{ entry.results.score }}&percnt;
{% endif %}
</td>
<td>
{% if 'results' in entry %}
{{ entry.results.grade }}
{% endif %}
</td>
<td class="row-actions">
<a
href="{{ url_for('admin_views.view_entry', _id = entry._id ) }}"
class="btn btn-primary entry-details"
data-_id="{{entry._id}}"
title="View Details"
>
<i class="bi bi-file-medical-fill button-icon"></i>
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<div class="alert alert-primary alert-db-empty">
<i class="bi bi-info-circle-fill" aria-title="Alert" title="Alert"></i>
There are no exam attempts to view.
</div>
{% endif %}
{% endblock %}
{% if entries %}
{% block custom_data_script %}
<script>
$(document).ready(function() {
$('#results-table').DataTable({
'searching': false,
'columnDefs': [
{'sortable': false, 'targets': [7]},
{'searchable': false, 'targets': [7]}
],
'order': [[4, 'desc'], [0, 'asc']],
'buttons': [
{
extend: 'print',
exportOptions: {
columns: [0, 1, 3, 4, 5, 6]
}
},
{
extend: 'excel',
exportOptions: {
columns: [0, 1, 3, 4, 5, 6]
}
},
{
extend: 'pdf',
exportOptions: {
columns: [0, 1, 3, 4, 5, 6]
}
}
],
'responsive': 'true',
'colReorder': 'true',
'fixedHeader': 'true',
'searchBuilder': {
depthLimit: 2,
columns: [1, 5, 6],
},
dom: 'BQlfrtip'
});
// $('.buttons-pdf').html('<span class="glyphicon glyphicon-file" data-toggle="tooltip" title="Export To Excel"/>') -->
} );
$('#results-table').show();
$(window).trigger('resize');
</script>
{% endblock %}
{% endif %}

44
ref-test/app/admin/templates/admin/settings/delete-user.html Normal file
View File

@ -0,0 +1,44 @@
{% extends "admin/components/input-forms.html" %}
{% block content %}
<div class="form-container">
<form name="form-delete-user" class="form-display form-post" action="{{ url_for(request.endpoint, **request.view_args) }}" data-rel-success="{{ url_for('admin_views.users') }}">
{% include "admin/components/server-alerts.html" %}
<h2 class="form-heading">Delete User &lsquo;{{ user.username }}&rsquo;?</h2>
{{ form.hidden_tag() }}
<p>This action cannot be undone. Deleting an account will mean {{ user.username }} will no longer be able to log in to the admin console.</p>
<p>Are you sure you want to proceed?</p>
<div class="form-label-group">
{{ form.password(class_="form-control", placeholder="Confirm Your Password", autofocus=true) }}
{{ form.password.label }}
</div>
<div class="form-check">
{{ form.notify(class_="form-check-input") }}
{{ form.notify.label }}
</div>
{% include "admin/components/client-alerts.html" %}
<div class="container form-submission-button">
<div class="row">
<div class="col text-center">
<a href="{{ url_for('admin_views.users') }}" autofocus="true" class="btn btn-md btn-primary btn-block" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
<span>
Cancel
</span>
</a>
<button class="btn btn-md btn-danger btn-block" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person-x-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm6.146-2.854a.5.5 0 0 1 .708 0L14 6.293l1.146-1.147a.5.5 0 0 1 .708.708L14.707 7l1.147 1.146a.5.5 0 0 1-.708.708L14 7.707l-1.146 1.147a.5.5 0 0 1-.708-.708L13.293 7l-1.147-1.146a.5.5 0 0 1 0-.708z"></path>
</svg>
<span>
Delete
</span>
</button>
</div>
</div>
</div>
</form>
</div>
{% endblock %}

93
ref-test/app/admin/templates/admin/settings/index.html Normal file
View File

@ -0,0 +1,93 @@
{% extends "admin/components/base.html" %}
{% block title %}Settings — SKA Referee Test | Admin Console{% endblock %}
{% block content %}
<h1>
Settings
</h1>
<div class="container">
<div class="row">
<div class="col-sm">
<div class="card m-3">
<div class="card-body">
<h5 class="card-title">Admin Users</h5>
<div class="card-text">
<table class="table table-striped">
<thead>
<tr>
<th>
Username
</th>
<th>
Email Address
</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td>
<a href="
{% if user._id == get_id_from_cookie() %}
{{ url_for('admin_auth.account') }}
{% else %}
{{ url_for('admin_views.update_user', _id=user._id) }}
{% endif%}
">{{ user.username }}</a>
</td>
<td>
<a href="mailto:{{ user.email }}">{{ user.email }}</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<a href="{{ url_for('admin_views.users') }}" class="btn btn-primary">Manage Users</a>
</div>
</div>
</div>
<div class="col-sm">
<div class="card m-3">
<div class="card-body">
<h5 class="card-title">Question Datasets</h5>
{% if datasets %}
<div class="card-text">
<table class="table table-striped">
<thead>
<tr>
<th>
File Name
</th>
<th>
Exams
</th>
</tr>
</thead>
<tbody>
{% for dataset in datasets %}
<tr>
<td>
{{ dataset.filename }}
</td>
<td>
{{ dataset.use }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<a href="{{ url_for('admin_views.questions') }}" class="btn btn-primary">Manage Datasets</a>
{% else %}
<div class="alert alert-primary">
There are currently no question datasets uploaded.
</div>
<a href="{{ url_for('admin_views.questions') }}" class="btn btn-primary">Upload Dataset</a>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}

127
ref-test/app/admin/templates/admin/settings/questions.html Normal file
View File

@ -0,0 +1,127 @@
{% extends "admin/components/datatable.html" %}
{% block title %} SKA Referee Test | Upload Questions {% endblock %}
{% block content %}
{% include "admin/components/client-alerts.html" %}
<h1>Manage Question Datasets</h1>
{% if data %}
<table id="question-datasets-table" class="table table-striped" style="width:100%">
<thead>
<tr>
<th>
</th>
<th data-priority="1">
File Name
</th>
<th data-priority="2">
Uploaded
</th>
<th data-priority="3">
Author
</th>
<th data-priority="3">
Exams
</th>
<th data-priority="1">
Actions
</th>
</tr>
</thead>
<tbody>
{% for element in data %}
<tr class="table-row">
<td>
{% if element.filename == default %}
<div class="text-success" title="Default Dataset">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi success bi-caret-right-fill" viewBox="0 0 16 16">
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
</svg>
</div>
{% endif %}
</td>
<td>
{{ element.filename }}
</td>
<td>
{{ element.timestamp.strftime('%d %b %Y') }}
</td>
<td>
{{ element.author }}
</td>
<td>
{{ element.use }}
</td>
<td class="row-actions">
<a
href="#"
class="btn btn-primary edit-question-dataset {% if element.filename == default %}disabled{% endif %}"
data-filename="{{ element.filename }}"
data-action="default"
title="Make Default"
>
<i class="bi bi-file-earmark-text-fill button-icon"></i>
</button>
<a
href="#"
class="btn btn-danger edit-question-dataset {% if element.filename == default %}disabled{% endif %}"
data-filename="{{ element.filename }}"
data-action="delete"
title="Delete Dataset"
>
<i class="bi bi-file-earmark-excel-fill button-icon"></i>
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<div class="alert alert-primary alert-db-empty">
<i class="bi bi-info-circle-fill" aria-title="Alert" title="Alert"></i>
There are no question datasets uploaded. Please use the panel below to upload a new question dataset.
</div>
{% endif %}
<div class="form-container">
<form name="form-upload-questions" class="form-display" action="{{ url_for(request.endpoint, **request.view_args) }}" data-rel-success="" enctype="multipart/form-data">
<h2 class="form-heading">Upload Question Dataset</h2>
{{ form.hidden_tag() }}
<div class="form-upload">
{{ form.data_file() }}
</div>
<div class="form-check">
{{ form.default(class_="form-check-input") }}
{{ form.default.label }}
</div>
<div class="container form-submission-button">
<div class="row">
<div class="col text-center">
<button title="Create User" class="btn btn-md btn-success btn-block" type="submit">
<i class="bi bi-file-earmark-arrow-up-fill button-icon"></i>
Upload Dataset
</button>
</div>
</div>
</div>
</form>
</div>
{% endblock %}
{% if data %}
{% block custom_data_script %}
<script>
$(document).ready(function() {
$('#question-datasets-table').DataTable({
'columnDefs': [
{'sortable': false, 'targets': [0,5]},
{'searchable': false, 'targets': [0,4,5]}
],
'order': [[2, 'desc'], [3, 'asc']],
'responsive': 'true',
'fixedHeader': 'true',
});
} );
$('#question-datasets-table').show();
$(window).trigger('resize');
</script>
{% endblock %}
{% endif %}

57
ref-test/app/admin/templates/admin/settings/update-user.html Normal file
View File

@ -0,0 +1,57 @@
{% extends "admin/components/input-forms.html" %}
{% block content %}
<div class="form-container">
<form name="form-update-user" class="form-display form-post" action="{{ url_for(request.endpoint, **request.view_args) }}" data-rel-success="{{ url_for('admin_views.users') }}">
{% include "admin/components/server-alerts.html" %}
<h2 class="form-heading">Update User &lsquo;{{ user.username }}&rsquo;</h2>
{{ form.hidden_tag() }}
<div class="form-label-group">
{{ form.email(class_="form-control", placeholder="Email Address", value = user.email) }}
{{ form.email.label }}
</div>
<div class="form-label-group">
{{ form.password(class_="form-control", placeholder="Password") }}
{{ form.password.label }}
</div>
<div class="form-label-group">
{{ form.password_reenter(class_="form-control", placeholder="Password") }}
{{ form.password_reenter.label }}
</div>
<div class="form-check">
{{ form.notify(class_="form-check-input") }}
{{ form.notify.label }}
</div>
<div class="form-label-group">
Please confirm <strong>your password</strong> before committing any changes to a user account.
</div>
<div class="form-label-group">
{{ form.user_password(class_="form-control", placeholder="Your Password", value = user.email) }}
{{ form.user_password.label }}
</div>
{% include "admin/components/client-alerts.html" %}
<div class="container form-submission-button">
<div class="row">
<div class="col text-center">
<a href="{{ url_for('admin_views.users') }}" class="btn btn-md btn-danger btn-block" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
<span>
Cancel
</span>
</a>
<button class="btn btn-md btn-primary btn-block" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person-lines-fill" viewBox="0 0 16 16">
<path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"/>
</svg>
<span>
Update
</span>
</button>
</div>
</div>
</div>
</form>
</div>
{% endblock %}

1
ref-test/app/admin/templates/admin/settings/upload-questions.html Normal file
View File

@ -0,0 +1 @@
{% extends "admin/components/base.html" %}

125
ref-test/app/admin/templates/admin/settings/users.html Normal file
View File

@ -0,0 +1,125 @@
{% extends "admin/components/datatable.html" %}
{% block title %} SKA Referee Test | Manage Users {% endblock %}
{% block content %}
<h1>Manage Users</h1>
<table id="user-table" class="table table-striped" style="width:100%">
<thead>
<tr>
<th>
</th>
<th data-priority="1">
Username
</th>
<th>
Email Address
</th>
<th data-priority="1">
Actions
</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr class="table-row">
<td>
{% if user._id == get_id_from_cookie() %}
<div class="text-success" title="Current User">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi success bi-caret-right-fill" viewBox="0 0 16 16">
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
</svg>
</div>
{% endif %}
</td>
<td>
{{ user.username }}
</td>
<td>
{{ user.email }}
</td>
<td class="row-actions">
<a
href="
{% if not user._id == get_id_from_cookie() %}
{{ url_for('admin_views.update_user', _id = user._id ) }}
{% else %}
{{ url_for('admin_auth.account') }}
{% endif %}
"
class="btn btn-primary"
title="Update User"
>
<i class="bi bi-person-lines-fill button-icon"></i>
</a>
<a
href="
{% if not user._id == get_id_from_cookie() %}
{{ url_for('admin_views.delete_user', _id = user._id ) }}
{% else %}
#
{% endif %}
"
class="btn btn-danger {% if user._id == get_id_from_cookie() %} disabled {% endif %}"
title="Delete User"
{% if user._id == get_id_from_cookie() %} onclick="return false" {% endif %}
>
<i class="bi bi-person-x-fill button-icon"></i>
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="form-container">
<form name="form-create-user" class="form-display form-post" action="{{ url_for(request.endpoint, **request.view_args) }}" data-rel-success="">
<h2 class="form-heading">Create User</h2>
{{ form.hidden_tag() }}
<div class="form-label-group">
{{ form.username(class_="form-control", placeholder="Enter Username") }}
{{ form.username.label }}
</div>
<div class="form-label-group">
{{ form.email(class_="form-control", placeholder="Enter Email") }}
{{ form.email.label }}
</div>
<div class="form-label-group">
If you do not enter a password, a random one will be generated.
</div>
<div class="form-label-group">
{{ form.password(class_="form-control", placeholder="Enter Password") }}
{{ form.password.label }}
</div>
{% include "admin/components/client-alerts.html" %}
<div class="container form-submission-button">
<div class="row">
<div class="col text-center">
<button title="Create User" class="btn btn-md btn-success btn-block" type="submit">
<i class="bi bi-person-plus-fill button-icon"></i>
Create User
</button>
</div>
</div>
</div>
</form>
</div>
{% endblock %}
{% block custom_data_script %}
<script>
$(document).ready(function() {
$('#user-table').DataTable({
'columnDefs': [
{'sortable': false, 'targets': [0,3]}
],
'order': [[1, 'asc'], [2, 'asc']],
'buttons': [
'copy', 'excel', 'pdf'
],
'responsive': 'true',
'colReorder': 'true',
'fixedHeader': 'true'
});
} );
$('#user-table').show();
$(window).trigger('resize');
</script>
{% endblock %}

184
ref-test/app/admin/templates/admin/test.html Normal file
View File

@ -0,0 +1,184 @@
{% extends "admin/components/base.html" %}
{% block title %} SKA Referee Test | Edit Exam {% endblock %}
{% block content %}
<h1>Edit Exam</h1>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6">
<ul class="list-group">
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Exam Code</h5>
</div>
<h2>
{{ '—'.join([test.test_code[:4], test.test_code[4:8], test.test_code[8:]]) }}
</h2>
</li>
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Dataset</h5>
</div>
{{ test.dataset }}
</li>
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Created By</h5>
</div>
{{ test.creator }}
</li>
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Date Created</h5>
</div>
{{ test.date_created.strftime('%d %b %Y') }}
</li>
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Start Date</h5>
</div>
{{ test.start_date.strftime('%d %b %Y') }}
</li>
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Expiry Date</h5>
</div>
{{ test.expiry_date.strftime('%d %b %Y') }}
</li>
<li class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Time Limit</h5>
</div>
{% if test.time_limit == None -%}
None
{% elif test.time_limit == 60 -%}
1 hour
{% elif test.time_limit == 90 -%}
1 hour 30 min
{% elif test.time_limit == 120 -%}
2 hours
{% else -%}
{{ test.time_limit }}
{% endif %}
</li>
<div class="accordion" id="test-info-detail">
{% if 'entries' in test and test.entries|length > 0 %}
<div class="accordion-item">
<h2 class="accordion-header" id="test-entries">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#test-entries-list" aria-expanded="false" aria-controls="test-entries-list">
List Test Entries
</button>
</h2>
<div id="test-entries-list" class="accordion-collapse collapse" aria-labelledby="test-entries" data-bs-parent="#test-info-detail">
<div class="accordion-body">
<table class="table table-striped">
<tbody>
{% for entry in test.entries %}
<tr>
<td>
<a href="{{ url_for('admin_views.view_entry', _id=entry) }}" >Entry {{ loop.index }}</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endif %}
{% if 'time_adjustments' in test and test.time_adjustments|length > 0 %}
<div class="accordion-item">
<h2 class="accordion-header" id="test-adjustments">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#test-adjustments-list" aria-expanded="false" aria-controls="test-adjustments-list">
List Time Adjustments
</button>
</h2>
<div id="test-adjustments-list" class="accordion-collapse collapse" aria-labelledby="test-adjustments" data-bs-parent="#test-info-detail">
<div class="accordion-body">
<table class="table table-striped">
<thead>
<tr>
<th>
User Code
</th>
<th>
Adjustment (Minutes)
</th>
<th>
Delete
</th>
</tr>
</thead>
<tbody>
{% for key, value in test.time_adjustments.items() %}
<tr>
<td>
{{ key }}
</td>
<td>
{{ value }}
</td>
<td>
<a href="javascript::void(0);" class="btn btn-danger adjustment-delete" title="Delete Adjustment" data-user_code="{{ key }}">
<i class="bi bi-slash-circle-fill button-icon"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endif %}
{% if not test.time_limit == None %}
<div class="accordion-item">
<h2 class="accordion-header" id="test-add-adjustments">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#test-adjustments-add" aria-expanded="false" aria-controls="test-adjustments-add">
Add Time Adjustments
</button>
</h2>
<div id="test-adjustments-add" class="accordion-collapse collapse" aria-labelledby="test-add-adjustments" data-bs-parent="#test-info-detail">
<div class="accordion-body">
<form name="form-add-adjustment" class="form-display form-post" action="{{ url_for(request.endpoint, **request.view_args) }}" data-rel-success="">
{{ form.hidden_tag() }}
<div class="form-label-group">
{{ form.time(class_="form-control", placeholder="Enter Username") }}
{{ form.time.label }}
</div>
<div class="container form-submission-button">
<div class="row">
<div class="col text-center">
<button title="Add Time Adjustment" class="btn btn-md btn-success btn-block" type="submit">
<i class="bi bi-clock-history button-icon"></i>
Add Time Adjustment
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
{% endif %}
</div>
</ul>
<div class="row">
{% include "admin/components/client-alerts.html" %}
</div>
<div class="container justify-content-center">
<div class="row">
<a href="#" class="btn btn-warning test-action" data-action="close" data-_id="{{ test._id }}">
<i class="bi bi-hourglass button-icon"></i>
Close Exam
</a>
<a href="#" class="btn btn-danger test-action" data-action="delete" data-_id="{{ test._id }}">
<i class="bi bi-file-earmark-excel-fill button-icon"></i>
Delete Exam
</a>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

167
ref-test/app/admin/templates/admin/tests.html Normal file
View File

@ -0,0 +1,167 @@
{% extends "admin/components/datatable.html" %}
{% block title %} SKA Referee Test | Manage Exams {% endblock %}
{% block content %}
{% include "admin/components/client-alerts.html" %}
<h1>Manage Exams</h1>
{% include "admin/components/secondary-navs/tests.html" %}
<h2>{{ display_title }}</h2>
{% if tests %}
<table id="active-test-table" class="table table-striped" style="width:100%">
<thead>
<tr>
<th data-priority="1">
Start Date
</th>
<th data-priority="1">
Exam Code
</th>
<th data-priority="2">
Expiry Date
</th>
<th data-priority="3">
Time Limit
</th>
<th data-priority="4">
Entries
</th>
<th data-priority="1">
Actions
</th>
</tr>
</thead>
<tbody>
{% for test in tests %}
<tr class="table-row">
<td>
{{ test.start_date.strftime('%d %b %Y') }}
</td>
<td>
{{ '—'.join([test.test_code[:4], test.test_code[4:8], test.test_code[8:]]) }}
</td>
<td>
{{ test.expiry_date.strftime('%d %b %Y') }}
</td>
<td>
{% if test.time_limit == None -%}
None
{% elif test.time_limit == 60 -%}
1 hour
{% elif test.time_limit == 90 -%}
1 hour 30 min
{% elif test.time_limit == 120 -%}
2 hours
{% else -%}
{{ test.time_limit }}
{% endif %}
</td>
<td>
{{ test.entries|length }}
</td>
<td class="row-actions">
<a
href="#"
class="btn btn-primary test-action"
data-_id="{{test._id}}"
title="Edit Exam"
data-action="edit"
>
<i class="bi bi-file-earmark-text-fill button-icon"></i>
</a>
<a
href="#"
class="btn btn-danger test-action"
data-_id="{{test._id}}"
title="Delete Exam"
data-action="delete"
>
<i class="bi bi-file-earmark-excel-fill button-icon"></i>
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% elif not filter == 'create' %}
<div class="alert alert-primary alert-db-empty">
<i class="bi bi-info-circle-fill" aria-title="Alert" title="Alert"></i>
{{ error_none }}
</div>
{% endif %}
{% if form %}
<div class="form-container">
<form name="form-create-test" class="form-display form-post" action="{{ url_for(request.endpoint, **request.view_args) }}" data-rel-success="/admin/tests/">
<h2 class="form-heading">Create Exam</h2>
{{ form.hidden_tag() }}
<div class="form-date-input">
{{ form.start_date(placeholder="Enter Start Date", class_ = "datepicker") }}
{{ form.start_date.label }}
</div>
<div class="form-date-input">
{{ form.expiry_date(placeholder="Enter Expiry Date", class_ = "datepicker") }}
{{ form.expiry_date.label }}
</div>
<div class="form-select-input">
{{ form.time_limit(placeholder="Select Time Limit") }}
{{ form.time_limit.label }}
</div>
<div class="form-select-input">
{{ form.dataset(placeholder="Select Question Dataset") }}
{{ form.dataset.label }}
</div>
{% include "admin/components/client-alerts.html" %}
<div class="container form-submission-button">
<div class="row">
<div class="col text-center">
<button title="Create Exam" class="btn btn-md btn-success btn-block" type="submit">
<i class="bi bi-file-earmark-plus-fill button-icon"></i>
Create Exam
</button>
</div>
</div>
</div>
</form>
</div>
{% endif %}
{% endblock %}
{% if tests %}
{% block custom_data_script %}
<script>
$(document).ready(function() {
$('#active-test-table').DataTable({
'columnDefs': [
{'sortable': false, 'targets': [1,3,5]},
{'searchable': false, 'targets': [3,5]}
],
'order': [[0, 'desc'], [2, 'asc']],
dom: 'lfBrtip',
'buttons': [
{
extend: 'print',
exportOptions: {
columns: [0, 1, 2, 3]
}
},
{
extend: 'excel',
exportOptions: {
columns: [0, 1, 2, 3]
}
},
{
extend: 'pdf',
exportOptions: {
columns: [0, 1, 2, 3]
}
},
],
'responsive': 'true',
'colReorder': 'true',
'fixedHeader': 'true',
});
// $('.buttons-pdf').html('<span class="glyphicon glyphicon-file" data-toggle="tooltip" title="Export To Excel"/>') -->
} );
$('#active-test-table').show();
$(window).trigger('resize');
</script>
{% endblock %}
{% endif %}

158
ref-test/app/quiz/static/css/quiz.css Normal file
View File

@ -0,0 +1,158 @@
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 23, 2021 */
@font-face {
font-family: 'opendyslexic3bold';
src: url('../fonts/opendyslexic3-bold-webfont.woff2') format('woff2'),
url('../fonts/opendyslexic3-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'opendyslexic3regular';
src: url('../fonts/opendyslexic3-regular-webfont.woff2') format('woff2'),
url('../fonts/opendyslexic3-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'opendyslexicmonoregular';
src: url('../fonts/opendyslexicmono-regular-webfont.woff2') format('woff2'),
url('../fonts/opendyslexicmono-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Class Definitions */
.form-quiz-configure {
width: 100%;
padding: 15px;
margin: auto;
}
.q-f-opendyslexic {
font-family: 'opendyslexic3bold';
}
.q-f-comicsans {
font-family: 'Comic Sans MS', 'Comic Sans';
}
.q-f-osdefault {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.q-f-verdana {
font-family: Verdana, sans-serif;
}
.q-f-tahoma {
font-family: Tahoma, sans-serif;
}
.q-f-arial {
font-family: Arial, Helvetica, sans-serif;
}
.q-f-12pt {
font-size: 12pt;
}
.q-f-14pt {
font-size: 14pt;
}
.q-f-16pt {
font-size: 16pt;
}
.q-f-18pt {
font-size: 18pt;
}
.q-settings-element {
margin-bottom: 2rem;
}
.q-bg-light-1 {
background-color: beige;
}
.q-bg-light-2 {
background-color: #EBE3E1;
}
#sample-question {
margin: 2rem auto;
padding: 2rem;
}
.question-container {
margin: 2rem auto;
padding: 2 rem;
}
.question-title {
margin: 2rem 0;
}
.question-header {
margin: 1rem auto 3rem;
width: 90%;
}
.btn-quiz-control {
width: fit-content;
}
#q-topbar a.btn {
padding: 2px 6px 0px 6px;
font-size: 14pt;
height: fit-content;
width: fit-content;
margin: 0px 4px;
}
.q-timer {
padding-top: 0px;
margin: 0px auto;
font-size: 16pt;
}
.q-navigator-button {
margin: 5px;
}
.control-button-container {
width: fit-content;
margin: 2rem auto;
}
.control-button-container a {
width: fit-content;
margin: 0 5px;
}
.navigator-help {
margin: 4rem auto;
}
#navigator-container {
margin-bottom: 2rem;
}
/* Layout for Mobile Devices */
@media only screen and (max-width: 576px) {
body {
padding-top: 140px;
}
.navbar .container {
justify-content: space-evenly;
}
}

218
ref-test/app/quiz/static/css/style.css Normal file
View File

@ -0,0 +1,218 @@
body {
padding: 80px 0;
line-height: 1.5;
font-size: 14pt;
}
#cookie-alert {
padding-right: 16px;
}
#dismiss-cookie-alert {
margin-top: 16px;
width: fit-content;
}
.button-container {
margin: 2rem auto;
width: fit-content;
}
.instruction-container {
margin: 2rem auto;
}
.site-footer {
background-color: lightgray;
font-size: small;
}
.site-footer p {
margin: 0;
}
.quiz-container {
max-width: 720px;
}
.form-container {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
}
.form-quiz-start {
width: 100%;
max-width: 420px;
padding: 15px;
margin: auto;
}
.form-heading {
margin-bottom: 2rem;
}
.form-label-group {
position: relative;
margin-bottom: 2rem;
}
.form-label-group input,
.form-label-group label {
padding: var(--input-padding-y) var(--input-padding-x);
font-size: 16pt;
}
.form-label-group label {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
margin-bottom: 0; /* Override default `<label>` margin */
line-height: 1.5;
color: #495057;
cursor: text; /* Match the input under the label */
border: 1px solid transparent;
border-radius: .25rem;
transition: all .1s ease-in-out;
z-index: -1;
}
.form-label-group input {
background-color: transparent;
border: none;
border-radius: 0%;
border-bottom: 2px solid #585858;
}
.form-label-group input:active, .form-label-group input:focus {
background-color: transparent;
}
.form-label-group input::-webkit-input-placeholder {
color: transparent;
}
.form-label-group input:-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-moz-placeholder {
color: transparent;
}
.form-label-group input::placeholder {
color: transparent;
}
.form-label-group input:not(:placeholder-shown) {
padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
padding-bottom: calc(var(--input-padding-y) / 3);
}
.form-label-group input:not(:placeholder-shown) ~ label {
padding-top: calc(var(--input-padding-y) / 3);
padding-bottom: calc(var(--input-padding-y) / 3);
font-size: 12px;
color: #777;
}
.form-check-margin {
margin-bottom: 2rem;
}
.checkbox input {
transform: scale(1.5);
margin-right: 1rem;
}
.signin-forgot-password {
font-size: 14pt;
}
.form-submission-button {
margin-bottom: 2rem;
}
.form-submission-button button, .form-submission-button a {
margin: 1rem;
vertical-align: middle;
}
.form-submission-button button span, .form-submission-button button svg, .form-submission-button a span, .form-submission-button a svg {
margin: 0 2px;
}
.results-name {
margin: 3rem auto;
}
.results-name .surname {
font-variant: small-caps;
font-size: 24pt;
}
.results-score {
margin: 2rem auto;
width: fit-content;
font-size: 36pt;
}
.results-score::after {
content: '%';
}
.results-grade {
margin: 2rem auto;
width: fit-content;
font-size: 26pt;
}
.button-icon {
font-size: 20px;
margin-right: 2px;
}
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
transition: background-color 5000s ease-in-out 0s;
}
/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
.form-label-group label {
display: none;
}
.form-label-group input::-ms-input-placeholder {
color: #777;
}
}
/* Fallback for IE
-------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.form-label-group label {
display: none;
}
.form-label-group input:-ms-input-placeholder {
color: #777;
}
}

BIN
ref-test/app/quiz/static/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
ref-test/app/quiz/static/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

BIN
ref-test/app/quiz/static/fonts/opendyslexic3-bold-webfont.woff Normal file
View File

Binary file not shown.

BIN
ref-test/app/quiz/static/fonts/opendyslexic3-bold-webfont.woff2 Normal file
View File

Binary file not shown.

BIN
ref-test/app/quiz/static/fonts/opendyslexic3-regular-webfont.woff Normal file
View File

Binary file not shown.

BIN
ref-test/app/quiz/static/fonts/opendyslexic3-regular-webfont.woff2 Normal file
View File

Binary file not shown.

BIN
ref-test/app/quiz/static/fonts/opendyslexicmono-regular-webfont.woff Normal file
View File

Binary file not shown.

BIN
ref-test/app/quiz/static/fonts/opendyslexicmono-regular-webfont.woff2 Normal file
View File

Binary file not shown.

0
ref-test/app/quiz/static/fonts/stylesheet.css Normal file
View File

2
ref-test/app/quiz/static/js/jquery-3.6.0.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

650
ref-test/app/quiz/static/js/quiz.js Normal file
View File

@ -0,0 +1,650 @@
// Bind Listeners
$("input[name='font-select']").change(function(){
let $choice = $(this).val();
set_font($choice);
});
$("input[name='font-size']").change(function(){
let $choice = $(this).val();
set_font_size($choice);
});
$("input[name='bg-select']").change(function(){
let $choice = $(this).val();
set_bg_colour($choice);
});
$(".bg-select-area").click(function(event){
$(this).find("input[name='bg-select']").prop("checked", true).change();
});
$("#btn-toggle-navigator").click(function(event){
check_answered();
update_navigator();
if ($quiz_navigator.is(":hidden")) {
if ($quiz_settings.is(":visible")) {
toggle_settings = true;
$quiz_settings.fadeOut();
}
$quiz_render.fadeOut();
$quiz_navigator.fadeIn();
$(".navigator-text").fadeIn();
$(".review-text").fadeOut();
toggle_navigator = false;
$(window).scrollTop(0);
} else {
$quiz_navigator.fadeOut();
if (toggle_settings) {
$quiz_settings.fadeIn();
$(window).scrollTop(0);
toggle_settings = false;
} else {
$quiz_render.fadeIn();
$(window).scrollTop(0);
}
}
event.preventDefault();
});
$("#btn-toggle-settings").click(function(event){
if (($quiz_settings).is(":hidden")) {
if ($quiz_navigator.is(":visible")) {
toggle_navigator = true;
$quiz_navigator.fadeOut();
}
$quiz_render.fadeOut();
$quiz_settings.fadeIn();
$(window).scrollTop(0);
toggle_settings = false;
} else {
$quiz_settings.fadeOut();
if (toggle_navigator) {
$quiz_navigator.fadeIn();
toggle_navigator = false;
$(window).scrollTop(0);
} else {
$quiz_render.fadeIn();
$(window).scrollTop(0);
}
}
event.preventDefault();
});
$(".btn-quiz-return").click(function(event){
$quiz_navigator.fadeOut();
$quiz_settings.fadeOut();
$quiz_render.fadeIn();
$(window).scrollTop(0);
toggle_settings = false;
toggle_navigator = false;
event.preventDefault();
});
$(".btn-dummy").click(function(event){
event.preventDefault();
});
$("#navigator-container").on("click", ".q-navigator-button", function(event){
check_answered();
update_navigator();
current_question = parseInt($(this).prop("name"));
$quiz_navigator.fadeOut();
$quiz_render.fadeIn();
$question_title.focus();
$(window).scrollTop(0);
toggle_navigator = false;
toggle_settings = false;
render_question();
check_flag();
event.preventDefault();
});
$(".q-question-nav").click(function(event){
check_answered();
update_navigator();
if ($(this).prop("id") == "q-nav-next") {
if (current_question < questions.length) {
current_question ++;
}
} else if ($(this).prop("id") == "q-nav-prev") {
if (current_question > 0) {
current_question --;
}
} else if ($(this).hasClass("q-navigator-button")) {
current_question = $(this).prop("name");
$quiz_render.fadeIn();
$quiz_navigator.fadeOut();
toggle_navigator = false;
toggle_settings = false;
}
render_question();
check_flag();
event.preventDefault();
});
$("#q-nav-flag").click(function(event){
if (question_status[current_question] != 1) {
question_status[current_question] = 1;
$(this).removeClass().addClass("btn btn-warning");
$(this).prop("title", "Question Flagged for revision. Click to un-flag.");
} else {
question_status[current_question] = 0;
$(this).removeClass().addClass("btn btn-secondary");
$(this).prop("title", "Question Un-Flagged. Click to flag for revision.");
}
window.localStorage.setItem('question_status', JSON.stringify(question_status));
update_navigator();
event.preventDefault();
});
$("#btn-start-quiz").click(function(event){
$.ajax({
url: `/api/questions/`,
type: 'POST',
data: JSON.stringify({'_id': _id}),
contentType: "application/json",
success: function(response) {
$(this).fadeOut();
$(".btn-quiz-return").fadeIn();
$(".quiz-console").fadeIn();
$("#quiz-settings").fadeOut();
$("#quiz-navigator").fadeOut();
$(".quiz-start-text").fadeOut();
time_limit = response.time_limit;
start_time = response.start_time;
questions = response.questions;
total_questions = questions.length;
window.localStorage.setItem('questions', JSON.stringify(questions));
window.localStorage.setItem('start_time', JSON.stringify(start_time));
window.localStorage.setItem('time_limit', JSON.stringify(time_limit));
render_question();
build_navigator();
check_flag();
if (time_limit != 'null' && time_limit != null) {
$("#q-timer-widget").fadeIn();
time_remaining = get_time_remaining();
clock = setInterval(timer, 1000);
}
if (response.time_adjustment > 0) {
const $alert = $("#alert-box");
$alert.html(
`<div class="alert alert-primary alert-dismissible fade show" role="alert">
<i class="bi bi-exclamation-triangle-fill" title="Alert"></i>
User code validated. Extra time of ${response.time_adjustment} minutes added to the exam time limit.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
`
);
$alert.focus();
}
},
error: function(response) {
error_response(response);
}
});
event.preventDefault();
});
$("#quiz-question-options").on("change", ".quiz-option", function(event){
$name = parseInt($(this).prop("name"));
$value = $(this).prop("value");
answers[$name] = $value;
window.localStorage.setItem('answers', JSON.stringify(answers));
});
$("#q-review-answers").click(function(event){
check_answered();
update_navigator();
if ($quiz_navigator.is(":hidden")) {
if ($quiz_settings.is(":visible")) {
toggle_settings = true;
$quiz_settings.fadeOut();
}
$quiz_render.fadeOut();
$quiz_navigator.fadeIn();
$(".navigator-text").fadeOut();
$(".review-text").fadeIn();
toggle_navigator = false;
$(window).scrollTop(0);
} else {
$quiz_navigator.fadeOut();
if (toggle_settings) {
$quiz_settings.fadeIn();
toggle_settings = false;
} else {
$quiz_render.fadeIn();
}
}
event.preventDefault();
});
$(".quiz-button-submit").click(function(event){
let submission = {
'_id': _id,
'answers': answers
}
$.ajax({
url: `/api/submit/`,
type: 'POST',
data: JSON.stringify(submission),
contentType: "application/json",
success: function(response) {
window.localStorage.clear();
window.location.href = `/result/`;
},
error: function(response) {
error_response(response);
}
});
event.preventDefault();
});
// Functions
function set_font(value = 'osdefault') {
let font_styles = ['arial', 'comicsans', 'opendyslexic', 'tahoma', 'verdana']
for (let i = 0; i < font_styles.length; i ++) {
if (font_styles[i] != value) {
$("body").removeClass( `q-f-${font_styles[i]}` );
};
};
if (value != 'osdefault') {
$("body").addClass(`q-f-${value}`);
};
display_settings['font-select'] = value;
window.localStorage.setItem('display_settings', JSON.stringify(display_settings));
$('input[name="font-select"][value="' + value + '"]').prop('checked', true);
}
function set_font_size(value = '14pt') {
let font_sizes = ['12pt', '16pt', '18pt']
for (let i = 0; i < font_sizes.length; i ++) {
if (font_sizes[i] != value) {
$("body").removeClass( `q-f-${font_sizes[i]}` );
};
};
if (value != '14pt') {
$("body").addClass(`q-f-${value}`);
};
display_settings['font-size'] = value;
window.localStorage.setItem('display_settings', JSON.stringify(display_settings));
$('input[name="font-size"][value="' + value + '"]').prop('checked', true);
}
function set_bg_colour(value = 'bg-light') {
let backgrounds = ['bg-light', 'q-bg-light-1', 'q-bg-light-2', 'alert-primary', 'alert-secondary', 'alert-dark', 'bg-dark']
for (let i = 0; i < backgrounds.length; i ++) {
if (backgrounds[i] != value) {
$("body").removeClass(backgrounds[i]);
if (backgrounds[i] == 'bg-dark') {
$("body").removeClass('text-light');
};
if (backgrounds[i] == 'alert-primary' || backgrounds[i] == 'alert-secondary' || backgrounds[i] == 'alert-dark') {
$("body").removeClass('text-dark');
};
};
};
$("body").addClass(value);
if (value == 'bg-dark') {
$("body").addClass('text-light');
};
if (value == 'alert-primary' || value == 'alert-secondary' || value == 'alert-dark') {
$("body").addClass('text-dark');
};
display_settings['bg-select'] = value;
window.localStorage.setItem('display_settings', JSON.stringify(display_settings));
$('input[name="bg-select"][value="' + value + '"]').prop('checked', true);
}
function get_settings_from_storage() {
let display_settings = window.localStorage.getItem('display_settings')
if (display_settings != null) {
return JSON.parse(display_settings);
};
return {
'font-select': 'osdefault',
'font-size': '14pt',
'bg-select': 'bg-light'
}
}
function apply_settings(settings) {
set_font(settings['font-select']);
set_font_size(settings['font-size']);
set_bg_colour(settings['bg-select']);
}
function render_question() {
if (current_question == 0) {
$nav_prev.addClass('disabled');
}
if (current_question == questions.length - 1) {
$nav_next.addClass('disabled');
}
if ($nav_prev.hasClass('disabled') && current_question > 0) {
$nav_prev.removeClass('disabled');
}
if ($nav_next.hasClass('disabled') && current_question < questions.length - 1) {
$nav_next.removeClass('disabled');
}
var question = questions[current_question];
let header_text = question.question_header;
var block_length = 0;
if ('block_length' in question) {
block_length = question['block_length'];
};
var block_q_no = 0;
if ('block_q_no' in question) {
block_q_no = question['block_q_no'];
}
let remaining_qs = (block_length - block_q_no).toString();
if (block_length - block_q_no > 1) {
remaining_qs += ' questions';
} else {
remaining_qs += ' question';
}
header_text = header_text.replace('<block_remaining_questions>', remaining_qs);
$question_header.html(header_text);
$question_text.html(question.text);
$question_title.html(`Question ${current_question + 1} of ${ questions.length }.`);
var q_no = question['q_no'];
var options = question.options;
var options_output = '';
for (let i = 0; i < options.length; i ++) {
var add_checked = ''
if (q_no in answers) {
if (answers[q_no] == options[i][0]) {
add_checked = 'checked';
}
}
options_output += `<div class="form-check">
<input type="radio" class="form-check-input quiz-option" id="q${current_question}-${i}" name="${q_no}" value="${options[i][0]}" ${add_checked}>
<label for="q${current_question}-${i}" class="form-check-label">${options[i][1]}</label>
</div>`;
}
$question_options.html(options_output);
let skipped = count_questions(-1);
let answered = count_questions(2);
let flagged = count_questions(1);
$progress_skipped.prop('title', `Skipped: ${skipped}`);
$progress_skipped.prop('aria-valuenow', skipped);
$progress_skipped.css('width', `${skipped}%`);
$skipped_count.text(`Skipped: ${skipped}`);
if (skipped < 1) {
$skipped_count.fadeOut()
} else {
$skipped_count.fadeIn()
}
$progress_flagged.prop('title', `Flagged: ${flagged}`);
$progress_flagged.prop('aria-valuenow', flagged);
$progress_flagged.css('width', `${flagged}%`);
$flagged_count.text(`Flagged: ${flagged}`);
if (flagged < 1) {
$flagged_count.fadeOut()
} else {
$flagged_count.fadeIn()
}
$progress_answered.prop('title', `Answered: ${answered}`);
$progress_answered.prop('aria-valuenow', answered);
$progress_answered.css('width', `${answered}%`);
$answered_count.text(`Answered: ${answered}`);
if (answered < 1) {
$answered_count.fadeOut()
} else {
$answered_count.fadeIn()
}
$question_title.focus();
$(window).scrollTop(0);
}
function check_answered() {
var question = questions[current_question];
var name = question.q_no;
if (question_status[current_question] == 0 || question_status[current_question] == -1) {
if (!$(`input[name='${name}']:checked`).val()) {
question_status[current_question] = -1;
} else {
question_status[current_question] = 2;
}
window.localStorage.setItem('question_status', JSON.stringify(question_status));
}
}
function check_flag() {
if (!(current_question in question_status)) {
question_status[current_question] = 0;
window.localStorage.setItem('question_status', JSON.stringify(question_status));
}
switch (question_status[current_question]) {
case -1:
$nav_flag.removeClass().addClass('btn btn-danger progress-bar-striped');
$nav_flag.prop("title", "Question Incomplete. Click to flag for revision.");
break;
case 1:
$nav_flag.removeClass().addClass('btn btn-warning');
$nav_flag.prop("title", "Question Flagged for revision. Click to un-flag.");
break;
case 2:
$nav_flag.removeClass().addClass('btn btn-success');
$nav_flag.prop("title", "Question Answered. Click to flag for revision.");
break;
default:
$nav_flag.removeClass().addClass('btn btn-secondary');
$nav_flag.prop("title", "Question Un-Flagged. Click to flag for revision.");
}
}
function build_navigator() {
$nav_container.html('')
var output = ''
for (let i = 0; i < questions.length; i ++) {
let add_class, add_href, add_status = '';
switch (question_status[i]) {
case -1:
add_class = 'btn-danger progress-bar-striped';
add_href = 'href="#"';
add_status = 'Incomplete';
break;
case 1:
add_class = 'btn-warning';
add_href = 'href="#"';
add_status = 'Flagged';
break;
case 2:
add_class = 'btn-success';
add_href = 'href="#"';
add_status = 'Answered';
break;
default:
add_class = 'btn-secondary disabled';
add_href = '';
add_status = 'Unseen';
}
output += `<a ${add_href} class="q-navigator-button btn ${add_class}" name=${i} title="Question ${i+1}: ${add_status}">Q${i + 1}</a>`;
}
$nav_container.html(output);
}
function update_navigator() {
let button = $(`.q-navigator-button[name=${current_question}]`)
if (current_question in question_status) {
switch (question_status[current_question]) {
case -1:
button.removeClass().addClass("q-navigator-button btn btn-danger progress-bar-striped");
button.prop("title", `Question ${current_question + 1}: Incomplete`);
break;
case 1:
button.removeClass().addClass("q-navigator-button btn btn-warning");
button.prop("title", `Question ${current_question + 1}: Flagged`);
break;
case 2:
button.removeClass().addClass("q-navigator-button btn btn-success");
button.prop("title", `Question ${current_question + 1}: Answered`);
break;
default:
button.removeClass().addClass("q-navigator-button btn btn-secondary disabled");
button.prop("title", `Question ${current_question + 1}: Unseen`);
}
}
}
function start() {
$("#btn-start-quiz").fadeOut();
$(".btn-quiz-return").fadeIn();
$(".quiz-console").fadeIn();
$("#quiz-settings").fadeOut();
$("#quiz-navigator").fadeOut();
$(".quiz-start-text").fadeOut();
questions = JSON.parse(window.localStorage.getItem('questions'));
total_questions = questions.length;
start_time = window.localStorage.getItem('start_time');
time_limit = window.localStorage.getItem('time_limit');
let get_answers = window.localStorage.getItem('answers');
if (get_answers != null) {
answers = JSON.parse(get_answers);
}
let get_status = window.localStorage.getItem('question_status');
if (get_status != null) {
question_status = JSON.parse(get_status);
}
render_question();
build_navigator();
check_flag();
if (time_limit != 'null' && time_limit != null) {
$("#q-timer-widget").fadeIn();
time_remaining = get_time_remaining();
clock = setInterval(timer, 1000);
}
}
function check_started() {
let questions = window.localStorage.getItem('questions');
let time_limit = window.localStorage.getItem('time_limit');
let start_time = window.localStorage.getItem('start_time')
if (questions != null && start_time != null && time_limit != null) {
start();
}
}
function get_time_remaining() {
var end_time = new Date(time_limit).getTime();
var _start_time = new Date().getTime();
return end_time - _start_time;
}
function timer() {
var hours = Math.floor((time_remaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((time_remaining % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((time_remaining % (1000 * 60)) / 1000);
if (time_remaining > 0) {
var timer_display = '';
if (hours > 0) {
timer_display = `${hours.toString()}:`;
}
if (minutes > 0 || hours > 0) {
if (minutes < 10) {
timer_display += `0${minutes.toString()}:`;
} else {
timer_display += `${minutes.toString()}:`;
}
}
if (seconds < 10) {
timer_display += `0${seconds.toString()}`;
} else {
timer_display += seconds.toString();
}
$timer.html(timer_display);
time_remaining -= 1000
} else {
$timer.html('Expired');
clearInterval(clock);
stop()
}
}
function stop() {
$quiz_render.fadeOut();
$quiz_navigator.fadeOut();
$quiz_timeout.fadeIn();
$("#btn-toggle-navigator").addClass('disabled');
$("#btn-toggle-settings").addClass('disabled')
}
function count_questions(status) {
output = 0;
for (let i = 0; i < Object.keys(question_status).length; i++) {
key = Object.keys(question_status)[i];
if (question_status[key] == status){
output ++;
}
}
return output;
}
// Variable Definitions
const _id = window.localStorage.getItem('_id');
var current_question = 0;
var total_questions = 0;
var question_status = {};
var answers = {};
var questions = [];
var time_limit, start_time, time_remaining;
var display_settings = get_settings_from_storage();
const $quiz_settings = $("#quiz-settings");
const $quiz_navigator = $("#quiz-navigator");
const $quiz_render = $("#quiz-render");
const $quiz_timeout = $("#quiz-timeout");
const $nav_flag = $("#q-nav-flag");
const $nav_next = $("#q-nav-next");
const $nav_prev = $("#q-nav-prev");
const $nav_container = $("#navigator-container");
const $timer = $("#q-timer-display");
var clock
var toggle_settings = false;
var toggle_navigator = false;
const $question_title = $("#quiz-question-title");
const $question_header = $("#quiz-question-header");
const $question_text = $("#quiz-question-text");
const $question_options = $("#quiz-question-options");
const $progress_skipped = $("#skipped-bar");
const $progress_answered = $("#answered-bar");
const $progress_flagged = $("#flagged-bar");
const $skipped_count = $("#skipped-count");
const $answered_count = $("#answered-count");
const $flagged_count = $("#flagged-count");
// Execution on Load
apply_settings(display_settings);
check_started();

86
ref-test/app/quiz/static/js/script.js Normal file
View File

@ -0,0 +1,86 @@
$(document).ready(function() {
$("#od-font-test").click(function(){
$("body").css("font-family", "opendyslexic3regular")
});
$('.test-code-input').keyup(function() {
var input = $(this).val().split("-").join("").split("—").join("");
if (input.length > 0) {
input = input.match(new RegExp('.{1,4}', 'g')).join("—");
}
$(this).val(input);
});
});
$('form[name=form-quiz-start]').submit(function(event) {
var $form = $(this);
var data = $form.serialize();
$.ajax({
url: window.location.pathname,
type: 'POST',
data: data,
dataType: 'json',
success: function(response) {
var _id = response._id
window.localStorage.setItem('_id', _id);
window.location.href = `/test/`;
},
error: function(response) {
error_response(response);
}
});
event.preventDefault();
});
function error_response(response) {
const $alert = $("#alert-box");
$alert.html('');
if (typeof response.responseJSON.error === 'string' || response.responseJSON.error instanceof String) {
$alert.html(`
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<i class="bi bi-exclamation-triangle-fill" title="Danger"></i>
${response.responseJSON.error}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
`);
} else if (response.responseJSON.error instanceof Array) {
var output = ''
for (var i = 0; i < response.responseJSON.error.length; i ++) {
output += `
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<i class="bi bi-exclamation-triangle-fill" title="Danger"></i>
${response.responseJSON.error[i]}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
`;
$alert.html(output);
}
}
}
// Dismiss Cookie Alert
$('#dismiss-cookie-alert').click(function(event){
$.ajax({
url: '/cookies/',
type: 'GET',
data: {
time: Date.now()
},
dataType: 'json',
success: function(response){
console.log(response);
},
error: function(response){
console.log(response);
}
})
event.preventDefault();
})

8
ref-test/app/quiz/templates/quiz/404.html Normal file
View File

@ -0,0 +1,8 @@
{% extends "quiz/components/base.html" %}
{% block content %}
<h1>Page Not Found</h1>
<p>
The page you were looking for does not exist. Try going back and navigating to the desired destination correctly.
</p>
{% endblock %}

279
ref-test/app/quiz/templates/quiz/client.html Normal file
View File

@ -0,0 +1,279 @@
{% extends "quiz/components/base.html" %}
{% block style %}
<link
rel="stylesheet"
href="{{ url_for('.static', filename='css/quiz.css') }}"
/>
{% endblock %}
{% block content %}
<div id="alert-box" tabindex="-1"></div>
<div class="container quiz-panel" id="quiz-settings" tabindex="-1">
<h1>Adjust Display Settings</h1>
<div class="container quiz-start-text">
You can use this panel to adjust the display settings for the exam. Please use the menu below to select the font face and font size. Below is a sample question so you can see how the exam will render with your chosen settings.
</div>
<div class="alert alert-primary quiz-start-text" role="alert">
<strong>Note</strong>: Some fonts may not be available depending on your device and/or operating system.
</div>
<form action="#" name="quiz-configuration">
<div class="container">
<div class="row gx-5 gy-5">
<div class="col">
<h5>
Select Font
</h5>
<div class="form-check">
<input type="radio" class="form-check-input" id="osdefault" name="font-select" value="osdefault" checked>
<label for="osdefault" class="form-check-label q-f-osdefault">OS Default</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="arial" name="font-select" value="arial">
<label for="arial" class="form-check-label q-f-arial">Arial</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="comicsans" name="font-select" value="comicsans">
<label for="comicsans" class="form-check-label q-f-comicsans">Comic Sans</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="opendyslexic" name="font-select" value="opendyslexic">
<label for="opendyslexic" class="form-check-label q-f-opendyslexic">OpenDyslexic</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="tahoma" name="font-select" value="tahoma">
<label for="tahoma" class="form-check-label q-f-tahoma">Tahoma</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="verdana" name="font-select" value="verdana">
<label for="verdana" class="form-check-label q-f-verdana">Verdana</label>
</div>
</div>
<div class="col">
<h5>
Select Font Size
</h5>
<div class="form-check">
<input type="radio" class="form-check-input" id="12pt" name="font-size" value="12pt" checked>
<label for="12pt" class="form-check-label q-f-12pt">12pt</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="14pt" name="font-size" value="14pt" checked>
<label for="14pt" class="form-check-label q-f-14pt">14pt (Default)</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="16pt" name="font-size" value="16pt">
<label for="16pt" class="form-check-label q-f-16pt">16pt</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="18pt" name="font-size" value="18pt">
<label for="18pt" class="form-check-label q-f-18pt">18pt</label>
</div>
</div>
</div>
<div class="row gx-5 gy-5 mt-1">
<div class="col">
<h5>Select Background Colour</h5>
<div class="p-3 bg-light text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="bg-light" name="bg-select" value="bg-light" checked>
<label for="bg-light" class="form-check-label">Default Light</label>
</div>
</div>
<div class="p-3 q-bg-light-1 text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="q-bg-light-1" name="bg-select" value="q-bg-light-1">
<label for="q-bg-light-1" class="form-check-label">Light Shade 1</label>
</div>
</div>
<div class="p-3 q-bg-light-2 text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="q-bg-light-2" name="bg-select" value="q-bg-light-2">
<label for="q-bg-light-2" class="form-check-label">Light Shade 2</label>
</div>
</div>
<div class="p-3 alert-primary text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="alert-primary" name="bg-select" value="alert-primary">
<label for="alert-primary" class="form-check-label">Blue</label>
</div>
</div>
<div class="p-3 alert-secondary text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="alert-secondary" name="bg-select" value="alert-secondary">
<label for="alert-secondary" class="form-check-label">Grey 1</label>
</div>
</div>
<div class="p-3 alert-dark text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="alert-dark" name="bg-select" value="alert-dark">
<label for="alert-dark" class="form-check-label">Grey 2</label>
</div>
</div>
<div class="p-3 bg-dark text-light bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="bg-dark" name="bg-select" value="bg-dark">
<label for="bg-dark" class="form-check-label">Dark</label>
</div>
</div>
</div>
</div>
</div>
</form>
<div class="container question-container quiz-start-text">
<h4 class="question-title">Sample Question</h4>
<p class="question-header">
Korfball is a mixed-sex, controlled-contact, indoor, invasion ball sport. The sport originated in the Netherlands. It is a mixed-sex team sport. Its governing body is the International Korball Federation. There are numerous korfball leagues and associations around the world. A korfball match is officiated by a referee.
</p>
<p class="question-text">
In order to be a referee, what do you need to know?
</p>
<div class="options">
<div class="form-check">
<input type="radio" class="form-check-input" id="sample0" name="sample" value="0">
<label for="sample0" class="form-check-label">The rules of korfball</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="sample1" name="sample" value="1">
<label for="sample1" class="form-check-label">The way of the Jedi Order</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="sample2" name="sample" value="2">
<label for="sample2" class="form-check-label">The <i>Dungeons &amp; Dragons Fifth Edition Monster Manual</i>.</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="sample3" name="sample" value="2">
<label for="sample3" class="form-check-label">The Trade Union and Labour Relations (Consolidation) Act 1992.</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="sample4" name="sample" value="4" checked>
<label for="sample4" class="form-check-label">All of the above</i></label>
</div>
</div>
</div>
<div class="row mt-3">
<p class="quiz-start-text">
When you are happy with the settings, click <strong>&lsquo;Start the Exam&rsquo;</strong> below to proceed. You can change these settings at any time using the red gear <a class="btn btn-danger btn-dummy" tabindex="-1" aria-title="Settings" title="Settings"><i class="bi bi-gear-fill"></i></a> button on the exam console.
</p>
<div class="control-button-container">
<a href="#" class="btn btn-success btn-quiz-control" id="btn-start-quiz">Start the Exam</a>
<a href="#" class="btn btn-success btn-quiz-control btn-quiz-return" style="display: none;">Resume Exam</a>
</div>
</div>
</div>
<div class="container quiz-panel" style="display: none;" id="quiz-navigator" tabindex="-1">
<h1 class="navigator-text">
Question Grid
</h1>
<h1 class="review-text" style="display: none;">
Review Your Answers
</h1>
<div class="navigator-text">
This question grid displays the progress you have on the exam so far. Each question is represented by an icon below, and you can click on each icon to skip to that question.
The icons below are colour-coded to represent the status of each question.
</div>
<div class="review-text" style="display: none;">
You can use this panel to review your answers before you submit the exam. You will not be able to amend your answers after you submit.
Each question is represented by an icon below, and you can click on each icon to skip to that question. The icons below are colour-coded to represent the status of each question.
</div>
<table class="navigator-help">
<tr>
<td>
<a class="q-navigator-button btn btn-danger progress-bar-striped btn-dummy" title="Question: Incomplete">Q</a>
</td>
<td>
A red and striped icon represents a question that you have skipped, and have not otherwise flagged for revision.
</td>
</tr>
<tr>
<td>
<a class="q-navigator-button btn btn-warning btn-dummy" title="Question: Flagged">Q</a>
</td>
<td>
A yellow icon represents a question that you have flagged for revision.
</td>
</tr>
<tr>
<td>
<a class="q-navigator-button btn btn-success btn-dummy" title="Question: Answered">Q</a>
</td>
<td>
A green icon represents a question that you have answered, and have not otherwise flagged for revision.
</td>
</tr>
<tr>
<td>
<a class="q-navigator-button btn btn-secondary disabled btn-dummy" title="Question: Unseen">Q</a>
</td>
<td>
A greyed-out icon represents a question that you have not yet seen.
</td>
</tr>
</table>
<div id="navigator-container">
</div>
<div class="control-button-container navigator-text">
<a href="#" class="btn btn-success btn-quiz-control btn-quiz-return">Resume Exam</a>
</div>
<div class="control-button-container review-text">
<a href="#" class="btn btn-danger btn-quiz-control btn-quiz-return">Back to Exam</a>
<a href="#" class="btn btn-success quiz-button-submit">Submit Exam</a>
</div>
</div>
<div class="container quiz-panel quiz-console" style="display: none" id="quiz-render">
<h1>
Exam Console
</h1>
<div class="container question-container">
<div class="progress">
<div id="answered-bar" class="progress-bar bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
<div id="flagged-bar" class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
<div id="skipped-bar" class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="counters">
<div id="answered-count" class="badge rounded-pill bg-success" style="display: none;">Answered: 0</div>
<div id="flagged-count" class="badge rounded-pill bg-warning"style="display: none;">Flagged: 0</div>
<div id="skipped-count" class="badge rounded-pill bg-danger progress-bar-striped"style="display: none;">Skipped: 0</div>
</div>
<h4 class="question-title" id="quiz-question-title" tabindex="-1">
Question x.
</h4>
<p class="question-header" id="quiz-question-header">
Question Header
</p>
<p class="question-text" id="quiz-question-text">
Question Text
</p>
<div class="options" id="quiz-question-options">
Options
</div>
</div>
<div class="control-button-container">
<a href="#" class="btn btn-success q-question-nav" id="q-nav-prev" title="Previous Question"><i class="bi bi-caret-left-square-fill"></i>&nbsp;Back</a>
<a href="#" class="btn btn-secondary" id="q-nav-flag" title="Question Un-Flagged. Click to flag for revision."><i class="bi bi-flag-fill"></i></a>
<a href="#" class="btn btn-success q-question-nav" id="q-nav-next" title="Next Question">Next&nbsp;<i class="bi bi-caret-right-square-fill"></i></a>
</div>
<div class="control-button-container">
<a href="#" class="btn btn-primary" id="q-review-answers" title="Submit Answers">Submit Answers</a>
</div>
</div>
<div class="container quiz-panel quiz-timeout" style="display: none;" id="quiz-timeout">
<h1>
Time Limit Expired
</h1>
<p>
The time limit set for this exam has expired. You must submit your answers immediately.
</p>
<div class="control-button-container">
<a href="#" class="btn btn-success quiz-button-submit" title="Submit Exam">Submit Exam</a>
</div>
</div>
{% endblock %}
{% block script %}
<script
type="text/javascript"
src="{{ url_for('.static', filename='js/quiz.js') }}"
></script>
{% endblock %}

78
ref-test/app/quiz/templates/quiz/components/base.html Normal file
View File

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
<link
rel="stylesheet"
href="{{ url_for('.static', filename='css/style.css') }}"
/>
{% block style %}
{% endblock %}
<title>{% block title %} SKA Referee Test Beta {% endblock %}</title>
{% include "quiz/components/og-meta.html" %}
</head>
<body class="bg-light">
{% block navbar %}
{% include "quiz/components/navbar.html" %}
{% endblock %}
<div class="container quiz-container">
{% block top_alerts %}
{% include "quiz/components/server-alerts.html" %}
{% endblock %}
{% block content %}{% endblock %}
<footer class="container site-footer">
{% include "quiz/components/footer.html" %}
</footer>
</div>
<!-- JQuery, Popper, and Bootstrap js dependencies -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script>
window.jQuery || document.write(`<script src="{{ url_for('.static', filename='js/jquery-3.6.0.min.js') }}"><\/script>`)
</script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous">
</script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"
></script>
<!-- Custom js -->
<script type="text/javascript">
var csrf_token = "{{ csrf_token() }}";
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrf_token);
}
}
});
</script>
<script
type="text/javascript"
src="{{ url_for('.static', filename='js/script.js') }}"
></script>
{% block script %}
{% endblock %}
</body>
</html>

3
ref-test/app/quiz/templates/quiz/components/footer.html Normal file
View File

@ -0,0 +1,3 @@
<p>This web app was developed by Vivek Santayana. The source code for the web app, excluding any data pertaining to the questions in the quiz, is freely available at <a href="https://git.vsnt.uk/viveksantayana/ska-referee-test">Vivek&rsquo;s personal GIT repository</a> under an MIT License.</p>
<p>All questions in the test are &copy; The Scottish Korfball Association {{ now.year }}. All rights are reserved.</p>
<p>OpenDyslexic 3 is an open source typeface created by Abbie Gonzalez, licensed under a <a href="https://scripts.sil.org/OFL">SIL-OFL</a>. More information about OpenDyslexic is available <a href="https://opendyslexic.org/">on the project web site</a>.</p>

14
ref-test/app/quiz/templates/quiz/components/navbar.html Normal file
View File

@ -0,0 +1,14 @@
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark" id="primary-nav">
<div class="container">
<p class="navbar-brand mb-0 h1">SKA Refereeing Test (Beta)</p>
<div class="quiz-console w-100" style="display: none;" id="q-topbar">
<div class="d-flex justify-content align-middle">
<div class="container d-flex justify-content-center">
<span class="text-light q-timer" id="q-timer-widget" style="display: none;"><i class="bi bi-stopwatch-fill"></i>&nbsp;<span id="q-timer-display"></span></span>
</div>
<a href="#" class="btn btn-warning" aria-title="Question Grid" title="Question Grid" id="btn-toggle-navigator"><i class="bi bi-table"></i></a>
<a href="#" class="btn btn-danger" aria-title="Settings" title="Settings" id="btn-toggle-settings"><i class="bi bi-gear-fill"></i></a>
</div>
</div>
</div>
</nav>

17
ref-test/app/quiz/templates/quiz/components/og-meta.html Normal file
View File

@ -0,0 +1,17 @@
<meta name="description" content="A web app for taking the Scottish Korfball Association Refereeing Theory Exam on-line." />
<meta property="og:locale" content="en_UK" />
<meta property="og:type" content="website" />
<meta property="og:description" content="A web app for taking the Scottish Korfball Association Refereeing Theory Exam on-line." />
<meta property="og:url" content="{{ url_for(request.endpoint, _external = True, **request.view_args) }}" />
<meta property="og:site_name" content="Scottish Korfball Association Referee Theory Exam" />
<meta property="og:image" content="{{ url_for('static', filename='favicon.png', _external = True) }}" />
<meta property="og:image:alt" content="Logo of the SKA Refereeing Exam App" />
<meta property="og:image:width" content="512" />
<meta property="og:image:height" content="512" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" content="A web app for taking the Scottish Korfball Association Refereeing Theory Exam on-line." />
<meta name="twitter:image" content="{{ url_for('static', filename='favicon.png', _external = True) }}" />
<meta name="twitter:image:alt" content="Logo of the SKA Refereeing Exam App" />
<meta name="twitter:creator" content="@viveksantayana" />
<meta name="twitter:site" content="@viveksantayana" />
<meta name="theme-color" content="#343a40" />

43
ref-test/app/quiz/templates/quiz/components/server-alerts.html Normal file
View File

@ -0,0 +1,43 @@
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% set cookie_flash_flag = namespace(value=False) %}
{% for category, message in messages %}
{% if category == "error" %}
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<i class="bi bi-exclamation-triangle-fill" title="Error" aria-title="Error"></i>
{{ message|safe }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% elif category == "success" %}
<div class="alert alert-success alert-dismissible fade show" role="alert">
<i class="bi bi-check2-circle" title="Success" aria-title="Success"></i>
{{ message|safe }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% elif category == "warning" %}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<i class="bi bi-info-circle-fill" aria-title="Warning" title="Warning"></i>
{{ message|safe }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% elif category == "cookie_alert" %}
{% if not cookie_flash_flag.value %}
<div class="alert alert-primary alert-dismissible fade show" id="cookie-alert" role="alert">
<i class="bi bi-info-circle-fill" title="Cookie Alert" aria-title="Cookie Alert"></i>
{{ message|safe }}
<div class="d-flex justify-content-center w-100">
<button type="button" id="dismiss-cookie-alert" class="btn btn-success" data-bs-dismiss="alert" aria-label="Close">Accept</button>
</div>
</div>
{% set cookie_flash_flag.value = True %}
{% endif %}
{% else %}
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<i class="bi bi-info-circle-fill" title="Alert"></i>
{{ message|safe }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}
{% endfor %}
{% endif %}
{% endwith %}

21
ref-test/app/quiz/templates/quiz/index.html Normal file
View File

@ -0,0 +1,21 @@
{% extends "quiz/components/base.html" %}
{% block content %}
<h1>SKA Refereeing Theory Exam</h1>
<p>
This app will enable you to take the SKA Refereeing Exam on-line. The app will further allow you to change the display settings &mdash; such as the font size, typeface, and background colour &mdash; to a layout that you may find more suitable.
</p>
<p>
We designed this app to prioritise accessibility for the exam, and to ensure that it could be presented in a manner that does not put people with any specific needs at a disadvantage.
</p>
<p>
The presentation of the questions is just a start, and we acknowledge we still have a long way to go. We welcome any feedback on how we can further improve this test.
</p>
<div class="button-container">
<a href="{{ url_for('quiz_views.instructions') }}" class="btn btn-success">
<i class="bi bi-book-fill button-icon"></i>
Read the Instructions
</a>
</div>
{% endblock %}

61
ref-test/app/quiz/templates/quiz/instructions.html Normal file
View File

@ -0,0 +1,61 @@
{% extends "quiz/components/base.html" %}
{% block content %}
<div class="instruction-container">
<h3>Instructions</h3>
<ul>
<li>
The exam comprises 100 multiple-choice questions.
</li>
<li>
For each question, answer what decision you would give as a referee unless the question instructs otherwise.
</li>
<li>
You will be able to customise the display settings of the exam from the settings panel by clicking on the red gear button <a class="btn btn-danger" aria-title="Settings" title="Settings" onclick="return false;"><i class="bi bi-gear-fill"></i></a>.
</li>
<li>
You can view your progress at a glance, as well as navigate to any question in the quiz, using the question grid, accessed via the yellow grid button <a class="btn btn-warning" aria-title="Question Grid" title="Question Grid" onclick="return false;"><i class="bi bi-table"></i></a>.
</li>
<li>
If you are unsure of the answer to a question or would like to revise a question, you can flag the question to review it later on using the flag button button <a class="btn btn-secondary" id="q-nav-flag" title="Flag Button." onclick="return false;"><i class="bi bi-flag-fill"></i></a>.
</li>
</ul>
</div>
<div class="instruction-container">
<h3>
Technical Details
</h3>
<ul>
<li>
To ensure compatibility, make sure you use the latest version of Firefox, Chrome, Safari, or other fairly modern browser. Make sure JavaScript is enabled.
</li>
<li>
Once you start the exam, your answers are stored locally on your browser until you submit your final results to the server.
</li>
<li>
Do not close the window, refresh the page, or navigate to a different page as you could risk losing your progress.
</li>
<li>
<strong>If you have any technical issues while taking the exam, please report them immediately to <a href="mailto:refereeing@scotlandkorfball.co.uk">refereeing@scotlandkorfball.co.uk</a></strong>.
</li>
</ul>
</div>
<div class="instruction-container">
<h4>
Results
</h4>
<p>
The results of your exam will be processed immediately and sent to the SKA Refereeing Coordinator. You will also be emailed a copy of your results.
</p>
<p>
When you are ready to begin the quiz, click the following button.
</p>
</div>
<div class="button-container">
<a href="{{ url_for('quiz_views.start') }}" class="btn btn-success">
<i class="bi bi-pencil-fill button-icon"></i>
Take the Exam
</a>
</div>
{% endblock %}

26
ref-test/app/quiz/templates/quiz/privacy.html Normal file
View File

@ -0,0 +1,26 @@
{% extends "quiz/components/base.html" %}
{% block content %}
<h1>Privacy Policy</h1>
This web app stores data using cookies. The web site only stores the minimum information it needs to function.
<h5>Site Administrators</h5>
<ul>
<li>For site administrators, this web site uses encrypted cookies to store data from your log-in session.</li>
<li>User information for administrators is encrypted and stored in a secure database, and are expunged when an account is deleted.</li>
</ul>
<h5>Test Candidates</h5>
<ul>
<li>The web site will not be trackin your log in, and all information about your test attempt will be stored on your device until you submit it to the server.</li>
<li>Data from your test, including identifying information such as your name and email address, will be recorded by the Scottish Korfball Association in order to oversee the training and qualification of referees.</li>
<li>These records will be kept for three years or until the expiration of the theory exam qualification (whichever is later), and will be expunged securely thereafter.</li>
<li>All identifying information about candidates will be encrypted and stored in a secure database.</li>
</ul>
<h5>Requests to Delete Data</h5>
<ul>
<li>You can request to have any of your data that is held here deleted by emailing <a href="mailto:refereeing@scotlandkorfball.co.uk">refereeing@scotlandkorfball.co.uk</a>.</li>
</ul>
{% endblock %}

44
ref-test/app/quiz/templates/quiz/result.html Normal file
View File

@ -0,0 +1,44 @@
{% extends "quiz/components/base.html" %}
{% block content %}
<h1>SKA Refereeing Theory Exam</h1>
<h2>Candidate Results</h2>
<h3 class="results-name">
<span class="surname">{{ entry.name.surname }}</span>, {{ entry.name.first_name }}
</h3>
<strong class="results-details">Email Address</strong>: {{ entry.email }} <br />
{% if entry.club %}
<strong class="results-details">Club</strong>: {{ entry.club }} <br />
{% endif%}
{% if entry.status == 'late' %}
Your results are invalid because you did not submit your exam in time. Please contact the SKA Refereeing Coordinator.
{% else %}
<div class="results-score">
{{ score }}
</div>
<div class="results-grade">
{{ entry.results.grade[0]|upper }}{{ entry.results.grade[1:] }}
</div>
{% if entry.results.grade == 'fail' %}
Unfortunately, you have not passed the theory exam in this attempt. For your next attempt, it might help to brush up on the following topics:
<ul>
{% for tag in tag_output %}
<li>{{ tag }}</li>
{% endfor %}
</ul>
{% endif %}
A copy of these results will be sent to you via email.
{% endif %}
{% endblock %}

46
ref-test/app/quiz/templates/quiz/start-quiz.html Normal file
View File

@ -0,0 +1,46 @@
{% extends "quiz/components/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block content %}
<div class="form-container">
<form name="form-quiz-start" class="form-quiz-start">
<h2 class="form-heading">Take the Exam</h2>
{{ form.hidden_tag() }}
<div class="form-label-group">
{{ form.first_name(class_="form-control", autofocus=true, placeholder="Enter First Name(s)") }}
{{ form.first_name.label }}
</div>
<div class="form-label-group">
{{ form.surname(class_="form-control", placeholder="Enter Surname") }}
{{ form.surname.label }}
</div>
<div class="form-label-group">
{{ form.email(class_="form-control", placeholder="Enter Email Address") }}
{{ form.email.label }}
</div>
<div class="form-label-group">
{{ form.club(class_="form-control", placeholder="Enter Affiliated Club") }}
{{ form.club.label }}
</div>
<div class="form-label-group">
{{ form.test_code(class_="form-control test-code-input", placeholder="Enter Exam Code") }}
{{ form.test_code.label }}
</div>
<div class="form-label-group">
{{ form.user_code(class_="form-control", placeholder="Enter User Code") }}
{{ form.user_code.label }}
</div>
{% include "admin/components/client-alerts.html" %}
<div class="container form-submission-button">
<div class="row">
<div class="col text-center">
<button class="btn btn-md btn-success btn-block" type="submit">
<i class="bi bi-pencil-fill button-icon"></i>
Get Ready
</button>
</div>
</div>
</div>
</form>
</div>
{% endblock %}