[{"_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","692ee06db4448191bd34745458d0b9b4","versionInt","title","Ride The Sine Interactive Game V2","type","code/react","content","import React, { useState, useMemo } from \"react\";\n\n// Main app component\nexport default function RideTheSineApp() {\n const LEVELS = {\n beginner: {\n label: \"Beginner\",\n description:\n \"Start here to explore how each variable in y = a sin(b(x − c)) + d changes the wave.\",\n missions: [\n {\n id: 1,\n title: \"Meet the Classic Wave\",\n story:\n \"Venellope just turned on the Ferris wheel. Match the basic sine wave so the wheel spins smoothly!\",\n target: { a: 1, b: 1, c: 0, d: 0 },\n equationLabel: \"y = 1·sin(1·(x − 0)) + 0\",\n },\n {\n id: 2,\n title: \"Make It Taller!\",\n story:\n \"She wants the Ferris wheel to be extra tall. Double the height of the wave!\",\n target: { a: 2, b: 1, c: 0, d: 0 },\n equationLabel: \"y = 2·sin(1·(x − 0)) + 0\",\n },\n {\n id: 3,\n title: \"Spin Faster\",\n story:\n \"The guests are getting impatient. Increase how fast the wheel repeats!\",\n target: { a: 1, b: 2, c: 0, d: 0 },\n equationLabel: \"y = 1·sin(2·(x − 0)) + 0\",\n },\n {\n id: 4,\n title: \"Shift Up\",\n story:\n \"The whole Ferris wheel was built on a taller hill. Move the entire wave up!\",\n target: { a: 1, b: 1, c: 0, d: 2 },\n equationLabel: \"y = 1·sin(1·(x − 0)) + 2\",\n },\n ],\n },\n advanced: {\n label: \"Advanced\",\n description:\n \"Now combine changes to amplitude, period, phase shift, and vertical shift.\",\n missions: [\n {\n id: 5,\n title: \"Night Ride Offset\",\n story:\n \"Guests are loading at a different starting angle. Match the phase-shifted wheel!\",\n target: { a: 1.5, b: 1, c: Math.PI / 2, d: 0 },\n equationLabel: \"y = 1.5·sin(1·(x − π/2)) + 0\",\n },\n {\n id: 6,\n title: \"Compressed and Raised\",\n story:\n \"The wheel is smaller but built on a platform. Match this squished and lifted wave.\",\n target: { a: 0.8, b: 3, c: 0, d: 1 },\n equationLabel: \"y = 0.8·sin(3·(x − 0)) + 1\",\n },\n {\n id: 7,\n title: \"Shifted and Stretched\",\n story:\n \"Venellope rebuilt the wheel so it starts later and swings wider.\",\n target: { a: 2.2, b: 0.5, c: Math.PI / 3, d: -1 },\n equationLabel: \"y = 2.2·sin(0.5·(x − π/3)) − 1\",\n },\n ],\n },\n expert: {\n label: \"Expert\",\n description:\n \"Tackle trickier combinations and think like a Ferris-wheel engineer!\",\n missions: [\n {\n id: 8,\n title: \"Secret Midnight Pattern\",\n story:\n \"The park hides a secret pattern only shown at midnight. Recreate its exact motion!\",\n target: { a: 1.7, b: 1.5, c: Math.PI / 4, d: 0.5 },\n equationLabel: \"y = 1.7·sin(1.5·(x − π/4)) + 0.5\",\n },\n {\n id: 9,\n title: \"Mirror in the Sky\",\n story:\n \"The wheel reflects in a lake below. A flipped, shifted sine wave appears.\",\n target: { a: -2, b: 1.2, c: 0, d: -0.5 },\n equationLabel: \"y = −2·sin(1.2·(x − 0)) − 0.5\",\n },\n ],\n },\n };\n\n const [levelKey, setLevelKey] = useState(\"beginner\");\n const [missionIndex, setMissionIndex] = useState(0);\n const [guess, setGuess] = useState({ a: 1, b: 1, c: 0, d: 0 });\n const [feedback, setFeedback] = useState(\"\");\n const [success, setSuccess] = useState(false);\n const [xp, setXp] = useState(0);\n\n const level = LEVELS[levelKey];\n const mission = level.missions[missionIndex];\n\n const resetGuessToMission = () => {\n setGuess({ a: 1, b: 1, c: 0, d: 0 });\n setFeedback(\"\");\n setSuccess(false);\n };\n\n const handleChangeLevel = (key: keyof typeof LEVELS) => {\n setLevelKey(key);\n setMissionIndex(0);\n resetGuessToMission();\n };\n\n const handleCheck = () => {\n const { a, b, c, d } = guess;\n const t = mission.target;\n const diffA = Math.abs(a - t.a);\n const diffB = Math.abs(b - t.b);\n const diffC = Math.abs(c - t.c);\n const diffD = Math.abs(d - t.d);\n\n const totalError = diffA + diffB + diffC + diffD;\n const tolerance = 0.8; // sum of differences allowed\n\n if (totalError <= tolerance) {\n setSuccess(true);\n setXp((prev) => prev + 100);\n setFeedback(\n \"Perfect match! The Ferris wheel spins exactly like the target sine wave. You earned 100 XP.\"\n );\n } else {\n const hints: string[] = [];\n if (diffA > 0.25) {\n hints.push(\n a > t.a\n ? \"a is too big: the amplitude |a| (wheel radius) is too large.\"\n : \"a is too small: the amplitude |a| (wheel radius) is too small.\"\n );\n }\n if (diffB > 0.25) {\n hints.push(\n b > t.b\n ? \"b is too big: the wheel completes too many rotations in the same x-range (period is too short).\"\n : \"b is too small: the wheel turns too slowly (period is too long).\"\n );\n }\n if (diffC > 0.25) {\n hints.push(\n c > t.c\n ? \"c is too big: the starting angle is shifted too far to the right.\"\n : \"c is too small: the starting angle is too far to the left.\"\n );\n }\n if (diffD > 0.25) {\n hints.push(\n d > t.d\n ? \"d is too big: the whole graph (wheel center) is too high.\"\n : \"d is too small: the whole graph (wheel center) is too low.\"\n );\n }\n setSuccess(false);\n setFeedback(\n \"Not quite yet. Re-check your graph and try again! \" +\n (hints.length ? \"\\nHints: \" + hints.join(\" \") : \"\")\n );\n }\n };\n\n const handleNextMission = () => {\n const nextIndex = missionIndex + 1;\n if (nextIndex < level.missions.length) {\n setMissionIndex(nextIndex);\n } else {\n setMissionIndex(0);\n }\n resetGuessToMission();\n };\n\n const handleGuessChange = (key: keyof typeof guess, value: string) => {\n const numeric = Number(value);\n if (Number.isNaN(numeric)) return;\n setGuess((prev) => ({ ...prev, [key]: numeric }));\n };\n\n // Ferris-wheel stats for current target\n const radius = Math.abs(mission.target.a);\n const period = (2 * Math.PI) / Math.abs(mission.target.b || 1);\n\n return (\n

\n {/* Header */}\n

\n RIDE THE SINE\n

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

\n Help Venellope tune her pixel Ferris wheel! Adjust the parameters a, b, c, and d to match the target sine wave and unlock new missions. Here x plays the role of θ in standard position (starting from the positive x-axis), so you're literally controlling the wheel's angle and height.\n

\n\n {/* Level selection */}\n

\n SELECT LEVEL\n

\n {Object.entries(LEVELS).map(([key, value]) => (\n handleChangeLevel(key as keyof typeof LEVELS)}\n className={`relative flex-1 md:flex-none px-5 py-3 border-4 rounded-xl text-left text-sm md:text-base shadow-[4px_4px_0_rgba(0,0,0,0.6)] cursor-pointer transition transform active:translate-y-0.5 active:translate-x-0.5 ${\n levelKey === key\n ? \"bg-[#ffd1f0] text-[#8b0048] border-[#ff9ad1]\"\n : \"bg-[#ffe8f6] text-[#8b0048] border-[#f0b0d6] hover:bg-[#fff6fb]\"\n }`}\n >\n {value.label}\n {value.description}\n \n ))}\n

MISSION LOG

\n XP: {xp}\n

\n Current level: {level.label}\n

\n Mission: {mission.title}\n

\n\n {/* Game panel */}\n

\n {level.label} Mission #{mission.id}\n

{mission.title}

{mission.story}

\n Target wave: {mission.equationLabel}\n

\n Ferris wheel stats: radius ≈ {radius.toFixed(2)} units · period = 2π / |b| ≈ {period.toFixed(2)} (x-units per full rotation)\n

\n\n {/* Graph + Ferris wheel */}\n

\n {/* Ferris wheel driven by current guess */}\n

\n \n

\n {/* Sine graph */}\n

\n \n

\n Pink = target wave · Teal = your wave · x in radians · y as height (displacement)\n

\n\n {/* Controls */}\n

\n handleGuessChange(\"a\", v)}\n />\n handleGuessChange(\"b\", v)}\n />\n handleGuessChange(\"c\", v)}\n showPiHint\n />\n handleGuessChange(\"d\", v)}\n />\n

\n\n {/* Action buttons & feedback */}\n

\n \n {success ? \"Next Mission\" : \"Check Answer\"}\n \n \n Reset\n \n

\n {feedback ||\n \"Tip: Match the radius/height first (|a|), then how many full waves you see (b via period 2π/|b|), then slide left/right (c), and finally move everything up or down (d).\"}\n

\n\n {/* Learning notes */}\n

\n AFTER VARIABLE DEFINITION\n

\n When you press Check Answer, the app compares your wave to the target wave using the formula y = a sin(b(x − c)) + d.\n

\n a · Vertical stretch / reflection — the amplitude is determined by |a|, the distance from the midline to a peak. If a < 0, the motion is flipped vertically, but the amplitude stays |a|.\n
\n b · Horizontal stretch / compression — b affects the period T = 2π / |b|. Larger |b| makes the wheel complete more cycles in the same x-range (faster turns); smaller |b| stretches the wave (slower turns).\n
\n c · Horizontal (phase) shift — slides the pattern left or right. It changes the starting angle of the Ferris wheel, like choosing which cart is at the bottom at x = 0.\n
\n d · Vertical shift — moves the whole pattern up or down. For the Ferris wheel, it's the height of the center, as if you built the ride on a hill or in a valley.\n

\n Think of x like θ in standard position: the initial side is the positive x-axis and angles increase counterclockwise. Your sliders are literally engineering the ride.\n

\n\n \n

\n );\n}\n\n/* ---------------- Sine graph ---------------- */\n\ninterface SineParams {\n a: number;\n b: number;\n c: number;\n d: number;\n}\n\nfunction SineGraph({ target, guess }: { target: SineParams; guess: SineParams }) {\n const width = 600;\n const height = 220;\n const padding = 30;\n const xMin = -2 * Math.PI;\n const xMax = 2 * Math.PI;\n const yMin = -4;\n const yMax = 4;\n\n const { targetPath, guessPath, axis } = useMemo(() => {\n const scaleX = (x: number) =>\n padding + ((x - xMin) / (xMax - xMin)) * (width - 2 * padding);\n const scaleY = (y: number) =>\n height -\n (padding + ((y - yMin) / (yMax - yMin)) * (height - 2 * padding));\n\n const makePath = (params: SineParams) => {\n const { a, b, c, d } = params;\n const steps = 200;\n const dx = (xMax - xMin) / steps;\n let dStr = \"\";\n for (let i = 0; i <= steps; i++) {\n const x = xMin + i * dx;\n // core formula: y = a sin(b(x − c)) + d\n const y = a * Math.sin(b * (x - c)) + d;\n const X = scaleX(x);\n const Y = scaleY(y);\n dStr += i === 0 ? `M ${X} ${Y}` : ` L ${X} ${Y}`;\n }\n return dStr;\n };\n\n const xAxisY = scaleY(0);\n const yAxisX = scaleX(0);\n\n return {\n targetPath: makePath(target),\n guessPath: makePath(guess),\n axis: { xAxisY, yAxisX },\n };\n }, [target, guess]);\n\n return (\n \n {/* grid */}\n \n \n \n \n \n \n\n {/* axes */}\n \n \n\n {/* axis labels */}\n \n x (radians)\n \n \n y (height)\n \n\n {/* target & guess paths */}\n \n \n \n );\n}\n\n/* ---------------- Ferris wheel ---------------- */\n\nfunction FerrisWheel({ params }: { params: SineParams }) {\n const size = 160;\n const cx = size / 2;\n const baseRadius = 40;\n\n const a = params.a ?? 1;\n const b = params.b ?? 1;\n const c = params.c ?? 0;\n const d = params.d ?? 0;\n\n // Wheel radius grows with |a| (amplitude)\n const radius = baseRadius + Math.min(Math.abs(a) * 15, 35);\n\n // Center height shifts with d\n const cy = size / 2 + 10 - d * 5;\n\n // Cart count loosely tied to |b|\n const rawCarts = 8 + Math.round(Math.abs(b) * 2);\n const cartCount = Math.max(6, Math.min(14, rawCarts));\n\n // Phase shift changes starting angle\n const angleOffset = c; // radians\n\n const carts: { id: number; x: number; y: number }[] = [];\n for (let i = 0; i < cartCount; i++) {\n const angle = angleOffset + (2 * Math.PI * i) / cartCount;\n const x = cx + radius * Math.cos(angle);\n const y = cy + radius * Math.sin(angle);\n carts.push({ id: i, x, y });\n }\n\n return (\n \n {/* base */}\n \n\n {/* supports */}\n \n \n\n {/* wheel ring */}\n \n\n {/* spokes & carts */}\n {carts.map((cart) => (\n \n \n \n \n ))}\n\n {/* hub */}\n \n \n );\n}\n\n/* ---------------- Controls ---------------- */\n\ninterface SineControlProps {\n label: string;\n description: string;\n value: number;\n min: number;\n max: number;\n step: number;\n onChange: (value: string) => void;\n showPiHint?: boolean;\n}\n\nfunction SineControl({\n label,\n description,\n value,\n min,\n max,\n step,\n onChange,\n showPiHint = false,\n}: SineControlProps) {\n return (\n

\n {label}\n

{description}

\n onChange(e.target.value)}\n className=\"flex-1 accent-[#ff64c4]\"\n />\n onChange(e.target.value)}\n className=\"w-16 px-1 py-0.5 text-xs border border-[#ffbfe2] rounded bg-white text-[#4b0030]\"\n />\n

\n {showPiHint && (\n

\n Hint: π ≈ 3.14. Try values like -3.14, -1.57, 1.57, 3.14.\n

\n )}\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","11880223611009420801","traceTime",1782326185540]