Salt Shaker Press

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pressure Points: A Slideshow on School Leadership</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #e2e8f0; /* slate-200 */
}
.swiper-container {
width: 100%;
height: 100vh;
}
.swiper-slide {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-color: #f1f1f1;
padding: 2rem;
}
.slide-content {
max-width: 900px;
width: 100%;
}
.swiper-button-next, .swiper-button-prev {
color: #003f5c;
--swiper-navigation-size: 30px;
}
.swiper-pagination-bullet-active {
background: #003f5c;
}
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin: 1rem auto 0 auto;
height: 350px;
}
@media (min-width: 768px) {
.chart-container {
height: 400px;
}
}
.slide-title {
font-size: 2rem;
font-weight: 800;
color: #003f5c;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.slide-title {
font-size: 2.5rem;
}
}
.slide-subtitle {
font-size: 1.125rem;
color: #4a5568;
max-width: 48rem;
margin: 0 auto 1.5rem auto;
}
.kpi-value {
font-size: 3.75rem;
font-weight: 800;
color: #ff6361;
}
.kpi-label {
font-size: 1rem;
font-weight: 500;
color: #4a5568;
margin-top: 0.5rem;
}
.card {
background-color: white;
border-radius: 0.75rem;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
padding: 1.5rem;
text-align: left;
}
</style>
</head>
<body>


