mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-12 16:48:12 +00:00
changed wrong file - oops
This commit is contained in:
Josh de Leeuw
parent
0b34e7f3e8
commit
d637f9c86b
@ -1,183 +1,77 @@
|
|||||||
/**
|
<!doctype html>
|
||||||
* jspsych plugin for categorization trials with feedback and animated stimuli
|
<html>
|
||||||
* Josh de Leeuw
|
<head>
|
||||||
* updated December 2013
|
<title>jspsych-categorize-animation plugin example</title>
|
||||||
*
|
<!-- jQuery -->
|
||||||
* display a sequence of images at a fixed frame rate then give corrective feedback based on the subject's response
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||||
*
|
<!-- jsPsych -->
|
||||||
* parameters:
|
<script src="scripts/jspsych.js"></script>
|
||||||
* stimuli: array of arrays. inner array elements are paths to images. each inner array is a set of frames
|
<script src="scripts/plugins/jspsych-text.js"></script>
|
||||||
* that will be displayed as an animation sequence.
|
<script src="scripts/plugins/jspsych-categorize-animation.js"></script>
|
||||||
* key_answer: array of key codes representing the correct answer for each stimulus.
|
<!-- style -->
|
||||||
* text_answer: array of strings representing the label associated with each stimulus. optional.
|
<style>
|
||||||
* choices: array of key codes representing valid choices that can be made. other key responses will be ignored.
|
#jspsych_target {
|
||||||
* correct_text: HTML string to show when correct answer is given.
|
margin: 50px auto 50px auto;
|
||||||
* incorrect_text: HTML string to show when incorrect answer is given.
|
width: 600px;
|
||||||
* NOTE: for both of the above, the special string %ANS% can be used. The text_answer associated with
|
font-size: 18px;
|
||||||
* the trial will be substituted for %ANS%.
|
text-align: center;
|
||||||
* reps: how many cycles through the animation sequence to show. -1 will show until response is given.
|
|
||||||
* allow_response_before_complete: if true, the subject can give a response before the animation sequence finishes.
|
|
||||||
* timing_feedback_duration: how long to show the feedback for.
|
|
||||||
* timing_post_trial: how long to show a blank screen before the next trial.
|
|
||||||
* frame_time: how many ms to show each individual image in the animation sequence.
|
|
||||||
* prompt: HTML string to show when the subject is viewing the stimulus and making a categorization decision.
|
|
||||||
* data: the optional data object
|
|
||||||
**/
|
|
||||||
|
|
||||||
(function($) {
|
|
||||||
jsPsych["categorize-animation"] = (function() {
|
|
||||||
|
|
||||||
var plugin = {};
|
|
||||||
|
|
||||||
plugin.create = function(params) {
|
|
||||||
var trials = new Array(params.stimuli.length);
|
|
||||||
for (var i = 0; i < trials.length; i++) {
|
|
||||||
trials[i] = {};
|
|
||||||
trials[i].type = "categorize-animation";
|
|
||||||
trials[i].stims = params.stimuli[i];
|
|
||||||
trials[i].reps = params.reps || 1;
|
|
||||||
trials[i].key_answer = params.key_answer[i];
|
|
||||||
trials[i].text_answer = (typeof params.text_answer === 'undefined') ? "" : params.text_answer[i];
|
|
||||||
trials[i].choices = params.choices;
|
|
||||||
trials[i].correct_text = params.correct_text || "Correct.";
|
|
||||||
trials[i].incorrect_text = params.incorrect_text || "Wrong.";
|
|
||||||
trials[i].allow_response_before_complete = params.allow_response_before_complete || false;
|
|
||||||
trials[i].frame_time = params.frame_time || 500;
|
|
||||||
trials[i].timing_feedback_duration = params.timing_feedback_duration || 2000;
|
|
||||||
trials[i].timing_post_trial = params.timing_post_trial || 1000;
|
|
||||||
trials[i].prompt = (typeof params.prompt === 'undefined') ? '' : params.prompt;
|
|
||||||
trials[i].data = (typeof params.data === 'undefined') ? {} : params.data[i];
|
|
||||||
}
|
}
|
||||||
return trials;
|
#instructions {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.prompt {
|
||||||
|
font-size:14px;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="jspsych_target"></div>
|
||||||
|
</body>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var animation_sequences = [
|
||||||
|
["img/face_1.jpg", "img/face_2.jpg", "img/face_3.jpg", "img/face_4.jpg"],
|
||||||
|
["img/face_4.jpg", "img/face_3.jpg", "img/face_2.jpg", "img/face_1.jpg"],
|
||||||
|
["img/face_1.jpg", "img/face_2.jpg", "img/face_3.jpg", "img/face_4.jpg"],
|
||||||
|
["img/face_4.jpg", "img/face_3.jpg", "img/face_2.jpg", "img/face_1.jpg"]
|
||||||
|
];
|
||||||
|
|
||||||
|
var answers = [81,80,81,80];
|
||||||
|
|
||||||
|
// create categorization block for jspsych
|
||||||
|
var categorization_block = {
|
||||||
|
type: 'categorize-animation',
|
||||||
|
stimuli: animation_sequences,
|
||||||
|
key_answer: answers,
|
||||||
|
choices: [80, 81],
|
||||||
|
prompt: "<p class='prompt'>Press Q if the face rotates from the front to the side. Press P if the face rotates from the side to the front.</p>"
|
||||||
};
|
};
|
||||||
|
|
||||||
plugin.trial = function(display_element, block, trial, part) {
|
// create a block of instructions
|
||||||
var animate_frame = -1;
|
var instructions_block = {
|
||||||
var reps = 0;
|
type: 'text',
|
||||||
|
text: ["<div id='instructions'><p>Press Q if the face rotates from the front to the side. Press P if the face rotates from the side to the front.</p><p>Press ENTER to begin.</p></div>"]
|
||||||
|
};
|
||||||
|
|
||||||
|
// preload images for animation sequence
|
||||||
|
// call start() when loading is complete
|
||||||
|
jsPsych.preloadImages(animation_sequences[0], start);
|
||||||
|
|
||||||
var showAnimation = true;
|
// launch jspsych experiment
|
||||||
|
function start(){
|
||||||
var responded = false;
|
jsPsych.init({
|
||||||
var timeoutSet = false;
|
display_element: $('#jspsych_target'),
|
||||||
|
experiment_structure: [instructions_block, categorization_block],
|
||||||
|
on_finish: function(data) {
|
||||||
var startTime = (new Date()).getTime();
|
$('#jspsych_target').append($("<pre>", {
|
||||||
|
text: JSON.stringify(data, undefined, 2)
|
||||||
// show animation
|
|
||||||
var animate_interval = setInterval(function() {
|
|
||||||
display_element.html(""); // clear everything
|
|
||||||
animate_frame++;
|
|
||||||
if (animate_frame == trial.stims.length) {
|
|
||||||
animate_frame = 0;
|
|
||||||
reps++;
|
|
||||||
// check if reps complete //
|
|
||||||
if (trial.reps != -1 && reps >= trial.reps) {
|
|
||||||
// done with animation
|
|
||||||
showAnimation = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (showAnimation) {
|
|
||||||
display_element.append($('<img>', {
|
|
||||||
"src": trial.stims[animate_frame],
|
|
||||||
"class": 'animate'
|
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
if (!responded && trial.allow_response_before_complete) {
|
</html>
|
||||||
// in here if the user can respond before the animation is done
|
|
||||||
if (trial.prompt !== "") {
|
|
||||||
display_element.append(trial.prompt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if (!responded) {
|
|
||||||
// in here if the user has to wait to respond until animation is done.
|
|
||||||
// if this is the case, don't show the prompt until the animation is over.
|
|
||||||
if (!showAnimation) {
|
|
||||||
if (trial.prompt !== "") {
|
|
||||||
display_element.append(trial.prompt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// user has responded if we get here.
|
|
||||||
|
|
||||||
// show feedback
|
|
||||||
var feedback_text = "";
|
|
||||||
if (block.data[block.trial_idx].correct) {
|
|
||||||
feedback_text = trial.correct_text.replace("%ANS%", trial.text_answer);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
feedback_text = trial.incorrect_text.replace("%ANS%", trial.text_answer);
|
|
||||||
}
|
|
||||||
display_element.append(feedback_text);
|
|
||||||
|
|
||||||
// set timeout to clear feedback
|
|
||||||
if (!timeoutSet) {
|
|
||||||
timeoutSet = true;
|
|
||||||
setTimeout(function() {
|
|
||||||
endTrial();
|
|
||||||
}, trial.timing_feedback_duration);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}, trial.frame_time);
|
|
||||||
|
|
||||||
// attach response function
|
|
||||||
|
|
||||||
var resp_func = function(e) {
|
|
||||||
|
|
||||||
if (!trial.allow_response_before_complete && showAnimation) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
var flag = false; // valid keystroke?
|
|
||||||
var correct = false; // correct answer?
|
|
||||||
|
|
||||||
if (e.which == trial.key_answer) // correct category
|
|
||||||
{
|
|
||||||
flag = true;
|
|
||||||
correct = true;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// check if the key is any of the options, or if it is an accidental keystroke
|
|
||||||
for (var i = 0; i < trial.choices.length; i++) {
|
|
||||||
if (e.which == trial.choices[i]) {
|
|
||||||
flag = true;
|
|
||||||
correct = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (flag) // if keystroke is one of the choices
|
|
||||||
{
|
|
||||||
responded = true;
|
|
||||||
var endTime = (new Date()).getTime();
|
|
||||||
var rt = (endTime - startTime);
|
|
||||||
|
|
||||||
var trial_data = {
|
|
||||||
"trial_type": trial.type,
|
|
||||||
"trial_index": block.trial_idx,
|
|
||||||
"stimulus": trial.stims[0],
|
|
||||||
"rt": rt,
|
|
||||||
"correct": correct,
|
|
||||||
"key_press": e.which
|
|
||||||
};
|
|
||||||
block.writeData($.extend({}, trial_data, trial.data));
|
|
||||||
$(document).unbind('keyup', resp_func);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
$(document).keyup(resp_func);
|
|
||||||
|
|
||||||
function endTrial() {
|
|
||||||
clearInterval(animate_interval); // stop animation!
|
|
||||||
display_element.html(''); // clear everything
|
|
||||||
setTimeout(function() {
|
|
||||||
block.next();
|
|
||||||
}, trial.timing_post_trial);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return plugin;
|
|
||||||
})();
|
|
||||||
})(jQuery);
|
|
||||||
@ -22,7 +22,7 @@
|
|||||||
* frame_time: how many ms to show each individual image in the animation sequence.
|
* frame_time: how many ms to show each individual image in the animation sequence.
|
||||||
* prompt: HTML string to show when the subject is viewing the stimulus and making a categorization decision.
|
* prompt: HTML string to show when the subject is viewing the stimulus and making a categorization decision.
|
||||||
* data: the optional data object
|
* data: the optional data object
|
||||||
**/
|
**/
|
||||||
|
|
||||||
(function($) {
|
(function($) {
|
||||||
jsPsych["categorize-animation"] = (function() {
|
jsPsych["categorize-animation"] = (function() {
|
||||||
@ -60,124 +60,121 @@
|
|||||||
var responded = false;
|
var responded = false;
|
||||||
var timeoutSet = false;
|
var timeoutSet = false;
|
||||||
|
|
||||||
switch (part) {
|
|
||||||
case 1:
|
|
||||||
var startTime = (new Date()).getTime();
|
|
||||||
|
|
||||||
// show animation
|
var startTime = (new Date()).getTime();
|
||||||
var animate_interval = setInterval(function() {
|
|
||||||
display_element.html(""); // clear everything
|
// show animation
|
||||||
animate_frame++;
|
var animate_interval = setInterval(function() {
|
||||||
if (animate_frame == trial.stims.length) {
|
display_element.html(""); // clear everything
|
||||||
animate_frame = 0;
|
animate_frame++;
|
||||||
reps++;
|
if (animate_frame == trial.stims.length) {
|
||||||
// check if reps complete //
|
animate_frame = 0;
|
||||||
if (trial.reps != -1 && reps >= trial.reps) {
|
reps++;
|
||||||
// done with animation
|
// check if reps complete //
|
||||||
showAnimation = false;
|
if (trial.reps != -1 && reps >= trial.reps) {
|
||||||
}
|
// done with animation
|
||||||
|
showAnimation = false;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (showAnimation) {
|
if (showAnimation) {
|
||||||
display_element.append($('<img>', {
|
display_element.append($('<img>', {
|
||||||
"src": trial.stims[animate_frame],
|
"src": trial.stims[animate_frame],
|
||||||
"class": 'animate'
|
"class": 'animate'
|
||||||
}));
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!responded && trial.allow_response_before_complete) {
|
||||||
|
// in here if the user can respond before the animation is done
|
||||||
|
if (trial.prompt !== "") {
|
||||||
|
display_element.append(trial.prompt);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
if (!responded && trial.allow_response_before_complete) {
|
else if (!responded) {
|
||||||
// in here if the user can respond before the animation is done
|
// in here if the user has to wait to respond until animation is done.
|
||||||
|
// if this is the case, don't show the prompt until the animation is over.
|
||||||
|
if (!showAnimation) {
|
||||||
if (trial.prompt !== "") {
|
if (trial.prompt !== "") {
|
||||||
display_element.append(trial.prompt);
|
display_element.append(trial.prompt);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (!responded) {
|
}
|
||||||
// in here if the user has to wait to respond until animation is done.
|
else {
|
||||||
// if this is the case, don't show the prompt until the animation is over.
|
// user has responded if we get here.
|
||||||
if (!showAnimation) {
|
|
||||||
if (trial.prompt !== "") {
|
// show feedback
|
||||||
display_element.append(trial.prompt);
|
var feedback_text = "";
|
||||||
}
|
if (block.data[block.trial_idx].correct) {
|
||||||
}
|
feedback_text = trial.correct_text.replace("%ANS%", trial.text_answer);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
// user has responded if we get here.
|
feedback_text = trial.incorrect_text.replace("%ANS%", trial.text_answer);
|
||||||
|
}
|
||||||
|
display_element.append(feedback_text);
|
||||||
|
|
||||||
// show feedback
|
// set timeout to clear feedback
|
||||||
var feedback_text = "";
|
if (!timeoutSet) {
|
||||||
if (block.data[block.trial_idx].correct) {
|
timeoutSet = true;
|
||||||
feedback_text = trial.correct_text.replace("%ANS%", trial.text_answer);
|
setTimeout(function() {
|
||||||
}
|
endTrial();
|
||||||
else {
|
}, trial.timing_feedback_duration);
|
||||||
feedback_text = trial.incorrect_text.replace("%ANS%", trial.text_answer);
|
}
|
||||||
}
|
}
|
||||||
display_element.append(feedback_text);
|
|
||||||
|
|
||||||
// set timeout to clear feedback
|
|
||||||
if (!timeoutSet) {
|
}, trial.frame_time);
|
||||||
timeoutSet = true;
|
|
||||||
setTimeout(function() {
|
// attach response function
|
||||||
plugin.trial(display_element, block, trial, part + 1);
|
|
||||||
}, trial.timing_feedback_duration);
|
var resp_func = function(e) {
|
||||||
|
|
||||||
|
if (!trial.allow_response_before_complete && showAnimation) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
var flag = false; // valid keystroke?
|
||||||
|
var correct = false; // correct answer?
|
||||||
|
|
||||||
|
if (e.which == trial.key_answer) // correct category
|
||||||
|
{
|
||||||
|
flag = true;
|
||||||
|
correct = true;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// check if the key is any of the options, or if it is an accidental keystroke
|
||||||
|
for (var i = 0; i < trial.choices.length; i++) {
|
||||||
|
if (e.which == trial.choices[i]) {
|
||||||
|
flag = true;
|
||||||
|
correct = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
if (flag) // if keystroke is one of the choices
|
||||||
|
{
|
||||||
|
responded = true;
|
||||||
|
var endTime = (new Date()).getTime();
|
||||||
|
var rt = (endTime - startTime);
|
||||||
|
|
||||||
|
var trial_data = {
|
||||||
|
"trial_type": trial.type,
|
||||||
|
"trial_index": block.trial_idx,
|
||||||
|
"stimulus": trial.stims[0],
|
||||||
|
"rt": rt,
|
||||||
|
"correct": correct,
|
||||||
|
"key_press": e.which
|
||||||
|
};
|
||||||
|
block.writeData($.extend({}, trial_data, trial.data));
|
||||||
|
$(document).unbind('keyup', resp_func);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
$(document).keyup(resp_func);
|
||||||
|
|
||||||
}, trial.frame_time);
|
function endTrial() {
|
||||||
|
|
||||||
// attach response function
|
|
||||||
|
|
||||||
var resp_func = function(e) {
|
|
||||||
|
|
||||||
if (!trial.allow_response_before_complete && showAnimation) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
var flag = false; // valid keystroke?
|
|
||||||
var correct = false; // correct answer?
|
|
||||||
|
|
||||||
if (e.which == trial.key_answer) // correct category
|
|
||||||
{
|
|
||||||
flag = true;
|
|
||||||
correct = true;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// check if the key is any of the options, or if it is an accidental keystroke
|
|
||||||
for (var i = 0; i < trial.choices.length; i++) {
|
|
||||||
if (e.which == trial.choices[i]) {
|
|
||||||
flag = true;
|
|
||||||
correct = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (flag) // if keystroke is one of the choices
|
|
||||||
{
|
|
||||||
responded = true;
|
|
||||||
var endTime = (new Date()).getTime();
|
|
||||||
var rt = (endTime - startTime);
|
|
||||||
|
|
||||||
var trial_data = {
|
|
||||||
"trial_type": trial.type,
|
|
||||||
"trial_index": block.trial_idx,
|
|
||||||
"stimulus": trial.stims[0],
|
|
||||||
"rt": rt,
|
|
||||||
"correct": correct,
|
|
||||||
"key_press": e.which
|
|
||||||
};
|
|
||||||
block.writeData($.extend({}, trial_data, trial.data));
|
|
||||||
$(document).unbind('keyup', resp_func);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
$(document).keyup(resp_func);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 2:
|
|
||||||
clearInterval(animate_interval); // stop animation!
|
clearInterval(animate_interval); // stop animation!
|
||||||
display_element.html(''); // clear everything
|
display_element.html(''); // clear everything
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
block.next();
|
block.next();
|
||||||
}, trial.timing_post_trial);
|
}, trial.timing_post_trial);
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user