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

fixed above/below

Browse Source
This commit is contained in:
Peter J. Kohler 2020-11-18 19:41:43 -05:00
parent 5740d0a316
commit a1ca6a8406
2 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/jspsych-free-sort.html
View File

@ -14,7 +14,8 @@
stim_height: 150, stim_height: 150,
stim_width: 200, stim_width: 200,
scale_factor: 1.3, scale_factor: 1.3,
sort_area_shape: "ellipse" sort_area_shape: "ellipse",
prompt_location: "below"
}; };

41
plugins/jspsych-free-sort.js
View File

@ -64,7 +64,7 @@ jsPsych.plugins['free-sort'] = (function() {
prompt: { prompt: {
type: jsPsych.plugins.parameterType.STRING, type: jsPsych.plugins.parameterType.STRING,
pretty_name: 'Prompt', pretty_name: 'Prompt',
default: null, default: '',
description: 'It can be used to provide a reminder about the action the subject is supposed to take.' description: 'It can be used to provide a reminder about the action the subject is supposed to take.'
}, },
prompt_location: { prompt_location: {
@ -87,15 +87,34 @@ jsPsych.plugins['free-sort'] = (function() {
var start_time = performance.now(); var start_time = performance.now();
var html = let html =
'<div '+ '<div '+
'id="jspsych-free-sort-arena" '+ 'id="jspsych-free-sort-arena" '+
'class="jspsych-free-sort-arena" '+ 'class="jspsych-free-sort-arena" '+
'style="position: relative; width:'+trial.sort_area_width+'px; height:'+trial.sort_area_height+'px; margin: auto; line-height: 0em"</div>'; 'style="position: relative; width:'+trial.sort_area_width+'px; height:'+trial.sort_area_height+'px; margin: auto; line-height: 0em"</div>';
// another div for border
html += '<div '+
'id="jspsych-free-sort-border" '+
'class="jspsych-free-sort-border" '+
'style="position: relative; width:'+trial.sort_area_width*.94+'px; height:'+trial.sort_area_height*.94+'px; border:'+trial.sort_area_height*.03+'px solid #fc9272; margin: auto; line-height: 0em; ';
if ( trial.sort_area_shape == "ellipse") {
html += 'webkit-border-radius: 50%; moz-border-radius: 50%; border-radius: 50%"></div>'
} else {
html += 'webkit-border-radius: 0%; moz-border-radius: 0%; border-radius: 0%"></div>'
}
if ( trial.prompt ) {
trial.prompt = '<br>'
}
else {
trial.prompt = ''
}
// variable that has the prompt text, counter and button // variable that has the prompt text, counter and button
const html_text = '<div style="line-height: 0em">' + trial.prompt + const html_text = '<div style="line-height: 0em">' + trial.prompt +
'<p id="jspsych-free-sort-counter" style="display: inline-block; line-height: 1em">You still need to place ' + trial.stimuli.length + ' items inside the arena.</p>' + '<p id="jspsych-free-sort-counter" style="display: inline-block; line-height: 1em">You still need to place ' + trial.stimuli.length + ' items inside the arena.</p>'+
'<button id="jspsych-free-sort-done-btn" class="jspsych-btn" '+ '<button id="jspsych-free-sort-done-btn" class="jspsych-btn" '+
'style="display: none; margin: 5px; padding: 5px; text-align: center; font-weight: bold; font-size: 18px; vertical-align:baseline; line-height: 1em">' + trial.button_label+'</button></div>' 'style="display: none; margin: 5px; padding: 5px; text-align: center; font-weight: bold; font-size: 18px; vertical-align:baseline; line-height: 1em">' + trial.button_label+'</button></div>'
@ -106,23 +125,9 @@ jsPsych.plugins['free-sort'] = (function() {
html = html_text + html html = html_text + html
} }
console.log(html)
display_element.innerHTML = html; display_element.innerHTML = html;
// another div for border
let border_div = '<div '+
'id="jspsych-free-sort-border" '+
'class="jspsych-free-sort-border" '+
'style="position: relative; width:'+trial.sort_area_width*.94+'px; height:'+trial.sort_area_height*.94+'px; border:'+trial.sort_area_height*.03+'px solid #fc9272; margin: auto; line-height: 0em; ';
if ( trial.sort_area_shape == "ellipse") {
border_div += 'webkit-border-radius: 50%; moz-border-radius: 50%; border-radius: 50%"></div>'
} else {
border_div += 'webkit-border-radius: 0%; moz-border-radius: 0%; border-radius: 0%"></div>'
}
// add border div code
display_element.querySelector("#jspsych-free-sort-arena").innerHTML += border_div
// store initial location data // store initial location data
let init_locations = []; let init_locations = [];