Templates for online questionnaires

Comments

• Sannee

  February 2021

  Hi!

  I’m currently creating an experiment in JavaScript in which people will have to rate how likely they think a certain outcome will be according to stimuli they see. I’ve finished it in Python, but we want to run it online so I’m translating it to JavaScript. Since the original Python did indeed use Forms I thought these would really help me. I have however never worked with the mouse or keyboard response options, so I have some questions. I am currently mainly struggling with the interaction between OpenSesames parts (such as the mouse response and the keyboard response) and the JavaScript parts (implementing where can be clicked etc).

  First of all I need a continue button just like the ones used in both the multiple choice example and the rating example. From what I understand from the files you initialize a mouse_response which works in any of the following feedback items (as the linked sketchpad is set to “No item selected”). Then you only repeat the cycle by setting a condition for the new_repeat_cycle as otherwise it would just continue if you would click everywhere.

  However what I don’t really understand are the following things:

  1) How do you access the input that the mouse_response gets? Is this vars.my_cursor_x or vars.cursor_x for the X coordinate for example?

  2) I’m not quite sure why you set the coordinates of the continue box in experimental_loop? In my experiment I know where the box is going to be, so can I not just implement some sort of if-loop stating that “if the cursor is between these x and y coordinates, and clicked, then set a value to yes”. Without first having to implement these coordinates in a loop over the whole experiment?

  3) Kind of a combination of the first and the second question, but how do you know if a person clicked or not? Is there some value such as vars.cursor.clicked or something that I can address?

   

  Second of all, and this is not really related to the examples you’ve shown, but still in the same vein, are the ratings that need to be given. (If I need to make a separate topic for this part please tell me!)

  I want people to be able to select the text box they want to type something in, then for them to type something and click on another box to go and type something there. There is a topic on text input here: https://forum.cogsci.nl/discussion/4737/text-input-form-for-use-with-jatos but this is either input in just a single box (so no switching needed) or switching is done via the enter button, which won’t allow people to go back and fix their input.

  Is something like this possible? And if yes how would I implement it?

  And basically the same question as with the mouse here as well, how would you know if a certain field is filled in with values? So how would I access the information that the keyboard response item gathers.

  In the form option of Python there is an option to fill in a sort of text that will be displayed (e.g. “Rate”) which then disappears when a participant clicks on the box, is something like that also possible in the JavaScript implementation?

  BasisClickerExperiment.osexp

  
  

  Kind regards,

  Sanne
• lvanderlinden

  February 2021 edited February 2021

  Hi @Sannee ,

  
  

  Thanks for your post! :)

  First off, I just uploaded a video on how to use regions of interest in OSWeb. This can perhaps be of help:

  • https://www.youtube.com/watch?v=-L9pzw4tpx8

  
  

  Indeed, OSWeb does not (yet) support linking sketchpad items to mouse_response items nor naming elements in sketchpads. Therefore, we need some JavaScript.

  How do you access the input that the mouse_response gets?

  
  

  The (x,y) coordinates of the mouse clicks are stored in the built-in variables called "cursor_x" and "cursor_y", respectively. These coordinates are created by the mouse_response item and therefore only exist after a mouse_response item has been executed.

  
  

  How do you know if a person clicked or not?

  
  

  If you make sure you are evaluating mouse responses after a mouse_response item (with the timeout set to "infinite", then the person necessarily has to be clicked before you advance to the next item, right? So the new clicking coordinates will necessarily exist. (If you do want to implement a timeout, the variable "response" will get the value "None" if a timeout occurred (and so no (new) click coordinates are collected.)

  
  

  I’m not quite sure why you set the coordinates of the continue box in experimental_loop? In my experiment I know where the box is going to be, so can I not just implement some sort of if-loop stating that “if the cursor is between these x and y coordinates, and clicked, then set a value to yes”. Without first having to implement these coordinates in a loop over the whole experiment?

  
  

  Yes, you're right, you could do that too.

  However, I find using variable names (rather than absolute values) better practice. If you set your (constant) variables at the beginning of your experiment, and then use the square-bracket syntax (in the GUI), the var. notation (in Phython inline_script items) or the vars. notation (in inline_javascript items) throughout your experiment, this allows you to set the variables only once (or look them up for a Methods section for example). And it is less error prone to typos.

  
  

  If you do not follow this practice, and at some point you decide to change the location of, say, the "Continue" box, you have to change all the absolute values throughout the whole experiment (in my case, in several sketchpad and feedback items, and in the JavaScript code). In my opinion, this is asking for human errors...

  
  

  Why in the experimental loop? Because it is at the highest level of the experimental hierarchy, so that you only have to set the variables once (and not, for example, in every block loop, if you have multiple). Personally, I would add a new inline_javascript item to the very beginning of my experiment and declare my variables there. But in the example, I wanted to use the GUI as much as possible.

  
  

  Regarding the experiment you uploaded, I noticed a few things:

  • There should be a logger item after every trial sequence, right? Not only in the first (Cond000Sequence). Similarly for the mouse_response item.
  • I guess the mouse_response item should be placed right after the sketchpad that is showing the test display. Here that is, I think, the sketchpad "RatingXXX"? The duration of this sketchpad should be set to 0, so that the cursor appears immediately.
  • In the same spirit as my tips on using variables globally, I think it's best to use linked copies of all the items in the trial_sequence that do not change from one block to another. Only change the items that really differ from block to block. (For the logger, I would definitely advice making linked copies, because otherwise you'll end up with multiple output files and things get messy....)

  
  

  

  
  

  What behaviour do you want to implement exactly? That one of the three answer boxes is ticked, and that the participant gets visual feedback on their click (by for example filling this box)? And what purpose does the continue box serve? More precisely, can participants also decide to go to the next trial if they did not click one of the boxes?

  
  

  Regarding your other question, about text input and switching between answer boxes, I'll have to give this some more thoughts. I'm still quite a novice to JS myself. ;-)

  
  

  Let's keep in touch!

  
  

  Cheers,

  
  

  Lotje

  Did you like my answer? Feel free to
