KGRKJGETMRETU895U-589TY5MIGM5JGB5SDFESFREWTGR54TY
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 :
current_dir [ Writeable ] document_root [ Writeable ]

 

Current File : /domains/drsuper/CalculusMechanics/adventure_4.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Adventure 4 β€” 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: #ffffff;
      max-width: 980px;
      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; }
    .toplinks { font-size: 0.95rem; margin-bottom: 0.8rem; }
    .card {
      border: 1px solid #dde3ff;
      background: #f6f7ff;
      border-radius: 14px;
      padding: 1rem 1rem 0.95rem;
      margin-top: 0.7rem;
    }
    .callout {
      background: #f3f6ff;
      border-radius: 10px;
      border: 1px solid #dde3ff;
      padding: 0.9rem 1rem;
      font-size: 0.98rem;
      margin: 1rem 0;
    }
    .questions {
      background: #fff9e5;
      border-radius: 10px;
      border: 1px solid #f0e0a0;
      padding: 0.9rem 1rem;
      font-size: 0.98rem;
      margin: 1rem 0;
    }
    .blank {
      display:inline-block;
      border-bottom: 2px solid #999;
      min-width: 220px;
      height: 1.05em;
      vertical-align: baseline;
    }
    .blank.sm { min-width: 120px; }
    .blank.lg { min-width: 360px; }
    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;
    }

    /* --- Adventure 4 two-column layout (questions left, chart right) --- */
    .page { max-width: none !important; } /* full width */
    .two-col {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 2rem;
      align-items: start;
      clear: both;
    }
    .right-col { text-align: center; }
    .right-col img {
      width: 115%;              /* expanded another 20% */
      height: auto;
      border-radius: 12px;
      border: 1px solid #dde3ff;
      display: inline-block;
    }
    .chart-sticky {
      position: sticky;
      top: 1rem;
    }
    @media (max-width: 900px) {
      .two-col { grid-template-columns: 1fr; }
      .chart-sticky { position: static; }
      .right-col img { width: 100%; }
    }
    
  
    /* --- Interactive answer inputs (Adventure style) --- */
    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: 520px;
      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(2, minmax(0, 1fr));
      gap: 1rem 1.6rem;
      margin-top: 0.6rem;
      clear: both;
    }
    .buttons-row{
      margin-top: 1rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
    }
    .top-buttons{
  display: flex;
  gap: 10px;
  margin-left: 12px;   /* ← move right */
}
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);
      }
    .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;
    }
    @media (max-width: 900px) {
      .row-grid { grid-template-columns: 1fr; }
    }

</style>

    <style>
    .wide-page { max-width: none !important; }
    .two-col {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 2rem;
      align-items: start;
    }
    .chart-sticky {
      position: sticky;
      top: 1rem;
    }
    </style>
    
</head
<body>
   <div class="page wide-page">
    <div class="toplinks">
    </div>
    <div style="display:flex; flex-wrap:wrap; gap:12px;">
        <a href="index.html"><button style="font-size:16px; padding:12px 16px;">🧭 Hub</button></a>
        <a href="adventure_4_home.html"><button style="font-size:16px; padding:12px 16px;">🏠 Home</button></a>
        <a href="adventure_4_solution.html"><button style="font-size:16px; padding:12px 16px;">βœ… Solutions</button></a>
       
    </div>

    <h1>✏️ Adventure 4 β€” Activity</h1>
    <div class="subtitle">
      Use the charts to connect <b>height</b>, <b>velocity</b>, and <b>acceleration</b> β€” and discover why
      calculus is really β€œslope + area”.
    </div>


    <div class="card">
      <p class="subtitle" style="margin:0;">Assumptions: no air resistance β€’ constant acceleration downward g=10 m/sΒ² β€’ time ticks every 1 second.</p>
    </div>

    
<div class="two-col">
  <div class="left-col">
