Counting the amount of clicks

[famehs...@gmail.com]

Dear all,

I am trying to add a simple calculator to the pages where subjects make an investment decision (for trial I just used a public goods app from templates) . The calculator works for two numbers and when I clich "calculate" the result appears. For now I left the calculation process as summation for simplicity. I also added a function to the "Calculate" button to count how many times one used it. 

Now I want to store the amount of clicks made by subjects in each page.  I tried to research it in previous questions but I have very limited experience in js.  Please find my code below :

1. Models:

class Player(BasePlayer):

      num_clicks = models.IntegerField()

Template:

{% formfield 'contribution' %}

<script>
//calculator functions
function bank()
{
let x = document.getElementById("val1").value;
let y = document.getElementById("val2").value;
return +x + +y;
}

function solve()
{
let x = document.getElementById("val1").value;
let y = document.getElementById("val2").value;
document.getElementById("result").value = bank(x,y);
}

//counting the amount of clicks
var clicks = 0;

function track() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}

</script>

<!-- values to be entered -->

First number: <input type="number" id = "val1" />
<br>
Second number: <input type="number" id = "val2" />
<br>
<button type="button" onclick="track();solve()">Calculate</button>
<br>
Result: <input type="text" id="result"/>
<br>

<!-- shows the amount of clicks to check if the function works. Will not be seen by subjects in the experiment -->

Clicks: <a id="clicks">0</a>

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

{% next_button %}
  

Thanks in advance for your helps,

Fatih

 

[Olaf Ghanizadeh]

Have you checked the example that covers this in the docs?

https://otree.readthedocs.io/en/latest/forms.html#raw-html-example-custom-user-interface-with-javascript

[famehs...@gmail.com]

Yes, I did. When I write form_fields = ['contribution','num_clicks'] in pages, I have to add formfield for num_clicks in template, otherwise I receive an error (fix your template). And when I add the form field for it,  num_clicks appear as a box just like "Contribution". Also num_clicks stays empty in the data.

2 Mayıs 2021 Pazar tarihinde saat 23:16:51 UTC+3 itibarıyla laff...@gmail.com şunları yazdı:

[Chris @ oTree]

You don't ever write a value to the hidden field. You have this:

document.getElementById("clicks").innerHTML = clicks;

But 'clicks' is just an <a> element.

You would need this also:

document.getElementById("num_clicks").value = clicks;

[famehs...@gmail.com]

I added as you said:

document.getElementById("num_clicks").value = clicks; 

to the "function track()" and it worked out. Thank you so much. 

3 Mayıs 2021 Pazartesi tarihinde saat 01:57:52 UTC+3 itibarıyla Chris @ oTree şunları yazdı:

[X. Zhou]

I happened to come across the same issue -- counting the number of clicks on a DOM.

The issue with the solution is if anyone refreshed the page, then the number will be incorrect.

I solved the issue using the following method related to live pages:

In the page you define: 

@staticmethod

def live_method(player, data):

player.num_tries += data

and in the JS you do:

function sendValue() {

liveSend(1);

}

calcBtn.addEventListener("click", sendValue);

Hope this helps others.