Changing the styling format of jsPsych survey likert plugin

[sankalp35]

Hello all,

I wonder if there is any easy way to change the formatting of the survey likert plugin, so that it looks more tabular (see image). It seems like in the current version, participants have to go through many repeat versions of the likert scale, whereas it stays the same for most of my questionnaires.

[becky-gilbert]

Hi @sankalp35, I might be wrong, but I don't think there's an easy way to do this right now. However we are planning to do a major improvement to the survey-* plugins soon (see Issue #1207), and I think this is a good formatting option to provide. So I'll make a note about it on the Issue thread.

In the meantime, you can do this by editing the survey-likert plugin, specifically the way that the page HTML is created, which is around these lines:

jsPsych/plugins/jspsych-survey-likert.js

Lines 126 to 142 in ae332b3

	for (var i = 0; i < trial.questions.length; i++) {
	var question = trial.questions[question_order[i]];
	// add question
	html += '<label class="jspsych-survey-likert-statement">' + question.prompt + '</label>';
	// add options
	var width = 100 / question.labels.length;
	var options_string = '<ul class="jspsych-survey-likert-opts" data-name="'+question.name+'" data-radio-group="Q' + question_order[i] + '">';
	for (var j = 0; j < question.labels.length; j++) {
	options_string += '<li style="width:' + width + '%"><label class="jspsych-survey-likert-opt-label"><input type="radio" name="Q' + question_order[i] + '" value="' + j + '"';
	if(question.required){
	options_string += ' required';
	}
	options_string += '>' + question.labels[j] + '</label></li>';
	}
	options_string += '</ul>';
	html += options_string;
	}

This code loops over the questions, and for each one, adds the question prompt and scale options to the page HTML. Here, instead of using an unordered list element (<ul>), with each option as a list item (<li>), you could create a table element with one question per row. The first cell in each row would contain the prompt, and the following cells would have each of the scale options. This page has a nice overview of creating HTML tables. Feel free to post your code here if you need further guidance, and we'll help out if we can!

[sankalp35]

Thanks Becky, I was able to create this:

It doesn't look as well on laptop screens so I decided to go ahead with the original version, but it was good to understand some underlying code of the plugin and Its styling.

[sankalp35]

Another quick question about the styling of this plugin: how do I fix this (see image above). The text appears too close to each other in the options. I tried adding a padding-left to some of this code, but none of it worked

    html += ".jspsych-survey-likert-statement { display:block; font-size: 16px; padding-top: 40px; margin-bottom:10px; }"+
      ".jspsych-survey-likert-opts { list-style:none; width:"+w+"; margin:auto; padding:0 0 35px; display:block; font-size: 14px; line-height:1.1em; }"+
      ".jspsych-survey-likert-opt-label { line-height: 1.1em; color: #444; }"+
      ".jspsych-survey-likert-opts:before { content: ''; position:relative; top:11px; /*left:9.5%;*/ display:block; background-color:#efefef; height:4px; width:100%; }"+
      ".jspsych-survey-likert-opts:last-of-type { border-bottom: 0; }"+
      ".jspsych-survey-likert-opts li { display:inline-block; /*width:19%;*/ text-align:center; vertical-align: top; }"+
      ".jspsych-survey-likert-opts li input[type=radio] { display:block; position:relative; top:0; left:50%; margin-left:-6px; }"
    html += '</style>';

[becky-gilbert]

Hi @sankalp35, can you increase the scale width? Other than that, I couldn't think of a way to do this without editing the plugin file.

If you're happy to modify the plugin, then one solution is to put the scale option label inside of a div element, and then reduce the width of that div to e.g. 80%. The HTML for the option labels is set up in line 138 of the v6.3.1 plugin file. You can add a div around the label and reduce its width like this:

options_string += '><div style="width:80%;">' + question.labels[j] + '</div></label></li>';

Does that solution work for you?

[sankalp35]

Thanks Becky, I will be doing this for the next version of my task. I'll get back to you!

[acer-helia]

A really sneaky option for changing the text if you don't want to change the scale width/plugin is to write in custom breaks when you're specifying your scale labels, as below:

var scale_fatigue = [
      "<p>I am not at all<br> fatigued</p>",
      "<p>I am a little<br> bit fatigued</p>",
      "<p>I am feeling<br> moderately<br> fatigued</p>",
      "<p>I am too tired<br> and fatigued to do<br> a lot of the things<br>I used to do</p>",
      "<p>I am too tired<br> and fatigued to do<br> most of the things<br>I used to do</p>",
    ]

The only caution is that the breaks may be different across different types of presentations (e.g., desktop vs phone) but it's been a pretty good option across browsers for me.

[sankalp35]

Hi @acer-helia,
That was so sneaky and so clever. Worked like magic, and without the hassle of digging into the plugin! Thanks