[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","693a7a2bca208191bcbddfa6f847ff4f","versionInt","title","Sinusoidal Functions Interactive App - Updated View","type","code/react","content","import React, { useMemo, useState, useRef } from \"react\";\n\n// Main App Component\nexport default function SinusoidalFunctionsApp() {\n const [activeSection, setActiveSection] = useState(\"overview\");\n\n const sections = [\n { id: \"overview\", label: \"Overview\" },\n { id: \"variables\", label: \"Sinusoidal Variables\" },\n { id: \"translation\", label: \"Translation\" },\n { id: \"graph\", label: \"Graph\" },\n { id: \"amplitude\", label: \"Amplitude\" },\n { id: \"period\", label: \"Period\" },\n { id: \"frequency\", label: \"Frequency\" },\n { id: \"devlog\", label: \"Dev Log\" },\n ] as const;\n\n return (\n

\n {/* Title */}\n

\n \n Sinusoidal Functions\n \n

\n\n {/* Section Selector */}\n

\n {sections.map((s) => (\n setActiveSection(s.id)}\n className={`rounded-3xl border-2 border-slate-900 px-3 py-2 text-xs sm:text-sm font-semibold tracking-wide shadow-md transition transform hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0 bg-[#d6dde4] ${\n activeSection === s.id ? \"ring-4 ring-[#f2a6ff]\" : \"\"\n }`}\n >\n {s.label}\n \n ))}\n

\n\n {/* Active Section Panel */}\n

\n {activeSection === \"overview\" && }\n {activeSection === \"variables\" && }\n {activeSection === \"translation\" && }\n {activeSection === \"graph\" && }\n {activeSection === \"amplitude\" && }\n {activeSection === \"period\" && }\n {activeSection === \"frequency\" && }\n {activeSection === \"devlog\" && }\n

\n );\n}\n\n// Shared shell for sections to keep the poster style\nfunction SectionShell({\n title,\n subtitle,\n bg,\n children,\n}: {\n title: string;\n subtitle?: string;\n bg: string;\n children: React.ReactNode;\n}) {\n return (\n

\n {title}\n

\n {subtitle && (\n

\n {subtitle}\n

\n )}\n {children}\n

\n );\n}\n\n// OVERVIEW\nfunction OverviewSection() {\n return (\n \n

\n A sinusoidal function is a smooth wave that repeats a pattern over and over.\n The general form we will use in this app is:\n

\n y = a · sin(b(x − c)) + d\n

Each letter changes the shape of the wave:

\n a – amplitude (how tall the wave is)\n
\n b – affects the period (how wide one cycle is)\n
\n c – horizontal shift (left / right)\n
\n d – vertical shift (up / down)\n

\n \n

How to use this app

Pick a section tile above.
Play with the sliders or mini-games.
Try the quizzes to earn virtual \"wave mastery\" points.

\n \n );\n}\n\nfunction GamifiedChecklist() {\n const [completed, setCompleted] = useState>({});\n const tasks = [\n { id: \"vars\", label: \"Change a, b, c, and d in the Variables section\" },\n { id: \"trans\", label: \"Win one Translation direction challenge\" },\n { id: \"amp\", label: \"Get an Amplitude question correct\" },\n { id: \"per\", label: \"Get a Period question correct\" },\n { id: \"freq\", label: \"Complete a Frequency quick tip\" },\n ];\n\n const score = Object.values(completed).filter(Boolean).length;\n\n return (\n

Wave Mastery Tracker

\n \n Score: {score} / {tasks.length}\n \n

\n When you finish a challenge in another section, tick it off here!\n

\n setCompleted((prev) => ({ ...prev, [t.id]: !prev[t.id] }))}\n className={`mt-0.5 h-4 w-4 rounded-md border border-slate-900 flex items-center justify-center text-[0.6rem] font-bold bg-white transition ${\n completed[t.id] ? \"bg-[#88cc8a]\" : \"bg-white\"\n }`}\n >\n {completed[t.id] ? \"✓\" : \"\"}\n \n {t.label}\n

\n );\n}\n\n// VARIABLES SECTION\nfunction VariablesSection() {\n const [a, setA] = useState(2);\n const [b, setB] = useState(1);\n const [c, setC] = useState(0);\n const [d, setD] = useState(0);\n\n const period = useMemo(() => (b === 0 ? Infinity : (2 * Math.PI) / Math.abs(b)), [b]);\n\n return (\n \n

Use the sliders to build your own function of the form

\n y = {a.toFixed(1)} · sin({b.toFixed(1)}(x − {c.toFixed(1)})) + {d.toFixed(1)}\n

\n\n

\n \n \n 0) or right (c < 0).\"\n value={c}\n min={-4}\n max={4}\n step={0.5}\n onChange={setC}\n />\n \n

