{{ extends "global/Page.html" }}
{{ block title }}
Today's experiment - Part 1
{{ endblock }} {{ block content }}
<div class="otree-form-errors alert alert-danger" id="incorrect-alert" style="display: none"></div>
{{ include 'global/InstructionTabs.html' with part=1 }} {{ endblock }} {{ block
styles }}
<style>
  .example-container h6 {
    margin-bottom: 1rem;
  }

  .example-container img {
    display: flex;
    border: thin solid whitesmoke;
    border-radius: 1%;
    width: 100%;
  }

  .card-header {
    font-weight: bolder;
    font-size: 85%;
    opacity: 80%;
  }

  .nav-tabs .nav-item.show .nav-link,
  .nav-tabs .nav-link.active {
    background-color: transparent;
    border-color: transparent;
  }

  .nav-link {
    padding: 0.5rem 1.5rem 0.5rem 0;
  }
</style>
{{ endblock }} {{ block scripts }}
<script>
  const triggerTabList = [].slice.call(
    document.querySelectorAll("#myTab button")
  );
  triggerTabList.forEach(function (triggerEl) {
    const tabTrigger = new bootstrap.Tab(triggerEl);

    triggerEl.addEventListener("click", function (event) {
      event.preventDefault();
      tabTrigger.show();
    });
  });

  function showTab(nextTarget) {
    const triggerEl = document.querySelector(
      `#myTab button[data-bs-target="${nextTarget}"]`
    );
    bootstrap.Tab.getInstance(triggerEl).show(); // Select tab by name
    window.scrollTo(0, 0);
  }
</script>
<script>
  const liveBtn = document.getElementById("live-btn");
  const form = document.getElementById("form");
  const inputs = form.getElementsByTagName("input");
  const errMsg = document.getElementById("incorrect-alert");
  let values = {};

  function showError(msg) {
    errMsg.innerText = msg;
    errMsg.style.display = "block";
    window.scrollTo(0, 0);
  }

  liveBtn.onclick = function () {
    console.log("in livebtn click");
    errMsg.style.display = "none";
    for (let input of inputs) {
      let val = input.value;
      console.log(val);
      if (isNaN(val)) {
        showError("Please use numbers only.");
        return;
      }
      if (!val) {
        showError("Please answer all comprehension questions.");
        return;
      }
      values[input.name] = parseFloat(val);
    }
    liveSend(values);
  };

  const start = new Date();
  async function liveRecv(data) {
    if (data == true) {
      const end = new Date();
      const timeOnPage = (end - start) / 1000;
      await liveSend({ time_on_page: timeOnPage });
      form.submit();
    } else {
      showError("One or more of your answers are incorrect. Please try again.");
    }
  }
</script>
{{ endblock }}