|
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 charset="UTF-8" />
<title>Adventure 12 — Activity</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ✅ ADD CALCULATOR CSS HERE -->
<link rel="stylesheet" href="images/calc-popup.css">
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
margin: 0; padding: 0;
background: #f5f5fb; color: #222;
}
.page{
width:100%;
box-sizing:border-box;
padding:1.8rem 5vw 3rem;
background:#fff;
max-width:none;
margin:0 auto;
}
h1{margin:0.2rem 0 0.25rem; font-size:2rem;}
.subtitle{color:#555; margin:0 0 1.2rem; line-height:1.45;}
h2{margin-top:1.4rem; margin-bottom:0.4rem; font-size:1.25rem;}
p{margin:0.35rem 0 0.7rem; line-height:1.55;}
ul{margin-top:0.3rem; padding-left:1.2rem;}
li{margin:0.25rem 0;}
a{color:#1f4ed8; text-decoration:none;}
a:hover{text-decoration:underline;}
.card{border:1px solid #dde3ff; background:#f6f7ff; border-radius:14px; padding:1rem 1rem 0.95rem; margin-top:0.7rem;}
code{background:#fff; border:1px solid #d9def5; padding:2px 6px; border-radius:8px;}
.footer{margin-top:2.2rem; font-size:0.9rem; color:#777; text-align:left; border-top:1px solid #eee; padding-top:0.8rem;}
.two-col{display:grid;grid-template-columns: 1.15fr 0.85fr;gap: 2rem;align-items:start;clear:both;}
.right-col{ text-align:center; }
.charts-stack img{width:105%;height:auto;border-radius:12px;border:1px solid #dde3ff;display:block;margin: 0 auto 1rem;max-width:105%;}
.chart-sticky{ position: sticky; top: 1rem; }
@media (max-width: 900px){
.two-col{display:grid;grid-template-columns: 1.15fr 0.85fr;gap: 2rem;align-items:start;clear:both;}
.chart-sticky{ position: static; }
.charts-stack img{width:105%;height:auto;border-radius:12px;border:1px solid #dde3ff;display:block;margin: 0 auto 1rem;max-width:105%;}
}
input[type="text"], input[type="number"]{
width:100%;
max-width:260px;
padding:0.35rem 0.45rem;
font-size:0.95rem;
border-radius:8px;
border:1px solid #c3cade;
margin-top:0.25rem;
box-sizing:border-box;
}
textarea{
width:100%;
max-width:640px;
padding:0.45rem 0.55rem;
font-size:0.95rem;
border-radius:10px;
border:1px solid #c3cade;
margin-top:0.25rem;
box-sizing:border-box;
line-height:1.45;
}
.row-grid{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem 1.4rem;
margin-top:0.6rem;
clear:both;
}
@media (max-width: 900px){
.row-grid{ grid-template-columns:1fr; }
}
.buttons-row{
margin-top:1rem;
display:flex;
flex-wrap:wrap;
gap:0.6rem;
}
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;
}
button:hover { background: #f3f7ff; }
button:active { background: #cddcff; box-shadow: 0 1px 0 #4f6fe6; transform: translateY(2px); }
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);
}
.correct{ background-color:#e4f9e7 !important; border-color:#2e9a48 !important; }
.incorrect{ background-color:#fde3e3 !important; border-color:#cc3d3d !important; }
.hint, .solution{
margin-top:0.9rem;
padding:0.8rem 0.9rem;
border-radius:10px;
border:1px solid #dde3ff;
background:#f6f7ff;
font-size:0.92rem;
display:none;
}
</style>
</head>
<body>
<div class="page">
<div style="display:flex; flex-wrap:wrap; gap:12px; margin-bottom:0.8rem;">
<a href="index.html"><button>🧭 Hub</button></a>
<a href="adventure_12_home.html"><button class="secondary">🏠 Home</button></a>
<a href="adventure_12_activity_solution.html"><button class="secondary">✅ Solutions</button></a>
</div>
<h1>🎯 Adventure 12 — Projectile Motion: The Vertical Secret</h1>
<div class="subtitle">Questions on the left. Charts on the right. Use <b>Check Answers</b> when you are ready.</div>
<div class="two-col">
<div class="left-col">
<div class="card">
<h2>Part 1 – A Ball Thrown Straight Up</h2>
<div class="q">
<label for="p1_max_time">1) At what time does the ball reach its greatest height?</label>
<div class="row">
<input id="p1_max_time" placeholder="seconds" />
<span id="b_p1_max_time" class="blank"></span>
</div>
</div>
<div class="q">
<label for="p1_max_height">2) What is the maximum height?</label>
<div class="row">
<input id="p1_max_height" placeholder="meters" />
<span id="b_p1_max_height" class="blank"></span>
</div>
</div>
<div class="q">
<label for="p1_v_t0">3) What is the velocity at t = 0 seconds?</label>
<div class="row">
<input id="p1_v_t0" placeholder="m/s" />
<span id="b_p1_v_t0" class="blank"></span>
</div>
</div>
<div class="q">
<label for="p1_v_t6">4) What is the velocity at t = 6 seconds?</label>
<div class="row">
<input id="p1_v_t6" placeholder="m/s" />
<span id="b_p1_v_t6" class="blank"></span>
</div>
</div>
<div class="q">
<label for="p1_v_zero_time">5) At what time is the velocity equal to zero?</label>
<div class="row">
<input id="p1_v_zero_time" placeholder="seconds" />
<span id="b_p1_v_zero_time" class="blank"></span>
</div>
</div>
<div class="q">
<label for="p1_ball_doing">6) At that moment (v = 0), what is the ball doing?</label>
<div class="row">
<input id="p1_ball_doing" placeholder="up / not moving / down" />
<span id="b_p1_ball_doing" class="blank"></span>
</div>
</div>
<div class="q">
<label for="p1_sentence_v_at_max">7) Complete the sentence: “At maximum height, the velocity is ____.”</label>
<div class="row">
<input id="p1_sentence_v_at_max" placeholder="" />
<span id="b_p1_sentence_v_at_max" class="blank"></span>
</div>
</div>
<hr>
<h2>Part 2 – Acceleration Clue</h2>
<div class="q">
<label for="p2_acc_value">8) What is the acceleration (constant) during the whole flight?</label>
<div class="row">
<input id="p2_acc_value" placeholder="m/s^2" />
<span id="b_p2_acc_value" class="blank"></span>
</div>
</div>
<div class="q">
<label for="p2_acc_zero">9) Is acceleration ever zero during the flight? (yes/no)</label>
<div class="row">
<input id="p2_acc_zero" placeholder="yes or no" />
<span id="b_p2_acc_zero" class="blank"></span>
</div>
</div>
<hr>
<h2>Part 3 – Cannon Ball (Vertical Motion)</h2>
<div class="q">
<label for="p3_v0">10) What is the cannonball’s initial vertical velocity?</label>
<div class="row">
<input id="p3_v0" placeholder="m/s" />
<span id="b_p3_v0" class="blank"></span>
</div>
</div>
<div class="q">
<label for="p3_max_height">11) What is the maximum height reached?</label>
<div class="row">
<input id="p3_max_height" placeholder="meters" />
<span id="b_p3_max_height" class="blank"></span>
</div>
</div>
<div class="q">
<label for="p3_stop_rising_time">12) When does it stop rising (vertical v = 0)?</label>
<div class="row">
<input id="p3_stop_rising_time" placeholder="seconds" />
<span id="b_p3_stop_rising_time" class="blank"></span>
</div>
</div>
<div class="q">
<label for="p3_vertical_velocity_same">13) Compared to the straight-up throw, the cannonball’s <b>vertical</b> motion is…</label>
<div class="row">
<input id="p3_vertical_velocity_same" placeholder="same / different" />
<span id="b_p3_vertical_velocity_same" class="blank"></span>
</div>
</div>
<hr>
<h2>Part 4 – Range (Horizontal Motion)</h2>
<div class="q">
<label for="p4_total_time">14) What is the total time in the air?</label>
<div class="row">
<input id="p4_total_time" placeholder="seconds" />
<span id="b_p4_total_time" class="blank"></span>
</div>
</div>
<div class="q">
<label for="p4_vx">15) Suppose the cannon ball moves horizontally at a constant speed of:</label>
<div class="row">
<input id="p4_vx" placeholder="m/s (not auto-checked)" />
<span class="small">(your choice)</span>
</div>
</div>
<div class="q">
<label for="p4_range">16) How far will it travel horizontally (range)?</label>
<div class="row">
<input id="p4_range" placeholder="meters (not auto-checked)" />
<span class="small">horizonatl velocity x time 14x15</span>
</div>
</div>
<hr>
<h2>The Big Idea</h2>
<div class="q">
<label for="bigidea_v_at_max">17) At maximum height, the vertical velocity is:</label>
<div class="row">
<input id="bigidea_v_at_max" placeholder="" />
<span id="b_bigidea_v_at_max" class="blank"></span>
</div>
</div>
<div class="q">
<label for="bigidea_acc_at_max">18) At maximum height, the acceleration is:</label>
<div class="row">
<input id="bigidea_acc_at_max" placeholder="value" />
<span id="b_bigidea_acc_at_max" class="blank"></span>
</div>
</div>
<hr>
<h2>Reflection</h2>
<div class="q">
<label for="refl_depends_vertical">19) The time to reach the maximum depends on the ___ motion.</label>
<div class="row">
<input id="refl_depends_vertical" placeholder="horizontal/vertical" />
<span id="b_refl_depends_vertical" class="blank"></span>
</div>
</div>
<div class="q">
<label for="refl_depends_horizontal">20) The range depends on the ___ motion.</label>
<div class="row">
<input id="refl_depends_horizontal" placeholder="horizontal/vertical" />
<span id="b_refl_depends_horizontal" class="blank"></span>
</div>
</div>
<div class="q">
<label for="refl_vx_vy_value">21) In this example, the vertical launch speed is:</label>
<div class="row">
<input id="refl_vx_vy_value" placeholder="m/s" />
<span id="b_refl_vx_vy_value" class="blank"></span>
</div>
</div>
<div class="q">
<label for="refl_angle_deg">22) For maximum range at fixed velocity (no air resistance), the best launch angle is:_____
</label>
<div class="row">
<input id="refl_angle_deg" placeholder="degrees" />
<span id="b_refl_angle_deg" class="blank"></span>
</div>
<p> (To make the cannonball go the farthest you want to use the maximum horizontal velocity and also get maximum height!) (smaller angle = more horizontal velocity and larger angle = more height!)</p>
</div>
</div>
<div class="buttons-row">
<button type="button" onclick="sampleValues()">💡 Use Sample Values</button>
<button type="button" onclick="checkAll()">✅ Check My Answers</button>
<span id="score2" class="subtitle" style="margin:0; padding:0;"></span>
</div>
</div>
<div class="right-col chart-sticky">
<div class="charts-stack">
<img src="images/adventure_12_chart_1.png" alt="Chart 1: Ball thrown straight up (DiVA)">
<img src="images/adventure_12_chart_2.png" alt="Chart 2: Cannon ball vertical motion (DiVA)">
<img src="images/adventure_12_chart_3.png" alt="Chart 3: Compare the two motions">
</div>
</div>
</div>
<div class="footer">
Dr. Super & Spark Math and Science Series – Powered by ChatGPT
</div>
</div>
<script>
const ANSWERS = {
"p1_max_time": ["3","3.0","3s","3sec","3seconds"],
"p1_max_height": ["45","45m","45meters","45metres","45 meters","45 metres"],
"p1_v_t0": ["30","30m/s","30ms-1","30meterspersecond"],
"p1_v_t6": ["-30","-30m/s","-30ms-1","-30meterspersecond"],
"p1_v_zero_time": ["3","3.0","3s","3sec"],
"p1_ball_doing": ["notmoving","not moving","neither","stopped","atrest","at rest","zero"],
"p1_sentence_v_at_max": ["zero","0","0m/s","zerom/s"],
"p2_acc_value": ["-10","-10m/s^2","-10m/s2","-10ms-2","-10 m/s^2","-10 m/s2"],
"p2_acc_zero": ["no","n"],
"p3_v0": ["30","30m/s","30ms-1"],
"p3_max_height": ["45","45m","45meters"],
"p3_stop_rising_time": ["3","3.0","3s","3sec"],
"p3_vertical_velocity_same": ["same","thesame","identical"],
"p4_total_time": ["6","6.0","6s","6sec"],
"bigidea_v_at_max": ["zero","0"],
"bigidea_acc_at_max": ["-10","-10m/s^2","-10m/s2","constant","negative","downward","down"],
"refl_depends_vertical": ["vertical","verticalmotion","vertical motion"],
"refl_depends_horizontal": ["horizontal","horizontalmotion","horizontal motion"],
"refl_vx_vy_value": ["30","30m/s","30 ms-1"],
"refl_angle_deg": ["45","45deg","45degrees","45 degrees"]
};
function $(id){ return document.getElementById(id); }
function norm(s){
return (s ?? "").toString().trim().toLowerCase()
.replace(/\s+/g,"")
.replace(/·/g,"*");
}
function clearStates(){
document.querySelectorAll("input").forEach(inp => inp.classList.remove("correct","incorrect"));
document.querySelectorAll(".blank").forEach(b => b.textContent = "");
const s1 = $("score"); if(s1) s1.textContent = "";
const s2 = $("score2"); if(s2) s2.textContent = "";
}
function mark(id, ok){
const el = $(id);
if(!el) return;
el.classList.remove("correct","incorrect");
el.classList.add(ok ? "correct" : "incorrect");
const b = document.getElementById("b_" + id);
if(b) b.textContent = ok ? "✓" : "✗";
}
function checkOne(id){
const expected = ANSWERS[id];
const el = $(id);
if(!el) return false;
const got = norm(el.value);
if(Array.isArray(expected)){
const ok = expected.some(e => norm(e) === got);
mark(id, ok);
return ok;
}
const ok = norm(expected) === got;
mark(id, ok);
return ok;
}
function checkAll(){
clearStates();
let okCount = 0, total = 0;
Object.keys(ANSWERS).forEach(k => {
total++;
if(checkOne(k)) okCount++;
});
const msg = "Score: " + okCount + " / " + total;
const s1 = $("score"); if(s1) s1.textContent = msg;
const s2 = $("score2"); if(s2) s2.textContent = msg;
}
function sampleValues(){
const samples = {
"p1_max_time": "3",
"p1_max_height": "45",
"p1_v_t0": "30",
"p1_v_t6": "-30",
"p1_v_zero_time": "3",
"p1_ball_doing": "not moving",
"p1_sentence_v_at_max": "0",
"p2_acc_value": "-10",
"p2_acc_zero": "no",
"p3_v0": "30",
"p3_max_height": "45",
"p3_stop_rising_time": "3",
"p3_vertical_velocity_same": "same",
"p4_total_time": "6",
"p4_vx": "20",
"p4_range": "120",
"bigidea_v_at_max": "0",
"bigidea_acc_at_max": "-10",
"refl_depends_vertical": "vertical",
"refl_depends_horizontal": "horizontal",
"refl_vx_vy_value": "30",
"refl_angle_deg": "45"
};
Object.keys(samples).forEach(id => {
const el = document.getElementById(id);
if(el) el.value = samples[id];
});
clearStates();
const buttons = document.querySelectorAll("button");
buttons.forEach(b => b.classList.remove("sampled"));
if(event && event.target){
event.target.classList.add("sampled");
}
}
</script>
<script src="images/calc-popup.js"></script>
</body>
</html>