\n\n

Quick facts

Amplitude = |a|
\n Period = 2π / |b| {Number.isFinite(period) && `≈ ${period.toFixed(2)}`}\n
Midline is y = d

\n \n

\n \n );\n}\n\nfunction VariableSlider({\n label,\n explanation,\n value,\n min,\n max,\n step,\n onChange,\n}: {\n label: string;\n explanation: string;\n value: number;\n min: number;\n max: number;\n step: number;\n onChange: (v: number) => void;\n}) {\n return (\n

\n {label}\n \n {value.toFixed(1)}\n \n

\n onChange(parseFloat(e.target.value))}\n className=\"w-full accent-[#f2a6ff]\"\n />\n {explanation && (\n

{explanation}

\n )}\n

\n );\n}\n\n// Small SVG graph used in multiple sections\nfunction MiniSineGraph({ a, b, c, d }: { a: number; b: number; c: number; d: number }) {\n const svgRef = useRef(null);\n const width = 320;\n const height = 160;\n const xMax = 2 * Math.PI;\n\n const [hover, setHover] = useState<{\n x: number;\n y: number;\n sx: number;\n sy: number;\n } | null>(null);\n\n const { polyPoints, scaleY } = useMemo(() => {\n const padding = 20;\n const yRangeEstimate = Math.max(2, Math.abs(a) + Math.abs(d) + 1);\n const sY = (height / 2 - padding) / yRangeEstimate;\n\n const data: string[] = [];\n for (let i = 0; i <= 120; i++) {\n const x = (i / 120) * xMax;\n const y = a * Math.sin(b * (x - c)) + d;\n const sx = (x / xMax) * width;\n const sy = height / 2 - y * sY;\n data.push(`${sx},${sy}`);\n }\n return { polyPoints: data.join(\" \"), scaleY: sY };\n }, [a, b, c, d]);\n\n const xTicks = [\n { value: 0, label: \"0\" },\n { value: Math.PI / 2, label: \"π/2\" },\n { value: Math.PI, label: \"π\" },\n { value: (3 * Math.PI) / 2, label: \"3π/2\" },\n { value: 2 * Math.PI, label: \"2π\" },\n ];\n\n const yTicks = [-2, -1, 0, 1, 2];\n\n const handleMove = (e: React.MouseEvent) => {\n const svg = svgRef.current;\n if (!svg) return;\n const rect = svg.getBoundingClientRect();\n const xPx = e.clientX - rect.left;\n const clampedX = Math.min(Math.max(xPx, 0), rect.width);\n const xMath = (clampedX / rect.width) * xMax;\n const yMath = a * Math.sin(b * (xMath - c)) + d;\n const sx = (xMath / xMax) * width;\n const sy = height / 2 - yMath * scaleY;\n setHover({ x: xMath, y: yMath, sx, sy });\n };\n\n const handleLeave = () => setHover(null);\n\n return (\n

Preview graph (0 to 2π)

\n \n {/* axes */}\n \n \n\n {/* x-axis ticks and labels */}\n {xTicks.map((t) => {\n const x = (t.value / xMax) * width;\n return (\n \n \n \n {t.label}\n \n \n );\n })}\n\n {/* y-axis ticks and labels */}\n {yTicks.map((v) => {\n const y = height / 2 - v * scaleY;\n if (y < 8 || y > height - 8) return null;\n return (\n \n \n \n {v}\n \n \n );\n })}\n\n {/* sine wave */}\n \n\n {/* hover marker */}\n {hover && (\n \n \n \n \n )}\n \n

\n {hover ? (\n \n x ≈ {hover.x.toFixed(2)}, y ≈ {hover.y.toFixed(2)}\n \n ) : (\n Hover over the graph to see (x, y) coordinates.\n )}\n

