Update index.html

index.html

@@ -413,6 +413,11 @@
         margin-bottom: 1.5rem;
         border-bottom: 1px solid #e5e7eb;
       }
+      .survey-description {
+        margin-bottom: 0.25rem;
+        padding-bottom: 0.75rem;
+        border-bottom: 1px solid #e5e7eb;
+      }
       .disclaimer-heading {
         font-size: 0.7rem;
         font-weight: 700;
@@ -508,7 +513,7 @@
       }
 
       // ── 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\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.`;
+      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 may 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 ───────────────────────────────────────────
@@ -692,6 +697,27 @@
       let selectedLanguage = null;
       let audioSamples = [];
 
+      // Parse CSV line handling quoted values
+      function parseCSVLine(line) {
+        const result = [];
+        let current = '';
+        let inQuotes = false;
+        
+        for (let i = 0; i < line.length; i++) {
+          const char = line[i];
+          if (char === '"') {
+            inQuotes = !inQuotes;
+          } else if (char === ',' && !inQuotes) {
+            result.push(current.trim());
+            current = '';
+          } else {
+            current += char;
+          }
+        }
+        result.push(current.trim());
+        return result;
+      }
+
       // Fetch metadata CSV and filter by language, then randomly sample 10 files
       async function fetchAudioSamples(language) {
         const langCode = LANGUAGE_CODE_MAP[language];
@@ -713,15 +739,15 @@
           const line = lines[i].trim();
           if (!line) continue;
           
-          // Simple CSV parsing (handle quoted values if needed)
-          const firstComma = line.indexOf(",");
-          if (firstComma === -1) continue;
+          const parts = parseCSVLine(line);
+          if (parts.length < 3) continue;
           
-          const file = line.substring(0, firstComma).trim();
-          const lang = line.substring(firstComma + 1).trim();
+          const file = parts[0];
+          const lang = parts[1];
+          const namedEntity = parts[2];
           
           if (lang === langCode) {
-            files.push(file);
+            files.push({ file, namedEntity });
           }
         }
 
@@ -735,11 +761,18 @@
       }
 
       // Generate HuggingFace URL for an audio file
-      function getAudioUrl(filePath) {
+      function getAudioUrl(audioSample) {
+        const filePath = audioSample.file;
         const fileName = filePath.split("/").pop();
         return `https://huggingface.co/datasets/${HF_DATASET}/resolve/main/${filePath}`;
       }
 
+      // Get named entity for current audio sample
+      function getNamedEntity() {
+        const audioSample = audioSamples[submitted];
+        return audioSample?.namedEntity || '';
+      }
+
       function updateProgress() {
         document.getElementById("progress-label").textContent =
           `${submitted} / ${TOTAL} responses submitted`;
@@ -761,7 +794,7 @@
         });
       }
 
-      function renderGridField(fieldId, raw) {
+      function renderGridField(fieldId, raw, namedEntity = '') {
         const { label, options: g } = raw;
         // Format: { columns: [[id, label, configStr], ...], rows: [[id, label, configStr], ...] }
         const rowsRaw = g.rows ?? [];
@@ -785,11 +818,18 @@
         const headerCells = cols.map((c) => `<th>${c.label}</th>`).join("");
         const bodyRows = rows
           .map(
-            (r) => `
+            (r, index) => {
+              let rowLabel = r.label;
+              // Add named entity to the 4th row (index 3)
+              if (index === 3 && namedEntity) {
+                rowLabel += ` <em>"<strong style="color:#6b7280;">${namedEntity}</strong>"</em>?`;
+              }
+              return `
         <tr>
-          <td class="grid-row-label">${r.label}</td>
+          <td class="grid-row-label">${rowLabel}</td>
           ${cols.map((c, i) => `<td><input type="radio" name="${fieldId}__${r.id}" value="${i + 1}"></td>`).join("")}
-        </tr>`,
+        </tr>`;
+            },
           )
           .join("");
 
@@ -897,7 +937,8 @@
             `#form-${formDef.id} .form-body`,
           );
           if (!formBody) return;
-          const gridHtml = renderGridField(fieldId, raw);
+          const namedEntity = getNamedEntity();
+          const gridHtml = renderGridField(fieldId, raw, namedEntity);
           formBody.insertAdjacentHTML("beforeend", gridHtml);
         });
 
@@ -933,13 +974,21 @@
           });
       }
 
+      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.";
+
       function showLanguagePicker() {
-        const languages = ["French", "German", "Spanish", "Italian"];
+        const languages = ["French", "German", "Italian", "Spanish"];
         card.innerHTML = `
         <div class="disclaimer-section">
           <div class="disclaimer-heading">Before you begin</div>
           <div class="disclaimer">${DISCLAIMER}</div>
         </div>
+        <div class="survey-description">
+          <div class="disclaimer-heading">About this Survey</div>
+          <div class="disclaimer">
+             ${SURVEY_DES} 
+          </div>
+        </div>
         <div class="lang-picker-title">Choose a language</div>
         <div class="lang-picker-sub">Select the language for this survey session.</div>
         <div class="lang-grid">