{{ extends "global/Page.html" }} {{ block title }} Welcome to Part 2 of the
experiment! {{ endblock }} {{ block content }} {{ include
'global/InstructionTabs.html' with part=2 }} {{ endblock }} {{ block styles }}
<style>
  .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 start = new Date();
  liveBtn.onclick = async function () {
    const end = new Date();
    const timeOnPage = (end - start) / 1000;
    await liveSend({ time_on_page: timeOnPage });
    form.submit();
  };
</script>
{{ endblock }}