How to make a button to record a value to database if it is clicked on?

[Fedor Sandakov]

Dear all,

I am just a beginning research assistant, and I have been programming in oTree only for several months. I've bumped into an issue that I haven't faced yet and cannot find a good explanation online so far. If you could explain what I have to write, I would be very grateful.

What I need is the variable show_scores to take the value 1, if the player presses the button.   

In models I have:
class Group(BaseGroup):

    show_scores = models.BooleanField(initial=0)

Pages:

class Prize(Page):

    form_model = models.Group

    form_fields = ['show_scores']

Html page:

<p>
    <button id="btn" class="btn btn-primary" data-toggle="collapse" data-target="#collapseCard" aria-expanded="false" aria-controls="collapseCard" name="show_scores" value="True">
Button name
    </button>
</p>
<div class="collapse {% if group.show_scores %} show {% endif %}" id="collapseCard">
<div class="card card-body">
{% BUTTON TEXT HERE %}
</div>
</div>

<input type="hidden" name="show_scores" id="show_scores" />

From what I read, it seems that I have to write JS to code for show_scores to change the value to 1 if the button is clicked. Is that right?

I've tried searching online but haven't found the answer on how to do that code-wise. Could anyone explain please what I have to write for the variable to change in my database?  

Sincerely,
Fedor

[Chris @ oTree]

<button name="show_scores" value="True">click me</button>

[Fedor Sandakov]

The button in the code above already has the options name="show_scores" and value="True" inserted. Its function is not only to assign the value 1 to show_scores  but also to unveil some information that is hidden if the subject does not press the button. When the code is run, the phrase  "Please fix the errors in the form"  appears on the screen, and the value of show_scores remains to be 0. 

If I replace all the html code that I posted above with what you suggest, no mistake appears,  show_scores  takes value 1, and a subject moves to the next page; however, the idea is that the value has to take 1 if a subject decides to see the information.
I've inserted {{ form.show_scores.errors }} to the html page to better understand what the problem is, but it leads only to "This field is required." getting displayed.

[Chris @ oTree]

Try removing the <input type="hidden", since it has the same name and may be interfering.

[Fedor Sandakov]

On this page, there is also another choice a person makes - a simple A or B RadioSelect through {% formfield group.prize %}. If the <input...> line is removed, the show_scores value changes when the button is clicked, but only if the second choice is already selected (if prize  choice is not done yet, the value of  show_scores  remains to be 0 for some reason). In our concept, the timeline should be the opposite: first, a person decides whether to see info hidden by the button with show_scores, then chooses the A or B option for the prize variable. 

Moreover, the next page doesn't come when the Next button is used unless the show_scores button is clicked (the phrase "this field is required" occurs). Also,  as soon as the show_scores button is clicked the next page comes, and it is not supposed to. I've tried adding type="button" into the show_scores button so that it would not lead to page submission, and it works, but the show_scores  variable stops changing when the button is used, and hence the page does not get submitted at all.
To sum up, the 2 main problems are
1) For some reason, the show_scores is required to change to 1 for the subject to proceed to the next page -- we don't want that (there has to be a freedom of choice)
2) The page gets submitted if the button with show_scores is clicked, and if type="button" is inserted, the value of  show_scores is not recorded.

[Vic vP]

Hi all,

I am also trying to get collapse to work in the new oTree version (>5). This worked for me before for older versions of oTree, but now it does not seem to work. I am a little puzzled why.

My HTML code:

<button id="button" type="button" data-text-swap="Hide Instructions" data-toggle="collapse" class="btn btn-primary" style="color: rgb(255,255,255); background-color: rgb(0,123,255);" data-target="#collapsed_instructions">Show Instructions</button>

<div id="collapsed_instructions" class="collapse">

<p>

Collapsed Text

</p>

</div>

When I inspect the raw html document, the collapse does not do anything when it is pressed.

Best,

Victor

[Vic vP]

Oke, for oTree lite, everything "data-" changed to "data-bs-". It works when I changed it.

<button id="button" type="button" data-text-swap="Hide Instructions" data-bs-toggle="collapse" class="btn btn-primary" style="color: rgb(255,255,255); background-color: rgb(0,123,255);" data-bs-target="#collapsed_instructions">Show Instructions</button>

<div id="collapsed_instructions" class="collapse">

<p>

Collapsed Text

</p>

</div>

[Ttac Weijia Wang]

Hi,

I am having the same exact problem here. 

On my page, there is a button that participants can click on to reveal some extra information, this is not required. I would like to record whether participants clicked on it or not. I also have a next button that everyone needs to click on in order to move on.

However, if I want a "reveal" button that does not submit the page (with type="button"), then my formfield is not filled or the initial value of False is not changed to True. 

Has anyone figured this out yet? 

Best,

Weijia

[Malte N]

Create a new form field for the player

call it "hidden_field"

Add the following lines to your html

<input type='hidden' name='hidden_field' id='hidden_field'}/>
{{ formfield_errors 'hidden_field' }}

<button type="button" onclick="recordReveal()">Reveal</button>

<script>
function recordReveal(){
document.getElementById('hidden_field').value = True;
}
</script>

I didn't test it, but it should work in principle