<h2>✳ Equations (given)</h2>
    <ul>
      <li><code>y(t) = 980 βˆ’ Β½ g tΒ²</code></li>
      <li><code>v(t) = yβ€²(t)</code></li>
      <li><code>a(t) = vβ€²(t)</code></li>
    </ul>

    <h2>1) Height vs Time (Read the graph)</h2>

    <div class="row-grid">
      <div>
        <label for="y4"><b>Height after 4 seconds (m):</b></label>
        <input id="y4" type="number" step="1" value="">
      </div>
      <div>
        <label for="y10"><b>Height after 10 seconds (m):</b></label>
        <input id="y10" type="number" step="1" value="">
      </div>
      <div>
        <label for="d410"><b>Distance fallen from 4 s to 10 s (m):</b></label>
        <input id="d410" type="number" step="1" value="">
      </div>
    </div>
    

    <h2>2) Velocity and Distance (Area under v(t))</h2>

    <div class="row-grid">
      <div>
        <label for="area04"><b>Area under v(t) from 0β†’4 s (m):</b></label>
        <input id="area04" type="number" step="1" value="">
      </div>
      <div>
        <label for="area010"><b>Area under v(t) from 0β†’10 s (m):</b></label>
        <input id="area010" type="number" step="1" value="">
      </div>
      <div>
        <label for="d410"><b>Difference in Area from 4 s to 10 s (m):</b></label>
        <input id="d410" type="number" step="1" value="">
      </div>
      <div>
        <label for="match"><b>Does area difference match distance fallen?</b></label>
        <input id="match" type="text" placeholder="Yes / No" value="">
      </div>
    </div>
    

    <h2>3) Hitting the Ground</h2>

    <div class="row-grid">
      <div>
        <label for="thit"><b>Impact time t (s):</b></label>
        <input id="thit" type="number" step="0.1" value="">
      </div>
      <div>
        <label for="vmps"><b>Impact velocity (m/s):</b></label>
        <input id="vmps" type="number" step="0.1" value="">
      </div>
      <div>
        <label for="vkmh"><b>Impact velocity (km/h) (m/s)x(3600/1000):</b></label>
        <input id="vkmh" type="number" step="0.1" value="">
      </div>
      <div>
        <label for="graphcheck"><b>Matches Graph:</b> type:( yes or no)</label>
        <input id="graphcheck" type="text" placeholder="yes / no" value="">
      </div>
    </div>
    

    <h2>4) Acceleration Check (Area under a(t))</h2>

    <div class="row-grid">
      <div>
        <label for="areaa"><b>Area under a(t) from 4β†’10 s (m/s):</b></label>
        <input id="areaa" type="number" step="0.1" value="">
      </div>
      <div>
        <label for="explain"><b>Explain how this relates to velocity:</b></label>
        <textarea id="explain" rows="3" placeholder="Explanation about how velocity and acceleration are related through area under a(t)."></textarea>
      </div>
    </div>
    

    <h2>β˜… Calculus Challenge (Show your work)</h2>
    <ul>
      <li>Differentiate <code>y(t)</code> to find <code>v(t)</code>. Differentiate again to find <code>a(t)</code>.</li>
      <li>Could you recover <code>v(t)</code> and <code>y(t)</code> by integrating <code>a(t)</code> and <code>v(t)</code>? Explain briefly.</li>
      <textarea id="explain" rows="3" placeholder="Show how y(t), v(t), and a(t) are related through differentiation and integration?"></textarea>
    </ul>

      </div>
  <div class="right-col chart-sticky">
    <img src="images/adventure_4_chart.png" alt="Adventure 4 DiVA Charts">
  </div>
