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

Merge pull request #455 from kristiyip/master

Browse Source 
survey plugin docs
This commit is contained in:
Josh de Leeuw 2017-07-28 14:12:54 -04:00 committed by GitHub
commit 740f571148
13 changed files with 351 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/markdown_docs/plugins/jspsych-survey-likert.md
View File

@ -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],
};
```

14
docs/markdown_docs/plugins/jspsych-survey-multi-choice.md
View File

@ -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.
@ -40,17 +37,12 @@ rt | numeric | The response time in milliseconds for the subject to make a respo
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
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
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({

14
docs/markdown_docs/plugins/jspsych-survey-multi-select.md
View File

@ -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({

11
docs/markdown_docs/plugins/jspsych-survey-text.md
View File

@ -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}],
};
```

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

@ -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>",

3
examples/jspsych-instructions.html
View File

@ -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
}

3
examples/jspsych-survey-multi-choice.html
View File

@ -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"];

1
plugins/jspsych-survey-likert.js
View File

@ -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',

5
plugins/jspsych-survey-multi-choice.js
View File

@ -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.'},
}

5
plugins/jspsych-survey-multi-select.js
View File

@ -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.'},
}

3
plugins/jspsych-survey-text.js
View File

@ -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',

236
tests/plugins/plugin-categorize-animation.test.js
View File

@ -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('');
});
});

90
tests/plugins/plugin-free-sort.test.js
View File

@ -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>'));
});
});