From 7cf744ec11a8b71d9ee7d871a90fab2757e2d6f0 Mon Sep 17 00:00:00 2001
From: Cian Monnin <cianmonnin@gmail.com>
Date: Mon, 12 Aug 2024 16:29:59 -0400
Subject: [PATCH] refactor: submit button disabled until response is logged

---
 src/pictureNamingTask.ts | 39 ++++++++++++++++++++++++++++-----------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/pictureNamingTask.ts b/src/pictureNamingTask.ts
index 6f1842b..313ba17 100644
--- a/src/pictureNamingTask.ts
+++ b/src/pictureNamingTask.ts
@@ -152,17 +152,34 @@ export default function pictureNamingTask(difficultyLevelParam: number) {
         difficultyLevel: jsPsych.timelineVariable("difficultyLevel"),
         language: jsPsych.timelineVariable("language"),
       },
-      html: `
-    <h3>${i18n.t("logResponse")}</h3>
-    <input type="button" value="${i18n.t("correct")}" onclick="document.getElementById('result').value='${i18n.t("correct")}';">
-    <input type="button" value="${i18n.t("incorrect")}" onclick="document.getElementById('result').value='${i18n.t("incorrect")}';">
-    <br>
-    <label for="result">${i18n.t("responseWas")}</label>
-    <input type="text" id="result" name="result" readonly>
-    <hr>
-    <input type="text" id="textBox" name="notes" placeholder="${i18n.t("logResponse")}">
-    <p>${i18n.t("logResponseToContinue")}</p>`
-      ,
+      html: function() {
+        const html = `
+          <h3>${i18n.t("logResponse")}</h3>
+          <input type="button" value="${i18n.t("correct")}" onclick="document.getElementById('result').value='${i18n.t("correct")}';">
+          <input type="button" value="${i18n.t("incorrect")}" onclick="document.getElementById('result').value='${i18n.t("incorrect")}';">
+          <br>
+          <label for="result">${i18n.t("responseWas")}</label>
+          <input type="text" id="result" name="result" readonly>
+          <hr>
+          <input type="text" id="textBox" name="notes" placeholder="${i18n.t("logResponse")}">
+          <p>${i18n.t("logResponseToContinue")}</p>`
+        return html
+      },
+      on_load: function() {
+
+        const submitButton = document.getElementById('jspsych-survey-html-form-next') as HTMLButtonElement
+        const resultInput = document.getElementById('result') as HTMLInputElement
+        submitButton.disabled = true
+        document.querySelectorAll('input[type="button"]').forEach(button => {
+          button.addEventListener('click', () => {
+            if (resultInput.value !== '') {
+              submitButton.disabled = false;
+            }
+          });
+        });
+
+
+      },
       preamble: function() {
         const html = `<h3>${i18n.t("correctResponse")}</h3>
                     <p>${jsPsych.evaluateTimelineVariable("correctResponse")}</p>