Re: [oTree] Timestamps based on Javascript/HTML

[Chris Crabbe]

Hi Katy -

The way that I would pass this back to oTree would be to add a hidden form field, and populate the value of that field with this time using javascript (probably the javascript method you call when that "close game" button is clicked). 

Once the data is in the form field (and that form field is in your Page's form_fields list), it is submitted when oTree's form is submitted (and the data will automatically be saved into the database)

There's a bit in the documentation about that here:  https://otree.readthedocs.io/en/latest/forms.html?highlight=hidden#raw-html-example-custom-user-interface-with-javascript

Thanks,

--Chris

On Tue, Mar 30, 2021 at 6:38 AM Katy Tabero <k.ta...@gmail.com> wrote:

Hello, 

I am only just learning code, and then how that code works in oTree, so I apologise if this is a basic question but I cannot find an answer elsewhere. 

I have designed an experiment with a real effort task where participants can choose to complete the task or play a game on a html modal screen (effectively a pop up that is triggered by a button and closed with another button). Everything currently functions well but I need a way to record how long participants spend on the game screen compared to the task screen. The simplest way to do this seems to be recording the difference between when they click the 'play game' button and the 'close game' button - but is there any way to send this information to oTree given the buttons are all in html and do not submit any forms? 

Any advice or resources e.g. documents or examples of timestamps being used like this, would be greatly appreciated. 

Best wishes, 

Katy

--
You received this message because you are subscribed to the Google Groups "oTree help & discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to otree+un...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/otree/8a61ab6e-688d-4f5a-949b-840cd30c41e5n%40googlegroups.com.

[Katy Tabero]

Hi Chris, 

Thanks for pointing me in the right direction. 

I first built the code in a html viewer to check that everything was working correctly - to do this I used "document.getElementById('variable_name').html = var" to see that the variables were updating. When I added them into oTree using text editor I changed each of these to "document.getElementById('variable_name').value = var" as in the example on the link you sent. However, when I test the programme using zipserver, I am able to see the hidden fields and they require manual data entry, rather than taking the values of the variables e.g. f_time, time, and games_played. Do you have any idea what might be causing this? I have added some images below so you can see what I have.

models.py:

pages.py:

html body:

html script:

I feel like I am missing something obvious, but cannot see what I am doing wrong. 

Best wishes, 

Katy

[Chris @ oTree]

Does your template contain a {{ formfields }} or {% formfields %} element? if yes, you should delete it, because that will be redundant with the hidden fields you are adding manually.

apart from that, you can troubleshoot by using console.log() statements throughout your javascript code, to make sure all your code is being executed as you expect it to.

[ccr...@gmail.com]

Hi Katy -

I noticed that in your template you have set the same "name" attribute for two of your hidden fields (although the ids are unique).  I don't know why this would cause the problem you're having, but I would see if fixing that fixes anything.

Chris's advice about the console.log statements is the way I would tackle this behavior - you can use it to make sure that your onclick functions are working when you expect them to, and also it will make sure that you notice any javascript errors you're getting in the console.  Any one javascript exception will stop all javascript from running on your page in the future, so if it seems like things are broken, a javascript error earlier on is often the cause.

Thanks,

--Chris

[Katy Tabero]

Thank you both for your help. 

I deleted the {% formfields %} element and that has made the fields invisible, as well as correcting the duplicate name issue which I must have forgotten to change when I copied it. I get an error message now to 'fix errors in the form', but I am at least glad to have an error I can work with! I will try debugging using console.log and hopefully have something functional soon. 

Best wishes, 

Katy