|
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" />
<title>Adventure 11 — Activity</title>
<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;
}
button {
border-radius: 999px;
border: none;
padding: 0.45rem 0.95rem;
font-size: 0.92rem;
cursor: pointer;
background: #325dff;
color: #fff;
}
button.secondary {
background: #e4e8fb;
color: #243152;
}
button:active { transform: translateY(1px); }
.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;
}
.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;
}
</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 class="top-links">
<a href="adventure_11_home.html">🏠 Home</a>
<a href="adventure_11_story.html">📖 Story</a>
<a href="https://www.youtube.com/watch?v=m2MIpDrF7Es&list=PLZHQObOWTQDMsr9K-rj53DwVRMYO3t5Yr&index=5" target="_blank" rel="noopener">🎥 3Blue1Brown Video</a>
<a href="adventure_11_activity_solution.html">📄 Sample Solution</a>
</div>
<div class="buttons-row">
<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 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" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b9" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b10" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b11" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b12" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b13" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b14" type="text" inputmode="decimal" autocomplete="off" />
</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" autocomplete="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"><span class="green">1 + 0 + -x<sup>2</sup>/2 + 0 + x<sup>4</sup>/4! + 0 + -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="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b30" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b31" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b32" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b33" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b34" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b35" type="text" inputmode="decimal" autocomplete="off" />
</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"><span class="red">0 + x/1 + 0 + -x<sup>3</sup>/6 + 0 + x<sup>5</sup>/5! + 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="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b51" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b52" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b53" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b54" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b55" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box term" id="b56" type="text" inputmode="decimal" autocomplete="off" />
</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">
<div class="e-head">
<div class="e-lbl"></div>
<div class="e-cols7 caps">
<div class="e-colcap"><span class="math">1</span></div><div class="e-colcap"><span class="math">i</span></div><div class="e-colcap"><span class="math">i<sup>2</sup></span></div><div class="e-colcap"><span class="math">i<sup>3</sup></span></div><div class="e-colcap"><span class="math">i<sup>4</sup></span></div><div class="e-colcap"><span class="math">i<sup>5</sup></span></div><div class="e-colcap"><span class="math">i<sup>6</sup></span></div>
</div>
</div>
<div class="fillcap" style="margin:0.2rem 0 0.4rem;">Fill in the Values ==></div>
<div class="e-row">
<div class="e-lbl ">Taylor Series for <span class="math">e<sup>x</sup></span></div>
<div class="e-cols7">
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b64" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b65" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b66" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b67" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b68" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b69" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b70" type="text" inputmode="decimal" autocomplete="off" />
</div>
</div>
</div>
<div class="e-row">
<div class="e-lbl ">Taylor Series for <span class="math">e<sup>ix</sup></span></div>
<div class="e-cols7">
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b71" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b72" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b73" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b74" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b75" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b76" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b77" type="text" inputmode="decimal" autocomplete="off" />
</div>
</div>
</div>
<div class="e-row">
<div class="e-lbl green"><span class="green">cos x</span></div>
<div class="e-cols7">
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b78" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b79" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b80" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b81" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b82" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b83" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b84" type="text" inputmode="decimal" autocomplete="off" />
</div>
</div>
</div>
<div class="e-row">
<div class="e-lbl red"><span class="red">+ i sin x</span></div>
<div class="e-cols7">
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b85" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b86" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b87" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b88" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b89" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b90" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b91" type="text" inputmode="decimal" autocomplete="off" />
</div>
</div>
</div>
<div class="e-row">
<div class="e-lbl "><span class="math">e<sup>ix</sup></span> = cos x + i sin x (values)</div>
<div class="e-cols7">
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b92" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b93" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b94" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b95" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b96" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b97" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b98" type="text" inputmode="decimal" autocomplete="off" />
</div>
</div>
</div>
<div class="e-row">
<div class="e-lbl "> </div>
<div class="e-cols7">
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b99" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b100" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b101" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b102" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b103" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b104" type="text" inputmode="decimal" autocomplete="off" />
</div>
<div class="cell tall">
<div class="cap"> </div>
<input class="box wide" id="b105" type="text" inputmode="decimal" autocomplete="off" />
</div>
</div>
</div>
<div class="e-bottom">
<div class="e-eq"><span class="math">e<sup>ix</sup></span> =</div>
<input class="bigbox" id="b_big" type="text" autocomplete="off" />
<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>
</body>
</html>