|
Server : Apache/2.4.62 System : FreeBSD fbsdweb2.web.rcn.net 14.1-RELEASE FreeBSD 14.1-RELEASE releng/14.1-n267679-10e31f0946d8 GENERIC amd64 User : www ( 80) PHP Version : 8.3.8 Disable Function : NONE Directory : /domains/drsuper/CalculusMechanics/ |
Upload File : |
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buffon’s Needle – Student Activity</title>
<style>
:root{
--ink:#111;
--muted:#555;
--panel:#f6f6f6;
--border:#d8d8d8;
--accent:#0b5fff;
}
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); }
.wrap{ max-width: 980px; margin: 0 auto; padding: 18px; }
h1{ margin: 6px 0 6px; font-size: 34px; letter-spacing:.2px; }
.sub{ margin:0 0 14px; color:var(--muted); font-size: 16px; }
.top-img{
margin: 14px 0 18px;
border: 1px solid var(--border);
border-radius: 12px;
background: white;
padding: 10px;
display: flex;
justify-content: center;
}
.top-img img{
width: 60% !important;
max-width: 600px !important;
height: auto !important;
display: block !important;
margin: 0 auto !important;
}
.note{ background: var(--panel); border:1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 14px 0; }
.section{ margin: 18px 0; }
h2{ margin: 0 0 8px; font-size: 22px; }
p{ margin: 8px 0; line-height: 1.45; }
ol{ margin: 8px 0 0 22px; }
li{ margin: 10px 0; }
.q{
border:1px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
margin: 12px 0;
background: #fff;
}
.row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
label{ font-weight:600; }
input[type="text"], input[type="number"]{
padding: 8px 10px;
border:1px solid var(--border);
border-radius: 10px;
font-size: 16px;
width: 260px;
max-width: 100%;
}
input.small{ width: 170px; }
.btnrow{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 10px; }
button {
background: #e9f0ff;
border: 2px solid #6b8cff;
border-radius: 0;
padding: 10px 18px;
font-size: 1rem;
cursor: pointer;
box-shadow: 0 3px 0 #4f6fe6;
transition: all 0.12s ease;
}
/* Hover */
button:hover {
background: #f3f7ff;
}
/* Pressed */
button:active {
background: #cddcff;
box-shadow: 0 1px 0 #4f6fe6;
transform: translateY(2px);
}
/* Optional: "checked" feeling after click */
button.checked {
background: #dff5e1;
border-color: #3a9b3a;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}
button.sampled {
background: #fff3d9;
border-color: #d9a441;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}
.feedback{ margin-top:8px; font-weight:700; }
.ok{ color: #0a7a2f; }
.bad{ color: #b00020; }
.out{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.hr{ height:1px; background: var(--border); margin: 18px 0; }
.foot{ color:var(--muted); font-size: 13px; margin-top: 20px; }
</style>
</head>
<body>
<div class="wrap">
<div style="display:flex; flex-wrap:wrap; gap:12px; margin-bottom:0.8rem;">
<a href="index.html"><button>🧭 Hub</button></a>
<a href="adventure_10_home.html"><button>🏠 Home</button></a>
<a href="adventure_10_Buffons_Needle_Problem_Student_Activity_Solution.pdf"><button>✅ Buffon's Solution</button></a>
</div>
<h1>Buffon’s Needle Problem</h1>
<p class="sub">Estimate <b>π</b> by dropping needles on parallel lines (geometry + probability).</p>
<!-- TOP CHART / DIAGRAM (you will supply the PNG) -->
<div class="top-img" style="display:block; text-align:center;">
<img src="images/buffon_main_chart.png"
style="width:500px !important; height:auto !important; max-width:500px !important; transform:none !important;">
</div>
<div class="note">
<b>Setup:</b> Parallel lines are spaced <span class="out">d</span> units apart. A needle of length <span class="out">L</span> is dropped at random.
In this activity we will use the special case <b>L = d</b> (same as your handout).
</div>
<div class="section">
<h2>Part A — Variables & Randomness</h2>
<div class="q">
<ol>
<li>
The the two random variables used in the problem (see image):
<div class="row" style="margin-top:8px;">
<!-- <label for="xdef">x = distance from needle center to the center line</label>
<input id="xdef" type="text" placeholder="distance from needle center to nearest line"> -->
x = distance from needle center to the center line
</div>
<div class="row" style="margin-top:8px;">
<!-- <label for="tdef">θ = angle between needle and the lines</label>
<input id="tdef" type="text" placeholder="angle between needle and the lines"> -->
θ = angle between needle and the lines
</div>
</li>
<li>
Give the ranges (use inequalities):
<div class="row" style="margin-top:8px;">
<label for="xrange">0 ≤ x ≤</label>
<input id="xrange" class="small" type="text" placeholder="">
<label for="trange" style="margin-left:10px;">0 ≤ θ ≤</label>
<input id="trange" class="small" type="text" placeholder="">
</div>
</li>
</ol>
<div class="btnrow">
<button onclick="useSample()">Use Sample</button>
<button class="primary" onclick="checkA()">Check Part A</button>
</div>
<div id="fbA" class="feedback"></div>
</div>
</div>
<div class="section">
<h2>Part B — When does the needle cross a line?</h2>
<p>The needle crosses a (nearest) line when the vertical “reach” from its center to an endpoint is at least <span class="out">x</span>.</p>
<div class="q">
<ol>
<li>
In the case <span class="out">L = d</span>, the condition is:
<div class="row" style="margin-top:8px;">
<label for="cond">Crossing condition:</label>
<input id="cond" type="text" placeholder="x ≤ (d/2) sin(θ)">
</div>
</li>
<li>
The probability of crossing becomes an “area ratio” in the <span class="out">(θ, x)</span> plane.
Based on the handout, the result should be:
<div class="row" style="margin-top:8px;">
<label for="pform">P(cross) =</label>
<input id="pform" class="small" type="text" placeholder="2/π">
</div>
</li>
</ol>
<!-- Optional second diagram (you will supply the PNG) -->
<div class="top-img" style="display:block; text-align:center;">
<img src="images/buffon_area_region.png"
style="width:350px !important; height:auto !important; max: width 350px;px !important; transform:none !important;">
</div>
<div class="btnrow">
<button onclick="useSample()">Use Sample</button>
<button class="primary" onclick="checkB()">Check Part B</button>
</div>
<div id="fbB" class="feedback"></div>
</div>
</div>
<div class="section">
<h2>Part C — Estimating π from data</h2>
<p>
Suppose you drop <span class="out">N</span> needles and observe <span class="out">C</span> crossings.
Then <span class="out">P̂ = C/N</span> and (for <span class="out">L = d</span>) you can estimate:
</p>
<div class="q">
<div class="row">
<label for="pihat">π estimate formula:</label>
<input id="pihat" type="text" placeholder="π ≈ 2N/C">
</div>
<div class="hr"></div>
<div class="row">
<label for="N">N (drops):</label>
<input id="N" type="number" min="1" step="1" class="small" placeholder="e.g., 100">
<label for="C" style="margin-left:10px;">C (crossings):</label>
<input id="C" type="number" min="0" step="1" class="small" placeholder="e.g., 64">
<button class="primary" onclick="computePi()">Compute π</button>
</div>
<div id="piOut" class="feedback"></div>
<div class="btnrow">
<button onclick="useSample()">Use Sample</button>
<button class="primary" onclick="checkC()">Check Part C</button>
</div>
<div id="fbC" class="feedback"></div>
</div>
</div>
<div class="section">
<h2>Extension (optional)</h2>
<div class="note">
<p>
In general, if <span class="out">L ≠ d</span>, the probability changes.
When <span class="out">L ≤ d</span>, the famous formula is:
<span class="out">P(cross) = (2L)/(πd)</span>.
</p>
<p>
Challenge: If you double the needle length, what happens to the probability? Explain in one sentence.
</p>
</div>
</div>
<p class="foot">Dr. Super & Spark Math and Science Series – Powered by ChatGPT</p>
</div>
<script>
function norm(s){
return (s || "")
.toString()
.toLowerCase()
.replace(/\s+/g,"")
.replace(/[()]/g,"");
}
function setFB(id, ok, msg){
const el = document.getElementById(id);
el.className = "feedback " + (ok ? "ok" : "bad");
el.textContent = msg;
}
function useSample(){
/* document.getElementById("xdef").value = "distance from the needle center to the nearest line";
/* document.getElementById("tdef").value = "angle between the needle and the lines"; */
document.getElementById("xrange").value = "d/2";
document.getElementById("trange").value = "pi/2";
document.getElementById("cond").value = "x <= (d/2) sin(theta)";
document.getElementById("pform").value = "2/pi";
document.getElementById("pihat").value = "pi ~= 2N/C";
document.getElementById("N").value = 100;
document.getElementById("C").value = 64;
computePi();
}
function checkA(){
/* const xdef = norm(document.getElementById("xdef").value);
const tdef = norm(document.getElementById("tdef").value); */
const xrange = norm(document.getElementById("xrange").value);
const trange = norm(document.getElementById("trange").value);
/* const ok1 = xdef.includes("distance") && xdef.includes("center") && (xdef.includes("nearestline") || xdef.includes("closestline")); */
/* const ok2 = tdef.includes("angle") && (tdef.includes("needle") || tdef.includes("segment")) && (tdef.includes("line") || tdef.includes("lines")); */
const ok3 = (xrange === "d/2" || xrange === "0.5d" || xrange === "d/2.0");
const ok4 = (trange === "pi/2" || trange === "π/2");
setFB("fbA", ok1 && ok2 && ok3 && ok4, (ok1 && ok2 && ok3 && ok4) ? "✅ Part A looks good." : "❌ Check your definitions/ranges (x should go to d/2 and θ to π/2).");
}
function checkB(){
const cond = norm(document.getElementById("cond").value);
const pform = norm(document.getElementById("pform").value);
const ok1 = (cond.includes("x<=") || cond.includes("x≤")) && (cond.includes("sin") || cond.includes("sintheta")) && (cond.includes("d/2") || cond.includes("0.5d"));
const ok2 = (pform === "2/pi" || pform === "2/π");
setFB("fbB", ok1 && ok2, (ok1 && ok2) ? "✅ Part B looks good." : "❌ Check the crossing condition and the probability (should be 2/π for L=d).");
}
function checkC(){
const pihat = norm(document.getElementById("pihat").value);
const ok = (pihat.includes("2n/c") || pihat.includes("2*n/c") || pihat.includes("2n÷c") || pihat.includes("2n/crossings") || pihat.includes("2n/c"));
setFB("fbC", ok, ok ? "✅ Part C formula looks good." : "❌ For L=d, the estimate should be π ≈ 2N/C.");
}
function computePi(){
const N = Number(document.getElementById("N").value);
const C = Number(document.getElementById("C").value);
const out = document.getElementById("piOut");
if(!Number.isFinite(N) || N<=0 || !Number.isFinite(C) || C<0){
out.className="feedback bad";
out.textContent = "Enter valid numbers for N and C.";
return;
}
if(C===0){
out.className="feedback bad";
out.textContent = "If C = 0, you cannot estimate π (try more drops!).";
return;
}
const piHat = (2*N)/C;
out.className="feedback ok";
out.textContent = `✅ π ≈ 2N/C = ${piHat.toFixed(6)} (with N=${N}, C=${C})`;
}
</script>
</body></html>