</div>


    <div class="buttons-row">
      <button type="button" onclick="checkAnswers()">βœ… Check my answers</button>
      <button type="button" class="secondary" onclick="fillSample()">Use sample values</button>
      <button type="button" class="secondary" onclick="toggleHint()">πŸ’‘ Show / hide hint</button>
      <button type="button" class="secondary" onclick="toggleSolution()">πŸ“„ Show / hide solution</button>
    </div>

    <div id="hintBox" class="hint">
      Use the charts. Remember: <b>area under v(t)</b> gives <b>distance fallen</b>, and <b>area under a(t)</b> gives <b>change in velocity</b>.
      For unit conversion: km/h = (m/s) Γ— 3.6.
    </div>

    <div id="solutionBox" class="solution">
      <strong>Sample solution (g = 10 m/sΒ²)</strong>
      <ul>
        <li>y(4)=900 m, y(10)=480 m, distance from 4β†’10 is 420 m</li>
        <li>Area under v(t): 0β†’4 is 80 m, 0β†’10 is 500 m (matches distance fallen)</li>
        <li>Impact: t=14 s, speed = 140 m/s = 504 km/h</li>
        <li>Area under a(t) from 4β†’10: 60 m/s, which equals Ξ”v</li>
      </ul>
    </div>
    
<div class="footer">Dr. Super &amp; Spark β€” Powered by ChatGPT</div>
  </div>

  <script>
    const ANSWERS = {
      y4: 900,
      y10: 480,
      d410: 420,
      area04: 80,
      area010: 500,
      thit: 14,
      vmps: 140,
      vkmh: 504,
      areaa: 60
    };

    function $(id){ return document.getElementById(id); }

    function clearStates(){
      ["y4","y10","d410","area04","area010","thit","vmps","vkmh","areaa","match","graphcheck"].forEach(id => {
        const el = $(id);
        if(!el) return;
        el.classList.remove("correct");
        el.classList.remove("incorrect");
      });
    }

    function near(val, target, tol){
      return Math.abs(val - target) <= tol;
    }

    function mark(el, ok){
      if(!el) return;
      el.classList.add(ok ? "correct" : "incorrect");
    }

    function checkAnswers(){
      clearStates();
      const tolMeters = 5;      // reading/area estimation wiggle room
      const tolSeconds = 1.0;
      function checkNum(id, target, tol){
        const el = $(id);
        if(!el) return;
        const v = parseFloat(el.value);
        if(isNaN(v)) return;
        mark(el, near(v, target, tol));
      }

      checkNum("y4", ANSWERS.y4, tolMeters);
      checkNum("y10", ANSWERS.y10, tolMeters);
      checkNum("d410", ANSWERS.d410, tolMeters);
      checkNum("area04", ANSWERS.area04, tolMeters);
      checkNum("area010", ANSWERS.area010, tolMeters);
      checkNum("thit", ANSWERS.thit, tolSeconds);
      checkNum("vmps", ANSWERS.vmps, 3);
      checkNum("vkmh", ANSWERS.vkmh, 10);
      checkNum("areaa", ANSWERS.areaa, 3);

      const match = $("match");
      if(match && match.value.trim()){
        const v = match.value.trim().toLowerCase();
        mark(match, v === "yes");
      }
      const gc = $("graphcheck");
      if(gc && gc.value.trim()){
        const v = gc.value.trim();
        mark(gc, v === "βœ…" || v.toLowerCase() === "yes" || v.toLowerCase() === "y");
      }
    }

    function fillSample(){
      $("y4").value = ANSWERS.y4;
      $("y10").value = ANSWERS.y10;
      $("d410").value = ANSWERS.d410;
      $("area04").value = ANSWERS.area04;
      $("area010").value = ANSWERS.area010;
      $("match").value = "Yes";
      $("thit").value = ANSWERS.thit;
      $("vmps").value = ANSWERS.vmps;
      $("vkmh").value = ANSWERS.vkmh;
      $("graphcheck").value = "βœ…";
      $("areaa").value = ANSWERS.areaa;
      const ex = $("explain");
      if(ex && !ex.value.trim()){
        ex.value = "Area under acceleration gives change in velocity (Ξ”v).";
      }
      clearStates();
    }

    function toggleHint(){
      const box = $("hintBox");
      if(!box) return;
      box.style.display = (box.style.display === "none" || box.style.display === "") ? "block" : "none";
    }

    function toggleSolution(){
      const box = $("solutionBox");
      if(!box) return;
      box.style.display = (box.style.display === "none" || box.style.display === "") ? "block" : "none";
    }
  </script>
<script src="images/calc-popup.js"></script>
</body>
</html>

Anon7 - 2021