Repository: Hestenb62/_legacy_backup
Author: Hesten Berger
Commit Message: updated code base
URL: https://github.com/Hestenb62/_legacy_backup/commit/9c7d97a5008b3014890ea0b010b6c2f7b8608602
Code Changes:
diff --git a/assets/data/lessons/k-math-m1-a-1.json b/assets/data/lessons/k-math-m1-a-1.json
deleted file mode 100644
index bb4ee59..0000000
--- a/assets/data/lessons/k-math-m1-a-1.json
+++ /dev/null
@@ -1,206 +0,0 @@
-{
- "id": "k-math-m1-a-1",
- "code": "K.M1.A.1",
- "standard": "HSF.IF.B.4",
- "levelId": "k",
- "requiresMathJax": true,
- "meta": {
- "title": "Graphs of Piecewise Linear Functions",
- "pageTitle": "Graphs of Piecewise Linear Functions | Hesten's Learning",
- "description": "Define appropriate quantities from physical situations, choose logical scales, and translate actions into piecewise graphs.",
- "pageDescription": "Learn how to define quantities, choose scales, and translate physical actions into piecewise graphs with interactive stories.",
- "author": "Hesten's Learning Team",
- "badge": "Math Lesson K.M1.A.1",
- "badgeIcon": "fa-calculator"
- },
- "overview": {
- "title": "Student & Teacher Overview: Lesson 1",
- "pill": "Piecewise Linear Functions",
- "text": "In this lesson, you will learn to define appropriate quantities from physical situations, choose logical scales, and translate actions into piecewise graphs. Explore the interactive ladder simulation below, and read the classroom discussion blocks to master these concepts.",
- "outcomes": [
- "Define appropriate variables to represent a physical situation.",
- "Choose and interpret the scale and origin for a coordinate plane.",
- "Understand that the slope of each line segment represents the average rate of change."
- ],
- "teacherInsight": "If students struggle, physically act out the story. Place tape on the floor and have them walk forward (positive slope), stand still (zero slope), and walk backward (negative slope) while drawing the graph together."
- },
- "content": [
- {
- "type": "interactive-ladder",
- "title": "Animated Ladder Descent",
- "desc": "Observe the physical elevation of the climber as he descends and pauses.",
- "graphTitle": "Graph: Elevation vs. Time #3",
- "graphDesc": "Watch the live synchronized marker trace the slope changes on the piecewise graph."
- },
- {
- "type": "teacher-concepts",
- "title": "Teacher Guide Concepts: Deepen Your Understanding",
- "concepts": [
- {
- "title": "Concept 1: Is a 2.5 ft/min Descent Speed Realistic on a Ladder?",
- "text": "In Example 1 of the teacher materials, students analyze a graph with a slope representing $2.5\\text{ ft/min}$. While mathematically sound, a rate of $2.5\\text{ ft/min}$ is incredibly slow for a person physically moving down a standard ladder (about $0.5\\text{ inches per second}$). If we shift the horizontal unit of time from minutes to seconds, a speed of $2.5\\text{ ft/sec}$ becomes perfectly realistic for a steady descent."
- },
- {
- "title": "Concept 2: Calculating Average Rate of Change",
- "text": "To compute the average rate of change over any interval, use the change in elevation divided by the change in time:",
- "formula": "Average Rate of Change = \\frac{\\Delta \\text{Elevation}}{\\Delta \\text{Time}} = \\frac{h(t_2) - h(t_1)}{t_2 - t_1}",
- "example": "For instance, between $t = 0$ and $t = 6$ seconds on our ladder descent: $\\frac{3 - 10}{6 - 0} = \\frac{-7}{6} \\approx -1.17\\text{ ft/sec}$. This negative rate represents a descent. When discussing descent speed, we refer to its absolute value: $1.17\\text{ ft/sec}$."
- },
- {
- "title": "Concept 3: The 9 Distinct Time Intervals of the Video Story",
- "text": "In the lesson Exit Ticket, teachers analyze the full video of a man traversing stairs and platforms, which features nine distinct linear segments. Segmenting graphs into non-overlapping time intervals is a vital skill. Here are the exact nine time intervals identified in the curriculum guide:",
- "intervals": [
- "1. Between 0 and 3 sec",
- "2. Between 3 and 5.5 sec",
- "3. Between 5.5 and 7 sec",
- "4. Between 7 and 8.5 sec",
- "5. Between 8.5 and 9 sec",
- "6. Between 9 and 11 sec",
- "7. Between 11 and 12.7 sec",
- "8. Between 12.7 and 13 sec",
- "9. From 13 sec onward"
- ]
- }
- ]
- },
- {
- "type": "story-builder",
- "title": "Design Your Own Piecewise Graphing Story",
- "desc": "Modify each step of the journey and watch the custom graph below transform accordingly."
- },
- {
- "type": "study-guides",
- "title": "Visual Study Guides",
- "desc": "Toggle tabs below to explore interactive visual explainers of core concepts."
- }
- ],
- "vocabulary": [
- {
- "term": "Piecewise Linear Function",
- "definition": "A function defined by multiple linear segments, each covering a specific interval of time or domain. The overall graph looks like joined straight lines with corners."
- },
- {
- "term": "Average Rate of Change",
- "definition": "The change in the dependent variable (elevation) divided by the change in the independent variable (time) over a given interval. Graphically, this is the slope of the line segment."
- },
- {
- "term": "Independent Variable",
- "definition": "The input value of a function, which changes independently (usually time, graphed on the horizontal axis)."
- },
- {
- "term": "Dependent Variable",
- "definition": "The output value of a function, which depends on the input value (usually elevation/height, graphed on the vertical axis)."
- }
- ],
- "practiceQuestions": [
- {
- "question": "The elevation-versus-time graph in the Exploratory Challenge is a piecewise linear function composed of nine distinct linear segments. Over which nine consecutive time intervals is each linear function defined?",
- "options": [
- "0 to 3 sec, 3 to 5.5 sec, 5.5 to 7 sec, 7 to 8.5 sec, 8.5 to 9 sec, 9 to 11 sec, 11 to 12.7 sec, 12.7 to 13 sec, and 13 sec onward",
- "0 to 2 sec, 2 to 4 sec, 4 to 6 sec, 6 to 8 sec, 8 to 10 sec, 10 to 12 sec, 12 to 14 sec, 14 to 16 sec, and 16 sec onward",
- "0 to 5 sec, 5 to 10 sec, 10 to 15 sec, and 15 to 20 sec only",
- "A single continuous interval from 0 to 15 seconds without discrete piecewise intervals"
- ],
- "correct": 0,
- "explanation": "From the official Eureka Math Exit Ticket Key: The nine distinct time intervals identified from the video story are: between 0 and 3 sec; between 3 and 5.5 sec; between 5.5 and 7 sec; between 7 and 8.5 sec; between 8.5 and 9 sec; between 9 and 11 sec; between 11 and 12.7 sec; between 12.7 and 13 sec; and 13 sec onward."
- },
- {
- "question": "In a piecewise linear graph of elevation vs. time for a ladder descent, what does a horizontal segment ($m = 0$) indicate?",
- "options": [
- "The climber is stopped at a constant elevation (e.g., pausing to drink water or rest).",
- "The climber is descending at an infinite speed.",
- "The ladder has collapsed to zero elevation.",
- "Time has temporarily stopped moving forward."
- ],
- "correct": 0,
- "explanation": "A horizontal segment represents a rate of change of 0 ft/sec ($\frac{\\Delta h}{\\Delta t} = 0$), meaning elevation remains constant while time continues to advance."
- }
- ],
- "citation": {
- "title": "Source Citation (MLA)",
- "text": "Great Minds. \"Graphs of Piecewise Linear Functions.\" Eureka Math, 2015. NYS Common Core Mathematics Curriculum.",
- "subtext": "Developed using lesson materials from standard algebra curricula.",
- "lessonId": "L-ID-PIECEWISE-L1"
- },
- "scripts": "\n // ==================== LESSON 1: LADDER DESCENT ANIMATION ENGINE ====================\n let ladderAnimationTimer = null;\n let ladderTime = 0;\n const totalLadderDuration = 15; // seconds\n const ladderClimber = document.getElementById('ladder-climber');\n const trackerDot = document.getElementById('tracker-dot');\n const displayTimeL1 = document.getElementById('display-time-l1');\n const displayStatusL1 = document.getElementById('display-status-l1');\n const btnPlayL1 = document.getElementById('btn-play-l1');\n\n function toggleLadderAnimation() {\n if (ladderAnimationTimer) {\n // Pause animation\n clearInterval(ladderAnimationTimer);\n ladderAnimationTimer = null;\n if (btnPlayL1) btnPlayL1.innerText = 'Resume Journey';\n if (displayStatusL1) displayStatusL1.innerText = 'Paused';\n } else {\n // Start animation loop\n if (btnPlayL1) btnPlayL1.innerText = 'Pause Journey';\n if (displayStatusL1) displayStatusL1.innerText = 'Climbing';\n if (trackerDot) trackerDot.style.display = 'block';\n\n ladderAnimationTimer = setInterval(() => {\n ladderTime += 0.05;\n if (ladderTime >= totalLadderDuration) {\n ladderTime = totalLadderDuration;\n clearInterval(ladderAnimationTimer);\n ladderAnimationTimer = null;\n if (btnPlayL1) btnPlayL1.innerText = 'Restart Journey';\n if (displayStatusL1) displayStatusL1.innerText = 'Completed';\n }\n updateLadderState(ladderTime);\n }, 50);\n }\n }\n\n function resetLadderAnimation() {\n if (ladderAnimationTimer) {\n clearInterval(ladderAnimationTimer);\n ladderAnimationTimer = null;\n }\n ladderTime = 0;\n updateLadderState(0);\n if (btnPlayL1) btnPlayL1.innerText = 'Start Journey';\n if (displayStatusL1) displayStatusL1.innerText = 'Ready';\n if (trackerDot) trackerDot.style.display = 'none';\n }\n\n // Calculate and update the physical and graphed position coordinates\n function updateLadderState(time) {\n let height = 10;\n let statusText = 'Descending';\n\n // Reset segment highlight stylings\n for (let i = 1; i <= 4; i++) {\n const segEl = document.getElementById(`segment-info-${i}`);\n if (segEl) {\n segEl.className = 'lesson-segment-item';\n }\n }\n\n if (time <= 6) {\n // Interval 1: 0 to 6 seconds. Linear descent from 10ft down to 3ft.\n height = 10 - (7 / 6) * time;\n const s1 = document.getElementById('segment-info-1');\n if (s1) s1.className = 'lesson-segment-item font-bold text-rose-500';\n } else if (time <= 8.5) {\n // Interval 2: 6 to 8.5 seconds. Drinking water (stays flat at 3ft)\n height = 3;\n statusText = 'Drinking Water';\n const s2 = document.getElementById('segment-info-2');\n if (s2) s2.className = 'lesson-segment-item font-bold text-rose-500';\n } else if (time <= 10) {\n // Interval 3: 8.5 to 10 seconds. Descent to ground (3ft to 0ft)\n height = 3 - (3 / 1.5) * (time - 8.5);\n const s3 = document.getElementById('segment-info-3');\n if (s3) s3.className = 'lesson-segment-item font-bold text-rose-500';\n } else {\n // Interval 4: 10 to 15 seconds. Walk in the kitchen (0ft elevation)\n height = 0;\n statusText = 'Walking into kitchen';\n const s4 = document.getElementById('segment-info-4');\n if (s4) s4.className = 'lesson-segment-item font-bold text-rose-500';\n }\n\n // Limit bounds safely\n height = Math.max(0, Math.min(10, height));\n\n // Update physical climber height on page layout\n const bottomPercent = 24 + (height * 22.8);\n if (ladderClimber) ladderClimber.style.bottom = `${bottomPercent}px`;\n const bubble = document.getElementById('elevation-bubble');\n if (bubble) bubble.innerText = `Height: ${height.toFixed(1)} ft`;\n if (displayTimeL1) displayTimeL1.innerText = time.toFixed(1);\n if (displayStatusL1) displayStatusL1.innerText = statusText;\n\n // Map graph tracking node position\n const trackerX = 40 + (time / 15) * 340;\n const trackerY = 260 - (height / 10) * 240;\n\n if (trackerDot) {\n trackerDot.setAttribute('cx', trackerX);\n trackerDot.setAttribute('cy', trackerY);\n }\n }\n\n // ==================== USER CUSTOM STORY PLOTTER ====================\n function updateCustomGraph() {\n const valAEl = document.getElementById('custom-val-a');\n const valBEl = document.getElementById('custom-val-b');\n const valCEl = document.getElementById('custom-val-c');\n if (!valAEl || !valBEl || !valCEl) return;\n\n const valA = parseFloat(valAEl.value);\n const valB = parseFloat(valBEl.value);\n const valC = parseFloat(valCEl.value);\n\n // Update text labels\n const lblA = document.getElementById('custom-lbl-a');\n const lblB = document.getElementById('custom-lbl-b');\n const lblC = document.getElementById('custom-lbl-c');\n if (lblA) lblA.innerText = valA;\n if (lblB) lblB.innerText = valB;\n if (lblC) lblC.innerText = valC;\n\n // Update SVG nodes\n const yA = 170 - (valA / 15) * 150;\n const yB = 170 - (valB / 15) * 150;\n const yC = 170 - (valC / 15) * 150;\n\n const nodeA = document.getElementById('user-node-a');\n const nodeB = document.getElementById('user-node-b');\n const nodeC = document.getElementById('user-node-c');\n if (nodeA) nodeA.setAttribute('cy', yA);\n if (nodeB) nodeB.setAttribute('cy', yB);\n if (nodeC) nodeC.setAttribute('cy', yC);\n\n // Reconstruct path string\n const pathD = `M 30,170 L 130,${yA} L 205,${yB} L 280,${yC}`;\n const pathEl = document.getElementById('user-graph-path');\n if (pathEl) pathEl.setAttribute('d', pathD);\n\n // Generate verbal descriptions\n const storyList = document.getElementById('custom-story-output');\n if (!storyList) return;\n storyList.innerHTML = '';\n\n let segment1Text = `0 to 4s: Climber `;\n if (valA > 0) {\n segment1Text += `climbs from ground level to ${valA} feet.`;\n } else {\n segment1Text += `remains flat at ground level.`;\n }\n\n let segment2Text = `4 to 7s: Climber `;\n if (valB > valA) {\n segment2Text += `continues climbing up from ${valA} feet to ${valB} feet.`;\n } else if (valB < valA) {\n segment2Text += `descends down from ${valA} feet to ${valB} feet.`;\n } else {\n segment2Text += `remains completely stationary at ${valA} feet.`;\n }\n\n let segment3Text = `7 to 10s: Climber `;\n if (valC > valB) {\n segment3Text += `ascends up to ${valC} feet.`;\n } else if (valC < valB) {\n segment3Text += `descends down to ${valC} feet.`;\n } else {\n segment3Text += `holds position constant at ${valB} feet.`;\n }\n\n storyList.innerHTML += `<li>${segment1Text}</li>`;\n storyList.innerHTML += `<li>${segment2Text}</li>`;\n storyList.innerHTML += `<li>${segment3Text}</li>`;\n }\n\n // ==================== LESSON VOCAB & NOTES FUNCTIONALITY ====================\n function toggleVocabCard(id) {\n const body = document.getElementById(`${id}-body`);\n const icon = document.getElementById(`${id}-icon`);\n if (!body) return;\n\n if (body.style.maxHeight && body.style.maxHeight !== '0px') {\n body.style.maxHeight = '0px';\n if (icon) icon.innerHTML = '<i class=\"fas fa-chevron-down\"></i>';\n } else {\n // Close other open cards\n const allBodies = document.querySelectorAll('[id$=\"-body\"]');\n const allIcons = document.querySelectorAll('[id$=\"-icon\"]');\n allBodies.forEach(b => {\n if (b.id.startsWith('vocab-')) b.style.maxHeight = '0px';\n });\n allIcons.forEach(i => {\n if (i.id.startsWith('vocab-')) i.innerHTML = '<i class=\"fas fa-chevron-down\"></i>';\n });\n\n body.style.maxHeight = body.scrollHeight + 'px';\n if (icon) icon.innerHTML = '<i class=\"fas fa-chevron-up\"></i>';\n }\n }\n\n function switchExplainerTab(tabId) {\n const tabs = ['tab-slope', 'tab-intervals', 'tab-speed'];\n\n tabs.forEach(t => {\n const btn = document.getElementById(`btn-${t}`);\n const content = document.getElementById(`content-${t}`);\n\n if (t === tabId) {\n if (btn) btn.classList.add('active');\n if (content) content.classList.add('active');\n } else {\n if (btn) btn.classList.remove('active');\n if (content) content.classList.remove('active');\n }\n });\n }\n\n document.addEventListener('DOMContentLoaded', () => {\n updateCustomGraph();\n });\n if (document.readyState === 'complete' || document.readyState === 'interactive') {\n setTimeout(updateCustomGraph, 100);\n }\n",
- "guidedExercises": [
- {
- "title": "Example 1: Calculating Average Rate of Change on Elevation Intervals",
- "badge": "Eureka Math Guided Classwork",
- "difficulty": "Core Application",
- "problem": "A climber ascends a vertical ladder. The elevation $h(t)$ in feet as a function of time $t$ in seconds is given piecewise:\n$$h(t) = \\begin{cases} 2.5t & \\text{for } 0 \\le t \\le 4 \\\\ 10 & \\text{for } 4 < t \\le 7 \\\\ 10 - 2(t - 7) & \\text{for } 7 < t \\le 12 \\end{cases}$$\nCalculate the average rate of change on each of the three intervals, and interpret what a rate of change of $0\\text{ ft/sec}$ and $-2\\text{ ft/sec}$ means in physical context.",
- "scaffolding": "Use the rate of change slope formula $m = \\frac{\\Delta h}{\\Delta t} = \\frac{h(t_2) - h(t_1)}{t_2 - t_1}$. Pay close attention to the units (feet per second) and the algebraic sign (+, 0, -).",
- "steps": [
- {
- "step": 1,
- "label": "Interval 1: $t \\in [0, 4]$ seconds (Ascending)",
- "math": "m_1 = \\frac{h(4) - h(0)}{4 - 0} = \\frac{10 - 0}{4} = 2.5\\text{ ft/sec}",
- "explanation": "A positive rate of $+2.5\\text{ ft/sec}$ indicates the climber is ascending the ladder at a steady velocity."
- },
- {
- "step": 2,
- "label": "Interval 2: $t \\in [4, 7]$ seconds (Stationary)",
- "math": "m_2 = \\frac{h(7) - h(4)}{7 - 4} = \\frac{10 - 10}{3} = 0\\text{ ft/sec}",
- "explanation": "A rate of change of $0\\text{ ft/sec}$ corresponds to a horizontal line segment, indicating the climber has paused at an elevation of 10 feet."
- },
- {
- "step": 3,
- "label": "Interval 3: $t \\in [7, 12]$ seconds (Descending)",
- "math": "m_3 = \\frac{h(12) - h(7)}{12 - 7} = \\frac{0 - 10}{5} = -2\\text{ ft/sec}",
- "explanation": "A negative rate of $-2\\text{ ft/sec}$ indicates descent. The downward speed is $|-2| = 2\\text{ ft/sec}$."
- }
- ],
- "finalAnswer": "\\text{Interval 1: } +2.5\\text{ ft/sec (climbing)}, \\quad \\text{Interval 2: } 0\\text{ ft/sec (paused)}, \\quad \\text{Interval 3: } -2\\text{ ft/sec (descending)}",
- "commonPitfall": "Students frequently confuse the slope on an elevation-time graph with the physical inclination of the ladder. An elevation-time graph plots height against time, NOT horizontal ground distance. A horizontal line means time is elapsing while height remains constant (stationary), not that the climber is walking on flat ground."
- },
- {
- "title": "Exercise 1: Segmenting Multi-Phase Physical Motion Stories",
- "badge": "Video Story Analysis",
- "difficulty": "Multi-Step Modeling",
- "problem": "A student records a video of a person walking up stairs to a landing, pausing to check their phone, and running down a ramp. If elevation rises from $0$ to $12\\text{ ft}$ over $6\\text{ sec}$, remains at $12\\text{ ft}$ for $4\\text{ sec}$, and drops to $0\\text{ ft}$ over $3\\text{ sec}$, formulate the piecewise domain intervals and determine the total elapsed journey time.",
- "scaffolding": "Set up continuous non-overlapping intervals $[t_0, t_1], [t_1, t_2], [t_2, t_3]$ on the time axis.",
- "steps": [
- {
- "step": 1,
- "label": "Establish the time boundary points",
- "math": "t_0 = 0, \\quad t_1 = 6, \\quad t_2 = 6 + 4 = 10, \\quad t_3 = 10 + 3 = 13\\text{ seconds}",
- "explanation": "Add the duration of each phase sequentially to find the transition timestamps."
- },
- {
- "step": 2,
- "label": "Formulate piecewise intervals",
- "math": "\\text{Phase 1: } 0 \\le t \\le 6, \\quad \\text{Phase 2: } 6 < t \\le 10, \\quad \\text{Phase 3: } 10 < t \\le 13",
- "explanation": "Each interval defines a distinct linear rate of change."
- }
- ],
- "finalAnswer": "\\text{Total Time } = 13\\text{ seconds; Intervals: } [0, 6], (6, 10], (10, 13]",
- "commonPitfall": "Beware of overlapping endpoints or resetting the time clock to zero at each phase. Time is cumulative along the horizontal axis."
- }
- ],
- "exitTicket": {
- "title": "Lesson 1 Exit Ticket: Graphs of Piecewise Linear Functions",
- "prompt": "The graph in the Exploratory Challenge is made by combining pieces of nine linear functions (it is a piecewise linear function). Each linear function is defined over an interval of time, represented on the horizontal axis. List those nine time intervals.",
- "solution": "Between 0 and 3 sec.; between 3 and 5.5 sec.; between 5.5 and 7 sec.; between 7 and 8.5 sec.; between 8.5 and 9 sec.; between 9 and 11 sec.; between 11 and 12.7 sec.; between 12.7 and 13 sec.; and 13 sec. onward."
- },
- "problemSet": {
- "title": "Official Worksheet: Problem Set & Practice",
- "description": "Analyze piecewise linear graphs of physical situations. Work through these exercises to master rates of change and coordinate interpretation. Expand the teacher key for step-by-step solutions.",
- "problems": [
- {
- "number": 1,
- "prompt": "Watch the video story 'Elevation vs. Time #3' of a man descending a 10 ft ladder. At time 0 sec, his shoes are at 10 ft above the floor, and at 6 sec, his shoes are at 3 ft. From 6 to 8.5 sec, he pauses on the 3 ft step to drink water. He then takes 1.5 sec to descend to the ground, and walks into the kitchen. The video ends at 15 sec.\n\n(a) List the distinct time intervals for this piecewise linear function.\n(b) What does a horizontal line segment represent in this graphing story?\n(c) What is his average rate of descent between time 0 sec and time 6 sec?",
- "solution": "(a) The four time intervals are [0, 6], (6, 8.5], (8.5, 10], and (10, 15] seconds.\n(b) A horizontal line segment represents a period of time when his elevation does not change (rate of change = 0 ft/sec), meaning he is standing still on the ladder drinking water.\n(c) Average rate of descent: \\frac{\\Delta h}{\\Delta t} = \\frac{3 - 10}{6 - 0} = \\frac{-7}{6} \\approx -1.17\\text{ ft/sec} (or a descent speed of 1.17 ft/sec)."
- },
- {
- "number": 2,
- "prompt": "If you measured elevation from the top of the man's head instead of his shoes (assume he is 6.2 ft tall), how would the elevation-versus-time graph change?",
- "solution": "The entire piecewise graph would undergo a rigid vertical shift upward by 6.2 ft. The slopes (rates of change) over every interval would remain identical because \\frac{\\Delta (h + 6.2)}{\\Delta t} = \\frac{\\Delta h}{\\Delta t}."
- },
- {
- "number": 3,
- "prompt": "Over which interval does he descend faster: between 0 and 6 sec, or between 8.5 and 10 sec? Explain how your graph reveals this.",
- "solution": "From 0 to 6 sec, his descent rate is \\frac{7}{6} \\approx 1.17\\text{ ft/sec}. From 8.5 to 10 sec (a duration of 1.5 sec), he descends from 3 ft to 0 ft: \\frac{3}{1.5} = 2.0\\text{ ft/sec}. He descends faster between 8.5 and 10 sec. On the graph, this is shown by a steeper downward slope."
- }
- ]
- }
-}
\ No newline at end of file
diff --git a/assets/data/lessons/k-math-m1-a-2.json b/assets/data/lessons/k-math-m1-a-2.json
deleted file mode 100644
index c2e59b3..0000000
--- a/assets/data/lessons/k-math-m1-a-2.json
+++ /dev/null
@@ -1,153 +0,0 @@
-{
- "id": "k-math-m1-a-2",
- "code": "K.M1.A.2",
- "standard": "HSA.CED.A.2",
- "levelId": "k",
- "requiresMathJax": true,
- "meta": {
- "title": "Growth of Square Areas and Functions",
- "pageTitle": "Growth of Square Areas and Functions | Hesten's Learning",
- "description": "How do geometric figures grow? Contrast linear perimeter growth with quadratic area expansion using an interactive geometric workbench.",
- "pageDescription": "Examine how the area of a square grows compared to its side length, laying foundations for quadratic functions.",
- "author": "Hesten's Learning Team",
- "badge": "Math Lesson K.M1.A.2",
- "badgeIcon": "fa-calculator"
- },
- "overview": {
- "title": "Student & Teacher Overview: Lesson 2",
- "pill": "Linear vs. Quadratic",
- "text": "In this lesson, you will analyze how perimeter and area change as a square's side length varies. While perimeter grows linearly by constant increments of 4, area expands quadratically at an accelerating rate.",
- "outcomes": [
- "Represent perimeter growth with linear functions ($P(s) = 4s$) and area growth with quadratic functions ($A(s) = s^2$).",
- "Recognize that quadratic functions feature a variable raised to the second power and possess a non-constant rate of change.",
- "Analyze tabular and graphical representations showing how area quickly surpasses perimeter for $s > 4$."
- ],
- "teacherInsight": "Highlight the special transition points: at $s = 4$, the numerical value of the perimeter ($4 \\times 4 = 16$) equals the area ($4^2 = 16$). For any side length greater than 4, area dominates."
- },
- "content": [
- {
- "type": "html",
- "html": "<section class=\"lesson-sim-workbench\" aria-labelledby=\"sim-title\">\n <div class=\"lesson-sim-header\">\n <div class=\"lesson-sim-title-wrap\">\n <h3 id=\"sim-title\" class=\"lesson-sim-title\">\n <i class=\"fas fa-shapes\" aria-hidden=\"true\"></i> Geometric Side Length Simulator ($s \\to 4s \\text{ vs. } s^2$)\n </h3>\n <p class=\"lesson-sim-subtitle\">\n Adjust the slider below to change the square's side length ($s$). Watch the perimeter increase steadily while the area expands quadratically!\n </p>\n </div>\n <div class=\"lesson-sim-presets\">\n <span style=\"font-size: 0.75rem; font-weight: 700; color: var(--color-text-secondary); margin-right: 0.25rem;\">Presets:</span>\n <button type=\"button\" class=\"lesson-sim-preset-btn\" onclick=\"setSide(1)\">s = 1 (Small)</button>\n <button type=\"button\" class=\"lesson-sim-preset-btn\" onclick=\"setSide(4)\">s = 4 (Perimeter = Area = 16)</button>\n <button type=\"button\" class=\"lesson-sim-preset-btn\" onclick=\"setSide(7)\">s = 7 (Area Dominates)</button>\n <button type=\"button\" class=\"lesson-sim-preset-btn\" onclick=\"setSide(10)\">s = 10 (Area = 100!)</button>\n </div>\n </div>\n\n <div class=\"lesson-sim-grid\">\n <!-- Controls Column -->\n <div class=\"lesson-sim-controls\">\n <div class=\"lesson-sim-slider-box\">\n <div class=\"lesson-sim-slider-label\">\n <span>Side Length (<strong style=\"color: #e11d48;\">s</strong>):</span>\n <span id=\"side-badge\" class=\"lesson-sim-step-badge\">s = 5</span>\n </div>\n <input type=\"range\" id=\"side-slider\" min=\"1\" max=\"10\" value=\"5\" step=\"1\" oninput=\"updateSquareSim(this.value)\" class=\"lesson-sim-slider\" aria-label=\"Side length slider from 1 to 10\">\n <div class=\"lesson-sim-ticks\">\n <span>1</span>\n <span>2</span>\n <span>3</span>\n <span>4</span>\n <span>5</span>\n <span>6</span>\n <span>7</span>\n <span>8</span>\n <span>9</span>\n <span>10</span>\n </div>\n </div>\n\n <div class=\"lesson-sim-stat-grid\">\n <div class=\"lesson-sim-stat-card card-linear\">\n <span class=\"lesson-sim-stat-tag\"><i class=\"fas fa-vector-square mr-1\" aria-hidden=\"true\"></i> Perimeter ($4s$)</span>\n <span id=\"perimeter-val\" class=\"lesson-sim-stat-val stat-linear-color\">20</span>\n <span id=\"perimeter-calc\" class=\"lesson-sim-stat-calc\">4 × 5 = 20 units</span>\n </div>\n <div class=\"lesson-sim-stat-card card-exp\">\n <span class=\"lesson-sim-stat-tag\"><i class=\"fas fa-th mr-1\" aria-hidden=\"true\"></i> Area ($s^2$)</span>\n <span id=\"area-val\" class=\"lesson-sim-stat-val stat-exp-color\">25</span>\n <span id=\"area-calc\" class=\"lesson-sim-stat-calc\">5² = 25 sq units</span>\n </div>\n </div>\n </div>\n\n <!-- Visualizer Column: Dynamic Scaled Square Graphic -->\n <div class=\"lesson-sim-visualizer\" style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 280px;\">\n <div style=\"position: relative; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.2); border-radius: 1rem; border: 1px dashed var(--color-border, #334155);\">\n <div id=\"visual-square\" style=\"width: 100px; height: 100px; background: rgba(225, 29, 72, 0.2); border: 3px solid #e11d48; border-radius: 0.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ffffff; font-weight: 800; font-family: 'Outfit', sans-serif; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 0 15px rgba(225, 29, 72, 0.3);\">\n <span id=\"visual-square-label\" style=\"font-size: 1rem;\">s = 5</span>\n <span id=\"visual-square-sub\" style=\"font-size: 0.75rem; opacity: 0.85;\">25 sq units</span>\n </div>\n </div>\n <div class=\"lesson-sim-ratio-box\" style=\"width: 100%; margin-top: 1rem;\">\n <div class=\"lesson-sim-ratio-pill\" id=\"square-ratio-pill\">\n <i class=\"fas fa-balance-scale\" style=\"color: #f43f5e;\"></i> Area exceeds perimeter by <strong>5 units</strong>\n </div>\n </div>\n </div>\n </div>\n </section>"
- },
- {
- "type": "html",
- "html": "<section class=\"lesson-overview-section\">\n <h3 class=\"lesson-section-title\">Linear vs. Quadratic Growth Dynamics</h3>\n <p class=\"lesson-overview-text\">\n Compare the fundamental mathematical structures governing linear and quadratic relationships:\n </p>\n\n <div class=\"lesson-formula-grid\">\n <div class=\"lesson-formula-card card-linear-formula\">\n <h4 class=\"lesson-formula-title\"><i class=\"fas fa-ruler mr-2\" style=\"color: #3b82f6;\"></i> Linear (Perimeter)</h4>\n <div class=\"lesson-formula-math\">P(s) = 4s</div>\n <p class=\"lesson-formula-desc\">\n <strong>Constant Rate of Change:</strong> Adding 1 unit of side length always increases the perimeter by exactly 4 units.\n </p>\n </div>\n <div class=\"lesson-formula-card card-exp-formula\">\n <h4 class=\"lesson-formula-title\"><i class=\"fas fa-expand mr-2\" style=\"color: #e11d48;\"></i> Quadratic (Area)</h4>\n <div class=\"lesson-formula-math\">A(s) = s<sup>2</sup></div>\n <p class=\"lesson-formula-desc\">\n <strong>Accelerating Rate of Change:</strong> Each 1-unit increase in side length yields a larger increase in area than the last step.\n </p>\n </div>\n </div>\n </section>"
- }
- ],
- "vocabulary": [
- {
- "term": "Quadratic Function",
- "definition": "A polynomial function of degree 2 ($f(x) = ax^2 + bx + c$, with $a \\neq 0$). Its graph forms a U-shaped parabola."
- },
- {
- "term": "Second Differences",
- "definition": "The differences between consecutive first differences. In any quadratic sequence with equal intervals, the second differences are constant!"
- }
- ],
- "practiceQuestions": [
- {
- "question": "If you jump straight up into the air three times in succession, what does the elevation versus time graph of your motion look like, and why?",
- "options": [
- "Three consecutive curved parabolic arches that rise to a peak and return to zero elevation, because gravity causes constant downward acceleration.",
- "Three sharp triangular V-shapes with straight line segments, because speed is strictly constant throughout each jump.",
- "A single horizontal line at 1 ft elevation, because jumping occurs instantaneously.",
- "Three vertical line segments with undefined slope, because jumping requires no elapsed time."
- ],
- "correct": 0,
- "explanation": "From the official Eureka Math Exit Ticket Key: Jumping into the air produces quadratic elevation curves because gravity constantly decelerates the jumper on the way up and accelerates them on the way down, creating parabolic arcs of the form $h(t) = -16t^2 + v_0 t$."
- },
- {
- "question": "When an object is at rest on the floor at elevation $0\\text{ ft}$, how does the elevation-versus-time graph appear?",
- "options": [
- "As a flat horizontal line along the time axis ($h = 0$).",
- "As a downward sloping line with negative rate of change.",
- "As an upward sloping line with positive acceleration.",
- "As a discontinuous broken curve."
- ],
- "correct": 0,
- "explanation": "When an object remains at rest on the floor, its elevation does not change ($\\Delta h = 0$), so the graph is a flat horizontal line at $h = 0$."
- }
- ],
- "citation": {
- "title": "Source Citation (MLA)",
- "text": "Eureka Math. \"Growth of Square Areas and Functions.\" New York State Common Core Mathematics Curriculum, Algebra I, Module 1, Topic A, Lesson 2.",
- "subtext": "Aligned with standard HSA.CED.A.2 • Create equations in two or more variables to represent relationships between quantities.",
- "lessonId": "L-ID-SQR-K-M1-A-2"
- },
- "scripts": "function updateSquareSim(side) {\n const s = parseInt(side, 10);\n const perim = 4 * s;\n const area = s * s;\n\n // Update Slider Badge\n const badge = document.getElementById('side-badge');\n if (badge) badge.innerText = `s = ${s}`;\n\n // Update Stat Readouts\n const perimVal = document.getElementById('perimeter-val');\n const areaVal = document.getElementById('area-val');\n const perimCalc = document.getElementById('perimeter-calc');\n const areaCalc = document.getElementById('area-calc');\n\n if (perimVal) perimVal.innerText = perim;\n if (areaVal) areaVal.innerText = area;\n if (perimCalc) perimCalc.innerText = `4 \\u00D7 ${s} = ${perim} units`;\n if (areaCalc) areaCalc.innerText = `${s}² = ${area} sq units`;\n\n // Update Visual Square representation\n const visual = document.getElementById('visual-square');\n const label = document.getElementById('visual-square-label');\n const sub = document.getElementById('visual-square-sub');\n\n if (visual) {\n // Clamp size between 30px and 200px\n const pxSize = 30 + (s - 1) * 18;\n visual.style.width = pxSize + 'px';\n visual.style.height = pxSize + 'px';\n }\n if (label) label.innerText = `s = ${s}`;\n if (sub) sub.innerText = `${area} sq units`;\n\n // Ratio / Comparison Pill\n const pill = document.getElementById('square-ratio-pill');\n if (pill) {\n if (perim === area) {\n pill.innerHTML = '<i class=\"fas fa-balance-scale\" style=\"color: #60a5fa;\"></i> At s = 4, Perimeter equals Area numerically (16)';\n } else if (area > perim) {\n const diff = area - perim;\n pill.innerHTML = '<i class=\"fas fa-chart-line\" style=\"color: #f43f5e;\"></i> Area exceeds perimeter by <strong>' + diff + ' units</strong>';\n } else {\n const diff = perim - area;\n pill.innerHTML = '<i class=\"fas fa-info-circle\" style=\"color: #3b82f6;\"></i> Perimeter exceeds area by <strong>' + diff + ' units</strong>';\n }\n }\n }\n\n function setSide(val) {\n const slider = document.getElementById('side-slider');\n if (slider) {\n slider.value = val;\n updateSquareSim(val);\n }\n }\n\n function toggleVocabCard(id) {\n const body = document.getElementById(`${id}-body`);\n const icon = document.getElementById(`${id}-icon`);\n if (!body) return;\n\n if (body.style.maxHeight && body.style.maxHeight !== '0px') {\n body.style.maxHeight = '0px';\n if (icon) icon.innerHTML = '<i class=\"fas fa-chevron-down\"></i>';\n } else {\n body.style.maxHeight = body.scrollHeight + 'px';\n if (icon) icon.innerHTML = '<i class=\"fas fa-chevron-up\"></i>';\n }\n }\n\n document.addEventListener('DOMContentLoaded', () => {\n updateSquareSim(5);\n });",
- "guidedExercises": [
- {
- "title": "Example 1: Comparing Linear Perimeter Growth vs. Quadratic Area Expansion",
- "badge": "Eureka Math Guided Classwork",