8aa1c5d0f7
Quill tooltip: move tooltip element to document.body via patchQuillTooltip() so overflow:hidden on .cms-main cannot clip it. Recalculates position from container-relative to viewport (fixed) coordinates with viewport clamping. Removes overflow:hidden from quill wrappers; applies border-radius to toolbar/container. Registration: hide #show-register by default in HTML; reveal only after registration-status fetch confirms enabled=true. Endpoint already returns 403 when disabled — no backend change needed.
1064 lines
46 KiB
JavaScript
1064 lines
46 KiB
JavaScript
// ============================================================
|
|
// LEARNING HUB — User content feed, viewer, quizzes + Admin CMS
|
|
// ============================================================
|
|
|
|
(function() {
|
|
|
|
var loaded = false;
|
|
var cmsLoaded = false;
|
|
var currentContent = null;
|
|
var currentView = 'feed'; // 'feed' | 'category' | 'viewer'
|
|
var _bodyQuill = null; // Quill instance for body editor
|
|
|
|
// ── Load when tab activated ────────────────────────────────
|
|
document.addEventListener('tabChanged', function(e) {
|
|
if (e.detail && e.detail.tab === 'learning') {
|
|
if (!loaded) { loadFeed(); loadCategories(); loaded = true; }
|
|
}
|
|
// Load CMS when Content Manager tab is opened
|
|
if (e.detail && e.detail.tab === 'cms') {
|
|
if (!cmsLoaded) { loadCms(); cmsLoaded = true; }
|
|
}
|
|
});
|
|
|
|
// ── Event delegation ───────────────────────────────────────
|
|
document.addEventListener('click', function(e) {
|
|
// Feed item click
|
|
var feedItem = e.target.closest('.lh-feed-item');
|
|
if (feedItem && feedItem.dataset.slug) {
|
|
loadContent(feedItem.dataset.slug);
|
|
return;
|
|
}
|
|
|
|
// Category pill click
|
|
var catPill = e.target.closest('.lh-cat-pill');
|
|
if (catPill && catPill.dataset.slug) {
|
|
if (catPill.dataset.slug === 'all') {
|
|
loadFeed();
|
|
setActiveCatPill('all');
|
|
} else {
|
|
loadCategoryContent(catPill.dataset.slug);
|
|
setActiveCatPill(catPill.dataset.slug);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Back button
|
|
if (e.target.closest('#lh-back')) {
|
|
showFeed();
|
|
return;
|
|
}
|
|
|
|
// Submit quiz
|
|
if (e.target.closest('#lh-submit-quiz')) {
|
|
submitQuiz();
|
|
return;
|
|
}
|
|
|
|
// ── CMS events ─────────────────────────────
|
|
if (e.target.closest('#btn-lh-add-cat')) { addCategory(); return; }
|
|
if (e.target.closest('#btn-lh-new-content')) { openEditor(null, 'article'); return; }
|
|
if (e.target.closest('#btn-lh-new-quiz')) { openEditor(null, 'quiz'); return; }
|
|
if (e.target.closest('#btn-lh-new-pearl')) { openEditor(null, 'pearl'); return; }
|
|
if (e.target.closest('#btn-lh-close-editor')) { closeEditor(); return; }
|
|
if (e.target.closest('#btn-lh-save-content')) { saveContent(); return; }
|
|
if (e.target.closest('#btn-lh-delete-content')) { deleteContent(); return; }
|
|
if (e.target.closest('#btn-lh-add-question')) { addQuestionBlock(); return; }
|
|
|
|
// Rich text toggle for question or option
|
|
var rtBtn = e.target.closest('.lh-richtext-btn');
|
|
if (rtBtn) { toggleRichText(rtBtn); return; }
|
|
|
|
// CMS content item edit
|
|
var cmsItem = e.target.closest('.lh-cms-content-item');
|
|
if (cmsItem && cmsItem.dataset.id) { openEditor(cmsItem.dataset.id); return; }
|
|
|
|
// CMS delete category
|
|
var delCat = e.target.closest('.lh-cms-del-cat');
|
|
if (delCat) { deleteCategory(delCat.dataset.id); return; }
|
|
|
|
// Remove question block
|
|
var rmQ = e.target.closest('.lh-rm-question');
|
|
if (rmQ) { var qb = rmQ.closest('.lh-question-block'); if (qb) qb.remove(); return; }
|
|
|
|
// Add option to question
|
|
var addOpt = e.target.closest('.lh-add-option');
|
|
if (addOpt) {
|
|
var qBlock = addOpt.closest('.lh-question-block');
|
|
if (qBlock) addOptionRow(qBlock.querySelector('.lh-options-list'), null);
|
|
return;
|
|
}
|
|
|
|
// Remove option
|
|
var rmOpt = e.target.closest('.lh-rm-option');
|
|
if (rmOpt) { var row = rmOpt.closest('.lh-option-row'); if (row) row.remove(); return; }
|
|
});
|
|
|
|
// Search
|
|
var searchTimeout = null;
|
|
var searchEl = document.getElementById('lh-search');
|
|
if (searchEl) {
|
|
searchEl.addEventListener('input', function() {
|
|
clearTimeout(searchTimeout);
|
|
var q = searchEl.value.trim();
|
|
if (!q) { loadFeed(); return; }
|
|
searchTimeout = setTimeout(function() { searchContent(q); }, 300);
|
|
});
|
|
}
|
|
|
|
// ============================================================
|
|
// USER-FACING: FEED, CATEGORIES, CONTENT, QUIZZES
|
|
// ============================================================
|
|
|
|
function loadFeed() {
|
|
var feedEl = document.getElementById('lh-feed');
|
|
if (!feedEl) return;
|
|
feedEl.innerHTML = '<p style="text-align:center;color:var(--g400);padding:24px;">Loading...</p>';
|
|
showFeed();
|
|
|
|
fetch('/api/learning/feed', { headers: getAuthHeaders() })
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (!data.success) { feedEl.innerHTML = '<p style="text-align:center;color:var(--red);padding:24px;">Failed to load</p>'; return; }
|
|
renderFeed(data.content, feedEl);
|
|
})
|
|
.catch(function() { feedEl.innerHTML = '<p style="text-align:center;color:var(--red);padding:24px;">Connection error</p>'; });
|
|
}
|
|
|
|
function loadCategories() {
|
|
fetch('/api/learning/categories', { headers: getAuthHeaders() })
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (!data.success) return;
|
|
var bar = document.getElementById('lh-categories');
|
|
if (!bar) return;
|
|
var html = '<button class="lh-cat-pill active" data-slug="all">All</button>';
|
|
data.categories.forEach(function(c) {
|
|
html += '<button class="lh-cat-pill" data-slug="' + esc(c.slug) + '">' + esc(c.name) + '</button>';
|
|
});
|
|
bar.innerHTML = html;
|
|
});
|
|
}
|
|
|
|
function loadCategoryContent(slug) {
|
|
var feedEl = document.getElementById('lh-feed');
|
|
if (!feedEl) return;
|
|
feedEl.innerHTML = '<p style="text-align:center;color:var(--g400);padding:24px;">Loading...</p>';
|
|
showFeed();
|
|
|
|
fetch('/api/learning/category/' + encodeURIComponent(slug), { headers: getAuthHeaders() })
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (!data.success) { feedEl.innerHTML = '<p style="text-align:center;color:var(--red);padding:24px;">Category not found</p>'; return; }
|
|
renderFeed(data.content, feedEl);
|
|
});
|
|
}
|
|
|
|
function searchContent(q) {
|
|
var feedEl = document.getElementById('lh-feed');
|
|
if (!feedEl) return;
|
|
showFeed();
|
|
|
|
fetch('/api/learning/search?q=' + encodeURIComponent(q), { headers: getAuthHeaders() })
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (!data.success) return;
|
|
renderFeed(data.content, feedEl);
|
|
});
|
|
}
|
|
|
|
function renderFeed(items, feedEl) {
|
|
if (!items || items.length === 0) {
|
|
feedEl.innerHTML = '<div style="text-align:center;padding:40px;color:var(--g400);"><i class="fas fa-book-open" style="font-size:32px;margin-bottom:12px;display:block;"></i>No content yet. Check back soon!</div>';
|
|
return;
|
|
}
|
|
|
|
feedEl.innerHTML = items.map(function(item) {
|
|
var typeIcon = item.content_type === 'quiz' ? 'fa-clipboard-question' : item.content_type === 'pearl' ? 'fa-gem' : 'fa-file-alt';
|
|
var typeColor = item.content_type === 'quiz' ? 'var(--amber)' : item.content_type === 'pearl' ? 'var(--purple, #8b5cf6)' : 'var(--blue)';
|
|
var quizBadge = item.question_count > 0 ? '<span class="lh-badge lh-badge-quiz"><i class="fas fa-clipboard-question"></i> ' + item.question_count + ' Q</span>' : '';
|
|
var catBadge = item.category_name ? '<span class="lh-badge">' + esc(item.category_name) + '</span>' : '<span class="lh-badge" style="opacity:0.5;">Uncategorized</span>';
|
|
var date = item.created_at ? new Date(item.created_at).toLocaleDateString() : '';
|
|
|
|
return '<div class="lh-feed-item card" data-slug="' + esc(item.slug) + '">' +
|
|
'<div class="lh-feed-item-header">' +
|
|
'<i class="fas ' + typeIcon + '" style="color:' + typeColor + ';font-size:16px;"></i>' +
|
|
'<div style="flex:1;min-width:0;">' +
|
|
'<div class="lh-feed-title">' + esc(item.title) + '</div>' +
|
|
'<div class="lh-feed-meta">' +
|
|
(item.subject ? '<span>' + esc(item.subject) + '</span>' : '') +
|
|
(item.author_name ? '<span>by ' + esc(item.author_name) + '</span>' : '') +
|
|
'<span>' + date + '</span>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div class="lh-feed-badges">' + catBadge + quizBadge + '</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
}).join('');
|
|
}
|
|
|
|
function loadContent(slug) {
|
|
fetch('/api/learning/content/' + encodeURIComponent(slug), { headers: getAuthHeaders() })
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (!data.success) { showToast(data.error || 'Content not found', 'error'); return; }
|
|
currentContent = data.content;
|
|
showViewer(data.content);
|
|
})
|
|
.catch(function() { showToast('Failed to load content', 'error'); });
|
|
}
|
|
|
|
function showFeed() {
|
|
currentView = 'feed';
|
|
var feedEl = document.getElementById('lh-feed');
|
|
var viewerEl = document.getElementById('lh-viewer');
|
|
var catsEl = document.getElementById('lh-categories');
|
|
var searchWrap = document.getElementById('lh-search');
|
|
if (feedEl) feedEl.classList.remove('hidden');
|
|
if (viewerEl) viewerEl.classList.add('hidden');
|
|
if (catsEl) catsEl.classList.remove('hidden');
|
|
if (searchWrap) searchWrap.closest('.card').classList.remove('hidden');
|
|
}
|
|
|
|
function showViewer(item) {
|
|
currentView = 'viewer';
|
|
var feedEl = document.getElementById('lh-feed');
|
|
var viewerEl = document.getElementById('lh-viewer');
|
|
var catsEl = document.getElementById('lh-categories');
|
|
var searchWrap = document.getElementById('lh-search');
|
|
if (feedEl) feedEl.classList.add('hidden');
|
|
if (viewerEl) viewerEl.classList.remove('hidden');
|
|
if (catsEl) catsEl.classList.add('hidden');
|
|
if (searchWrap) searchWrap.closest('.card').classList.add('hidden');
|
|
|
|
var titleEl = document.getElementById('lh-viewer-title');
|
|
var metaEl = document.getElementById('lh-viewer-meta');
|
|
var bodyEl = document.getElementById('lh-viewer-body');
|
|
var quizSection = document.getElementById('lh-quiz-section');
|
|
var resultsSection = document.getElementById('lh-quiz-results');
|
|
var progressSection = document.getElementById('lh-progress-section');
|
|
|
|
if (titleEl) titleEl.textContent = item.title;
|
|
if (metaEl) {
|
|
var parts = [];
|
|
if (item.category_name) parts.push(item.category_name);
|
|
if (item.subject) parts.push(item.subject);
|
|
if (item.author_name) parts.push('by ' + item.author_name);
|
|
if (item.created_at) parts.push(new Date(item.created_at).toLocaleDateString());
|
|
metaEl.textContent = parts.join(' | ');
|
|
}
|
|
if (bodyEl) {
|
|
// Render body as HTML (admin creates it)
|
|
bodyEl.innerHTML = sanitizeHtml(item.body || '');
|
|
}
|
|
|
|
// Quiz
|
|
if (quizSection) {
|
|
if (item.questions && item.questions.length > 0) {
|
|
quizSection.classList.remove('hidden');
|
|
renderQuiz(item.questions);
|
|
} else {
|
|
quizSection.classList.add('hidden');
|
|
}
|
|
}
|
|
if (resultsSection) resultsSection.classList.add('hidden');
|
|
|
|
// Progress
|
|
if (progressSection && item.progress && item.progress.length > 0) {
|
|
progressSection.classList.remove('hidden');
|
|
var progHtml = item.progress.map(function(p) {
|
|
var pct = p.total > 0 ? Math.round((p.score / p.total) * 100) : 0;
|
|
var date = new Date(p.completed_at).toLocaleDateString();
|
|
return '<div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--g100);">' +
|
|
'<span>' + date + '</span>' +
|
|
'<span style="font-weight:600;color:' + (pct >= 70 ? 'var(--green)' : 'var(--amber)') + ';">' + p.score + '/' + p.total + ' (' + pct + '%)</span>' +
|
|
'</div>';
|
|
}).join('');
|
|
document.getElementById('lh-progress-list').innerHTML = progHtml;
|
|
} else if (progressSection) {
|
|
progressSection.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
function renderQuiz(questions) {
|
|
var container = document.getElementById('lh-quiz-questions');
|
|
var countEl = document.getElementById('lh-quiz-count');
|
|
if (!container) return;
|
|
if (countEl) countEl.textContent = questions.length + ' question' + (questions.length !== 1 ? 's' : '');
|
|
|
|
container.innerHTML = questions.map(function(q, idx) {
|
|
var isMulti = q.question_type === 'multi';
|
|
var typeLabel = q.question_type === 'true_false' ? 'True / False'
|
|
: isMulti ? 'Multiple Select' : 'Single Choice';
|
|
var inputType = isMulti ? 'checkbox' : 'radio';
|
|
var nameAttr = isMulti ? 'lh-qm-' + q.id : 'lh-q-' + q.id;
|
|
|
|
var optionsHtml = (q.options || []).map(function(opt) {
|
|
return '<label class="lh-quiz-option">' +
|
|
'<input type="' + inputType + '" name="' + nameAttr + '" value="' + opt.id + '">' +
|
|
'<span>' + sanitizeHtml(opt.option_text) + '</span>' +
|
|
'</label>';
|
|
}).join('');
|
|
|
|
var hint = isMulti ? '<div class="lh-quiz-multi-hint">Select all that apply</div>' : '';
|
|
|
|
return '<div class="lh-quiz-q" data-qid="' + q.id + '" data-qtype="' + q.question_type + '">' +
|
|
'<div class="lh-quiz-q-header">' +
|
|
'<span class="lh-quiz-q-num">Q' + (idx + 1) + '</span>' +
|
|
'<span class="lh-quiz-q-type">' + typeLabel + '</span>' +
|
|
'</div>' +
|
|
'<p class="lh-quiz-q-text">' + sanitizeHtml(q.question_text) + '</p>' +
|
|
hint +
|
|
'<div class="lh-quiz-options">' + optionsHtml + '</div>' +
|
|
'</div>';
|
|
}).join('');
|
|
}
|
|
|
|
function submitQuiz() {
|
|
if (!currentContent || !currentContent.questions) return;
|
|
|
|
var answers = [];
|
|
currentContent.questions.forEach(function(q) {
|
|
if (q.question_type === 'multi') {
|
|
var checkedEls = document.querySelectorAll('input[name="lh-qm-' + q.id + '"]:checked');
|
|
var optionIds = [];
|
|
checkedEls.forEach(function(el) { optionIds.push(parseInt(el.value)); });
|
|
answers.push({ questionId: q.id, optionIds: optionIds });
|
|
} else {
|
|
var selected = document.querySelector('input[name="lh-q-' + q.id + '"]:checked');
|
|
answers.push({ questionId: q.id, optionId: selected ? parseInt(selected.value) : null });
|
|
}
|
|
});
|
|
|
|
showLoading('Submitting quiz...');
|
|
|
|
fetch('/api/learning/submit-quiz', {
|
|
method: 'POST',
|
|
headers: getAuthHeaders(),
|
|
body: JSON.stringify({ contentId: currentContent.id, answers: answers })
|
|
})
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
hideLoading();
|
|
if (!data.success) { showToast(data.error || 'Submit failed', 'error'); return; }
|
|
showQuizResults(data);
|
|
})
|
|
.catch(function() { hideLoading(); showToast('Submit failed', 'error'); });
|
|
}
|
|
|
|
function showQuizResults(data) {
|
|
var resultsEl = document.getElementById('lh-quiz-results');
|
|
var scoreEl = document.getElementById('lh-quiz-score');
|
|
var explEl = document.getElementById('lh-quiz-explanations');
|
|
if (!resultsEl) return;
|
|
|
|
resultsEl.classList.remove('hidden');
|
|
var pct = data.percentage;
|
|
var color = pct >= 80 ? 'var(--green)' : pct >= 50 ? 'var(--amber)' : 'var(--red)';
|
|
if (scoreEl) {
|
|
scoreEl.textContent = data.score + '/' + data.total + ' (' + pct + '%)';
|
|
scoreEl.style.background = color;
|
|
scoreEl.style.color = 'white';
|
|
}
|
|
|
|
if (explEl) {
|
|
explEl.innerHTML = data.results.map(function(r, idx) {
|
|
var icon = r.isCorrect ? '<i class="fas fa-check-circle" style="color:var(--green);"></i>' : '<i class="fas fa-times-circle" style="color:var(--red);"></i>';
|
|
var explHtml = '';
|
|
if (!r.isCorrect && r.selectedExplanation) {
|
|
explHtml += '<div class="lh-expl lh-expl-wrong"><strong>Why incorrect:</strong> ' + esc(r.selectedExplanation) + '</div>';
|
|
}
|
|
if (!r.isCorrect) {
|
|
explHtml += '<div class="lh-expl lh-expl-correct"><strong>Correct answer:</strong> ' + esc(r.correctOptionText) + '</div>';
|
|
}
|
|
if (r.generalExplanation) {
|
|
explHtml += '<div class="lh-expl lh-expl-general"><strong>Explanation:</strong> ' + sanitizeHtml(r.generalExplanation) + '</div>';
|
|
}
|
|
|
|
return '<div class="lh-result-item">' +
|
|
'<div class="lh-result-header">' + icon + ' <strong>Q' + (idx + 1) + ':</strong> ' + sanitizeHtml(r.questionText) + '</div>' +
|
|
explHtml +
|
|
'</div>';
|
|
}).join('');
|
|
}
|
|
|
|
// Highlight correct/incorrect in quiz
|
|
data.results.forEach(function(r) {
|
|
var qDiv = document.querySelector('.lh-quiz-q[data-qid="' + r.questionId + '"]');
|
|
if (!qDiv) return;
|
|
var isMulti = r.questionType === 'multi';
|
|
qDiv.querySelectorAll('.lh-quiz-option').forEach(function(label) {
|
|
var input = label.querySelector('input');
|
|
if (!input) return;
|
|
var optId = parseInt(input.value);
|
|
if (isMulti) {
|
|
var correctIds = r.correctOptionIds || [];
|
|
var selectedIds = r.selectedOptionIds || [];
|
|
if (correctIds.indexOf(optId) !== -1) label.classList.add('lh-opt-correct');
|
|
if (selectedIds.indexOf(optId) !== -1 && correctIds.indexOf(optId) === -1) label.classList.add('lh-opt-wrong');
|
|
} else {
|
|
if (optId === r.correctOptionId) label.classList.add('lh-opt-correct');
|
|
if (optId === r.selectedOptionId && !r.isCorrect) label.classList.add('lh-opt-wrong');
|
|
}
|
|
input.disabled = true;
|
|
});
|
|
});
|
|
|
|
// Disable submit button
|
|
var submitBtn = document.getElementById('lh-submit-quiz');
|
|
if (submitBtn) { submitBtn.disabled = true; submitBtn.innerHTML = '<i class="fas fa-check"></i> Submitted'; }
|
|
|
|
resultsEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
|
|
function setActiveCatPill(slug) {
|
|
document.querySelectorAll('.lh-cat-pill').forEach(function(p) {
|
|
p.classList.toggle('active', p.dataset.slug === slug);
|
|
});
|
|
}
|
|
|
|
// ============================================================
|
|
// ADMIN CMS
|
|
// ============================================================
|
|
|
|
function loadCms() {
|
|
loadCmsCategories();
|
|
loadCmsContent();
|
|
loadCmsStats();
|
|
}
|
|
|
|
function loadCmsStats() {
|
|
fetch('/api/admin/learning/stats', { headers: getAuthHeaders() })
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (!data.success) return;
|
|
var s = data.stats;
|
|
var set = function(id, val) { var el = document.getElementById(id); if (el) el.textContent = val; };
|
|
set('cms-stat-published', s.publishedContent);
|
|
set('cms-stat-drafts', s.totalContent - s.publishedContent);
|
|
set('cms-stat-categories', s.totalCategories);
|
|
set('cms-stat-quizzes', s.totalQuizzes);
|
|
set('cms-stat-attempts', s.totalAttempts);
|
|
});
|
|
}
|
|
|
|
function loadCmsCategories() {
|
|
fetch('/api/admin/learning/categories', { headers: getAuthHeaders() })
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (!data.success) return;
|
|
var container = document.getElementById('lh-cms-categories');
|
|
if (!container) return;
|
|
|
|
if (data.categories.length === 0) {
|
|
container.innerHTML = '<div style="font-size:12px;color:var(--g400);">No categories yet</div>';
|
|
} else {
|
|
container.innerHTML = data.categories.map(function(c) {
|
|
return '<div class="cms-cat-item">' +
|
|
'<span class="cms-cat-name"><i class="fas fa-folder" style="color:var(--amber);margin-right:6px;font-size:11px;"></i>' + esc(c.name) + '</span>' +
|
|
'<span class="cms-cat-count">' + c.content_count + '</span>' +
|
|
'<button class="lh-cms-del-cat" data-id="' + c.id + '" style="border:none;background:none;cursor:pointer;color:var(--g400);font-size:11px;padding:2px;" title="Delete"><i class="fas fa-times"></i></button>' +
|
|
'</div>';
|
|
}).join('');
|
|
}
|
|
|
|
// Update category dropdowns (editor + filter)
|
|
var sel = document.getElementById('lh-cms-edit-category');
|
|
if (sel) {
|
|
sel.innerHTML = '<option value="">Uncategorized</option>';
|
|
data.categories.forEach(function(c) {
|
|
sel.innerHTML += '<option value="' + c.id + '">' + esc(c.name) + '</option>';
|
|
});
|
|
}
|
|
var filterSel = document.getElementById('cms-filter-category');
|
|
if (filterSel) {
|
|
filterSel.innerHTML = '<option value="all">All Categories</option>';
|
|
data.categories.forEach(function(c) {
|
|
filterSel.innerHTML += '<option value="' + c.id + '">' + esc(c.name) + '</option>';
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function addCategory() {
|
|
var input = document.getElementById('lh-cms-cat-name');
|
|
if (!input || !input.value.trim()) { showToast('Enter category name', 'error'); return; }
|
|
|
|
fetch('/api/admin/learning/categories', {
|
|
method: 'POST',
|
|
headers: getAuthHeaders(),
|
|
body: JSON.stringify({ name: input.value.trim() })
|
|
})
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (data.success) {
|
|
input.value = '';
|
|
loadCmsCategories();
|
|
loadCategories(); // refresh user-facing pills too
|
|
showToast('Category created', 'success');
|
|
} else showToast(data.error || 'Failed', 'error');
|
|
})
|
|
.catch(function() { showToast('Request failed', 'error'); });
|
|
}
|
|
|
|
function deleteCategory(id) {
|
|
if (!confirm('Delete this category? Content will become uncategorized.')) return;
|
|
fetch('/api/admin/learning/categories/' + id, { method: 'DELETE', headers: getAuthHeaders() })
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (data.success) { loadCmsCategories(); loadCategories(); showToast('Category deleted', 'info'); }
|
|
else showToast(data.error || 'Failed', 'error');
|
|
});
|
|
}
|
|
|
|
function loadCmsContent() {
|
|
var container = document.getElementById('lh-cms-content-list');
|
|
if (!container) return;
|
|
container.innerHTML = '<p style="text-align:center;color:var(--g400);padding:12px;">Loading...</p>';
|
|
|
|
fetch('/api/admin/learning/content', { headers: getAuthHeaders() })
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (!data.success) return;
|
|
if (data.content.length === 0) {
|
|
container.innerHTML = '<p style="text-align:center;color:var(--g400);padding:12px;">No content yet. Click "New Content" to create.</p>';
|
|
return;
|
|
}
|
|
window._cmsContentData = data.content;
|
|
renderCmsContentList(data.content);
|
|
});
|
|
}
|
|
|
|
function renderCmsContentList(items) {
|
|
var container = document.getElementById('lh-cms-content-list');
|
|
if (!container) return;
|
|
if (!items || items.length === 0) {
|
|
container.innerHTML = '<div style="text-align:center;padding:40px;color:var(--g400);"><i class="fas fa-file-circle-plus" style="font-size:24px;display:block;margin-bottom:8px;"></i>No content yet. Click "New Content" to get started.</div>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = items.map(function(item) {
|
|
var statusBadge = item.published
|
|
? '<span class="cms-badge cms-badge-pub">Published</span>'
|
|
: '<span class="cms-badge cms-badge-draft">Draft</span>';
|
|
var typeLabel = item.content_type === 'quiz' ? 'Quiz' : item.content_type === 'pearl' ? 'Pearl' : 'Article';
|
|
var qBadge = item.question_count > 0 ? ' <span style="color:var(--amber);">' + item.question_count + 'Q</span>' : '';
|
|
var date = item.updated_at ? new Date(item.updated_at).toLocaleDateString() : '';
|
|
|
|
return '<div class="cms-table-row lh-cms-content-item" data-id="' + item.id + '">' +
|
|
'<span class="cms-col-title">' + esc(item.title) + qBadge + '<br><span class="cms-title-sub">' + esc(item.subject || '') + '</span></span>' +
|
|
'<span class="cms-col-cat">' + esc(item.category_name || 'Uncategorized') + '</span>' +
|
|
'<span class="cms-col-type">' + typeLabel + '</span>' +
|
|
'<span class="cms-col-status">' + statusBadge + '</span>' +
|
|
'<span class="cms-col-date">' + date + '</span>' +
|
|
'<span class="cms-col-actions"><i class="fas fa-pen" style="color:var(--g400);"></i></span>' +
|
|
'</div>';
|
|
}).join('');
|
|
}
|
|
|
|
// CMS search & filter
|
|
document.addEventListener('input', function(e) {
|
|
if (e.target.id === 'cms-search') filterCmsContent();
|
|
});
|
|
document.addEventListener('change', function(e) {
|
|
if (e.target.id === 'cms-filter-status' || e.target.id === 'cms-filter-category') filterCmsContent();
|
|
});
|
|
|
|
function filterCmsContent() {
|
|
var items = window._cmsContentData || [];
|
|
var search = (document.getElementById('cms-search') || {}).value || '';
|
|
var statusFilter = (document.getElementById('cms-filter-status') || {}).value || 'all';
|
|
var catFilter = (document.getElementById('cms-filter-category') || {}).value || 'all';
|
|
|
|
search = search.toLowerCase().trim();
|
|
var filtered = items.filter(function(item) {
|
|
if (search && item.title.toLowerCase().indexOf(search) === -1 && (item.subject || '').toLowerCase().indexOf(search) === -1) return false;
|
|
if (statusFilter === 'published' && !item.published) return false;
|
|
if (statusFilter === 'draft' && item.published) return false;
|
|
if (catFilter !== 'all' && String(item.category_id) !== catFilter) return false;
|
|
return true;
|
|
});
|
|
renderCmsContentList(filtered);
|
|
}
|
|
|
|
// ── Quill tooltip fix ─────────────────────────────────────
|
|
// Moves the tooltip element to document.body so overflow:hidden on
|
|
// ancestor containers cannot clip it. Recalculates position to
|
|
// viewport (fixed) coordinates on every show.
|
|
function patchQuillTooltip(q) {
|
|
var tooltip = q && q.theme && q.theme.tooltip;
|
|
if (!tooltip || !tooltip.root) return;
|
|
var el = tooltip.root;
|
|
document.body.appendChild(el);
|
|
el.style.position = 'fixed';
|
|
el.style.zIndex = '10000';
|
|
|
|
var origPosition = tooltip.position.bind(tooltip);
|
|
tooltip.position = function(reference) {
|
|
origPosition(reference);
|
|
// Quill sets left/top as container-relative; convert to viewport coords
|
|
var rect = q.container.getBoundingClientRect();
|
|
var l = rect.left + parseFloat(el.style.left || 0);
|
|
var t = rect.top + parseFloat(el.style.top || 0);
|
|
// Clamp to viewport
|
|
var tw = el.offsetWidth || 200;
|
|
var th = el.offsetHeight || 40;
|
|
if (l + tw > window.innerWidth - 8) l = window.innerWidth - tw - 8;
|
|
if (l < 8) l = 8;
|
|
if (t + th > window.innerHeight - 8) t = rect.top + parseFloat(el.style.top || 0) - th - 8;
|
|
if (t < 8) t = 8;
|
|
el.style.left = l + 'px';
|
|
el.style.top = t + 'px';
|
|
};
|
|
}
|
|
|
|
// ── Quill body editor ─────────────────────────────────────
|
|
function initBodyEditor() {
|
|
var container = document.getElementById('lh-body-editor');
|
|
if (!container || _bodyQuill) return;
|
|
_bodyQuill = new Quill(container, {
|
|
theme: 'snow',
|
|
modules: {
|
|
toolbar: [
|
|
[{ header: [2, 3, false] }],
|
|
['bold', 'italic', 'underline', 'strike'],
|
|
[{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
|
|
['blockquote', 'code-block'],
|
|
['link'],
|
|
[{ color: [] }],
|
|
['clean']
|
|
]
|
|
}
|
|
});
|
|
patchQuillTooltip(_bodyQuill);
|
|
}
|
|
|
|
// Mini Quill for question text or option text
|
|
function makeMinQuill(container, existingHtml, isOption) {
|
|
var toolbar = isOption
|
|
? [['bold', 'italic'], ['link']]
|
|
: [['bold', 'italic'], [{ list: 'ordered' }, { list: 'bullet' }], ['link'], ['clean']];
|
|
var q = new Quill(container, {
|
|
theme: 'snow',
|
|
modules: { toolbar: toolbar }
|
|
});
|
|
patchQuillTooltip(q);
|
|
if (existingHtml) q.clipboard.dangerouslyPasteHTML(existingHtml);
|
|
return q;
|
|
}
|
|
|
|
// Toggle rich text on a question text area or option text area
|
|
function toggleRichText(btn) {
|
|
var isActive = btn.classList.contains('active');
|
|
var target = btn.dataset.target; // 'question' or 'option'
|
|
var block = btn.closest(target === 'question' ? '.lh-question-block' : '.lh-option-row');
|
|
if (!block) return;
|
|
|
|
if (target === 'question') {
|
|
var ta = block.querySelector('.lh-q-text');
|
|
var wrap = block.querySelector('.lh-q-richtext-wrap');
|
|
|
|
if (!isActive) {
|
|
// Enable: hide textarea, show quill
|
|
var currentVal = ta ? ta.value : '';
|
|
btn.classList.add('active');
|
|
btn.textContent = 'Plain Text';
|
|
if (ta) ta.style.display = 'none';
|
|
if (!wrap) {
|
|
wrap = document.createElement('div');
|
|
wrap.className = 'lh-q-richtext-wrap';
|
|
ta.parentNode.insertBefore(wrap, ta.nextSibling);
|
|
}
|
|
wrap.style.display = '';
|
|
if (!block._questionQuill) {
|
|
block._questionQuill = makeMinQuill(wrap, currentVal, false);
|
|
} else {
|
|
wrap.style.display = '';
|
|
}
|
|
} else {
|
|
// Disable: get HTML from quill, restore textarea
|
|
btn.classList.remove('active');
|
|
btn.textContent = 'Rich Text';
|
|
if (block._questionQuill) {
|
|
var html = block._questionQuill.root.innerHTML;
|
|
if (html === '<p><br></p>') html = '';
|
|
if (ta) { ta.value = html; ta.style.display = ''; }
|
|
}
|
|
if (wrap) wrap.style.display = 'none';
|
|
}
|
|
} else {
|
|
// option
|
|
var row = block;
|
|
var optInput = row.querySelector('.lh-opt-text');
|
|
var optWrap = row.querySelector('.lh-opt-richtext-wrap');
|
|
|
|
if (!isActive) {
|
|
var curVal = optInput ? optInput.value : '';
|
|
btn.classList.add('active');
|
|
btn.textContent = 'Plain';
|
|
if (optInput) optInput.style.display = 'none';
|
|
if (!optWrap) {
|
|
optWrap = document.createElement('div');
|
|
optWrap.className = 'lh-opt-richtext-wrap';
|
|
optInput.parentNode.insertBefore(optWrap, optInput.nextSibling);
|
|
}
|
|
optWrap.style.display = '';
|
|
if (!row._optQuill) {
|
|
row._optQuill = makeMinQuill(optWrap, curVal, true);
|
|
}
|
|
} else {
|
|
btn.classList.remove('active');
|
|
btn.textContent = 'Rich';
|
|
if (row._optQuill) {
|
|
var optHtml = row._optQuill.root.innerHTML;
|
|
if (optHtml === '<p><br></p>') optHtml = '';
|
|
if (optInput) { optInput.value = optHtml; optInput.style.display = ''; }
|
|
}
|
|
if (optWrap) optWrap.style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Read question text whether in rich text mode or plain
|
|
function getQText(block) {
|
|
if (block._questionQuill && block.querySelector('.lh-q-richtext-wrap') &&
|
|
block.querySelector('.lh-q-richtext-wrap').style.display !== 'none') {
|
|
var html = block._questionQuill.root.innerHTML;
|
|
return html === '<p><br></p>' ? '' : html;
|
|
}
|
|
var ta = block.querySelector('.lh-q-text');
|
|
return ta ? ta.value.trim() : '';
|
|
}
|
|
|
|
// Read option text whether in rich text mode or plain
|
|
function getOptText(row) {
|
|
if (row._optQuill && row.querySelector('.lh-opt-richtext-wrap') &&
|
|
row.querySelector('.lh-opt-richtext-wrap').style.display !== 'none') {
|
|
var html = row._optQuill.root.innerHTML;
|
|
return html === '<p><br></p>' ? '' : html;
|
|
}
|
|
var inp = row.querySelector('.lh-opt-text');
|
|
return inp ? inp.value.trim() : '';
|
|
}
|
|
|
|
function openEditor(contentId, contentType) {
|
|
var editor = document.getElementById('lh-cms-editor');
|
|
var listView = document.getElementById('cms-list-view');
|
|
if (!editor) return;
|
|
editor.classList.remove('hidden');
|
|
if (listView) listView.classList.add('hidden');
|
|
|
|
// Reset
|
|
document.getElementById('lh-cms-edit-id').value = '';
|
|
document.getElementById('lh-cms-edit-title').value = '';
|
|
document.getElementById('lh-cms-edit-subject').value = '';
|
|
document.getElementById('lh-cms-edit-category').value = '';
|
|
document.getElementById('lh-cms-edit-type').value = contentType || 'article';
|
|
document.getElementById('lh-cms-edit-published').value = 'false';
|
|
document.getElementById('lh-cms-questions').innerHTML = '';
|
|
document.getElementById('btn-lh-delete-content').classList.add('hidden');
|
|
initBodyEditor();
|
|
if (_bodyQuill) _bodyQuill.setContents([{ insert: '\n' }]);
|
|
|
|
// For quiz type, add a starter question
|
|
if (contentType === 'quiz' && !contentId) {
|
|
addQuestionBlock();
|
|
}
|
|
|
|
if (!contentId) return;
|
|
|
|
// Load existing content
|
|
fetch('/api/admin/learning/content/' + contentId, { headers: getAuthHeaders() })
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (!data.success) { showToast('Failed to load', 'error'); return; }
|
|
var c = data.content;
|
|
document.getElementById('lh-cms-edit-id').value = c.id;
|
|
document.getElementById('lh-cms-edit-title').value = c.title;
|
|
document.getElementById('lh-cms-edit-subject').value = c.subject || '';
|
|
if (_bodyQuill) _bodyQuill.clipboard.dangerouslyPasteHTML(c.body || '');
|
|
document.getElementById('lh-cms-edit-category').value = c.category_id || '';
|
|
document.getElementById('lh-cms-edit-type').value = c.content_type || 'article';
|
|
document.getElementById('lh-cms-edit-published').value = c.published ? 'true' : 'false';
|
|
document.getElementById('btn-lh-delete-content').classList.remove('hidden');
|
|
|
|
// Load questions
|
|
var qContainer = document.getElementById('lh-cms-questions');
|
|
qContainer.innerHTML = '';
|
|
if (c.questions && c.questions.length > 0) {
|
|
c.questions.forEach(function(q) { addQuestionBlock(q); });
|
|
}
|
|
|
|
editor.scrollIntoView({ behavior: 'smooth' });
|
|
});
|
|
}
|
|
|
|
function closeEditor() {
|
|
var editor = document.getElementById('lh-cms-editor');
|
|
var listView = document.getElementById('cms-list-view');
|
|
if (editor) editor.classList.add('hidden');
|
|
if (listView) listView.classList.remove('hidden');
|
|
}
|
|
|
|
function saveContent() {
|
|
var id = document.getElementById('lh-cms-edit-id').value;
|
|
var title = document.getElementById('lh-cms-edit-title').value.trim();
|
|
var subject = document.getElementById('lh-cms-edit-subject').value.trim();
|
|
var body = _bodyQuill ? (_bodyQuill.root.innerHTML === '<p><br></p>' ? '' : _bodyQuill.root.innerHTML) : '';
|
|
var category_id = document.getElementById('lh-cms-edit-category').value || null;
|
|
var content_type = document.getElementById('lh-cms-edit-type').value;
|
|
var published = document.getElementById('lh-cms-edit-published').value === 'true';
|
|
|
|
if (!title) { showToast('Title required', 'error'); return; }
|
|
|
|
// Gather questions with validation
|
|
var questions = [];
|
|
var validationError = false;
|
|
var qBlocks = document.querySelectorAll('#lh-cms-questions .lh-question-block');
|
|
for (var qi = 0; qi < qBlocks.length; qi++) {
|
|
var qBlock = qBlocks[qi];
|
|
var qText = getQText(qBlock);
|
|
if (!qText) continue;
|
|
var qType = qBlock.querySelector('.lh-q-type').value;
|
|
var qExpl = qBlock.querySelector('.lh-q-explanation').value.trim();
|
|
var qId = qBlock.dataset.questionId || null;
|
|
|
|
var options = [];
|
|
qBlock.querySelectorAll('.lh-option-row').forEach(function(row) {
|
|
var optText = getOptText(row);
|
|
if (!optText) return;
|
|
options.push({
|
|
option_text: optText,
|
|
is_correct: row.querySelector('.lh-opt-correct').checked,
|
|
explanation: row.querySelector('.lh-opt-expl').value.trim()
|
|
});
|
|
});
|
|
|
|
// Validate: must have a correct answer marked
|
|
var hasCorrect = options.some(function(o) { return o.is_correct; });
|
|
if (options.length > 0 && !hasCorrect) {
|
|
showToast('Question "' + qText.substring(0, 50) + '..." needs a correct answer marked', 'error');
|
|
qBlock.style.outline = '2px solid var(--red)';
|
|
qBlock.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
validationError = true;
|
|
break;
|
|
}
|
|
qBlock.style.outline = '';
|
|
|
|
questions.push({
|
|
id: qId,
|
|
question_text: qText,
|
|
question_type: qType,
|
|
explanation: qExpl,
|
|
options: options
|
|
});
|
|
}
|
|
if (validationError) return;
|
|
|
|
var payload = { title: title, body: body, category_id: category_id, subject: subject, content_type: content_type, published: published };
|
|
|
|
var method = id ? 'PUT' : 'POST';
|
|
var url = id ? '/api/admin/learning/content/' + id : '/api/admin/learning/content';
|
|
|
|
showLoading('Saving...');
|
|
|
|
fetch(url, { method: method, headers: getAuthHeaders(), body: JSON.stringify(payload) })
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (!data.success) { hideLoading(); showToast(data.error || 'Save failed', 'error'); return; }
|
|
var contentId = id || data.id;
|
|
|
|
// Save questions sequentially
|
|
saveQuestions(contentId, questions, 0, function() {
|
|
hideLoading();
|
|
showToast('Content saved', 'success');
|
|
closeEditor();
|
|
loadCmsContent();
|
|
loadCmsStats();
|
|
loaded = false; // force refresh user feed
|
|
});
|
|
})
|
|
.catch(function() { hideLoading(); showToast('Save failed', 'error'); });
|
|
}
|
|
|
|
function saveQuestions(contentId, questions, index, callback) {
|
|
if (index >= questions.length) { callback(); return; }
|
|
|
|
var q = questions[index];
|
|
var qId = q.id;
|
|
var method, url;
|
|
|
|
if (qId) {
|
|
method = 'PUT';
|
|
url = '/api/admin/learning/questions/' + qId;
|
|
} else {
|
|
method = 'POST';
|
|
url = '/api/admin/learning/content/' + contentId + '/questions';
|
|
}
|
|
|
|
fetch(url, {
|
|
method: method,
|
|
headers: getAuthHeaders(),
|
|
body: JSON.stringify({
|
|
question_text: q.question_text,
|
|
question_type: q.question_type,
|
|
explanation: q.explanation,
|
|
options: q.options
|
|
})
|
|
})
|
|
.then(function(r) { return r.json(); })
|
|
.then(function() {
|
|
saveQuestions(contentId, questions, index + 1, callback);
|
|
})
|
|
.catch(function() {
|
|
saveQuestions(contentId, questions, index + 1, callback);
|
|
});
|
|
}
|
|
|
|
function deleteContent() {
|
|
var id = document.getElementById('lh-cms-edit-id').value;
|
|
if (!id) return;
|
|
if (!confirm('Delete this content and all its questions? This cannot be undone.')) return;
|
|
|
|
fetch('/api/admin/learning/content/' + id, { method: 'DELETE', headers: getAuthHeaders() })
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (data.success) {
|
|
showToast('Content deleted', 'info');
|
|
closeEditor();
|
|
loadCmsContent();
|
|
loadCmsStats();
|
|
loaded = false;
|
|
} else showToast(data.error || 'Failed', 'error');
|
|
});
|
|
}
|
|
|
|
function addQuestionBlock(existingQ) {
|
|
var container = document.getElementById('lh-cms-questions');
|
|
if (!container) return;
|
|
|
|
var block = document.createElement('div');
|
|
block.className = 'lh-question-block';
|
|
if (existingQ && existingQ.id) block.dataset.questionId = existingQ.id;
|
|
|
|
var qNum = container.querySelectorAll('.lh-question-block').length + 1;
|
|
block.innerHTML =
|
|
'<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--g200);">' +
|
|
'<div style="display:flex;align-items:center;gap:8px;">' +
|
|
'<span style="background:linear-gradient(135deg,var(--blue),var(--purple));color:white;font-size:12px;font-weight:700;padding:3px 10px;border-radius:6px;">Q' + qNum + '</span>' +
|
|
'<select class="lh-q-type" style="font-size:12px;padding:4px 8px;border:1px solid var(--g300);border-radius:6px;">' +
|
|
'<option value="mcq"' + (existingQ && existingQ.question_type === 'mcq' ? ' selected' : '') + '>Single Choice</option>' +
|
|
'<option value="multi"' + (existingQ && existingQ.question_type === 'multi' ? ' selected' : '') + '>Multiple Select</option>' +
|
|
'<option value="true_false"' + (existingQ && existingQ.question_type === 'true_false' ? ' selected' : '') + '>True / False</option>' +
|
|
'</select>' +
|
|
'<button type="button" class="lh-richtext-btn" data-target="question">Rich Text</button>' +
|
|
'</div>' +
|
|
'<button class="btn-sm btn-ghost lh-rm-question" style="padding:2px 8px;font-size:12px;color:var(--red);"><i class="fas fa-trash"></i></button>' +
|
|
'</div>' +
|
|
'<textarea class="lh-q-text" placeholder="Enter question text..." rows="3" style="width:100%;font-size:14px;font-weight:500;padding:10px;border:1.5px solid var(--g300);border-radius:8px;box-sizing:border-box;margin-bottom:8px;resize:vertical;font-family:inherit;"></textarea>' +
|
|
'<div style="margin-bottom:8px;">' +
|
|
'<label style="font-size:11px;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:0.3px;display:block;margin-bottom:4px;">Answer Options <span style="color:var(--green);">(check the correct answer)</span></label>' +
|
|
'</div>' +
|
|
'<div class="lh-options-list"></div>' +
|
|
'<button class="btn-sm btn-ghost lh-add-option" style="margin-top:6px;font-size:12px;"><i class="fas fa-plus"></i> Add Option</button>' +
|
|
'<div style="margin-top:8px;">' +
|
|
'<label style="font-size:11px;font-weight:600;color:var(--g500);display:block;margin-bottom:3px;">Explanation (shown after answering)</label>' +
|
|
'<textarea class="lh-q-explanation" placeholder="Explain the correct answer..." rows="2" style="width:100%;font-size:12px;padding:6px 10px;border:1px solid var(--g300);border-radius:6px;box-sizing:border-box;resize:vertical;font-family:inherit;"></textarea>' +
|
|
'</div>';
|
|
|
|
container.appendChild(block);
|
|
|
|
// Set textarea values after insertion (can't use value="" attr on textarea)
|
|
block.querySelector('.lh-q-text').value = existingQ ? existingQ.question_text || '' : '';
|
|
block.querySelector('.lh-q-explanation').value = existingQ ? existingQ.explanation || '' : '';
|
|
|
|
var optList = block.querySelector('.lh-options-list');
|
|
if (existingQ && existingQ.options && existingQ.options.length > 0) {
|
|
existingQ.options.forEach(function(opt) { addOptionRow(optList, opt); });
|
|
} else if (existingQ && existingQ.question_type === 'true_false') {
|
|
addOptionRow(optList, { option_text: 'True', is_correct: false, explanation: '' });
|
|
addOptionRow(optList, { option_text: 'False', is_correct: false, explanation: '' });
|
|
} else {
|
|
// Add 4 blank MCQ options
|
|
for (var i = 0; i < 4; i++) addOptionRow(optList, null);
|
|
}
|
|
}
|
|
|
|
function addOptionRow(container, opt) {
|
|
if (!container) return;
|
|
var row = document.createElement('div');
|
|
row.className = 'lh-option-row';
|
|
row.innerHTML =
|
|
'<label style="display:flex;align-items:center;gap:4px;cursor:pointer;min-width:28px;padding-top:6px;" title="Mark as correct answer">' +
|
|
'<input type="checkbox" class="lh-opt-correct"' + (opt && opt.is_correct ? ' checked' : '') + ' style="accent-color:var(--green);width:16px;height:16px;">' +
|
|
'</label>' +
|
|
'<div style="flex:2;display:flex;flex-direction:column;gap:3px;">' +
|
|
'<input type="text" class="lh-opt-text" placeholder="Option text" style="width:100%;font-size:13px;padding:6px 10px;border:1.5px solid var(--g300);border-radius:6px;box-sizing:border-box;">' +
|
|
'<button type="button" class="lh-richtext-btn" data-target="option" style="align-self:flex-start;">Rich</button>' +
|
|
'</div>' +
|
|
'<input type="text" class="lh-opt-expl" placeholder="Explanation if wrong" value="' + esc(opt ? opt.explanation || '' : '') + '" style="flex:1;font-size:12px;padding:6px 10px;border:1px solid var(--g300);border-radius:6px;color:var(--g600);">' +
|
|
'<button class="btn-sm btn-ghost lh-rm-option" style="padding:2px 6px;font-size:12px;color:var(--g400);margin-top:4px;"><i class="fas fa-times"></i></button>';
|
|
container.appendChild(row);
|
|
// Set option text value after insertion (can't use value="" on nested input via innerHTML)
|
|
row.querySelector('.lh-opt-text').value = opt ? opt.option_text || '' : '';
|
|
}
|
|
|
|
// ── Helpers ──────────────────────────────────────────────────
|
|
function esc(str) {
|
|
if (!str) return '';
|
|
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
|
}
|
|
|
|
function sanitizeHtml(html) {
|
|
// Allowlist-based sanitizer: only safe tags and no event handlers
|
|
var ALLOWED_TAGS = ['p','br','b','strong','i','em','u','s','h1','h2','h3','h4','h5','h6',
|
|
'ul','ol','li','a','blockquote','code','pre','table','thead','tbody','tr','th','td',
|
|
'hr','div','span','sub','sup','dl','dt','dd'];
|
|
var ALLOWED_ATTRS = { 'a': ['href'], 'td': ['colspan','rowspan'], 'th': ['colspan','rowspan'], 'li': ['class'], 'ol': ['class'], 'ul': ['class'], 'span': ['class'], 'p': ['class'] };
|
|
|
|
var div = document.createElement('div');
|
|
div.innerHTML = html;
|
|
|
|
function clean(node) {
|
|
var children = Array.prototype.slice.call(node.childNodes);
|
|
for (var i = 0; i < children.length; i++) {
|
|
var child = children[i];
|
|
if (child.nodeType === 3) continue; // text nodes OK
|
|
if (child.nodeType !== 1) { child.remove(); continue; } // remove comments etc
|
|
|
|
var tag = child.tagName.toLowerCase();
|
|
if (ALLOWED_TAGS.indexOf(tag) === -1) {
|
|
// Replace with text content
|
|
var text = document.createTextNode(child.textContent);
|
|
node.replaceChild(text, child);
|
|
continue;
|
|
}
|
|
|
|
// Remove all attributes except explicitly allowed ones
|
|
var allowed = ALLOWED_ATTRS[tag] || [];
|
|
var attrs = Array.prototype.slice.call(child.attributes);
|
|
for (var j = 0; j < attrs.length; j++) {
|
|
if (allowed.indexOf(attrs[j].name) === -1) {
|
|
child.removeAttribute(attrs[j].name);
|
|
}
|
|
}
|
|
|
|
// For <a> tags, validate href is not javascript:
|
|
if (tag === 'a') {
|
|
var href = (child.getAttribute('href') || '').trim().toLowerCase();
|
|
if (href.indexOf('javascript:') === 0 || href.indexOf('data:') === 0 || href.indexOf('vbscript:') === 0) {
|
|
child.setAttribute('href', '#');
|
|
}
|
|
child.setAttribute('rel', 'noopener noreferrer');
|
|
child.setAttribute('target', '_blank');
|
|
}
|
|
|
|
clean(child);
|
|
}
|
|
}
|
|
|
|
clean(div);
|
|
return div.innerHTML;
|
|
}
|
|
|
|
})();
|