\n );\n}\n\n// TRANSLATION SECTION\nfunction TranslationSection() {\n const challengeBank = [\n { id: 1, prompt: \"y = sin(x) → y = sin(x) + 3\", correct: \"up\" },\n { id: 2, prompt: \"y = sin(x) → y = sin(x − 2)\", correct: \"right\" },\n { id: 3, prompt: \"y = sin(x) → y = sin(x + 1)\", correct: \"left\" },\n { id: 4, prompt: \"y = sin(x) → y = sin(x) − 4\", correct: \"down\" },\n ];\n\n const [index, setIndex] = useState(0);\n const [answer, setAnswer] = useState(null);\n const [feedback, setFeedback] = useState(null);\n\n const current = challengeBank[index];\n\n function check(ans: string) {\n setAnswer(ans);\n if (ans === current.correct) {\n setFeedback(\"Nice! You spotted the correct translation.\");\n } else {\n setFeedback(\"Close! Re-check whether the sign means left/right or up/down.\");\n }\n }\n\n function next() {\n setFeedback(null);\n setAnswer(null);\n setIndex((prev) => (prev + 1) % challengeBank.length);\n }\n\n return (\n \n

\n The variables c and d move the\n graph around without changing its basic shape.\n

\n d (vertical): y = sin(x) + d\n
d > 0 ⇒ graph shifts up; d < 0 ⇒ graph shifts down.\n
\n c (horizontal): y = sin(x − c)\n
c > 0 ⇒ graph shifts right; c < 0 ⇒ graph shifts left.\n

Teacher tip

\n Think of inside-the-parentheses changes (x − c) as affecting left/right, and outside changes (+ d) as\n affecting up/down.\n

Direction Challenge

What translation happens?

\n {current.prompt}\n

\n {([\"up\", \"down\", \"left\", \"right\"] as const).map((dir) => (\n check(dir)}\n className={`rounded-xl border-2 border-slate-900 px-2 py-1 text-xs font-semibold uppercase tracking-wide shadow-sm transition bg-[#f4f1f8] hover:-translate-y-0.5 hover:shadow-lg ${\n answer === dir ? \"ring-2 ring-[#88cc8a]\" : \"\"\n }`}\n >\n {dir}\n \n ))}\n

\n {feedback && (\n

{feedback}

\n )}\n \n New Challenge\n \n

\n \n

\n \n );\n}\n\n// GRAPH SECTION (focus on matching parameters to a wave)\nfunction GraphSection() {\n const [a, setA] = useState(1);\n const [b, setB] = useState(1);\n const [c, setC] = useState(0);\n const [d, setD] = useState(0);\n const [guess, setGuess] = useState(\"\");\n const [feedback, setFeedback] = useState(null);\n\n const buildEquation = (withSpaces: boolean) => {\n const absC = Math.abs(c);\n const inner = c === 0 ? \"x\" : c > 0 ? `x-${absC}` : `x+${absC}`;\n if (withSpaces) {\n let eq = `y = ${a} sin(${b}(${inner})) + ${d}`;\n if (d === 0) eq = `y = ${a} sin(${b}(${inner}))`;\n return eq;\n } else {\n let eq = `y=${a}sin(${b}(${inner}))+${d}`;\n if (d === 0) eq = `y=${a}sin(${b}(${inner}))`;\n return eq;\n }\n };\n\n function checkGuess() {\n const clean = guess.replace(/ +/g, \"\").toLowerCase();\n const correct = buildEquation(false).toLowerCase();\n if (clean === correct) {\n setFeedback(\"Graph match! Your equation describes this wave.\");\n } else {\n setFeedback(\"Not quite. Make sure your a, b, c, and d match the sliders.\");\n }\n }\n\n function revealEquation() {\n const pretty = buildEquation(true);\n setGuess(pretty);\n setFeedback(`This graph matches: ${pretty}`);\n }\n\n return (\n \n

\n \n

Sliders control this graph

\n {\n setA(v);\n setFeedback(null);\n }}\n />\n {\n setB(v);\n setFeedback(null);\n }}\n />\n {\n setC(v);\n setFeedback(null);\n }}\n />\n {\n setD(v);\n setFeedback(null);\n }}\n />\n

Write the equation of this graph

