Button size in survey text plugin

316 views
Skip to first unread message

jfis...@nd.edu

unread,
Jan 7, 2016, 3:52:37 PM1/7/16
to jsPsych
Hi Josh, 

Is there an easy way of enlarging the button size in the survey text plugin? I imagine I enter some CSS command somewhere within lines 70-79 of the plugin, but I'm unsure how exactly to do it. 

Thank you.


Josh de Leeuw

unread,
Jan 7, 2016, 3:59:06 PM1/7/16
to jfis...@nd.edu, jsPsych
You can add CSS rules in your experiment page that target the id of that button: #jspsych-survey-text-next

e.g.
<head>
<style>
#jspsych-survey-text-next { height: 200px; width: 200px; }
</style>
</head>

--
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/70bd50f2-9bee-4b57-8d91-abfcbc8b3e19%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

jfis...@nd.edu

unread,
Jan 7, 2016, 4:02:00 PM1/7/16
to jsPsych, jfis...@nd.edu
Thank you. 

jfis...@nd.edu

unread,
Jan 7, 2016, 4:26:08 PM1/7/16
to jsPsych, jfis...@nd.edu
Sorry, one more question: Could you please let me know the id for the button for the 'button-response' plugin? I can't get that to work. 

Josh de Leeuw

unread,
Jan 7, 2016, 4:28:04 PM1/7/16
to jfis...@nd.edu, jsPsych
In the button response plugin there isn't a single ID because there are multiple buttons. But you can target the class: .jspsych-button-response-button

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/e017b2d3-7848-4c35-9b1f-e72b4da2ccea%40googlegroups.com.

jfis...@nd.edu

unread,
Jan 7, 2016, 4:31:39 PM1/7/16
to jsPsych, jfis...@nd.edu
Awesome. Thanks again.

jfis...@nd.edu

unread,
Jan 8, 2016, 1:16:44 PM1/8/16
to jsPsych, jfis...@nd.edu
OK, now I'm trying to adjust the CSS for the question box in the survey-text plugin. Ideally, I would like to increase the size of the box and the font size with which the answer is typed. 
Below is what I have so far for the head. Changing the values for the .jspsych-survey-text-question allows me to adjust the spacing between questions, but I can't seem to get the question box or its text to be larger. 
Thanks.    

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        #jspsych-survey-text-next { font-size: 16px; height: 50px; width: 140px; }
        .jspsych-button-response-button { font-size: 16px; height: 50px; width: 140px; }
        .jspsych-survey-text-question { font-size: 16px; width: 300px; height: 500px;}
    </style>

</head> 

Josh de Leeuw

unread,
Jan 8, 2016, 1:21:56 PM1/8/16
to jfis...@nd.edu, jsPsych
Use the cols and rows arguments for the plugin. Check out the example at the bottom of this page: 

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/1a3fc522-4bd9-481d-b47c-38d6f632ff4d%40googlegroups.com.

jfis...@nd.edu

unread,
Jan 8, 2016, 1:29:57 PM1/8/16
to jsPsych, jfis...@nd.edu
OK, thank you. 
Is there any way of having the text in the question box be of a larger font?

Josh de Leeuw

unread,
Jan 8, 2016, 1:34:39 PM1/8/16
to jfis...@nd.edu, jsPsych
You can target the textarea element:

textarea { font-size: 22px; }

If you want to only target the ones in the plugin, then you could do something like:

.jspsych-survey-text-question textarea { font-size: 22px; }

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/f4fe04cb-e6d5-466c-a6c0-9d0e080a4e72%40googlegroups.com.

jfis...@nd.edu

unread,
Jan 8, 2016, 1:39:51 PM1/8/16
to jsPsych, jfis...@nd.edu
OK, great. 
Thanks again for the tips (and for jspsych!)
Reply all
Reply to author
Forward
0 new messages