Brain Quest

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a responsive educational multiple-choice quiz game titled “Brain Quest,” subtitled “A friendly tour of the nervous system.” It is a polished single-page web game with three states: start screen, quiz screen, and results screen. Use a friendly modern science-education visual style: pale gradient page background blending light blue, warm cream, and pale lavender; dark navy text; white translucent rounded panels with soft blue-gray shadows; colorful gradient buttons and cards; large emoji/Unicode artwork rather than external image files. Keep the whole app in a centered shell about 980px wide with generous rounded corners and responsive mobile behavior.

Persistent header: at the top show a rounded square gradient badge (purple to cyan) containing a brain emoji, the large “Brain Quest” title, and the small subtitle. On the right place a white rounded “🔊 Sound on” toggle button. Clicking it switches to “🔇 Sound off” and disables quiz feedback sounds. Play short synthesized tones through Web Audio: a higher tone for a correct answer/start and a lower tone for an incorrect answer.

Start screen: show a large white rounded panel. The hero is a two-column layout on desktop, collapsing to one column on narrow screens. On the left display the bold headline “Think fast. Learn more.” on two lines, followed by: “Explore senses, the nervous system, and how different drug groups can affect the brain and body. Choose one answer for each question.” Add a prominent purple-to-blue gradient button labeled “Start Brain Quest.” On the right show a rounded light cyan-to-lavender illustration area with a large floating brain emoji, softly shadowed, and three decorative circles: a large yellow circle near the upper-right, a small green circle near the lower-left, and a tiny pink circle near the upper-left. Animate the brain with a subtle vertical float and slight rotation.

Below the hero, show three equal colorful gradient level cards on desktop, stacked on mobile. Each card has a large emoji, title, and description: (1) eye emoji, “Level 1 · Senses,” “Receptors, taste, smell, vision, hearing and balance.” with teal-to-blue gradient; (2) lightning emoji, “Level 2 · Nervous system,” “Brain parts, neurons, impulses and synapses.” with purple-to-magenta gradient; (3) test tube emoji, “Level 3 · Drug effects,” “Stimulants, depressants and other drug groups.” with orange-to-coral/red gradient. At the bottom show a pale blue rounded neuron demonstration strip with the caption “Watch the nerve signal travel from one end of a neuron to the other,” a horizontal blue line, and an animated yellow signal dot continuously traveling from left to right.

When Start is clicked, reset score, question index, and mistakes, then show the quiz screen. The quiz has a top HUD containing a pill for the current category, a horizontal progress bar, and right-aligned “Score: 0” text. Use 15 questions total, 10 points per correct response, maximum score 150. Begin progress at zero; after answering a question update it to the completed-question percentage. Each question is presented in a white rounded question card with “Question N of 15,” a large question, and exactly three answer buttons in a three-column grid on desktop, changing to vertically stacked compact cards on mobile. Each answer includes an emoji picture, letter A/B/C, and answer text. The buttons have hover lift/focus styling. Do not allow another answer after one is chosen. Once answered, disable all options, mark the correct option with a green border, pale green background, and check mark, and if the selected answer was wrong mark it with a red border, pale red background, and X. Then reveal a pale blue feedback box with either “Correct! +10 points” or “Not quite.” followed by the explanation. Enable a “Next” button only after answering. Include the hint text “Keyboard: press 1, 2 or 3 to answer • Enter for Next.” Support number keys 1–3 for selecting answers and Enter for Next.

