Added analysis UI
This commit is contained in:
@ -1,74 +1,22 @@
|
||||
{% extends "view/components/base.html" %}
|
||||
{% extends "analysis/components/datatable.html" %}
|
||||
|
||||
{% block style %}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="{{ url_for('.static', filename='css/view.css') }}"
|
||||
href="{{ url_for('.static', filename='css/analysis.css') }}"
|
||||
/>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1>View Questions</h1>
|
||||
<h1>Analysis</h1>
|
||||
<div class="container">
|
||||
<p class="lead">
|
||||
This page lists all the questions in the selected dataset.
|
||||
Analysis for {{ type }} {{ subject }}.
|
||||
</p>
|
||||
</div>
|
||||
<div class="container control-panel">
|
||||
<button class="btn btn-primary" aria-title="Information" title="Information"><i class="bi bi-info-circle-fill"></i></button>
|
||||
</div>
|
||||
<div class="container info-panel">
|
||||
<div class="container">
|
||||
<h3>
|
||||
Information
|
||||
</h3>
|
||||
<p>
|
||||
Questions in the test are arranged in blocks. Blocks can be of two types: <strong>Blocks</strong> of multiple related questions, and <strong>Single Questions</strong> that are not part of a block.
|
||||
You can add, remove, or edit both Blockss and Questions through this editor.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Blocks</strong> are useful when you have a section of the test that contains multiple questions that are related to each other, for example if there is a scenario-based section where a series of questions are about the same situation.
|
||||
</p>
|
||||
<p>
|
||||
Blocks can contain any number of questions within them, but cannot contain nested blocks.
|
||||
</p>
|
||||
<p>
|
||||
When you set up a block, you can also add <strong>header text</strong> that will be displayed with each question.
|
||||
You can use this to provide common information for a scenario across a series of questions.
|
||||
</p>
|
||||
<p>
|
||||
Questions come in three types:
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Yes/No</strong> for when there is only a yes or no option,
|
||||
</li>
|
||||
<li>
|
||||
<strong>Multiple Choice</strong> for your regular multiple choice questions, and
|
||||
</li>
|
||||
<li>
|
||||
<strong>Ordered List</strong> for multiple choice questions that will be displayed in the same order as listed here.
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
Normally, multiple choice questions will have the order of the options randomised.
|
||||
</p>
|
||||
<p>
|
||||
Questions will be displayed to candidates in a randomised order.
|
||||
Blocks of questions will be kept together, but the order within the block will also be randomised.
|
||||
</p>
|
||||
<p>
|
||||
Questions can also be categorised using <strong>tags</strong>.
|
||||
</p>
|
||||
<p class="lead">
|
||||
Placeholder for Questions Remaining in a Block
|
||||
</p>
|
||||
<p>
|
||||
In order to show how many questions are remaining inside a block, e.g. to say ‘the next n questions are about a specific scenario’, the app uses the placeholder <code><block_remaining_questions></code>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="container viewer-panel">
|
||||
<h3>
|
||||
Question Dataset
|
||||
Question List
|
||||
</h3>
|
||||
<div class="container dataset-metadata">
|
||||
<div class="input-group mb-3">
|
||||
@ -100,7 +48,65 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<table id="analysis-table" class="table table-striped" style="width:100%">
|
||||
<thead>
|
||||
<th data-priority="1">
|
||||
Question
|
||||
</th>
|
||||
<th data-priority="1">
|
||||
Percent Correct
|
||||
</th>
|
||||
<th data-priority="2">
|
||||
Answers
|
||||
</th>
|
||||
<th data-priority="3">
|
||||
Tags
|
||||
</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for question in questions %}
|
||||
<tr class="table-row">
|
||||
<td>
|
||||
{{ question.q_no + 1 }}
|
||||
</td>
|
||||
<td class="cell-percentage">
|
||||
{{ ((analysis.answers[question.q_no][question.correct] or 0)*100/(analysis.answers[question.q_no].values())|sum())|round(2) }}
|
||||
</td>
|
||||
<td>
|
||||
<table style="width:100%">
|
||||
{% for option in question.options %}
|
||||
<tr>
|
||||
<td style="width:50%">
|
||||
{{ option[1] }}
|
||||
</td>
|
||||
<td>
|
||||
{% if question.correct == option[0] %}
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-success progress-bar-striped" role="progressbar" style="width: {{ (analysis.answers[question.q_no][option[0]] or 0)*100/(analysis.answers[question.q_no].values())|sum() }}%;" aria-valuenow="{{ (analysis.answers[question.q_no][option[0]] or 0)*100/(analysis.answers[question.q_no].values())|sum() }}" aria-valuemin="0" aria-valuemax="100">{{ ((analysis.answers[question.q_no][option[0]] or 0)*100/(analysis.answers[question.q_no].values())|sum())|round(2) }}%</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width: {{ (analysis.answers[question.q_no][option[0]] or 0)*100/(analysis.answers[question.q_no].values())|sum() }}%;" aria-valuenow="{{ (analysis.answers[question.q_no][option[0]] or 0)*100/(analysis.answers[question.q_no].values())|sum() }}" aria-valuemin="0" aria-valuemax="100">{{ ((analysis.answers[question.q_no][option[0]] or 0)*100/(analysis.answers[question.q_no].values())|sum())|round(2) }}%</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
{% for tag in question.tags %}
|
||||
<li>{{ tag|safe }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -111,6 +117,54 @@
|
||||
</script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="{{ url_for('.static', filename='js/view.js') }}"
|
||||
src="{{ url_for('.static', filename='js/analysis.js') }}"
|
||||
></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block custom_data_script %}
|
||||
<script>
|
||||
console.log($('#analysis-table'))
|
||||
$(document).ready(function() {
|
||||
$('#analysis-table').DataTable({
|
||||
'searching': true,
|
||||
'columnDefs': [
|
||||
{'sortable': true, 'targets': [0,1]},
|
||||
{'sortable': false, 'targets': [2,3]},
|
||||
{'searchable': true, 'targets': [0,2,3]}
|
||||
],
|
||||
'order': [[0, 'asc'], [1, 'desc']],
|
||||
'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',
|
||||
'searchBuilder': {
|
||||
depthLimit: 2,
|
||||
columns: [2, 3],
|
||||
},
|
||||
dom: 'BQlfrtip'
|
||||
});
|
||||
// $('.buttons-pdf').html('<span class="glyphicon glyphicon-file" data-toggle="tooltip" title="Export To Excel"/>') -->
|
||||
} );
|
||||
$('#analysis-table').show();
|
||||
$(window).trigger('resize');
|
||||
</script>
|
||||
{% endblock %}
|
||||
@ -22,24 +22,24 @@
|
||||
{% block style %}
|
||||
{% endblock %}
|
||||
<title>{% block title %} SKA Referee Test | Admin Console {% endblock %}</title>
|
||||
{% include "view/components/og-meta.html" %}
|
||||
{% include "analysis/components/og-meta.html" %}
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
|
||||
{% block navbar %}
|
||||
{% include "view/components/navbar.html" %}
|
||||
{% include "analysis/components/navbar.html" %}
|
||||
{% endblock %}
|
||||
|
||||
<div class="container">
|
||||
{% block top_alerts %}
|
||||
{% include "view/components/server-alerts.html" %}
|
||||
{% include "analysis/components/server-alerts.html" %}
|
||||
{% endblock %}
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<footer class="container site-footer mt-5">
|
||||
{% block footer %}
|
||||
{% include "view/components/footer.html" %}
|
||||
{% include "analysis/components/footer.html" %}
|
||||
{% endblock %}
|
||||
</footer>
|
||||
|
||||
@ -78,7 +78,15 @@
|
||||
type="text/javascript"
|
||||
src="{{ url_for('.static', filename='js/script.js') }}"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="{{ url_for('.static', filename='js/analysis.js') }}"
|
||||
></script>
|
||||
{% block script %}
|
||||
{% endblock %}
|
||||
{% block datatable_scripts %}
|
||||
{% endblock %}
|
||||
{% block custom_data_script %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@ -1,4 +1,4 @@
|
||||
{% extends "view/components/base.html" %}
|
||||
{% extends "analysis/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"/>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{% extends "view/components/base.html" %}
|
||||
{% extends "analysis/components/base.html" %}
|
||||
{% import "bootstrap/wtf.html" as wtf %}
|
||||
{% block top_alerts %}
|
||||
{% endblock %}
|
||||
@ -1,4 +1,4 @@
|
||||
{% extends "view/components/input-forms.html" %}
|
||||
{% extends "analysis/components/input-forms.html" %}
|
||||
|
||||
{% block content %}
|
||||
<h1>Analysis</h1>
|
||||
@ -9,7 +9,19 @@
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Exams</h5>
|
||||
<div class="card-text">
|
||||
{{ tests }}
|
||||
<div class="form-select-input">
|
||||
<select name="select-test" id="select-test">
|
||||
{% for test in tests %}
|
||||
<option value="{{ test.id }}">{{ test.get_code() }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="my-3">
|
||||
<a href="{{ url_for('analysis._test') }}" class="btn btn-primary button-analyse" data-class="test">
|
||||
<i class="bi bi-search button-icon"></i>
|
||||
Analyse
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -19,11 +31,24 @@
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Datasets</h5>
|
||||
<div class="card-text">
|
||||
{{ datasets }}
|
||||
<div class="form-select-input">
|
||||
<select name="select-dataset" id="select-dataset">
|
||||
{% for dataset in datasets %}
|
||||
<option value="{{ dataset.id }}">{{ dataset.get_name() }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="my-3">
|
||||
<a href="{{ url_for('analysis._dataset') }}" class="btn btn-primary button-analyse" data-class="dataset">
|
||||
<i class="bi bi-search button-icon"></i>
|
||||
Analyse
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "analysis/components/client-alerts.html" %}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user