Dear Chris (Chris_oTree),

Would it be possible to include an “id” attribute for EVERY HTML element that is generated by oTree in a future oTree version?

For instance, the button generated by {{ next_button }} is not assigned an “id” attribute. The same holds for various elements generated by {{ formfields }}, such as the options included in a dropdown list or the labels of radio buttons.

Each and every element having a dedicated “id” attribute would make it much easier to address them with JavaScript via document.getElementById('...'). This would make it easier, for instance, to hide or reveal particular elements of a dropdown list based on a participant’s previous answers in a questionnaire.

Best,

Holger

I second this request (if possible and manageable ofc :-)).

Hi, thank you for the suggestion.

I don't see the need for id= attributes, since there are many ways to select elements in JavaScript, not just by id. In addition to getElementById, there is getElementsByName, getElementsByClassName, etc. And even more flexible is querySelector (or jQuery $ function), which lets you select elements with CSS selectors.

For example if you have a dropdown for users to select their favorite color, you can hide the option for 'red' like this:

$('[name=color] [value=red]').hide();

The CSS selector syntax is very powerful and can select according to all kinds of different criteria.

With the next button, the selector is the class "otree-btn-next". It would not be correct to use the 'id' attribute because there can be more than 1 next button on a page, and id should be unique.

Another consideration is keeping the HTML as simple as possible. I want people to be able to read the page source code so they can understand how to implement their own widgets with raw HTML. The more attributes we have, the more possibility for confusion. For example, oTree generates an id for each input, and I already see people getting confused by the difference between 'id' and 'name':

<select class="form-select" id="id_color" name="color" required>

People are not sure which one is required or if both are required for the field to work. Actually the 'id' doesn't matter. (This is just something that was automatically generated by Django.)