Recording words that were clicked

[nrschoen]

I am trying to record the words participants clicked in an HTML text. See image of code functioning in JSFiddle (the words I clicked are logged in the console bottom right). Unfortunately, I do not get any output in jsPsych.
Add <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> to make it work.

Here my experiment code:

var timeline = [];

// jQuery function to get word that is clicked
$('.clickable').click(function() {
  var sel=window.getSelection();
  var str=sel.anchorNode.nodeValue,len=str.length, a=b=sel.anchorOffset;
  while(str[a]!=' '&&a--){}; if (str[a]==' ') a++; // start of word
  while(str[b]!=' '&&b++<len){};                   // end of word+1
  console.log(str.substring(a,b));
});

var select_text_trial = {
  type: "html-keyboard-response",
  stimulus: '<p class="clickable">The objective can also be achieved by simply analysing the string.</p>',
};
timeline.push(select_text_trial);

// run experiment
jsPsych.init({
  timeline: timeline
});

[jodeleeuw]

This doesn't work because the jQuery function is called before the paragraph is added to the display. When the jQuery function is called, there are no elements of class clickable on the screen.

You could move the function into the on_load event of the plugin:

var select_text_trial = {
  type: "html-keyboard-response",
  stimulus: '<p class="clickable">The objective can also be achieved by simply analysing the string.</p>',
  on_load: function(){
    $('.clickable').click(function() {
      	var sel=window.getSelection();
     	var str=sel.anchorNode.nodeValue,len=str.length, a=b=sel.anchorOffset;
      	while(str[a]!=' '&&a--){}; if (str[a]==' ') a++; // start of word
  	while(str[b]!=' '&&b++<len){};                   // end of word+1
  	console.log(str.substring(a,b));
    });
  }
};
timeline.push(select_text_trial);

In order to get this info to save into the data for the trial you'll probably want to modify the plugin itself so that after the trial.stimulus is added to the screen you call the jQuery function to add the event listener to the element. Then you could add the words to an array in the data object for the trial.