#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?