Showing subject their sketchpad drawing after it's done

[sshelat]

Hi all,

I'm trying to write an experiment in which the subject draws something via the sketchpad plugin and is later presented with that very drawing. Here's my current code:

   var trial = {
     type: jsPsychSketchpad,
     prompt: '<p>Draw an image.</p>',
     prompt_location: 'abovecanvas',
     canvas_width: 300,
     canvas_height: 300,
     canvas_border_width: 2,
     save_strokes: false,
     stroke_color_palette: ['black', 'brown', 'grey', 'purple', 'blue', 'green', 'yellow', 'orange', 'red'],
     data: {
       drawing: "yes"
     }
   };

   timeline.push(trial, trial);

const pngCells = [];

var myfunc = function() {
   var drawingsData = jsPsych.data.get().filter({ drawing: "yes" });
}

var fxn = {
   type: jsPsychCallFunction,
   func: myfunc
}

timeline.push(fxn);


// Iterate through each row in drawingsData
for (let i = 0; i < drawingsData.length; i++) {
 // Get the value of "png" column for the current row
 const cellContent = drawingsData[i].png;

 // Store the cell content in the array
 pngCells.push(cellContent);
}

var match = {
type: jsPsychSurveyHtmlForm,
preamble: '<img src="' + pngCells[0] + '">',
html: '<p> I am feeling <input name="first" type="text" />, <input name="second" type="text" />, and <input name="third" type="text" />.</p>'
};

timeline.push(match);

This code first runs two sketchpad trials and tags them with "drawing" = "yes". Then, I define pngCells as an empty array. I define function "myfunc" which filters the data for cells that say "yes" under column "drawing", such that I should now have a variable "drawingData" with just the rows that have my base64 drawing outputs. I use a for loop to access each base64 code (under column "png") and store them in previously-defined array pngCells. Then, I try to read in the first object in that array under a trial type jsPsychSurveyHtmlForm with some textboxes underneath (see var match). I think it's not working because the function call, but I'm not sure. Does anyone have any guidance?

[sshelat]

Hey, I managed to figure it out. Code is below:

    var trial = {
      type: jsPsychSketchpad,
      prompt: '<p>Draw an image.</p>',
      prompt_location: 'abovecanvas',
      canvas_width: 300,
      canvas_height: 300,
      canvas_border_width: 2,
      save_strokes: false,
      stroke_color_palette: ['black', 'brown', 'grey', 'purple', 'blue', 'green', 'yellow', 'orange', 'red'],
      data: {
        drawing: "yes"
      }
    };


    timeline.push(trial, trial);


    var pngCells = [];

    var myfunc = function(data){
        var drawingRows = data.values();
        //console.log(drawingRows)
        //console.log(typeof drawingRows);
        for (var i = 0; i < drawingRows.length; i++) {
          var pngValue = drawingRows[i].png;
          pngCells.push(pngValue);
        }
        //console.log(pngCells)
      }

    var fxn = {
    type: jsPsychCallFunction,
    func: function(){ myfunc(jsPsych.data.get().filter({ drawing: "yes" })) }
    }


    timeline.push(fxn);




var match = {
  type: jsPsychSurveyHtmlForm,
  preamble: function() {
    return '<img src="' + pngCells[0] + '">';
  },
  html: '<p> This is a drawing of a(n) <input name="first" type="text" />.</p>'
};


timeline.push(match);

This will present the user with their first drawing (grabbed by pngCells[0]) and have them fill in the blank to indicate what it was a drawing of.