diff --git a/.changeset/sixty-dots-ring.md b/.changeset/sixty-dots-ring.md new file mode 100644 index 00000000..63b70fc3 --- /dev/null +++ b/.changeset/sixty-dots-ring.md @@ -0,0 +1,5 @@ +--- +"@jspsych-contrib/plugin-pipe": minor +--- + +Added ability to display wait message above loading graphics during upload. diff --git a/packages/plugin-pipe/docs/jspsych-pipe.md b/packages/plugin-pipe/docs/jspsych-pipe.md index 0576ad63..e1105b76 100644 --- a/packages/plugin-pipe/docs/jspsych-pipe.md +++ b/packages/plugin-pipe/docs/jspsych-pipe.md @@ -14,6 +14,7 @@ In addition to the [parameters available in all plugins](https://www.jspsych.org | action | string | undefined | The action to perform. Possible values are `save`, `saveBase64`, and `condition`. | | filename | null | undefined | The filename to use when saving data. It should be unique. If the file already exists, no data will be saved. | | data_string | string | null | The string of data to save. If action is `save` then this can be text data in any format (e.g., CSV, JSON, TXT, etc.). If `action` is `saveBase64`, then this should be a base64 encoded string and the `filename` should have the appropriate extension. | +| wait_message | HTML_string | `

Saving data. Please do not close this page.

` | An HTML message to be displayed above the loading graphics in the experiment during data upload. | ## Data Generated diff --git a/packages/plugin-pipe/src/index.ts b/packages/plugin-pipe/src/index.ts index d5724518..61844172 100644 --- a/packages/plugin-pipe/src/index.ts +++ b/packages/plugin-pipe/src/index.ts @@ -41,6 +41,13 @@ const info = { type: ParameterType.STRING, default: null, }, + /** + * An HTML message to be displayed above the loading graphics in the experiment during data upload. + */ + wait_message: { + type: ParameterType.HTML_STRING, + default: `

Saving data. Please do not close this page.

`, + }, }, }; @@ -70,11 +77,6 @@ class PipePlugin implements JsPsychPlugin { const progressCSS = ` .spinner { animation: rotate 2s linear infinite; - z-index: 2; - position: absolute; - top: 50%; - left: 50%; - margin: -25px 0 0 -25px; width: 50px; height: 50px; } @@ -108,7 +110,8 @@ class PipePlugin implements JsPsychPlugin { `; const progressHTML = ` - + + ${trial.wait_message} `;