Two sets of likerts survey-likert plugin

[acer-helia]

Hi everyone, I am trying to modify the survey-likert plugin to display two sets of the same likert scale so that participants can rate a statement from the past (e.g, a few months ago) and now. So visually looking something like below:

So far, in the plugin what has been modified is below (I have named the sections). Any help is appreciated - I don't normally modify plugins and I am really stuck.

  second_likert: { //this is new
        type: jsPsych.plugins.parameterType.BOOL,
        pretty_name: 'Second Likert',
        default: false,
        description: 'Whether or not to add a Double Likert scale per question',
        nested: {
          first_likert_preamble :{ //this is new
            type: jsPsych.plugins.parameterType.INT,
            pretty_name: 'First Likert Preamble',
            default: null,
            description: 'Text to Display above the First Likert'
          },
          second_likert_preamble :{ //this is new
            type: jsPsych.plugins.parameterType.INT,
            pretty_name: 'Second Likert Preamble',
            default: null,
            description: 'Text to Display above the Second Likert'
        },
      }
    },

And below the CSS for the styling the second likert (basically copied from original plugin)

   if(trial.second_likert !== false){
      html += '<style id="jspsych-survey-likert-css-second">';
      html +=".jspsych-survey-likert-statement { display:inline; font-size: 14px, padding-top: 0px, margin-bottom: 0px; }" +
      ".jspych-survey-likert-opts { list-style:none, width:"+w+"; margin: auto, padding:0 0 0px; display:block; font-size: 14px, line-height: 1.1em; }" +
      ".jspsych-survey-likert-opt-label { list-style: none; 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:left; vertical-align: left; }" + 
      ".jspsych-survey-likert-opts li input[type=radio] { display:block; position:relative; top:0; left:50%; margin-left:-6px; }" +
      ".jspsych-survey-likert-opts li input[type=text] {height: 35px; width: 35px; vertical-align: middle;}"
    html += '</style>';
    }

And finally the html section for displaying the second likert. I have not yet attempted to modify how data is saved as it currently saves the radio groups fine in the current code as it is linked to the code of the first set of radio buttons. I have no code for displaying the preamble text for each likert however.

  var nscale = (trial.second_likert == false) ? 1 : 2 //if second likert is null, then show 1 radio group, otherwise show 2
      for (var k = 0; k < nscale; k++){  
        var width = 100 / question.labels.length;
        var options_string = '<ul class="jspsych-survey-likert-opts" data-name="'+question.name+'-'+(k+1).toString()+ '" data-radio-group="Q' + question_order[i]+'-'+(k+1).toString()+'">'; 
        for (var j = 0; j < question.labels.length; j++) {
          //label class is new for having statements in line with radio buttons
          options_string += '<li style="width:' + width + '%"><input type="radio" name="Q' + question_order[i]+'-'+(k+1).toString()+ '" value="' + j + '"'; 
          if(question.required){
            options_string += ' required';
          }
          options_string += '>' + question.labels[j] + '</label></li>';
           }
        options_string += '</ul>';
        html += options_string;
      }
    }

[vscholz118]

Hi acer-helia,
I was wondering whether you ended up creating a working plugin for this? Because this would be exactly what I'm currently looking for for one of my studies ...