[{"_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","693789b9ddb481918801e91a965217cf","versionInt","title","Copy of Copy of Copy of Copy of Probability Site","type","code/react","content","// @ts-nocheck\nimport React, { useState } from \"react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\n\n/** ------------------ Math Helpers ------------------ **/\nconst factorial = (n: number): number => {\n if (n < 0) return 0;\n let r = 1;\n for (let i = 2; i <= n; i += 1) r *= i;\n return r;\n};\n\nexport const permutation = (n: number, r: number): number => {\n if (r > n || n < 0 || r < 0) return 0;\n return factorial(n) / factorial(n - r);\n};\n\nexport const combination = (n: number, r: number): number => {\n if (r > n || n < 0 || r < 0) return 0;\n return factorial(n) / (factorial(r) * factorial(n - r));\n};\n\nconst expandBinomial = (n: number): string => {\n if (!Number.isFinite(n) || n < 0 || n > 10) return \"Enter n between 0 and 10.\";\n const nn = Math.floor(n);\n const terms: string[] = [];\n for (let k = 0; k <= nn; k += 1) {\n const coeff = combination(nn, k);\n const power = nn - k;\n const xPart = power === 0 ? \"\" : power === 1 ? \"x\" : `x^${power}`;\n const coeffStr = coeff === 1 && xPart !== \"\" ? \"\" : String(coeff);\n const term = xPart ? `${coeffStr}${xPart}` : `${coeff}`;\n terms.push(term);\n }\n return terms.join(\" + \");\n};\n\n// Lightweight runtime tests (do not change unless mathematically wrong)\nif (typeof window !== \"undefined\") {\n console.assert(factorial(0) === 1, \"factorial(0) should be 1\");\n console.assert(factorial(5) === 120, \"factorial(5) should be 120\");\n console.assert(permutation(4, 2) === 12, \"4P2 should be 12\");\n console.assert(permutation(3, 3) === 6, \"3P3 should be 6\");\n console.assert(combination(3, 2) === 3, \"3C2 should be 3\");\n console.assert(combination(4, 2) === 6, \"4C2 should be 6\");\n // Extra sanity checks\n console.assert(combination(5, 0) === 1, \"5C0 should be 1\");\n console.assert(permutation(5, 1) === 5, \"5P1 should be 5\");\n}\n\n/** ------------------ Data ------------------ **/\nconst MARBLES = [\"🔵\", \"🟣\", \"🟢\", \"🟡\"];\nconst FRIENDS = [\"A\", \"B\", \"C\"];\n\n/** ------------------ Component ------------------ **/\nexport default function ProbabilitySite() {\n /** PERMUTATION INTRO (marble draws) */\n const [permIntroAnswer, setPermIntroAnswer] = useState(\"\");\n const [permIntroFeedback, setPermIntroFeedback] = useState(null);\n\n const checkPermIntro = () => {\n if (Number(permIntroAnswer) === 12) {\n setPermIntroFeedback(\"correct\");\n alert(\"✔ Correct!\");\n } else {\n setPermIntroFeedback(\"incorrect\");\n alert(\"✘ Try again.\");\n }\n };\n\n /** PERMUTATION PRACTICE (3-seat bench, order matters) */\n const [permSeats, setPermSeats] = useState<(string | null)[]>([null, null, null]);\n const [permPairsAnswer, setPermPairsAnswer] = useState(\"\");\n const [permPairsFeedback, setPermPairsFeedback] = useState(null);\n\n const handleDropFriend = (index: number, friend: string) => {\n if (!friend) return;\n const next = [...permSeats];\n next[index] = friend;\n setPermSeats(next);\n };\n\n const checkPermPairs = () => {\n if (Number(permPairsAnswer) === permutation(3, 3)) {\n setPermPairsFeedback(\"correct\");\n } else {\n setPermPairsFeedback(\"incorrect\");\n }\n };\n\n const resetPermSeats = () => {\n setPermSeats([null, null, null]);\n setPermPairsAnswer(\"\");\n setPermPairsFeedback(null);\n };\n\n /** COMBINATION INTRO (2-seat bench, order does NOT matter) */\n const [comboSeats, setComboSeats] = useState<(string | null)[]>([null, null]);\n const [comboPairsAnswer, setComboPairsAnswer] = useState(\"\");\n const [comboPairsFeedback, setComboPairsFeedback] = useState(null);\n\n const handleDropCombo = (index: number, friend: string) => {\n if (!friend) return;\n const next = [...comboSeats];\n next[index] = friend;\n setComboSeats(next);\n };\n\n const checkComboPairs = () => {\n if (Number(comboPairsAnswer) === combination(3, 2)) {\n setComboPairsFeedback(\"correct\");\n } else {\n setComboPairsFeedback(\"incorrect\");\n }\n };\n\n const resetComboSeats = () => {\n setComboSeats([null, null]);\n setComboPairsAnswer(\"\");\n setComboPairsFeedback(null);\n };\n\n /** BINOMIAL EXTENSION */\n const [binomialN, setBinomialN] = useState(3);\n const [binomialResult, setBinomialResult] = useState(expandBinomial(3));\n\n const handleExpand = () => {\n setBinomialResult(expandBinomial(binomialN));\n };\n\n // Pascal's triangle state + generator (used by the Combination – Extension section)\n const [pascalMax, setPascalMax] = useState(3);\n\n const generatePascalRows = (maxRow: number): number[][] => {\n const rows: number[][] = [];\n for (let n = 0; n <= Math.max(0, Math.floor(maxRow)); n += 1) {\n const row: number[] = [];\n for (let k = 0; k <= n; k += 1) {\n // compute nCk safely\n let val = 1;\n for (let i = 0; i < k; i += 1) {\n val = (val * (n - i)) / (i + 1);\n }\n row.push(Math.round(val));\n }\n rows.push(row);\n }\n return rows;\n };\n\n return (\n

\n {/* Header */}\n

ProbAbility

\n \n \n \n

\n\n {/* Definitions */}\n

\n A Permutation is when order matters. A\n Combination is when order does NOT matter.\n

\n Explore permutations and combinations using marble draws, bench seating, and the binomial theorem.\n

Permutation:

P(n, r) = n! / (n - r)!

Combination:

C(n, r) = n! / ((n - r)! · r!)

\n\n

\n {/* ---------------- Permutation Intro ---------------- */}\n \n \n

Permutation – Intro

\n $\"Permutation$ \n

Draw 2 marbles from 4 without replacement. How many different ordered pairs are possible?

\n\n {/* Balls animation (visual only) */}\n

\n {MARBLES.map((m, i) => (\n {m}\n ))}\n

\n\n {/* Hint box (no explicit numeric answer) */}\n

Guiding Questions

• Is this with or without replacement?

• Does order matter or not?

• How many choices for the first draw? For the second draw?

Use these to work out the total number of ordered pairs.

\n\n {/* Answer input */}\n

\n Your answer (number of ordered pairs):\n

\n {\n setPermIntroAnswer(e.target.value);\n setPermIntroFeedback(null);\n }}\n type=\"number\"\n className=\"border rounded px-2 py-1 w-24\"\n />\n \n

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

Correct! You used permutation reasoning.

\n )}\n {permIntroFeedback === \"incorrect\" && (\n

Not yet. Check the guiding questions again.

\n )}\n