<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide bg-white">
<div class="slide-content">
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight text-[#003f5c]">Pressure Points</h1>
<p class="mt-6 text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto">An analysis of the systemic challenges and immense pressures confronting leaders in America's most underperforming school systems.</p>
</div>
</div>

<div class="swiper-slide">
<div class="slide-content">
<h2 class="slide-title">The National Crisis in Numbers</h2>
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="text-center p-6 bg-white rounded-lg shadow-lg">
<p class="kpi-value">52%</p>
<p class="kpi-label">of K-12 teachers report feeling burnout "always" or "very often," the highest of any U.S. industry.</p>
</div>
<div class="text-center p-6 bg-white rounded-lg shadow-lg">
<p class="kpi-value">70%</p>
<p class="kpi-label">higher teacher turnover in schools serving the largest concentrations of students of color.</p>
</div>
</div>
</div>
</div>

<div class="swiper-slide">
<div class="slide-content grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div class="text-left">
<h2 class="slide-title">Anatomy of a "Failing" Label</h2>
<p class="slide-subtitle text-left mx-0">The term "failing school" is a policy-driven label with profound consequences, often reflecting student demographics more than school effectiveness.</p>
<div class="card mt-4">
<h3 class="text-xl font-bold text-[#003f5c] mb-4">The Policy Pipeline of Failure</h3>
<div class="space-y-4">
<div class="flex items-center"><div class="bg-[#4d8fac] text-white rounded-full h-8 w-8 flex items-center justify-center font-bold">1</div><p class="ml-4 font-semibold text-[#003f5c]">Federal Mandate (ESSA)</p></div>
<div class="flex items-center"><div class="bg-[#4d8fac] text-white rounded-full h-8 w-8 flex items-center justify-center font-bold">2</div><p class="ml-4 font-semibold text-[#003f5c]">State Accountability Systems</p></div>
<div class="flex items-center"><div class="bg-[#ff6361] text-white rounded-full h-8 w-8 flex items-center justify-center font-bold">3</div><p class="ml-4 font-semibold text-[#003f5c]">School Designation (CSI/TSI)</p></div>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-bold text-[#003f5c] mb-2">The Overwhelming Correlation</h3>
<p class="text-gray-600 mb-4 text-sm">Accountability systems relying on proficiency rates are heavily skewed by poverty.</p>
<div class="chart-container h-[450px]">
<canvas id="povertyCorrelationChart"></canvas>
</div>
</div>
</div>
</div>

<div class="swiper-slide">
<div class="slide-content">
<h2 class="slide-title">The Superintendent's Crucible</h2>
<p class="slide-subtitle">District leaders are caught between conflicting demands from state agencies, local politics, and the public, all while managing chronically scarce resources.</p>
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="card">
<h4 class="font-bold text-lg text-[#003f5c] mb-2">Pressure Matrix</h4>
<p class="text-gray-600 text-sm mb-4">Superintendents balance competing pressures, making long-term planning difficult.</p>
<div class="chart-container h-64 md:h-80">
<canvas id="superintendentPressureChart"></canvas>
</div>
</div>
<div class="card flex flex-col justify-center">
<h4 class="font-bold text-lg text-[#003f5c] mb-2">The 'Tight-Loose' Paradox</h4>
<p class="text-gray-600 text-sm mb-4">Effective leadership requires balancing 'tight' goals with 'loose' autonomy.</p>
<div class="flex-grow space-y-4 flex flex-col justify-center">
<div class="border-2 border-[#4d8fac] rounded-lg p-3 text-center"><p class="font-bold text-[#003f5c]">TIGHT</p><p class="text-sm text-gray-700">Non-Negotiable Vision & Goals</p></div>
<div class="text-center text-2xl font-bold text-gray-400">⇩</div>
<div class="border-2 border-dashed border-[#ff6361] rounded-lg p-3 text-center"><p class="font-bold text-[#ff6361]">LOOSE</p><p class="text-sm text-gray-700">Autonomy on Staffing & Budget</p></div>
</div>
</div>
</div>
</div>
</div>

<div class="swiper-slide">
<div class="slide-content">
<h2 class="slide-title">The Principal's Front Line</h2>
<p class="slide-subtitle">Principals in underperforming schools are consumed by immediate crises, diverting energy from the strategic work of instructional improvement.</p>
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="card">
<h4 class="font-bold text-lg text-[#003f5c] mb-2">The Capacity Trap</h4>
<p class="text-gray-600 text-sm mb-4">Urgent crises consume time needed for long-term capacity building.</p>
<div class="chart-container h-64 md:h-80">
<canvas id="principalTimeChart"></canvas>
</div>
</div>
<div class="card">
<h4 class="font-bold text-lg text-[#003f5c] mb-2">The Human Capital Crisis</h4>
<p class="text-gray-600 text-sm mb-4">High teacher turnover prevents stability and expertise building.</p>
<div class="chart-container h-64 md:h-80">
<canvas id="teacherTurnoverChart"></canvas>
</div>
</div>
</div>
</div>
</div>

<div class="swiper-slide">
<div class="slide-content">
<h2 class="slide-title">The Perceptual Divide</h2>
<p class="slide-subtitle">A critical barrier to progress is the fundamental disagreement between superintendents and principals on the root causes of failure.</p>
<div class="mt-4 card w-full">
<h3 class="text-xl font-bold text-[#003f5c] mb-2 text-center">Why Do Leaders Fail? Two Competing Views</h3>
<div class="chart-container h-[450px]">
<canvas id="perceptionGapChart"></canvas>
</div>
</div>
</div>
</div>

<div class="swiper-slide">
<div class="slide-content">
<h2 class="slide-title">Pathways Forward</h2>
<p class="slide-subtitle">Supporting embattled leaders requires fixing the broken systems in which they operate.</p>
<div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-8 text-left">
<div class="card border-t-4 border-[#003f5c]">
<h3 class="text-xl font-bold text-[#003f5c] mb-4">Policymakers</h3>
<ul class="space-y-3 text-gray-700 text-sm">
<li class="flex"><span class="text-[#003f5c] mr-2 font-bold">●</span>Focus on growth, not just proficiency.</li>
<li class="flex"><span class="text-[#003f5c] mr-2 font-bold">●</span>Provide stable, equitable funding.</li>
<li class="flex"><span class="text-[#003f5c] mr-2 font-bold">●</span>Invest in high-retention pipelines.</li>
</ul>
</div>
<div class="card border-t-4 border-[#4d8fac]">
<h3 class="text-xl font-bold text-[#4d8fac] mb-4">District Leaders</h3>
<ul class="space-y-3 text-gray-700 text-sm">
<li class="flex"><span class="text-[#4d8fac] mr-2 font-bold">●</span>Lead with a coherent, focused vision.</li>
<li class="flex"><span class="text-[#4d8fac] mr-2 font-bold">●</span>Grant principals meaningful autonomy.</li>
<li class="flex"><span class="text-[#4d8fac] mr-2 font-bold">●</span>Become an aggressive talent-seeker.</li>
</ul>
</div>
<div class="card border-t-4 border-[#ff6361]">
<h3 class="text-xl font-bold text-[#ff6361] mb-4">School Leaders</h3>
<ul class="space-y-3 text-gray-700 text-sm">
<li class="flex"><span class="text-[#ff6361] mr-2 font-bold">●</span>Signal a break from past cultures.</li>
<li class="flex"><span class="text-[#ff6361] mr-2 font-bold">●</span>Prioritize a safe, positive climate.</li>
<li class="flex"><span class="text-[#ff6361] mr-2 font-bold">●</span>Maintain focus on instruction.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide bg-[#003f5c] text-white">
<div class="slide-content">
<h1 class="text-4xl font-bold">Thank You</h1>
<p class="mt-4 text-lg text-slate-300">Infographic based on the "Pressure Points" analysis of school leadership challenges.</p>
</div>
</div>

</div>

<div class="swiper-pagination"></div>


<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

<script>
// Initialize Swiper
const swiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: false,

// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},

// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

// Keyboard navigation
keyboard: {
enabled: true,
onlyInViewport: false,
},
});

// Chart.js implementation
const vibrantPalette = {
darkBlue: '#003f5c',
tealBlue: '#4d8fac',
coral: '#ff6361',
gold: '#ffa600',
darkText: '#333333'
};

const defaultChartOptions = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom', labels: { color: vibrantPalette.darkText, font: { family: "'Inter', sans-serif" } } },
tooltip: { backgroundColor: 'rgba(0, 63, 92, 0.9)', titleFont: { size: 14 }, bodyFont: { size: 12 } }
},
scales: {
x: { ticks: { color: vibrantPalette.darkText, font: { family: "'Inter', sans-serif" } }, grid: { display: false } },
y: { ticks: { color: vibrantPalette.darkText, font: { family: "'Inter', sans-serif" } }, grid: { color: '#e0e0e0' } }
}
};

