[{"_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","69de8f6c8e1481919c949701ae2bb14a","versionInt","title","Lung-sounds-matching-game","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { CheckCircle2, RotateCcw, XCircle } from \"lucide-react\";\n\nconst lungSounds = [\n {\n id: \"vesicular\",\n sound: \"Vesicular Sounds\",\n characteristics:\n \"Soft, low-pitched sounds heard over the periphery of the lungs, with a longer inspiration phase.\",\n soundsLike: \"Soft, breezy\",\n },\n {\n id: \"fine-crackles\",\n sound: \"Fine Crackles\",\n characteristics:\n \"High-pitched, toward end of inspiration, brief, discontinuous, small airways.\",\n soundsLike: \"Light crackling or popping firewood\",\n },\n {\n id: \"coarse-crackles\",\n sound: \"Course Crackles\",\n characteristics:\n \"Low-pitched, louder than fine crackles, beginning of inspiration that can extend into expiration, discontinuous, large airways.\",\n soundsLike: \"Gurgling or bubbling\",\n },\n {\n id: \"wheezes\",\n sound: \"Wheezes\",\n characteristics:\n \"High-pitched, continuous, loudest on expiration, lower airways.\",\n soundsLike: \"Squeaky, musical whistling\",\n },\n {\n id: \"stridor\",\n sound: \"Stridor\",\n characteristics:\n \"High-pitched, during inspiration, from upper airway obstruction, heard in the throat area.\",\n soundsLike: \"Screeching / squawking\",\n },\n {\n id: \"rhonchi\",\n sound: \"Rhonchi\",\n characteristics:\n \"Loud, low-pitched, large airways, mainly on expiration, decreases with coughing.\",\n soundsLike: \"Snoring\",\n },\n {\n id: \"pleural-friction-rub\",\n sound: \"Pleural Friction Rub\",\n characteristics:\n \"Pain with deep breathing or cough, inspiration and expiration, low-pitched, discontinuous or continuous depending on cause and severity.\",\n soundsLike: \"Harsh grating / rubbing sandpaper together\",\n },\n];\n\nfunction shuffleArray(array) {\n const copy = [...array];\n for (let i = copy.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [copy[i], copy[j]] = [copy[j], copy[i]];\n }\n return copy;\n}\n\nfunction buildRoundData() {\n const sounds = shuffleArray(\n lungSounds.map((item) => ({\n id: item.id,\n label: item.sound,\n type: \"sound\",\n }))\n );\n\n const characteristics = shuffleArray(\n lungSounds.map((item) => ({\n id: item.id,\n label: item.characteristics,\n type: \"characteristics\",\n }))\n );\n\n const soundsLike = shuffleArray(\n lungSounds.map((item) => ({\n id: item.id,\n label: item.soundsLike,\n type: \"soundsLike\",\n }))\n );\n\n return { sounds, characteristics, soundsLike };\n}\n\nfunction ColumnCard({ title, items, selected, onSelect, matchedIds, disabled }) {\n return (\n \n \n {title}\n \n \n {items.map((item) => {\n const isMatched = matchedIds.has(item.id);\n const isSelected = selected?.id === item.id && selected?.type === item.type;\n\n return (\n onSelect(item)}\n className={`h-auto min-h-[74px] w-full whitespace-normal rounded-2xl p-4 text-left justify-start leading-relaxed transition-all ${\n isMatched\n ? \"border-green-500 bg-green-50 text-green-700 opacity-100\"\n : isSelected\n ? \"border-black ring-2 ring-black/20\"\n : \"\"\n }`}\n >\n

\n {isMatched ? (\n \n ) : (\n

\n )}\n

\n {item.label}\n

\n \n );\n })}\n \n \n );\n}\n\nexport default function LungSoundsMatchingGame() {\n const [roundData, setRoundData] = useState(buildRoundData);\n const [selectedSound, setSelectedSound] = useState(null);\n const [selectedCharacteristics, setSelectedCharacteristics] = useState(null);\n const [selectedSoundsLike, setSelectedSoundsLike] = useState(null);\n const [matchedIds, setMatchedIds] = useState(new Set());\n const [attempts, setAttempts] = useState(0);\n const [correctMatches, setCorrectMatches] = useState(0);\n const [feedback, setFeedback] = useState(\"\");\n const [feedbackType, setFeedbackType] = useState(\"neutral\");\n\n const total = lungSounds.length;\n const complete = matchedIds.size === total;\n\n const score = useMemo(() => {\n if (attempts === 0) return 0;\n return Math.round((correctMatches / attempts) * 100);\n }, [attempts, correctMatches]);\n\n const clearSelections = () => {\n setSelectedSound(null);\n setSelectedCharacteristics(null);\n setSelectedSoundsLike(null);\n };\n\n const checkMatch = (soundChoice, characteristicsChoice, soundsLikeChoice) => {\n if (!soundChoice || !characteristicsChoice || !soundsLikeChoice) return;\n\n const isCorrect =\n soundChoice.id === characteristicsChoice.id &&\n soundChoice.id === soundsLikeChoice.id;\n\n setAttempts((prev) => prev + 1);\n\n if (isCorrect) {\n setMatchedIds((prev) => new Set([...prev, soundChoice.id]));\n setCorrectMatches((prev) => prev + 1);\n setFeedback(`Correct match: ${soundChoice.sound || soundChoice.label}`);\n setFeedbackType(\"correct\");\n clearSelections();\n } else {\n setFeedback(\"Not quite. Try choosing a different combination.\");\n setFeedbackType(\"incorrect\");\n }\n };\n\n const handleSelect = (item) => {\n if (item.type === \"sound\") setSelectedSound(item);\n if (item.type === \"characteristics\") setSelectedCharacteristics(item);\n if (item.type === \"soundsLike\") setSelectedSoundsLike(item);\n };\n\n React.useEffect(() => {\n if (selectedSound && selectedCharacteristics && selectedSoundsLike) {\n checkMatch(selectedSound, selectedCharacteristics, selectedSoundsLike);\n }\n }, [selectedSound, selectedCharacteristics, selectedSoundsLike]);\n\n const resetGame = () => {\n setRoundData(buildRoundData());\n setSelectedSound(null);\n setSelectedCharacteristics(null);\n setSelectedSoundsLike(null);\n setMatchedIds(new Set());\n setAttempts(0);\n setCorrectMatches(0);\n setFeedback(\"\");\n setFeedbackType(\"neutral\");\n };\n\n return (\n

\n \n \n

\n Lung Sounds Matching Game\n

Match the sound, characteristics, and “sounds like” clue

\n Select one item from each column. When all three belong together, the match is locked in.\n Continue until all lung sounds are matched.\n

\n \n

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

Progress

{matchedIds.size} / {total}

Attempts

{attempts}

Accuracy

{score}%

\n {feedback ? (\n

\n {feedbackType === \"correct\" ? (\n \n ) : feedbackType === \"incorrect\" ? (\n \n ) : null}\n {feedback}\n

\n ) : (\n

Your feedback will appear here.

\n )}\n

\n {complete && (\n

Great job!

You matched all lung sounds correctly.

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