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

survey-html-form: add autofocus parameter

Browse Source 
Users can provide the id of an element to focus on when the
slide is displayed. While HTML5 has an autofocus parameter
it is not universal and not all browsers support it. This
solution should work across browsers and is more in keeping
with the jsPsych object style.

Issue #1062
This commit is contained in:
Christian 2020-09-23 21:05:42 -07:00
parent a095e81fad
commit 8d8ee8ae55
No known key found for this signature in database
GPG Key ID: AF0F932A231C697D
2 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
examples/jspsych-survey-html-form.html
View File

@ -16,8 +16,15 @@
html: '<p> I am feeling <input name="first" type="text" />, <input name="second" type="text" />, and <input name="third" type="text" />.</p>'
}
var autofocus_trial = {
type: 'survey-html-form',
preamble: '<p> What is your favorite bird?</p>',
html: '<p>MY favorite bird is <input type="text" id="test-resp-box" name="response" size="10" /></p>',
autofocus: 'test-resp-box'
}
jsPsych.init({
timeline: [form_trial],
timeline: [form_trial,autofocus_trial],
on_finish: function(){ jsPsych.data.displayData(); }
});

12
plugins/jspsych-survey-html-form.js
View File

@ -34,6 +34,12 @@ jsPsych.plugins['survey-html-form'] = (function() {
default: 'Continue',
description: 'The text that appears on the button to finish the trial.'
},
autofocus: {
type: jsPsych.plugins.parameterType.STRING,
pretty_name: 'Element ID to focus',
default: '',
description: 'The HTML element ID of a form field to autofocus on.'
},
dataAsArray: {
type: jsPsych.plugins.parameterType.BOOLEAN,
pretty_name: 'Data As Array',
@ -59,9 +65,13 @@ jsPsych.plugins['survey-html-form'] = (function() {
// add submit button
html += '<input type="submit" id="jspsych-survey-html-form-next" class="jspsych-btn jspsych-survey-html-form" value="'+trial.button_label+'"></input>';
html += '</form>'
html += '</form>';
display_element.innerHTML = html;
if ( trial.autofocus !== '' ) {
display_element.querySelector('#'+trial.autofocus).focus();
}
display_element.querySelector('#jspsych-survey-html-form').addEventListener('submit', function(event) {
// don't submit form
event.preventDefault();