mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 19:20:55 +00:00
116 lines
3.6 KiB
JavaScript
116 lines
3.6 KiB
JavaScript
/* jspsych-similarity.js
|
|
* Josh de Leeuw
|
|
*
|
|
* This plugin create a trial where two images are shown sequentially, and the subject rates their similarity using a slider controlled with the mouse.
|
|
*
|
|
*/
|
|
|
|
(function( $ ) {
|
|
jsPsych.similarity = (function(){
|
|
|
|
var plugin = {};
|
|
|
|
plugin.create = function(params) {
|
|
sim_stims = params["stimuli"];
|
|
trials = new Array(sim_stims.length);
|
|
for(var i = 0; i < trials.length; i++)
|
|
{
|
|
trials[i] = {};
|
|
trials[i]["type"] = "similarity";
|
|
trials[i]["a_path"] = sim_stims[i][0];
|
|
trials[i]["b_path"] = sim_stims[i][1];
|
|
trials[i]["timing_first_image"] = params["timing_first_image"] || 1000; // default 1000ms
|
|
trials[i]["timing_second_image"] = params["timing_second_image"] || -1; // -1 = inf time; positive numbers = msec to display second image.
|
|
trials[i]["timing_image_gap"] = params["timing_image_gap"] || 1000; // default 1000ms
|
|
trials[i]["timing_post_trial"] = params["timing_post_trial"] || 1000; // default 1000ms
|
|
trials[i]["label_low"] = params["label_low"] || "Not at all similar";
|
|
trials[i]["label_high"] = params["label_high"] || "Identical";
|
|
if(params["data"]!=undefined){
|
|
trials[i]["data"] = params["data"][i];
|
|
}
|
|
}
|
|
return trials;
|
|
}
|
|
|
|
var sim_trial_complete = false;
|
|
|
|
plugin.trial = function(display_element, block, trial, part)
|
|
{
|
|
switch(part){
|
|
case 1:
|
|
sim_trial_complete = false;
|
|
// show the images
|
|
display_element.append($('<img>', {
|
|
"src": trial.a_path,
|
|
"class": 'sim'
|
|
}));
|
|
|
|
setTimeout(function(){plugin.trial(display_element, block, trial, part + 1)}, trial.timing_first_image);
|
|
break;
|
|
|
|
case 2:
|
|
|
|
$('.sim').remove();
|
|
|
|
setTimeout(function(){plugin.trial(display_element, block, trial, part + 1)}, trial.timing_image_gap);
|
|
break;
|
|
case 3:
|
|
|
|
display_element.append($('<img>', {
|
|
"src": trial.b_path,
|
|
"class": 'sim',
|
|
"id": 'jspsych_sim_second_image'
|
|
}));
|
|
|
|
if(trial.timing_second_image > 0)
|
|
{
|
|
setTimeout(function(){
|
|
if(!sim_trial_complete) {
|
|
$("#jspsych_sim_second_image").css('visibility', 'hidden');
|
|
}
|
|
}, trial.timing_second_image);
|
|
}
|
|
|
|
// create slider
|
|
display_element.append($('<div>', { "id": 'slider', "class": 'sim' }));
|
|
$("#slider").slider(
|
|
{
|
|
value:50,
|
|
min:0,
|
|
max:100,
|
|
step:1,
|
|
});
|
|
|
|
|
|
// create labels for slider
|
|
display_element.append($('<div>', {"id": 'slider_labels', "class": 'sim'}));
|
|
|
|
$('#slider_labels').append($('<p class="slider_left sim">'+trial.label_low+'</p>'));
|
|
$('#slider_labels').append($('<p class="slider_right sim">'+trial.label_high+'</p>'));
|
|
|
|
// create button
|
|
display_element.append($('<button>', {'id':'next','class':'sim'}));
|
|
$("#next").html('Next');
|
|
$("#next").click(function(){
|
|
endTime = (new Date()).getTime();
|
|
response_time = endTime-startTime;
|
|
sim_trial_complete = true;
|
|
plugin.trial(display_element,block,trial,part+1);
|
|
});
|
|
|
|
startTime = (new Date()).getTime();
|
|
break;
|
|
case 4:
|
|
// get data
|
|
var score = $("#slider").slider("value");
|
|
block.data[block.trial_idx] = $.extend({},{"sim_score": score, "rt": response_time, "a_path": trial.a_path, "b_path": trial.b_path, "trial_type": "similarity"},trial.data);
|
|
// goto next trial in block
|
|
$('.sim').remove();
|
|
setTimeout(function(){block.next();}, trial.timing_post_trial);
|
|
break;
|
|
}
|
|
}
|
|
|
|
return plugin;
|
|
})();
|
|
})(jQuery); |