Updating the value of the button press counter

[rMinion]

Hi Guys!

This is my first experiment with jspsych.

Background:
I'm struggling with updating the value of the button press counter. The counter is increasing with every press of a certain key (i.e. "a"). I want to show this to the user.

I have ended up with setInterval:
var t = setInterval(function() { document.getElementById("display").innerHTML = A_counter; }, 100);

The "display" element is an HTML span element updated every 100 ms with the A_counter JS variable. by innerHTML method. A_counter is a global variable increased with each key-press (I know that its correctly defined and updating accordingly)

This solution is not elegant or efficient, especially that I would like to add some additional counters for other keys and I would need to add also additional setInterval functions.

Problem:

1. How can I update the value displayed in span only when a certain js variable changes its value?

2. Why the code above doesn't work when added to "on_start" ?
   on_start: function(){ (function() { document.getElementById("display").innerHTML = A_counter; })

[Aodarium]

Hi!

1. One way of doing is having a setInterval running in the background in order to check changes and therefore adapt values. Otherwise you could try to code a "variable change handler" but it may be more complicated.
2. What would you like to do with this function? As for now, the function within the function may be one reason the code is not running, you could simply have on_start: function(){ (document.getElementById("display").innerHTML = A_counter; })
   In case you want to change the value of an already existing trial/slide, you could do something like on_start: function(SLIDETOCHANGE){ (SLIDETOCHANGE.stimulus = A_counter; })

[rMinion]

Thx for the reply! In the second option, how would you combine the HTML elements (static elements) and java script variable (dynamically changed counter) in a single stimulus parameter? Is it possible?

[Aodarium]

If I understand correctly, you have something like <div>some blablabla MYVARIABLETOUPADTE and some more blablabla<div> and you want to modify MYVARIABLETOUPADTE.
For that, you can use the `` quotes (not the usual '' or "" ones) and therefore do:
<div>some blablabla ${currentValue} and some more blablabla<div>
(have a look at this link to get more details - https://stackoverflow.com/questions/7790811/how-do-i-put-variables-inside-javascript-strings)

So to encapsulate everything, you could have:

var welcome1 = {
    type: "html-button-response",
    stimulus: "some texts",
    choices: ["Continue"],
    on_start: (welcome1 ) => {
        welcome1.stimulus = `my new content with value: ${mycurrentvalue}`;
    }
};

With this code, each time you call "welcome1", it will have your "mycurrentvalue" in it. Is that what you were asking?

[rMinion]

Late but sincere thank you!

[becky-gilbert]

If you want the display to be updated with the current value of your variable as it is updated during a single trial, then I think you'll want to use a keyboard event handler (as @Aodarium suggested). This allows you to do something in response to any keyboard event.

The counter is increasing with every press of a certain key (i.e. "a")

Does this mean you already have a keyboard event handler that is capturing these key presses and incrementing a counter? If so, then inside that same event handler, you could update the display as well. And if you want to add some additional counters for other keys, you could do that all in the same event handler. Something like this (not tested):

var A_counter = 0;
var B_counter = 0;

document.addEventListener('keydown', function(e) {
  if (e.key == 'a') {
    A_counter++;
    document.getElementById("display_A").innerHTML = A_counter;
  } else if (e.key == 'b') {
    B_counter++;
    document.getElementById("display_B").innerHTML = B_counter;
  }
});