Compliance Training Platform
Select a module to begin your training.
Both the person who provides the 'tip' (the tipper) and the person who trades on it (the tippee) can be held liable. The consequences are severe, including fines and imprisonment.
`, quiz: [ { q: "What is 'material' information?", a: ["Any info about a company", "Information important to an investor's decision", "Publicly available info"], correct: 1 }, { q: "Which U.S. agency regulates insider trading?", a: ["FTC", "SEC", "CIA"], correct: 1 } ] } ]; function showTab(n) { tabs.forEach(tab => tab.classList.add('hidden')); tabButtons.forEach(btn => { btn.classList.remove('tab-active'); btn.classList.add('tab-inactive'); }); if (tabs[n]) { tabs[n].classList.remove('hidden'); tabButtons[n].classList.add('tab-active'); tabButtons[n].classList.remove('tab-inactive'); currentTab = n; } navButtonsContainer.style.display = (n > 0 && n < 3) ? 'flex' : 'none'; updateNavButtons(); }; function updateNavButtons() { prevBtn.style.visibility = currentTab <= 1 ? 'hidden' : 'visible'; nextBtn.style.visibility = currentTab >= 2 ? 'hidden' : 'visible'; } function navigateTabs(n) { const nextTabIndex = currentTab + n; if (nextTabIndex >= 0 && nextTabIndex < tabs.length && !tabButtons[nextTabIndex].classList.contains('tab-disabled')) { showTab(nextTabIndex); } } function enableTab(n) { const tabBtn = tabButtons[n]; tabBtn.classList.remove('tab-disabled'); tabBtn.onclick = () => showTab(n); } function resetTabs() { for (let i = 1; i < tabButtons.length; i++) { const tabBtn = tabButtons[i]; tabBtn.classList.add('tab-disabled', 'tab-inactive'); tabBtn.classList.remove('tab-active'); tabBtn.onclick = null; } showTab(0); } function renderModules() { const grid = document.getElementById('module-grid'); grid.innerHTML = ''; modules.forEach(module => { const card = document.createElement('div'); card.className = 'module-card p-6 bg-white border border-gray-200 rounded-lg cursor-pointer'; card.innerHTML = `${module.title}
${module.description}
`; card.onclick = () => selectModule(module.id); grid.appendChild(card); }); } function selectModule(id) { selectedModule = modules.find(m => m.id === id); if (selectedModule) { renderTraining(); renderQuiz(); enableTab(1); enableTab(2); showTab(1); } } function renderTraining() { document.getElementById('training-title').textContent = selectedModule.title; document.getElementById('training-content').innerHTML = selectedModule.content; } function renderQuiz() { const container = document.getElementById('quiz-container'); const resultsDiv = document.getElementById('quiz-results'); resultsDiv.classList.add('hidden'); resultsDiv.textContent = ''; container.innerHTML = ''; document.getElementById('quiz-title').textContent = `${selectedModule.title} - Quiz`; selectedModule.quiz.forEach((q, index) => { const questionDiv = document.createElement('div'); questionDiv.className = 'mb-6'; let optionsHTML = ''; q.a.forEach((option, i) => { optionsHTML += ` `; }); questionDiv.innerHTML = `${index + 1}. ${q.q}
${optionsHTML}
`;
container.appendChild(questionDiv);
});
}
function submitQuiz() {
let score = 0;
selectedModule.quiz.forEach((q, index) => {
const selected = document.querySelector(`input[name="question${index}"]:checked`);
if (selected && parseInt(selected.value) === q.correct) {
score++;
}
});
const total = selectedModule.quiz.length;
const percentage = score / total;
const resultsDiv = document.getElementById('quiz-results');
resultsDiv.classList.remove('hidden', 'bg-red-100', 'text-red-700', 'bg-green-100', 'text-green-700');
if (percentage >= passingScore) {
resultsDiv.textContent = `Congratulations! You passed with a score of ${score}/${total}. You may now proceed to get your certificate.`;
resultsDiv.classList.add('bg-green-100', 'text-green-700');
enableTab(3);
setTimeout(()=> showTab(3), 1000); // Auto-navigate
} else {
resultsDiv.textContent = `You scored ${score}/${total}. A score of ${Math.ceil(passingScore * 100)}% is required to pass. Please review the material and try again.`;
resultsDiv.classList.add('bg-red-100', 'text-red-700');
// Optionally disable next tab or reset quiz
}
}
function updateCertificate() {
const name = userNameInput.value.trim() || "Jane Doe";
document.getElementById('cert-name').textContent = name;
document.getElementById('cert-module').textContent = selectedModule ? selectedModule.title : "Module Title";
document.getElementById('cert-date').textContent = `on ${new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}`;
}
async function downloadPdf() {
const pdfLoader = document.getElementById('pdf-loader');
const downloadBtn = document.getElementById('downloadPdfBtn');
const certPreview = document.getElementById('certificate-preview');
if (!userNameInput.value.trim()) {
alert("Please enter your name before downloading the certificate.");
return;
}
pdfLoader.classList.remove('hidden');
downloadBtn.disabled = true;
try {
const canvas = await html2canvas(certPreview, { scale: 3 });
const imgData = canvas.toDataURL('image/png');
const { jsPDF } = window.jspdf;
// Use landscape orientation for certificate
const pdf = new jsPDF('l', 'pt', [canvas.width, canvas.height]);
pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
pdf.save('Compliance-Certificate.pdf');
} catch(error) {
console.error("PDF Generation Error:", error);
alert("There was an error generating the PDF.");
} finally {
pdfLoader.classList.add('hidden');
downloadBtn.disabled = false;
}
}
// Event Listeners
prevBtn.addEventListener('click', () => navigateTabs(-1));
nextBtn.addEventListener('click', () => navigateTabs(1));
document.getElementById('submit-quiz-btn').addEventListener('click', submitQuiz);
document.getElementById('downloadPdfBtn').addEventListener('click', downloadPdf);
userNameInput.addEventListener('input', updateCertificate);
tabButtons[0].onclick = resetTabs;
// Initial render
renderModules();
lucide.createIcons();
});