{{ block styles }}
<link href="{{ static 'global/css/style.css' }}" rel="stylesheet" type="text/css"/>
<style>
    #all-correct-feedback {
        display: none;
    }
    .otree-form-errors {
        display: none;
    }
    .right-feedback {
        color: #04AA6D;
    }
</style>
{{ endblock }}

{{ block scripts }}
<script>
    $(function () {
        let errorFormMsg = $('.otree-form-errors'),
            feedbackMsgs = $('.form-control-errors'),
            feedback = js_vars.quiz_errors,
            numCorrect = 0;

        for (let i = 0; i < feedback.length; i++) {
            if (feedback[i] === 'right') {
                ++ numCorrect;
                feedbackMsgs.eq(i).addClass('right-feedback');
            } else {
                errorFormMsg.show();
            }
        }

        if (numCorrect == feedback.length) {
            $('#all-correct-feedback').show();
        }
    })
</script>
{{ endblock }}

{{ block title }}
Domande di comprensione
{{ endblock }}
{{ block content }}

<!--<div class="container-fluid">
    <div class="panel panel-primary">
        <div class="panel-body">
            <p id="all-correct-feedback">
            <div class="card bg-light instructions">
                <div class="card-body">
                    Ha risposto correttamente a tutte le domande. Di seguito puo' rivedere quali sono
                    le risposte corrette. Clicchi sul tasto "Avanti" per continuare l'esperimento.
                </div>
            </div>
            </p>-->
            <p>
                {{ formfields }}
            </p>
<p>
Clicchi sul tasto "Avanti" per confermare le scelte. Le verranno mostrati dei messaggi sotto ogni domanda che indicano se la risposta è corretta ("Corretto", messaggio verde) o sbagliata ("Sbagliato", messaggio rosso). Nel caso in cui abbia sbagliato qualche domanda la invitiamo a correggere. Se invece tutti i messaggi sono verdi significa che ha risposto correttamente a tutte le domande e quindi dovrà cliccare nuovamente sul tasto "Avanti" per continuare l'esperimento.
</p>
<p>
    <button class="otree-btn-next btn btn-primary">Avanti</button>
</p>
<div class="card bg-light instructions">
    <div class="card-body">
        {{ include 'tax_instr/includes/instr_summary.html' }}
    </div>
</div>
        </div>
    </div>
</div>






{{ endblock }}