Changing progress bar colour

199 views
Skip to first unread message

sam.hall...@gmail.com

unread,
Sep 5, 2018, 11:10:06 AM9/5/18
to jsPsych
Hi Josh,

Is it possible to change the colour of a progress bar?

I'm working on an experiment that has two progress bars. One to show the block time and another show how participants how much money they've earned. Ideally, I want these to be different colours, blue for the timer and red for the money earned. No matter what I try, I can only get the money bar green with a grey background.

E.g.<style> #srt-score progress {background-color: #ff0000 !important; width: 1000px; } </style>

What would you advise to change a given progress bar colour?

Thanks for your help - loving jsPsych
Sam

Josh de Leeuw

unread,
Sep 7, 2018, 10:12:52 AM9/7/18
to sam.hall...@gmail.com, jsPsych
Hi Sam,

The element that you need change (with the built-in progress bar) is #jspsych-progressbar-inner

For example, in the /examples folder is progress-bar.html. Adding #jspsych-progressbar-inner { background-color: red; } to the <style> tag should turn the progress bar red.

Hope that helps!
Josh

--
You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/7092ea64-d5b9-4bba-ab43-5ce85d821cc8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages