trial only saves response if specific option is selected

[Geoff-McK]

Hi everyone,

I am trying to write a program that presents a few images for participants to study, followed by lineup with 6 photos presented simultaneously. The lineup includes either one of the studied images or a similar looking image. This image is surrounded by 5 images. At this point, people need to select one of the options (i.e., a radio button). The options are 1-6 and "Absent".

The problem is that when they select any of the 1-6 options, their response is empty (i.e., '{"Q0":""}'). This is not a problem when they select "Absent".

I don't believe that this was a problem in the past. I did modify the plugin that I used, but I don't think that is the problem. I'll paste it below just in case. The plugin is called "jspsych-lineup-multi-choice". It is a modified version of the "jspsych-survey-multi-choice" plugin. Again, I believe that this plugin worked in the past. The only things that I changed since then is that I made the lineup appear after a 500 ms delay.

I would appreciate any help that I can get.

Thanks,
Geoff

Here is the code in my program:

var page_1_options = ["ABSENT","1","2","3","4","5","6"];

var multi_choice_block_horizontal = {
    type: 'lineup-multi-choice',
    questions: [        
      {prompt: '<p </p>', options: page_1_options, required: true, horizontal: true},
       // {prompt: '<p id="prompt" style="visibility:hidden;" </p>', options: page_1_options, required: true, horizontal: true},

       // {  prompt: '<p id="prompt" style="visibility:hidden;"> NO (F) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; YES (J)</p>'},
],
    button_label: 'SUBMIT',

       on_finish: function(data){
         data_all.selection.push(JSON.parse(data.responses).Q0);
         // console.log(JSON.parse(data))
         console.log(data_all.selection)
        data_all.rt.push(data.rt);
        // data_all.lineup.push(data.lineup);

       },
         on_load: function(){
        setTimeout(function(){
          document.getElementById('jspsych-lineup-multi-choice-option-0-6').style.visibility = "visible";}, 500);
        setTimeout(function(){        
          document.getElementById('jspsych-lineup-multi-choice-option-0-0').style.visibility = "visible";}, 500),
          setTimeout(function(){ 
          document.getElementById('jspsych-lineup-multi-choice-option-0-1').style.visibility = "visible";}, 500);
          setTimeout(function(){ 
          document.getElementById('jspsych-lineup-multi-choice-option-0-2').style.visibility = "visible";}, 500);
          setTimeout(function(){ 
          document.getElementById('jspsych-lineup-multi-choice-option-0-3').style.visibility = "visible";}, 500);
          setTimeout(function(){ 
          document.getElementById('jspsych-lineup-multi-choice-option-0-4').style.visibility = "visible";}, 500);
          setTimeout(function(){ 
          document.getElementById('jspsych-lineup-multi-choice-option-0-5').style.visibility = "visible";}, 500);
          setTimeout(function(){
          document.getElementById('jspsych-survey-multi-choice-preamble').style.visibility = "visible";}, 500);
          setTimeout(function(){
          document.getElementById('jspsych-lineup-multi-choice-submit').style.visibility = "visible";}, 500);

      },  
    
    preamble: // function() {
   // var preamble_html = 
    "<div style='position: fixed; top:" + (h_center-470) + "px; left:" + (w_center-300) + "px;'><p>If you see a person that you studied in the previous set of</p>" +
      "<div style='position: fixed; top:" + (h_center-440) + "px; left:" + (w_center-300) + "px;'><p>4 faces, select the number that corresponds to their photo. </p>" +

      "<div style='position: fixed; top:" + (h_center-390) + "px; left:" + (w_center-300) + "px;'><p>If you <strong> DO NOT </strong> see a person that you studied in the </p>" +
      "<div style='position: fixed; top:" + (h_center-360) + "px; left:" + (w_center-300) + "px;'><p> previous set of one of 4 faces, select the ABSENT option.</p>" +
        "<div style='position: fixed; top:" + (h_center-310) + "px; left:" + (w_center-300) + "px;'><p>Remember, a studied face <strong> may or may not </strong> be present in the lineup</p>" +

  "<div <p style = 'position: fixed; top:" + (h_center-250) + "px; left:" + (w_center-300) + "px; width: 150px; visiblity: hidden;'><img src=" + test_block.lineup1[testInd] +" height=162.75 width=175></img></p>  " +  

  "<div <p style = 'position: fixed; top:" + (h_center-250) + "px; left:" + (w_center-100) + "px; width: 150px;'><img src=" + test_block.lineup2[testInd] +" height=162.75 width=175></img></p>" + 

  "<div <p style = 'position: fixed; top:" + (h_center-250) + "px; left:" + (w_center+100) + "px;  width: 150px;'><img src=" + test_block.lineup3[testInd] +" height=162.75 width=175></img></p>  " +

  "<div <p style = 'position: fixed; top:" + (h_center) + "px; left:" + (w_center-300) + "px;  width: 150px'><img src=" + test_block.lineup4[testInd] +" height=162.75 width=175</img></p> " + 

  "<div <p style = 'position: fixed; top:" + (h_center) + "px; left:" + (w_center-100) + "px;  width: 150px'><img src=" + test_block.lineup5[testInd] +" height=162.75 width=175></img></p> " + 

  "<div <p style = 'position: fixed; top:" + (h_center) + "px; left:" + (w_center+100) + "px;  width: 150px'><img src=" + test_block.lineup6[testInd] +" height=162.75 width=175></img></p> "
    
 //   return preamble_html;
 //   }

 };

 rsvp_timeline.push(multi_choice_block_horizontal);

