Hi all,

I would like to ask if Otree studio is capable of moving between pages. The next button is already given, but I also want back buttons. I found many valuable codes in the demo snippets, but I am having trouble incorporating them into Otree Studio. Would ask for instructions, and thank you!

RW

Hi, I have not put these apps in oTree Studio yet (would like to do so when I get a chance), but here's how you can do it:

(1) Create an includable template called 'tabs', and paste the full content from 'tabs.html' into it.
(2) Create a page called "Instructions" and from Instructions.html, copy just the stuff between {{ block content }} ... {{ endblock }}, that is:

<style>
    .tab {
        display: none;
    }
</style>

{{ include C.TABS_TEMPLATE }}

<script>

    let activeTab = 0;
    let tabs = document.getElementsByClassName('tab');

    function showCurrentTabOnly() {
      for (let i = 0; i < tabs.length; i++) {
        let tab = tabs[i];
        if (i === activeTab) {
          tab.style.display = 'block';
          tab.scrollIntoView();
        } else {
          tab.style.display = 'none';
        }
      }
    }

    showCurrentTabOnly();
    for (let btn of document.getElementsByClassName('btn-tab')) {
        btn.onclick = function () {
            activeTab += parseInt(btn.dataset.offset);
            showCurrentTabOnly();
        }
    }
</script>

Hi Chris,

Thanks for the reply! It looks like I can only edit contents in the includable template. I wonder if there is any way I can add the back button or previous tab in "pages" where I used "form_fields" to import functions. Thanks for your help!

RW

You create 1 regular page called "Instructions" that can have form_fields, etc. And create 1 includable template called 'tabs' that gets included in the Instructions page.