[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":12,"_29":30,"_31":30,"_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","69da860485c88191a7ca90aa827d64cc","versionInt","title","Interactive Formulas Lesson Adhd","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { CheckCircle2, RotateCcw, Lightbulb, Timer, Star, BookOpen, PencilLine } from \"lucide-react\";\n\nconst theoryPoints = [\n {\n title: \"What is a formula?\",\n text: \"A formula is a maths rule written with letters and numbers. It helps us describe a real-life situation and then work things out quickly.\"\n },\n {\n title: \"Subject\",\n text: \"The subject is the letter on its own. It tells you what you are trying to find. Example: in C = 0.5m + 1, the subject is C.\"\n },\n {\n title: \"Expression\",\n text: \"The expression is the maths on the other side of the equals sign. It shows how to work out the subject.\"\n },\n {\n title: \"Substitution\",\n text: \"Substitution means replacing letters with numbers, then calculating carefully using the correct order of operations.\"\n },\n {\n title: \"Real-life formulas\",\n text: \"Words like ‘£2 per hour’ become 2 × number of hours. A fixed starting fee means you add a constant at the end.\"\n }\n];\n\nconst workedExamples = [\n {\n title: \"Example 1: E-scooter hire\",\n problem: \"A scooter costs £1 to unlock and 50p per minute. Write a formula for C, the total cost after m minutes.\",\n steps: [\n \"50p = £0.50, so the minute cost is 0.5 × m.\",\n \"That gives 0.5m.\",\n \"Add the £1 unlock fee.\",\n \"So the formula is C = 0.5m + 1.\"\n ]\n },\n {\n title: \"Example 2: Use the formula\",\n problem: \"Using C = 0.5m + 1, find the cost for 8 minutes.\",\n steps: [\n \"Substitute m = 8.\",\n \"C = 0.5(8) + 1\",\n \"C = 4 + 1\",\n \"C = 5\",\n \"So the cost is £5.\"\n ]\n }\n];\n\nconst questions = [\n {\n id: 1,\n type: \"text\",\n title: \"Question 1\",\n prompt: \"A café sells tea for £1.50 and coffee for £2. Write a formula for C, the total cost of x cups of tea and y cups of coffee.\",\n answer: [\"C=1.5x+2y\", \"1.5x+2y\"],\n placeholder: \"Type your formula, for example C=...\",\n explanation: [\n \"Tea costs £1.50 each, so x cups cost 1.5x.\",\n \"Coffee costs £2 each, so y cups cost 2y.\",\n \"Add both parts together.\",\n \"So C = 1.5x + 2y.\"\n ]\n },\n {\n id: 2,\n type: \"number\",\n title: \"Question 2\",\n prompt: \"Using C = 1.5x + 2y, work out the cost of 2 cups of tea and 3 cups of coffee.\",\n answer: [9],\n placeholder: \"Type the number only\",\n explanation: [\n \"Substitute x = 2 and y = 3.\",\n \"C = 1.5(2) + 2(3)\",\n \"C = 3 + 6\",\n \"C = 9\",\n \"So the total cost is £9.\"\n ]\n },\n {\n id: 3,\n type: \"text\",\n title: \"Question 3\",\n prompt: \"The volume of a cuboid is width × height × length. Write a formula for V using w, h and l.\",\n answer: [\"V=whl\", \"whl\"],\n placeholder: \"Type your formula\",\n explanation: [\n \"Volume means multiply the three dimensions together.\",\n \"Width is w, height is h, and length is l.\",\n \"So V = w × h × l, usually written as V = whl.\"\n ]\n },\n {\n id: 4,\n type: \"number\",\n title: \"Question 4\",\n prompt: \"A cuboid has width 2 cm, height 4 cm and length 5 cm. Find the volume.\",\n answer: [40],\n placeholder: \"Type the number only\",\n explanation: [\n \"Use V = whl.\",\n \"Substitute w = 2, h = 4, l = 5.\",\n \"V = 2 × 4 × 5 = 40.\",\n \"So the volume is 40 cm³.\"\n ]\n },\n {\n id: 5,\n type: \"text\",\n title: \"Question 5\",\n prompt: \"A vintage car is worth £80,000 now and goes up by £600 each year. Write a formula for V after y years.\",\n answer: [\"V=80000+600y\", \"80000+600y\"],\n placeholder: \"Type your formula\",\n explanation: [\n \"The starting value is 80,000.\",\n \"It increases by 600 each year.\",\n \"After y years, the increase is 600y.\",\n \"So V = 80000 + 600y.\"\n ]\n },\n {\n id: 6,\n type: \"number\",\n title: \"Question 6\",\n prompt: \"Using V = 80000 + 600y, find the value after 6 years.\",\n answer: [83600],\n placeholder: \"Type the number only\",\n explanation: [\n \"Substitute y = 6.\",\n \"V = 80000 + 600(6)\",\n \"V = 80000 + 3600\",\n \"V = 83600\",\n \"So the value is £83,600.\"\n ]\n },\n {\n id: 7,\n type: \"number\",\n title: \"Question 7\",\n prompt: \"Force = mass × acceleration. Work out the force when mass = 6.5 and acceleration = 0.1.\",\n answer: [0.65],\n placeholder: \"Type the number only\",\n explanation: [\n \"Use F = ma.\",\n \"Substitute m = 6.5 and a = 0.1.\",\n \"F = 6.5 × 0.1\",\n \"F = 0.65\"\n ]\n },\n {\n id: 8,\n type: \"text\",\n title: \"Question 8\",\n prompt: \"A cake has mass c grams. It is cut into n equal slices. Each serving also includes one strawberry of mass 12 g. Write a formula for s, the mass of each serving.\",\n answer: [\"s=c/n+12\", \"s=(c/n)+12\", \"c/n+12\"],\n placeholder: \"Type your formula\",\n explanation: [\n \"The cake part for each person is c ÷ n.\",\n \"Each serving also gets one 12 g strawberry.\",\n \"Add 12 to the cake share.\",\n \"So s = c/n + 12.\"\n ]\n },\n {\n id: 9,\n type: \"number\",\n title: \"Question 9\",\n prompt: \"There are 12 guests sharing a 3 kg cake. Each serving also includes one 12 g strawberry. Find the mass of one serving in grams.\",\n answer: [262],\n placeholder: \"Type the number only\",\n explanation: [\n \"First change 3 kg to grams: 3 kg = 3000 g.\",\n \"Cake share = 3000 ÷ 12 = 250 g.\",\n \"Add the 12 g strawberry.\",\n \"250 + 12 = 262 g.\"\n ]\n },\n {\n id: 10,\n type: \"text\",\n title: \"Question 10\",\n prompt: \"An adventure company charges £30 per hour per quad bike, plus a fixed insurance fee of £25. Write a formula for C, the total cost to hire q quad bikes for t hours.\",\n answer: [\"C=30qt+25\", \"30qt+25\"],\n placeholder: \"Type your formula\",\n explanation: [\n \"One quad bike costs 30 per hour.\",\n \"For q bikes and t hours, the hourly cost becomes 30qt.\",\n \"Then add the fixed insurance fee of 25.\",\n \"So C = 30qt + 25.\"\n ]\n }\n];\n\nfunction normalise(input) {\n return String(input)\n .replace(/\\s+/g, \"\")\n .replace(/£/g, \"\")\n .toLowerCase();\n}\n\nfunction isCorrect(question, value) {\n const cleaned = normalise(value);\n if (question.type === \"number\") {\n const num = Number(cleaned);\n return question.answer.some((a) => Math.abs(num - Number(a)) < 0.000001);\n }\n return question.answer.map(normalise).includes(cleaned);\n}\n\nfunction ADHDTip({ children }) {\n return (\n

\n ADHD-friendly tip\n

{children}

\n );\n}\n\nfunction QuestionCard({ q, index, total, onSolved }) {\n const [value, setValue] = useState(\"\");\n const [status, setStatus] = useState(\"idle\");\n const [tries, setTries] = useState(0);\n const [showAnswer, setShowAnswer] = useState(false);\n\n const checkAnswer = () => {\n const nextTries = tries + 1;\n setTries(nextTries);\n const ok = isCorrect(q, value);\n setStatus(ok ? \"correct\" : \"wrong\");\n if (ok) onSolved(q.id);\n };\n\n const reset = () => {\n setValue(\"\");\n setStatus(\"idle\");\n setTries(0);\n setShowAnswer(false);\n };\n\n return (\n \n \n

\n {q.title}\n

\n {index + 1} / {total}\n

\n \n \n

{q.prompt}

\n\n

\n setValue(e.target.value)}\n placeholder={q.placeholder}\n className=\"h-12 rounded-2xl text-base\"\n />\n \n \n

\n\n \n {status === \"correct\" && (\n \n

\n Nice work — correct.\n

You got it. Press Redo if you want to practise it again.

\n \n )}\n\n {status === \"wrong\" && (\n \n

Not quite — let’s slow it down.

\n {q.explanation.map((step, i) => (\n

\n Step {i + 1}: {step}\n

\n ))}\n

\n \n \n

\n {showAnswer && (\n

\n Answer: \n {String(q.answer[0])}\n

\n )}\n \n )}\n \n\n

