showing quesiton-keys instead of ids

website/js/pages/results.js

@@ -2,7 +2,8 @@ import { apiGet } from '../api.js';
 import { showToast } from '../app.js';
 import {
     isDevTestClientCode,
-    questionLocalKey,
+    questionDisplayKey,
+    questionGermanLabel,
     testDataRowClassForClient,
 } from '../test-data.js';
 
@@ -106,7 +107,7 @@ function renderResults() {
                 <span style="margin-left:auto;font-size:.85rem;color:var(--text-secondary)" id="resultCount"></span>
                 <a id="exportCsvLink" class="btn btn-sm" href="#">Export CSV</a>
             </div>
-            <p class="data-toolbar-hint" style="margin-top:8px">Question columns show keys; hover headers for full text. Test rows (DEV-CL-*) have a yellow background.</p>
+            <p class="data-toolbar-hint" style="margin-top:8px">Question columns show stable keys (e.g. country_of_origin); hover for German text. Test rows (DEV-CL-*) have a yellow background.</p>
         </div>
         <div class="card">
             <div class="table-wrapper" id="resultsTableWrap">
@@ -121,7 +122,7 @@ function renderResults() {
 
     const qKeyList = document.getElementById('questionKeyList');
     qKeyList.innerHTML = questionsDef
-        .map(q => `<option value="${esc(questionLocalKey(q.questionID, q.defaultText))}"></option>`)
+        .map(q => `<option value="${esc(questionDisplayKey(q))}"></option>`)
         .join('');
 
     document.getElementById('filterSupervisor').addEventListener('change', (e) => {
@@ -202,11 +203,12 @@ function renderTableHead() {
         { key: 'completedAt', label: 'Completed' },
     ];
     const questionCols = questionsDef.map(q => {
-        const qKey = questionLocalKey(q.questionID, q.defaultText);
+        const qKey = questionDisplayKey(q);
+        const german = questionGermanLabel(q);
         return {
             key: `q_${q.questionID}`,
             label: qKey,
-            title: q.defaultText || qKey,
+            title: german || qKey,
             questionID: q.questionID,
             questionKey: qKey,
         };
@@ -446,7 +448,7 @@ function exportCSV() {
     });
 
     const headers = ['clientCode', 'coach', 'supervisor', 'status', 'sumPoints', 'completedAt',
-        ...questionsDef.map(q => questionLocalKey(q.questionID, q.defaultText))];
+        ...questionsDef.map(q => questionDisplayKey(q))];
 
     const rows = clients.map(c => {
         const base = [

website/js/test-data.js

@@ -16,7 +16,9 @@ export function testDataRowClassForUser(username) {
     return isDevTestUsername(username) ? ' row-test-data' : '';
 }
 
-/** Local question key from full questionID (hash__q5 → q5). */
+const STABLE_KEY_RE = /^[a-zA-Z][a-zA-Z0-9_]*$/;
+
+/** Local question id from full questionID (hash__q5 → q5). */
 export function questionLocalKey(questionID, fallback = '') {
     const id = String(questionID ?? '');
     const sep = id.lastIndexOf('__');
@@ -24,6 +26,39 @@ export function questionLocalKey(questionID, fallback = '') {
     return fallback || id;
 }
 
+function parseQuestionConfig(q) {
+    if (!q || typeof q !== 'object') return {};
+    let cfg = q.configJson;
+    if (typeof cfg === 'string') {
+        try {
+            cfg = JSON.parse(cfg);
+        } catch {
+            cfg = {};
+        }
+    }
+    return cfg && typeof cfg === 'object' ? cfg : {};
+}
+
+/** Stable question key for table headers / CSV (matches server qdb_question_column_label). */
+export function questionDisplayKey(q) {
+    if (!q) return '';
+    if (q.questionKey) return String(q.questionKey);
+    const cfg = parseQuestionConfig(q);
+    const fromCfg = String(cfg.questionKey || '').trim();
+    if (fromCfg && STABLE_KEY_RE.test(fromCfg)) return fromCfg;
+    const dt = String(q.defaultText || '').trim();
+    if (dt && STABLE_KEY_RE.test(dt)) return dt;
+    return questionLocalKey(q.questionID, dt);
+}
+
+/** German question text for header tooltips. */
+export function questionGermanLabel(q) {
+    const dt = String(q?.defaultText || '').trim();
+    const key = questionDisplayKey(q);
+    if (dt && dt !== key) return dt;
+    return '';
+}
+
 /** header_order.json column id → question key (questionnaire_x-y → y). */
 export function headerColumnQuestionKey(headerId) {
     const id = String(headerId ?? '');