Update index.html

index.html

@@ -304,6 +304,16 @@
         font-size: 0.95rem;
       }
 
+      .done-actions {
+        margin-top: 1.5rem;
+      }
+
+      .done-close {
+        margin-top: 1rem;
+        color: #9ca3af;
+        font-size: 0.85rem;
+      }
+
       /* ── Language picker ─────────────────────────────── */
       .lang-picker-title {
         font-size: 1.25rem;
@@ -430,6 +440,34 @@
         vertical-align: middle;
         margin-right: 0.4rem;
       }
+
+      /* ── Footer ───────────────────────────────────────── */
+      .form-footer {
+        margin-top: 1.5rem;
+        padding-top: 1rem;
+        border-top: 1px solid #e5e7eb;
+        text-align: center;
+        font-size: 0.8rem;
+        color: #9ca3af;
+      }
+      .form-footer a {
+        color: #7c3aed;
+        text-decoration: none;
+      }
+      .form-footer a:hover {
+        text-decoration: underline;
+      }
+
+      /* ── Markdown list styling ─────────────────────────── */
+      .form-body p ul,
+      .form-body p ol {
+        margin: 0.5rem 0 0.5rem 1.5rem;
+        padding-left: 0.5rem;
+      }
+      .form-body p li {
+        margin-bottom: 0.25rem;
+        line-height: 1.5;
+      }
     </style>
   </head>
 
@@ -461,17 +499,22 @@
         nip19,
         nip44,
       } from "https://esm.sh/nostr-tools@2.3.2";
+      import { marked } from "https://esm.sh/marked@12.0.0";
+
+      // Parse markdown string to HTML
+      function parseMarkdown(text) {
+        if (!text) return "";
+        return marked.parse(text);
+      }
 
       // ── Edit this disclaimer to update what's shown on the language selection screen ──
-     const DISCLAIMER = `By participating in this survey, you agree that your anonymized responses may be used for academic research as part of a master’s thesis. No personally identifiable information will be collected.\n Please select only one language that you are a native speaker of or fluent in at a bilingual level. Do not proceed if you are not proficient in any of the listed languages, as inaccurate responses may affect the validity of the survey results.\n If you speak multiple languages, please complete the survey for one language first. You will have the option to select another language and complete a new survey afterward.`;
+     const DISCLAIMER = `By participating in this survey, you agree that your anonymized responses may be used for academic research as part of a master's thesis. No personally identifiable information will be collected.\n\nPlease select only one language that you are a native speaker of or fluent in at a bilingual level. <strong style="color:#dc2626;">⚠️ Do not proceed if you are not proficient in any of the listed languages, as inaccurate responses may affect the validity of the survey results.</strong>\n\nEach audio clip you hear will not exceed 30 seconds.\n\nIf you speak multiple languages, please complete the survey for one language first. You will have the option to select another language and complete a new survey afterward.`;
       // ─────────────────────────────────────────────────────────────────────────────────
 
       // ── HuggingFace dataset configuration ───────────────────────────────────────────
       const HF_DATASET = "chaurAr/crosslingual-asr-entity-benchmark";
-      const METADATA_URL = `https://huggingface.co/datasets/${HF_DATASET}/raw/main/metadata.csv`;
-      // URL pattern: https://huggingface.co/datasets/chaurAr/crosslingual-asr-entity-benchmark/blob/main/audio/.wav
       // ─────────────────────────────────────────────────────────────────────────────────
-
+      const METADATA_URL= 'https://huggingface.co/datasets/chaurAr/crosslingual-asr-entity-benchmark/raw/main/metadata.csv'
       // Map language names to CSV language codes
       const LANGUAGE_CODE_MAP = {
         "French": "fr",
@@ -627,6 +670,23 @@
         input.style.display = "none";
       }
 
+      function applyLanguageField() {
+        const field = Object.values(formDef.fields).find(
+          (f) => f.labelHtml.trim().toLowerCase() === "language",
+        );
+        if (!field) return;
+
+        const input = document.querySelector(`input[name="${field.id}"]`);
+        if (!input) return;
+
+        input.value = selectedLanguage;
+
+        // Hide the label immediately before the input and the input itself
+        const label = input.previousElementSibling;
+        if (label?.tagName === "LABEL") label.style.display = "none";
+        input.style.display = "none";
+      }
+
       let formDef = null;
       let submitted = 0;
       let selectedLanguage = null;
@@ -721,14 +781,14 @@
         const cols = norm(colsRaw);
         const n = cols.length;
 
-        // Value goes from N (leftmost column) down to 1 (rightmost column)
+        // Value goes from 1 (leftmost column) to N (rightmost column)
         const headerCells = cols.map((c) => `<th>${c.label}</th>`).join("");
         const bodyRows = rows
           .map(
             (r) => `
         <tr>
           <td class="grid-row-label">${r.label}</td>
-          ${cols.map((c, i) => `<td><input type="radio" name="${fieldId}__${r.id}" value="${n - i}"></td>`).join("")}
+          ${cols.map((c, i) => `<td><input type="radio" name="${fieldId}__${r.id}" value="${i + 1}"></td>`).join("")}
         </tr>`,
           )
           .join("");
@@ -754,8 +814,19 @@
             <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-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>
         `;
+          document.getElementById("restart-btn").addEventListener("click", () => {
+            submitted = 0;
+            selectedLanguage = null;
+            audioSamples = [];
+            document.getElementById("progress-header").style.display = "none";
+            showLanguagePicker();
+          });
           return;
         }
 
@@ -775,9 +846,26 @@
             ${isLast ? "Submit" : "Next →"}
           </button>
         </div>
+        <div class="form-footer">
+          Powered by <a href="https://formstr.app/" target="_blank" rel="noopener">form*</a>
+        </div>
       `;
 
         applyUniqueIdField();
+        applyLanguageField();
+
+        // Render markdown in question labels
+        document.querySelectorAll(`#form-${formDef.id} p`).forEach((label) => {
+          const originalText = label.getAttribute('data-original') || label.innerHTML;
+          if (!label.getAttribute('data-original')) {
+            label.setAttribute('data-original', originalText);
+          }
+          console.log(originalText)
+          // Check if the label contains markdown syntax
+          if (originalText.includes('**') || originalText.includes('*') || originalText.includes('`') || originalText.includes('#')) {
+            label.innerHTML = parseMarkdown(originalText);
+          }
+        });
 
         // Insert audio player after the form intro (name/description) block
         // Use the pre-sampled audio files based on current submission count
@@ -879,4 +967,4 @@
       showLanguagePicker();
     </script>
   </body>
-</html>
+</html>