Restored static and template files
This commit is contained in:
8
ref-test/app/quiz/templates/quiz/404.html
Normal file
8
ref-test/app/quiz/templates/quiz/404.html
Normal 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
279
ref-test/app/quiz/templates/quiz/client.html
Normal 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 & 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>‘Start the Exam’</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> 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 <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
78
ref-test/app/quiz/templates/quiz/components/base.html
Normal 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
3
ref-test/app/quiz/templates/quiz/components/footer.html
Normal 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’s personal GIT repository</a> under an MIT License.</p>
|
||||
<p>All questions in the test are © 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
14
ref-test/app/quiz/templates/quiz/components/navbar.html
Normal 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> <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
17
ref-test/app/quiz/templates/quiz/components/og-meta.html
Normal 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" />
|
||||
@ -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
21
ref-test/app/quiz/templates/quiz/index.html
Normal 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 — such as the font size, typeface, and background colour — 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
61
ref-test/app/quiz/templates/quiz/instructions.html
Normal 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
26
ref-test/app/quiz/templates/quiz/privacy.html
Normal 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
44
ref-test/app/quiz/templates/quiz/result.html
Normal 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
46
ref-test/app/quiz/templates/quiz/start-quiz.html
Normal 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 %}
|
||||
Reference in New Issue
Block a user