diff --git a/docs/plugins/survey.md b/docs/plugins/survey.md index cfbaf7a7..2ecce915 100644 --- a/docs/plugins/survey.md +++ b/docs/plugins/survey.md @@ -173,7 +173,7 @@ placeholder | string | "" | Placeholder text in the text response field. textbox_rows | integer | 1 | The number of rows (height) for the response text box. textbox_columns | integer | 40 | The number of columns (width) for the response text box. validation | string | "" | A regular expression used to validate the response. -input_type | string | "text" | Type for the HTML `` element. The `input_type` parameter must be one of "color", "date", "datetime-local", "email", "month", "number", "password", "range", "tel", "text", "time", "url", "week". If the `textbox_rows` parameter is larger than 1, the `input_type` parameter will be ignored. For some types, such as date and time, the `textbox_columns` parameter will be ignored because the width is automatically determined. Note: SurveyJS supports the "datetime" type, but since this is deprecated, we will not support it in this plugin. +input_type | string | "text" | Type for the HTML `` element. The `input_type` parameter must be one of "color", "date", "datetime-local", "email", "month", "number", "password", "range", "tel", "text", "time", "url", "week". If the `textbox_rows` parameter is larger than 1, the `input_type` parameter will be ignored. The `textbox_columns` parameter only affects questions with `input_type` "email", "password", "tel", "url", or "text". ## Data Generated diff --git a/packages/plugin-survey/example.html b/packages/plugin-survey/example.html index ed724d6e..18b85ecb 100644 --- a/packages/plugin-survey/example.html +++ b/packages/plugin-survey/example.html @@ -25,13 +25,13 @@ {type: 'html', prompt: '

Here is some arbitrary text via an "html" question type.
Similar to preamble but can be inserted anywhere in the question set.

This trial uses automatic question numbering (continued across pages).

'}, {type: 'text', prompt: 'This is a single-line text question. The correct answer is "hello".', required: true, correct_response: "hello"}, {type: 'text', prompt: 'This is a multi-line text question.', placeholder: 'This is a placeholder.', textbox_rows: 10, textbox_columns: 40}, - {type: 'text', prompt: 'This is a single-line text question that only numbers can be entered.', input_type: 'number'}, - {type: 'text', prompt: 'This is a date question', input_type: 'date'}, + {type: 'text', prompt: 'This is a single-line text question of input_type "number"', input_type: 'number'}, + {type: 'text', prompt: 'This is a single-line text question of input_type "date"', input_type: 'date'}, ], [ { - type: 'likert', - prompt: 'This is a likert question prompt.', + type: 'likert', + prompt: 'This is a likert question prompt.', likert_scale_values: [ {value: 1}, {value: 2}, diff --git a/packages/plugin-survey/src/index.spec.ts b/packages/plugin-survey/src/index.spec.ts index ac13b129..19bc608a 100644 --- a/packages/plugin-survey/src/index.spec.ts +++ b/packages/plugin-survey/src/index.spec.ts @@ -229,7 +229,6 @@ describe("survey plugin", () => { const inputTypes = [ "color", "date", - // "datetime", "datetime-local", "email", "month", @@ -253,6 +252,7 @@ describe("survey plugin", () => { type: "text", prompt: "foo", input_type: inputType, + textbox_columns: 10, }, ], ], @@ -263,13 +263,14 @@ describe("survey plugin", () => { expect(question).not.toBeNull(); expect(question.querySelector("span").innerHTML).toBe("foo"); - const textinput = displayElement.querySelectorAll("input"); - - expect(textinput[0]).not.toBeNull(); - expect(textinput[0].type).toBe(inputType); - if (["text", "search", "tel", "url", "email", "password"].includes(inputType)) { + const input = displayElement.querySelectorAll("input")[0]; + expect(input).not.toBeNull(); + expect(input.type).toEqual(inputType); + if (["email", "password", "tel", "url", "text"].includes(inputType)) { // size can be specified only for text input types - expect(textinput[0].size).toBe(40); + expect(input.size).toEqual(10); + } else { + expect(input.size).not.toEqual(10); } const finish_button = displayElement.querySelector("input.sv_complete_btn"); diff --git a/packages/plugin-survey/src/index.ts b/packages/plugin-survey/src/index.ts index 020d0bfd..f5d50601 100644 --- a/packages/plugin-survey/src/index.ts +++ b/packages/plugin-survey/src/index.ts @@ -198,10 +198,7 @@ const info = { * Text only: Type for the HTML element. * The `input_type` parameter must be one of "color", "date", "datetime-local", "email", "month", "number", "password", "range", "tel", "text", "time", "url", "week". * If the `textbox_rows` parameter is larger than 1, the `input_type` parameter will be ignored. - * For some types, such as date and time, the `textbox_columns` parameter will be ignored because the width is automatically determined. - * - * Note: SurveyJS supports the "datetime" type, but since this is deprecated, we will not support it in this plugin. - * @see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime + * The `textbox_columns` parameter only affects questions with `input_type` "email", "password", "tel", "url", or "text". */ input_type: { type: ParameterType.SELECT, @@ -210,7 +207,6 @@ const info = { options: [ "color", "date", - // "datetime", "datetime-local", "email", "month", @@ -785,11 +781,8 @@ class SurveyPlugin implements JsPsychPlugin { if (question instanceof QuestionComment) { question.rows = params.textbox_rows; question.cols = params.textbox_columns; - } else if (question.isTextInput) { - question.size = params.textbox_columns; - question.inputType = params.input_type; } else { - // size parameter is not set because QuestionText will update it automatically + question.size = params.textbox_columns; question.inputType = params.input_type; } question.defaultValue = "";