Ad Pages ROI Calculator

#roi-wizard { width: 100%; max-width: 400px; margin: auto; padding: 25px; box-sizing: border-box; font-family: sans-serif; } #nextBtn, #restartBtn, #contactBtn { padding: 10px 20px; border-radius: 25px; cursor: pointer; font-size: 1em; } #nextBtn { border: 1px solid #fc654b; background: #fc654b; color: white; } #nextBtn:hover { opacity: 0.9; } #restartBtn { border: 1px solid #fc654b; background: #fc654b; color: white; margin-right: 10px; } #restartBtn:hover { opacity: 0.9; } #contactBtn { border: 1px solid #fc654b; background: transparent; color: #fc654b; } #contactBtn:hover { background: #fc654b; color: white; } #result { margin-top: 30px; line-height: 1.7; text-align: center; } .question-label { font-weight: bold; font-size: 1.1em; line-height: 1.2em; margin-bottom: 6px; } .hint-text { color: #666; font-size: 0.9em; margin-top: 4px; display: flex; align-items: flex-start; gap: 6px; } .hint-text::before { content: "ℹ️"; display: inline-block; font-size: 1em; line-height: 1; } input[type="number"] { width: 100%; padding: 10px; margin: 10px 0; font-size: 1em; box-sizing: border-box; } table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.95em; } table td, table th { border: 1px solid #ddd; padding: 10px; text-align: left; } table th { background-color: #f7f7f7; font-weight: bold; } .button-group { margin-top: 20px; display: flex; justify-content: center; }

Next question

const steps = [ { id: 'adCost', label: 'What was the cost of your ad ($)?', type: 'number', hint: 'Example: 500' }, { id: 'couponCustomers', label: 'How many customers came in using a coupon?', type: 'number', hint: 'Count only those who brought in the magazine coupon. Example: 20' }, { id: 'avgSpend', label: 'What is the average spend per customer ($)?', type: 'number', hint: 'How much does a typical customer spend? Example: 75' }, { id: 'discount', label: 'What’s the average discount per customer (%)?', type: 'number', hint: 'Enter as a whole number. Example: 25 for 25% off' }, { id: 'newCustomerPct', label: 'What % of those were new customers?', type: 'number', hint: 'Estimate what portion were first-timers. Example: 60' }, { id: 'visitsPerMonth', label: 'How many times per month does the average customer visit?', type: 'number', hint: 'Regular customers might visit more than once. Example: 2' } ]; let currentStep = 0; let data = {}; const container = document.getElementById('step-container'); const result = document.getElementById('result'); const nextBtn = document.getElementById('nextBtn'); function showStep(stepIndex) { const step = steps[stepIndex]; container.innerHTML = ` ${step.label}

${step.hint}

`; document.getElementById('inputField').focus(); } nextBtn.onclick = function () { const inputVal = document.getElementById('inputField').value; if (!inputVal) return alert('Please enter a value to continue.'); data[steps[currentStep].id] = inputVal; currentStep++; if (currentStep < steps.length) { showStep(currentStep); } else { showResultsScreen(); document.getElementById('navigation').style.display = 'none'; container.innerHTML = ''; // Remove last question display } }; function showResultsScreen() { const B = parseFloat(data.couponCustomers); const C = parseFloat(data.avgSpend); const E = parseFloat(data.discount) / 100; const G = parseFloat(data.newCustomerPct) / 100; const H = parseFloat(data.visitsPerMonth); const adCost = parseFloat(data.adCost); const initialRevenue = B * C * (1 - E); const projectedRevenue = (B * G) * H * 6 * C; const totalROI = initialRevenue + projectedRevenue; result.innerHTML = `

The ROI of Your Ad Pages Ad!

	Amount
Monthly advertising investment	$${adCost.toFixed(2)}
Initial revenue	$${initialRevenue.toFixed(2)}
Projected revenue (6 months)	$${projectedRevenue.toFixed(2)}
Total ROI from Monthly Ad Investment	$${totalROI.toFixed(2)}

`; document.getElementById('restartBtn').onclick = function () { currentStep = 0; data = {}; result.innerHTML = ''; document.getElementById('navigation').style.display = 'block'; showStep(currentStep); }; } showStep(currentStep);