Built client interface
This commit is contained in:
199
ref-test/quiz/templates/quiz/client.html
Normal file
199
ref-test/quiz/templates/quiz/client.html
Normal file
@ -0,0 +1,199 @@
|
||||
{% extends "quiz/components/base.html" %}
|
||||
|
||||
{% block style %}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="{{ url_for('.static', filename='css/quiz.css') }}"
|
||||
/>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container quiz-panel" id="quiz-settings">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
</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">
|
||||
<h1>
|
||||
Navigator
|
||||
</h1>
|
||||
<div id="navigator-container">
|
||||
<a href="#" class="q-navigator-button btn btn-success">Q666</a>
|
||||
<a href="#" class="q-navigator-button btn btn-warning">Q666</a>
|
||||
<a href="#" class="q-navigator-button btn btn-secondary disabled">Q666</a>
|
||||
</div>
|
||||
<div class="control-button-container">
|
||||
<a href="#" class="btn btn-success btn-quiz-control btn-quiz-return">Resume 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">
|
||||
<h4 class="question-title" id="quiz-question-title">
|
||||
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="Flag Question"><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>
|
||||
{% endblock %}
|
||||
{% block script %}
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="{{ url_for('.static', filename='js/quiz.js') }}"
|
||||
></script>
|
||||
{% endblock %}
|
||||
@ -15,6 +15,8 @@
|
||||
rel="stylesheet"
|
||||
href="{{ url_for('.static', filename='css/style.css') }}"
|
||||
/>
|
||||
{% block style %}
|
||||
{% endblock %}
|
||||
<title>{% block title %} SKA Referee Test {% endblock %}</title>
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
@ -66,5 +68,7 @@
|
||||
type="text/javascript"
|
||||
src="{{ url_for('.static', filename='js/script.js') }}"
|
||||
></script>
|
||||
{% block script %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@ -1,5 +1,14 @@
|
||||
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">
|
||||
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark" id="primary-nav">
|
||||
<div class="container">
|
||||
<a href="/" class="navbar-brand mb-0 h1">SKA Refereeing Test </a>
|
||||
<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"><i class="bi bi-stopwatch-fill"></i> <span id="q-timer-display">1:58:57</span></span>
|
||||
</div>
|
||||
<a href="#" class="btn btn-warning" aria-title="Navigate" title="Navigate" 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>
|
||||
Reference in New Issue
Block a user