Hugging Face's logo

Spaces:
vscode
/
portfolio1
Running

App Files Community
portfolio1 / index.html
vscode's picture
vscode
Update index.html
ee3da05 verified
raw
history blame contribute delete
37.8 kB
 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Calculus Portfolio — Topic Pages (with Graphs)</title>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&family=Montserrat:ital,wght@0,600;1,700&display=swap" rel="stylesheet">
<style>
:root{
--bg:#071027;
--card:#0f1724;
--muted:#cbd5e1;
--accent1:#60a5fa;
--accent2:#7dd3fc;
--glass:rgba(255,255,255,0.03);
--radius:12px;
--maxw:1100px;
}
*{box-sizing:border-box}
body{
margin:0;
font-family:"Quicksand",system-ui,Roboto,Arial;
color:#fff;
background:linear-gradient(180deg,var(--bg),#081827 100%);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
padding:18px;
}
.wrap{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
nav.sidebar{
background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border-radius:12px;padding:16px;border:1px solid rgba(255,255,255,0.03);
position:sticky;top:18px;height:calc(100vh - 36px);overflow:auto;
}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.logo{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent2),var(--accent1));color:#04263b;font-weight:800}
.brand h1{font-size:16px;margin:0}
.navlist{margin-top:12px}
.navlist button{
display:block;width:100%;text-align:left;padding:10px 10px;border-radius:10px;border:none;background:transparent;color:var(--muted);
margin-bottom:6px;cursor:pointer;font-weight:600;font-size:14px;
}
.navlist button.active{background:linear-gradient(90deg,var(--accent2),var(--accent1));color:#04263b}
.student-card{margin:12px 0 8px;padding:12px;border-radius:10px;background:rgba(255,255,255,0.015);color:var(--muted);font-size:13px}
.student-card strong{color:#fff;display:inline-block;width:78px}
.page-area{min-height:80vh}
.page{
display:none;
padding:20px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border:1px solid rgba(255,255,255,0.03);
}
.page.active{display:block}
.hero{
display:flex;gap:18px;align-items:center;margin-bottom:14px;
flex-wrap:wrap;
}
.hero .media{flex:0 0 260px;height:160px;border-radius:10px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;display:block}
.hero h2{margin:0;font-family:"Montserrat",sans-serif;font-size:28px;letter-spacing:1px;text-transform:uppercase}
.hero p{margin:6px 0 0;color:var(--muted);max-width:760px}
.content{display:grid;grid-template-columns:1fr 320px;gap:18px;margin-top:12px}
.card{background:rgba(255,255,255,0.015);padding:16px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);}
.card h3{margin:0 0 10px}
.muted{color:var(--muted);line-height:1.6}
ul.clean{padding-left:18px;color:var(--muted)}
ul.clean li{margin:8px 0}
.formula{background:rgba(255,255,255,0.02);padding:12px;border-radius:8px;font-family:monospace;color:var(--muted);margin-top:10px}
/* graph styles */
.graph-card{padding:10px;border-radius:8px;background:rgba(255,255,255,0.01);border:1px solid rgba(255,255,255,0.02)}
svg{width:100%;height:260px;display:block}
.controls{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.controls label{font-size:13px;color:var(--muted)}
input[type="range"]{width:100%}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.dots{display:flex;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.08);cursor:pointer}
.dot.active{background:linear-gradient(90deg,var(--accent2),var(--accent1))}
@media (max-width:980px){
.wrap{grid-template-columns:1fr;padding-bottom:50px}
nav.sidebar{height:auto;position:relative}
.content{grid-template-columns:1fr}
.hero .media{width:100%;height:160px;flex:1 1 100%}
}
@media (max-width:420px){
.hero h2{font-size:20px}
.student-card{font-size:12px}
}
</style>
</head>
<body>
<div class="wrap" role="main">
<!-- SIDEBAR -->
<nav class="sidebar" aria-label="Topic navigation">
<div class="brand">
<div class="logo">∫d</div>
<div>
<h1>Calculus Portfolio</h1>
<div style="font-size:12px;color:var(--muted)">Intro — Differential & Integral</div>
</div>
</div>
<!-- Rani at top, Srushti removed -->
<div class="student-card" aria-label="Student details - Rani">
<div><strong>Name:</strong> <span style="color:#fff">Rani N B</span></div>
<div><strong>Division:</strong> <span style="color:#fff">G</span></div>
<div><strong>Roll No:</strong> <span style="color:#fff">741</span></div>
<div><strong>USN:</strong> <span style="color:#fff">01FE25BCS465</span></div>
</div>
<div class="navlist" role="list">
<button class="nav-btn active" data-index="0">Course Overview</button>
<button class="nav-btn" data-index="1">Meaning & Definition</button>
<button class="nav-btn" data-index="2">Basic Calculus</button>
<button class="nav-btn" data-index="3">Differential Calculus</button>
<button class="nav-btn" data-index="4">Limits (graph)</button>
<button class="nav-btn" data-index="5">Derivatives (interactive)</button>
<button class="nav-btn" data-index="6">Applications of Derivatives</button>
<button class="nav-btn" data-index="7">Integral Calculus</button>
<button class="nav-btn" data-index="8">Definite Integrals (area)</button>
<button class="nav-btn" data-index="9">Indefinite Integrals</button>
<button class="nav-btn" data-index="10">Techniques of Integration</button>
<button class="nav-btn" data-index="11">Applications of Integrals</button>
<button class="nav-btn" data-index="12">Summary & Reference</button>
</div>
</nav>
<!-- PAGE AREA -->
<section class="page-area" aria-live="polite">
<!-- Page 0: Course Overview -->
<article class="page active" data-index="0" id="page-0" aria-labelledby="t0">
<div class="hero">
<div class="media"><img src="./ca1.jpg" alt="Functions & graphs"/></div>
<div>
<h2 id="t0">Course Overview</h2>
<p class="muted">CALCULUS is the branch of mathematics that deals with the study of continuous change. It consists of two main branches: Differential calculus and Integral calculus. This course will help you understand limits, derivatives, integrals and apply them to physics, engineering, economics and modeling real-world phenomena.</p>
</div>
</div>
<div class="content" role="region" aria-label="Overview content">
<div class="card">
<h3>Course objectives</h3>
<ul class="clean">
<li>Understand limits, derivatives and integrals</li>
<li>Apply calculus techniques to solve applied problems</li>
<li>Analyze functions and model real-world phenomena</li>
</ul>
<h3 style="margin-top:12px">Course outline (topics/pages)</h3>
<ul class="clean">
<li>Differential calculus: Limits, derivatives, applications</li>
<li>Integral calculus: Indefinite/definite integrals, techniques, applications</li>
</ul>
</div>
<aside class="card">
<h3>Quick facts</h3>
<p class="muted"><strong>Duration:</strong> 10–12 weeks<br><strong>Format:</strong> Theory + Visuals + Practice<br><strong>Prereqs:</strong> Functions, algebra, exponents</p>
<div style="height:12px"></div>
<button onclick="window.print()" style="width:100%;padding:10px;border-radius:8px;border:none;background:linear-gradient(90deg,var(--accent2),var(--accent1));color:#04263b;font-weight:700;cursor:pointer">Save / Print</button>
</aside>
</div>
</article>
<!-- Page 4: Limits with graph -->
<article class="page" data-index="4" id="page-4" aria-labelledby="t4">
<div class="hero">
<div class="media"><img src="./ca5.jpg" alt="Limits illustration"/></div>
<div>
<h2 id="t4">Limits</h2>
<p class="muted">Limits describe the behavior of a function as the input approaches a point. They are foundational to derivatives and integrals and help define continuity.</p>
</div>
</div>
<div class="content">
<div class="card">
<h3>Interactive: approaching a limit</h3>
<p class="muted">This demo shows f(x)=sin(x)/x approaching 1 as x→0. Move the slider to pick x (both sides) and observe f(x).</p>
<div class="graph-card" id="limitGraph">
<svg id="svgLimits" viewBox="0 0 600 260" preserveAspectRatio="xMinYMin meet" aria-label="Limit graph"></svg>
<div class="controls" style="margin-top:8px">
<label for="xPos">x value (approach 0): <span id="xVal">0.5</span></label>
<input id="xPos" type="range" min="-2" max="2" step="0.01" value="0.5">
<div style="font-size:14px;color:var(--muted)">f(x) = sin(x)/x → value: <strong id="fxVal">0.9589</strong></div>
</div>
</div>
<h3 style="margin-top:12px">Continuity</h3>
<p class="muted">f is continuous at a if limₓ→a f(x) = f(a). The limit can exist even if function isn't defined at that point (removable discontinuity).</p>
</div>
<aside class="card">
<h3>Techniques</h3>
<ul class="clean">
<li>Direct substitution</li>
<li>Algebraic simplification / factoring</li>
<li>Rationalization</li>
<li>L'Hôpital's rule for indeterminate forms</li>
</ul>
</aside>
</div>
</article>
<!-- Page 5: Derivatives interactive -->
<article class="page" data-index="5" id="page-5" aria-labelledby="t5">
<div class="hero">
<div class="media"><img src="./ca1.jpg" alt="Derivative graph"/></div>
<div>
<h2 id="t5">Derivatives (Interactive)</h2>
<p class="muted">Use the controls to move a second point and see the secant slope approach the tangent (derivative). Function used: f(x)=x².</p>
</div>
</div>
<div class="content">
<div class="card">
<h3>Secant → Tangent</h3>
<div class="graph-card">
<svg id="svgDeriv" viewBox="0 0 600 260" preserveAspectRatio="xMinYMin meet" aria-label="Derivative graph"></svg>
<div class="controls">
<label>Base x: <input id="baseX" type="number" value="1" step="0.1" style="width:80px;display:inline-block;margin-left:8px"></label>
<label>h (secant distance): <span id="hVal">0.8</span></label>
<input id="hRange" type="range" min="0.01" max="2" step="0.01" value="0.8">
<div style="font-size:14px;color:var(--muted)">Secant slope: <strong id="secSlope">2.6</strong> · Tangent slope: <strong id="tanSlope">2</strong></div>
</div>
</div>
</div>
<aside class="card">
<h3>Derivative formula</h3>
<div class="formula">f'(x)=limₕ→0 (f(x+h)−f(x))/h</div>
<p class="muted" style="margin-top:10px">For f(x)=x², derivative is f'(x)=2x. At x=1 it equals 2.</p>
</aside>
</div>
</article>
<!-- Page 8: Definite Integrals with area graph -->
<article class="page" data-index="8" id="page-8" aria-labelledby="t8">
<div class="hero">
<div class="media"><img src="./ca4.jpg" alt="Definite integral"/></div>
<div>
<h2 id="t8">Definite Integrals (Area)</h2>
<p class="muted">Choose limits a and b to see area under f(x)=x² between a and b. The definite integral equals the net accumulated area (F(b)-F(a)).</p>
</div>
</div>
<div class="content">
<div class="card">
<h3>Area under curve</h3>
<div class="graph-card">
<svg id="svgArea" viewBox="0 0 600 260" preserveAspectRatio="xMinYMin meet" aria-label="Integral area graph"></svg>
<div class="controls">
<label>a: <input id="aVal" type="range" min="-1" max="2" step="0.01" value="0" style="width:100%"></label>
<label style="margin-top:6px">b: <input id="bVal" type="range" min="-1" max="3" step="0.01" value="1" style="width:100%"></label>
<div style="font-size:14px;color:var(--muted)">Computed ∫ₐᵇ x² dx ≈ <strong id="areaVal">1.000</strong></div>
</div>
</div>
</div>
<aside class="card">
<h3>How to compute</h3>
<p class="muted">If F(x) is an antiderivative of f(x), then ∫ₐᵇ f(x) dx = F(b) − F(a). For f(x)=x², F(x)=x³/3.</p>
</aside>
</div>
</article>
<!-- Other pages (kept from before) -->
<article class="page" data-index="1" id="page-1" aria-labelledby="t1">
<div class="hero">
<div class="media"><img src="./ca2.jpg" alt="Calculus notes"/></div>
<div>
<h2 id="t1">Meaning & Definition</h2>
<p class="muted">Calculus, developed by Newton and Leibniz, studies rates of change (differential calculus) and accumulation (integral calculus). It discovers properties of derivatives and integrals using the idea of summing infinitesimally small changes and limits.</p>
</div>
</div>
<div class="content">
<div class="card">
<h3>Short definition</h3>
<p class="muted">A branch of mathematics focused on understanding how quantities change and how to accumulate small quantities into a whole. Central ideas: limits, derivatives, integrals.</p>
<h3 style="margin-top:12px">Why it matters</h3>
<p class="muted">Calculus underpins modern physics, engineering, data science and economic models. It provides tools to analyze motion, growth, optimization and area/volume computations.</p>
</div>
<aside class="card">
<h3>Historical note</h3>
<p class="muted">Isaac Newton and Gottfried Wilhelm Leibniz developed calculus independently in the 17th century. Their notation and ideas made calculus a powerful computational tool.</p>
</aside>
</div>
</article>
<article class="page" data-index="2" id="page-2" aria-labelledby="t2">
<div class="hero">
<div class="media"><img src="./ca3.jpg" alt="Graphs and functions"/></div>
<div>
<h2 id="t2">Basic Calculus</h2>
<p class="muted">Basic calculus combines differentiation and integration grounded on limits and continuity. Exponents and algebra are essential prerequisites. We approach problems by analyzing functions and their behavior under small changes.</p>
</div>
</div>
<div class="content">
<div class="card">
<h3>Key building blocks</h3>
<ul class="clean">
<li>Functions & graphs</li>
<li>Limits & continuity</li>
<li>Derivatives (rate of change)</li>
<li>Integrals (area & accumulation)</li>
</ul>
<h3 style="margin-top:12px">Notation</h3>
<p class="muted">dy/dx, f'(x) for derivatives; ∫ f(x) dx for integrals; limits use lim notation.</p>
</div>
<aside class="card">
<h3>Tools & tips</h3>
<p class="muted">Visualization (graphs), symbolic manipulation, and practice are the fastest way to build fluency. GeoGebra is recommended for interactive visualization.</p>
</aside>
</div>
</article>
<article class="page" data-index="3" id="page-3" aria-labelledby="t3">
<div class="hero">
<div class="media"><img src="./ca4.jpg" alt="Derivative concept"/></div>
<div>
<h2 id="t3">Differential Calculus</h2>
<p class="muted">Differential calculus studies how functions change when inputs change. The derivative gives the instantaneous rate of change and slope of the tangent line to the graph at a point.</p>
</div>
</div>
<div class="content">
<div class="card">
<h3>Core idea</h3>
<p class="muted">The derivative is defined as the limit of the difference quotient: f'(x)=limₕ→0 (f(x+h)-f(x))/h. It measures instantaneous change.</p>
<h3 style="margin-top:12px">Rules</h3>
<ul class="clean">
<li>Power rule: d/dx[xⁿ]=n xⁿ⁻¹</li>
<li>Product rule, quotient rule</li>
<li>Chain rule for composite functions</li>
</ul>
</div>
<aside class="card">
<h3>Example</h3>
<p class="muted"><strong>f(x)=x² ⇒ f'(x)=2x</strong>. At x=1, derivative = 2 (slope of tangent).</p>
</aside>
</div>
</article>
<article class="page" data-index="6" id="page-6" aria-labelledby="t6">
<div class="hero">
<div class="media"><img src="./ca2.jpg" alt="Optimization"/></div>
<div>
<h2 id="t6">Applications of Derivatives</h2>
<p class="muted">Derivatives power many real-world calculations: maxima/minima for optimization, marginal analysis in economics, curve sketching, and motion analysis.</p>
</div>
</div>
<div class="content">
<div class="card">
<h3>Optimization</h3>
<p class="muted">Find critical points where f'(x)=0 or undefined; use second derivative or sign analysis to classify maxima or minima.</p>
<h3 style="margin-top:12px">Other uses</h3>
<ul class="clean">
<li>Related rates problems</li>
<li>Finding intervals of increase/decrease and concavity</li>
<li>Modeling marginal cost/revenue in economics</li>
</ul>
</div>
<aside class="card">
<h3>Tip</h3>
<p class="muted">Always check endpoints for global extrema when working on closed intervals.</p>
</aside>
</div>
</article>
<article class="page" data-index="7" id="page-7" aria-labelledby="t7">
<div class="hero">
<div class="media"><img src="./ca3.jpg" alt="Area under curve"/></div>
<div>
<h2 id="t7">Integral Calculus</h2>
<p class="muted">Integral calculus focuses on accumulation and area. Integration reverses differentiation and is used to compute totals from rates.</p>
</div>
</div>
<div class="content">
<div class="card">
<h3>Core idea</h3>
<p class="muted">Indefinite integrals give families of functions (plus constant). Definite integrals compute net accumulation between limits a and b.</p>
<h3 style="margin-top:12px">Fundamental Theorem</h3>
<p class="muted">If F is an antiderivative of f, then ∫ₐᵇ f(x) dx = F(b) − F(a).</p>
</div>
<aside class="card">
<h3>Example</h3>
<p class="muted">If f(x)=2x, an antiderivative is F(x)=x², so ∫₀¹2x dx = 1² − 0² = 1.</p>
</aside>
</div>
</article>
<article class="page" data-index="9" id="page-9" aria-labelledby="t9">
<div class="hero">
<div class="media"><img src="./ca5.jpg" alt="Indefinite integral"/></div>
<div>
<h2 id="t9">Indefinite Integrals</h2>
<p class="muted">Indefinite integrals return a family of antiderivatives: ∫ f(x) dx = F(x) + C, where C is an arbitrary constant.</p>
</div>
</div>
<div class="content">
<div class="card">
<h3>Examples</h3>
<p class="muted">∫ xⁿ dx = xⁿ⁺¹/(n+1) + C (n ≠ −1). ∫ cos x dx = sin x + C. ∫ eˣ dx = eˣ + C.</p>
<h3 style="margin-top:12px">When to add C</h3>
<p class="muted">Always include constant of integration for indefinite integrals because derivative of constant is zero.</p>
</div>
<aside class="card">
<h3>Practice</h3>
<p class="muted">Work through common antiderivatives tables and inverse-derivative recognition.</p>
</aside>
</div>
</article>
<article class="page" data-index="10" id="page-10" aria-labelledby="t10">
<div class="hero">
<div class="media"><img src="./ca1.jpg" alt="Integration techniques"/></div>
<div>
<h2 id="t10">Techniques of Integration</h2>
<p class="muted">Integration requires several techniques to handle various integrands: substitution, integration by parts, partial fractions, trigonometric substitution, and numerical methods.</p>
</div>
</div>
<div class="content">
<div class="card">
<h3>Common methods</h3>
<ul class="clean">
<li>Substitution (u-sub)</li>
<li>Integration by parts (∫ u dv = uv − ∫ v du)</li>
<li>Partial fraction decomposition</li>
<li>Trigonometric substitutions and identities</li>
</ul>
</div>
<aside class="card">
<h3>Tip</h3>
<p class="muted">Choose substitution to simplify inner functions; reserve parts for products of polynomial and logarithmic/trig/exponential functions.</p>
</aside>
</div>
</article>
<article class="page" data-index="11" id="page-11" aria-labelledby="t11">
<div class="hero">
<div class="media"><img src="./ca2.jpg" alt="Applications of integrals"/></div>
<div>
<h2 id="t11">Applications of Integrals</h2>
<p class="muted">Integrals compute areas, volumes (via disks/washers/shells), center of mass, total accumulated quantities and solve problems in physics, engineering and probability.</p>
</div>
</div>
<div class="content">
<div class="card">
<h3>Examples</h3>
<ul class="clean">
<li>Area between curves: ∫(top − bottom) dx</li>
<li>Volume by revolution: disk/washer and shell methods</li>
<li>Work = ∫ Force · distance</li>
</ul>
</div>
<aside class="card">
<h3>Modeling</h3>
<p class="muted">Use integrals to aggregate continuously varying rates (e.g., pollutant accumulation, total growth from instantaneous growth rate).</p>
</aside>
</div>
</article>
<article class="page" data-index="12" id="page-12" aria-labelledby="t12">
<div class="hero">
<div class="media"><img src="./ca4.jpg" alt="Calculus summary"/></div>
<div>
<h2 id="t12">Summary & Reference</h2>
<p class="muted">Calculus ties together limits, derivatives and integrals. Derivatives measure instantaneous change; integrals accumulate. Master limits, derivative rules, and integration techniques to solve applied problems.</p>
</div>
</div>
<div class="content">
<div class="card">
<h3>Quick reference formulas</h3>
<div class="formula">Derivative: f'(x)=limₕ→0 (f(x+h)−f(x))/h</div>
<div class="formula" style="margin-top:8px">Indefinite integral: ∫ f(x) dx = F(x) + C</div>
<div class="formula" style="margin-top:8px">Definite integral: ∫ₐᵇ f(x) dx = F(b) − F(a)</div>
<h3 style="margin-top:12px">Study advice</h3>
<ul class="clean">
<li>Practice many worked examples for each technique.</li>
<li>Graph functions to build geometric intuition.</li>
<li>Use software (GeoGebra) to visualize tangents and areas.</li>
</ul>
</div>
<aside class="card">
<h3>Further reading</h3>
<p class="muted">Any standard calculus text (Stewart, Thomas) or online resources (Khan Academy, Paul's Online Notes) are excellent for drills and deeper theory.</p>
<div style="height:8px"></div>
<button onclick="show(0)" style="width:100%;padding:10px;border-radius:8px;border:none;background:linear-gradient(90deg,var(--accent2),var(--accent1));color:#04263b;font-weight:700;cursor:pointer">Back to Overview</button>
</aside>
</div>
</article>
<!-- pager -->
<div class="pager" role="navigation" aria-label="Page controls">
<div class="dots" id="dots"></div>
<div style="display:flex;gap:8px">
<button class="btn" onclick="prev()" style="background:linear-gradient(90deg,var(--accent2),var(--accent1));color:#04263b;border:none;padding:8px 12px;border-radius:8px;font-weight:700;cursor:pointer">Prev</button>
<button class="btn" onclick="next()" style="background:linear-gradient(90deg,var(--accent2),var(--accent1));color:#04263b;border:none;padding:8px 12px;border-radius:8px;font-weight:700;cursor:pointer">Next</button>
</div>
</div>
</section>
</div>
<script>
/* ---------- Page navigation ---------- */
const pages = Array.from(document.querySelectorAll('.page'));
const navBtns = Array.from(document.querySelectorAll('.nav-btn'));
const dotsWrap = document.getElementById('dots');
let index = 0;
pages.forEach((p, i) => {
const d = document.createElement('div');
d.className = 'dot' + (i===0 ? ' active' : '');
d.title = p.querySelector('h2')?.textContent || ('Page '+(i+1));
d.addEventListener('click', ()=> show(i));
dotsWrap.appendChild(d);
});
const dots = Array.from(dotsWrap.children);
function show(i){
if(i<0) i = 0; if(i>pages.length-1) i = pages.length-1;
pages.forEach((p,pi)=> p.classList.toggle('active', pi===i));
navBtns.forEach(nb => nb.classList.toggle('active', Number(nb.dataset.index)===i));
dots.forEach((d,di)=> d.classList.toggle('active', di===i));
index = i;
pages[i].scrollIntoView({behavior:'smooth'});
}
navBtns.forEach(btn => btn.addEventListener('click', ()=> show(Number(btn.dataset.index))));
function next(){ show(index+1) }
function prev(){ show(index-1) }
document.addEventListener('keydown', (e)=>{ if(e.key==='ArrowRight') next(); if(e.key==='ArrowLeft') prev(); });
// ensure images hide if missing
document.querySelectorAll('img').forEach(img=> img.onerror = ()=> img.style.display='none');
// initial
show(0);
/* ---------- Limits Graph (f(x)=sin(x)/x) ---------- */
(function(){
const svg = document.getElementById('svgLimits');
svg.setAttribute('viewBox','0 0 600 260');
const w=600,h=260;
const xMin=-4, xMax=4, yMin=-0.5, yMax=1.5;
const mapX = x => ((x - xMin)/(xMax - xMin))*(w-60)+30;
const mapY = y => h - ((y - yMin)/(yMax - yMin))*(h-40) - 20;
function drawGrid(){
svg.innerHTML='';
const ns='http://www.w3.org/2000/svg';
// axes
const axisX=document.createElementNS(ns,'line'); axisX.setAttribute('x1',mapX(xMin)); axisX.setAttribute('x2',mapX(xMax));
axisX.setAttribute('y1',mapY(0)); axisX.setAttribute('y2',mapY(0)); axisX.setAttribute('stroke','rgba(230,238,248,0.12)'); axisX.setAttribute('stroke-width','1.2');
svg.appendChild(axisX);
const axisY=document.createElementNS(ns,'line'); axisY.setAttribute('x1',mapX(0)); axisY.setAttribute('x2',mapX(0));
axisY.setAttribute('y1',mapY(yMin)); axisY.setAttribute('y2',mapY(yMax)); axisY.setAttribute('stroke','rgba(230,238,248,0.12)'); axisY.setAttribute('stroke-width','1.2');
svg.appendChild(axisY);
// function path
const path=document.createElementNS(ns,'path'); let d=''; const steps=800;
for(let i=0;i<=steps;i++){
const t=i/steps;
const x = xMin + t*(xMax - xMin);
const y = (Math.abs(x) < 1e-6) ? 1 : Math.sin(x)/x;
const px=mapX(x), py=mapY(y);
d += (i===0?'M':'L') + px + ' ' + py + ' ';
}
path.setAttribute('d',d); path.setAttribute('stroke','rgba(125,211,252,0.95)'); path.setAttribute('stroke-width','2'); path.setAttribute('fill','none');
svg.appendChild(path);
}
function update(xval){
drawGrid();
const ns='http://www.w3.org/2000/svg';
const x = parseFloat(xval);
const y = (Math.abs(x) < 1e-6) ? 1 : Math.sin(x)/x;
// marker
const c=document.createElementNS(ns,'circle'); c.setAttribute('cx',mapX(x)); c.setAttribute('cy',mapY(y)); c.setAttribute('r',5); c.setAttribute('fill','rgba(96,165,250,0.95)');
svg.appendChild(c);
const t=document.createElementNS(ns,'text'); t.setAttribute('x',mapX(x)+8); t.setAttribute('y',mapY(y)-8); t.setAttribute('fill','rgba(230,238,248,0.9)'); t.setAttribute('font-size','12'); t.textContent = `(${x.toFixed(2)}, ${y.toFixed(4)})`;
svg.appendChild(t);
document.getElementById('fxVal').textContent = (Math.round(y*10000)/10000).toFixed(4);
}
const xRange = document.getElementById('xPos');
const xVal = document.getElementById('xVal');
xRange.addEventListener('input', ()=>{ xVal.textContent = xRange.value; update(xRange.value); });
// init
xVal.textContent = xRange.value;
update(xRange.value);
})();
/* ---------- Derivative Graph (f(x)=x^2) ---------- */
(function(){
const svg = document.getElementById('svgDeriv');
svg.setAttribute('viewBox','0 0 600 260');
const w=600,h=260;
const xMin=-1, xMax=3, yMin=-1, yMax=9;
const mapX = x => ((x - xMin)/(xMax - xMin))*(w-60)+30;
const mapY = y => h - ((y - yMin)/(yMax - yMin))*(h-40) - 20;
function drawBase(){
svg.innerHTML='';
const ns='http://www.w3.org/2000/svg';
// axes
const axisX=document.createElementNS(ns,'line'); axisX.setAttribute('x1',mapX(xMin)); axisX.setAttribute('x2',mapX(xMax));
axisX.setAttribute('y1',mapY(0)); axisX.setAttribute('y2',mapY(0)); axisX.setAttribute('stroke','rgba(230,238,248,0.12)'); axisX.setAttribute('stroke-width','1.2'); svg.appendChild(axisX);
const axisY=document.createElementNS(ns,'line'); axisY.setAttribute('x1',mapX(0)); axisY.setAttribute('x2',mapX(0));
axisY.setAttribute('y1',mapY(yMin)); axisY.setAttribute('y2',mapY(yMax)); axisY.setAttribute('stroke','rgba(230,238,248,0.12)'); axisY.setAttribute('stroke-width','1.2'); svg.appendChild(axisY);
// plot f(x)=x^2
const path=document.createElementNS(ns,'path'); let d='';
const steps=300;
for(let i=0;i<=steps;i++){
const t=i/steps;
const x=xMin + t*(xMax - xMin);
const y=x*x;
d += (i===0?'M':'L') + mapX(x) + ' ' + mapY(y) + ' ';
}
path.setAttribute('d',d); path.setAttribute('stroke','rgba(125,211,252,0.95)'); path.setAttribute('stroke-width','2'); path.setAttribute('fill','none'); svg.appendChild(path);
}
function update(){
drawBase();
const ns='http://www.w3.org/2000/svg';
const x = parseFloat(document.getElementById('baseX').value);
const h = parseFloat(document.getElementById('hRange').value);
const x1 = x, x2 = x + h;
const y1 = x1*x1, y2 = x2*x2;
const p1x = mapX(x1), p1y = mapY(y1);
const p2x = mapX(x2), p2y = mapY(y2);
// points
const c1=document.createElementNS(ns,'circle'); c1.setAttribute('cx',p1x); c1.setAttribute('cy',p1y); c1.setAttribute('r',5); c1.setAttribute('fill','rgba(96,165,250,0.95)'); svg.appendChild(c1);
const c2=document.createElementNS(ns,'circle'); c2.setAttribute('cx',p2x); c2.setAttribute('cy',p2y); c2.setAttribute('r',5); c2.setAttribute('fill','rgba(125,211,252,0.95)'); svg.appendChild(c2);
// secant line
const sec=document.createElementNS(ns,'line'); sec.setAttribute('x1',p1x); sec.setAttribute('y1',p1y); sec.setAttribute('x2',p2x); sec.setAttribute('y2',p2y);
sec.setAttribute('stroke','rgba(125,211,252,0.9)'); sec.setAttribute('stroke-width','2'); sec.setAttribute('stroke-dasharray','6 6'); svg.appendChild(sec);
// tangent line at x1 slope 2x1
const m = 2*x1;
const tx1x = mapX(x1 - 1.2), tx1y = mapY(y1 - m*1.2);
const tx2x = mapX(x1 + 1.2), tx2y = mapY(y1 + m*1.2);
const tan=document.createElementNS(ns,'line'); tan.setAttribute('x1',tx1x); tan.setAttribute('y1',tx1y); tan.setAttribute('x2',tx2x); tan.setAttribute('y2',tx2y);
tan.setAttribute('stroke','rgba(96,165,250,0.95)'); tan.setAttribute('stroke-width','2.2'); svg.appendChild(tan);
document.getElementById('secSlope').textContent = (Math.round(((y2-y1)/h)*100)/100).toFixed(2);
document.getElementById('tanSlope').textContent = (Math.round((2*x1)*100)/100).toFixed(2);
document.getElementById('hVal').textContent = h;
}
document.getElementById('hRange').addEventListener('input', update);
document.getElementById('baseX').addEventListener('input', update);
// init
update();
})();
/* ---------- Area (Integral) Graph (f(x)=x^2) ---------- */
(function(){
const svg = document.getElementById('svgArea');
svg.setAttribute('viewBox','0 0 600 260');
const w=600,h=260;
const xMin=-1, xMax=3, yMin=-1, yMax=9;
const mapX = x => ((x - xMin)/(xMax - xMin))*(w-60)+30;
const mapY = y => h - ((y - yMin)/(yMax - yMin))*(h-40) - 20;
function drawBase(){
svg.innerHTML='';
const ns='http://www.w3.org/2000/svg';
// axes
const axisX=document.createElementNS(ns,'line'); axisX.setAttribute('x1',mapX(xMin)); axisX.setAttribute('x2',mapX(xMax));
axisX.setAttribute('y1',mapY(0)); axisX.setAttribute('y2',mapY(0)); axisX.setAttribute('stroke','rgba(230,238,248,0.12)'); axisX.setAttribute('stroke-width','1.2'); svg.appendChild(axisX);
const axisY=document.createElementNS(ns,'line'); axisY.setAttribute('x1',mapX(0)); axisY.setAttribute('x2',mapX(0));
axisY.setAttribute('y1',mapY(yMin)); axisY.setAttribute('y2',mapY(yMax)); axisY.setAttribute('stroke','rgba(230,238,248,0.12)'); axisY.setAttribute('stroke-width','1.2'); svg.appendChild(axisY);
// plot function
const path=document.createElementNS(ns,'path'); let d='';
const steps=300;
for(let i=0;i<=steps;i++){
const t=i/steps;
const x = xMin + t*(xMax - xMin);
const y = x*x;
d += (i===0?'M':'L') + mapX(x) + ' ' + mapY(y) + ' ';
}
path.setAttribute('d',d); path.setAttribute('stroke','rgba(125,211,252,0.95)'); path.setAttribute('stroke-width','2'); path.setAttribute('fill','none'); svg.appendChild(path);
}
function update(){
drawBase();
const ns='http://www.w3.org/2000/svg';
let a = parseFloat(document.getElementById('aVal').value);
let b = parseFloat(document.getElementById('bVal').value);
if(b < a){ const t=a; a=b; b=t; } // ensure a <= b
// create area polygon from a to b by sampling
const samples = 200;
let poly = '';
for(let i=0;i<=samples;i++){
const t=i/samples;
const x = a + t*(b-a);
const y = x*x;
const px = mapX(x), py = mapY(y);
poly += `${px},${py} `;
}
// close polygon to x-axis
const lastX = mapX(b), firstX = mapX(a);
poly += `${lastX},${mapY(0)} ${firstX},${mapY(0)}`;
const polygon = document.createElementNS(ns,'polygon'); polygon.setAttribute('points', poly);
polygon.setAttribute('fill', 'rgba(125,211,252,0.18)');
polygon.setAttribute('stroke','rgba(125,211,252,0.2)');
svg.appendChild(polygon);
// labels for a and b
const la = document.createElementNS(ns,'text'); la.setAttribute('x', mapX(a)); la.setAttribute('y', mapY(0)+16); la.setAttribute('fill','rgba(230,238,248,0.9)'); la.setAttribute('font-size','12'); la.textContent = `a=${a.toFixed(2)}`; svg.appendChild(la);
const lb = document.createElementNS(ns,'text'); lb.setAttribute('x', mapX(b)); lb.setAttribute('y', mapY(0)+16); lb.setAttribute('fill','rgba(230,238,248,0.9)'); lb.setAttribute('font-size','12'); lb.textContent = `b=${b.toFixed(2)}`; svg.appendChild(lb);
// compute integral exactly for x^2: (b^3 - a^3)/3
const area = (Math.pow(b,3) - Math.pow(a,3)) / 3;
document.getElementById('areaVal').textContent = (Math.round(area*1000)/1000).toFixed(3);
}
document.getElementById('aVal').addEventListener('input', update);
document.getElementById('bVal').addEventListener('input', update);
// init
update();
})();
</script>
</body>
</html>