MPGe - 'Lectric Love

<!DOCTYPE html>

<head>

<title>EV Efficiency Explained</title>

<style>

@import url(‘https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=Kalam:wght@300;400;700&display=swap’);

– { margin: 0; padding: 0; box-sizing: border-box; }

:root {

–ink: #1a1a2e;

–blue: #2563eb;

–green: #16a34a;

–red: #dc2626;

–orange: #ea580c;

–yellow: #ca8a04;

–board: #fdfcf7;

–line: #e8e4d4;

}

body {

background: #e8e0cc;

font-family: ‘Kalam’, cursive;

min-height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

padding: 20px;

}

.page-title {

font-family: ‘Caveat’, cursive;

font-size: clamp(1.4rem, 4vw, 2.2rem);

color: #3d2b1a;

margin-bottom: 16px;

text-align: center;

letter-spacing: 1px;

}

/* Progress Nav */

.nav {

display: flex;

gap: 8px;

margin-bottom: 20px;

flex-wrap: wrap;

justify-content: center;

}

.nav-dot {

width: 12px; height: 12px;

border-radius: 50%;

background: #bbb;

border: 2px solid #999;

cursor: pointer;

transition: all 0.3s;

}

.nav-dot.active { background: var(–blue); border-color: var(–blue); transform: scale(1.4); }

.nav-dot.done { background: var(–green); border-color: var(–green); }

/* Whiteboard */

.board-wrap {

background: var(–board);

border-radius: 4px;

box-shadow: 0 4px 0 #b8a98a, 0 8px 24px rgba(0,0,0,0.25), inset 0 0 60px rgba(0,0,0,0.03);

width: 100%;

max-width: 860px;

min-height: 420px;

position: relative;

overflow: hidden;

border: 3px solid #c8b896;

}

/* Grid lines */

.board-wrap::before {

content:’’;

position: absolute; inset: 0;

background-image:

linear-gradient(var(–line) 1px, transparent 1px),

linear-gradient(90deg, var(–line) 1px, transparent 1px);

background-size: 40px 40px;

opacity: 0.5;

pointer-events: none;

}

/* Slides */

.slide {

position: absolute; inset: 0;

padding: 32px 40px;

opacity: 0;

pointer-events: none;

transition: opacity 0.4s;

}

.slide.active {

opacity: 1;

pointer-events: all;

}

/* Handwritten title on each slide */

.slide-title {

font-family: ‘Caveat’, cursive;

font-size: clamp(1.5rem, 4vw, 2.4rem);

color: var(–ink);

margin-bottom: 18px;

position: relative;

}

.slide-title::after {

content:’’;

display: block;

height: 3px;

background: var(–ink);

border-radius: 2px;

width: 0;

margin-top: 4px;

animation: none;

}

.slide.active .slide-title::after {

animation: underline-draw 0.6s 0.3s forwards;

}

@keyframes underline-draw {

to { width: 100%; }

}

/* Draw-in animations */

.draw { opacity: 0; transform: translateY(12px); }

.slide.active .draw { animation: draw-in 0.5s forwards; }

.draw:nth-child(1) { animation-delay: 0.4s; }

.draw:nth-child(2) { animation-delay: 0.7s; }

.draw:nth-child(3) { animation-delay: 1.0s; }

.draw:nth-child(4) { animation-delay: 1.3s; }

.draw:nth-child(5) { animation-delay: 1.6s; }

.draw:nth-child(6) { animation-delay: 1.9s; }

.draw:nth-child(7) { animation-delay: 2.2s; }

@keyframes draw-in {

to { opacity: 1; transform: translateY(0); }

}

/* Formula boxes */

.formula {

background: rgba(37,99,235,0.08);

border: 2px dashed var(–blue);

border-radius: 8px;

padding: 10px 18px;

display: inline-block;

font-size: clamp(1rem, 2.5vw, 1.3rem);

color: var(–blue);

font-family: ‘Caveat’, cursive;

font-weight: 700;

}

.formula.green { background: rgba(22,163,74,0.08); border-color: var(–green); color: var(–green); }

.formula.orange { background: rgba(234,88,12,0.08); border-color: var(–orange); color: var(–orange); }

.formula.red { background: rgba(220,38,38,0.08); border-color: var(–red); color: var(–red); }

/* Callout / sticky-note style */

.callout {

background: #fff9c4;

border-left: 4px solid var(–yellow);

border-radius: 4px;

padding: 8px 14px;

font-size: clamp(0.85rem, 2vw, 1rem);

color: #5a4000;

margin-top: 8px;

}

/* Two-column layout */

.cols {

display: flex;

gap: 20px;

flex-wrap: wrap;

align-items: flex-start;

}

