{{ block title }}Practice Question{{ endblock }}
{{block styles }}
<link rel="stylesheet" type="text/css" href="{{ static 'prediction/custom.css' }}"/>
<link rel="stylesheet" type="text/css" href="{{ static 'prediction/nouislider.css' }}"/>
<style>
  #skip_wrapper {
  margin-top: -80px;
  position: relative;
  z-index: 1000;
  pointer-events: auto;
  }
    .loadbar {
    width: 36px;
    text-align: center;
    height: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    position: absolute;
    right: 0;
    z-index: 1;
   }
    .bar
    {
    width: 100%;
    display: block;
    font-family: arial;
    font-size: 12px;
    background-color: #0d6efd;
    color: #fff;
    position: absolute;
    bottom: 0;
    }
    #topchart{
    /*position: absolute;*/
    left: 120px;
     top:0px;
    z-index: 1;
    }

    .otree-timer {
        text-align: center;
    }

    .page-header {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 10px;
}
    #model{
    /*position: absolute;



    right: 40px;
        margin-top: 10px;
    width: 33%;
     */
    height: 200px;
    z-index: 1;
    border: #136dfa 1px solid;
    background: #FFF;
    border-radius: 5px;
    }
</style>

{{endblock}}
{{ block content }}

<div style="display:none;">
  {{ formfields }}
 
</div>

<div class="mb-4" style="text-align: left; font-size: 1.1em;"></div>
<p>Antes de comenzar con las preguntas sobre los sellos de advertencia y las calorías, realizaremos <b>una pregunta de práctica</b> utilizando la misma pantalla de respuesta.</p>

<p>Esta pregunta es solo para ayudarle a familiarizarse con la forma de responder. Sus respuestas en esta sección <b>no serán utilizadas</b> en el estudio.</p>

<p>Imagine que hay <b>100 adultos comprando en un supermercado en Chile hoy</b>.</p>
    
<p>Los dividimos en distintos <b>grupos etarios</b> (por ejemplo: 18–29 años, 30–44 años, 45–59 años, 60+ años). En esta pantalla se pueden ver estos grupos de edad en un gráfico con barras.</p>

<p>En esta pantalla:</p>
<ul>
    <li>Para cada grupo etario, utilice el gráfico para indicar qué <b>porcentaje de personas</b> cree que pertenece a ese grupo.</li>
    <li>Para hacerlo, <b>haga clic y arrastre</b> los puntos o las barras hacia arriba o hacia abajo.</li>
    <li>La suma de todos los porcentajes debe ser <b>100%</b>.</li>
</ul> 
<p>También verá los siguientes botones:</p>
<ul>
    <li><b>"Normalizar"</b>: ajusta sus respuestas para que el total sea exactamente <b>100%</b>.</li>
    <li><b>"Deshacer"</b>: elimina su último cambio.</li>
    <li><b>"Reiniciar"</b>: borra todos los valores para que pueda comenzar nuevamente.</li>
    <li><b>"Enviar"</b>: envía su respuesta final para esta pregunta de práctica.</li>
    <li><b>"Omitir"</b>: omite la pregunta.</li>
</ul>
<p></p>
</div>

<div id="probError"
     style="display:none;
            color:#842029;
            background:#f8d7da;
            border:1px solid #f5c2c7;
            padding:10px;
            border-radius:6px;
            margin-bottom:16px;">
</div>


    <!-- Uncomment if title wanted
    <h1 style="text-align: center">
      {{interface_questions}}
    </h1>
    -->

<figure class="highcharts-figure">


    <div class="container">

<div id="timer"></div>


        <div class="row">
    <div class="col">

 <div style="text-align: left;
    /*position: absolute;
        margin-left: 50px;
    right: 50px;
    z-index: 2;*/">
    <button id="undo"  class="btn  btn-warning"  disabled  type="button">Deshacer</button>
    <button id="reset" class="btn  btn-danger" disabled  type="button">Reiniciar</button>
    <button id="normalize" class="btn  btn-info"   type="button">Normalizar</button>
    </div>

    </div>
    <div class="col">
  <div class="mt-0 d-flex justify-content-end gap-2" style="height: 40px">
    <button class="btn btn-success" id="validate_btn" type="submit">
      Enviar
    </button>
  </div>
