|
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" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="images/calc-popup.css">
<title>Adventure 11 — Activity</title>
<!-- ✅ 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;
}
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;
}
@media (max-width: 900px) {
.row-grid { grid-template-columns: 1fr; }
}
.two-col{
display:grid;
grid-template-columns: 1fr 0.9fr;
gap: 1rem 1.4rem;
align-items:start;
}
@media (max-width: 980px){ .two-col{ grid-template-columns: 1fr; } }
.right-col img{
width:100%;
height:auto;
border:1px solid #ddd;
border-radius:14px;
box-shadow: 0 2px 14px rgba(0,0,0,0.06);
}
.header-table{
background:#fff;
border:1px solid #e6e6e6;
border-radius:14px;
padding:0.8rem 1rem;
margin-bottom: 0.9rem;
}
.ht-left{ display:flex; flex-direction:column; gap:0.15rem; }
.ht-title{ font-weight:900; font-size:1.05rem; }
.ht-sub{ font-weight:700; color:#333; }
.ht-cols{
display:grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap:0.45rem;
margin-top:0.6rem;
}
.ht-col{ border:1px solid #dedede; border-radius:10px; padding:0.35rem 0.4rem; text-align:center; background:#fafafa;}
.ht-cap{ font-weight:900; font-size:0.92rem; }
.ht-mini{ font-size:0.88rem; margin-top:0.2rem; }
.ht-formula{ margin-top:0.55rem; text-align:center; font-weight:700; color:#333;}
.blk{
background:#fff;
border:1px solid #e6e6e6;
border-radius:14px;
padding:0.8rem 1rem;
margin-bottom: 0.9rem;
display:grid;
grid-template-columns: 210px 1fr;
gap: 0.8rem 1rem;
}
@media (max-width: 980px){ .blk{ grid-template-columns: 1fr; } }
.fillcap{ font-weight:900; color:#b10000; }
.blk-title{ font-weight:900; margin-top:0.35rem; }
.xline{ margin-top:0.25rem; font-weight:800; }
.given{ display:inline-block; padding:0.15rem 0.4rem; border:2px solid #333; border-radius:6px; margin-left:0.35rem; }
.result{ margin-top:0.35rem; font-weight:800; }
.row7{
display:grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap:0.45rem;
}
.cell{ display:flex; flex-direction:column; gap:0.15rem; }
.cap{ font-size:0.84rem; font-weight:800; text-align:center; }
.cell.tall input{ height: 44px; }
.seriesline{ text-align:center; font-weight:900; margin:0.35rem 0 0.5rem; }
.green{ color:#0a8a2a; }
.red{ color:#c40000; }
.math{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
input.box{
width:100%;
height: 34px;
border:2px solid #333;
border-radius:6px;
padding: 0 0.35rem;
font-size: 0.95rem;
background:#fff;
}
.euler.card{
background:#fff;
border:1px solid #e6e6e6;
border-radius:14px;
padding:0.8rem 1rem;
}
.euler .e-head{
display:grid;
grid-template-columns: 210px 1fr;
gap: 0.8rem 1rem;
align-items:end;
}
.euler .e-cols7{ display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap:0.45rem; }
.euler .e-colcap{ text-align:center; font-weight:900; font-size:0.9rem; }
.euler .e-row{
display:grid;
grid-template-columns: 210px 1fr;
gap: 0.8rem 1rem;
align-items:start;
margin-top:0.45rem;
}
/* --- SS11 Euler alignment override --- */
.euler .e-row{
align-items: center; /* overrides 'start' only */
}
.euler .e-lbl{
padding-top: 0.6rem; /* nudges captions down */
}
.euler .e-lbl{ font-weight:900; }
.euler .e-bottom{
display:flex;
align-items:center;
gap:0.6rem;
margin-top:0.8rem;
}
.euler .e-eq{ font-weight:900; font-size:1.1rem; }
.bigbox{
flex: 1;
height: 44px;
border:3px solid #b10000;
border-radius:10px;
padding: 0 0.6rem;
font-size: 1.05rem;
}
.smallcap{ color:#b10000; font-weight:900; margin-left:0.3rem; }
.onebox{ display:flex; justify-content:flex-end; margin-top:0.5rem; }
.onebox .cell{ width: calc((100% - 6*0.45rem)/7); }
.top-links {
display:flex;
flex-wrap:wrap;
gap:0.6rem;
margin: 0.6rem 0 1rem;
}
.top-links a {
display:inline-block;
padding:0.55rem 0.8rem;
border:1px solid #d9d9d9;
border-radius:999px;
background:#fff;
font-weight:700;
}
.solution-panel {
display:none;
margin-top:1rem;
background:#fff;
border:1px solid #e6e6e6;
border-radius:14px;
padding:0.9rem 1rem;
}
.solution-panel img {
width:100%;
height:auto;
border:1px solid #ddd;
border-radius:14px;
}
/* === Taylor series line aligned with 7 input boxes === */
.seriesline-grid{
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.45rem; /* MUST match .row7 gap */
align-items: center;
margin: 0.35rem 0 0.5rem;
font-weight: 900;
text-align: center;
}
.seriesline-grid span{
display: block;
}
</style>
</head>
<body>
<div class="page">
<h1>✏️ Adventure 11 — Taylor Series</h1>
<div class="subtitle">Mimics the SS11 PDF layout (captions above boxes + Taylor polynomial lines), in SS4 style.</div>
<div style="display:flex; flex-wrap:wrap; gap:12px; margin-bottom:0.8rem;">
<a href="index.html"><button>🧭 Hub</button></a>
<a href="adventure_11_home.html"><button class="secondary">🏠 Home</button></a>
<a href="adventure_11_activity_solution.html"><button class="secondary">✅ Solutions</button></a>
</div>
<div class="two-col">
<div class="left-col">
<div class="header-table">
<div class="ht-left">
<div class="ht-title">Taylor Series for <span class="math">f(x)</span></div>
<div class="ht-sub">Around <span class="math">x=0</span></div>
</div>
<div class="ht-cols">
<div class="ht-col"><div class="ht-cap"><span class="math">f(0)</span></div><div class="ht-mini"><span class="math">x</span></div></div>
<div class="ht-col"><div class="ht-cap"><span class="math">f'(0)</span></div><div class="ht-mini"><span class="math">x</span></div></div>
<div class="ht-col"><div class="ht-cap"><span class="math">f''(0)</span></div><div class="ht-mini"><span class="math">x^2/2!</span></div></div>
<div class="ht-col"><div class="ht-cap"><span class="math">f'''(0)</span></div><div class="ht-mini"><span class="math">x^3/3!</span></div></div>
<div class="ht-col"><div class="ht-cap"><span class="math">f''''(0)</span></div><div class="ht-mini"><span class="math">x^4/4!</span></div></div>
<div class="ht-col"><div class="ht-cap"><span class="math">f'''''(0)</span></div><div class="ht-mini"><span class="math">x^5/5!</span></div></div>
<div class="ht-col"><div class="ht-cap"><span class="math">f''''''(0)</span></div><div class="ht-mini"><span class="math">x^6/6!</span></div></div>
</div>
<div class="ht-formula"><span class="math">1 + x/1 + x^2/2! + x^3/3! + x^4/4! + x^5/5! + x^6/6! + …</span></div>
</div>
<div class="blk">
<div class="blk-left">
<div class="fillcap" style="margin-top:0.65rem;">;</div>
<div class="fillcap">Fill in the Values ==></div>
<div class="blk-title">Taylor Series for <span class="math">e<sup>x</sup></span></div>
<div class="result"><span class="math">e<sup>1</sup></span> = <b>2.718</b></div>
<div class="fillcap" style="margin-top:0.65rem;">;</div>
<div class="fillcap" style="margin-top:0.65rem;">value for x=1;</div>
<div class="fillcap" style="margin-top:0.65rem;">;</div>
<div class="fillcap" style="margin-top:0.65rem;"> Compute Cumulative value ==></div>
</div>
<div class="blk-right">
<div class="row7">
<div class="cell ">
<div class="cap">e<sup>0</sup></div>
<input class="box top" id="b1" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell ">
<div class="cap">e<sup>0</sup></div>
<input class="box top" id="b2" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell ">
<div class="cap">e<sup>0</sup></div>
<input class="box top" id="b3" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell ">
<div class="cap">e<sup>0</sup></div>
<input class="box top" id="b4" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell ">
<div class="cap">e<sup>0</sup></div>
<input class="box top" id="b5" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell ">
<div class="cap">e<sup>0</sup></div>
<input class="box top" id="b6" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell ">
<div class="cap">e<sup>0</sup></div>
<input class="box top" id="b7" type="text" inputmode="decimal" autocomplete="off" />
</div>
</div>
<div class="seriesline"><span class="math">1 + x/1 + x<sup>2</sup>/2! + x<sup>3</sup>/3! + x<sup>4</sup>/4! + x<sup>5</sup>/5! + x<sup>6</sup>/6! + …</span></div>
<div class="row7 term">
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b8" type="text" inputmode="decimal" autocomplete="on" value="1.000" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b9" type="text" inputmode="decimal" autocomplete="on" value="1.000" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b10" type="text" inputmode="decimal" autocomplete="on" value="0.500" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b11" type="text" inputmode="decimal" autocomplete="on" value="0.167" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b12" type="text" inputmode="decimal" autocomplete="on" value="0.042" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b13" type="text" inputmode="decimal" autocomplete="on" value="0.008" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b14" type="text" inputmode="decimal" autocomplete="on" value="0.001" />
</div>
</div>
<div class="row7 cum">
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b15" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b16" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b17" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b18" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b19" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b20" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b21" type="text" inputmode="decimal" autocomplete="off" />
</div>
</div>
</div>
</div>
<div class="blk">
<div class="blk-left">
<div class="fillcap" style="margin-top:0.65rem;">;</div>
<div class="fillcap">Fill in the Values ==></div>
<div class="blk-title">Taylor Series for <span class="math">cos(x)</span></div>
<div class="fillcap" style="margin-top:0.65rem;">cos(pi/3)=0.50;</div>
<div class="fillcap" style="margin-top:0.65rem;">value for pi/3;</div>
<div class="fillcap" style="margin-top:0.65rem;">;</div>
<div class="fillcap" style="margin-top:0.65rem;"> Compute Cumulative value ==></div>
</div>
<div class="blk-right">
<div class="row7">
<div class="cell ">
<div class="cap">cos(0)</div>
<input class="box top" id="b22" type="text" inputmode="decimal" autocomplete="off"/>
</div>
<div class="cell ">
<div class="cap">-sin(0)</div>
<input class="box top" id="b23" type="text" inputmode="decimal" autocomplete="off"/>
</div>
<div class="cell ">
<div class="cap">-cos(0)</div>
<input class="box top" id="b24" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell ">
<div class="cap">sin(0)</div>
<input class="box top" id="b25" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell ">
<div class="cap">cos(0)</div>
<input class="box top" id="b26" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell ">
<div class="cap">-sin(0)</div>
<input class="box top" id="b27" type="text" inputmode="decimal" aautocomplete="off"/>
</div>
<div class="cell ">
<div class="cap">-cos(0)</div>
<input class="box top" id="b28" type="text" inputmode="decimal" autocomplete="off" />
</div>
</div>
<div class="seriesline-grid green">
<span>1</span>
<span>0</span>
<span>-x<sup>2</sup>/2!</span>
<span>0</span>
<span>x<sup>4</sup>/4!</span>
<span>0</span>
<span>-x<sup>6</sup>/6!</span>
</div>
<div class="row7 term">
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b29" type="text" inputmode="decimal" autocomplete=on" value="1" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b30" type="text" inputmode="decimal" autocomplete="on" value="0" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b31" type="text" inputmode="decimal" autocomplete=on" value="-0.548" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b32" type="text" inputmode="decimal" autocomplete=on" value="0"/>
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b33" type="text" inputmode="decimal" autocomplete=on" value="0.050"/>
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b34" type="text" inputmode="decimal" autocomplete=on" value="0" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b35" type="text" inputmode="decimal" autocomplete=on" value="-0.002" />
</div>
</div>
<div class="row7 cum">
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b36" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b37" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b38" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b39" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b40" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b41" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b42" type="text" inputmode="decimal" autocomplete="off" />
</div>
</div>
</div>
</div>
<div class="blk">
<div class="blk-left">
<div class="fillcap">;</div>
<div class="fillcap">Fill in the Values ==></div>
<div class="blk-title">Taylor Series for <span class="math">sin(x)</span></div>
<div class="xline"><span class="math">x = pi/3</span><div class="result"><span class="math">sin(pi/3)</span> = <b>0.866</b></div></div>
<div class="fillcap" style="margin-top:0.65rem;">value for pi/3;</div>
<div class="fillcap" style="margin-top:0.65rem;">;</div>
<div class="fillcap" style="margin-top:0.65rem;">Compute Cumulative value ==></div>
</div>
<div class="blk-right">
<div class="row7">
<div class="cell ">
<div class="cap">sin(0)</div>
<input class="box top" id="b43" type="text" inputmode="decimal" autocomplete="off" "/>
</div>
<div class="cell ">
<div class="cap">cos(0)</div>
<input class="box top" id="b44" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell ">
<div class="cap">-sin(0)</div>
<input class="box top" id="b45" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell ">
<div class="cap">-cos(0)</div>
<input class="box top" id="b46" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell ">
<div class="cap">sin(0)</div>
<input class="box top" id="b47" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell ">
<div class="cap">cos(0)</div>
<input class="box top" id="b48" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell ">
<div class="cap">-sin(0)</div>
<input class="box top" id="b49" type="text" inputmode="decimal" autocomplete="off" />
</div>
</div>
<div class="seriesline-grid red">
<span>0</span>
<span>x</span>
<span>0</span>
<span>-x<sup>3</sup>/3!</span>
<span>0</span>
<span>x<sup>5</sup>/5!</span>
<span>0</span>
</div>
<div class="row7 term">
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b50" type="text" inputmode="decimal" autocomplete="on" value="0" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b51" type="text" inputmode="decimal" autocomplete="on" value="1.047" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b52" type="text" inputmode="decimal" autocomplete="on" value="0" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b53" type="text" inputmode="decimal" autocomplete="on" value="-0.191" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b54" type="text" inputmode="decimal" autocomplete="on" value="0" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b55" type="text" inputmode="decimal" autocomplete="on" value="0.010" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b56" type="text" inputmode="decimal" autocomplete="on" value="0" />
</div>
</div>
<div class="row7 cum">
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b57" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b58" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b59" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b60" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b61" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b62" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box cum" id="b63" type="text" inputmode="decimal" autocomplete="off" />
</div>
</div>
</div>
</div>
<div class="card euler">
<!-- Column headers -->
<div class="e-head">
<div class="e-lbl"></div>
<div class="e-cols7 caps">
<div class="e-colcap">1</div>
<div class="e-colcap">i</div>
<div class="e-colcap">i<sup>2</sup></div>
<div class="e-colcap">i<sup>3</sup></div>
<div class="e-colcap">i<sup>4</sup></div>
<div class="e-colcap">i<sup>5</sup></div>
<div class="e-colcap">i<sup>6</sup></div>
</div>
</div>
<!-- Row 1: values for 1, i, i^2, ... (NO LABEL) -->
<div class="e-row">
<div class="e-lbl">1.Coefficients for <span class="math">e<sup>ix</sup></span></div>
<div class="e-cols7">
<div class="cell tall"><input class="box wide" id="b64"></div>
<div class="cell tall"><input class="box wide" id="b65"></div>
<div class="cell tall"><input class="box wide" id="b66"></div>
<div class="cell tall"><input class="box wide" id="b67"></div>
<div class="cell tall"><input class="box wide" id="b68"></div>
<div class="cell tall"><input class="box wide" id="b69"></div>
<div class="cell tall"><input class="box wide" id="b70"></div>
</div>
</div>
<!-- Row 2 -->
<div class="e-row">
<div class="e-lbl">2.Taylor Series for <span class="math">e<sup>x</sup></span></div>
<div class="e-cols7">
<div class="cell tall"><input class="box wide" id="b71"></div>
<div class="cell tall"><input class="box wide" id="b72"></div>
<div class="cell tall"><input class="box wide" id="b73"></div>
<div class="cell tall"><input class="box wide" id="b74"></div>
<div class="cell tall"><input class="box wide" id="b75"></div>
<div class="cell tall"><input class="box wide" id="b76"></div>
<div class="cell tall"><input class="box wide" id="b77"></div>
</div>
</div>
<!-- Row 3 -->
<div class="e-row">
<div class="e-lbl">Taylor Series for <span class="math">e<sup>ix</sup></span> (1x2)</div>
<div class="e-cols7">
<div class="cell tall"><input class="box wide" id="b78"></div>
<div class="cell tall"><input class="box wide" id="b79"></div>
<div class="cell tall"><input class="box wide" id="b80"></div>
<div class="cell tall"><input class="box wide" id="b81"></div>
<div class="cell tall"><input class="box wide" id="b82"></div>
<div class="cell tall"><input class="box wide" id="b83"></div>
<div class="cell tall"><input class="box wide" id="b84"></div>
</div>
</div>
<!-- Row 4 -->
<div class="e-row">
<div class="e-lbl green">cos x</div>
<div class="e-cols7">
<div class="cell tall"><input class="box wide" id="b85"></div>
<div class="cell tall"><input class="box wide" id="b86"></div>
<div class="cell tall"><input class="box wide" id="b87"></div>
<div class="cell tall"><input class="box wide" id="b88"></div>
<div class="cell tall"><input class="box wide" id="b89"></div>
<div class="cell tall"><input class="box wide" id="b90"></div>
<div class="cell tall"><input class="box wide" id="b91"></div>
</div>
</div>
<!-- Row 5 -->
<div class="e-row">
<div class="e-lbl red">+ i sin x</div>
<div class="e-cols7">
<div class="cell tall"><input class="box wide" id="b92"></div>
<div class="cell tall"><input class="box wide" id="b93"></div>
<div class="cell tall"><input class="box wide" id="b94"></div>
<div class="cell tall"><input class="box wide" id="b95"></div>
<div class="cell tall"><input class="box wide" id="b96"></div>
<div class="cell tall"><input class="box wide" id="b97"></div>
<div class="cell tall"><input class="box wide" id="b98"></div>
</div>
</div>
<!-- Row 6 -->
<div class="e-row">
<div class="e-lbl">
<span class="math">e<sup>ix</sup></span> = cos x + i sin x<br>
<span class="small">(values)</span>
</div>
<div class="e-cols7">
<div class="cell tall"><input class="box wide" id="b99"></div>
<div class="cell tall"><input class="box wide" id="b100"></div>
<div class="cell tall"><input class="box wide" id="b101"></div>
<div class="cell tall"><input class="box wide" id="b102"></div>
<div class="cell tall"><input class="box wide" id="b103"></div>
<div class="cell tall"><input class="box wide" id="b104"></div>
<div class="cell tall"><input class="box wide" id="b105"></div>
</div>
</div>
<!-- Final equation -->
<div class="e-bottom">
<div class="e-eq"><span class="math">e<sup>ix</sup></span> =</div>
<input class="bigbox" id="b_big">
<div class="fillcap smallcap">Fill Values</div>
</div>
</div>
</div>
<div class="right-col">
<img src="images/adventure_11_right_new.png" alt="Adventure 11 charts and unit circle"/>
</div>
</div>
<div class="solution-panel" id="solutionPanel">
<h2 style="margin-top:0;">Sample Solution (PNG)</h2>
<img src="images/adventure_11_solution.png" alt="Adventure 11 solution"/>
</div>
<div class="buttons-row" style="margin-top:1.2rem;">
<button type="button" onclick="toggleSolution()">✅ Check answers (show/hide solution)</button>
<button type="button" class="secondary" onclick="clearAll()">🧽 Clear all boxes</button>
<button type="button" class="secondary" onclick="window.scrollTo({top:0,behavior:'smooth'})">⬆️ Top</button>
</div>
</div>
<script>
function toggleSolution(){
const p = document.getElementById('solutionPanel');
p.style.display = (p.style.display === 'none' || p.style.display === '') ? 'block' : 'none';
if (p.style.display === 'block') p.scrollIntoView({behavior:'smooth', block:'start'});
}
function clearAll(){
for (let k=1; k<=106; k++) {
const el = document.getElementById('b'+k);
if (el) el.value = '';
}
const big = document.getElementById('b_big');
if (big) big.value = '';
}
</script>
<script src="images/calc-popup.js"></script>
</body>
</html>