/* Lesson Completion Celebration: Tapered Confetti & Contextual Mobile Arrow */ (function() { const targetClass = '._btn_move_to_next'; let lastUrl = ""; let scormPatched = false; let hasTriggeredForThisLesson = false; let isRevisit = false; const isStandardBrowser = () => { const ua = navigator.userAgent; const isInAppSocial = /FBAN|FBAV|Instagram|Line|Twitter|Pinterest|Threads|Snapchat/i.test(ua); const isAndroidWebView = /wv|Version\/.*Chrome\//i.test(ua); const isIOS = /iPhone|iPad|iPod/.test(ua); const isSafari = /Safari/i.test(ua) && !/CriOS|FxiOS|OPiOS|mercury/i.test(ua); const isIOSWebView = isIOS && (!isSafari || (window.navigator.standalone === undefined)); return !isInAppSocial && !isAndroidWebView && !isIOSWebView; }; const isMobile = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); const runConfetti = () => { if (isRevisit || hasTriggeredForThisLesson || document.getElementById('celeb-canvas')) return Promise.resolve(); const canvas = document.createElement('canvas'); canvas.id = 'celeb-canvas'; canvas.style = "position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:999998; transition: opacity 0.5s ease;"; document.body.appendChild(canvas); const ctx = canvas.getContext('2d'); const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }; window.addEventListener('resize', resize); resize(); let isTapering = false; let particles = Array.from({ length: 120 }, () => ({ x: Math.random() * canvas.width, y: Math.random() * canvas.height - canvas.height, r: Math.random() * 6 + 4, d: Math.random() * 10, color: `hsl(${Math.random() * 360}, 70%, 50%)`, tilt: Math.random() * 10 - 10 })); const animate = () => { if (!document.body.contains(canvas)) return; ctx.clearRect(0, 0, canvas.width, canvas.height); particles = particles.filter(p => { ctx.beginPath(); ctx.lineWidth = p.r; ctx.strokeStyle = p.color; ctx.moveTo(p.x + p.tilt + p.r / 2, p.y); ctx.lineTo(p.x + p.tilt, p.y + p.tilt + p.r / 2); ctx.stroke(); p.y += (Math.cos(p.d) + 1 + p.r / 2) * 1.2; p.tilt = Math.sin(p.d) * 15; if (p.y > canvas.height) { if (isTapering) return false; p.y = -20; } return true; }); if (particles.length > 0) requestAnimationFrame(animate); }; animate(); return new Promise((resolve) => { setTimeout(() => { isTapering = true; setTimeout(() => { canvas.style.opacity = "0"; setTimeout(() => { canvas.remove(); window.removeEventListener('resize', resize); resolve(); }, 500); }, 2500); }, 4000); }); }; const showMobileArrow = () => { if (!isMobile() || !isRevisit || document.getElementById('celeb-arrow-container')) return; const arrowContainer = document.createElement('div'); arrowContainer.id = 'celeb-arrow-container'; arrowContainer.style = "position:fixed; bottom: 68px; left:0; width:100%; display:flex; justify-content:center; align-items:center; z-index:999997; pointer-events:none; opacity:0; transition: opacity 0.8s ease;"; arrowContainer.innerHTML = ` `; const style = document.createElement('style'); style.innerHTML = `@keyframes glide { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(15px); } }`; document.head.appendChild(style); document.body.appendChild(arrowContainer); requestAnimationFrame(() => { arrowContainer.style.opacity = "1"; }); setTimeout(() => { arrowContainer.style.opacity = "0"; setTimeout(() => { arrowContainer.remove(); style.remove(); }, 800); }, 6000); }; const showPopup = () => { if (isRevisit || hasTriggeredForThisLesson || document.getElementById('celeb-overlay')) return; const overlay = document.createElement('div'); overlay.id = 'celeb-overlay'; overlay.style = "position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index: 999999; display:flex; align-items:center; justify-content:center; font-family: sans-serif; padding: 20px;"; overlay.innerHTML = `

🎉

You're doing great!

Select the CONTINUE button below to move to the next activity.

`; document.body.appendChild(overlay); document.getElementById('close-celeb').onclick = () => overlay.remove(); }; const handleCompletion = () => { // STRICT BLOCK: If button was there on arrival, never run celebration if (isRevisit || hasTriggeredForThisLesson) return; hasTriggeredForThisLesson = true; runConfetti(); if (isStandardBrowser()) showPopup(); }; const patchSCORM = () => { if (scormPatched) return; const findAPI = (win) => { try { return win.API || win.API_1484_11 || (win.parent && win.parent !== win ? findAPI(win.parent) : null); } catch(e){ return null; } }; const api = findAPI(window); if (api) { const originalSetValue = api.LMSSetValue || api.SetValue; const setterName = api.LMSSetValue ? 'LMSSetValue' : 'SetValue'; api[setterName] = function(param, val) { const res = originalSetValue.apply(this, arguments); if (param.toLowerCase().includes('status') && (val === 'completed' || val === 'passed')) { handleCompletion(); } return res; }; scormPatched = true; } }; const startLogic = () => { const currentUrl = window.location.href; if (currentUrl !== lastUrl) { lastUrl = currentUrl; // Check button visibility immediately const btn = document.querySelector(targetClass); isRevisit = !!(btn && btn.offsetWidth > 0); // If it is a revisit, block triggers immediately hasTriggeredForThisLesson = isRevisit; if (isRevisit && !isStandardBrowser()) { showMobileArrow(); } if (window.activeObserver) window.activeObserver.disconnect(); patchSCORM(); window.activeObserver = new MutationObserver(() => { const btnUpdate = document.querySelector(targetClass); const isVisible = !!(btnUpdate && btnUpdate.offsetWidth > 0); if (isVisible && !hasTriggeredForThisLesson && !isRevisit) { handleCompletion(); } }); window.activeObserver.observe(document.body, { childList: true, subtree: true }); } }; setInterval(startLogic, 800); startLogic(); })();

Webhook Course Sample

Athos Admin

Course content