{% set layout = "ClarolineCoreBundle:Workspace:layout.html.twig" %}

{% if isDesktop() %}
    {% set layout = "ClarolineCoreBundle:Desktop:layout.html.twig" %}
{% endif %}

{% extends layout %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('bundles/ujmexo/css/docimology.css') }}" type="text/css" rel="stylesheet"/>
{% endblock %}

{% block title %} {{ 'docimology' | trans }} {% endblock %}

{% block resourceBreadcrumb %}
    <li><a href="{{ path('claro_resource_open', { 'resourceType': _resource.resourceNode.resourceType.name(), 'node': _resource.resourceNode.id }) }}">{{ _resource.getResourceNode().getName() }}</a></li>
    <li class="active">{{ 'docimology' | trans }}</li>
{% endblock %}

{% block section_content %}
    <div class="panel-heading">
        <h3 class="panel-title">{{ 'docimology' | trans }}</h3>
    </div>
    <div class="panel-body">
        <a href="{{ path('ujm_exercise_open', { 'exerciseId': exoID }) }}" class="btn btn-primary">
            <i class="fa fa-arrow-left"></i> {{ "back" | trans }}
        </a><br/><br/>

        {% if nbPapers >= 12 %}
            {#--------------------------------------------------- Legend -----------------------------------------------------------------------------------#}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{{ 'legend' | trans }}</h3>
                </div>
                <div class="panel-body" id="questionList">
                    <h4>{{ "number of papers" | trans }} : {{ nbPapers }}</h4>
                    <h3 class="panel-title">{{ "list of question" | trans }}</h3>
                    <ol>
                        {% for questionTitle in questionsList %}
                            <li>{{ questionTitle }}</li>
                        {% endfor %}
                    </ol>
                </div>
            </div>
            {#--------------------------------------------------- Histogramm of marks ---------------------------------------------------------------------#}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{{ "histoMarks" | trans }}</h3>
                </div>
                <div class="panel-body" id="histoMarks"></div>
            </div>
            {#--------------------------------------------------- Histogramm of success -------------------------------------------------------------------#}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{{ "histoSuccess" | trans }}</h3>
                </div>
                <div class="panel-body" id="histoSuccess"  style="margin-bottom: 100px;"></div>
            </div>
            {#--------------------------------------------------- Histogramm of discrimination -----------------------------------------------------------#}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{{ "histoDiscrimination" | trans }}</h3>
                </div>
                <div class="panel-body" id="histoDiscrimination"></div>
                <div class="list-group">
                    <div class="list-group-item">
                        {% if coeffQ == 'none' %}
                            {{ 'explainCoeffDis0' | trans }}

                        {% endif %}
                        <p>
                            {{ 'explainCoeffDis1' | trans }}
                            {{ 'explainCoeffDis2' | trans }}
                            {{ 'explainCoeffDis3' | trans }}
                        </p>
                    </div>
                </div>
            </div>
            {#--------------------------------------------------- Histogramm of measure of diffculty -----------------------------------------------------#}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{{ "histoMeasureOfDifficulty" | trans }}</h3>
                </div>
                <div class="panel-body" id="histoMeasureOfDifficulty"></div>
                <div class="list-group">
                    <div class="list-group-item">
                        <p>
                        {{ 'explainMeasureDifficulty' | trans }}.
                        {{ 'calculationMeasureDifficulty' | trans }}.
                        {{ 'meaningMeasureDifficulty' | trans }}.
                        {{ 'infoMeasureDifficulty' | trans }}.
                        </p>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="alert alert-info">{{ 'notEnoughtPapers'|trans }}.</div>
        {% endif %}
    <div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript" src="{{ asset('bundles/frontend/jquery/plugin/jqplot/jquery.jqplot.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/frontend/jquery/plugin/jqplot/plugins/jqplot.barRenderer.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/frontend/jquery/plugin/jqplot/plugins/jqplot.pointLabels.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/frontend/jquery/plugin/jqplot/plugins/jqplot.categoryAxisRenderer.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/frontend/jquery/plugin/jqplot/plugins/jqplot.canvasTextRenderer.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/frontend/jquery/plugin/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js') }}"></script>

    {% if nbPapers >= 12 %}
        <script type="text/javascript">
            $(document).ready(function(){
                /*********************************histo mark******************************************************/
                var s1 = [{{ frequencyMarks }}];
                var marks = [{{ scoreList }}];

                $.jqplot('histoMarks', [s1], {

                    series:[{renderer:$.jqplot.BarRenderer}],

                    seriesDefaults:{
                        color: '#06A1E3',
                        rendererOptions: {fillToZero: true},
                        pointLabels: {
                            show: true,
                            hideZeros: true
                        }
                    },

                    axes: {
                        xaxis: {
                            label: '{{ 'mark'|trans }}',
                            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                            labelOptions:{
                                fontFamily:'Helvetica',
                                fontSize: '14pt'
                            },
                            renderer: $.jqplot.CategoryAxisRenderer,
                            ticks: marks,
                            tickOptions: {showGridline: false, formatString: '%.1f'}
                        },

                        yaxis: {
                            label: '{{ 'frequency'|trans }}',
                            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                            labelOptions:{
                                fontFamily:'Helvetica',
                                fontSize: '14pt'
                            },
                            pad: 1,
                            min: 0,
                            max: {{ maxY }},
                            tickOptions: {formatString: '%d'}
                        }
                    }
                });

                /*********************************histoSuccess******************************************************/

                {% set series = '' %}
                {% set i = 1 %}
                {% for serie in seriesResponsesTab %}
                    {% set sname = 's' ~ i %}
                        var {{ sname }} = [{{ serie }}];
                    {% if series == '' %}
                        {% set series = 's' ~ i %}
                    {% else %}
                        {% set series = series ~ ',' ~ 's' ~ i %}
                    {% endif %}
                    {% set i = i + 1 %}
                {% endfor %}

                plot3 = $.jqplot('histoSuccess', [{{ series }}], {

                    stackSeries: true,
                    captureRightClick: true,

                    seriesDefaults:{
                        renderer:$.jqplot.BarRenderer,

                        rendererOptions: {
                            barMargin: 30,
                            highlightMouseDown: true,
                            fillToZero: true
                        },

                        pointLabels: {
                            show: true,
                            hideZeros: true
                        }

                    },
                    axes: {

                        xaxis: {
                            label: '{{ 'question'|trans }}',
                            renderer: $.jqplot.CategoryAxisRenderer,

                            labelOptions:{
                                fontFamily:'Helvetica',
                                fontSize: '14pt'
                            },

                            tickOptions: {showGridline: false}
                        },

                        yaxis: {
                            label: '{{ 'frequency'|trans }}',
                            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,

                            labelOptions:{
                                fontFamily:'Helvetica',
                                fontSize: '14pt'
                            },

                            pad: 1,
                            min: 0,
                            max: {{ maxY2 }},

                            tickOptions: {formatString: '%d'}
                        }
                    },
                    legend: {
                        show: true,
                        location: 's',
                        placement: 'outside'
                    },

                    series:[
                        {label:'{{ 'correct'|trans }}', color: 'green'},
                        {label:'{{ 'partially'|trans }}', color: 'blue'},
                        {label:'{{ 'wrong'|trans }}', color: 'red'},
                        {label:'{{ 'no answer'|trans }}', color: 'yellow'}
                    ]
                });

                /*********************************histoDiscrimination******************************************************/
                if ({{ coeffQ }} != 'none') {

                    var s1 = [{{ coeffQ }}];

                    $.jqplot('histoDiscrimination', [s1], {

                        stackSeries: true,
                        series:[{renderer:$.jqplot.BarRenderer}],

                        seriesDefaults:{
                            color: '#06A1E3',
                            rendererOptions: {fillToZero: true},
                            pointLabels: {
                                show: true,
                                hideZeros: false,
                                formatString: '%.3f'
                            }
                        },

                        axes: {
                            xaxis: {
                                label: '{{ 'question'|trans }}',
                                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                                labelOptions:{
                                    fontFamily:'Helvetica',
                                    fontSize: '14pt'
                                },
                                renderer: $.jqplot.CategoryAxisRenderer,
                                tickOptions: {showGridline: false}
                            },

                            yaxis: {
                                label: '{{ 'Coefficient'|trans }}',
                                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                                labelOptions:{
                                    fontFamily:'Helvetica',
                                    fontSize: '14pt'
                                },
                                pad: 0.5,
                                min: -1,
                                max: 1,
                                tickOptions: {formatString: '%.1f'}
                            }
                        }
                    });
                }

                /*********************************histoMeasureOfDifficulty******************************************************/
                var percent = [{{MeasureDifficulty}}];

                $.jqplot('histoMeasureOfDifficulty', [percent], {

                    series:[{renderer:$.jqplot.BarRenderer}],

                    seriesDefaults:{
                        color: '#06A1E3',
                        rendererOptions: {fillToZero: true},
                        pointLabels: {
                            show: true,
                            formatString: '%.1f %'
                        }
                    },

                    axes: {
                        xaxis: {
                            label: '{{ 'question'|trans }}',
                            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                            labelOptions:{
                                fontFamily:'Helvetica',
                                fontSize: '14pt'
                            },
                            renderer: $.jqplot.CategoryAxisRenderer,
                            tickOptions: {showGridline: false}
                        },

                        yaxis: {
                            label: '{{ 'percentage'|trans }}',
                            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                            labelOptions:{
                                fontFamily:'Helvetica',
                                fontSize: '14pt'
                            },
                            pad: 10,
                            min: 0,
                            max: 100,
                            tickOptions: {formatString: '%d%'}
                        }
                    }
                });
            });
        </script>
    {% endif %}
{% endblock %}