\n Use the form y = a sin(b(x − c)) + d (no spaces).\n If c is negative, your parentheses will look like x+something.\n

\n setGuess(e.target.value)}\n placeholder=\"Example: y=2sin(3(x-1))+1\"\n className=\"w-full rounded-xl border border-slate-500 px-3 py-1 text-xs mb-2\"\n />\n

\n \n Check\n \n \n Reveal equation\n \n

\n {feedback && (\n

{feedback}

\n )}\n

Hint

Amplitude a is the distance from midline to a peak.
b tells you how many cycles occur between 0 and 2π.
c shifts the graph left/right inside the parentheses.
d is the y-value of the midline (vertical shift).

\n \n );\n}\n\n// AMPLITUDE SECTION\nfunction AmplitudeSection() {\n const [a, setA] = useState(2);\n const [guess, setGuess] = useState(\"\");\n const [feedback, setFeedback] = useState(null);\n\n const amplitude = Math.abs(a);\n\n function check() {\n const numeric = parseFloat(guess);\n if (Number.isNaN(numeric)) {\n setFeedback(\"Type a number for the amplitude.\");\n return;\n }\n if (Math.abs(numeric - amplitude) < 0.01) {\n setFeedback(\"Correct! Amplitude is always |a|.\");\n } else {\n setFeedback(`Not quite. Remember amplitude is |a| = ${amplitude.toFixed(1)}.`);\n }\n }\n\n function reveal() {\n const ans = amplitude.toFixed(1);\n setGuess(ans);\n setFeedback(`Amplitude is |a| = ${ans}.`);\n }\n\n return (\n \n

\n The amplitude of y = a sin(bx) is |a|. It measures how far the wave goes\n above and below the midline.\n

|a| larger ⇒ taller peaks and deeper valleys.
|a| between 0 and 1 ⇒ the graph is \"squished\" vertically.
If a is negative, the graph flips over the midline, but amplitude is still positive.

Quick example

\n For y = -3 sin(x) + 1, amplitude = 3, midline is y = 1, and the graph is flipped over the midline.\n

\n \n

Amplitude quiz

Current function:

\n y = {a.toFixed(1)} sin(x)\n

\n {\n setA(v);\n setFeedback(null);\n setGuess(\"\");\n }}\n />\n

\n \n What is the amplitude of this graph?\n \n setGuess(e.target.value)}\n className=\"rounded-xl border border-slate-500 px-3 py-1 text-xs\"\n placeholder=\"Type a positive number\"\n />\n

\n \n Check\n \n \n Reveal answer\n \n

\n {feedback && (\n

{feedback}

\n )}\n

\n \n );\n}\n\n// PERIOD SECTION\nfunction PeriodSection() {\n const [b, setB] = useState(3);\n const [guess, setGuess] = useState(\"\");\n const [feedback, setFeedback] = useState(null);\n\n const period = useMemo(() => (b === 0 ? Infinity : (2 * Math.PI) / Math.abs(b)), [b]);\n\n function check() {\n if (!Number.isFinite(period)) {\n setFeedback(\"When b = 0, the graph is flat and the period is undefined.\");\n return;\n }\n const numeric = parseFloat(guess);\n if (Number.isNaN(numeric)) {\n setFeedback(\"Enter a number (you can round to 2 decimal places).\");\n return;\n }\n if (Math.abs(numeric - period) < 0.1) {\n setFeedback(\"Yes! Period = 2π / |b|.\");\n } else {\n setFeedback(`Close. 2π / |b| ≈ ${period.toFixed(2)}.`);\n }\n }\n\n function reveal() {\n if (!Number.isFinite(period)) {\n setFeedback(\"When b = 0, the graph is flat and the period is undefined.\");\n } else {\n const ans = period.toFixed(2);\n setGuess(ans);\n setFeedback(`The period is 2π / |b| ≈ ${ans}.`);\n }\n }\n\n return (\n \n

\n The period of y = a sin(bx) is given by\n 2π / |b|. It is the horizontal length of one complete cycle.\n

b = 1 → period = 2π (the parent sine graph).
|b| > 1 → the wave cycles faster, so the period is smaller.
0 < |b| < 1 → the wave cycles slower, so the period is larger.

Example

\n For y = sin(3x), b = 3 so period = 2π/3. That means the pattern repeats every 2π/3 units along the x-axis.\n