.col { flex: 1 1 220px; }

/* Comparison bars */

.bar-row { margin: 8px 0; }

.bar-label { font-size: clamp(0.8rem, 1.8vw, 0.95rem); color: var(–ink); margin-bottom: 3px; }

.bar-track {

background: #e5e0d0;

border-radius: 20px;

height: 22px;

overflow: hidden;

position: relative;

}

.bar-fill {

height: 100%;

border-radius: 20px;

display: flex;

align-items: center;

padding-left: 10px;

font-size: 0.75rem;

font-weight: 700;

color: #fff;

width: 0;

transition: width 1.4s cubic-bezier(.2,.8,.3,1);

}

.slide.active .bar-fill { width: var(–w); }

/* Coin/dollar animation */

@keyframes coin-pop {

0% { transform: scale(0) rotate(-20deg); opacity: 0; }

70% { transform: scale(1.15) rotate(5deg); }

100% { transform: scale(1) rotate(0); opacity: 1; }

}

.coin {

display: inline-block;

animation: none;

opacity: 0;

}

.slide.active .coin { animation: coin-pop 0.5s forwards; }

/* Spec table */

table.spec {

border-collapse: collapse;

width: 100%;

font-size: clamp(0.78rem, 1.8vw, 0.95rem);

}

table.spec th {

background: var(–ink);

color: #fff;

padding: 6px 10px;

font-family: ‘Caveat’, cursive;

font-size: clamp(0.9rem, 2vw, 1.1rem);

text-align: left;

}

table.spec td {

padding: 5px 10px;

border-bottom: 1px dashed #ccc;

}

table.spec tr:nth-child(even) td { background: rgba(0,0,0,0.03); }

table.spec .good { color: var(–green); font-weight: 700; }

table.spec .bad { color: var(–red); font-weight: 700; }

/* SVG car sketch */

.car-svg { display: block; }

/* Arrow pointer */

.pointer {

font-size: 1.4rem;

display: inline-block;

animation: bounce-x 0.8s infinite alternate;

}

@keyframes bounce-x {

from { transform: translateX(0); }

to { transform: translateX(6px); }

}

/* Controls */

.controls {

display: flex;

align-items: center;

gap: 14px;

margin-top: 18px;

flex-wrap: wrap;

justify-content: center;

}

.btn {

font-family: ‘Caveat’, cursive;

font-size: 1.1rem;

padding: 10px 28px;

border-radius: 6px;

border: 2.5px solid var(–ink);

background: var(–ink);

color: #fff;

cursor: pointer;

transition: transform 0.15s, box-shadow 0.15s;

box-shadow: 3px 3px 0 #999;

letter-spacing: 0.5px;

}

.btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #888; }

.btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #888; }

.btn.outline {

background: transparent;

color: var(–ink);

}

.slide-counter {

font-family: ‘Caveat’, cursive;

font-size: 1.1rem;

color: #666;

min-width: 60px;

text-align: center;

}

p { font-size: clamp(0.88rem, 2vw, 1.05rem); line-height: 1.6; margin-bottom: 8px; }

.big { font-size: clamp(1.1rem, 2.8vw, 1.4rem); }

.accent { color: var(–blue); font-weight: 700; }

.g { color: var(–green); font-weight: 700; }

.r { color: var(–red); font-weight: 700; }

.o { color: var(–orange); font-weight: 700; }

ul { padding-left: 20px; margin: 6px 0; }

li { font-size: clamp(0.85rem, 1.9vw, 1rem); line-height: 1.7; }

/* Number counter animation */

.count-up {

font-family: ‘Caveat’, cursive;

font-size: clamp(1.6rem, 4vw, 2.4rem);

font-weight: 700;

}

/* Wiggle */

@keyframes wiggle {

0%,100% { transform: rotate(-2deg); }

50% { transform: rotate(2deg); }

}

.wiggle { animation: wiggle 1.5s infinite; display: inline-block; }

@media (max-width: 480px) {

.board-wrap { min-height: 520px; }

.slide { padding: 20px 18px; }

}

</style>

</head>

<body>

<div class=”page-title”>⚡ EV Efficiency Explained — Interactive Whiteboard</div>

<!– SLIDE 1: Intro –>

<div class=”slide-title”>What Does “Efficiency” Mean for EVs? 🤔</div>

<p class=”big”>Gas cars use <span class=”r”>MPG</span> — miles per gallon.<br>

But EVs don’t burn gas… so how do we compare them?</p>

</div>

<p>Two key metrics to know:</p>

</div>

<div class=”formula”>⚡ MPGe — Miles Per Gallon Equivalent</div>

<div class=”formula green”>🔋 Mi/kWh — Miles per kilowatt-hour</div>

