Overall Conversion
${results.overallConversionRate.toFixed(2)}%
`;
let tableHtml = `
| Payment Method |
Visitors |
Conversions |
Conversion Rate |
`;
results.details.forEach(p => {
const isWinner = p.name === results.winner.name;
tableHtml += `
| ${p.name} ${isWinner ? 'WINNER' : ''} |
${p.visitors.toLocaleString()} |
${p.conversions} |
${p.actualRate.toFixed(2)}% |
`;
});
tableHtml += `
`;
resultsContainer.innerHTML = tableHtml;
renderChart(results.details);
};
const renderChart = (data) => {
const ctx = document.getElementById('conversion-chart').getContext('2d');
if(conversionChart) conversionChart.destroy();
const labels = data.map(d => d.name);
const rates = data.map(d => d.actualRate);
conversionChart = new Chart(ctx, {
type: 'bar',
data: {
labels,
datasets: [{
label: 'Conversion Rate (%)',
data: rates,
backgroundColor: '#3B82F6'
}]
},
options: { responsive: true, plugins: { title: { display: true, text: 'Conversion Rate by Payment Method' }}}
});
};
// --- CORE LOGIC ---
const handleSimulation = () => {
runBtnSpinner.classList.remove('hidden');
runBtnText.textContent = 'Running...';
runBtn.disabled = true;
setTimeout(() => {
const totalVisitors = parseInt(document.getElementById('total-visitors').value);
if(paymentMethods.length === 0) return;
const visitorsPerMethod = Math.floor(totalVisitors / paymentMethods.length);
let totalConversions = 0;
const details = paymentMethods.map(p => {
// Add a slight random variance to the conversion rate for simulation
const randomFactor = 1 + (Math.random() - 0.5) * 0.1; // +/- 5% variance
const simulatedRate = p.conversionRate * randomFactor;
const conversions = Math.round(visitorsPerMethod * (simulatedRate / 100));
totalConversions += conversions;
return {
name: p.name,
visitors: visitorsPerMethod,
conversions,
actualRate: (conversions / visitorsPerMethod) * 100
};
}).sort((a,b) => b.actualRate - a.actualRate);
const results = {
details,
winner: details[0],
totalConversions,
overallConversionRate: (totalConversions / (visitorsPerMethod * paymentMethods.length)) * 100
};
renderDashboard(results);
switchTab('dashboard');
downloadPdfBtn.disabled = false;
runBtnSpinner.classList.add('hidden');
runBtnText.textContent = 'Run Simulation';
runBtn.disabled = false;
}, 500);
};
// --- UI & EVENT HANDLERS ---
const switchTab = (tabId) => {
currentTab = tabId;
Object.values(tabPanes).forEach(pane => pane.classList.add('hidden'));
tabPanes[tabId].classList.remove('hidden');
Object.values(tabButtons).forEach(btn => btn.classList.replace('tab-active', 'tab-inactive'));
tabButtons[tabId].classList.replace('tab-inactive', 'tab-active');
updateNavButtons();
};
const navigateTabs = (direction) => {
const currentIndex = tabs.indexOf(currentTab);
const newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
if (newIndex >= 0 && newIndex < tabs.length) switchTab(tabs[newIndex]);
};
const updateNavButtons = () => {
const currentIndex = tabs.indexOf(currentTab);
prevBtn.disabled = currentIndex === 0;
nextBtn.disabled = currentIndex === tabs.length - 1;
prevBtn.classList.toggle('opacity-50', prevBtn.disabled);
nextBtn.classList.toggle('opacity-50', nextBtn.disabled);
};
const handlePdfDownload = () => {
const pdfRenderContainer = document.getElementById('pdf-render-content');
const pdfContent = document.getElementById('pdf-content').innerHTML;
const header = `
A/B Test Results
`;
pdfRenderContainer.innerHTML = header + pdfContent + '';
// Remove badge for cleaner PDF
const winnerBadge = pdfRenderContainer.querySelector('.text-xs');
if(winnerBadge) winnerBadge.remove();
html2canvas(pdfRenderContainer, { scale: 2 }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'landscape', unit: 'pt', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth(), margin = 40;
const contentWidth = pdfWidth - margin * 2;
const pdfHeight = (canvas.height * contentWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', margin, margin, contentWidth, pdfHeight);
pdf.save('Payment-AB-Test-Report.pdf');
});
};
// --- EVENT LISTENERS ---
window.switchTab = switchTab;
window.navigateTabs = navigateTabs;
runBtn.addEventListener('click', handleSimulation);
downloadPdfBtn.addEventListener('click', handlePdfDownload);
addMethodBtn.addEventListener('click', () => { paymentMethods.push({ id: nextId++, name: 'New Method', conversionRate: 0 }); renderConfigTable(); });
configTableBody.addEventListener('input', e => {
if (!e.target.classList.contains('cfg-input')) return;
const id = parseInt(e.target.closest('tr').dataset.id);
const prop = e.target.dataset.prop;
const item = paymentMethods.find(p => p.id === id);
if (item) item[prop] = e.target.type === 'number' ? parseFloat(e.target.value) : e.target.value;
});
configTableBody.addEventListener('click', e => {
if (!e.target.classList.contains('rm-btn')) return;
const id = parseInt(e.target.closest('tr').dataset.id);
paymentMethods = paymentMethods.filter(p => p.id !== id);
renderConfigTable();
});
// --- INITIALIZATION ---
renderConfigTable();
updateNavButtons();
switchTab('dashboard');
});
