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

{% block title %}
    A Tutorial for oTree
{% endblock %}

{% block scripts %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="{% static 'global/prev_next_button.js' %}"></script>

{% endblock %}

{% block styles %}

<link href="{% static 'global/custom.css' %}" rel="stylesheet">


<style>
   .otree-title.page-header{
       font-size: 45px;
   }


p{
    font-size: 22px;
    text-indent:2em;
}
ul{
    font-size: 22px;
}
h2{
    text-align: center;
}

.red{
    color: red;
}

.blue{
    color: blue;
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
    align-items: center;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
}

/* Create three equal columns that sits next to each other */
.column {
  flex: 10%;
  padding: 30px;
}



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

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


.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.expanded:after {
  content: "\2212";
}

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
}



    .form-check-inline{
        margin-right: 25px;
        margin-left: 25px;
    }

  #myTab{
    visibility: visible;
  }

input.box {
    width : 30px;
    height : 30px;
}

.checkboxes label {
  display: inline-block;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
  vertical-align: top;
  margin-top: 3px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

code {
  font-family: Consolas,"courier new";
  color: crimson;
  background-color: #f1f1f1;
  padding: 2px;
  font-size: 105%;
}

.box_container {
  margin: 2px 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
}

.box_container input {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.box_container label {
  margin-left: 5px;
  flex: 1;
  align-self: flex-start;
}

<!--  .nav-container:hover #myTab{-->
<!--  transform: translateY(0);-->
<!--}-->

</style>
{% endblock %}


{% block content %}

<style data="test" type="text/css"></style>
<!-- Tab navigation -->

<div class="nav-container">
<ul class="nav nav-tabs fixed-top navbar-light bg-light justify-content-center " id="myTab" role="tablist">


  <li class="nav-item" >
    <a class="nav-link active" id="part1-tab" data-bs-toggle="tab" href="#part1" role="tab" aria-controls="part1" onclick="topFunction()"> Welcome
    </a>
  </li>

  <li class="nav-item">
    <a class="nav-link" id="part2-tab" data-bs-toggle="tab" href="#part2" role="tab" aria-controls="part2" onclick="topFunction()">Intro video</a>
  </li>

  <li class="nav-item">
    <a class="nav-link" id="part3-tab" data-bs-toggle="tab" href="#part3" role="tab" aria-controls="part3" onclick="topFunction()">Get started</a>
  </li>

  <li class="nav-item">
      <a class="nav-link" id="part4-tab" data-bs-toggle="tab" href="#part4" role="tab" aria-controls="part4" onclick="topFunction()">Link</a>
  </li>

    <li class="nav-item">
      <a class="nav-link" id="part5-tab" data-bs-toggle="tab" href="#part5" role="tab" aria-controls="part5" onclick="topFunction()">Checkbox</a>
  </li>

{#    <li class="nav-item">#}
{#      <a class="nav-link" id="part6-tab" data-bs-toggle="tab" href="#part6" role="tab" aria-controls="part6" onclick="topFunction()">Quiz</a>#}
{#  </li>#}

</ul>
</div>
<br>
<br>


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

  <div class="tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">


{#<div class="card-header bg-transparent mainheader" >#}
{# <h3 class="card-title font-weight-bold"> Tab 1#}
{# </h3>#}
{#  </div>#}
{#<br>#}
    <br>

    <h2><u>Welcome!</u></h2>
    <br>
    <p>

    </p>
      <div style="padding-left: 15%; padding-right: 15%"> <img src="{% static 'Tutorial/wallpaper.png' %}" alt="The wallpaper" width="100%"> </div>
    <br>


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





  <div class="tab-pane" id="part2" role="tabpanel" aria-labelledby="part2-tab">


    <br>
      <div style="padding-left:10%; font-size: 25px;"> An introduction video by
          <a href="https://jonasfrey.net/" target="_blank">Jonas Frey</a> <br>
          <br>
          <iframe width="735" height="415" src="https://www.youtube.com/embed/OzkFvVhoHr0">
</iframe> </div>
  <br>


    <br>
    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">PREVIOUS PAGE</button>
<button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">NEXT PAGE</button>
  </div>


 <div class="tab-pane" id="part3" role="tabpanel" aria-labelledby="part3-tab">

     <br>
      <h2><u>To Get Started</u></h2>

    <br>


    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">PREVIOUS PAGE</button>
    <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">NEXT PAGE</button>
 </div>

    <div class="tab-pane" id="part4" role="tabpanel" aria-labelledby="part4-tab">
        <br>
        <h2><u>Useful Links</u></h2>
        <br>
        <p>Some of the resources might be mentioned before, and I assemble them here for easier referencing.
            <ul>
                <li><a href="https://otree.readthedocs.io/en/latest/" target="_blank">oTree Official Documentations</a></li>
                <li><a href="https://groups.google.com/g/otree" target="_blank">oTree Help & Discussion Google Group</a></li>
                <li><a href="https://www.otreehub.com/projects/?featured=1" target="_blank">Public Project at oTree Hub</a>
                    and <a href="https://www.otreehub.com/code/" target="_blank">Example Code at oTree Hub</a></li>
                <li>Tutorials on HTML, CSS, JS, JQuery, Boostrap provided by <a href="https://www.youtube.com/c/EJMedia1/videos" target="_blank">Youtuber EJ Media</a></li>
                <li><a href="https://www.youtube.com/channel/UCI-kL2lFnRZ73GbmhJfWo4w" target="_blank">oTree tutorials on Youtube</a>  by
          <a href="https://jonasfrey.net/" target="_blank">Jonas Frey</a> <br></li>
                <li><a href="https://www.w3schools.com/html/" target="_blank">HTML Tutorial</a>, <a href="https://www.w3schools.com/css/" target="_blank">CSS Tutorial</a> and
                    <a href="https://www.w3schools.com/js/" target="_blank">JavaScript Tutorial</a> at W3School</li>
                <li>Tutorials on HTML, CSS, JavaScript in Chinese at <a href="https://www.runoob.com/" target="_blank">RUNOOB.COM(菜鸟教程)</a> </li>
                <li><a href="https://stackoverflow.com/">Stack Overflow</a> </li>
                <li>More advanced CSS layout techniques at <a href="https://css-tricks.com/">CSS-TRICKS</a></li>
                <li>Many fancy examples can be found at <a href="https://codepen.io/trending" target="_blank">CodePen</a></li>
                <li>Lastly, do not forget to cite the paper <i><a href="https://doi.org/10.1016/j.jbef.2015.12.001" target="_blank">
                    oTree—An open-source platform for laboratory, online, and field experiments</a></i>
                if you are using oTree for your own research project.
                </li>
<!--                        <li>Luca Henkel</li>-->
            </ul>
        </p>
       <br>

         <br>


    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">PREVIOUS PAGE</button>
      <button onclick="mtopFunction();" type="button" class="nexttab btn-primary btn next">NEXT PAGE</button>
{#    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">PREVIOUS PAGE</button>#}
{#    <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">NEXT PAGE</button>#}
    </div>




  <div class="tab-pane" id="part5" role="tabpanel" aria-labelledby="part5-tab" style="font-size: 22px;">
      <h2><u>Checkboxes</u></h2>
    <div style="font-size:25px">
      To get familiar with oTree, you could follow <a href="https://otree.readthedocs.io/en/latest/install.html" target="_blank">the instructions
      from oTree documentations</a> and fill in the following check boxes.
    </div>
      <br>
      <div class="checkboxes">
        <input type="checkbox" id="box0" name="box0" class="box">
        <label for="box0"> Download and install Python</label><br>
        <input type="checkbox" id="box1" name="box1" class="box">
        <label for="box1"> Install oTree by running <code>pip3 install -U otree</code> in your PowerShell</label><br>
        <input type="checkbox" id="box2" name="box2" class="box">
        <label for="box2"> Install PyCharm (Recommended)</label><br>
        <div class="box_container"><input type="checkbox" id="box3" name="box3" class="box">
        <label for="box3"> Create your own project folder by running <code>otree startproject <i>project_name</i></code>
        in PowerShell at a desirable directory</label></div>
        <input type="checkbox" id="box4" name="box4" class="box">
        <label for="box4"> Created your first app using <code>otree startapp <i>app_name</i></code></label><br>
        <input type="checkbox" id="box5" name="box5" class="box">
        <label for="box5"> Run oTree at your local server using <code>otree devserver</code></label><br>
        <input type="checkbox" id="box6" name="box6" class="box">
        <label for="box6"> Practice with the <a href="https://otree.readthedocs.io/en/latest/tutorial/intro.html" target="_blank">official tutorials</a></label><br>
        <input type="checkbox" id="box7" name="box7" class="box">
        <label for="box7"> Practice with the <a href="https://www.youtube.com/channel/UCI-kL2lFnRZ73GbmhJfWo4w" target="_blank">oTree tutorials on Youtube</a></label><br>
        </div><br>
      <div>
          Please feel free to leave any question or comments you have:<br>
          <textarea id="id_comment" name="comment" rows="8" cols="50" style=" width: 90%;">
          </textarea>
      </div>
<br>
          <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">PREVIOUS PAGE</button>
          <button class="nexttab btn-primary btn next">NEXT</button>
  </div>

</div>

</body>


<script>
   function mtopFunction(){
      topFunction();
<!--      liveSend({"read": 1})-->
    }

<!--    function liveRecv(data) {-->
<!--      if (data.read ==1){-->
<!--              var style = document.querySelector('[data="test"]');-->
<!--              style.innerHTML =".nav{ visibility: visible;}";-->
<!--      }-->
<!--    }-->


<!--The following part is for the navbar slidedown-->
var hoverTimeout;

var hovering = function(){
    clearTimeout(hoverTimeout);
   $("#myTab").slideDown();
};

var leaving = function(){
    hoverTimeout = setTimeout(function() {
           $("#myTab").slideUp();
    }, 1000);
};

$(".otree-title").hover(hovering);
$(".nav-container").hover(hovering, leaving);
$(".tab-contain").hover(leaving);


    function nextpage(){
       var i, items = $('.nav-link'), pane = $('.tab-pane');

      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');
      }
    }

<!--    if (1 == 1){-->
<!--        nextpage();-->
<!--        nextpage();-->
<!--        nextpage();-->
<!--        nextpage();-->
<!--}-->


var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("expanded");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}


</script>



{% endblock %}