Update index.html

index.html

@@ -852,11 +852,11 @@
           <div class="done-card">
             <div class="done-icon">🎉</div>
             <div class="done-title">All done!</div>
-            <div class="done-sub">All 10 responses have been submitted. Thank you!</div>
+            <div class="done-sub">All 10 responses have been submitted. Thank you!<br /><br />If you are a native or near-native speaker of a <strong>different language</strong> than the one you just completed, you can continue with another language.</div>
             <div class="done-actions">
               <button class="next-btn" id="restart-btn">Continue with Another Language</button>
             </div>
-            <div class="done-close">You can close this page now.</div>
+            <div class="done-close">Otherwise, you may close this page now.</div>
           </div>
         `;
           document.getElementById("restart-btn").addEventListener("click", () => {
@@ -951,6 +951,61 @@
           // Insert grid fields first, then option-groups
           formBody.insertAdjacentHTML("beforeend", gridFieldsHtml);
           optionGroupsArray.forEach(og => formBody.appendChild(og));
+          
+          // Find the optional comments field (label containing "additional comments" with input right after)
+          const allLabels = formBody.querySelectorAll('label');
+          allLabels.forEach(label => {
+            if (label.textContent.includes('additional comments')) {
+              // Check if the next sibling is an input or textarea
+              const nextSibling = label.nextElementSibling;
+              if (nextSibling && (nextSibling.tagName === 'INPUT' || nextSibling.tagName === 'TEXTAREA')) {
+                // Create a container for label + input
+                const container = document.createElement('div');
+                container.appendChild(label);
+                container.appendChild(nextSibling);
+                formBody.appendChild(container);
+              }
+            }
+          });
+        }
+
+        // Validate that all required fields are answered
+        function validateForm() {
+          const missingFields = [];
+          
+          // Check grid fields - each row needs a radio button selected
+          const gridTables = document.querySelectorAll('.grid-table');
+          gridTables.forEach(table => {
+            const rows = table.querySelectorAll('tbody tr');
+            rows.forEach(row => {
+              const radios = row.querySelectorAll('input[type="radio"]');
+              const isAnswered = Array.from(radios).some(r => r.checked);
+              if (!isAnswered) {
+                const labelCell = row.querySelector('.grid-row-label');
+                const fieldLabel = labelCell ? labelCell.textContent.trim() : 'Grid question';
+                missingFields.push(fieldLabel);
+              }
+            });
+          });
+          
+          // Check option groups (radio button groups)
+          const optionGroups = document.querySelectorAll('.option-group');
+          optionGroups.forEach(og => {
+            const radios = og.querySelectorAll('input[type="radio"]');
+            const isAnswered = Array.from(radios).some(r => r.checked);
+            if (!isAnswered) {
+              const label = og.querySelector('.option-label');
+              const fieldLabel = label ? label.textContent.trim() : 'Option question';
+              missingFields.push(fieldLabel);
+            }
+          });
+          
+          return missingFields;
+        }
+
+        // Show popup notification
+        function showValidationError() {
+          alert("Please answer all questions before moving forward");
         }
 
         document
@@ -959,6 +1014,13 @@
             const btn = document.getElementById("next-btn");
             const statusEl = document.getElementById("status-msg");
 
+            // Validate all required fields before submitting
+            const missingFields = validateForm();
+            if (missingFields.length > 0) {
+              showValidationError();
+              return;
+            }
+
             btn.disabled = true;
             btn.innerHTML = `<span class="spinner"></span>${isLast ? "Submitting…" : "Saving…"}`;
             statusEl.style.display = "none";
@@ -985,7 +1047,8 @@
           });
       }
 
-      const SURVEY_DES = "In this survey, you will evaluate <strong>10 audio samples</strong>. For each audio, you need to answer <strong>4 questions</strong> related to:\n\n<strong>Pronunciation</strong> – How clearly and correctly the words are pronounced\n<strong>Grammar</strong> – How grammatically correct the speech sounds\n<strong>Naturalness</strong> – How natural the overall speech sounds\n\n<strong>Rating Scale:</strong> 1 (Poor) to 5 (Excellent)\n\nPlease listen to each audio carefully before providing your ratings.";
+      
+      const SURVEY_DES = "In this survey, you will evaluate <strong>10 audio samples</strong>. Each audio clip contains few sentences in your selected language with an embedded English-language entity (e.g., a name or term). You will rate the overall audio quality as well as how naturally this entity is pronounced within the sentence. For each audio, you need to answer <strong>4 questions</strong> related to 3 aspects:\n\n<strong>Pronunciation</strong> – How clearly and correctly the words are pronounced\n<strong>Grammar</strong> – How grammatically correct the speech sounds\n<strong>Naturalness</strong> – How natural the overall speech sounds\n\n<strong>Rating Scale:</strong> 1 (Poor) to 5 (Excellent)\n\nPlease listen to each audio carefully before providing your ratings.";
 
       function showLanguagePicker() {
         const languages = ["French", "German", "Italian", "Spanish"];
@@ -1027,4 +1090,4 @@
       showLanguagePicker();
     </script>
   </body>
-</html>
+</html>