{% load static %}

{% block content %}
<link rel="stylesheet" href="{% static 'venturini_pg/mystyle.css' %}">

<div style="
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: -10px;
    margin-bottom: 25px;
">
    {% if is_stem %}
        <img src="{% static 'venturini_pg/Calculator.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/DNA.png' %}" style="height: 100px;">
    {% else %}
        <img src="{% static 'venturini_pg/iPhone_16_Wallpaper3.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/Samsung_Galaxy_S24_Wallpaper1.png' %}" style="height: 100px;">
    {% endif %}
</div>


<h2 style="text-align:center; color:#800000; font-weight:800; margin-top:0; margin-bottom: 10px">
        Attività di Comprensione
    </h2>

    <p style="margin-top:10px;">
        Rispondi alle seguenti domande per verificare di aver compreso le istruzioni della seconda attività. <br>
    </p>

<p style="margin-top:10px;">
Le risposte a queste domande <u><strong>NON</strong></u> permettono di guadagnare dei punti. <br>
    </p>

<p>
    <div style="margin-top:6px; margin-bottom:12px; text-align:center;">
    Qui puoi rileggere le istruzioni <div class="wc-arrow"; style="color:#800000;">↓</div>
  <a href="#" data-bs-toggle="modal" data-bs-target="#istruzioniModal"
     style="color:#800000; font-weight:800; text-decoration: underline;">
    Istruzioni
  </a>
</div>

</p>

<hr style="color:#800000;">

    <div style="text-align:left; margin-top:20px; font-size:18px;">
        <p><strong>{{ form.mc_q1.label }}</strong></p>
    {{ form.mc_q1 }}
    </div>

    <div style="text-align:left; margin-top:18px; font-size:18px;">
         <p><strong>{{ form.mc_q2.label }}</strong></p>
    {{ form.mc_q2 }}
    </div>

    <div style="text-align:left; margin-top:18px; font-size:18px;">
         <p><strong>{{ form.mc_q3.label }}</strong></p>
    {{ form.mc_q3 }}
    </div>


<div style="text-align: center; margin-top: 30px;">
        <p style="margin: 0 0 8px 0;">
            Quando hai completato l'attività, clicca su Continua.
        </p>
        <button class="otree-btn-next btn btn-bordeaux">Continua</button>
    </div>

<div style="
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    align-items: center;
    gap: 25px 20px;
    margin-top: 25px;
    margin-bottom: 30px;
">
    {% if is_stem %}
        <img src="{% static 'venturini_pg/Blackboard.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/Lab.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/Emc.png' %}" style="height: 70px;">
        <img src="{% static 'venturini_pg/sencos.png' %}" style="height: 100px;">
    {% else %}
        <img src="{% static 'venturini_pg/Samsung_Galaxy_S25_Wallpaper1.png' %}" style="height: 90px;">
        <img src="{% static 'venturini_pg/Samsung_Galaxy_S24_Wallpaper2.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/iPhone_16_Wallpaper2.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/iPhone_16_Wallpaper1.png' %}" style="height: 100px;">
    {% endif %}

<style>
/* ===== RADIO BUTTONS (oTree + Bootstrap) ===== */
.form-check-input {
    width: 18px;
    height: 18px;
    border: 2px solid #800000 !important;
    background-color: white !important;
}

/* radio selezionato */
.form-check-input:checked {
    background-color: #800000 !important;
    border-color: #800000 !important;
}

/* rimuove il blu bootstrap */
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(128,0,0,0.3) !important;
}

/* ===== INPUT NUMERICI (età ecc.) ===== */
input[type="number"],
input[type="text"] {
    border: 2px solid #800000 !important;
    border-radius: 6px;
}

/* focus input */
input[type="number"]:focus,
input[type="text"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(128,0,0,0.3) !important;
}
</style>

    <!-- MODAL ISTRUZIONI -->
<div class="modal fade" id="istruzioniModal" tabindex="-1" aria-labelledby="istruzioniModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content" style="border:2px solid #800000; border-radius:12px;">

      <div class="modal-header">
        <h5 class="modal-title" id="istruzioniModalLabel" style="color:#800000; text-align:center; font-weight:900;">
          Istruzioni Seconda Attività
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
      </div>

      <div class="modal-body" style="padding: 18px 18px;">

        <!-- ====== IL TUO TESTO ISTRUZIONI ====== -->
        <h2 style="text-align:center; color:#800000; font-weight:500; margin-top:0;">
    Cosa Devi Fare?
</h2>

<div style="max-width:800px; margin:auto; margin-top:20px; font-size:20px; line-height:1.45;">

<p>
    Ogni membro del gruppo riceverà <strong>10 punti</strong> e dovrà decidere quanti punti contribuire
    a un <strong>Fondo Comune</strong> del gruppo.
  </p>

  <p>
    È possibile contribuire un numero intero di punti compreso tra <strong>0</strong> e <strong>10</strong>.
  </p>

  <p>
    La <strong>somma totale delle contribuzioni</strong> al fondo comune sarà poi <strong>raddoppiata</strong>
    e <strong>redistribuita equamente</strong> tra tutti i
    partecipanti del gruppo, <strong>indipendentemente</strong> da quanto ciascuno abbia contribuito.
  </p>

<h2 style="text-align:center; color:#800000; font-weight:500; margin-top:0;margin-bottom:14px;">
    Come si Determinano i Guadagni?
