{% extends "global/Page.html" %}
{% load otree %}

{% block title %} Chequeo de comprensión
{% endblock title %}

{% block content %}

    <p>1. Por favor seleccione la respuesta que corresponde al Mercado C (con contribución):</p>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="c_1" id="c1-1" value="1">
        <label class="form-check-label" for="c1-1">
            Mis secuencias completadas les dan un beneficio a los demás miembros del grupo.  
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="c_1" id="c1-2"  onclick="clickaction(1)" value="0">
        <label class="form-check-label" for="c1-2">
            Mis secuencias completadas NO les dan un beneficio a los demás miembros del grupo.
        </label>
      </div>
      <br>
      <p>2. Por favor seleccione la respuesta que corresponde al Mercado C (con contribución):</p>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="c_2" id="c2-1" onclick="clickaction(2)" value="0">
        <label class="form-check-label" for="c2-1">
            Yo me beneficio de las tareas completadas por los miembros del grupo que escojan este mercado.
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="c_2" id="c2-2" value="1">
        <label class="form-check-label" for="c2-2">
            Yo NO me beneficio de las tareas completadas por los miembros del grupo que escojan este mercado.
        </label>
      </div>
      <br>
      <p>3. Por favor seleccione la respuesta que corresponde al Mercado SC (sin contribución)):</p>
      <div class="form-check">
          <input class="form-check-input" type="radio" name="c_3" id="c3-1" value="0">
          <label class="form-check-label" for="c3-1">
            NO me beneficio de las secuencias completadas por los miembros del grupo que escojan el Mercado C.
           </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="c_3" id="c3-2"  onclick="clickaction(3)" value="1">
          <label class="form-check-label" for="c3-2">
            Me beneficio de las secuencias completadas por los miembros del grupo que escojan el Mercado C.
          </label>
        </div>
        <br>
        <p>4. Por favor seleccione la respuesta que corresponde al Mercado SC (sin contribución):</p>
      <div class="form-check">
          <input class="form-check-input" type="radio" name="c_4" id="c4-1" onclick="clickaction(4)" value="1">
          <label class="form-check-label" for="c4-1">
            Mis secuencias completadas me dan un beneficio más alto que en el mercado C, pero sólo a mí.
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="c_4" id="c4-2" value="0">
          <label class="form-check-label" for="c4-2">
            Mis secuencias completadas me dan un beneficio más bajo que en el mercado C, pero también beneficios a los demás.
          </label>
        </div>
    <div class="position-absolute top-0 end-0 p-3" style="z-index: 5">
        <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
            <strong class="me-auto">¡Importante!</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div id="bodyToast" class="toast-body">
               
            </div>
        </div>
    </div>

    <br><br>
    {% next_button %}

    <script>
        function clickaction(res){
            $('.toast').toast('show');
            document.getElementById("bodyToast").innerHTML =  "Su respuesta a la pregunta "+res+" no es correcta"
        }
    </script>

{% endblock %}