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</h1>
    <div class="container">
        <p class="lead">
            Analysis for {{ type }} {{ subject }}.
        </p>
    </div>
    <div class="container">
        <h3>
            Question List
        </h3>
        <div class="container dataset-metadata">
            <div class="input-group mb-3">
                <span class="input-group-text">Dataset Name</span>
                <span class="form-control">
                    {{ dataset.get_name() }}
                </span>
            </div>
            <div class="input-group mb-3">
                <span class="input-group-text">Author</span>
                <span class="form-control">
                    {{ dataset.creator.get_username() }}
                </span>
            </div>
            <div class="input-group mb-3">
                <span class="input-group-text">Last Updated</span>
                <span class="form-control">
                    {{ dataset.date.strftime('%d %b %Y %H:%M') }}
                </span>
            </div>
            {% if dataset.default %}
                <div class="input-group mb-3">
                    <span class="input-group-text">
                        <input type="checkbox" aria-label="Default" class="dataset-default" checked disabled>
                    </span>
                    <span class="form-control">
                        Default Dataset
                    </select>
                </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 %}

{% 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 %}