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

{% block styles %}
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
</style>
{% endblock %}


{% block scripts %}
<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>
{% endblock %}

{% block title %}
    Quiz: Basic Ideas
{% endblock %}

{% block content %}

    <p>
    Before we start the experiment, please answer the questions below. You need to get the correct answers to move to the next page.
    </p>

    {% formfields %}


    {% next_button %}

<button type="button" class="collapsible">Review the Instruction</button>
<div class="content">
  {% include Constants.instructions %}
</div>

{% endblock %}