Use this exact fixed question bank, in this order, with three options and the indicated correct answer/explanation:
1. Category “Level 1 · Sensory organs”: “Which organ do we use to smell?” Options: 👁️ Eye, 👃 Nose, 👂 Ear. Correct: Nose. Explanation: “The nose contains smell receptors. They detect chemicals in the air.”
2. “Which receptor type detects light?” Options: 💡 Photoreceptor, 🔥 Thermoreceptor, 🖐️ Mechanoreceptor. Correct: Photoreceptor. Explanation: “Photoreceptors in the retina detect light for vision.”
3. “Which part of the tongue helps detect sweet tastes?” Options: 👅 Taste receptors, 🦴 Bone cells, 🩸 Red blood cells. Correct: Taste receptors. Explanation: “Taste receptors in taste buds detect dissolved chemicals such as sweet, salty and sour substances.”
4. “Which organ is important for hearing?” Options: 👂 Ear, 👃 Nose, 🦶 Foot. Correct: Ear. Explanation: “The ear changes sound vibrations into nerve signals.”
5. “Which inner-ear structure helps with balance?” Options: 🌀 Semicircular canals, 🫁 Lungs, 🦷 Teeth. Correct: Semicircular canals. Explanation: “The semicircular canals sense head movement and help the brain keep balance.”
6. Category “Level 2 · Nervous system”: “Which brain part helps control breathing and heartbeat?” Options: 🧠 Medulla oblongata, 🎨 Occipital lobe, 🦴 Spinal disc. Correct: Medulla oblongata. Explanation: “The medulla oblongata helps control automatic functions such as breathing and heart rate.”
7. “What does CNS stand for?” Options: 🧠 Central nervous system, 🧍 Cell nerve system, 🧪 Chemical nerve system. Correct: Central nervous system. Explanation: “The CNS is the brain and spinal cord. The PNS connects the CNS to the rest of the body.”
8. “What is the main job of a neuron?” Options: ⚡ Carry nerve signals, 🍽️ Digest food, 🦴 Make bones. Correct: Carry nerve signals. Explanation: “A neuron is a nerve cell specialised to receive and send signals.”
9. “What is a synapse?” Options: 🔗 A tiny gap between nerve cells, 🫀 A heart chamber, 🧱 A bone joint. Correct: A tiny gap between nerve cells. Explanation: “At a synapse, chemical messengers can carry a signal from one neuron to another cell.”
10. “What is a nerve impulse?” Options: ⚡ A travelling electrical signal, 💧 A drop of blood, 🌬️ A breath of air. Correct: A travelling electrical signal. Explanation: “A nerve impulse is an electrical change that travels along a neuron.”
11. Category “Level 3 · Drug effects”: “What do stimulants usually do to the central nervous system?” Options: 🚀 Increase activity and alertness, 🐢 Slow activity, 😴 Always cause sleep. Correct: Increase activity and alertness. Explanation: “Stimulants can increase activity, alertness and heart rate. Effects depend on the drug and dose.”
12. “What do CNS depressants generally do?” Options: 🌙 Slow brain activity, ⚡ Speed every nerve signal, 👀 Improve eyesight. Correct: Slow brain activity. Explanation: “CNS depressants reduce nervous-system activity and can make a person drowsy or less coordinated.”
13. “Antidepressants are medicines used mainly to treat…” Options: 💛 Depression and some other mental-health conditions, 🏃 Broken bones, 🦷 Tooth enamel. Correct: Depression and some other mental-health conditions. Explanation: “Antidepressants can treat depression and some other conditions. They are different from CNS depressants.”
14. “Hallucinogens can change a person’s…” Options: 🌈 Perceptions and senses, 🦴 Bone length, 💇 Hair colour. Correct: Perceptions and senses. Explanation: “Hallucinogens can change perception, mood and thinking. They can also cause fear or confusion.”
15. “Why can inhalants be dangerous?” Options: ⚠️ They can harm the brain, lungs and heart, 🥗 They add healthy vitamins, 🎵 They improve hearing. Correct: They can harm the brain, lungs and heart. Explanation: “Inhaled chemicals can quickly affect the brain and can damage the lungs, heart and other organs.”

After the final Next click, show the results state in the same rounded panel, centered. Display “Quest complete!”, a score-dependent message: at 150, “Perfect score — your neurons are firing!”; at 100 or more, “Great work — keep building those biology connections.”; otherwise, “Nice try — review your mistakes and play again to strengthen your recall.” Show a circular conic-gradient score ring with purple filled proportionally to score and pale gray remainder, containing “score / 150” (for example “0 / 150”). Provide “Review mistakes” secondary button and “Play again” primary gradient button. Under it, show a left-aligned mistakes review. If there are mistakes, title it “Review mistakes (N)” and for each show the question, “Your answer,” “Correct answer,” and the explanation in a pale pink box with a red left border. If no mistakes, show “Review mistakes” and “No mistakes this time — excellent!” The Review mistakes button should scroll to the first mistake when applicable. Play again resets the quiz. Include a small Sources and Credits section mentioning OpenStax Biology 2e, the National Institute on Drug Abuse, and the National Institute of Mental Health, with links, and note that picture symbols are built-in emoji/Unicode artwork. Ensure the layout is accessible, keyboard-friendly, touch-friendly, and scrollable on small screens.”,