</div>

💡 Both measure how far you travel per unit of energy — they just use different units.

</div>

<p>By the end of this tutorial you’ll understand both — and what they actually cost you.</p>

</div>

<!– SLIDE 2: MPGe Explained –>

<div class=”slide-title”>MPGe — What It Is & Where It Comes From</div>

<p>The EPA invented <span class=”accent”>MPGe</span> so you can compare EVs and gas cars on the same label.</p>

</div>

<div class=”formula” style=”margin-top:6px;”>1 gallon of gasoline = 33.7 kWh of energy</div>

</div>

<p>So MPGe asks: <em>”If the car used 33.7 kWh of electricity, how far did it go?”</em></p>

</div>

<div class=”formula”>MPGe = (miles traveled ÷ kWh used) × 33.7</div>

</div>

<p><strong>Example — Tesla Model 3:</strong></p>

<ul>

</ul>

</div>

🏷️ You’ll see MPGe on the EPA sticker on every new EV or plug-in hybrid sold in the US.

</div>

<!– SLIDE 3: mi/kWh Explained –>

<div class=”slide-title”>Mi/kWh — The “Real” Efficiency Number</div>

<p><span class=”g”>Miles per kWh</span> is what EV owners actually track day-to-day.</p>

</div>

<p>A <strong>kilowatt-hour (kWh)</strong> is a unit of electrical energy — the same thing on your home electricity bill.</p>

</div>

<div class=”formula green”>Mi/kWh = Miles Traveled ÷ kWh consumed</div>

</div>

<p>Quick reference for typical EVs:</p>

</div>

<div class=”bar-label”>Tesla Model 3 Long Range — <strong>4.1 mi/kWh</strong> 🏆 Excellent</div>

</div>

<div class=”bar-label”>Chevy Bolt EV — <strong>3.5 mi/kWh</strong> ✅ Good</div>

</div>

<div class=”bar-label”>Ford F-150 Lightning — <strong>2.0 mi/kWh</strong> ⚠️ Lower</div>

</div>

<div class=”bar-label”>Rivian R1T (large truck) — <strong>1.7 mi/kWh</strong> 🔴 Poor</div>

</div>

<!– SLIDE 4: MPGe vs Mi/kWh –>

<tr>

<th>Feature</th>

</tr>

<tr>

<td>Purpose</td>

<td>Compare EVs to gas cars</td>

<td>Day-to-day EV driving</td>

</tr>

<tr>

<td>EPA labels, car ads</td>

<td>EV owners, dashboards</td>

</tr>

<tr>

<td>Higher = better?</td>

<td class=”good”>Yes ↑ = more efficient</td>

</tr>

<tr>

<td>Easy to convert?</td>

</tr>

<tr>

<td>Typical EV range</td>

</tr>

<tr>

<td>Gasoline car baseline</td>

</tr>

</table>

</div>

📌 A car with <strong>100 MPGe</strong> is roughly <strong>3× more efficient</strong> than a 33 MPG gasoline car.

</div>

<!– SLIDE 5: Real-World Cost Calculator –>

<div class=”slide-title”>Real-World Cost — How to Calculate 💰</div>

<p>The formula is simple:</p>

<div class=”formula orange” style=”margin-top:6px;”>Cost per mile = Electricity rate ($/kWh) ÷ Efficiency (mi/kWh)</div>

</div>

<p><strong>US average electricity rate:</strong> ~$0.17/kWh  |  <strong>Range:</strong> $0.10 – $0.35/kWh</p>

</div>

<p><span class=”wiggle”>🧮</span> <strong>Tesla Model 3 (4.1 mi/kWh):</strong></p>

</div>

</div>

💸 The EV costs <strong>~65% less per mile</strong> to fuel. On 12,000 miles/year that’s ~$912 saved annually!

</div>

<p>⚠️ <strong>DC Fast Charging (public):</strong> rates can hit $0.40–$0.60/kWh — 3× home rates. Always factor in where you charge!</p>

</div>

<!– SLIDE 6: Interactive Cost Estimator –>

<div class=”slide-title”>🧮 Try It — Your Cost Estimator</div>

<label style=”display:block; font-size:0.95rem; margin-bottom:4px;”>Your electricity rate ($/kWh)</label>

<input id=”rate” type=”range” min=”0.08″ max=”0.40″ step=”0.01″ value=”0.17″

style=”width:100%;” oninput=”calcCost()”>

</div>

<label style=”display:block; font-size:0.95rem; margin-bottom:4px;”>EV efficiency (mi/kWh)</label>

<input id=”eff” type=”range” min=”1.5″ max=”5.0″ step=”0.1″ value=”3.5″

style=”width:100%;” oninput=”calcCost()”>