</h2>

  <p>
    I guadagni individuali, per ogni membro del gruppo, sono determinati nel seguente modo:
  </p>

  <p>
    <strong>
      Guadagno individuale = 10 - (punti contribuiti) +
      (2 × totale dei punti contribuiti nel gruppo) / (numero di partecipanti nel gruppo)
    </strong>
  </p>

  <p>
    Ecco alcuni esempi (questi esempi sono illustrativi e non vogliono suggerire come i partecipanti
    dovrebbero compiere le loro scelte all'interno del gruppo):
  </p>

  <p><strong>Esempio 1 - Gruppo di 4 partecipanti</strong></p>

  <p>
    Supponiamo che, in un gruppo di <strong>4 partecipanti</strong>, le contribuzioni siano:
  </p>

  <ul style="font-size:18px; line-height:1.4;">
    <li>Partecipante 1: <strong>10 punti</strong></li>
    <li>Partecipante 2: <strong>5 punti</strong></li>
    <li>Partecipante 3: <strong>0 punti</strong></li>
    <li>Partecipante 4: <strong>5 punti</strong></li>
  </ul>

  <p>
    Il totale delle contribuzioni del gruppo al Fondo Comune è quindi pari a <strong>20 punti</strong>.<br>
    Il totale dei punti del gruppo sarà <strong>raddoppiato</strong>
    (20 punti × 2 = <strong>40 punti</strong>) prima di essere distribuito equamente tra i
    4 componenti del gruppo, che otterranno quindi <strong>10 punti</strong> ciascuno (40 punti / 4).
  </p>

  <p>Il guadagno individuale sarà dunque:</p>

  <ul style="font-size:18px; line-height:1.4;">
    <li>
      Partecipante 1: 10 (<strong>punti iniziali</strong>) - 10 (<strong>punti contribuiti</strong>) +
      10 (<strong>punti ricevuti dal Fondo Comune</strong>) = <strong>10 punti</strong>
    </li>
    <li>
      Partecipante 2: 10 (<strong>punti iniziali</strong>) - 5 (<strong>punti contribuiti</strong>) +
      10 (<strong>punti ricevuti dal Fondo Comune</strong>) = <strong>15 punti</strong>
    </li>
    <li>
      Partecipante 3: 10 (<strong>punti iniziali</strong>) - 0 (<strong>punti contribuiti</strong>) +
      10 (<strong>punti ricevuti dal Fondo Comune</strong>) = <strong>20 punti</strong>
    </li>
    <li>
      Partecipante 4: 10 (<strong>punti iniziali</strong>) - 5 (<strong>punti contribuiti</strong>) +
      10 (<strong>punti ricevuti dal Fondo Comune</strong>) = <strong>15 punti</strong>
    </li>
  </ul>

    <p><strong>Esempio 2 - Gruppo di 5 partecipanti</strong></p>

  <p>
    Supponiamo che, in un gruppo di <strong>5 partecipanti</strong>, le contribuzioni siano:
  </p>

  <ul style="font-size:18px; line-height:1.4;">
    <li>Partecipante 1: <strong>3 punti</strong></li>
    <li>Partecipante 2: <strong>9 punti</strong></li>
    <li>Partecipante 3: <strong>4 punti</strong></li>
    <li>Partecipante 4: <strong>8 punti</strong></li>
      <li>Partecipante 5: <strong>6 punti</strong></li>
  </ul>

  <p>
    Il totale delle contribuzioni del gruppo al Fondo Comune è quindi pari a <strong>30 punti</strong>.<br>
    Il totale dei punti del gruppo sarà <strong>raddoppiato</strong>
    (30 punti × 2 = <strong>60 punti</strong>) prima di essere distribuito equamente tra i
    5 componenti del gruppo, che otterranno quindi <strong>12 punti</strong> ciascuno
    (60 punti / 5).
  </p>

  <p>Il guadagno individuale sarà dunque:</p>

  <ul style="font-size:18px; line-height:1.4;">
    <li>
      Partecipante 1: 10 (<strong>punti iniziali</strong>) - 3 (<strong>punti contribuiti</strong>) +
      12 (<strong>punti ricevuti dal Fondo Comune</strong>) = <strong>19 punti</strong>
    </li>
    <li>
      Partecipante 2: 10 (<strong>punti iniziali</strong>) - 9 (<strong>punti contribuiti</strong>) +
      12 (<strong>punti ricevuti dal Fondo Comune</strong>) = <strong>13 punti</strong>
    </li>
    <li>
      Partecipante 3: 10 (<strong>punti iniziali</strong>) - 4 (<strong>punti contribuiti</strong>) +
      12 (<strong>punti ricevuti dal Fondo Comune</strong>) = <strong>18 punti</strong>
    </li>
    <li>
      Partecipante 4: 10 (<strong>punti iniziali</strong>) - 8 (<strong>punti contribuiti</strong>) +
      12 (<strong>punti ricevuti dal Fondo Comune</strong>) = <strong>14 punti</strong>
    </li>
      <li>
      Partecipante 5: 10 (<strong>punti iniziali</strong>) - 6 (<strong>punti contribuiti</strong>) +
      12 (<strong>punti ricevuti dal Fondo Comune</strong>) = <strong>16 punti</strong>
    </li>
  </ul>

        </div>
        <!-- ====== FINE TESTO ISTRUZIONI ====== -->

      </div>
    </div>
  </div>
</div>
</div>

{% endblock %}