mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-12 08:38:11 +00:00
Josh de Leeuw
GitHub
commit
740f571148
@ -8,10 +8,8 @@ This table lists the parameters associated with this plugin. Parameters with a d
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
questions | array | *undefined* | Each array element a string. The strings are the prompts/questions that will be associated with a slider.
|
||||
labels | array | *undefined* | Each array element is an array of strings. The innermost arrays contain a set of labels to display for an individual question. If you want to use blank responses and only label the end points or some subset of the options, just insert a blank string for the unlabeled responses.
|
||||
questions | array | *undefined* | An array of objects, each object represents a question that appears on the screen. Each object contains a prompt, labels and required parameter that will be applied to the question. See examples below for further clarification.`prompt`: Type string, default value is *undefined*. The strings are the question that will be associated with a slider. `labels`: Type array, default value is *undefined*. Each array element is an array of strings. The innermost arrays contain a set of labels to display for an individual question. If you want to use blank responses and only label the end points or some subset of the options, just insert a blank string for the unlabeled responses.`required`: Type boolean, default value is false. Makes answering questions required.
|
||||
preamble | string | empty string | HTML formatted string to display at the top of the page above all the questions.
|
||||
required | boolean | false | Makes answering questions required.
|
||||
button_label | string | 'Button label' | Label of the button.
|
||||
|
||||
## Data Generated
|
||||
@ -28,15 +26,12 @@ rt | numeric | The response time in milliseconds for the subject to make a respo
|
||||
#### Basic example with multiple questions on a page.
|
||||
|
||||
```javascript
|
||||
// defining groups of questions that will go together.
|
||||
var page_1_questions = ["I like vegetables.", "I hate eggs."];
|
||||
|
||||
// defining two different response scales that can be used.
|
||||
var scale_1 = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"];
|
||||
|
||||
var likert_page = {
|
||||
type: 'survey-likert',
|
||||
questions: ["I like vegetables.", "I like fruit."],
|
||||
labels: [scale_1, scale_1], // need one scale for every question on a page
|
||||
questions: [{prompt: "I like vegetables.", labels: scale_1],
|
||||
};
|
||||
```
|
||||
|
||||
@ -8,10 +8,7 @@ This table lists the parameters associated with this plugin. Parameters with a d
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
questions | array | *undefined* | An array of strings. The strings are the prompts/questions that will be associated with a group of options (radio buttons). All questions will get presented on the same page (trial).
|
||||
options | array | *undefined* | An array of arrays. The innermost arrays contain a set of options to display for an individual question. The length of the outer array should be the same as the number of questions.
|
||||
required | array | null | An array of boolean values. Each boolean indicates if a question is required (`true`) or not (`false`), using the HTML5 `required` attribute. The length of this array should correspond to the length of the questions array. If this parameter is undefined, all questions will be optional. Note: The HTML5 `required` attribute is [not currently supported by the Safari browser][1].
|
||||
horizontal | boolean | false | If true, then questions are centered and options are displayed horizontally.
|
||||
questions | array | *undefined* | An array of objects, each object represents a question that appears on the screen. Each object contains a prompt, options, required, and horizontal parameter that will be applied to the question. See examples below for further clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be associated with a group of options (radio buttons). All questions will get presented on the same page (trial).`options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is undefined, the question will be optional. Note: The HTML5 `required` attribute is [not currently supported by the Safari browser][1].`horizontal`:Type boolean, default value is false. If true, then the question is centered and the options are displayed horizontally.
|
||||
preamble | string | empty string | HTML formatted string to display at the top of the page above all the questions.
|
||||
button_label | string | 'Button label' | Label of the button.
|
||||
|
||||
@ -39,20 +36,15 @@ rt | numeric | The response time in milliseconds for the subject to make a respo
|
||||
var page_2_options = ["Strongly Disagree", "Disagree", "Somewhat Disagree", "Neural", "Somewhat Agree", "Agree", "Strongly Agree"];
|
||||
|
||||
var multi_choice_block = {
|
||||
type: 'survey-multi-choice',
|
||||
questions: page_1_questions,
|
||||
options: [page_1_options, page_2_options], // need one scale for every question on a page
|
||||
required: [true, false] // set whether questions are required
|
||||
type: 'survey-multi-choice',
|
||||
questions: [{prompt: "I like vegetables", options: page_1_options, required:true,}, {prompt: "I like fruit", options: page_2_options, required: false}],
|
||||
};
|
||||
|
||||
var multi_choice_block_horizontal = {
|
||||
type: 'survey-multi-choice',
|
||||
questions: page_1_questions,
|
||||
options: [page_1_options, page_2_options], // need one scale for every question on a page
|
||||
required: [true, false], // set whether questions are required
|
||||
horizontal: true // centres questions and makes options display horizontally
|
||||
type: 'survey-multi-choice',
|
||||
questions: [{prompt: "I like vegetables", options: page_1_options, required: true, horizontal: true,}, {prompt: "I like fruit", options: page_2_options, required: false, horizontal: false}],
|
||||
};
|
||||
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [multi_choice_block, multi_choice_block_horizontal],
|
||||
on_finish: function() {
|
||||
|
||||
@ -8,10 +8,8 @@ This table lists the parameters associated with this plugin. Parameters with a d
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
questions | array | *undefined* | An array of strings. The strings are the prompts/questions that will be associated with a group of options (check boxes). All questions will get presented on the same page (trial).
|
||||
options | array | *undefined* | An array of arrays. The innermost arrays contain a set of options to display for an individual question. The length of the outer array should be the same as the number of questions.
|
||||
questions | array | *undefined* | An array of objects, each object represents a question that appears on the screen. Each object contains a prompt, options and horizontal parameter that will be applied to the question. See examples below for further clarification.`prompt`: Type string, default value of *undefined*. The string is the prompt/question that will be associated with a group of options (check boxes). All questions will get presented on the same page (trial).`options`: Type array, default value of *undefined*. The array contains a set of options to display for an individual question.`horizontal`: Type boolean, default value of false. If true, the questions are centered and options are displayed horizontally.
|
||||
required | boolean | true | If true, then at least one option must be selected.
|
||||
horizontal | boolean | false | If true, then questions are centered and options are displayed horizontally.
|
||||
preamble | string | empty string | HTML formatted string to display at the top of the page above all the questions.
|
||||
button_label | string | 'Button label' | Label of the button.
|
||||
|
||||
@ -29,24 +27,18 @@ rt | numeric | The response time in milliseconds for the subject to make a respo
|
||||
#### Basic example with multiple questions on a page.
|
||||
|
||||
```javascript
|
||||
// defining groups of questions that will go together.
|
||||
var page_1_questions = ["I like vegetables.", "I like fruit."];
|
||||
|
||||
// definiting two different response scales that can be used.
|
||||
var page_1_options = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"];
|
||||
var page_2_options = ["Strongly Disagree", "Disagree", "Somewhat Disagree", "Neural", "Somewhat Agree", "Agree", "Strongly Agree"];
|
||||
|
||||
var multi_select_block = {
|
||||
type: 'survey-multi-select',
|
||||
questions: page_1_questions,
|
||||
options: [page_1_options, page_2_options], // need one scale for every question on a page
|
||||
questions: [{prompt: "I like vegetables", options: page_1_options}, {prompt: "I like fruit", options: page_2_options}]
|
||||
};
|
||||
|
||||
var multi_select_block_horizontal = {
|
||||
type: 'survey-multi-select',
|
||||
questions: page_1_questions,
|
||||
options: [page_1_options, page_2_options], // need one scale for every question on a page
|
||||
horizontal: true // centers questions and makes options display horizontally
|
||||
questions: [{prompt: "I like vegetables", options: page_1_options, horizontal: true}, {prompt: "I like fruit", options: page_2_options, horiztonal: false}]
|
||||
};
|
||||
|
||||
jsPsych.init({
|
||||
|
||||
@ -8,11 +8,8 @@ This table lists the parameters associated with this plugin. Parameters with a d
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
questions | array | *undefined* | An array of strings. The strings are the prompts for the subject to respond to. Each string gets its own response field.
|
||||
questions | array | *undefined* | An array of objects, each object represents a question that appears on the screen. Each object contains a prompt, value, rows, and columns parameter that will be applied to the question. See examples below for further clarification.`prompt`: Type string, default value of *undefined*. The string is the prompt for the subject to respond to. Each question gets its own response field.`value`: Type array, default value of `[""]`. The string will be used to populate the response field with editable answers.`rows`: Type array, default value of 1. The number of rows for the response text box. `columns`: Type array, default value of 40. The number of columns for the response text box.
|
||||
preamble | string | empty string | HTML formatted string to display at the top of the page above all the questions.
|
||||
values | array | `[""]` | An array of strings. The strings will be used to populate the response fields with editable answers.
|
||||
rows | array | 1 | The number of rows for the response text box. Array length must match `questions` array, with a numeric value for each entry indicating the number of rows for that question's box.
|
||||
columns | array | 40 | The number of columns for the response text box. Array length must match `questions` array, with a numeric value for each entry indicating the number of columns for that question's box.
|
||||
button_label | string | 'Next' | The text that appears on the button to finish the trial.
|
||||
|
||||
## Data Generated
|
||||
@ -32,7 +29,7 @@ rt | numeric | The response time in milliseconds for the subject to make a respo
|
||||
// defining groups of questions that will go together.
|
||||
var survey_trial = {
|
||||
type: 'survey-text',
|
||||
questions: ["How old are you?", "Where were you born?"],
|
||||
questions: [{prompt: "How old are you?"}, {prompt: "Where were you born?"}],
|
||||
};
|
||||
```
|
||||
|
||||
@ -41,8 +38,6 @@ var survey_trial = {
|
||||
```javascript
|
||||
var survey_trial = {
|
||||
type: 'survey-text',
|
||||
questions: ["How old are you?", "Where were you born?"],
|
||||
rows: [5,3],
|
||||
columns: [40,50]
|
||||
questions: [{prompt: "How old are you?", rows: 5, columns: 40}, {prompt: "Where were you born?", rows: 3, columns: 50}],
|
||||
};
|
||||
```
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
key_answer: 68,
|
||||
choices: [68, 83],
|
||||
text_answer: 'different',
|
||||
feedback_duration: 500,
|
||||
correct_text: "<p>Correct. The faces had %ANS% expressions.</p>",
|
||||
incorrect_text: "<p>Incorrect. The faces had %ANS% expressions.</p>",
|
||||
prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
|
||||
|
||||
@ -12,8 +12,7 @@
|
||||
type: 'instructions',
|
||||
pages: ['Welcome to the experiment. Click next to begin.',
|
||||
'This is the second page of instructions.',
|
||||
'This is the final page.'
|
||||
],
|
||||
'This is the final page.'],
|
||||
show_clickable_nav: true
|
||||
}
|
||||
|
||||
|
||||
@ -8,9 +8,6 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
// defining groups of questions that will go together.
|
||||
var page_1_questions = ["I like vegetables.", "I like fruit."];
|
||||
|
||||
// definiting two different response scales that can be used.
|
||||
var page_1_options = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"];
|
||||
var page_2_options = ["Strongly Disagree", "Disagree", "Somewhat Disagree", "Neural", "Somewhat Agree", "Agree", "Strongly Agree"];
|
||||
|
||||
@ -19,6 +19,7 @@ jsPsych.plugins['survey-likert'] = (function() {
|
||||
questions: {
|
||||
type: jsPsych.plugins.parameterType.COMPLEX,
|
||||
array: true,
|
||||
pretty_name: 'Questions',
|
||||
nested: {
|
||||
prompt: {type: jsPsych.plugins.parameterType.STRING,
|
||||
pretty_name: 'Prompt',
|
||||
|
||||
@ -19,6 +19,7 @@ jsPsych.plugins['survey-multi-choice'] = (function() {
|
||||
questions: {
|
||||
type: jsPsych.plugins.parameterType.COMPLEX,
|
||||
array: true,
|
||||
pretty_name: 'Questions',
|
||||
nested: {
|
||||
prompt: {type: jsPsych.plugins.parameterType.STRING,
|
||||
pretty_name: 'Prompt',
|
||||
@ -33,8 +34,8 @@ jsPsych.plugins['survey-multi-choice'] = (function() {
|
||||
pretty_name: 'Required',
|
||||
default: false,
|
||||
description: 'Subject will be required to pick an option for each question.'},
|
||||
horitzontal: {type: jsPsych.plugins.parameterType.BOOL,
|
||||
pretty_name: 'Horitzontal',
|
||||
horizontal: {type: jsPsych.plugins.parameterType.BOOL,
|
||||
pretty_name: 'Horizontal',
|
||||
default: false,
|
||||
description: 'If true, then questions are centered and options are displayed horizontally.'},
|
||||
}
|
||||
|
||||
@ -17,6 +17,7 @@ jsPsych.plugins['survey-multi-select'] = (function() {
|
||||
questions: {
|
||||
type: jsPsych.plugins.parameterType.COMPLEX,
|
||||
array: true,
|
||||
pretty_name: 'Questions',
|
||||
nested: {
|
||||
prompt: {type: jsPsych.plugins.parameterType.STRING,
|
||||
pretty_name: 'Prompt',
|
||||
@ -27,8 +28,8 @@ jsPsych.plugins['survey-multi-select'] = (function() {
|
||||
array: true,
|
||||
default: undefined,
|
||||
description: 'Displays options for an individual question.'},
|
||||
horitzontal: {type: jsPsych.plugins.parameterType.BOOL,
|
||||
pretty_name: 'Horitzontal',
|
||||
horizontal: {type: jsPsych.plugins.parameterType.BOOL,
|
||||
pretty_name: 'Horizontal',
|
||||
default: false,
|
||||
description: 'If true, then questions are centered and options are displayed horizontally.'},
|
||||
}
|
||||
|
||||
@ -19,7 +19,8 @@ jsPsych.plugins['survey-text'] = (function() {
|
||||
parameters: {
|
||||
questions: {
|
||||
type: jsPsych.plugins.parameterType.COMPLEX,
|
||||
array:true,
|
||||
array: true,
|
||||
pretty_name: 'Questions',
|
||||
nested: {
|
||||
prompt: {type: jsPsych.plugins.parameterType.STRING,
|
||||
pretty_name: 'Prompt',
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
const root = '../../';
|
||||
const utils = require('../testing-utils.js');
|
||||
|
||||
jest.useFakeTimers();
|
||||
|
||||
@ -13,4 +14,239 @@ describe('categorize-animation plugin', function(){
|
||||
expect(typeof window.jsPsych.plugins['categorize-animation']).not.toBe('undefined');
|
||||
});
|
||||
|
||||
test('displays stimulus every 500ms', function(){
|
||||
var trial = {
|
||||
type: 'categorize-animation',
|
||||
stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
|
||||
key_answer: 68
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial]
|
||||
});
|
||||
|
||||
jest.runTimersToTime(500);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/happy_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">');
|
||||
jest.runTimersToTime(500);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/sad_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">')
|
||||
});
|
||||
|
||||
test('prompt should display after animation', function(){
|
||||
var trial = {
|
||||
type: 'categorize-animation',
|
||||
stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
|
||||
key_answer: 68,
|
||||
prompt: "<p>Press d if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>"
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial],
|
||||
});
|
||||
|
||||
jest.runTimersToTime(1500);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('<p>Press d if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>');
|
||||
});
|
||||
|
||||
test('should display correct if key_answer is pressed', function(){
|
||||
var trial = {
|
||||
type: 'categorize-animation',
|
||||
stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
|
||||
key_answer: 68,
|
||||
choices: [68, 83],
|
||||
prompt: "<p>Press d if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>"
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial],
|
||||
});
|
||||
|
||||
jest.runTimersToTime(1500);
|
||||
utils.pressKey(68);
|
||||
jest.runTimersToTime(1000);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('Correct.');
|
||||
});
|
||||
|
||||
test('should display incorrect if different key is pressed', function(){
|
||||
var trial = {
|
||||
type: 'categorize-animation',
|
||||
stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
|
||||
key_answer: 68,
|
||||
choices: [68, 83],
|
||||
prompt: "<p>Press d if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>"
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial],
|
||||
});
|
||||
|
||||
jest.runTimersToTime(1500);
|
||||
utils.pressKey(83);
|
||||
jest.runTimersToTime(1000);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('Wrong.');
|
||||
});
|
||||
|
||||
test('text answer should replace %ANS%', function(){
|
||||
var trials = {
|
||||
type: 'categorize-animation',
|
||||
stimuli: ['img/happy_face_1.jpg', 'img/sad_face_3.jpg'],
|
||||
key_answer: 68,
|
||||
choices: [68, 83],
|
||||
text_answer: 'different',
|
||||
correct_text: "<p>Correct. The faces had %ANS% expressions.</p>",
|
||||
incorrect_text: "<p>Incorrect. The faces had %ANS% expressions.</p>",
|
||||
prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
|
||||
};
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trials],
|
||||
});
|
||||
|
||||
jest.runTimersToTime(1500);
|
||||
utils.pressKey(68);
|
||||
jest.runTimersToTime(1000);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('<p>Correct. The faces had different expressions.</p>');
|
||||
});
|
||||
|
||||
test('correct text displays when when key_answer is pressed', function(){
|
||||
var trials = {
|
||||
type: 'categorize-animation',
|
||||
stimuli: ['img/happy_face_1.jpg', 'img/sad_face_3.jpg'],
|
||||
key_answer: 68,
|
||||
choices: [68, 83],
|
||||
correct_text: "<p>You pressed the correct key</p>",
|
||||
incorrect_text: "<p>Incorrect.</p>",
|
||||
prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
|
||||
};
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trials],
|
||||
});
|
||||
|
||||
jest.runTimersToTime(1500);
|
||||
utils.pressKey(68);
|
||||
jest.runTimersToTime(1000);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('<p>You pressed the correct key</p>');
|
||||
});
|
||||
|
||||
test('correct text displays when when key_answer is pressed', function(){
|
||||
var trials = {
|
||||
type: 'categorize-animation',
|
||||
stimuli: ['img/happy_face_1.jpg', 'img/sad_face_3.jpg'],
|
||||
key_answer: 68,
|
||||
choices: [68, 83],
|
||||
correct_text: "<p>You pressed the correct key</p>",
|
||||
incorrect_text: "<p>Incorrect. You pressed the wrong key.</p>",
|
||||
prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
|
||||
};
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trials],
|
||||
});
|
||||
|
||||
jest.runTimersToTime(1500);
|
||||
utils.pressKey(83);
|
||||
jest.runTimersToTime(1000);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('<p>Incorrect. You pressed the wrong key.</p>');
|
||||
});
|
||||
|
||||
test('duration to display image is based on frame_time', function(){
|
||||
var trials = {
|
||||
type: 'categorize-animation',
|
||||
stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
|
||||
key_answer: 68,
|
||||
choices: [68, 83],
|
||||
frame_time: 1000,
|
||||
correct_text: "<p>You pressed the correct key</p>",
|
||||
incorrect_text: "<p>Incorrect. You pressed the wrong key.</p>",
|
||||
prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
|
||||
};
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trials],
|
||||
});
|
||||
|
||||
jest.runTimersToTime(1000);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/happy_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">');
|
||||
jest.runTimersToTime(500);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/happy_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">');
|
||||
jest.runTimersToTime(500);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/sad_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">');
|
||||
});
|
||||
|
||||
test('sequence reps', function(){
|
||||
var trials = {
|
||||
type: 'categorize-animation',
|
||||
stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
|
||||
key_answer: 68,
|
||||
choices: [68, 83],
|
||||
frame_time: 1000,
|
||||
sequence_reps: 2,
|
||||
correct_text: "<p>You pressed the correct key</p>",
|
||||
incorrect_text: "<p>Incorrect. You pressed the wrong key.</p>",
|
||||
prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
|
||||
};
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trials],
|
||||
});
|
||||
|
||||
jest.runTimersToTime(1000);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/happy_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">');
|
||||
jest.runTimersToTime(1000);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/sad_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">');
|
||||
jest.runTimersToTime(1000);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/happy_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">');
|
||||
jest.runTimersToTime(1000);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/sad_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">');
|
||||
});
|
||||
|
||||
test('subject can response before animation is completed', function(){
|
||||
var trials = {
|
||||
type: 'categorize-animation',
|
||||
stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
|
||||
key_answer: 68,
|
||||
choices: [68, 83],
|
||||
frame_time: 1000,
|
||||
sequence_reps: 2,
|
||||
correct_text: "<p>You pressed the correct key</p>",
|
||||
incorrect_text: "<p>Incorrect. You pressed the wrong key.</p>",
|
||||
prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
|
||||
allow_response_before_complete: true,
|
||||
};
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trials],
|
||||
});
|
||||
|
||||
jest.runTimersToTime(1500);
|
||||
utils.pressKey(68);
|
||||
jest.runTimersToTime(500);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/sad_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\"><p>You pressed the correct key</p>');
|
||||
});
|
||||
|
||||
test('display should clear after feeback_duration is done', function(){
|
||||
var trials = {
|
||||
type: 'categorize-animation',
|
||||
stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
|
||||
key_answer: 68,
|
||||
choices: [68, 83],
|
||||
frame_time: 500,
|
||||
feeback_duration: 500,
|
||||
correct_text: "<p>You pressed the correct key</p>",
|
||||
incorrect_text: "<p>Incorrect. You pressed the wrong key.</p>",
|
||||
prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
|
||||
};
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trials],
|
||||
});
|
||||
|
||||
jest.runTimersToTime(1500);
|
||||
utils.pressKey(68);
|
||||
jest.runTimersToTime(500);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('<p>You pressed the correct key</p>');
|
||||
jest.runTimersToTime(2000);
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@ -13,4 +13,94 @@ describe('free-sort plugin', function(){
|
||||
expect(typeof window.jsPsych.plugins['free-sort']).not.toBe('undefined');
|
||||
});
|
||||
|
||||
test('should display stimuli', function(){
|
||||
var trial = {
|
||||
type: 'free-sort',
|
||||
stimuli: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg']
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial],
|
||||
});
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('src=\"img/happy_face_1.jpg\" data-src=\"img/happy_face_1.jpg\"'));
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('src=\"img/happy_face_2.jpg\" data-src=\"img/happy_face_2.jpg\"'));
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('src=\"img/happy_face_3.jpg\" data-src=\"img/happy_face_3.jpg\"'));
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('src=\"img/happy_face_4.jpg\" data-src=\"img/happy_face_4.jpg\"'));
|
||||
});
|
||||
|
||||
test('should be able to adjust the height and width of free-sort area', function(){
|
||||
var trial = {
|
||||
type: 'free-sort',
|
||||
stimuli: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg'],
|
||||
sort_area_height: 500,
|
||||
sort_area_width: 700,
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial],
|
||||
});
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('class=\"jspsych-free-sort-arena\" style=\"position: relative; width:700px; height:500px;'));
|
||||
});
|
||||
|
||||
test('should be able to adjust the height and width of stimuli', function(){
|
||||
var trial = {
|
||||
type: 'free-sort',
|
||||
stimuli: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg'],
|
||||
stim_height: 200,
|
||||
stim_width: 200,
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial],
|
||||
});
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<img src=\"img/happy_face_1.jpg\" data-src=\"img/happy_face_1.jpg\" class=\"jspsych-free-sort-draggable\" draggable=\"false\" style=\"position: absolute; cursor: move; width:200px; height:200px'));
|
||||
});
|
||||
|
||||
test('should display prompt', function(){
|
||||
var trial = {
|
||||
type: 'free-sort',
|
||||
stimuli: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg'],
|
||||
prompt: '<p>This is a prompt</p>'
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial],
|
||||
});
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<p>This is a prompt</p>'));
|
||||
});
|
||||
|
||||
test('should display prompt at bottom if prompt_location is "below"',function(){
|
||||
var trial = {
|
||||
type: 'free-sort',
|
||||
stimuli: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg'],
|
||||
prompt: '<p>This is a prompt</p>',
|
||||
prompt_location: 'below',
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial],
|
||||
});
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<p>This is a prompt</p><button id=\"jspsych-free-sort-done-btn\"'));
|
||||
});
|
||||
|
||||
test('should be able to change label of button', function(){
|
||||
var trial = {
|
||||
type: 'free-sort',
|
||||
stimuli: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg'],
|
||||
button_label: 'Finito'
|
||||
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial],
|
||||
});
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<button id=\"jspsych-free-sort-done-btn\" class=\"jspsych-btn\">Finito</button>'));
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user