</div>

<label style=”display:block; font-size:0.95rem; margin-bottom:4px;”>Annual miles driven</label>

<input id=”miles” type=”range” min=”5000″ max=”30000″ step=”1000″ value=”12000″

style=”width:100%;” oninput=”calcCost()”>

<div id=”miles-val” style=”font-family:’Caveat’,cursive; font-size:1.2rem; color:var(–orange);”>12,000 miles</div>

</div>

</div>

<!– SLIDE 7: Key Takeaways –>

<div class=”slide-title”>Key Takeaways ✏️</div>

<p>1. <span class=”accent”>MPGe</span> lets you compare EVs to gas cars — defined by 1 gal = 33.7 kWh.</p>

</div>

<p>2. <span class=”g”>Mi/kWh</span> is the practical EV number — directly tied to your electricity bill.</p>

</div>

<p>3. Convert easily: <span class=”formula” style=”font-size:0.9rem; padding:4px 10px;”>MPGe ÷ 33.7 = mi/kWh</span></p>

</div>

<p>4. <span class=”o”>Real cost</span> = electricity rate ÷ efficiency. Home charging ≈ 3–5¢/mile.</p>

</div>

<p>5. <strong>Bigger vehicles use more energy</strong> — trucks and SUVs have lower mi/kWh even as EVs.</p>

</div>

<p>6. <strong>Public fast charging</strong> can be 3–4× pricier than home — impacts total cost of ownership.</p>

</div>

🎓 Rule of thumb: An EV with <strong>100+ MPGe</strong> (≈3.0+ mi/kWh) charging at home will almost always cost less per mile than a gasoline car at typical fuel prices.

</div>

</div><!– end board –>

</div>

const totalSlides = 7;

let current = 0;

// Build nav dots

const nav = document.getElementById(‘nav’);

const labels = [‘Intro’,’MPGe’,’Mi/kWh’,’Comparison’,’Costs’,’Calculator’,’Summary’];

for (let i = 0; i < totalSlides; i++) {

const d = document.createElement(‘div’);

d.className = ‘nav-dot’ + (i===0?’ active’:”);

d.title = labels[i];

d.onclick = () => goTo(i);

nav.appendChild(d);

}

function goTo(n) {

document.getElementById(‘slide-‘+current).classList.remove(‘active’);

nav.children[current].className = ‘nav-dot done’;

current = Math.max(0, Math.min(totalSlides-1, n));

document.getElementById(‘slide-‘+current).classList.add(‘active’);

nav.children[current].className = ‘nav-dot active’;

document.getElementById(‘counter’).textContent = (current+1) + ‘ / ‘ + totalSlides;

if (current === 5) calcCost();

}

function changeSlide(dir) { goTo(current + dir); }

// Keyboard nav

document.addEventListener(‘keydown’, e => {

if (e.key===’ArrowRight’||e.key===’ ‘) changeSlide(1);

if (e.key===’ArrowLeft’) changeSlide(-1);

});

// Cost Calculator

function calcCost() {

const rate = parseFloat(document.getElementById(‘rate’).value);

const eff = parseFloat(document.getElementById(‘eff’).value);

const miles = parseInt(document.getElementById(‘miles’).value);

document.getElementById(‘rate-val’).textContent = ‘$’ + rate.toFixed(2) + ‘ /kWh’;

document.getElementById(‘eff-val’).textContent = eff.toFixed(1) + ‘ mi/kWh’;

document.getElementById(‘miles-val’).textContent = miles.toLocaleString() + ‘ miles’;

const costPerMile = rate / eff;

const annualCostEV = costPerMile * miles;

const mpge = (eff * 33.7).toFixed(0);

// Gas comparison (assume 30 MPG @ $3.50)

const gasPerMile = 3.50 / 30;

const annualGas = gasPerMile * miles;

const savings = annualGas – annualCostEV;

const r = document.getElementById(‘cost-result’);

r.innerHTML = `

<div style=”font-size:1.8rem;”>$${costPerMile.toFixed(3)}</div>

</div>

<div style=”font-size:0.8rem; font-weight:400;”>Annual fuel cost (EV)</div>

<div style=”font-size:1.8rem;”>$${annualCostEV.toFixed(0)}</div>

</div>

<div style=”font-size:0.8rem; font-weight:400;”>Annual savings vs 30MPG gas</div>

<div style=”font-size:1.8rem; color:${savings>0?’var(–green)’:’var(–red)’};”>${savings>0?’+’:”} $${savings.toFixed(0)}</div>

</div>

</div>

}

// Init calculator

calcCost();

</script>

</body>

</html>

Related Posts

test

The EV Buyer’s checklist

‘Lectric Love