</div>


  </div>












    <div id="bins_container" style="display: none;    position: relative;width: 100%;">
        <div id="binsliders" class="d-flex justify-content-between">
        </div>
    </div>


    <div id="draw" style="height: 520px;"></div>

</div>
</figure>

<div id="sliders">
   <div class="slider mt-3" id="slider_0"></div>
</div>
<div class="mt-0" style="text-align: center;">
<button id="add_component" style="display: none"  class="btn  btn-warning mt-3" type="button">Add a slider</button>
<button id="remove_component" style="display: none"  class="btn  btn-danger mt-3" type="button">Remove last slider</button>

</div>
<div id="binsinput" class="d-flex justify-content-around"></div>
<div id="alert" style="display:none">You can't add a point so close to another one!</div>

  <div id="topchart" class=" text-center" style="display: none" >
                <div class="btn-group btn-group-toggle" data-toggle="buttons">

                <input type="radio" class="btn-check" name="mode" id="curve-mode" autocomplete="off" value="curve" checked>
                <label class="btn btn-outline-primary" for="curve-mode">Point mode</label>

                <input type="radio" class="btn-check" name="mode" id="bins-mode" autocomplete="off" value="bins">
                <label class="btn btn-outline-primary" for="bins-mode">Bins mode</label>
                </div>

            </div>

<div class="container">
  <div class="row">
    <div class="col text-start">
      <div id="skip_wrapper" style="text-align:left;">
        <button class="btn btn-secondary"
                id="skip_btn"
                type="submit">
          Omitir
        </button>
      </div>
    </div>
  </div>
</div>








{{ endblock }}

{{ block scripts }}
<script src="{{ static 'prediction/nouislider.min.js' }}"></script>
<script src="{{ static 'prediction/math.js' }}"></script>
<script src="{{ static 'prediction/highcharts.js' }}"></script>
<script src="{{ static 'prediction/draggable-points.js' }}"></script>
<script src="{{ static 'prediction/script.js' }}"></script>
<script src="{{ static 'prediction/bootstrap.bundle.min.js' }}"></script>
<!--Script 1-->
<script>
function liveRecv(data) {
  if (!data || !data.data1) return;
  const el = document.querySelector('input[name="data1"]');
  if (el) el.value = data.data1;
}
</script>
<!--Script 2-->
<script>
(function () {
  const TOL = 1e-3;

  function init() {
    const form = document.querySelector('form');
    const errBox = document.getElementById('probError');
    const skippedEl = document.querySelector('input[name="skipped1"]');
    const dataEl = document.querySelector('input[name="data1"]');

    if (!form || !errBox || !skippedEl || !dataEl) {
      console.error('Wiring failed', { form, errBox, skippedEl, dataEl });
      return;
    }

    function clearError() {
      errBox.innerHTML = '';
      errBox.style.display = 'none';
    }

    function showError(html) {
      errBox.innerHTML = html;
      errBox.style.display = 'block';
    }

    function readDataArray() {
      const raw = (dataEl.value || '').trim();
      if (!raw) return null;
      const arr = JSON.parse(raw);
      if (!Array.isArray(arr)) return null;
      return arr.map(v => Number(v) || 0);
    }

    form.addEventListener('submit', (e) => {
      clearError();

      const submitter = e.submitter;
      const isSkip = submitter && submitter.id === 'skip_btn';

      if (isSkip) {
        skippedEl.value = '1';
        return;
      }

      skippedEl.value = '0';

      let arr;
      try {
        arr = readDataArray();
      } catch (err) {
        e.preventDefault();
        showError('No fue posible leer su distribución. Por favor, inténtelo nuevamente.');
        return;
      }

      if (!arr) {
        e.preventDefault();
        showError('Por favor, ingrese una distribución de probabilidades antes de continuar.');
        return;
      }

      const s = arr.reduce((a, v) => a + v, 0);
      const percent = (s * 100).toFixed(2);

      if (Math.abs(s - 1) > TOL) {
        e.preventDefault();
        showError(`<b>Sus respuestas deben sumar 100% para continuar</b> (suma actual: ${percent}%).<br>
          Por favor, ajuste los valores o haga clic en <b>Normalizar</b>, y luego envíe nuevamente.`);
        return;
      }

    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>

{{ endblock }}