\n \n

Period practice

Adjust b and estimate the period.

\n {\n setB(v);\n setFeedback(null);\n setGuess(\"\");\n }}\n />\n

\n Current function: y = sin({b.toFixed(1)}x)\n

\n \n What is its period? (Use a decimal approximation.)\n \n setGuess(e.target.value)}\n className=\"mt-1 rounded-xl border border-slate-500 px-3 py-1 text-xs w-full\"\n placeholder=\"e.g. 2.09\"\n />\n

\n \n Check\n \n \n Reveal answer\n \n

\n {Number.isFinite(period) && (\n

\n Exact value: 2π / |b| ≈ {period.toFixed(2)}\n

\n )}\n {feedback && (\n

{feedback}

\n )}\n

\n \n );\n}\n\n// FREQUENCY SECTION\nfunction FrequencySection() {\n const [b, setB] = useState(2);\n const [guess, setGuess] = useState(\"\");\n const [feedback, setFeedback] = useState(null);\n\n const period = useMemo(() => (b === 0 ? Infinity : (2 * Math.PI) / Math.abs(b)), [b]);\n const frequency = Number.isFinite(period) && period !== 0 ? 1 / period : 0;\n\n function check() {\n if (!Number.isFinite(period) || period === 0) {\n setFeedback(\"With b = 0 there is no repeating cycle, so frequency is not defined.\");\n return;\n }\n const numeric = parseFloat(guess);\n if (Number.isNaN(numeric)) {\n setFeedback(\"Enter a number for the frequency.\");\n return;\n }\n if (Math.abs(numeric - frequency) < 0.02) {\n setFeedback(\"Yes! Frequency is 1 / period.\");\n } else {\n setFeedback(`Almost. 1 / period ≈ ${frequency.toFixed(3)}.`);\n }\n }\n\n function reveal() {\n if (!Number.isFinite(period) || period === 0) {\n setFeedback(\"With b = 0 there is no repeating cycle, so frequency is not defined.\");\n } else {\n const ans = frequency.toFixed(3);\n setGuess(ans);\n setFeedback(`Frequency is 1 / period ≈ ${ans}.`);\n }\n }\n\n return (\n \n

\n Frequency tells us how many complete cycles happen in a fixed length on\n the x-axis. For the standard sine function on [0, 2π], frequency is the number of waves between 0 and 2π.\n

Frequency and period are reciprocals: frequency = 1 / period.
If b = 3, then there are 3 full cycles from 0 to 2π.
Larger |b| ⇒ more cycles in the same interval ⇒ higher frequency.

Quick tip

\n Instead of computing 2π / |b| first, you can often read the frequency as |b| when you look at how many\n cycles appear between 0 and 2π.\n

\n \n

Frequency challenge

\n {\n setB(v);\n setFeedback(null);\n setGuess(\"\");\n }}\n />\n

\n Current function: y = sin({b.toFixed(0)}x)\n

\n Period ≈ {Number.isFinite(period) ? period.toFixed(2) : \"∞\"}, so frequency ≈ 1 / period.\n

\n \n What is the frequency (waves per unit length)?\n \n setGuess(e.target.value)}\n className=\"mt-1 rounded-xl border border-slate-500 px-3 py-1 text-xs w-full\"\n placeholder=\"e.g. 0.477\"\n />\n

\n \n Check\n \n \n Reveal answer\n \n

\n {feedback && (\n

{feedback}

\n )}\n

\n \n );\n}\n\n// DEV LOG SECTION\nfunction DevLogSection() {\n return (\n \n

Design goals

Match the original classroom poster colors and rounded-card style.
Turn each concept (variables, translation, period, etc.) into an interactive mini-lesson.
Add light gamification with checklists, quizzes, and instant feedback.

Technical notes

Built as a single React component file with Tailwind utility classes.
\n The small sine graphs reuse one MiniSineGraph component that draws an SVG\n polyline.\n
\n Hovering over any graph uses the mouse position to compute the corresponding (x, y) point on the curve and\n shows it as a tooltip readout.\n

Ideas for extension

Add saving of quiz scores for different students.
Include cosine and tangent modes for comparison.
Let students create and share their own sinusoidal challenges.

\n \n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","3821672089320458995","traceTime",1782348087884]