• Sannee

  February 2021 edited February 2021

  Hi!

  Thank you so much for your clear and extensive answer!

  In terms of the mouse and the logger extending over the conditions, I'm aware, but currently for debug purposes I implement things in the first condition only and then when it works I copy everything to the other sections.

  Your video was super helpful! It helped me understand the way stuff works a lot better. However I do have a question about it. I followed it and adjusted it to my own experiment, so I have the RatingXXX file with a duration of 0, a mouse response, then a bit of JavaScript which correctly outputs "yes" or "no" and a repeat cycle. The issue is that currently I've put the repeat cycle check on clicked_next = yes (so only continue if the next button is clicked), however he always continues, even when clicking somewhere else.

  Something that might cause this is that clicked_next is not in my variable inspector. Neither are any of the other vars that I create in JavaScript in my experiment.

  I did hardcode the coordinates for now, once I know that it work and what exactly it does I will make global variables and see if the same behaviour is still taking place.

  
  

  
  

  As for the rating system: In the boxes that shift with every trial underneath the three different stimuli I want people to be able to type one single number as a rating. So for example they think that the puddle predicts the diamond outcome very well so they score it '8', the mouse not very well so that one gets a '1' and they're not sure about the log yet, so that one gets a '4'. I want participants to be able to fill them in any order they want, so if the log in on the right of the screen and they want to fill that one in first, they should be able to click that square and type in '4'. Then they can select another square (text box) and type in another number.

  After this the idea is that either time has run out before they could fill in all three squares (12 seconds) or they have filled in all three and they want to continue, so they press the next button, such that they don't have to wait the full 12 seconds.

  It would be nice to give participants visual feedback in the sense that "hey you can type here now!" but that's more of a bonus. As long as they're able to fill in a number that would be great.

  I hope this clears things up :)

  
  

  Kind regards,

  Sanne

  
  

  PS I've already implemented the rating in Python, which you can find here if you would like to see what I mean (it's too big to be uploaded to the forum): https://we.tl/t-01LPx3v1qD

  
  

  
  

  
  

  BasisClickerExperiment.osexp

  
  
• Sannee

  February 2021

  Oh I just noticed that in this version of BasisClickerExperiment.osexp I still have the Rating000 set to 5 seconds, it should be 0!
• lvanderlinden

  February 2021 edited February 2021

  Hi @Sannee ,

  
  

  Nice to see that you got so far. I think you should only repeat the part of the trial_sequence where the next button should be clicked. So you can add the additional loop-sequence structure at this level of your trial, like so:

  
  

  

  
  

  This way, the current feedback item (RatingXXX) remains on screen until participants clicked the next button.

  
  

  Also, I think the Repeat-if statement in the repeat_cycle item should be the other way around, right? The RatingXXX screen should be repeated as long as clicked_next is "no".

  

  
  

  
  

  Does this do the trick?

  
  

  Cheers,

  
  

  Lotje

  Did you like my answer? Feel free to
• Sannee

  February 2021

  Hi!

  Oh that totally makes sense! I interpreted the repeat if as in hey repeat this whole loop if this is true. But it's hey repeat this single thing until this is true and THEN continue on to the next trial! Thanks so much!!

  I do have a small question left. I either want people to be able to click or for the rating to disappear after 12 seconds. When I click anywhere but the "next" button, then the timer is reset. I would assume this could also be handled in the repeat if statement, with something like hey if the time spend in this click_sequence is over 12 seconds, just move on. But I'm not entirely sure how to do that?

  Kind regards,

  Sanne
• lvanderlinden

  February 2021

  Hi @Sannee ,

  
  

  Is this what you are looking for? Add a few lines to the end of the inline_javascript item to check whether a timeout occurred (in which case the built-in variable "response" will have the value "None"):

  
  

  if (vars.response == "None"){
      vars.timeout_occurred = "yes"
      }
  else {
      vars.timeout_occurred = "no"}
  

  
  

  And change the repeat-if statement to:

  
  

  [clicked_next] = no and [timeout_occurred] = no
  

  
  

  Then OpenSesame will advance to the next trial after 12 seconds of not clicking.

  
  

  If this is not what you meant, just let us know.

  
  

  Cheers,

  
  

  Lotje

  Did you like my answer? Feel free to
• Sannee

  February 2021

  Hi!

  Thanks for the reply! This is not entirely what I meant. The entire rating screen needs to stay up for 12 seconds, which does indeed happen if nothing is clicked. However when people click on for example the rating boxes to fill things in, the click_loop is run again, as the next button is not clicked, but we clicked somewhere else. Therefore when people keep clicking on the screen the loop just repeats and resets to showing the mouse response and the rating screen for 12 seconds every time.

  So I was wondering if there is anything like "hey if the duration of this total click_sequence is 12 seconds (independently of how many times we repeat the current trial), then just go on to the next trial". Does that kind of make sense? If not I'll try and sketch something out!

  

  Once again thanks so much for your suggestions and help!!

  Kind regards,

  Sanne