Here is the plugin:

/**
 * jspsych-lineup-multi-choice
 * a jspsych plugin for multiple choice lineup questions
 *
 * Shane Martin
 *
 * documentation: docs.jspsych.org
 *
 */


jsPsych.plugins['lineup-multi-choice'] = (function() {
    var plugin = {};
  
    plugin.info = {
      name: 'lineup-multi-choice',
      description: '',
      parameters: {
        questions: {
          type: jsPsych.plugins.parameterType.COMPLEX,
          array: true,
          pretty_name: 'Questions',
          nested: {
            prompt: {
              type: jsPsych.plugins.parameterType.STRING,
              pretty_name: 'Prompt',
              default: undefined,
              description: 'The strings that will be associated with a group of options.'
            },
            options: {
              type: jsPsych.plugins.parameterType.STRING,
              pretty_name: 'Options',
              array: true,
              default: undefined,
              description: 'Displays options for an individual question.'
            },
            required: {
              type: jsPsych.plugins.parameterType.BOOL,
              pretty_name: 'Required',
              default: false,
              description: 'Subject will be required to pick an option for each question.'
            },
            horizontal: {
              type: jsPsych.plugins.parameterType.BOOL,
              pretty_name: 'Horizontal',
              default: false,
              description: 'If true, then questions are centered and options are displayed horizontally.'
            },
            name: {
              type: jsPsych.plugins.parameterType.STRING,
              pretty_name: 'Question Name',
              default: '',
              description: 'Controls the name of data values associated with this question'
            }
          }
        },
        randomize_question_order: {
          type: jsPsych.plugins.parameterType.BOOL,
          pretty_name: 'Randomize Question Order',
          default: false,
          description: 'If true, the order of the questions will be randomized'
        },
        preamble: {
          type: jsPsych.plugins.parameterType.STRING,
          pretty_name: 'Preamble',
          default: null,
          description: 'HTML formatted string to display at the top of the page above all the questions.'
        },
        button_label: {
          type: jsPsych.plugins.parameterType.STRING,
          pretty_name: 'Button label',
          default:  'Continue',
          description: 'Label of the button.'
        }
      }
    }
    plugin.trial = function(display_element, trial) {
      var plugin_id_name = "jspsych-survey-multi-choice";
  
      var html = "";


  
      // inject CSS for trial
      html += '<style id="jspsych-survey-multi-choice-css">';
      html += ".jspsych-survey-multi-choice-question { margin-top: 1em; margin-bottom: 1em; text-align: left; }"+
        ".jspsych-survey-multi-choice-text span.required {color: darkred;}"+
        ".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-text {  text-align: center;}"+
        ".jspsych-survey-multi-choice-option { line-height: 2;}"+
        ".jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-option {  display: inline-block;  margin-left: 1em;  margin-right: 1em;  vertical-align: top;}"+
        "label.jspsych-survey-multi-choice-text input[type='radio'] {line-height: 0px; margin-right: 1em;}";
      html += '</style>';

      //html += '<div style="position: relative; left: 50%; top: -50%; border: dotted red 20px;">';
      // html += '<div style="position: relative; left: -75%; top: -50%; border: dotted red 50px;">';

      var left = (-window.innerWidth*0.2)-60;
      var top = (-window.innerHeight*0.45);
  
      // show preamble text
      if(trial.preamble !== null){
        html += '<div style="visibility:hidden; position: fixed; top: '+ top +'px; left: '+ left +'px; width: 700px; line-height: 0em;" id="jspsych-survey-multi-choice-preamble" class="jspsych-survey-multi-choice-preamble">'+trial.preamble+'</div>';
      }
  
      // form element
      html += '<form id="jspsych-survey-multi-choice-form">';
      
      // generate question order. this is randomized here as opposed to randomizing the order of trial.questions
      // so that the data are always associated with the same question regardless of order
      var question_order = [];
      for(var i=0; i<trial.questions.length; i++){
        question_order.push(i);
      }
      if(trial.randomize_question_order){
        question_order = jsPsych.randomization.shuffle(question_order);
      }

  
      // add multiple-choice questions
      for (var i = 0; i < trial.questions.length; i++) {
  
          // get question based on question_order
          var question = trial.questions[question_order[i]];
          var question_id = question_order[i];
          
          // create question container
          var question_classes = ['jspsych-lineup-multi-choice-question'];
          if (question.horizontal) {
              question_classes.push('jspsych-lineup-multi-choice-horizontal');
          }
  
          html += '<div id="jspsych-lineup-multi-choice-'+question_id+'" class="'+question_classes.join(' ')+'"  data-name="'+question.name+'">';
  
          // add question text
          html += '<p class="jspsych-lineup-multi-choice-text lineup-multi-choice">' + question.prompt 
          if (question.required) {
              html += "<span class='required'></span>";
          }
          html += '</p>';
  
          var required_attr = question.required ? 'required' : '';


          var w = screen.width
          var h = screen.height;
          
          var w_c = w/2;
          var h_c = h/2;
  
          // create option radio buttons
/*           for (var j = 0; j < (question.options.length-1); j++) {
  
            // for each response option, add radio button container, image and radio button/label
            // dynamically set values for label and input based on the option index j
            var option_id_name = "jspsych-lineup-multi-choice-option-"+question_id+"-"+j;
            var input_name = 'jspsych-lineup-multi-choice-response-'+question_id;
            var input_id = 'jspsych-lineup-multi-choice-response-'+question_id+'-'+j;

             var left = (-window.innerWidth*0.1);
            if (j == 1 | j == 4) {
                left =  left + 200 // (-window.innerWidth*0.055);
            } else if (j == 2 | j == 5) {
                left = left + 400 // (window.innerWidth*0.1);
            }
            var top = (-window.innerHeight*0.2)+100;
            if (j > 2) {
                top = top + 250
            }  
            
          }  */
          // html += '<div class="jspsych-image-button-response-button" style="display: block; margin:'+trial.margin_vertical+' '+trial.margin_horizontal+'" id="skip-button" data-choice="skip"><button class="jspsych-btn" style="visibility:hidden;">Skip</button></div>';

          html += '<div style="visibility:hidden; position: fixed; top:' + (h_c+240) + 'px; left:' + (w_c-190) + 'px;"id="jspsych-lineup-multi-choice-option-0-6" class="jspsych-lineup-multi-choice-option">';
          html += '<label class="jspsych-lineup-multi-choice-text" for="jspsych-lineup-multi-choice-response-0-6">ABSENT</label>';
          html += '<input type="radio" name="jspsych-lineup-multi-choice-response-0" id="jspsych-lineup-multi-choice-response-0-6" value="ABSENT"></input>';
          html += '</div>';
          html += '</div>';
      
          // html += '<div style="position: fixed; top: 325px; left: 265px;" id="jspsych-lineup-multi-choice-option-0-0" class="jspsych-lineup-multi-choice-option">';
          html += '<div style="visibility:hidden; position: fixed; top:' + (h_c-80) + 'px; left:' + (w_c-235) + 'px;" id="jspsych-lineup-multi-choice-option-0-0" class="jspsych-lineup-multi-choice-option">';
          html += '<label class="jspsych-lineup-multi-choice-text" for="jspsych-lineup-multi-choice-response-0-0">1</label>';
          html += '<input type="radio" name="jspsych-lineup-multi-choice-response-0" id="jspsych-lineup-multi-choice-response-0-0" value="1" ></input>';
          html += '</div>';
      
         html += '<div style="visibility:hidden; position: fixed; top:' + (h_c-80) + 'px; left:' + (w_c-30) + 'px;"id="jspsych-lineup-multi-choice-option-0-1" class="jspsych-lineup-multi-choice-option">';
          html += '<label class="jspsych-lineup-multi-choice-text" for="jspsych-lineup-multi-choice-response-0-1">2</label>';
          html += '<input type="radio" name="jspsych-lineup-multi-choice-response-0" id="jspsych-lineup-multi-choice-response-0-1" value="2" ></input>';
          html += '</div>';
      
          html += '<div style="visibility:hidden; position: fixed; top:' + (h_c-80) + 'px; left:' + (w_c+170) + 'px;" id="jspsych-lineup-multi-choice-option-0-2" class="jspsych-lineup-multi-choice-option">';
          html += '<label class="jspsych-lineup-multi-choice-text" for="jspsych-lineup-multi-choice-response-0-2">3</label>';
          html += '<input type="radio" name="jspsych-lineup-multi-choice-response-0" id="jspsych-lineup-multi-choice-response-0-2" value="3" ></input>';
          html += '</div>';
      
          html += '<div style="visibility:hidden; position: fixed; top:' + (h_c+165) + 'px; left:' + (w_c-235) + 'px;" id="jspsych-lineup-multi-choice-option-0-3" class="jspsych-lineup-multi-choice-option">';
          html += '<label class="jspsych-lineup-multi-choice-text" for="jspsych-lineup-multi-choice-response-0-3">4</label>';
          html += '<input type="radio" name="jspsych-lineup-multi-choice-response-0" id="jspsych-lineup-multi-choice-response-0-3" value="4" ></input>';
          html += '</div>';
      
          html += '<div style="visibility:hidden; position: fixed; top:' + (h_c+165) + 'px; left:' + (w_c-30) + 'px;" id="jspsych-lineup-multi-choice-option-0-4" class="jspsych-lineup-multi-choice-option">';
          html += '<label class="jspsych-lineup-multi-choice-text" for="jspsych-lineup-multi-choice-response-0-4">5</label>';
          html += '<input type="radio" name="jspsych-lineup-multi-choice-response-0" id="jspsych-lineup-multi-choice-response-0-5" value="5" ></input>';
          html += '</div>';
      
          html += '<div style="visibility:hidden; position: fixed; top:' + (h_c+165) + 'px; left:' + (w_c+170) + 'px;" id="jspsych-lineup-multi-choice-option-0-5" class="jspsych-lineup-multi-choice-option">';
          html += '<label class="jspsych-lineup-multi-choice-text" for="jspsych-lineup-multi-choice-response-0-5">6</label>';
          html += '<input type="radio" name="jspsych-lineup-multi-choice-response-0" id="jspsych-lineup-multi-choice-response-0-5" value="6" '+required_attr+'></input>';
          html += '</div>'; 

          html += '<div style="visibility:hidden; position: fixed; top:' + (h_c+230) + 'px; left:' + (w_c-20) + 'px;" id="jspsych-lineup-multi-choice-submit">'
          html += '<input type="submit" id="'+plugin_id_name+'-next" class="'+plugin_id_name+' jspsych-btn"' + (trial.button_label ? ' value="'+trial.button_label + '"': '') + '></input>';
          html += '</div></form>';
            // create the HTML for this response option

            /* var left = (window.innerWidth*0.1);
            html += '<div style="position: fixed; top: '+ top +'px; left: '+ left +'px;" id="'+option_id_name+'" class="jspsych-lineup-multi-choice-option">';
            // html += '<img src="'+question.options[j]+'" height="188.17px"; width="175px";/>';
            html += '<p style = "position: fixed; "line-height: -100px;" label class="jspsych-lineup-multi-choice-text" for="'+input_id+'">'+(j+1).toString()+'</label>';
            html += '<input type="radio" name="'+input_name+'" id="'+input_id+'" value="'+(j+1).toString()+'" '+required_attr+' ></input></p>';
            html += '</div>'; 

            var left = (window.innerWidth*0.1)+200;
            html += '<div style="position: fixed; top: '+ top +'px; left: '+ left +'px;" id="'+option_id_name+'" class="jspsych-lineup-multi-choice-option">';
            // html += '<img src="'+question.options[j]+'" height="188.17px"; width="175px";/>';
            html += '<p style = "position: fixed; "line-height: -100px;" label class="jspsych-lineup-multi-choice-text" for="'+input_id+'">'+(j+1).toString()+'</label>';
            html += '<input type="radio" name="'+input_name+'" id="'+input_id+'" value="'+(j+1).toString()+'" '+required_attr+' ></input></p>';
            html += '</div>'; 
            
            var left = (window.innerWidth*0.1)+400;
            html += '<div style="position: fixed; top: '+ top +'px; left: '+ left +'px;" id="'+option_id_name+'" class="jspsych-lineup-multi-choice-option">';
            // html += '<img src="'+question.options[j]+'" height="188.17px"; width="175px";/>';
            html += '<p style = "position: fixed; "line-height: -100px;" label class="jspsych-lineup-multi-choice-text" for="'+input_id+'">'+(j+1).toString()+'</label>';
            html += '<input type="radio" name="'+input_name+'" id="'+input_id+'" value="'+(j+1).toString()+'" '+required_attr+' ></input></p>';
            html += '</div>'; 
           
            var left = (window.innerWidth*0.1);
            html += '<div style="position: fixed; top: '+ top +'px; left: '+ left +'px;" id="'+option_id_name+'" class="jspsych-lineup-multi-choice-option">';
            // html += '<img src="'+question.options[j]+'" height="188.17px"; width="175px";/>';
            html += '<p style = "position: fixed; "line-height: -100px;" label class="jspsych-lineup-multi-choice-text" for="'+input_id+'">'+(j+1).toString()+'</label>';
            html += '<input type="radio" name="'+input_name+'" id="'+input_id+'" value="'+(j+1).toString()+'" '+required_attr+' ></input></p>';
            html += '</div>'; 
            
            var left = (window.innerWidth*0.1)+200;
            html += '<div style="position: fixed; top: '+ top +'px; left: '+ left +'px;" id="'+option_id_name+'" class="jspsych-lineup-multi-choice-option">';
            // html += '<img src="'+question.options[j]+'" height="188.17px"; width="175px";/>';
            html += '<p style = "position: fixed; "line-height: -100px;" label class="jspsych-lineup-multi-choice-text" for="'+input_id+'">'+(j+1).toString()+'</label>';
            html += '<input type="radio" name="'+input_name+'" id="'+input_id+'" value="'+(j+1).toString()+'" '+required_attr+' ></input></p>';
            html += '</div>'; 
            
            var left = (window.innerWidth*0.1)+400;
            html += '<div style="position: fixed; top: '+ top +'px; left: '+ left +'px;" id="'+option_id_name+'" class="jspsych-lineup-multi-choice-option">';
            // html += '<img src="'+question.options[j]+'" height="188.17px"; width="175px";/>';
            html += '<p style = "position: fixed; "line-height: -100px;" label class="jspsych-lineup-multi-choice-text" for="'+input_id+'">'+(j+1).toString()+'</label>';
            html += '<input type="radio" name="'+input_name+'" id="'+input_id+'" value="'+(j+1).toString()+'" '+required_attr+' ></input></p>';
            html += '</div>';        */      

      


    }
    



      // render
      display_element.innerHTML = html;
  
      document.querySelector('form').addEventListener('submit', function(event) {
        event.preventDefault();
        // measure response time
        var endTime = performance.now();
        var response_time = endTime - startTime;
  
        // create object to hold responses
        var question_data = {};
        for(var i=0; i<trial.questions.length; i++){
          var match = display_element.querySelector('#jspsych-lineup-multi-choice-'+i);
          var id = "Q" + i;
          if(match.querySelector("input[type=radio]:checked") !== null){
            var val = match.querySelector("input[type=radio]:checked").value;
          } else {
            var val = "";
          }
          var obje = {};
          var name = id;
          if(match.attributes['data-name'].value !== ''){
            name = match.attributes['data-name'].value;
          }
          obje[name] = val;
          Object.assign(question_data, obje);
        }
        // save data
        var trial_data = {
          "rt": response_time,
          "responses": JSON.stringify(question_data),
          "question_order": JSON.stringify(question_order)
        };
        display_element.innerHTML = '';
  
        // next trial
        jsPsych.finishTrial(trial_data);
      });
  
      var startTime = performance.now();
    };
  

    return plugin;
  })();