fix: buildDOM calls in Academy use el() wrapper instead of raw string IDs

This commit is contained in:
Rene Fichtmueller 2026-05-14 23:06:49 +02:00
parent 9b563b0378
commit f81b67860b

View File

@ -10833,7 +10833,7 @@ function initTraining() {
taRenderCategories(cats);
if (cats.length > 0) taSelectCategory(cats[0].id);
}).catch(function(e) {
buildDOM('ta-cat-tabs', '<div style="color:#ef4444;font-size:0.8rem">Failed to load training content. Is the API running?</div>');
buildDOM(el('ta-cat-tabs'), '<div style="color:#ef4444;font-size:0.8rem">Failed to load training content. Is the API running?</div>');
});
}
@ -10853,7 +10853,7 @@ function taRenderCategories(cats) {
+ '<span style="font-size:0.68rem;opacity:0.75;font-weight:400">' + cat.lesson_count + '</span>'
+ '</button>';
}).join('');
buildDOM('ta-cat-tabs', html);
buildDOM(el('ta-cat-tabs'), html);
}
function taSelectCategory(catId) {
@ -10861,7 +10861,7 @@ function taSelectCategory(catId) {
_ta.currentLesson = null;
taShowView('home');
taRenderCategories(_ta.cats);
buildDOM('ta-lesson-list', '<div class="loading pulse" style="font-size:0.8rem;color:var(--text-dim);padding:0.5rem">Loading lessons…</div>');
buildDOM(el('ta-lesson-list'), '<div class="loading pulse" style="font-size:0.8rem;color:var(--text-dim);padding:0.5rem">Loading lessons…</div>');
var quizBar = document.getElementById('ta-cat-quiz-bar');
if (quizBar) quizBar.style.display = 'none';
fetch('/api/training/lessons?category=' + catId).then(function(r) { return r.json(); }).then(function(lessons) {
@ -10879,13 +10879,13 @@ function taSelectCategory(catId) {
if (meta) meta.textContent = cat.quiz_count + ' questions · all lessons in this category';
}
}).catch(function() {
buildDOM('ta-lesson-list', '<div style="color:#ef4444;font-size:0.8rem">Error loading lessons.</div>');
buildDOM(el('ta-lesson-list'), '<div style="color:#ef4444;font-size:0.8rem">Error loading lessons.</div>');
});
}
function taRenderLessons(lessons, catId) {
if (!lessons.length) {
buildDOM('ta-lesson-list', '<div style="color:var(--text-dim);font-size:0.8rem">No lessons found.</div>');
buildDOM(el('ta-lesson-list'), '<div style="color:var(--text-dim);font-size:0.8rem">No lessons found.</div>');
return;
}
var progress = taGetProgress();
@ -10920,14 +10920,14 @@ function taRenderLessons(lessons, catId) {
+ '<div style="flex-shrink:0;font-size:0.78rem;color:var(--accent);font-weight:600;align-self:center"></div>'
+ '</div>';
}).join('');
buildDOM('ta-lesson-list', html);
buildDOM(el('ta-lesson-list'), html);
}
// ── Lesson viewer ─────────────────────────────────────────────────────────────
function taOpenLesson(lessonId, idx) {
_ta.currentLessonIdx = idx;
taShowView('lesson');
buildDOM('ta-lesson-content', '<div class="loading pulse" style="color:var(--text-dim);font-size:0.85rem;padding:1rem 0">Loading lesson…</div>');
buildDOM(el('ta-lesson-content'), '<div class="loading pulse" style="color:var(--text-dim);font-size:0.85rem;padding:1rem 0">Loading lesson…</div>');
fetch('/api/training/lessons/' + lessonId).then(function(r) { return r.json(); }).then(function(lesson) {
_ta.currentLesson = lesson;
taRenderLessonContent(lesson);
@ -10951,7 +10951,7 @@ function taOpenLesson(lessonId, idx) {
completeBtn.textContent = done ? '✓ Completed' : '✓ Mark Complete';
}
}).catch(function() {
buildDOM('ta-lesson-content', '<div style="color:#ef4444;font-size:0.85rem">Failed to load lesson content.</div>');
buildDOM(el('ta-lesson-content'), '<div style="color:#ef4444;font-size:0.85rem">Failed to load lesson content.</div>');
});
}
@ -10968,7 +10968,7 @@ function taRenderLessonContent(lesson) {
});
html += '</div>';
});
buildDOM('ta-lesson-content', html);
buildDOM(el('ta-lesson-content'), html);
}
function taRenderBlock(block, lang) {
@ -11071,12 +11071,12 @@ function taStartCategoryQuiz() {
function taFetchAndShowQuiz(url, title) {
taShowView('quiz');
buildDOM('ta-quiz-content', '<div class="loading pulse" style="color:var(--text-dim);font-size:0.85rem;padding:1rem 0">Loading quiz…</div>');
buildDOM(el('ta-quiz-content'), '<div class="loading pulse" style="color:var(--text-dim);font-size:0.85rem;padding:1rem 0">Loading quiz…</div>');
var titleEl = document.getElementById('ta-quiz-title');
if (titleEl) titleEl.textContent = title;
fetch(url).then(function(r) { return r.json(); }).then(function(questions) {
if (!questions.length) {
buildDOM('ta-quiz-content', '<div style="color:var(--text-dim);font-size:0.85rem">No quiz questions available for this selection.</div>');
buildDOM(el('ta-quiz-content'), '<div style="color:var(--text-dim);font-size:0.85rem">No quiz questions available for this selection.</div>');
return;
}
// Shuffle questions, cap at 20
@ -11086,7 +11086,7 @@ function taFetchAndShowQuiz(url, title) {
_ta.quizSubmitted = false;
taShowQuizQuestion(0);
}).catch(function() {
buildDOM('ta-quiz-content', '<div style="color:#ef4444;font-size:0.85rem">Failed to load quiz questions.</div>');
buildDOM(el('ta-quiz-content'), '<div style="color:#ef4444;font-size:0.85rem">Failed to load quiz questions.</div>');
});
}
@ -11170,7 +11170,7 @@ function taShowQuizQuestion(idx) {
});
html += '</div>';
buildDOM('ta-quiz-content', html);
buildDOM(el('ta-quiz-content'), html);
}
function taAnswerQuestion(qIdx, optIdx) {
@ -11232,7 +11232,7 @@ function taShowQuizResult() {
html += '</div>';
}
buildDOM('ta-quiz-content', html);
buildDOM(el('ta-quiz-content'), html);
var progressEl = document.getElementById('ta-quiz-progress');
if (progressEl) progressEl.textContent = '';
var titleEl = document.getElementById('ta-quiz-title');