Adding progress bar for osweb

Comments

• lvanderlinden

  June 2020 edited June 2020

  Hi @Lily ,

  
  

  You can make the height of the progress bar variable by using a tiny bit of Java-script inline coding in an inline_javascript item. More precisely, you could set and update experimental variables using the vars object, as described in this article:

  • https://osdoc.cogsci.nl/3.3/manual/osweb/javascript/

  I attached an simple example script to make the progress bar higher after each trial.

  
  

  Hope this helps!

  Cheers,

  
  

  Lotje

  6275.osexp

  
  

  Did you like my answer? Feel free to
• Lily

  July 2020

  Hi Lotje,

  Got it to work! Thank you very much!

  Best,

  Lily
• ypark133

  March 2

  Hi @lvanderlinden,

  
  

  I am quite a novice to OpenSesame, so please excuse me if I ask such basic questions. I also need to present a progress indicator on each screen where I present a trivia question (I'll be presenting a total of 110 trivia questions one at a time), but I can't figure out how to do so. Referring to the the attachment that you kindly posted above ("6275.osexp"), I dragged the "inline_javascript" item under the sketchpad where I present a trivia question and typed in "vars. my_height [...]" as shown in the screenshot below. 

  

  However, the following error message was generated when I test-ran the experiment. 

  

  Could you please tell me what I did wrong?

  By the way if it's not too difficult, rather than the vertical progress bar that is discussed in the posts above, I am hoping to add numbers to indicate the participant's progress. For example, as in the screenshot (red arrow) below, if the participant is looking at the first question out of 110 questions, it will show 1/110 (and then 2/110 on the second question, 3/110 on the third question, and so on). I will be randomizing the order of questions for each participant, so I can't just enter the numbers on each sketchpad - The numbers need to automatically update when each question is presented. Can this type of progress indicator be created in OpenSesame?

  

  
  

  Lastly, once I figure out how to add a progress indicator, I am curious if it would be possible to add progress indicators to the entire 110 trials (trivia questions) all at once, or with just a few clicks or scripts, instead of dragging the "inline_javascript" under each trial one at a time because that will take forever. I would sincerely appreciate any advice.

  
  

  Thank you so much,

  Yoonah
• Fab

  March 2

  Hi @ypark133,

  Just dragging the code written for another program into yours is likely to present problems. You need to adapt it to your task. In the present case, based on your description, the error message is telling what's going on: when the code is being run the program finds a reference to a variable you have not set before (count_trial_sequence).

  The logic to display progress is the following:

  (1) You set a counter to 0 before the loop cotaining your trials-

  (2) you insert code into trial sequence that is going ti increment that counter by 1 unit

  (3) you use a feedback object to display information in the trial where you want the progress to be displayed.

  Regarding your last question, I refer you to my answer to the other question you posted on the forum: you need a single inline_javascript object because you only need one sequence to code what's going on in a trial. The whole logic of the loop is that the table code for the variables ot be used across whatevebr number of trials (rows) contained in the table. You shoudl not create a different sequence for each trial.

  Hope this helps,

  Fabrice.

  
• ypark133

  March 5

  Hi @Fab,

  It is a bit confusing that I need to create a feedback item to show a progress indicator because the progress indicator will not depend on the participant's response: Regardless of the reponses given earlier, it will automatically update itself by 1. Also I want the progress indicator to appear within the sketchpad I've created to display the trivia question, like in Figure 1 below.

  

  So here is what I tried after reading your answers to this and the other posts, as well as documentation on javascript, multiple times. Please excuse me for my shallow understanding of javascript even after reading. 

  Since I wanted the progress indicator to appear on the sketchpad where a trivia question is presented, I placed an inline_javascript item right before that sketchpad and wrote {progress} in the sketchpad (Figures 1 and 2).

  

  
  

  This might sound ignorant, but I also sort of created the variables "count_trial" and "progress" in Figure 3 to avoid the error message that might say those variables do not exist.

  

  When I test-ran the experiment, I didn't get any error message, but the redbox in Figure 1 displayed a blank rather than a number, and that weird progress indicator appeared in another sketchpad as well that I did not designate ("Hint" sketchpad). I would be really grateful if you could pinpoint what I did wrong or should have done.

  Thank you very, very much.

  Sincerely,

  Yoonah
• Fab

  March 6 edited March 6

  Hi @ypark133,

  You should use the feedback object instead of a sketchpad, because as I pointed out in my reply to your other message (https://forum.cogsci.nl/discussion/comment/29490#Comment_29490), sketchpads are drawn before the trial runs, such that it cannot display a value calculated within the trial before the next trial runs. The feecback object is just a display object. It doesn't have to be related to the participant's response. I guess you only get a blank on the very first trial, and only see the progress appear with the fisrt trial's value on trial 2 and so on. This is for the reason I explained earlier: a sketchpad canot display anything that is not set priot to the trial been prepared. So the value of your progress variable, even if it takes the value 1 on the first trial, will not appear on the sketchpads on the first trial because Open Sesame prepares these sketchpad before the trial runs (and so before your code incremeneting the trial is executed). That's why you need to use feedback objects, not sketchpads.

  I'm glad you now used a loop and saw that you don't need to create as many sequences as you have trials.

  Regarding the progress indicator, I can only repeat what I explained in the earlier message. You simply need to create a counter in the form of a variable that gets incremented inside the trial's sequence and use feedback objects instead of sketchpads to display it on the screen. There is no need to create "counter" and "progress" variables inside your loop. It's actually quite simple. I attach a demonstration so that you can see it in action and adapt your task accordingly.

  Displaytrialcounter.osexp

  Hope this helps,

  Fabrice.

  
• ypark133

  April 30

  Hi @Fab,

  It has been a while, but I have a question related to my previous post above.

  Huge thanks to your help, I successfully completed and ran my online experiment, as I wrote to you on ko-fi. I now have to run this same experiment on desktops, not online, so I think I need to use the icon "inline_script" instead of "inline_javascript" now when adding a progress indicator.

  It seems that both inline_script and inline_javascript use the same Python language, so I just replaced my inline_script items with inline_javascript, with the syntax copied and pasted from inline_script. Below shows what I did.

  

  

  

  
  

  But when I test run the experiment, it keeps giving me error messages such as "SyntaxError: cannot assign to attribute here. Maybe you meant '==' instead of '='?" (this message referred to other inline_script I had) or "invalid syntax." I did change the setting (below) beforehand, by the way.

  

  
  

  Should I learn and use a different language to use in inline_script? Thank you so much for your help in advance.

  
  

  Sincerely,

  Yoonah
• Fab

  April 30

  Hi @ypark133,

  I'm glad you completed your online experiment and that it went well.

  Inline_script objects require Python code while inline_javascript require Javascript code. Up to version 3 of Open Sesame, you could have kept using the inline_javascript to run it in the lab throgh OS. However, since version 4, if you select any of the systems other than OSWeb, you must use Python.

  It looks as if what you've done is simply copy the Javascript code from your previous task into an inline_script object. So basically, the task is expecting Python code and you're giving it Javascript code. You need to adapt ykour code.

  Instead of vars.counter=0, use:

  counter=0
  

  Instead of vars.counter++, use:

  counter+=1
  

  In Python, withing Open Sesame 4, you can now simply use the variable name without adding the prefix var).

  Of course if you have some other code elsewhere, you'll need to check it too to make sure it is written in Python and not Javascript.

  Hope this helps,

  Fabrice.

  
• ypark133

  April 30

  Hi @Fab,

  Thank you so much for your help again.

  I wasn't familiar with Python, so I looked through the following documentations. I still found it hard to apply it though (I wasn't sure how to apply what to my case).

  Intermediate tutorial (Python) visual search // OpenSesame documentation (cogsci.nl)

  Common functions // OpenSesame documentation (cogsci.nl)

  
  

  One more thing I'm struggling with is this code (I captured below) that keeps giving me the error message, "SyntaxError: cannot assign to attribute here. Maybe you meant '==' instead of '='?"

  I replaced all "=" with "==" after seeing this message, but now an error message simply says "invalid syntax." Do you know how to improve my code?

  

  
  

  (Below is just to show what I am trying to do using the code above.)

  

  
  

  Thank you so much! I really appreciate it.

  
  

  Sincerely,

  Yoonah
• Fab

  April 30

  Hi @ypark133,

  Here too the problem is that you're using the inline_script object but you're not writing proper Python code.

  The code you're using is in Javascript language. You need to translate it into Python.

  In the case of the code you are referring to, in Python it would go like this:

  if response == "d":
      answer = left_stim
  else:
      answer = right_stim
  print(answer)
  

  In Python, indentation is crucial as it determines the scope of the code blocks. So, the code inside the if and else blocks needs to be indented properly to denote that they are part of the respective conditional branches.

  Python falls outside of the scope of this foruim on Open Sesame per se, but you can find plenty of useful online resources to learn the basics of Python. You may also find useful this website that translate Javascript into Python (though I'd recommand learning some Python anyway so that you understand what the code is actually doing): https://www.codeconvert.ai/javascript-to-python-converter

  Hope this helps,

  Fabrice.