HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-12 16:48:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

updating script

Browse Source
This commit is contained in:
Josh de Leeuw 2013-12-03 12:17:05 -05:00
parent 6f536b0999
commit 0b34e7f3e8
1 changed files with 176 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
examples/jspsych-categorize-animation.html
View File

@ -1,77 +1,183 @@
<!doctype html> /**
<html> * jspsych plugin for categorization trials with feedback and animated stimuli
<head> * Josh de Leeuw
<title>jspsych-categorize-animation plugin example</title> * updated December 2013
<!-- jQuery --> *
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> * display a sequence of images at a fixed frame rate then give corrective feedback based on the subject's response
<!-- jsPsych --> *
<script src="scripts/jspsych.js"></script> * parameters:
<script src="scripts/plugins/jspsych-text.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-categorize-animation.js"></script> * that will be displayed as an animation sequence.
<!-- style --> * 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.
#jspsych_target { * choices: array of key codes representing valid choices that can be made. other key responses will be ignored.
margin: 50px auto 50px auto; * correct_text: HTML string to show when correct answer is given.
width: 600px; * incorrect_text: HTML string to show when incorrect answer is given.
font-size: 18px; * NOTE: for both of the above, the special string %ANS% can be used. The text_answer associated with
text-align: center; * the trial will be substituted for %ANS%.
} * reps: how many cycles through the animation sequence to show. -1 will show until response is given.
#instructions { * allow_response_before_complete: if true, the subject can give a response before the animation sequence finishes.
text-align: left; * timing_feedback_duration: how long to show the feedback for.
} * timing_post_trial: how long to show a blank screen before the next trial.
.prompt { * frame_time: how many ms to show each individual image in the animation sequence.
font-size:14px; * prompt: HTML string to show when the subject is viewing the stimulus and making a categorization decision.
} * data: the optional data object
pre { **/
text-align: left;
}
</style>
</head>
<body> (function($) {
<div id="jspsych_target"></div> jsPsych["categorize-animation"] = (function() {
</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]; var plugin = {};
// create categorization block for jspsych plugin.create = function(params) {
var categorization_block = { var trials = new Array(params.stimuli.length);
type: 'categorize-animation', for (var i = 0; i < trials.length; i++) {
stimuli: animation_sequences, trials[i] = {};
key_answer: answers, trials[i].type = "categorize-animation";
choices: [80, 81], trials[i].stims = params.stimuli[i];
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>" 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;
}; };
// create a block of instructions plugin.trial = function(display_element, block, trial, part) {
var instructions_block = { var animate_frame = -1;
type: 'text', var reps = 0;
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 var showAnimation = true;
// call start() when loading is complete
jsPsych.preloadImages(animation_sequences[0], start);
// launch jspsych experiment var responded = false;
function start(){ var timeoutSet = false;
jsPsych.init({
display_element: $('#jspsych_target'),
experiment_structure: [instructions_block, categorization_block], var startTime = (new Date()).getTime();
on_finish: function(data) {
$('#jspsych_target').append($("<pre>", { // show animation
text: JSON.stringify(data, undefined, 2) 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>
</html> 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);
}
}
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);