diff --git a/examples/jspsych-survey-html-form.html b/examples/jspsych-survey-html-form.html index 7de44c7c..ff4d6a36 100644 --- a/examples/jspsych-survey-html-form.html +++ b/examples/jspsych-survey-html-form.html @@ -16,8 +16,15 @@ html: '
I am feeling , , and .
' } + var autofocus_trial = { + type: 'survey-html-form', + preamble: 'What is your favorite bird?
', + html: 'MY favorite bird is
', + autofocus: 'test-resp-box' + } + jsPsych.init({ - timeline: [form_trial], + timeline: [form_trial,autofocus_trial], on_finish: function(){ jsPsych.data.displayData(); } }); diff --git a/plugins/jspsych-survey-html-form.js b/plugins/jspsych-survey-html-form.js index 6503b6f0..06b33e12 100644 --- a/plugins/jspsych-survey-html-form.js +++ b/plugins/jspsych-survey-html-form.js @@ -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', @@ -69,9 +75,20 @@ jsPsych.plugins['survey-html-form'] = (function() { // add submit button html += ''; - html += '' + html += ''; display_element.innerHTML = html; + if ( trial.autofocus !== '' ) { + var focus_elements = display_element.querySelectorAll('#'+trial.autofocus); + if ( focus_elements.length === 0 ) { + console.warn('No element found with id: '+trial.autofocus); + } else if ( focus_elements.length > 1 ) { + console.warn('The id "'+trial.autofocus+'" is not unique so autofocus will not work.') + } else { + focus_elements[0].focus() + } + } + display_element.querySelector('#jspsych-survey-html-form').addEventListener('submit', function(event) { // don't submit form event.preventDefault();