Can I show keyboard response to the participant?

Comments

• Fab

  February 2022 edited February 2022

  Hi @Soan,

  The short answer to your question is: no, it is not possible to do without coding...

  However, the good news is that coding is not an issue (if the code is correct, it does not make your task less stable), and that using Javascript code, your experiment can run just fine in a browser.

  Here's how to do it...

  The first thing to know is that you can display text on a picture, but if you want that text to be dynamically generated (i.e., its content to change as the trials unravel), you must use a feedback object rather than a sketchpad object. This is because sketchpad are prepared ahead of the sequence being executed, which means that it is not possible to use the subject's last recent response as the content of the text you want displayed.

  The second important thing is this: in order to display multiple responses while the picture is on the screen, you need to build a variable that will accumulate responses so far, such that you can use that variable as the text to be displayed. For that, you need to take keyboard responses within a loop that only gets interrupted when a certain condition is met.

  I took some time to put together a demo for you. It displays 3 images and takes 3 responses for each. Here's the structure:

  

  Notice the two loops. Loop 1 correspond to the three trials, while loop 2 allows the recording of multiple keyboard responses per trial. When I say "multiple", I mean 100 in this case (see cycles in the loop's settings):

  

  One hundred iterations should be more than enough to take all the responses from the subject (i.e. producing responses and allow the participant to use backspace to delete the last one multiple times).

  Allowing participants to correct their responses actually requires a little more coding because you want to make sure that "backspace" itself is not registered as a response but is used to update the list of responses and modify the information displayed on the screen appropriately.

  To begin, we need a variable that will store the 3 valid responses per trial. We also need to set the response counter to zero. This variable needs to be reset at the onset of every trial. We can do this in the setup_concatenate inline object:

  vars.concatenated=""
  vars.respcount=0
  

  In the trial_sequence, we can use a feedback object (show_picture) to display a picture and the content of vars.concatenated. We pull the image from the image variable in my_loop and display vars.concatenated inserting [contanenated] over the image on the feedback object.

  We set the duration of the 0 ms and insert a keyboard object just after to take a response.

  To avoid certain problems such as the participant pressing function keys and these being registered as responses (e.g., if the participant presses the ENTER key, a response with the value "ENTER" will be registered, which is not desirable). So, we need to ensure that we define the allowed keys to include all alphanumerical characters as well as the backspace key:

  

  Afterward, we need to process that response. We do so using Javascript inside concatenate_responses. There we need to distinguish between the backspace response and all the other responses allowed, for different things must happen for these. If an alphanumerical response is produced, we should take it and add it to the list of valid response registered, and increment the response counter by one unit. If backspace is pressed, we need to remove the last response registered from the stored list, and decrement the response counter by one unit (adding the extra condition that all this should only happen if the response counter is greater than zero; otherwise if the participant pressed backspace too many times, you would end up with a negative response counter).

  What I just described translates as follows in Javascript code:

  if (vars.response == 'backspace') {
     if (vars.respcount>0) {
     vars.concatenated=vars.concatenated.slice(0, -1)
     vars.respcount-=1
     }
  } else {
     vars.concatenated+=vars.response
     vars.respcount+=1
  }
  
  // output to console for checking
  console.log ("Last response: "+vars.response)
  console.log ("All registered responses: "+vars.concatenated)
  console.log ("Valid response count: " +vars.respcount)
  

  Note that I also added some code to output key variables to the console (always a good idea when you program, just to check in real time what is going on).

  As it stands, the picture will remain on the screen while the responses are taken and displayed. Because the _3resp_loop will exit when vars.respcount is equal to 3, the image will disappear before the participant would see their last response on the screen. To fix this, I added one feedback object (show_picture_with_last_response) just after the _3resp_loop, that stays on for 500ms.

  This is basically how to do what you're after. I don't think you can do it without any code, but as you can see the above solution uses little code and that code is quite straightforward.

  You can download my example here.

  Note that you'd still need to add a logger and configure it (in OSWeb, the compatibility check will flag an error if you leave the "Log all variables" option enabled. You'll have to make sure you include all the variables you need in the output!

  Hope this helps,

  Fabrice.

  
• Soan

  March 2022

  Thank you for your time and effort on this, Fabrice. It was a great help. I've sent you coffee ;) Thank you.

  I posted a new question. Since you're an expert in Javascript, could you take a look at my post, if you are available? Thank you so much...

  https://forum.cogsci.nl/discussion/7846/moving-window-with-javascript/p1?new=1
• Soan

  March 2022 edited March 2022

  I have a follow-up question here: Please help me out...! https://forum.cogsci.nl/discussion/7909/sort-the-concatenated-response-and-compare-it-to-the-answer#latest