function wrapLabel(str, maxLength = 16) {
if (str.length <= maxLength) return str;
const words = str.split(' ');
let lines = [];
let currentLine = '';
for (const word of words) {
if ((currentLine + word).length > maxLength && currentLine.length > 0) {
lines.push(currentLine.trim());
currentLine = '';
}
currentLine += word + ' ';
}
lines.push(currentLine.trim());
return lines;
}

// --- Chart Initialization ---
// We delay chart creation until the DOM is fully loaded to ensure canvas elements are available.
document.addEventListener('DOMContentLoaded', () => {

new Chart(document.getElementById('povertyCorrelationChart'), {
type: 'bar',
data: {
labels: ['Lowest Poverty', 'Quartile 2', 'Quartile 3', 'Highest Poverty'].map(l => wrapLabel(l, 10)),
datasets: [{
label: '% Schools as CSI',
data: [1, 5, 22, 72],
backgroundColor: [vibrantPalette.tealBlue, vibrantPalette.tealBlue, vibrantPalette.gold, vibrantPalette.coral],
}]
},
options: { ...defaultChartOptions, plugins: { ...defaultChartOptions.plugins, legend: {display: false} } }
});

new Chart(document.getElementById('superintendentPressureChart'), {
type: 'radar',
data: {
labels: ['State Mandates', 'Politics', 'Budget', 'Public', 'Unions'],
datasets: [{
label: 'Pressure Level',
data: [90, 85, 95, 80, 75],
backgroundColor: 'rgba(77, 143, 172, 0.4)',
borderColor: vibrantPalette.tealBlue,
pointBackgroundColor: vibrantPalette.tealBlue
}]
},
options: { ...defaultChartOptions, scales: { r: { beginAtZero: true, grid: { color: '#d1d5db'}, pointLabels: { font: {size: 11} }, ticks: {display: false} } } }
});

new Chart(document.getElementById('principalTimeChart'), {
type: 'doughnut',
data: {
labels: ['Crisis Mgmt', 'Admin', 'Staff Support', 'Instruction'],
datasets: [{
data: [55, 25, 12, 8],
backgroundColor: [vibrantPalette.coral, vibrantPalette.gold, vibrantPalette.tealBlue, vibrantPalette.darkBlue],
borderColor: '#ffffff',
borderWidth: 3
}]
},
options: { ...defaultChartOptions, cutout: '60%' }
});

new Chart(document.getElementById('teacherTurnoverChart'), {
type: 'bar',
data: {
labels: ['Low-Poverty', 'High-Poverty'],
datasets: [
{ label: 'Moving Schools', data: [6, 10], backgroundColor: vibrantPalette.tealBlue },
{ label: 'Leaving Profession', data: [4, 9], backgroundColor: vibrantPalette.coral }
]
},
options: { ...defaultChartOptions, scales: { x: { stacked: true }, y: { stacked: true, ticks: { callback: value => value + '%' } } } }
});

new Chart(document.getElementById('perceptionGapChart'), {
type: 'bar',
data: {
labels: ['Poor Interpersonal Skills', 'Conflict with Supt.', 'Lack of Resources', 'Board Politics'].map(l => wrapLabel(l, 20)),
datasets: [
{ label: 'Superintendent View', data: [75, 20, 10, 15], backgroundColor: vibrantPalette.darkBlue },
{ label: 'Principal View', data: [15, 65, 70, 60], backgroundColor: vibrantPalette.coral }
]
},
options: { ...defaultChartOptions, indexAxis: 'y', scales: { x: { ticks: { callback: value => value + '%' } }, y: { ticks: { autoSkip: false } } } }
});
});
</script>

</body>
</html>

Salt Shaker Press

Search This Blog

Tuesday, June 24, 2025

No comments:

Post a Comment

Heaven--Sermon