{% extends "global/Page.html" %}
{% block title %}Preguntas principales{% endblock %}

{% block content %}

<p>Las rondas de práctica han terminado. La siguiente parte de la encuesta contiene las preguntas clave de este estudio. <b>Usted tiene la posibilidad de ganar un bono de 180 pesos, dependiendo de la precisión de sus respuestas.</b></p>

<p>La idea es la siguiente: usted obtendrá puntos por realizar una estimación precisa. En particular, mientras más cercana sea su respuesta al valor numérico real, más puntos obtendrá. Al final del estudio, sumaremos todos los puntos que haya obtenido y le asignaremos el bono de 180 pesos con una probabilidad que depende del total de puntos acumulados. En específico, mientras más puntos obtenga durante el estudio, mayor será la probabilidad de que gane el bono.</p>

<p>
Los detalles del sistema de puntaje utilizado para determinar su probabilidad de ganar el bono de 180 pesos son un poco complejos
(puede encontrar una descripción <a href="/static/prediction/points.html"
   id="pointsLink"
   target="_blank"
   rel="noopener">
   aquí</a>).
Lo importante es que el procedimiento mediante el cual se asigna el bono asegura que siempre sea de su mejor interés entregar su estimación más precisa en cada pregunta.
</p>

<p style="color:#842029; font-weight:600;">
Importante: si omite una pregunta, <u>no obtendrá puntos</u> por esa pregunta, lo que reduce su probabilidad total de ganar el bono de 180 pesos.
</p>

<!-- Popup (hidden by default) -->
<div id="popupOverlay" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9999;">
  <div style="background:white; max-width:700px; margin:10vh auto; padding:20px; border-radius:10px;">
    <div style="display:flex; justify-content:space-between; align-items:center; gap:10px;">
      <h5 style="margin:0;">Point system details</h5>
      <button type="button" id="popupClose" class="btn btn-sm btn-secondary">Close</button>
    </div>
    <hr>
    <div id="popupBody" style="max-height:60vh; overflow:auto;">
      <style>
code {
  font-family: "Times New Roman", serif;
  font-size: 1em;
}
</style>
      <p><b>Así funciona el sistema de puntaje:</b></p>

<ul>
  <li>
    Usted recibirá entre 0 y 100 puntos por cada intervalo (bin) en cada pregunta.
  </li>

  <li>
    Para cada intervalo \(n\), sus puntos se calculan de la siguiente forma:
    \[
      y_n = 100 \cdot \left( 1 - |x_n - g_n| \right)
    \]
    donde:
    <ul>
      <li>\(y_n\) es el número de puntos que obtiene por ese intervalo,</li>
      <li>\(x_n \in [0,1]\) es la probabilidad correcta del intervalo,</li>
      <li>\(g_n \in [0,1]\) es su estimación.</li>
    </ul>
    Si \(g_n = x_n\), usted obtiene 100 puntos.  
    Si \(|x_n - g_n| = 1\), usted obtiene 0 puntos.
  </li>

<li>
    En general, mientras más cercana sea su estimación a la probabilidad correcta, más puntos obtendrá.
  </li>

  <li>
    Sea \(N\) el número total de intervalos.  
    El promedio de puntos se calcula como:
    \[
      \overline{Y} = \frac{1}{N} \sum_{n=1}^{N} y_n
    \]
  </li>

  <li>
    Su probabilidad \(p\) de ganar el bono es:
    \[
      p = \frac{\overline{Y}}{10000}
    \]
  </li>
</ul>
    </div>
  </div>
</div>

{{ formfields }}
{{ next_button }}

{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
(function () {
  const link = document.getElementById('pointsLink');
  const overlay = document.getElementById('popupOverlay');
  const closeBtn = document.getElementById('popupClose');

  function openPopup(e) {
    // If user is trying to open in new tab/window or using non-left click, let browser do it.
    if (
      e.metaKey || e.ctrlKey || e.shiftKey || e.altKey ||   // modifiers
      e.button !== 0                                       // not left click (0=left,1=middle,2=right)
    ) {
      return;
    }

    // Normal left-click: open popup instead of navigating
    e.preventDefault();
    overlay.style.display = 'block';
  }

  function closePopup() {
    overlay.style.display = 'none';
  }

  link.addEventListener('click', openPopup);
  closeBtn.addEventListener('click', closePopup);

  overlay.addEventListener('click', (e) => {
    if (e.target === overlay) closePopup();
  });

  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closePopup();
  });
})();
</script>
{% endblock %}