\n \n \n\n {/* ---------------- Permutation Practice ---------------- */}\n \n \n

Permutation – Practice

Three friends sit on a bench. ORDER matters. How many different seating orders can you make?

\n\n

\n {FRIENDS.map((f) => (\n e.dataTransfer.setData(\"friend\", f)}\n className=\"w-10 h-10 bg-[#E6ECFF] rounded-full flex items-center justify-center font-bold cursor-move\"\n >\n {f}\n

\n ))}\n

\n\n {/* Bench with drop zones */}\n

\n {/* Bench drawing (CSS-based, no external image needed) */}\n {/* Seat */}\n

\n {/* Legs */}\n

\n {/* Back slats */}\n

\n {/* Drop zones on top of bench */}\n {permSeats.map((seat, index) => (\n e.preventDefault()}\n onDrop={(e) => handleDropFriend(index, e.dataTransfer.getData(\"friend\"))}\n className=\"absolute bottom-8 w-16 h-16 bg-white/70 border-2 border-dashed flex items-center justify-center rounded-lg\"\n style={{ left: `${index * 75 + 20}px` }}\n >\n {seat ? (\n {seat}\n ) : (\n Drop\n )}\n

\n ))}\n

\n\n {/* User answer for permutation seating orders */}\n

\n How many different seating orders?\n

\n {\n setPermPairsAnswer(e.target.value);\n setPermPairsFeedback(null);\n }}\n type=\"number\"\n className=\"border rounded px-2 py-1 w-24\"\n />\n \n

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

Correct! This matches P(3, 3).

\n )}\n {permPairsFeedback === \"incorrect\" && (\n

Try again. Think about how many ways to arrange 3 people.

\n )}\n

