From 16ef614018438967e58b5871b5028bb4ef07fdf1 Mon Sep 17 00:00:00 2001
From: jadeddelta <101148768+jadeddelta@users.noreply.github.com>
Date: Wed, 19 Oct 2022 23:37:35 -0400
Subject: [PATCH] autofocus + case sensitivity

---
 examples/jspsych-cloze.html             |  8 ++++++++
 packages/plugin-cloze/src/index.spec.ts | 15 ++++++++++++++
 packages/plugin-cloze/src/index.ts      | 27 +++++++++++++++++--------
 3 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/examples/jspsych-cloze.html b/examples/jspsych-cloze.html
index d32859b9..aebc1982 100644
--- a/examples/jspsych-cloze.html
+++ b/examples/jspsych-cloze.html
@@ -22,6 +22,14 @@
       text: 'The %% is the largest terrestrial mammal. It lives in both %% and %%.'
     });
 
+    // an example that allows the user to input a solution that doesn't require case sensitivity
+    timeline.push({
+      type: jsPsychCloze,
+      text: 'The %CASE% is closed.',
+      check_answers: true,
+      case_sensitivity: false,
+    })
+
     // another example with checking if all the blanks are filled in
     timeline.push({
       type: jsPsychCloze,
diff --git a/packages/plugin-cloze/src/index.spec.ts b/packages/plugin-cloze/src/index.spec.ts
index 3c383818..30307fc5 100644
--- a/packages/plugin-cloze/src/index.spec.ts
+++ b/packages/plugin-cloze/src/index.spec.ts
@@ -73,6 +73,21 @@ describe("cloze", () => {
     await expectFinished();
   });
 
+  test("ends trial on button click when answers are checked and correct without case sensitivity", async () => {
+    const { expectFinished } = await startTimeline([
+      {
+        type: cloze,
+        text: "This is a %cloze% text.",
+        check_answers: true,
+        case_sensitivity: false,
+      },
+    ]);
+
+    getInputElementById("input0").value = "CLOZE";
+    clickTarget(document.querySelector("#finish_cloze_button"));
+    await expectFinished();
+  });
+
   test("ends trial on button click when all answers are checked for completion and are complete", async () => {
     const { expectFinished } = await startTimeline([
       {
diff --git a/packages/plugin-cloze/src/index.ts b/packages/plugin-cloze/src/index.ts
index 71d538cf..9ad952a0 100644
--- a/packages/plugin-cloze/src/index.ts
+++ b/packages/plugin-cloze/src/index.ts
@@ -27,6 +27,12 @@ const info = <const>{
       pretty_name: "Allow blanks",
       default: true,
     },
+    /** Boolean value indicating if the solutions checker must be case sensitive. */
+    case_sensitivity: {
+      type: ParameterType.BOOL,
+      pretty_name: "Case sensitivity",
+      default: true,
+    },
     /** Function called if either the check_answers is set to TRUE or the allow_blanks is set to FALSE and there is a discrepancy between the set answers and the answers provide or if all input fields aren't filled out, respectively. */
     mistake_fn: {
       type: ParameterType.FUNCTION,
@@ -55,7 +61,7 @@ class ClozePlugin implements JsPsychPlugin<Info> {
     var html = '<div class="cloze">';
     // odd elements are text, even elements are the blanks
     var elements = trial.text.split("%");
-    const solutions = this.getSolutions(trial.text);
+    const solutions = this.getSolutions(trial.text, trial.case_sensitivity);
 
     let solution_counter = 0;
     for (var i = 0; i < elements.length; i++) {
@@ -78,7 +84,9 @@ class ClozePlugin implements JsPsychPlugin<Info> {
 
       for (var i = 0; i < solutions.length; i++) {
         var field = document.getElementById("input" + i) as HTMLInputElement;
-        answers.push(field.value.trim());
+        answers.push(
+          trial.case_sensitivity ? field.value.trim() : field.value.toLowerCase().trim()
+        );
 
         if (trial.check_answers) {
           if (answers[i] !== solutions[i]) {
@@ -112,15 +120,18 @@ class ClozePlugin implements JsPsychPlugin<Info> {
       trial.button_text +
       "</button>";
     display_element.querySelector("#finish_cloze_button").addEventListener("click", check);
+
+    (display_element.querySelector("#input0") as HTMLElement).focus();
   }
 
-  private getSolutions(text: string) {
+  private getSolutions(text: string, case_sensitive: boolean) {
     const solutions = [];
     const elements = text.split("%");
-    for (let i = 0; i < elements.length; i++) {
-      if (i % 2 == 1) {
-        solutions.push(elements[i].trim());
-      }
+
+    for (let i = 1; i < elements.length; i += 2) {
+      solutions.push(
+        case_sensitive ? elements[i].trim() : elements[i].toLowerCase().trim()
+      );
     }
 
     return solutions;
@@ -142,7 +153,7 @@ class ClozePlugin implements JsPsychPlugin<Info> {
   }
 
   private create_simulation_data(trial: TrialType<Info>, simulation_options) {
-    const solutions = this.getSolutions(trial.text);
+    const solutions = this.getSolutions(trial.text, trial.case_sensitivity);
     const responses = [];
     for (const word of solutions) {
       if (word == "") {