oTree Forum >

Hide forms and track time spent on page

#1 by Juanfran

Hello all,

I switched from the old oTree to the new oTree format recently and, given the amount of novelties, I am struggling with some changes in the architecture and the change of elements.

In a previous project, I used hidden form fields to get some information (using JS to add collect the information), such as the time spent per page or creating attention checks. However, the method I used to hide form fields in the past, {{ form.field.as_hidden}}, seems not to work anymore.


Is there any other/new method to hide a form field?
Also, what are the methods in the new oTree (version >5) to track time nowadays?

Below I leave an example to track time that worked in the old oTree (tried to be converted to the new syntax). Unfortunately, I get the following error: "UndefinedVariable: Cannot resolve the variable 'form.timeJS.as_hidden' (line 154, in "form.timeJS.as_hidden")"
Add this to the HTML file of the correspondent page:
{{ block scripts }}
    <script>
        $(window).on('load', function () {
            let page = js_vars.page_ID,
                start = localStorage.getItem(page),
                timeInput = $('input[name=timeJS]'),
                times = timeInput.val();

            if (start === null) {
                start = Date.now();
                localStorage.setItem(page, start)
            }

            if (!times) {
                times = {};
            } else {
                 times = JSON.parse(timeInput.val());
            }

            $('.otree-btn-next').on('click', function (e) {
                let now = Date.now();
                times[page] = now - start;
                timeInput.val(JSON.stringify(times));
            })
        })
</script>
{{ endblock }}


{{ block content }}
    <p> Press the button below to continue.</p>

<div style="display: none;">
    {{ form.timeJS }}
</div>
{{ formfield_errors 'timeJS' }}

{{ next_button }}
{{ endblock }}

where timeJS = models.LongStringField() is the only form field entered in the page correspondent to the previous HTML text


Thank you very much in advance.

Best,

Juanfran

#2 by ed_baker

Did you find a solution?

Write a reply

Set forum username