\n \n

\n \n \n\n {/* ---------------- Combination Intro ---------------- */}\n \n \n

Combination – Intro

\n Three friends choose 2 seats on a bench. ORDER does NOT matter. How many different pairs can sit\n together?\n

\n\n

\n {FRIENDS.map((f) => (\n e.dataTransfer.setData(\"friend\", f)}\n className=\"w-10 h-10 bg-[#E6ECFF] rounded-full flex items-center justify-center font-bold cursor-move\"\n >\n {f}\n

\n ))}\n

\n\n {/* Bench with drop zones */}\n

\n {/* Bench drawing (CSS-based, no external image needed) */}\n {/* Seat */}\n

\n {/* Legs */}\n

\n {/* Back slats */}\n

\n {/* Drop zones on top of bench */}\n {comboSeats.map((seat, index) => (\n e.preventDefault()}\n onDrop={(e) => handleDropCombo(index, e.dataTransfer.getData(\"friend\"))}\n className=\"absolute bottom-8 w-16 h-16 bg-white/70 border-2 border-dashed flex items-center justify-center rounded-lg\"\n style={{ left: `${index * 90 + 30}px` }}\n >\n {seat ? (\n {seat}\n ) : (\n Drop\n )}\n

\n ))}\n

\n\n {/* User answer for combination pairs */}\n

\n How many different pairs of friends?\n

\n {\n setComboPairsAnswer(e.target.value);\n setComboPairsFeedback(null);\n }}\n type=\"number\"\n className=\"border rounded px-2 py-1 w-24\"\n />\n \n

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

Correct! This matches C(3, 2).

\n )}\n {comboPairsFeedback === \"incorrect\" && (\n

\n Try again. Remember that AB and BA count as the same pair.\n

\n )}\n

\n \n

\n \n \n\n {/* ---------------- Combination – Extension (Binomial Theorem) ---------------- */}\n \n \n

Combination – Extension

\n The binomial theorem uses combinations to expand powers of a binomial:\n

\n (x + 1)\n ⁿ = C(n, 0)x\n ⁿ + C(n, 1)x\n ^n-1 + … + C(n, n)\n

\n\n

\n • Each term looks like C(n, k) · x\n ^n-k.\n

• C(n, k) counts how many ways to choose k items out of n.

• The coefficients in the expansion are exactly these combination numbers.

\n\n

\n (x + 1)\n ^{\n setBinomialN(Number(e.target.value))}\n className=\"w-16 border rounded px-2 py-1 text-sm ml-1\"\n />\n}\n \n

\n\n

\n {binomialResult}\n

\n\n {/* Pascal's Triangle (added) */}\n

Pascal's Triangle

\n\n

\n Max row (0-indexed):\n setPascalMax(Number(e.target.value))}\n className=\"w-20 border rounded px-2 py-1 text-sm\"\n />\n \n

\n\n {/* Two side-by-side triangles */}\n

\n {/* Numeric Pascal Triangle */}\n

Numeric

\n {generatePascalRows(pascalMax).map((row, i) => (\n

\n {row.join(\" \")}\n

\n ))}\n

\n\n {/* Combination Pascal Triangle */}\n

C(n, k)

\n {generatePascalRows(pascalMax).map((row, n) => (\n

\n \n {row.map((_, k) => `${n}C${k}`).join(\" \")}\n \n

\n ))}\n

\n\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","16682636506487206218","traceTime",1778421990807]