ska-referee-test/ref-test/app/analysis/templates/analysis/analysis.html

{% extends "analysis/components/datatable.html" %}

{% block style %}
<link 
    rel="stylesheet"
    href="{{ url_for('.static', filename='css/analysis.css') }}"
/>
{% endblock %}

{% block content %}
    <h1>Analysis by {{ type[0]|upper }}{{ type[1:] }}</h1>
    <div class="container">
        <p class="lead">
            The analysis section displays statistics for all test results as well as answers to individual questions.
            Analysis reports can be generated per exam or per question dataset to identify common mistakes or patterns in answers.
        </p>
        <div class="input-group mb-3">
            <span class="input-group-text">
                {% if type == 'exam' %}
                    Exam Code
                {% elif type == 'dataset' %}
                    Dataset Name
                {% endif %}
            </span>
            <span class="form-control">
                {{ subject }}
            </span>
        </div>
        <div class="input-group mb-3">
            <span class="input-group-text">Total Entries</span>
            <span class="form-control">
                {{ analysis.entries }}
            </span>
        </div>
        <div class="input-group mb-3">
            <span class="input-group-text">Passed</span>
            <span class="form-control">
                {{ analysis.grades.merit + analysis.grades.pass }} ({{ ((analysis.grades.merit + analysis.grades.pass)*100/analysis.entries)|round(2) }} &percnt;)
            </span>
        </div>
        <div class="mb-3">
            <span class="badge rounded-pill progress-bar-striped bg-success">Merit: {{ analysis.grades.merit }}</span> <span class="badge rounded-pill bg-primary progress-bar-striped">Pass: {{ analysis.grades.pass }}</span> <span class="badge rounded-pill progress-bar-striped bg-danger">Fail: {{ analysis.grades.fail }}</span>
            <div class="my-1 progress">
                <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: {{ (analysis.grades.merit*100/analysis.entries)|round(2) }}%" aria-valuenow="{{ analysis.grades.merit }}" aria-valuemin="0" aria-valuemax="{{ analysis.entries }}">{{ (analysis.grades.merit*100/analysis.entries)|round(2) }} &percnt;</div>
                <div class="progress-bar progress-bar-striped" role="progressbar" style="width: {{ (analysis.grades.pass*100/analysis.entries)|round(2) }}%" aria-valuenow="{{ analysis.grades.pass }}" aria-valuemin="0" aria-valuemax="{{ analysis.entries }}">{{ (analysis.grades.pass*100/analysis.entries)|round(2) }} &percnt;</div>
                <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: {{ (analysis.grades.fail*100/analysis.entries)|round(2) }}%" aria-valuenow="{{ analysis.grades.fail }}" aria-valuemin="0" aria-valuemax="{{ analysis.entries }}">{{ (analysis.grades.fail*100/analysis.entries)|round(2) }} &percnt;</div>
            </div>
        </div>
        <div class="input-group mb-3">
            <span class="input-group-text">Mean Score</span>
            <span class="form-control">
                {{ analysis.scores.mean|round(2) }} &percnt;
            </span>
        </div>
        <div class="input-group mb-3">
            <span class="input-group-text">Standard Deviation</span>
            <span class="form-control">
                {% if analysis.scores.stdev %}
                    {{ analysis.scores.stdev|round(2) }}
                {% else %}
                    {{ None }}
                {% endif %}
            </span>
        </div>
        <div class="input-group mb-3">
            <span class="input-group-text">Median Score</span>
            <span class="form-control">
                {{ analysis.scores.median|round(2) }} &percnt;
            </span>
        </div>
        {% if type == 'exam' %}
            <div class="input-group mb-3">
                <span class="input-group-text">Dataset Name</span>
                <span class="form-control">
                    {{ dataset.get_name() }}
                </span>
            </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>
{% endblock %}

{% block script %}
<script>
    const target = "{{ url_for('api._editor') }}"
    const id = "{{ dataset.id }}"
</script>
<script
    type="text/javascript"
    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 %}