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

{% block styles %}
    <style>
            #selected_2 {
background-color: #efe341;
            }

            .wrong {
  border: 0.3em solid red;
  margin: 0.5em;
}
        .right {
  border: 0.3em solid green;
  margin: 0.5em;
}

    .next {
    float: right;
    margin: 40px auto;
    }

 .back{
    float: left;
    margin: 40px auto;
    }



    .page-header {
    margin: 0px 0 5px;
    padding: 0;
    border-bottom: none;
    text-align: center;
}

p{
    text-align: justify;
    text-justify: inter-word;
}


.nav {
    visibility: hidden;
}
    </style>

{% endblock %}


{% block scripts %}

<script>
function bootstrapTabControl(){
  var i, items = $('.nav-link'), pane = $('.tab-pane');
  // next
  $('.nexttab').on('click', function(){
      for(i = 0; i < items.length; i++){
          if($(items[i]).hasClass('active') == true){
              break;
          }
      }
      if(i < items.length - 1){
          // for tab
          $(items[i]).removeClass('active');
          $(items[i+1]).addClass('active');
          // for pane
          $(pane[i]).removeClass('show active');
          $(pane[i+1]).addClass('show active');
      }

  });
  // Prev
  $('.prevtab').on('click', function(){
      for(i = 0; i < items.length; i++){
          if($(items[i]).hasClass('active') == true){
              break;
          }
      }
      if(i != 0){
          // for tab
          $(items[i]).removeClass('active');
          $(items[i-1]).addClass('active');
          // for pane
          $(pane[i]).removeClass('show active');
          $(pane[i-1]).addClass('show active');
      }
  });
}
bootstrapTabControl();


function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
    </script>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}
<ul class="nav nav-tabs fixed-top navbar-light bg-light justify-content-center " id="myTab" role="tablist">


  <li class="nav-item" >
    <a {%  if error == 1 %} class= "nav-link" {% elif error == 0 %} class= "nav-link active" {% endif %} id="part1-tab" data-toggle="tab" href="#part1" role="tab" aria-controls="part1" onclick="topFunction()"> Tab 1</a>
  </li>
  <li class="nav-item">
    <a {%  if error == 0 %} class= "nav-link" {% elif error == 1 %} class= "nav-link active" {% endif %} id="part2-tab" data-toggle="tab" href="#part2" role="tab" aria-controls="part2" onclick="topFunction()">Tab 2</a>
  </li>

</ul>



<!-- Tab content -->
<div class="tab-content" id="myTabContent">

<div {%  if error == 1 %} class= "tab-pane" {% elif error == 0 %} class= "tab-pane show active" {% endif %} id="part1" role="tabpanel" aria-labelledby="part1-tab">



 <h3  align="center"  >  Belief - one after the other
 </h3>
        <br>
        <br>
Please choose between the options below.
      <hr>
      {{ include 'MR/BeliefList_50_s.html' }}







<button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
  </div>




<div {%  if error == 0 %} class= "tab-pane" {% elif error == 1 %} class= "tab-pane show active" {% endif %} id="part2" role="tabpanel" aria-labelledby="part2-tab">

      <h3  align="center"  > Belief - one after the other </h3>
      <br>
      <br>
      Please choose between the options below.
      <hr>
      {{ include 'MR/BeliefList_50_o.html' }}


<button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
<button class="nexttab btn-primary btn next">Next</button>


</div>



  </div>



{% endblock %}