Attempts: {tries}

\n \n \n );\n}\n\nexport default function InteractiveFormulasLesson() {\n const [solved, setSolved] = useState([]);\n\n const solvedCount = solved.length;\n const progress = useMemo(() => Math.round((solvedCount / questions.length) * 100), [solvedCount]);\n\n const handleSolved = (id) => {\n setSolved((prev) => (prev.includes(id) ? prev : [...prev, id]));\n };\n\n return (\n

\n \n \n \n

\n Maths lesson\n

Formulas

\n A calm, step-by-step lesson on writing formulas and using them. Built to be clear, interactive, and easy to restart.\n

\n \n \n\n \n \n

\n 30-minute plan\n

5 min — learn the idea

5 min — study examples

18 min — practise questions

2 min — check mistakes

\n \n \n \n\n

\n \n \n

\n Progress\n

\n \n

{solvedCount} of {questions.length} questions solved

\n \n \n

\n \n Do one question at a time. Don’t aim to finish fast. Aim to get the next step right.\n \n

\n\n \n \n 1. Theory\n \n \n

\n {theoryPoints.map((item, idx) => (\n \n

{item.title}

{item.text}

\n \n ))}\n

\n \n \n\n \n \n 2. Worked examples\n \n \n {workedExamples.map((ex, idx) => (\n

{ex.title}

{ex.problem}

\n {ex.steps.map((step, i) => (\n

Step {i + 1}: {step}

\n ))}\n

\n ))}\n \n \n\n \n \n 3. 30-minute practice\n \n \n

\n How this works: Type an answer, press Check, and if it is wrong you will see a step-by-step explanation. Use Redo to reset any question.\n

\n {questions.map((q, index) => (\n \n ))}\n \n \n\n \n \n

\n Parent / teacher note\n

\n This lesson uses short chunks, immediate feedback, retry options, and worked steps after mistakes. That structure usually works better for learners who lose focus when the page feels too crowded or when the correction comes too late.\n

\n \n \n

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