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

changed wrong file - oops

Browse Source
This commit is contained in:
Josh de Leeuw 2013-12-03 12:17:51 -05:00
parent 0b34e7f3e8
commit d637f9c86b
2 changed files with 165 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,183 +1,77 @@
/**
* jspsych plugin for categorization trials with feedback and animated stimuli
* Josh de Leeuw
* updated December 2013
*
* display a sequence of images at a fixed frame rate then give corrective feedback based on the subject's response
*
* parameters:
* stimuli: array of arrays. inner array elements are paths to images. each inner array is a set of frames
* that will be displayed as an animation sequence.
* key_answer: array of key codes representing the correct answer for each stimulus.
* text_answer: array of strings representing the label associated with each stimulus. optional.
* choices: array of key codes representing valid choices that can be made. other key responses will be ignored.
* correct_text: HTML string to show when correct answer is given.
* incorrect_text: HTML string to show when incorrect answer is given.
* NOTE: for both of the above, the special string %ANS% can be used. The text_answer associated with
* the trial will be substituted for %ANS%.
* 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];
<!doctype html>
<html>
<head>
<title>jspsych-categorize-animation plugin example</title>
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- jsPsych -->
<script src="scripts/jspsych.js"></script>
<script src="scripts/plugins/jspsych-text.js"></script>
<script src="scripts/plugins/jspsych-categorize-animation.js"></script>
<!-- style -->
<style>
#jspsych_target {
margin: 50px auto 50px auto;
width: 600px;
font-size: 18px;
text-align: center;
}
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) {
var animate_frame = -1;
var reps = 0;
// create a block of instructions
var instructions_block = {
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>"]
};
var showAnimation = true;
// preload images for animation sequence
// call start() when loading is complete
jsPsych.preloadImages(animation_sequences[0], start);
var responded = false;
var timeoutSet = false;
var startTime = (new Date()).getTime();
// 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'
// launch jspsych experiment
function start(){
jsPsych.init({
display_element: $('#jspsych_target'),
experiment_structure: [instructions_block, categorization_block],
on_finish: function(data) {
$('#jspsych_target').append($("<pre>", {
text: JSON.stringify(data, undefined, 2)
}));
}
});
}
</script>
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);
</html>

11
examples/scripts/plugins/jspsych-categorize-animation.js
View File

@ -22,7 +22,7 @@
* 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() {
@ -60,8 +60,7 @@
var responded = false;
var timeoutSet = false;
switch (part) {
case 1:
var startTime = (new Date()).getTime();
// show animation
@ -117,7 +116,7 @@
if (!timeoutSet) {
timeoutSet = true;
setTimeout(function() {
plugin.trial(display_element, block, trial, part + 1);
endTrial();
}, trial.timing_feedback_duration);
}
}
@ -169,15 +168,13 @@
}
};
$(document).keyup(resp_func);
break;
case 2:
function endTrial() {
clearInterval(animate_interval); // stop animation!
display_element.html(''); // clear everything
setTimeout(function() {
block.next();
}, trial.timing_post_trial);
break;
}
};