mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 03:00:54 +00:00
things drag now!
This commit is contained in:
cchang-vassar
parent
85ad7d40da
commit
1d6e191c3d
@ -5,107 +5,106 @@
|
||||
<script src="../packages/plugin-free-sort/dist/index.browser.js"></script>
|
||||
<script src="../packages/plugin-canvas-keyboard-response/dist/index.browser.js"></script>
|
||||
<script src="../packages/plugin-preload/dist/index.browser.js"></script>
|
||||
<link rel="stylesheet" href="../packages/jspsych/css/jspsych.css">
|
||||
<link rel="stylesheet" href="../packages/jspsych/css/jspsych.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych({
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
});
|
||||
var jsPsych = initJsPsych({
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
});
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
};
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
};
|
||||
|
||||
var trial_1 = {
|
||||
type: jsPsychFreeSort,
|
||||
stimuli: ['img/happy_face_1.jpg','img/happy_face_3.jpg','img/sad_face_2.jpg','img/sad_face_4.jpg'],
|
||||
stim_height: 120,
|
||||
stim_width: 160,
|
||||
sort_area_height: 500,
|
||||
sort_area_width: 500,
|
||||
prompt: 'Please group similar expressions together. ',
|
||||
column_spread_factor: .5
|
||||
};
|
||||
var trial_1 = {
|
||||
type: jsPsychFreeSort,
|
||||
stimuli: ['img/happy_face_1.jpg','img/happy_face_3.jpg','img/sad_face_2.jpg','img/sad_face_4.jpg'],
|
||||
stim_height: 120,
|
||||
stim_width: 160,
|
||||
sort_area_height: 500,
|
||||
sort_area_width: 500,
|
||||
prompt: 'Please group similar expressions together. ',
|
||||
column_spread_factor: .5
|
||||
};
|
||||
|
||||
var trial_2 = {
|
||||
type: jsPsychFreeSort,
|
||||
stimuli: ['img/happy_face_1.jpg','img/happy_face_3.jpg','img/sad_face_2.jpg','img/sad_face_4.jpg'],
|
||||
stim_height: 120,
|
||||
stim_width: 160,
|
||||
prompt: '<p>Arrange the faces.</p>',
|
||||
prompt_location: "below",
|
||||
sort_area_height: 400,
|
||||
sort_area_width: 500,
|
||||
sort_area_shape: "square",
|
||||
scale_factor: 1.2,
|
||||
border_color_in: '#DCDCDC',
|
||||
border_color_out: 'red'
|
||||
};
|
||||
var trial_2 = {
|
||||
type: jsPsychFreeSort,
|
||||
stimuli: ['img/happy_face_1.jpg','img/happy_face_3.jpg','img/sad_face_2.jpg','img/sad_face_4.jpg'],
|
||||
stim_height: 120,
|
||||
stim_width: 160,
|
||||
prompt: '<p>Arrange the faces.</p>',
|
||||
prompt_location: "below",
|
||||
sort_area_height: 400,
|
||||
sort_area_width: 500,
|
||||
sort_area_shape: "square",
|
||||
scale_factor: 1.2,
|
||||
border_color_in: '#DCDCDC',
|
||||
border_color_out: 'red'
|
||||
};
|
||||
|
||||
var trial_3 = {
|
||||
type: jsPsychCanvasKeyboardResponse,
|
||||
stimulus: function(c) {
|
||||
c.style.border = "5px solid #A9A9A9";
|
||||
// present images on a canvas at specific locations
|
||||
var ctx = c.getContext('2d');
|
||||
var img1 = new Image();
|
||||
var img2 = new Image();
|
||||
var img3 = new Image();
|
||||
img1.src = 'img/1.gif';
|
||||
img2.src = 'img/2.gif';
|
||||
img3.src = 'img/3.gif';
|
||||
img1.addEventListener('load', function() {
|
||||
ctx.drawImage(img1, 0, 0, 90, 90);
|
||||
}, false);
|
||||
img2.addEventListener('load', function() {
|
||||
ctx.drawImage(img2, 400, 400, 90, 90);
|
||||
}, false);
|
||||
img3.addEventListener('load', function() {
|
||||
ctx.drawImage(img3, 300, 100, 90, 90);
|
||||
}, false);
|
||||
},
|
||||
canvas_size: [500,500],
|
||||
prompt: "Memorize the image locations (5s).",
|
||||
choices: "NO_KEYS",
|
||||
trial_duration: 5000
|
||||
};
|
||||
var trial_3 = {
|
||||
type: jsPsychCanvasKeyboardResponse,
|
||||
stimulus: function(c) {
|
||||
c.style.border = "5px solid #A9A9A9";
|
||||
// present images on a canvas at specific locations
|
||||
var ctx = c.getContext('2d');
|
||||
var img1 = new Image();
|
||||
var img2 = new Image();
|
||||
var img3 = new Image();
|
||||
img1.src = 'img/1.gif';
|
||||
img2.src = 'img/2.gif';
|
||||
img3.src = 'img/3.gif';
|
||||
img1.addEventListener('load', function() {
|
||||
ctx.drawImage(img1, 0, 0, 90, 90);
|
||||
}, false);
|
||||
img2.addEventListener('load', function() {
|
||||
ctx.drawImage(img2, 400, 400, 90, 90);
|
||||
}, false);
|
||||
img3.addEventListener('load', function() {
|
||||
ctx.drawImage(img3, 300, 100, 90, 90);
|
||||
}, false);
|
||||
},
|
||||
canvas_size: [500,500],
|
||||
prompt: "Memorize the image locations (5s).",
|
||||
choices: "NO_KEYS",
|
||||
trial_duration: 5000
|
||||
};
|
||||
|
||||
var trial_4 = {
|
||||
type: jsPsychFreeSort,
|
||||
stimuli: ['img/1.gif','img/2.gif','img/3.gif'],
|
||||
stim_height: 90,
|
||||
stim_width: 90,
|
||||
scale_factor: 1.0,
|
||||
prompt: '<p>Where were the images?</p>',
|
||||
prompt_location: 'below',
|
||||
sort_area_shape: "square",
|
||||
sort_area_height: 500,
|
||||
sort_area_width: 500,
|
||||
change_border_background_color: false,
|
||||
border_width: 5,
|
||||
counter_text_unfinished: "Not done yet...",
|
||||
counter_text_finished: "Done!",
|
||||
column_spread_factor: .5
|
||||
};
|
||||
var trial_4 = {
|
||||
type: jsPsychFreeSort,
|
||||
stimuli: ['img/1.gif','img/2.gif','img/3.gif'],
|
||||
stim_height: 90,
|
||||
stim_width: 90,
|
||||
scale_factor: 1.0,
|
||||
prompt: '<p>Where were the images?</p>',
|
||||
prompt_location: 'below',
|
||||
sort_area_shape: "square",
|
||||
sort_area_height: 500,
|
||||
sort_area_width: 500,
|
||||
change_border_background_color: false,
|
||||
border_width: 5,
|
||||
counter_text_unfinished: "Not done yet...",
|
||||
counter_text_finished: "Done!",
|
||||
column_spread_factor: .5
|
||||
};
|
||||
|
||||
var trial_5 = {
|
||||
type: jsPsychFreeSort,
|
||||
stimuli: ['img/4.gif','img/5.gif','img/6.gif'],
|
||||
prompt: '<p>Arrange the images.</p><p>Images start at random locations inside the sort area.</p>',
|
||||
change_border_background_color: false,
|
||||
border_width: 3,
|
||||
counter_text_unfinished: "",
|
||||
counter_text_finished: "",
|
||||
stim_starts_inside: true,
|
||||
sort_area_shape: "square"
|
||||
};
|
||||
|
||||
jsPsych.run([preload, trial_1, trial_2, trial_3, trial_4, trial_5]);
|
||||
var trial_5 = {
|
||||
type: jsPsychFreeSort,
|
||||
stimuli: ['img/4.gif','img/5.gif','img/6.gif'],
|
||||
prompt: '<p>Arrange the images.</p><p>Images start at random locations inside the sort area.</p>',
|
||||
change_border_background_color: false,
|
||||
border_width: 3,
|
||||
counter_text_unfinished: "",
|
||||
counter_text_finished: "",
|
||||
stim_starts_inside: true,
|
||||
sort_area_shape: "square"
|
||||
};
|
||||
|
||||
jsPsych.run([preload, trial_1, trial_2, trial_3, trial_4, trial_5]);
|
||||
</script>
|
||||
</html>
|
||||
|
||||
BIN
packages/plugin-free-sort-ordered/assets/blue-rec.png
Normal file
BIN
packages/plugin-free-sort-ordered/assets/blue-rec.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 419 B |
File diff suppressed because one or more lines are too long
BIN
packages/plugin-free-sort-ordered/assets/green-rec.png
Normal file
BIN
packages/plugin-free-sort-ordered/assets/green-rec.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 398 B |
BIN
packages/plugin-free-sort-ordered/assets/red-rec.png
Normal file
BIN
packages/plugin-free-sort-ordered/assets/red-rec.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 408 B |
@ -8,6 +8,7 @@
|
||||
<script src="../dist/index.browser.js"></script> -->
|
||||
<script src="../dist/index.browser.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="../src/styles.css" />
|
||||
</head>
|
||||
|
||||
<body></body>
|
||||
@ -16,10 +17,10 @@
|
||||
|
||||
const trial = {
|
||||
type: jsPsychPluginFreeSortOrdered,
|
||||
stimuli: [
|
||||
'<div style="width: 200px; height: 100px; background-color: red;"></div>',
|
||||
'<div style="width: 200px; height: 100px; background-color: blue;"></div>',
|
||||
'<div style="width: 200px; height: 100px; background-color: green;"></div>'
|
||||
stimulus: [
|
||||
'../assets/blue-rec.png',
|
||||
'../assets/green-rec.png',
|
||||
'../assets/red-rec.png',
|
||||
],
|
||||
stim_height: 100,
|
||||
stim_width: 200,
|
||||
@ -28,7 +29,7 @@
|
||||
holding_area_height: 500,
|
||||
holding_area_width: 1000,
|
||||
prompt: 'Drag and drop the boxes to sort them in order.',
|
||||
prompt_location: 'top',
|
||||
prompt_location: 'above',
|
||||
button_label: 'Continue',
|
||||
include_counter: true,
|
||||
};
|
||||
|
||||
@ -10,7 +10,7 @@ const info = <const>{
|
||||
version: version,
|
||||
parameters: {
|
||||
/** Each element of this array is an image path or SVG code. */
|
||||
stimuli: {
|
||||
stimulus: {
|
||||
type: ParameterType.INT | ParameterType.HTML_STRING,
|
||||
default: undefined,
|
||||
array: true,
|
||||
@ -144,23 +144,24 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
|
||||
|
||||
trial(display_element: HTMLElement, trial: TrialType<Info>) {
|
||||
var start_time = performance.now();
|
||||
var stimulus = trial.stimulus;
|
||||
|
||||
// holding area
|
||||
const holding_area_html = `
|
||||
<div
|
||||
id="jspsych-free-sort-ordered-holding-area"
|
||||
class="jspsych-free-sort-ordered-holding-area"
|
||||
style="position: relative; width: ${trial.holding_area_width}px; height: ${trial.holding_area_height}px; background-color: #CCCCCC; margin: auto;"
|
||||
/>`;
|
||||
style="position: relative; width: ${trial.holding_area_width}px; height: ${trial.holding_area_height}px; background-color: #CCCCCC; margin: auto;">
|
||||
</div>`;
|
||||
|
||||
// counter text if included
|
||||
const counter_html = `
|
||||
<p id="jspsych-free-sort-ordered-counter" style="display: inline-block;">
|
||||
${trial.include_counter ? get_counter_text(trial.stimuli.length) : ""}
|
||||
${trial.include_counter ? get_counter_text(stimulus.length) : ""}
|
||||
</p>`;
|
||||
|
||||
// container for the boxes
|
||||
let box_grid_html = `
|
||||
// container for the target boxes
|
||||
let box_container_html = `
|
||||
<div
|
||||
id="jspsych-free-sort-ordered-box-grid"
|
||||
class="jspsych-free-sort-ordered-box-grid"
|
||||
@ -168,15 +169,15 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
|
||||
>`;
|
||||
|
||||
// create boxes for each stimulus
|
||||
for (let i = 0; i < trial.stimuli.length; i++) {
|
||||
box_grid_html += `
|
||||
for (let i = 0; i < stimulus.length; i++) {
|
||||
box_container_html += `
|
||||
<div
|
||||
id="jspsych-free-sort-ordered-box-${i}"
|
||||
class="jspsych-free-sort-ordered-box"
|
||||
style="width: ${trial.stim_width}px; height: ${trial.stim_height}px; background-color: #FFFFFF; border: 2px solid #000000; margin: 5px;"
|
||||
></div>`;
|
||||
}
|
||||
box_grid_html += "</div>";
|
||||
box_container_html += "</div>";
|
||||
|
||||
// prompt text (and counter if included)
|
||||
const prompt_counter_html = `
|
||||
@ -193,8 +194,8 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
|
||||
// combine all HTML
|
||||
let html =
|
||||
trial.prompt_location === "above"
|
||||
? prompt_counter_html + holding_area_html + box_grid_html + button_html
|
||||
: holding_area_html + box_grid_html + prompt_counter_html + button_html;
|
||||
? prompt_counter_html + holding_area_html + box_container_html + button_html
|
||||
: holding_area_html + box_container_html + prompt_counter_html + button_html;
|
||||
|
||||
display_element.innerHTML = html;
|
||||
|
||||
@ -203,7 +204,7 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
|
||||
|
||||
// store locations of the boxes
|
||||
let boxCoordinates = [];
|
||||
for (let i = 0; i < trial.stimuli.length; i++) {
|
||||
for (let i = 0; i < stimulus.length; i++) {
|
||||
const box = document.getElementById(`jspsych-free-sort-ordered-box-${i}`);
|
||||
if (box) {
|
||||
const rect = box.getBoundingClientRect();
|
||||
@ -229,7 +230,7 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
|
||||
});
|
||||
|
||||
// place each stimulus in initial locations
|
||||
for (let i = 0; i < trial.stimuli.length; i++) {
|
||||
for (let i = 0; i < stimulus.length; i++) {
|
||||
var coords = FreeSortPluginUtils.random_coordinate(
|
||||
trial.holding_area_width - trial.stim_width,
|
||||
trial.holding_area_height - trial.stim_height
|
||||
@ -239,10 +240,10 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
|
||||
display_element.querySelector("#jspsych-free-sort-ordered-holding-area").innerHTML +=
|
||||
"<img " +
|
||||
'src="' +
|
||||
trial.stimuli[i] +
|
||||
stimulus[i] +
|
||||
'" ' +
|
||||
'data-src="' +
|
||||
trial.stimuli[i] +
|
||||
stimulus[i] +
|
||||
'" ' +
|
||||
'class="jspsych-free-sort-ordered-draggable" ' +
|
||||
'draggable="false" ' +
|
||||
@ -262,7 +263,7 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
|
||||
|
||||
// add initial locations to the init_locations array
|
||||
init_locations.push({
|
||||
src: trial.stimuli[i],
|
||||
src: stimulus[i],
|
||||
x: coords.x,
|
||||
y: coords.y,
|
||||
});
|
||||
@ -272,7 +273,7 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
|
||||
let moves = [];
|
||||
|
||||
// are objects currently inside
|
||||
let inside = new Array(trial.stimuli.length).fill(false);
|
||||
let inside = new Array(stimulus.length).fill(false);
|
||||
|
||||
// button to finish sorting
|
||||
const button: HTMLButtonElement = display_element.querySelector("#jspsych-free-sort-done-btn");
|
||||
|
||||
7
packages/plugin-free-sort-ordered/src/styles.css
Normal file
7
packages/plugin-free-sort-ordered/src/styles.css
Normal file
@ -0,0 +1,7 @@
|
||||
.jspsych-free-sort-ordered-draggable {
|
||||
touch-action: none; /* disable scrolling on touch-drag */
|
||||
user-select: none; /* disable text selection */
|
||||
-webkit-user-drag: none; /* disable Safari ghost */
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user