parameterize autofocus, fix last test

.changeset/spotty-mails-cheat.md

@@ -2,4 +2,4 @@
 "@jspsych/plugin-cloze": minor
 ---
 
-adds support for multiple correct answers and case sensitivity
+adds support for multiple correct answers, case sensitivity, and autofocus.

docs/plugins/cloze.md

@@ -16,6 +16,7 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
 | allow_blanks  | boolean  | true               | Boolean value indicating if the answers given by participants should be checked for completion after the button was clicked. If ```true```, answers are not checked for completion and blank answers are allowed. The trial will then automatically finish upon the clicking the button. If ```false```, answers are checked for completion, and in case there are some fields with missing answers, the ```mistake_fn``` is called. In this case, the trial does not automatically finish. |
 | case_sensitivity | boolean  | true            | Boolean value indicating if the answers given by participants should also be checked to have the right case along with correctness. If set to ```false```, case is disregarded and participants may type in whatever case they please. | 
 | mistake_fn    | function | ```function(){}``` | Function called if ```check_answers``` is set to ```true``` and there is a difference between the participant's answers and the correct solution provided in the text, or if ```allow_blanks``` is set to ```false``` and there is at least one field with a blank answer. |
+| autofocus     | boolean  | true               | Boolean value indicating if the first input field should be focused when the trial starts. Enabled by default, but may be disabled especially if participants are using screen readers. |
 
 ## Data Generated
 

packages/plugin-cloze/src/index.spec.ts

@@ -8,11 +8,6 @@ const getInputElementById = (id: string) => document.getElementById(id) as HTMLI
 
 const clickFinishButton = () => clickTarget(document.querySelector("#finish_cloze_button"));
 
-// reset DOM
-beforeEach(() => {
-  document.body.innerHTML = "";
-});
-
 describe("cloze", () => {
   test("displays cloze", async () => {
     const { getHTML, expectFinished } = await startTimeline([
@@ -205,7 +200,7 @@ describe("cloze", () => {
     await expectFinished();
   });
 
-  test.skip("calls mistake function on button click when answers are checked and do not belong to a multiple answer blank", async () => {
+  test("calls mistake function on button click when answers are checked and do not belong to a multiple answer blank", async () => {
     const mistakeFn = jest.fn();
 
     const { expectFinished } = await startTimeline([
@@ -221,6 +216,8 @@ describe("cloze", () => {
     await clickFinishButton();
     expect(mistakeFn).toHaveBeenCalled();
 
+    getInputElementById("input0").value = "cloze";
+    await clickFinishButton();
     await expectFinished();
   });
 

packages/plugin-cloze/src/index.ts

@@ -59,6 +59,14 @@ const info = <const>{
       type: ParameterType.FUNCTION,
       default: () => {},
     },
+    /**
+     * Boolean value indicating if the first input field should be focused when the trial starts.
+     * Enabled by default, but may be disabled especially if participants are using screen readers.
+     */
+    autofocus: {
+      type: ParameterType.BOOL,
+      default: true,
+    }
   },
   data: {
     /** Answers the participant gave. */
@@ -145,7 +153,8 @@ class ClozePlugin implements JsPsychPlugin<Info> {
       "</button>";
     display_element.querySelector("#finish_cloze_button").addEventListener("click", check);
 
-    (display_element.querySelector("#input0") as HTMLElement).focus();
+    if (trial.autofocus)
+      (display_element.querySelector("#input0") as HTMLElement).focus();
   }
 
   private getSolutions(text: string, case_sensitive: boolean): string[][] {