mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-12 08:38:11 +00:00
remove similarity plugin #403
This commit is contained in:
Josh de Leeuw
parent
acce4407e5
commit
e36b2bdd63
@ -1,35 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<script src="js/jquery-ui.min.js"></script>
|
|
||||||
<script src="../jspsych.js"></script>
|
|
||||||
<script src="../plugins/jspsych-similarity.js"></script>
|
|
||||||
<link rel="stylesheet" href="css/jquery-ui.css"></link>
|
|
||||||
<link rel="stylesheet" href="../css/jspsych.css"></link>
|
|
||||||
<style>
|
|
||||||
img {
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body><p>If you are seeing this message, then you are probably running this example file offline.
|
|
||||||
Loading the audio files offline requires running your browser in a special mode.
|
|
||||||
See <a href="https://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load-a-url-from-a-local-file">this Q&A</a>
|
|
||||||
for examples of how to get this working with Chrome. Other browsers have similar features that you can find more information on via Google.</p></body>
|
|
||||||
<script>
|
|
||||||
var block_1 = {
|
|
||||||
type: 'similarity',
|
|
||||||
stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
|
|
||||||
prompt: '<p class="center-content">How similar are these pictures?</p>'
|
|
||||||
}
|
|
||||||
|
|
||||||
jsPsych.init({
|
|
||||||
timeline: [block_1],
|
|
||||||
on_finish: function() {
|
|
||||||
jsPsych.data.displayData();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,273 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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.
|
|
||||||
*
|
|
||||||
* documentation: docs.jspsych.org
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
jsPsych.plugins.similarity = (function() {
|
|
||||||
|
|
||||||
var plugin = {};
|
|
||||||
|
|
||||||
jsPsych.pluginAPI.registerPreload('similarity', 'stimuli', 'image',function(t){ return !t.is_html || t.is_html == 'undefined'});
|
|
||||||
|
|
||||||
plugin.info = {
|
|
||||||
name: 'similarity',
|
|
||||||
description: '',
|
|
||||||
parameters: {
|
|
||||||
stimuli: {
|
|
||||||
type: [jsPsych.plugins.parameterType.STRING],
|
|
||||||
default: undefined,
|
|
||||||
array: true,
|
|
||||||
no_function: false,
|
|
||||||
description: ''
|
|
||||||
},
|
|
||||||
is_html: {
|
|
||||||
type: [jsPsych.plugins.parameterType.BOOL],
|
|
||||||
default: false,
|
|
||||||
no_function: false,
|
|
||||||
description: ''
|
|
||||||
},
|
|
||||||
labels: {
|
|
||||||
type: [jsPsych.plugins.parameterType.STRING],
|
|
||||||
array: true,
|
|
||||||
default: ['Not at all similar', 'Identical'],
|
|
||||||
no_function: false,
|
|
||||||
description: ''
|
|
||||||
},
|
|
||||||
intervals: {
|
|
||||||
type: [jsPsych.plugins.parameterType.INT],
|
|
||||||
default: 100,
|
|
||||||
no_function: false,
|
|
||||||
description: ''
|
|
||||||
},
|
|
||||||
show_ticks: {
|
|
||||||
type: [jsPsych.plugins.parameterType.BOOL],
|
|
||||||
default: false,
|
|
||||||
no_function: false,
|
|
||||||
description: ''
|
|
||||||
},
|
|
||||||
show_response: {
|
|
||||||
type: [jsPsych.plugins.parameterType.SELECT],
|
|
||||||
options: ['FIRST_STIMULUS', 'SECOND_STIMULUS','POST_STIMULUS'],
|
|
||||||
default: 'SECOND_STIMULUS',
|
|
||||||
no_function: false,
|
|
||||||
description: ''
|
|
||||||
},
|
|
||||||
timing_first_stim: {
|
|
||||||
type: [jsPsych.plugins.parameterType.INT],
|
|
||||||
default: 1000,
|
|
||||||
no_function: false,
|
|
||||||
description: ''
|
|
||||||
},
|
|
||||||
timing_image_gap: {
|
|
||||||
type: [jsPsych.plugins.parameterType.INT],
|
|
||||||
default: 1000,
|
|
||||||
no_function: false,
|
|
||||||
description: ''
|
|
||||||
},
|
|
||||||
timing_second_stim: {
|
|
||||||
type: [jsPsych.plugins.parameterType.INT],
|
|
||||||
default: -1,
|
|
||||||
no_function: false,
|
|
||||||
description: ''
|
|
||||||
},
|
|
||||||
prompt: {
|
|
||||||
type: [jsPsych.plugins.parameterType.STRING],
|
|
||||||
default: '',
|
|
||||||
no_function: false,
|
|
||||||
description: ''
|
|
||||||
},
|
|
||||||
button_label: {
|
|
||||||
type: [jsPsych.plugins.parameterType.STRING],
|
|
||||||
default: '',
|
|
||||||
no_function: false,
|
|
||||||
description: 'Submit Answers'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
plugin.trial = function(display_element, trial) {
|
|
||||||
|
|
||||||
// default parameters
|
|
||||||
trial.labels = (typeof trial.labels === 'undefined') ? ["Not at all similar", "Identical"] : trial.labels;
|
|
||||||
trial.intervals = trial.intervals || 100;
|
|
||||||
trial.show_ticks = (typeof trial.show_ticks === 'undefined') ? false : trial.show_ticks;
|
|
||||||
|
|
||||||
trial.show_response = trial.show_response || "SECOND_STIMULUS";
|
|
||||||
|
|
||||||
trial.timing_first_stim = trial.timing_first_stim || 1000; // default 1000ms
|
|
||||||
trial.timing_second_stim = trial.timing_second_stim || -1; // -1 = inf time; positive numbers = msec to display second image.
|
|
||||||
trial.timing_image_gap = trial.timing_image_gap || 1000; // default 1000ms
|
|
||||||
|
|
||||||
trial.is_html = (typeof trial.is_html === 'undefined') ? false : trial.is_html;
|
|
||||||
trial.prompt = (typeof trial.prompt === 'undefined') ? '' : trial.prompt;
|
|
||||||
|
|
||||||
trial.button_label = typeof trial.button_label === 'undefined' ? 'Submit Answers' : trial.button_label;
|
|
||||||
|
|
||||||
// if any trial variables are functions
|
|
||||||
// this evaluates the function and replaces
|
|
||||||
// it with the output of the function
|
|
||||||
trial = jsPsych.pluginAPI.evaluateFunctionParameters(trial);
|
|
||||||
|
|
||||||
display_element.innerHTML = '';
|
|
||||||
|
|
||||||
// show the images
|
|
||||||
if (!trial.is_html) {
|
|
||||||
display_element.innerHTML += '<img src="'+trial.stimuli[0]+'" id="jspsych-sim-stim"></img>';
|
|
||||||
} else {
|
|
||||||
display_element.innerHTML += '<div id="jspsych-sim-stim">'+trial.stimuli[0]+'</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (trial.show_response == "FIRST_STIMULUS") {
|
|
||||||
show_response_slider(display_element, trial);
|
|
||||||
}
|
|
||||||
|
|
||||||
jsPsych.pluginAPI.setTimeout(function() {
|
|
||||||
showBlankScreen();
|
|
||||||
}, trial.timing_first_stim);
|
|
||||||
|
|
||||||
|
|
||||||
function showBlankScreen() {
|
|
||||||
|
|
||||||
display_element.querySelector('#jspsych-sim-stim').style.visibility = 'hidden';
|
|
||||||
|
|
||||||
jsPsych.pluginAPI.setTimeout(function() {
|
|
||||||
showSecondStim();
|
|
||||||
}, trial.timing_image_gap);
|
|
||||||
}
|
|
||||||
|
|
||||||
function showSecondStim() {
|
|
||||||
|
|
||||||
if (!trial.is_html) {
|
|
||||||
display_element.querySelector('#jspsych-sim-stim').src = trial.stimuli[1];
|
|
||||||
} else {
|
|
||||||
display_element.querySelector('#jspsych-sim-stim').innerHTML = trial.stimuli[1];
|
|
||||||
}
|
|
||||||
|
|
||||||
display_element.querySelector('#jspsych-sim-stim').style.visibility = 'visible';
|
|
||||||
|
|
||||||
if (trial.show_response == "SECOND_STIMULUS") {
|
|
||||||
show_response_slider(display_element, trial);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (trial.timing_second_stim > 0) {
|
|
||||||
jsPsych.pluginAPI.setTimeout(function() {
|
|
||||||
display_element.querySelector("#jspsych-sim-stim").style.visibility = 'hidden';
|
|
||||||
if (trial.show_response == "POST_STIMULUS") {
|
|
||||||
show_response_slider(display_element, trial);
|
|
||||||
}
|
|
||||||
}, trial.timing_second_stim);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function show_response_slider(display_element, trial) {
|
|
||||||
|
|
||||||
var startTime = (new Date()).getTime();
|
|
||||||
|
|
||||||
// create slider
|
|
||||||
display_element.append($('<div>', {
|
|
||||||
"id": 'slider',
|
|
||||||
"class": 'sim'
|
|
||||||
}));
|
|
||||||
|
|
||||||
$("#slider").slider({
|
|
||||||
value: Math.ceil(trial.intervals / 2),
|
|
||||||
min: 1,
|
|
||||||
max: trial.intervals,
|
|
||||||
step: 1,
|
|
||||||
});
|
|
||||||
|
|
||||||
// show tick marks
|
|
||||||
if (trial.show_ticks) {
|
|
||||||
for (var j = 1; j < trial.intervals - 1; j++) {
|
|
||||||
$('#slider').append('<div class="slidertickmark"></div>');
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#slider .slidertickmark').each(function(index) {
|
|
||||||
var left = (index + 1) * (100 / (trial.intervals - 1));
|
|
||||||
$(this).css({
|
|
||||||
'position': 'absolute',
|
|
||||||
'left': left + '%',
|
|
||||||
'width': '1px',
|
|
||||||
'height': '100%',
|
|
||||||
'background-color': '#222222'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// create labels for slider
|
|
||||||
display_element.append($('<ul>', {
|
|
||||||
"id": "sliderlabels",
|
|
||||||
"class": 'sliderlabels',
|
|
||||||
"css": {
|
|
||||||
"width": "100%",
|
|
||||||
"height": "3em",
|
|
||||||
"margin": "10px 0px 0px 0px",
|
|
||||||
"padding": "0px",
|
|
||||||
"display": "block",
|
|
||||||
"position": "relative"
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
|
|
||||||
for (var j = 0; j < trial.labels.length; j++) {
|
|
||||||
$("#sliderlabels").append('<li>' + trial.labels[j] + '</li>');
|
|
||||||
}
|
|
||||||
|
|
||||||
// position labels to match slider intervals
|
|
||||||
var slider_width = $("#slider").width();
|
|
||||||
var num_items = trial.labels.length;
|
|
||||||
var item_width = slider_width / num_items;
|
|
||||||
var spacing_interval = slider_width / (num_items - 1);
|
|
||||||
|
|
||||||
$("#sliderlabels li").each(function(index) {
|
|
||||||
$(this).css({
|
|
||||||
'display': 'inline-block',
|
|
||||||
'width': item_width + 'px',
|
|
||||||
'margin': '0px',
|
|
||||||
'padding': '0px',
|
|
||||||
'text-align': 'center',
|
|
||||||
'position': 'absolute',
|
|
||||||
'left': (spacing_interval * index) - (item_width / 2)
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// create button
|
|
||||||
display_element.append($('<button>', {
|
|
||||||
'id': 'next',
|
|
||||||
'class': 'sim',
|
|
||||||
'html': trial.button_label
|
|
||||||
}));
|
|
||||||
|
|
||||||
// if prompt is set, show prompt
|
|
||||||
if (trial.prompt !== "") {
|
|
||||||
display_element.append(trial.prompt);
|
|
||||||
}
|
|
||||||
|
|
||||||
display_element.querySelector("#next").addEventListener('click', function() {
|
|
||||||
var endTime = (new Date()).getTime();
|
|
||||||
var response_time = endTime - startTime;
|
|
||||||
|
|
||||||
// kill any remaining setTimeout handlers
|
|
||||||
jsPsych.pluginAPI.clearAllTimeouts();
|
|
||||||
|
|
||||||
var score = $("#slider").slider("value");
|
|
||||||
var trial_data = {
|
|
||||||
"sim_score": score,
|
|
||||||
"rt": response_time,
|
|
||||||
"stimulus": JSON.stringify([trial.stimuli[0], trial.stimuli[1]])
|
|
||||||
};
|
|
||||||
|
|
||||||
// goto next trial in block
|
|
||||||
display_element.innerHTML = '';
|
|
||||||
jsPsych.finishTrial(trial_data);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return plugin;
|
|
||||||
})();
|
|
||||||
Loading…
Reference in New Issue
Block a user