{% extends "global/Page.html" %}
{{ block title }}
<p class="d-none">Domande sull'intelligenza artificiale</p>
{{ endblock }}

{% block content %}
{{ include C.likert_css }}

<style>
    /* ---- anti-copy: no text selection / printing of the questions ---- */
    .no-copy, .no-copy * {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
    }
    @media print {
        body * { display: none !important; }
        body::after { content: "Stampa non consentita."; display: block !important; }
    }

    .test-item {
        border: 1px solid #dee2e6;
        border-radius: .6rem;
        background: #fff;
        padding: 1rem 1.1rem;
        margin-bottom: 1rem;
    }
    .test-item.card-missing {
        border: 1px solid #dc3545;
        background-color: #fdf2f2;
    }
    .test-q { font-size: 1.08rem; font-weight: 500; margin-bottom: .75rem; }
    .test-q .qnum { color: var(--accent, #2563eb); font-weight: 700; margin-right: .35rem; }
    .test-opt label {
        display: flex; align-items: flex-start; gap: .7rem;
        border: 1.5px solid #dee2e6; border-radius: .6rem;
        padding: .6rem .8rem; margin-bottom: .45rem; cursor: pointer; transition: .12s;
    }
    .test-opt .txt { padding-top: .15rem; }
    .test-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
    .test-opt input:checked + label {
        border-color: var(--accent, #2563eb); background: var(--accent-soft, #eaf1ff);
    }
    @media (max-width: 599.98px) {
        .fs-5 { font-size: 1rem !important; }
        .test-q { font-size: 1rem; }
    }
</style>

<div class="container no-copy" id="test-container">
    <h2>Domande sull'intelligenza artificiale</h2>




    <div class="card mb-4 bg-light">
        <div class="card-body">
            <p class="fs-5 mb-2">
                Le prossime domande sono a risposta multipla e riguardano l'intelligenza artificiale, in particolare i suoi aspetti etici 
    e l'IA generativa (come ChatGPT o i generatori di immagini).
            </p>
            <p class="mb-2">
                Le ricordiamo che non si tratta di un test e che le sue risposte non verranno valutate: 
                servono solo a fotografare le conoscenze del gruppo prima e dopo il corso. È del tutto normale non sapere alcune risposte.
            </p>
            <p class="mb-2">
                Per ogni domanda c'è una sola risposta corretta. Selezioni la risposta che ritiene giusta; se non è sicuro/a, scelga quella che le sembra più plausibile. La preghiamo di rispondere senza consultare Internet, colleghi o altre fonti.
            </p>
            {{ if timeout_minutes }}
            <p class="mb-0">
                Ha a disposizione <strong>{{ timeout_minutes }} minuti</strong>. Allo scadere del tempo la pagina
                verrà inviata automaticamente con le risposte date fino a quel momento.
            </p>
            {{ endif }}
        </div>
    </div>

    <div class="alert alert-danger d-none" id="alert-missing" role="alert">
        Si prega di rispondere a tutte le domande. Quelle mancanti sono evidenziate in rosso.
    </div>

    {{ for item in items }}{{ for field in form }}{{ if field.name == item.var_name }}
    <div class="test-item" data-card-field="{{ item.var_name }}">
        <p class="test-q"><span class="qnum">{{ item.num }}.</span>{{ item.question }}</p>
        {{ for o in item.options }}
        <div class="test-opt">
            <input type="radio" name="{{ item.var_name }}" id="{{ item.var_name }}__{{ o.letter }}"
                   value="{{ o.letter }}" {{ if o.letter == field.data }}checked{{ endif }}>
            <label for="{{ item.var_name }}__{{ o.letter }}">
                <span class="txt">{{ o.text }}</span>
            </label>
        </div>
        {{ endfor }}
        {{ formfield_errors item.var_name }}
    </div>
    {{ endif }}{{ endfor }}{{ endfor }}
</div>

{{ include C.next_progress }}

<script>
document.addEventListener('DOMContentLoaded', function () {
    // ---------- anti-copy (deterrent only) ----------
    ['copy', 'cut', 'contextmenu', 'dragstart', 'selectstart'].forEach(function (evt) {
        document.addEventListener(evt, function (e) { e.preventDefault(); }, true);
    });
    document.addEventListener('keydown', function (e) {
        const k = (e.key || '').toLowerCase();
        if ((e.ctrlKey || e.metaKey) && ['c', 'x', 'a', 'p', 's', 'u'].includes(k)) {
            e.preventDefault();
        }
    }, true);

    // ---------- missing-answer validation ----------
    const form = document.querySelector('form');
    form.noValidate = true;
    const alertEl = document.getElementById('alert-missing');
    const submitBtn = form.querySelector('.otree-btn-next');
    const fieldNames = Array.from(document.querySelectorAll('[data-card-field]'))
        .map(el => el.getAttribute('data-card-field'));

    function markMissing() {
        let anyMissing = false;
        fieldNames.forEach(function (name) {
            const answered = !!document.querySelector('input[name="' + name + '"]:checked');
            document.querySelector('[data-card-field="' + name + '"]').classList.toggle('card-missing', !answered);
            if (!answered) anyMissing = true;
        });
        return anyMissing;
    }

    if (submitBtn) {
        submitBtn.addEventListener('click', function (e) {
            if (markMissing()) {
                e.preventDefault();
                e.stopImmediatePropagation();
                alertEl.classList.remove('d-none');
                alertEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
            } else {
                alertEl.classList.add('d-none');
            }
        });
    }

    document.addEventListener('change', function (e) {
        if (e.target && e.target.type === 'radio') {
            const card = document.querySelector('[data-card-field="' + e.target.name + '"]');
            if (card) card.classList.remove('card-missing');
        }
    }, true);
});
</script>
{% endblock %}