diff --git a/react.html b/react.html
index 8b13789..82f28ef 100644
--- a/react.html
+++ b/react.html
@@ -1 +1,752 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Student Score Explorer</title>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
+    />
+    <style>
+      :root {
+        color-scheme: light;
+        --bg: #ffffff;
+        --panel-bg: rgba(206, 184, 136, 0.18);
+        --card-bg: rgba(255, 255, 255, 0.95);
+        --text: #000000;
+        --accent: #c28e0e;
+        --accent-strong: #373a36;
+        --supporting-text: #373a36;
+        --muted-text: #9d968d;
+        --border: rgba(157, 150, 141, 0.45);
+        --shadow: rgba(0, 0, 0, 0.12);
+        --grid-gap: clamp(1rem, 2vw, 1.5rem);
+      }
 
+      body {
+        margin: 0;
+        font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+        background: radial-gradient(circle at top left, rgba(206, 184, 136, 0.25), transparent 45%),
+          radial-gradient(circle at bottom right, rgba(194, 142, 14, 0.18), transparent 40%),
+          var(--bg);
+        color: var(--text);
+        min-height: 100vh;
+        padding: clamp(1.5rem, 2.5vw, 3rem);
+        box-sizing: border-box;
+      }
+
+      h1 {
+        text-align: center;
+        font-size: clamp(2rem, 3vw, 3rem);
+        margin-bottom: 1rem;
+        letter-spacing: -0.03em;
+        color: var(--accent-strong);
+      }
+
+      h2 {
+        margin-top: 0;
+        color: var(--accent-strong);
+      }
+
+      p.description {
+        max-width: 720px;
+        margin: 0 auto 2.5rem auto;
+        text-align: center;
+        font-size: 1rem;
+        line-height: 1.5;
+        color: var(--supporting-text);
+      }
+
+      .grid {
+        display: grid;
+        gap: var(--grid-gap);
+      }
+
+      .controls {
+        display: grid;
+        gap: 1rem;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        background: var(--panel-bg);
+        padding: 1.25rem clamp(1rem, 2vw, 1.5rem);
+        border-radius: 1rem;
+        backdrop-filter: blur(14px);
+        box-shadow: 0 15px 45px var(--shadow);
+      }
+
+      .control {
+        display: flex;
+        flex-direction: column;
+        gap: 0.35rem;
+      }
+
+      .control label {
+        font-weight: 600;
+        font-size: 0.95rem;
+        color: var(--supporting-text);
+      }
+
+      .control input,
+      .control button {
+        border-radius: 0.6rem;
+        border: 1px solid var(--border);
+        padding: 0.65rem 0.75rem;
+        font-size: 1rem;
+        background: rgba(255, 255, 255, 0.9);
+        color: var(--text);
+      }
+
+      .control input {
+        accent-color: var(--accent);
+      }
+
+      .control button {
+        cursor: pointer;
+        font-weight: 600;
+        background: linear-gradient(135deg, var(--accent), #ceb888);
+        color: #ffffff;
+        border: none;
+        transition: transform 0.15s ease, box-shadow 0.2s ease;
+      }
+
+      .control button:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 12px 22px rgba(194, 142, 14, 0.35);
+      }
+
+      .panels {
+        display: grid;
+        gap: var(--grid-gap);
+        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+        align-items: stretch;
+      }
+
+      .panel {
+        background: var(--card-bg);
+        border-radius: 1rem;
+        padding: clamp(1rem, 2vw, 1.5rem);
+        backdrop-filter: blur(18px);
+        box-shadow: 0 18px 40px var(--shadow);
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .panel h2 {
+        font-size: 1.25rem;
+        margin-bottom: 0.5rem;
+      }
+
+      .stats-grid {
+        display: grid;
+        gap: 0.65rem;
+        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+      }
+
+      .stat {
+        background: rgba(206, 184, 136, 0.15);
+        border-radius: 0.75rem;
+        padding: 0.75rem;
+        border: 1px solid var(--border);
+      }
+
+      .stat .label {
+        font-size: 0.8rem;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        color: var(--muted-text);
+      }
+
+      .stat .value {
+        font-size: 1.2rem;
+        font-weight: 600;
+        margin-top: 0.3rem;
+        color: var(--accent-strong);
+      }
+
+      canvas {
+        width: 100% !important;
+        height: auto !important;
+      }
+
+      .threshold-info {
+        display: flex;
+        flex-direction: column;
+        gap: 0.35rem;
+      }
+
+      .threshold-info strong {
+        font-size: 1.05rem;
+        color: var(--accent);
+      }
+
+      .table-wrapper {
+        max-height: 320px;
+        overflow: auto;
+        border-radius: 0.75rem;
+        border: 1px solid var(--border);
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 0.95rem;
+      }
+
+      thead {
+        position: sticky;
+        top: 0;
+        backdrop-filter: blur(12px);
+        background: var(--accent-strong);
+        color: #ffffff;
+      }
+
+      th,
+      td {
+        padding: 0.6rem 0.75rem;
+        text-align: left;
+        border-bottom: 1px solid var(--border);
+      }
+
+      tbody tr:nth-child(even) {
+        background: rgba(206, 184, 136, 0.12);
+      }
+
+      .score-list {
+        max-height: 220px;
+        overflow: auto;
+        border-radius: 0.75rem;
+        border: 1px solid var(--border);
+        padding: 0.75rem;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
+        gap: 0.5rem;
+        font-size: 0.95rem;
+      }
+
+      .score-badge {
+        background: rgba(194, 142, 14, 0.22);
+        color: var(--accent-strong);
+        border-radius: 999px;
+        padding: 0.35rem 0.6rem;
+        text-align: center;
+        font-weight: 600;
+      }
+
+      @media (max-width: 768px) {
+        body {
+          padding: 1.25rem;
+        }
+
+        .controls {
+          grid-template-columns: 1fr;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+
+    <script type="text/babel">
+      const { useState, useMemo, useEffect, useRef } = React;
+
+      const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+
+      const generateNormalSamples = (count, mean, stdDev, minScore = 0, maxScore = 100) => {
+        const scores = [];
+        for (let i = 0; i < count; i += 1) {
+          const u1 = Math.random();
+          const u2 = Math.random();
+          const randStdNormal = Math.sqrt(-2.0 * Math.log(u1)) * Math.cos(2.0 * Math.PI * u2);
+          const score = mean + stdDev * randStdNormal;
+          scores.push(Math.round(clamp(score, minScore, maxScore)));
+        }
+        return scores;
+      };
+
+      const computeStats = (data) => {
+        if (!data.length) {
+          return null;
+        }
+
+        const sorted = [...data].sort((a, b) => a - b);
+        const count = data.length;
+        const mean = data.reduce((sum, value) => sum + value, 0) / count;
+        const variance = data.reduce((sum, value) => sum + (value - mean) ** 2, 0) / count;
+        const stdDev = Math.sqrt(variance);
+        const min = sorted[0];
+        const max = sorted[sorted.length - 1];
+        const median = count % 2 === 0 ? (sorted[count / 2 - 1] + sorted[count / 2]) / 2 : sorted[Math.floor(count / 2)];
+
+        const q1Index = Math.floor((count + 1) / 4);
+        const q3Index = Math.floor(((count + 1) * 3) / 4);
+        const q1 = sorted[q1Index];
+        const q3 = sorted[q3Index];
+
+        const frequencies = data.reduce((acc, value) => {
+          acc[value] = (acc[value] || 0) + 1;
+          return acc;
+        }, {});
+
+        const mode = Object.entries(frequencies).reduce((maxEntry, current) =>
+          current[1] > maxEntry[1] ? current : maxEntry
+        );
+
+        return {
+          count,
+          mean,
+          median,
+          mode: Number(mode[0]),
+          variance,
+          stdDev,
+          min,
+          max,
+          q1,
+          q3,
+        };
+      };
+
+      const normalPdf = (x, mean, stdDev) => {
+        const coeff = 1 / (stdDev * Math.sqrt(2 * Math.PI));
+        const exponent = -((x - mean) ** 2) / (2 * stdDev ** 2);
+        return coeff * Math.exp(exponent);
+      };
+
+      const normalCdf = (x) => {
+        return 0.5 * (1 + erf(x / Math.sqrt(2)));
+      };
+
+      // Approximation of the error function
+      const erf = (x) => {
+        const sign = x < 0 ? -1 : 1;
+        const absX = Math.abs(x);
+        const a1 = 0.254829592;
+        const a2 = -0.284496736;
+        const a3 = 1.421413741;
+        const a4 = -1.453152027;
+        const a5 = 1.061405429;
+        const p = 0.3275911;
+        const t = 1.0 / (1.0 + p * absX);
+        const y = 1.0 - (((((a5 * t + a4) * t) + a3) * t + a2) * t + a1) * t * Math.exp(-absX * absX);
+        return sign * y;
+      };
+
+      const formatNumber = (value, decimals = 2) => value.toLocaleString(undefined, {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+      });
+
+      const generateZTable = () => {
+        const rows = [];
+        for (let z = -3.0; z <= 3.0; z += 0.1) {
+          const roundedZ = Math.round(z * 100) / 100;
+          rows.push({
+            z: roundedZ,
+            probability: normalCdf(roundedZ),
+          });
+        }
+        return rows;
+      };
+
+      const thresholdShadingPlugin = {
+        id: 'thresholdShading',
+        afterDatasetsDraw(chart, args, pluginOptions) {
+          const threshold = pluginOptions?.threshold;
+          const mean = pluginOptions?.mean;
+          const stdDev = pluginOptions?.stdDev;
+
+          if (typeof threshold !== 'number' || typeof mean !== 'number' || typeof stdDev !== 'number') {
+            return;
+          }
+
+          const dataset = chart.data.datasets[0];
+          if (!dataset || !dataset.data || !dataset.data.length) {
+            return;
+          }
+
+          const { ctx, chartArea, scales } = chart;
+          const { x, y } = scales;
+          const baseY = y.getPixelForValue(0);
+          const thresholdPixel = x.getPixelForValue(threshold);
+          const pdfAtThreshold = normalPdf(threshold, mean, stdDev);
+          const thresholdY = y.getPixelForValue(pdfAtThreshold);
+          const leftColor = pluginOptions.leftColor || 'rgba(206, 184, 136, 0.45)';
+          const rightColor = pluginOptions.rightColor || 'rgba(194, 142, 14, 0.4)';
+          const lineColor = pluginOptions.lineColor || 'rgba(55, 58, 54, 1)';
+          const lineWidth = pluginOptions.lineWidth || 2;
+          const lineDash = pluginOptions.lineDash || [6, 6];
+
+          const leftPoints = dataset.data.filter((point) => point.x <= threshold);
+          if (leftPoints.length) {
+            ctx.save();
+            ctx.beginPath();
+            ctx.moveTo(x.getPixelForValue(leftPoints[0].x), baseY);
+            leftPoints.forEach((point) => {
+              ctx.lineTo(x.getPixelForValue(point.x), y.getPixelForValue(point.y));
+            });
+            ctx.lineTo(thresholdPixel, thresholdY);
+            ctx.lineTo(thresholdPixel, baseY);
+            ctx.closePath();
+            ctx.fillStyle = leftColor;
+            ctx.fill();
+            ctx.restore();
+          }
+
+          const rightPoints = dataset.data.filter((point) => point.x >= threshold);
+          if (rightPoints.length) {
+            ctx.save();
+            ctx.beginPath();
+            ctx.moveTo(thresholdPixel, baseY);
+            ctx.lineTo(thresholdPixel, thresholdY);
+            rightPoints.forEach((point) => {
+              ctx.lineTo(x.getPixelForValue(point.x), y.getPixelForValue(point.y));
+            });
+            const lastPoint = rightPoints[rightPoints.length - 1];
+            ctx.lineTo(x.getPixelForValue(lastPoint.x), baseY);
+            ctx.closePath();
+            ctx.fillStyle = rightColor;
+            ctx.fill();
+            ctx.restore();
+          }
+
+          ctx.save();
+          ctx.strokeStyle = lineColor;
+          ctx.lineWidth = lineWidth;
+          if (lineDash.length) {
+            ctx.setLineDash(lineDash);
+          }
+          ctx.beginPath();
+          ctx.moveTo(thresholdPixel, chartArea.bottom);
+          ctx.lineTo(thresholdPixel, chartArea.top);
+          ctx.stroke();
+          ctx.restore();
+        },
+      };
+
+      const App = () => {
+        const [count, setCount] = useState(40);
+        const [mean, setMean] = useState(75);
+        const [stdDev, setStdDev] = useState(10);
+        const [scores, setScores] = useState([]);
+        const [threshold, setThreshold] = useState(70);
+        const chartRef = useRef(null);
+        const chartInstanceRef = useRef(null);
+
+        const stats = useMemo(() => computeStats(scores), [scores]);
+
+        const zTable = useMemo(() => generateZTable(), []);
+
+        const curveData = useMemo(() => {
+          if (!stats) {
+            return null;
+          }
+
+          const points = [];
+          for (let x = 0; x <= 100; x += 1) {
+            points.push({ x, y: normalPdf(x, stats.mean, stats.stdDev) });
+          }
+
+          const yMax = Math.max(...points.map((point) => point.y)) * 1.1;
+
+          return { points, yMax };
+        }, [stats]);
+
+        useEffect(() => {
+          if (!chartRef.current || !curveData || !stats) {
+            return;
+          }
+
+          const ctx = chartRef.current.getContext('2d');
+
+          if (!chartInstanceRef.current) {
+            chartInstanceRef.current = new Chart(ctx, {
+              type: 'line',
+              data: {
+                datasets: [
+                  {
+                    label: 'Normal Curve',
+                    data: curveData.points,
+                    parsing: false,
+                    borderColor: 'rgba(0, 0, 0, 0.9)',
+                    borderWidth: 3,
+                    pointRadius: 0,
+                    tension: 0.25,
+                    fill: false,
+                  },
+                ],
+              },
+              options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                  x: {
+                    type: 'linear',
+                    beginAtZero: true,
+                    title: {
+                      display: true,
+                      text: 'Score',
+                    },
+                    suggestedMax: 100,
+                  },
+                  y: {
+                    beginAtZero: true,
+                    ticks: {
+                      callback: (value) => value.toFixed(3),
+                    },
+                    title: {
+                      display: true,
+                      text: 'Probability Density',
+                    },
+                  },
+                },
+                plugins: {
+                  legend: {
+                    display: false,
+                  },
+                  tooltip: {
+                    callbacks: {
+                      label: (context) => `Score ${context.parsed.x}: ${context.parsed.y.toFixed(4)}`,
+                    },
+                  },
+                  thresholdShading: {
+                    threshold,
+                    mean: stats.mean,
+                    stdDev: stats.stdDev,
+                    leftColor: 'rgba(206, 184, 136, 0.45)',
+                    rightColor: 'rgba(194, 142, 14, 0.4)',
+                    lineColor: 'rgba(55, 58, 54, 1)',
+                    lineWidth: 2,
+                    lineDash: [6, 6],
+                  },
+                },
+              },
+              plugins: [thresholdShadingPlugin],
+            });
+          }
+
+          const chart = chartInstanceRef.current;
+          chart.data.datasets[0].data = curveData.points;
+          chart.options.scales.x.suggestedMax = Math.max(100, stats.max + 5);
+          chart.options.scales.y.suggestedMax = curveData.yMax;
+          chart.options.plugins.thresholdShading = {
+            ...chart.options.plugins.thresholdShading,
+            mean: stats.mean,
+            stdDev: stats.stdDev,
+          };
+          chart.update();
+        }, [curveData, stats]);
+
+        useEffect(() => {
+          const chart = chartInstanceRef.current;
+          if (!chart || !stats) {
+            return;
+          }
+
+          if (!chart.options.plugins.thresholdShading) {
+            chart.options.plugins.thresholdShading = {};
+          }
+
+          chart.options.plugins.thresholdShading.threshold = threshold;
+          chart.update('none');
+        }, [threshold, stats]);
+
+        useEffect(() => () => {
+          if (chartInstanceRef.current) {
+            chartInstanceRef.current.destroy();
+            chartInstanceRef.current = null;
+          }
+        }, []);
+
+        const handleGenerate = () => {
+          const generated = generateNormalSamples(count, mean, stdDev);
+          setScores(generated);
+        };
+
+        useEffect(() => {
+          const generated = generateNormalSamples(count, mean, stdDev);
+          setScores(generated);
+        }, []);
+
+        const percentBelow = useMemo(() => {
+          if (!scores.length) {
+            return 0;
+          }
+          return (scores.filter((score) => score <= threshold).length / scores.length) * 100;
+        }, [scores, threshold]);
+
+        const percentAbove = useMemo(() => 100 - percentBelow, [percentBelow]);
+
+        return (
+          <div className="grid" style={{ gap: 'clamp(1.5rem, 2.5vw, 2rem)' }}>
+            <div>
+              <h1>Student Score Explorer</h1>
+              <p className="description">
+                Generate realistic test score data, explore descriptive statistics, consult a normal distribution table,
+                and interactively investigate how many students scored above or below a target threshold.
+              </p>
+            </div>
+
+            <section className="controls">
+              <div className="control">
+                <label htmlFor="count">Class Size</label>
+                <input
+                  id="count"
+                  type="number"
+                  min="5"
+                  max="300"
+                  value={count}
+                  onChange={(event) => setCount(Number(event.target.value))}
+                />
+              </div>
+              <div className="control">
+                <label htmlFor="mean">Average Score</label>
+                <input
+                  id="mean"
+                  type="number"
+                  min="0"
+                  max="100"
+                  value={mean}
+                  onChange={(event) => setMean(Number(event.target.value))}
+                />
+              </div>
+              <div className="control">
+                <label htmlFor="stdDev">Standard Deviation</label>
+                <input
+                  id="stdDev"
+                  type="number"
+                  min="1"
+                  max="30"
+                  value={stdDev}
+                  onChange={(event) => setStdDev(Number(event.target.value))}
+                />
+              </div>
+              <div className="control" style={{ alignSelf: 'flex-end' }}>
+                <button onClick={handleGenerate}>Generate Scores</button>
+              </div>
+            </section>
+
+            {stats ? (
+              <section className="panels">
+                <div className="panel" style={{ minHeight: '420px' }}>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                    <h2>Bell Curve Distribution</h2>
+                    <p style={{ margin: 0, color: 'var(--muted-text)' }}>
+                      Use the slider to position the threshold and observe the portion of the class above or below that grade.
+                    </p>
+                  </div>
+                  <div className="control">
+                    <label htmlFor="threshold">Threshold: {threshold}</label>
+                    <input
+                      id="threshold"
+                      type="range"
+                      min="0"
+                      max="100"
+                      value={threshold}
+                      onChange={(event) => setThreshold(Number(event.target.value))}
+                    />
+                  </div>
+                  <div className="threshold-info">
+                    <strong>{formatNumber(percentBelow)}% of students scored at or below {threshold}.</strong>
+                    <strong>{formatNumber(percentAbove)}% of students scored above {threshold}.</strong>
+                  </div>
+                  <div style={{ flex: 1, minHeight: '260px', position: 'relative' }}>
+                    <canvas ref={chartRef} />
+                  </div>
+                </div>
+
+                <div className="panel">
+                  <h2>Descriptive Statistics</h2>
+                  <div className="stats-grid">
+                    <div className="stat">
+                      <div className="label">Mean</div>
+                      <div className="value">{formatNumber(stats.mean)}</div>
+                    </div>
+                    <div className="stat">
+                      <div className="label">Median</div>
+                      <div className="value">{formatNumber(stats.median)}</div>
+                    </div>
+                    <div className="stat">
+                      <div className="label">Mode</div>
+                      <div className="value">{stats.mode}</div>
+                    </div>
+                    <div className="stat">
+                      <div className="label">Standard Deviation</div>
+                      <div className="value">{formatNumber(stats.stdDev)}</div>
+                    </div>
+                    <div className="stat">
+                      <div className="label">Variance</div>
+                      <div className="value">{formatNumber(stats.variance)}</div>
+                    </div>
+                    <div className="stat">
+                      <div className="label">Min / Max</div>
+                      <div className="value">{stats.min} / {stats.max}</div>
+                    </div>
+                    <div className="stat">
+                      <div className="label">Q1</div>
+                      <div className="value">{stats.q1}</div>
+                    </div>
+                    <div className="stat">
+                      <div className="label">Q3</div>
+                      <div className="value">{stats.q3}</div>
+                    </div>
+                    <div className="stat">
+                      <div className="label">Sample Size</div>
+                      <div className="value">{stats.count}</div>
+                    </div>
+                  </div>
+                  <div>
+                    <h3 style={{ marginBottom: '0.5rem' }}>Generated Scores</h3>
+                    <div className="score-list">
+                      {scores.map((score, index) => (
+                        <span key={index} className="score-badge">{score}</span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="panel">
+                  <h2>Normal Distribution Table</h2>
+                  <p style={{ margin: 0, color: 'var(--muted-text)' }}>
+                    Use this table to find the cumulative probability for z-scores from -3 to 3.
+                  </p>
+                  <div className="table-wrapper">
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Z-Score</th>
+                          <th>Cumulative Probability</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {zTable.map((row) => (
+                          <tr key={row.z}>
+                            <td>{row.z.toFixed(2)}</td>
+                            <td>{formatNumber(row.probability, 4)}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </section>
+            ) : (
+              <section className="panel">
+                <h2>Generate Sample Data</h2>
+                <p style={{ color: 'var(--muted-text)' }}>
+                  Set the class parameters above and click "Generate Scores" to explore statistics and visualizations.
+                </p>
+              </section>
+            )}
+          </div>
+        );
+      };
+
+      ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+    </script>
+  </body>
+</html>
