Biology Game Demo 1

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<<set $playerName to "Stranger">> <<set $playedbefore to false>>

So now, <<print $playerName>>, you have a <<linkreplace "job.">>job. Blablabla <<linkreplace "hehehe.">>hehehe. You, here. blabblabla You blablablalba, <<linkreplace "bla?">>bla? ^ ^ <<timed 300ms>> > [<span class="menu-option" data-target="Punch">*Action* Punch</span>] <</timed>> <<timed 1s>> > [<span class="menu-option" data-target="Question">...</span>] <</timed>> <<timed 0.5s>> > [<span class="menu-option" data-target="Agree">Yup!</span>] <</timed>> <<timed 1s>> > [<span class="menu-option" data-target="Refuse">No.</span>] <</timed>> <<timed 0.5s>> > [<span class="menu-option" data-target="Question">?</span>] <</timed>> <</linkreplace>><</linkreplace>><</linkreplace>>

49 20 6C 6F 76 65 20 42 69 6F <<cacheaudio "relaxing-music-119247" "https://kiratea.nekoweb.org/relaxing-music-119247.mp3">> <<audio "relaxing-music-119247" volume 0.5 play loop>> <span class="titleshake"><span style="font-size: 3em;">This is an Animal Cell.</span></span> <<if !$playedbefore>> <<set $playedbefore = true>> <print>˙˙˙˙˙</print> <print>˙˙O˙˙</print> <print>˙˙˙˙˙</print> <print>˙˙˙˙˙</print> <p>Hello, player, welcome to the game! <i>This appears only once, please read carefully:</i> > This is a biology game project made by Margaret (and James). > The controls are your direction keys (up/down) and enter (to enter.) > Underlined links that are not highlighted in yellow are clickable with a mouse (cannot be controlled by keys.) > Good luck on your journey here! :]</p> <<else>> <span class="smallshake"> <print>˙˙˙˙˙</print> <print>˙˙˙˙˙</print> <print>˙˙˙˙˙</print> <print>˙˙˙˙˙</print></span> <p>Welcome back, $playerName!</p> <</if>> → [<span class="menu-option" data-target="Credits">Credits</span>] → [<span class="menu-option" data-target="Settings">Settings</span>] → [<span class="flash-option"><span class="menu-option selected" data-target="Start">Start</span></span>]

<span style="font-size: 2em;">Credits</span> A biology game project made by: Margaret and James Font from: https://github.com/svofski/glasstty Sound effects from: Pixabay relaxing-music-119247 Made using: Twine Sugercube 2.37.3 With help from: Twine 2 / SugarCube 2 Sample Code- by HiEv [<span class="menu-option" data-target="Title">Back to Title</span>]

System Volume: <<linkreplace "Enable Cheat? (true/false)" >>Enable Cheat? (true/false) Cheese touch, no cheats<</linkreplace>> <<textbox "$playerCheat" $playerCheat>> You are: First name:<<textbox "$playerName" $playerName>> <<button "This is me">> <<set $playerName to $playerName.trim()>> <<goto "Title">> <</button>>

Visit the organelles inside an animal cell..

This is (a rather inaccurate depiction of) an <<linkreplace "animal cell.">>animal cell. Animal cells are the basic units of life of al animals. It's a small, membrane-bound structure that contains specialized parts which work together to keep the cell alive and functioning. Unlike plant cells, animal cells cells don't have cell walls (which are ridgid) or cloroplasts, and as a result they're more boing (flexible in shape) and get energy from om (consuming other organisms) rather than making their own food from sunlight. [[oke]]<</linkreplace>> <<timed 0.5s>> ⠀⠀⠀⠀⠀⠀⠀⢀⣀⣤⣤⣤⡤⣤⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⣠⣶⠟⠉⠉⠀⠀⠀⠀⠈⠉⠛⠷⣦⡀⠀⠀⠀⠀⠀ ⠀⠀⠀⣠⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠹⣷⣄⠀⠀⠀ ⠀⠀⣼⠟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠻⣦⡀⠀ ⠀⢰⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣄⣄⠀⠹⣇⠀ ⠀⣼⠃⠀⠀⠀⠀⠀⠀⠀⠠⣴⣷⣦⠀⠀⠀⠀⠸⡿⠖⠀⠀⣿⡆ ⠀⢸⡇⠀⠀⠀⠀⠀⠀⠀⠀⠈⠋⣠⡄⠀⠀⠀⣀⠀⠀⠀⠀⣿⠃ ⠀⠘⣿⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣧⣐⣀⣰⠿⠀⠀⠀⣰⡏⠀ ⠀⠀⠙⢿⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⡟⠀⠀ ⠀⠀⠀⠈⠻⣦⣅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡾⠋⠀⠀⠀ ⠀⠀⠀⠀⠀⠈⠛⢷⣤⣀⠀⠀⠀⠀⠀⢀⣠⣴⠾⠋⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠙⣻⣿⣿⠛⠋⠉⠀⠀⠀⠀⠀⠀⠀⠀ <</timed>>

Another sign appeared... :: Note <<if $completedPairs gte 3>> <div class="success-message"> yey! RNA sequence transcribed: U A C G G U <p><strong>What next?</strong> This mRNA will travel out of the nucleus to the ribosomes, carrying the instructions to build a protein. </p> [[Continue to Ribosome|Ribosome_Intro]] </div> <<else>> <div id="game-status"> <p>Complete all 3 base pairs correctly to continue.</p> <<if $completedPairs gt 0>> <p>You have <<print $completedPairs>> out of 3 correct.</p> <</if>> </div> <</if>>

:: Nucleus_Intro You tried to take the note in your hand.. but in a second, it dissappears -- somehow, you had no hand? Suddenly, your surroundings shifted -- it's still complete darkness, but you can sense it's not the same space -- a while later, you came to your senses. The nuclear envelope covers around you. DNA strands float like libraries of information.<<linkreplace " Another note floats nearby.">> Another note floats nearby. The Nucleus is the control center of the cell. It contains all the DNA - the 'instructions' that tell the cell how to function, grow, and reproduce. The nucleus protects this material and controls which genes are active at any given time. Task: Transcribe and match the DNA bases to create the correct RNA sequence. [[Begin Gene Transcription|Nucleus_Game]] <</linkreplace>>

<div class="minigame-container"> <h4>DNA TRANSCRIPTION</h4> <p>Help transcribe DNA into messenger RNA by matching each DNA base with its RNA complement:</p> <div class="biology-reminder"> <strong>Base Pairing Rules:</strong><br> DNA → RNA<br> A → U<br> T → A<br> G → C<br> C → G </div> DNA Sequence: <strong>A T G C C A</strong> <<set $completedPairs to 0>> <div class="transcription-pairs"> <div class="base-pair"> <span>First base: A → </span> <<button "T">> <<replace "#pair1-wrong">><span class="incorrect">T is a DNA base, not RNA</span><</replace>> <</button>> <<button "U">> <<set $completedPairs to $completedPairs + 1>> <<replace "#pair1-result">><span class="correct">Correct! A pairs with U</span><</replace>> <<replace "#pair1-wrong">><</replace>> <<replace "#check-progress">><<include "CheckNucleusProgress">><</replace>> <</button>> <<button "G">> <<replace "#pair1-wrong">><span class="incorrect">G pairs with C</span><</replace>> <</button>> <span id="pair1-result">?</span> <span id="pair1-wrong"></span> </div> <div class="base-pair"> <span>Second base: T → </span> <<button "A">> <<set $completedPairs to $completedPairs + 1>> <<replace "#pair2-result">><span class="correct">Correct! T pairs with A</span><</replace>> <<replace "#pair2-wrong">><</replace>> <<replace "#check-progress">><<include "CheckNucleusProgress">><</replace>> <</button>> <<button "U">> <<replace "#pair2-wrong">><span class="incorrect">U pairs with A in DNA→RNA</span><</replace>> <</button>> <<button "G">> <<replace "#pair2-wrong">><span class="incorrect">G pairs with C</span><</replace>> <</button>> <span id="pair2-result">?</span> <span id="pair2-wrong"></span> </div> <div class="base-pair"> <span>Third base: G → </span> <<button "C">> <<set $completedPairs to $completedPairs + 1>> <<replace "#pair3-result">><span class="correct">✓ Correct! G pairs with C</span><</replace>> <<replace "#pair3-wrong">><</replace>> <<replace "#check-progress">><<include "CheckNucleusProgress">><</replace>> <</button>> <<button "A">> <<replace "#pair3-wrong">><span class="incorrect">A pairs with T/U</span><</replace>> <</button>> <<button "U">> <<replace "#pair3-wrong">><span class="incorrect">U pairs with A</span><</replace>> <</button>> <span id="pair3-result">?</span> <span id="pair3-wrong"></span> </div> </div> <div id="check-progress"> <<include "CheckNucleusProgress">> </div> </div> <style> .transcription-pairs { margin: 20px 0; } .base-pair { margin: 15px 0; padding: 15px; border: 1px solid #5dff4b; border-radius: 8px; background: rgba(93, 255, 75, 0.1); } .base-pair button { margin: 0 5px; padding: 8px 12px; } .biology-reminder { background: rgba(255, 255, 0, 0.1); border: 1px solid #ff0; padding: 10px; margin: 15px 0; border-radius: 5px; font-size: 0.9em; } .correct { color: #5dff4b; font-weight: bold; } .incorrect { color: #ff4444; } .success-message { margin: 20px 0; padding: 15px; border: 2px solid #5dff4b; background: rgba(93, 255, 75, 0.1); } </style>

The space shifted again, that was surprising.. and weird, you wonder how that happened. <s>(certainly not because a certain someone ran out of ideas-)</s> Tiny machines click and whir around you. You look up, in small words it wrote "Protein factory". Immediately below it.. the sign again: Ribosomes are found in all living cells and are one of the most ancient cellular components. They read mRNA instructions and assemble amino acids into proteins. Please translate this mRNA sequence. [[Begin Protein Translation|Ribosome_Game]]

You look around and see some amino acids, you collected them and placed them on the desk which suddenly appeared out of nowhere. You see yet another label, it reads: <div class="minigame-container"> <h4>PROTEIN TRANSLATION</h4> <p>mRNA: AUG-CCU-GAC (Start-Proline-Aspartic Acid)</p> <p>Drag the amino acids into the correct order:</p> <<set $proteinSequence to []>> <div class="amino-acid-pool"> <span class="amino-acid" data-acid="Start">Start (AUG)</span> <span class="amino-acid" data-acid="Proline">Proline (CCU)</span> <span class="amino-acid" data-acid="Aspartic">Aspartic Acid (GAC)</span> <span class="amino-acid" data-acid="Stop">Stop (UAA)</span> </div> <div class="assembly-line"> <<button "Add Start">> <<set $proteinSequence to ["Start"]>> <<replace "#sequence-display">>Current: Start<</replace>> <</button>> <<button "Add Proline">> <<set $proteinSequence to $proteinSequence.concat(["Proline"])>> <<replace "#sequence-display">>Current: <<print $proteinSequence.join(" - ")>><</replace>> <</button>> <<button "Add Aspartic">> <<set $proteinSequence to $proteinSequence.concat(["Aspartic"])>> <<replace "#sequence-display">>Current: <<print $proteinSequence.join(" - ")>><</replace>> <</button>> <<button "Add Stop">> <<set $proteinSequence to $proteinSequence.concat(["Stop"])>> <<replace "#sequence-display">>Current: <<print $proteinSequence.join(" - ")>><</replace>> <</button>> </div> <div id="sequence-display" style="margin: 15px 0; padding: 10px; border: 1px solid #5dff4b;"> No amino acids added yet </div> <<button "Check Protein">> <<if $proteinSequence.length is 4 and $proteinSequence[0] is "Start" and $proteinSequence[1] is "Proline" and $proteinSequence[2] is "Aspartic" and $proteinSequence[3] is "Stop">> <<replace "#translation-result">> That was easy, you thought. A small voice reported in the background: "The cell can now use this enzyme."</span> <br>[[Continue to Rough ER|RoughER_Intro]] <</replace>> <<else>> <<replace "#translation-result">> Incorrect sequence! Remember: Start - Proline - Aspartic Acid - Stop <</replace>> <</if>> <</button>> <div id="translation-result" style="margin-top: 15px;"></div> </div> <style> .amino-acid-pool { display: flex; gap: 10px; margin: 15px 0; flex-wrap: wrap; } .amino-acid { border: 1px solid #5dff4b; padding: 8px 12px; border-radius: 4px; background: rgba(93, 255, 75, 0.2); } .assembly-line { margin: 15px 0; } .assembly-line button { margin: 0 5px 5px 0; } </style>

Dragging your protein, you ran off and came upon a hallway. To your surprise, the walls here are studded with ribosomes! Proteins fold into complex shapes as they travel through membrane tunnels. "Quality control department!" a distant voice calls... What was that? You thought ... "These newly synthesized proteins need proper folding. Some need sugar tags added." The sign appears again, you pushed it away, taking no notice of it as you look at the matter in your hands. [[Begin Protein Processing|RoughER_Game]]

:: RoughER <div class="minigame-container"> <h4>PROTEIN PROCESSING & FOLDING</h4> <p>Process these 3 proteins correctly:</p> <<set $processedCount to 0>> <div class="protein-card"> <h5>Protein 1: Insulin (Hormone)</h5> <p>This protein needs:</p> <<button "No processing">> <<replace "#protein1-result">><span class="incorrect">All proteins need at least folding!</span><</replace>> <</button>> <<button "Just folding">> <<replace "#protein1-result">><span class="incorrect">Insulin needs sugar tags too!</span><</replace>> <</button>> <<button "Folding + Sugar tags">> <<set $processedCount to $processedCount + 1>> <<replace "#protein1-result">><span class="correct">Correct! Insulin needs sugar tags to function</span><</replace>> <<replace "#progress-check">><<include "CheckRoughERProgress">><</replace>> <</button>> <div id="protein1-result" class="result"></div> </div> <div class="protein-card"> <h5>Protein 2: Digestive Enzyme</h5> <p>This protein needs:</p> <<button "Folding only">> <<set $processedCount to $processedCount + 1>> <<replace "#protein2-result">><span class="correct">Correct! This enzyme works without modifications</span><</replace>> <<replace "#progress-check">><<include "CheckRoughERProgress">><</replace>> <</button>> <<button "Folding + Sugar tags">> <<replace "#protein2-result">><span class="incorrect">No sugar needed for this one</span><</replace>> <</button>> <<button "No processing">> <<replace "#protein2-result">><span class="incorrect">All proteins need folding!</span><</replace>> <</button>> <div id="protein2-result" class="result"></div> </div> <div class="protein-card"> <h5>Protein 3: Membrane Receptor</h5> <p>This protein needs:</p> <<button "Just folding">> <<replace "#protein3-result">><span class="incorrect">This needs sugar tags to work in the membrane</span><</replace>> <</button>> <<button "No processing">> <<replace "#protein3-result">><span class="incorrect">All proteins need processing!</span><</replace>> <</button>> <<button "Folding + Sugar tags">> <<set $processedCount to $processedCount + 1>> <<replace "#protein3-result">><span class="correct">Correct! Membrane proteins often need sugar tags</span><</replace>> <<replace "#progress-check">><<include "CheckRoughERProgress">><</replace>> <</button>> <div id="protein3-result" class="result"></div> </div> <div id="progress-check"> <<include "CheckRoughERProgress">> </div> </div> <style> .protein-card { border: 1px solid #5dff4b; padding: 15px; margin: 10px 0; border-radius: 8px; background: rgba(93, 255, 75, 0.1); } .protein-card h5 { margin-top: 0; color: #ff0; } .result { margin-top: 10px; min-height: 20px; } .correct { color: #5dff4b; font-weight: bold; } .incorrect { color: #ff4444; } .success-message { margin: 20px 0; padding: 15px; border: 2px solid #5dff4b; background: rgba(93, 255, 75, 0.1); } </style>

:: SmoothER No sooner, you found yourself in the Smooth ER. The usual sign appeared: Smooth ER produces lipids for cell membranes, synthesizes hormones, and detoxifies drugs and poisons. Unlike the Rough ER, it has no ribosomes on its surface. Task: Build a phospholipid [[Begin Lipid Synthesis|SmoothER_Game]]

:: CheckRoughERProgress <<if $processedCount gte 3>> <div class="success-message"> You took a piece of the wall and packaged these proteins inside. Taking a peak at the address, you see that they are to be sent to the Gogi apparatus. You now have a vesicle. You patted the vesicle before letting it go. The next destination is Smooth ER.</p> [[Continue to Smooth ER|SmoothER_Intro]] </div> <<else>> <div style="margin-top: 20px;"> <p>Process all 3 proteins correctly to continue.</p> <<if $processedCount gt 0>> <p>You have <<print $processedCount>> out of 3 correct.</p> <</if>> </div> <</if>>

:: SmoothER_Game <div class="minigame-container"> <h4>PHOSPHOLIPID SYNTHESIS</h4> <p>Build a phospholipid for the cell membrane. What's the first component?</p> <<button "Glycerol Backbone">><<goto "SmoothER_Step2">><</button>> <<button "Fatty Acid">><p> Need something to attach them to first </p> <</button>> <<button "Phosphate Group">>That comes later in the process<</button>> </div>

:: SmoothER_Step2 <div class="minigame-container"> <p>The glycerol backbone provides the structure.</p> <p>Now you need to add fatty acids. How many fatty acids attach to glycerol?</p> <<button "One">>Phospholipids need two fatty acid tails<</button>> <<button "Two">><<goto "SmoothER_Step3">><</button>> <<button "Three">>That would be a triglyceride (fat molecule)<</button>> </div>

:: SmoothER_Step3 <div class="minigame-container"> <p>Yup, two fatty acids create the hydrophobic tails.</p> <p>Finally, what makes the head hydrophilic (water-loving)?</p> <<button "Another Fatty Acid">>That would make it completely hydrophobic D:<</button>> <<button "Phosphate Group">><<goto "SmoothER_Success">><</button>> <<button "Sugar Molecule">>Some membrane proteins have sugars, but not phospholipids<</button>> </div>

:: SmoothER_Success <div class="minigame-container"> <div class="success-message"> yey! Phospholipid synthesized: Glycerol + 2 Fatty Acids + Phosphate The sign glows: <p><strong>Smooth ER's jobs include:</strong></p> <ul> <li>Making lipids for membranes</li> <li>Detoxification of drugs and poisons (they work in liver cells, for example)</li> <li>Calcium storage for cell signaling</li> </ul> <p> New membranes are packaged and sent to where they're needed</p> [[Continue to Golgi Apparatus|Golgi_Intro]] </div> </div>

:: Golgi_Intro Further in, you enter what looks like a postal service. Stacks of packages are in an assembly line. There's a portrait of a man with a fantastic moustache hanging on the wall. You recognize him as Camillo Gogi. "Welcome to the shipping department!" The sign reads. "This place modifies, sorts, and packages proteins for delivery. Please tag these packages with the right destinations." [[Begin Package Sorting|Golgi_Game]]

:: Golgi_Game You walk over the the counter. A pile of packages lie on the floor. You see a set of instructions written on the wall. <div class="minigame-container"> <h4>GOLGI SORTING STATION</h4> <p>Process packages by clicking them in order, then choosing the right processing step and destination.</p> <<if !$golgiProgress>><<set $golgiProgress = { package1: {selected: false, processed: false, shipped: false}, package2: {selected: false, processed: false, shipped: false}, package3: {selected: false, processed: false, shipped: false}, currentPackage: "" }>> <<set $currentAction = "Click a package to start processing!">> <</if>> <div class="game-ui"> <div class="packages-column"> <h5>INCOMING PACKAGES</h5> <div class="package <<if $golgiProgress.package1.selected>>selected<</if>> <<if $golgiProgress.package1.shipped>>completed<</if>>"> <div class="package-icon">💊</div> <div class="package-info"> <strong>Insulin</strong><br> <small>From: Rough ER</small><br> <small>Needs: Sugar tags</small> </div> <<if !$golgiProgress.package1.shipped>> [[Select|Golgi_Select_Package1]] <</if>> </div> <div class="package <<if $golgiProgress.package2.selected>>selected<</if>> <<if $golgiProgress.package2.shipped>>completed<</if>>"> <div class="package-icon">🔬</div> <div class="package-info"> <strong>Digestive Enzyme</strong><br> <small>From: Rough ER</small><br> <small>Needs: Activation</small> </div> <<if !$golgiProgress.package2.shipped>> [[Select|Golgi_Select_Package2]] <</if>> </div> <div class="package <<if $golgiProgress.package3.selected>>selected<</if>> <<if $golgiProgress.package3.shipped>>completed<</if>>"> <div class="package-icon">🎯</div> <div class="package-info"> <strong>Membrane Receptor</strong><br> <small>From: Rough ER</small><br> <small>Needs: Sugar tags</small> </div> <<if !$golgiProgress.package3.shipped>> [[Select|Golgi_Select_Package3]] <</if>> </div> </div> <div class="processing-column"> <h5>PROCESSING STATIONS</h5> <<if $golgiProgress.currentPackage != "">> <div class="station-info"> Processing: <<if $golgiProgress.currentPackage == "package1">>Insulin<</if>> <<if $golgiProgress.currentPackage == "package2">>Digestive Enzyme<</if>> <<if $golgiProgress.currentPackage == "package3">>Membrane Receptor<</if>> </div> <<if $golgiProgress.currentPackage == "package1" and !$golgiProgress.package1.processed>> <div class="station-options"> [[Add Sugar Tags|Golgi_Process_Sugar]]<br> [[Activate Enzyme|Golgi_Process_Wrong1]]<br> [[Final Packaging|Golgi_Process_Wrong2]] </div> <<elseif $golgiProgress.currentPackage == "package2" and !$golgiProgress.package2.processed>> <div class="station-options"> [[Add Sugar Tags|Golgi_Process_Wrong3]]<br> [[Activate Enzyme|Golgi_Process_Activate]]<br> [[Final Packaging|Golgi_Process_Wrong4]] </div> <<elseif $golgiProgress.currentPackage == "package3" and !$golgiProgress.package3.processed>> <div class="station-options"> [[Add Sugar Tags|Golgi_Process_Sugar]]<br> [[Activate Enzyme|Golgi_Process_Wrong5]]<br> [[Final Packaging|Golgi_Process_Wrong6]] </div> <<else>> <div class="station-complete"> ✓ Processed! Now choose destination below. </div> <</if>> <</if>> </div> <div class="destinations-column"> <h5>DESTINATIONS</h5> <<if $golgiProgress.currentPackage == "package1" and $golgiProgress.package1.processed and !$golgiProgress.package1.shipped>> <div class="destination-options"> [[Secretion (Outside Cell)|Golgi_Dest_Secretion]]<br> [[Lysosome|Golgi_Dest_Wrong1]]<br> [[Cell Membrane|Golgi_Dest_Wrong2]] </div> <<elseif $golgiProgress.currentPackage == "package2" and $golgiProgress.package2.processed and !$golgiProgress.package2.shipped>> <div class="destination-options"> [[Secretion (Outside Cell)|Golgi_Dest_Wrong3]]<br> [[Lysosome|Golgi_Dest_Lysosome]]<br> [[Cell Membrane|Golgi_Dest_Wrong4]] </div> <<elseif $golgiProgress.currentPackage == "package3" and $golgiProgress.package3.processed and !$golgiProgress.package3.shipped>> <div class="destination-options"> [[Secretion (Outside Cell)|Golgi_Dest_Wrong5]]<br> [[Lysosome|Golgi_Dest_Wrong6]]<br> [[Cell Membrane|Golgi_Dest_Membrane]] </div> <</if>> </div> </div> <div class="game-status"> <div><strong>Status:</strong> $currentAction</div> <div class="progress"> Packages Shipped: <<set $shippedCount = 0>> <<if $golgiProgress.package1.shipped>><<set $shippedCount = $shippedCount + 1>><</if>> <<if $golgiProgress.package2.shipped>><<set $shippedCount = $shippedCount + 1>><</if>> <<if $golgiProgress.package3.shipped>><<set $shippedCount = $shippedCount + 1>><</if>> <<print $shippedCount>>/3 </div> <<if $shippedCount == 3>> <div class="success-message"> [[All packages shipped! Continue to Mitochondria|Mitochondria_Game]] </div> <</if>> </div> </div> <style> .game-ui { display: flex; gap: 20px; margin: 20px 0; flex-wrap: wrap; } .packages-column, .processing-column, .destinations-column { flex: 1; min-width: 200px; } .package, .station-options, .destination-options { border: 2px solid #5dff4b; padding: 15px; margin: 10px 0; border-radius: 8px; text-align: center; } .package.selected { background: rgba(93, 255, 75, 0.3); border-color: #ff0; } .package.completed { opacity: 0.5; } .package-icon { font-size: 2em; margin-bottom: 5px; } .station-info, .station-complete { padding: 10px; margin: 10px 0; background: rgba(93, 255, 75, 0.1); border-radius: 5px; } .station-options a, .destination-options a { display: block; margin: 5px 0; padding: 8px; background: rgba(93, 255, 75, 0.2); border-radius: 4px; } .station-options a:hover, .destination-options a:hover { background: rgba(93, 255, 75, 0.4); } .game-status { margin-top: 20px; padding: 15px; border: 2px solid #5dff4b; border-radius: 8px; background: rgba(93, 255, 75, 0.1); } .progress { margin-top: 10px; font-weight: bold; } </style>

<<set $golgiProgress.package1.selected = true>> <<set $golgiProgress.package2.selected = false>> <<set $golgiProgress.package3.selected = false>> <<set $golgiProgress.currentPackage = "package1">> <<set $currentAction = "Insulin selected! Add sugar tags.">> <<goto "Golgi_Game">>

<<set $golgiProgress.package1.selected = false>> <<set $golgiProgress.package2.selected = true>> <<set $golgiProgress.package3.selected = false>> <<set $golgiProgress.currentPackage = "package2">> <<set $currentAction = "Digestive Enzyme selected! Activate it.">> <<goto "Golgi_Game">>

<<set $golgiProgress.package1.selected = false>> <<set $golgiProgress.package2.selected = false>> <<set $golgiProgress.package3.selected = true>> <<set $golgiProgress.currentPackage = "package3">> <<set $currentAction = "Membrane Receptor selected! Add sugar tags.">> <<goto "Golgi_Game">>

<<if $golgiProgress.currentPackage == "package1">> <<set $golgiProgress.package1.processed = true>> <<set $currentAction = "✓ Insulin processed! Ship to secretion.">> <<elseif $golgiProgress.currentPackage == "package3">> <<set $golgiProgress.package3.processed = true>> <<set $currentAction = "✓ Receptor processed! Ship to membrane.">> <</if>> <<goto "Golgi_Game">>

<<if $golgiProgress.currentPackage == "package2">> <<set $golgiProgress.package2.processed = true>> <<set $currentAction = "✓ Enzyme activated! Ship to lysosome.">> <</if>> <<goto "Golgi_Game">>

<<set $golgiProgress.package1.shipped = true>> <<set $golgiProgress.currentPackage = "">> <<set $currentAction = "✓ Insulin shipped for secretion!">> <<goto "Golgi_Game">>

<<set $golgiProgress.package2.shipped = true>> <<set $golgiProgress.currentPackage = "">> <<set $currentAction = "✓ Enzyme shipped to lysosome!">> <<goto "Golgi_Game">>

<<set $golgiProgress.package3.shipped = true>> <<set $golgiProgress.currentPackage = "">> <<set $currentAction = "✓ Receptor shipped to cell membrane!">> <<goto "Golgi_Game">>

:: Mitochondria_Game You got teleported to a completely different place. Here it seems is the power plant of the cell. Looking around, you saw your instructions. <h4>MITOCHONDRIAL POWER PLANT</h4> <p>Click the electron transport chain components in order to generate ATP. You need 3 ATP to continue.</p> <<if !$mitoProgress>> <<set $mitoProgress = { "step": 1, "protons": 0, "atp": 0, "completed": false }>> <</if>> <div class="energy-game"> <div class="chain-components">  <div class="component <<if $mitoProgress.step > 1>>activated<</if>>"> <<if $mitoProgress.step == 1>> [[NADH|Mito_Step_1]] <<else>> NADH ✓ <</if>> <br><small>Electron Source</small> </div>  <div class="component <<if $mitoProgress.step > 2>>activated<</if>>"> <<if $mitoProgress.step == 2>> [[Complex I|Mito_Step_2]] <<else>> Complex I ✓ <</if>> <br><small>Pumps 4H+</small> </div>  <div class="component <<if $mitoProgress.step > 3>>activated<</if>>"> <<if $mitoProgress.step == 3>> [[CoQ|Mito_Step_3]] <<else>> CoQ ✓ <</if>> <br><small>Electron Carrier</small> </div>  <div class="component <<if $mitoProgress.step > 4>>activated<</if>>"> <<if $mitoProgress.step == 4>> [[Complex III|Mito_Step_4]] <<else>> Complex III ✓ <</if>> <br><small>Pumps 4H+</small> </div>  <div class="component <<if $mitoProgress.step > 5>>activated<</if>>"> <<if $mitoProgress.step == 5>> [[Cyt C|Mito_Step_5]] <<else>> Cyt C ✓ <</if>> <br><small>Electron Shuttle</small> </div>  <div class="component <<if $mitoProgress.step > 6>>activated<</if>>"> <<if $mitoProgress.step == 6>> [[Complex IV|Mito_Step_6]] <<else>> Complex IV ✓ <</if>> <br><small>Pumps 2H+</small> </div>  <div class="component <<if $mitoProgress.step > 7>>activated<</if>>"> <<if $mitoProgress.step == 7>> [[O₂|Mito_Step_7]] <<else>> O₂ ✓ <</if>> <br><small>Final Acceptor</small> </div>  <div class="component <<if $mitoProgress.step > 8>>activated<</if>>"> <<if $mitoProgress.step == 8>> [[ATP Synthase|Mito_Step_8]] <<else>> ATP Synthase ✓ <</if>> <br><small>Makes ATP!</small> </div> </div> <div class="energy-display"> <div class="proton-gradient"> <div class="gradient-label">Proton Gradient</div> <div class="gradient-bar"> <div class="gradient-fill" style="width: <<print ($mitoProgress.protons / 10) * 100>>%"></div> </div> <div><<print $mitoProgress.protons>> H+ pumped (need 10 for 1 ATP)</div> </div> <div class="atp-counter"> <div class="atp-label">ATP Produced</div> <div class="atp-bubbles"> <<if $mitoProgress.atp >= 1>><div class="atp-bubble">ATP</div><</if>> <<if $mitoProgress.atp >= 2>><div class="atp-bubble">ATP</div><</if>> <<if $mitoProgress.atp >= 3>><div class="atp-bubble">ATP</div><</if>> </div> <div><<print $mitoProgress.atp>>/3 ATP</div> </div> </div> <<if $mitoProgress.atp == 1>> <div class="game-message"> <p>✓ 1 ATP produced! <strong>Restart the chain</strong> to pump more protons and make more ATP.</p> <p>Click NADH to start the electron transport chain again.</p> </div> <<elseif $mitoProgress.atp == 2>> <div class="game-message"> <p>✓ 2 ATP produced! <strong>One more to go!</strong> Restart the chain by clicking NADH.</p> </div> <</if>> <<if $mitoProgress.completed>> <div class="success-message"> [[ Maximum ATP production! Continue to Cytoskeleton|Cytoskeleton_Intro]] </div> <<else>> <div class="game-controls"> [[Reset Entire Game|Mito_Reset]] </div> <</if>> </div> <style> /* Chain Components */ .chain-components { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 20px 0; } .component { border: 1px solid #5dff4b; padding: 10px; border-radius: 5px; min-width: 70px; text-align: center; background: rgba(93, 255, 75, 0.1); transition: all 0.3s ease; } .component a { display: block; color: #a3ff99; text-decoration: none; font-weight: bold; } .component a:hover { color: #ff0; } .component.activated { background: #5dff4b; color: #000; font-weight: bold; } .component.activated a { color: #000; } /* Energy Display */ .energy-display { display: flex; justify-content: space-around; margin: 20px 0; flex-wrap: wrap; gap: 20px; } .proton-gradient, .atp-counter { flex: 1; min-width: 200px; text-align: center; } .gradient-label, .atp-label { font-weight: bold; margin-bottom: 10px; color: #ff0; } .gradient-bar { width: 100%; height: 15px; background: rgba(93, 255, 75, 0.2); border-radius: 8px; margin: 10px 0; overflow: hidden; border: 1px solid #5dff4b; } .gradient-fill { height: 100%; background: #ff0; transition: width 0.5s ease; } .atp-bubbles { display: flex; gap: 5px; justify-content: center; margin: 10px 0; flex-wrap: wrap; } .atp-bubble { background: #5dff4b; color: #000; padding: 5px 10px; border-radius: 15px; font-weight: bold; } /* Messages */ .game-message { margin: 15px 0; padding: 10px; border-left: 3px solid #ff0; background: rgba(255, 255, 0, 0.05); } .success-message { margin: 15px 0; padding: 10px; border-left: 3px solid #5dff4b; background: rgba(93, 255, 75, 0.05); } .success-message a { display: inline-block; margin-top: 10px; padding: 8px 15px; background: rgba(93, 255, 75, 0.2); border: 1px solid #5dff4b; color: #a3ff99; text-decoration: none; border-radius: 4px; } .success-message a:hover { background: rgba(93, 255, 75, 0.3); } /* Game Controls */ .game-controls { text-align: center; margin-top: 15px; } .game-controls a { display: inline-block; padding: 8px 15px; background: rgba(255, 68, 68, 0.2); border: 1px solid #ff4444; color: #a3ff99; text-decoration: none; border-radius: 4px; font-size: 0.9em; } .game-controls a:hover { background: rgba(255, 68, 68, 0.3); } /* Responsive */ @media (max-width: 768px) { .chain-components { gap: 5px; } .component { min-width: 60px; padding: 8px 5px; font-size: 0.9em; } .energy-display { flex-direction: column; } } </style>

<<set $currentAction = "Wrong! Only enzymes need activation.">> <<goto "Golgi_Game">>

<<set $currentAction = "Too early! Process the package first.">> <<goto "Golgi_Game">>

<<set $currentAction = "Wrong! This enzyme doesn't need sugar tags.">> <<goto "Golgi_Game">>

<<set $currentAction = "Too early! Process the package first.">> <<goto "Golgi_Game">>

<<set $currentAction = "Wrong! Only enzymes need activation.">> <<goto "Golgi_Game">>

<<set $currentAction = "Too early! Process the package first.">> <<goto "Golgi_Game">>

<<set $currentAction = "Wrong destination! Insulin goes outside the cell.">> <<goto "Golgi_Game">>

<<set $currentAction = "Wrong destination! Insulin is secreted, not embedded.">> <<goto "Golgi_Game">>

<<set $currentAction = "Wrong destination! Enzymes stay inside the cell.">> <<goto "Golgi_Game">>

<<set $currentAction = "Wrong destination! Enzymes don't go in the membrane.">> <<goto "Golgi_Game">>

<<set $currentAction = "Wrong destination! Receptors stay in the cell.">> <<goto "Golgi_Game">>

<<set $currentAction = "Wrong destination! Receptors aren't for digestion.">> <<goto "Golgi_Game">>

:: Mito_Step_1 <<if $mitoProgress.step == 1>> <<set $mitoProgress.step = 2>> <</if>> <<goto "Mitochondria_Game">>

:: Mito_Step_2 <<if $mitoProgress.step == 2>> <<set $mitoProgress.step = 3>> <<set $mitoProgress.protons = $mitoProgress.protons + 4>> <</if>> <<goto "Mitochondria_Game">>

:: Mito_Step_3 <<if $mitoProgress.step == 3>> <<set $mitoProgress.step = 4>> <</if>> <<goto "Mitochondria_Game">>

:: Mito_Step_4 <<if $mitoProgress.step == 4>> <<set $mitoProgress.step = 5>> <<set $mitoProgress.protons = $mitoProgress.protons + 4>> <</if>> <<goto "Mitochondria_Game">>

:: Mito_Step_5 <<if $mitoProgress.step == 5>> <<set $mitoProgress.step = 6>> <</if>> <<goto "Mitochondria_Game">>

:: Mito_Step_6 <<if $mitoProgress.step == 6>> <<set $mitoProgress.step = 7>> <<set $mitoProgress.protons = $mitoProgress.protons + 2>> <</if>> <<goto "Mitochondria_Game">>

:: Mito_Step_7 <<if $mitoProgress.step == 7>> <<set $mitoProgress.step = 8>> <</if>> <<goto "Mitochondria_Game">>

:: Mito_Step_8 <<if $mitoProgress.step == 8>> <<if $mitoProgress.protons >= 10>> <<set $mitoProgress.atp = $mitoProgress.atp + 1>> <<set $mitoProgress.protons = $mitoProgress.protons - 10>> <</if>> <<set $mitoProgress.step = 1>> <<if $mitoProgress.atp >= 3>> <<set $mitoProgress.completed = true>> <</if>> <</if>> <<goto "Mitochondria_Game">>

:: Mito_Reset <<set $mitoProgress = { "step": 1, "protons": 0, "atp": 0, "completed": false }>> <<goto "Mitochondria_Game">>

:: Cytoskeleton_Intro You were teleported yet again.. for the nth time.. to another place. This area seems to be a stretch of wall, with weird objects and tubes lying all over the place. You recognize a funny little guy.. it's a motor protein! The sign reads: The Cytoskeleton is the cell's internal structure and transport system. It's a network of protein filaments that gives the cell its shape, allows movement, and acts as highways for transporting materials. Those motor proteins look cute. [[Begin Transport Guide|Cytoskeleton_Game]]

:: Cytoskeleton_Game <p>Choose the correct motor protein to move each vesicle to its destination.</p> Dynein - Moves cargo toward the cell center (minus end of microtubules) Kinesin - Moves cargo toward the cell membrane (plus end of microtubules) Myosin - Walks along actin filaments for muscle contraction and cell movement <<if !$cytoProgress>> <<set $cytoProgress = { "vesicle1": false, "vesicle2": false, "vesicle3": false, "completed": false }>> <</if>> <div class="transport-game"> <div class="vesicles"> <div class="vesicle <<if $cytoProgress.vesicle1>>delivered<</if>>"> <div class="vesicle-icon">🧬</div> <div class="vesicle-info"> <strong>Lysosome</strong><br> <small>Needs to reach cell interior</small><br> <small>For waste cleanup</small> </div> <<if !$cytoProgress.vesicle1>> <div class="motor-options"> [[Dynein|Cyto_Vesicle1_Dynein]]<br> [[Kinesin|Cyto_Vesicle1_Kinesin]]<br> [[Myosin|Cyto_Vesicle1_Myosin]] </div> <<else>> <div class="delivered-text">✓ Delivered!</div> <</if>> </div> <div class="vesicle <<if $cytoProgress.vesicle2>>delivered<</if>>"> <div class="vesicle-icon">🎯</div> <div class="vesicle-info"> <strong>Membrane Protein</strong><br> <small>Needs to reach cell surface</small><br> <small>For signaling</small> </div> <<if !$cytoProgress.vesicle2>> <div class="motor-options"> [[Dynein|Cyto_Vesicle2_Dynein]]<br> [[Kinesin|Cyto_Vesicle2_Kinesin]]<br> [[Myosin|Cyto_Vesicle2_Myosin]] </div> <<else>> <div class="delivered-text">✓ Delivered!</div> <</if>> </div> <div class="vesicle <<if $cytoProgress.vesicle3>>delivered<</if>>"> <div class="vesicle-icon">💪</div> <div class="vesicle-info"> <strong>Muscle Protein</strong><br> <small>Needs to contract actin fibers</small><br> <small>For cell movement</small> </div> <<if !$cytoProgress.vesicle3>> <div class="motor-options"> [[Dynein|Cyto_Vesicle3_Dynein]]<br> [[Kinesin|Cyto_Vesicle3_Kinesin]]<br> [[Myosin|Cyto_Vesicle3_Myosin]] </div> <<else>> <div class="delivered-text">Delivered!</div> <</if>> </div> </div> <div class="motor-info"> <h5>Motor Protein Guide:</h5> <div class="motor-desc"> <strong>Dynein:</strong> Moves toward cell center (minus end)<br> <strong>Kinesin:</strong> Moves toward cell membrane (plus end)<br> <strong>Myosin:</strong> Works on actin filaments for movement </div> </div> <<set $deliveredCount = 0>> <<if $cytoProgress.vesicle1>><<set $deliveredCount = $deliveredCount + 1>><</if>> <<if $cytoProgress.vesicle2>><<set $deliveredCount = $deliveredCount + 1>><</if>> <<if $cytoProgress.vesicle3>><<set $deliveredCount = $deliveredCount + 1>><</if>> <<if $deliveredCount == 3>> <div class="success-message"> [[✓ All cargo delivered! Continue to Lysosome|Lysosome_Intro]] </div> <<else>> <div class="progress"> Vesicles delivered: <<print $deliveredCount>>/3 </div> <</if>> </div> <style> .transport-game { margin: 20px 0; } .vesicles { display: flex; flex-direction: column; gap: 15px; margin: 20px 0; } .vesicle { border: 1px solid #5dff4b; padding: 15px; border-radius: 8px; background: rgba(93, 255, 75, 0.1); display: flex; align-items: center; gap: 15px; } .vesicle.delivered { opacity: 0.6; background: rgba(93, 255, 75, 0.05); } .vesicle-icon { font-size: 2em; flex-shrink: 0; } .vesicle-info { flex-grow: 1; } .motor-options { flex-shrink: 0; display: flex; gap: 10px; } .motor-options a { padding: 8px 12px; background: rgba(93, 255, 75, 0.2); border: 1px solid #5dff4b; border-radius: 4px; text-decoration: none; font-size: 0.9em; } .motor-options a:hover { background: rgba(93, 255, 75, 0.3); } .delivered-text { color: #5dff4b; font-weight: bold; flex-shrink: 0; } .motor-info { margin: 20px 0; padding: 15px; border-left: 3px solid #ff0; background: rgba(255, 255, 0, 0.05); } .motor-desc { line-height: 1.6; } .progress { text-align: center; margin: 15px 0; font-weight: bold; } </style>

:: Lysosome_Intro Looking at the map, it seems you've arrived at the final destination.. a Lysosome? The air feels heavy with the scent of chemicals.. you don't want to stay much longer -- it seems as if it's planning on to dissolve you soon. The sign appeared beside you: The Lysosome is the cell's recycling center and site of waste disposal. These membrane-bound sacs contain powerful digestive enzymes that break down unusable cell parts, foreign objects, and waste materials. "It's time," a quiet mumuer can be heard. "The ap#R?Ed sifghnal hfs b3en received. ..." [[Begin Final Cleanup|Lysosome_Game]]

:: Cyto_Vesicle1_Dynein <<set $cytoProgress.vesicle1 = true>> <<goto "Cytoskeleton_Game">>

:: Cyto_Vesicle1_Kinesin <<set $message = "Kinesin moves outward, but lysosomes go inward!">> <<goto "Cytoskeleton_Game">>

:: Cyto_Vesicle1_Myosin <<set $message = "Myosin works on actin, not microtubules!">> <<goto "Cytoskeleton_Game">>

:: Cyto_Vesicle2_Dynein <<set $message = "Dynein moves inward, but membrane proteins go outward! AHHHHH">> <<goto "Cytoskeleton_Game">>

:: Cyto_Vesicle2_Kinesin <<set $cytoProgress.vesicle2 = true>> <<goto "Cytoskeleton_Game">>

:: Cyto_Vesicle2_Myosin <<set $message = "Myosin works on actin, not microtubules!">> <<goto "Cytoskeleton_Game">>

:: Cyto_Vesicle3_Dynein <<set $message = "Dynein works on microtubules, not actin!">> <<goto "Cytoskeleton_Game">>

:: Cyto_Vesicle3_Kinesin <<set $message = "Kinesin works on microtubules, not actin!">> <<goto "Cytoskeleton_Game">>

:: Cyto_Vesicle3_Myosin <<set $cytoProgress.vesicle3 = true>> <<goto "Cytoskeleton_Game">>

:: Lysosome_Game <h4>LYSOSOME WASTE BREAKDOWN</h4> <p>Match the correct enzymes to break down each type of cellular waste.</p> <<if !$lysosomeProgress>> <<set $lysosomeProgress = { "waste1": false, "waste2": false, "waste3": false, "completed": false }>> <</if>> This doesn't feel right, why is this area red? <div class="lysosome-game"> <div class="waste-items"> <div class="waste <<if $lysosomeProgress.waste1>>digested<</if>>"> <div class="waste-icon">🔋</div> <div class="waste-info"> <strong>Damaged Mitochondria</strong><br> <small>Old power plant that needs recycling</small> </div> <<if !$lysosomeProgress.waste1>> <div class="enzyme-options"> [[Acid Hydrolases|Lysosome_Waste1_Hydrolases]]<br> [[Proteases|Lysosome_Waste1_Proteases]]<br> [[Lipases|Lysosome_Waste1_Lipases]] </div> <<else>> <div class="digested-text">✓ Digested!</div> <</if>> </div> <div class="waste <<if $lysosomeProgress.waste2>>digested<</if>>"> <div class="waste-icon">🧵</div> <div class="waste-info"> <strong>Misfolded Proteins</strong><br> <small>Proteins that didn't fold correctly</small> </div> <<if !$lysosomeProgress.waste2>> <div class="enzyme-options"> [[Acid Hydrolases|Lysosome_Waste2_Hydrolases]]<br> [[Proteases|Lysosome_Waste2_Proteases]]<br> [[Lipases|Lysosome_Waste2_Lipases]] </div> <<else>> <div class="digested-text">✓ Digested!</div> <</if>> </div> <div class="waste <<if $lysosomeProgress.waste3>>digested<</if>>"> <div class="waste-icon">🛡️</div> <div class="waste-info"> <strong>Old Membrane Lipids</strong><br> <small>Worn-out cell membrane pieces</small> </div> <<if !$lysosomeProgress.waste3>> <div class="enzyme-options"> [[Acid Hydrolases|Lysosome_Waste3_Hydrolases]]<br> [[Proteases|Lysosome_Waste3_Proteases]]<br> [[Lipases|Lysosome_Waste3_Lipases]] </div> <<else>> <div class="digested-text">✓ Digested!</div> <</if>> </div> </div> <div class="enzyme-info"> <h5>Enzyme Guide:</h5> <div class="enzyme-desc"> <strong>Acid Hydrolases:</strong> General-purpose, break down organelles<br> <strong>Proteases:</strong> Specifically break down proteins<br> <strong>Lipases:</strong> Specifically break down lipids </div> </div> <<set $digestedCount = 0>> <<if $lysosomeProgress.waste1>><<set $digestedCount = $digestedCount + 1>><</if>> <<if $lysosomeProgress.waste2>><<set $digestedCount = $digestedCount + 1>><</if>> <<if $lysosomeProgress.waste3>><<set $digestedCount = $digestedCount + 1>><</if>> <<if $digestedCount == 3>> <div class="apoptosis-warning"> <span class="titleshake"> <h5>APOPTOSIS SIGNAL RECEIVED</h5> <p>"All waste has been processed. The cell has completed its life cycle."</p> <p>Find the word for programmed cell death.</p> <div class="final-choices"> <span class="shake"> [[Apoptosis|CellDeath]]<br></span> [[Necrosis|Lysosome_Final_Wrong]]<br> [[Mitosis|Lysosome_Final_Wrong]] </div> </span> </div> <<else>> <div class="progress"> Waste items digested: <<print $digestedCount>>/3 </div> <</if>> </div> <style> .lysosome-game { margin: 20px 0; } .waste-items { display: flex; flex-direction: column; gap: 15px; margin: 20px 0; } .waste { border: 1px solid #ff4444; padding: 15px; border-radius: 8px; background: rgba(255, 68, 68, 0.1); display: flex; align-items: center; gap: 15px; } .waste.digested { opacity: 0.6; background: rgba(255, 68, 68, 0.05); } .waste-icon { font-size: 2em; flex-shrink: 0; } .waste-info { flex-grow: 1; } .enzyme-options { flex-shrink: 0; display: flex; gap: 10px; } .enzyme-options a { padding: 8px 12px; background: rgba(255, 68, 68, 0.2); border: 1px solid #ff4444; border-radius: 4px; text-decoration: none; font-size: 0.9em; } .enzyme-options a:hover { background: rgba(255, 68, 68, 0.3); } .digested-text { color: #5dff4b; font-weight: bold; flex-shrink: 0; } .enzyme-info { margin: 20px 0; padding: 15px; border-left: 3px solid #ff4444; background: rgba(255, 68, 68, 0.05); } .enzyme-desc { line-height: 1.6; } .apoptosis-warning { margin: 20px 0; padding: 20px; border: 2px solid #ff4444; border-radius: 8px; background: rgba(255, 68, 68, 0.1); text-align: center; } .final-choices { margin-top: 15px; } .final-choices a { display: inline-block; margin: 5px; padding: 10px 15px; background: rgba(255, 68, 68, 0.2); border: 1px solid #ff4444; border-radius: 4px; text-decoration: none; } .final-choices a:hover { background: rgba(255, 68, 68, 0.3); } </style>

:: Lysosome_Waste1_Hydrolases <<set $lysosomeProgress.waste1 = true>> <<goto "Lysosome_Game">>

:: Lysosome_Waste1_Proteases <<set $message = "Proteases target proteins, not whole organelles!">> <<goto "Lysosome_Game">>

:: Lysosome_Waste1_Lipases <<set $message = "Lipases target lipids, not mitochondria!">> <<goto "Lysosome_Game">>

:: Lysosome_Waste2_Hydrolases <<set $message = "Use the specific enzyme for proteins!">> <<goto "Lysosome_Game">>

:: Lysosome_Waste2_Proteases <<set $lysosomeProgress.waste2 = true>> <<goto "Lysosome_Game">>

:: Lysosome_Waste2_Lipases <<set $message = "Lipases target lipids, not proteins!">> <<goto "Lysosome_Game">>

:: Lysosome_Waste3_Hydrolases <<set $message = "Use the specific enzyme for lipids!">> <<goto "Lysosome_Game">>

:: Lysosome_Waste3_Proteases <<set $message = "Proteases target proteins, not lipids!">> <<goto "Lysosome_Game">>

:: Lysosome_Waste3_Lipases <<set $lysosomeProgress.waste3 = true>> <<goto "Lysosome_Game">>

:: CellDeath <h4>CELLULAR APOPTOSIS</h4> <div class="apoptosis-sequence"> <p>As the lysosomal enzymes release, the cell begins its dissolution...</p> <div class="death-steps"> <p class="shake">Chromatin condenses and DNA fragments</p> <p class="shake">Cell membrane forms blebs</p> <p class="shake">Mitochondria release their contents</p> <p class="shake">The nucleus envelope dissolves</p> <p class="shake">The cell shrinks and breaks into apoptotic bodies</p> </div> <div class="final-message"> <p>"But this isn't the end," a voice whispers. "From our components, new cells will form. Life continues through apoptosis, as it makes room for new growth."</p> <div class="fun-fact"> About 50-70 billion cells die each day in the human body through apoptosis. </div> <p style="margin-top: 30px; font-size: 0.9em; color: #a3ff99;"> The simulation terminates. <<print $playerName>>, thanks for playing. :) </p> </div> <div class="restart-option"> [[Restart Journey|Title]] </div> </div> <style> .apoptosis-sequence { text-align: center; margin: 20px 0; } .death-steps { margin: 30px 0; } .death-steps p { margin: 15px 0; padding: 12px; border-left: 3px solid #ff4444; background: rgba(255, 68, 68, 0.1); text-align: left; animation: fadeIn 1s ease-in; } .final-message { margin: 30px 0; padding: 20px; border: 1px solid #5dff4b; border-radius: 8px; background: rgba(93, 255, 75, 0.05); } .fun-fact { margin: 20px 0; padding: 15px; border-left: 3px solid #ff0; background: rgba(255, 255, 0, 0.05); text-align: left; } .restart-option { margin-top: 30px; } .restart-option a { display: inline-block; padding: 12px 25px; background: rgba(93, 255, 75, 0.2); border: 1px solid #5dff4b; border-radius: 4px; text-decoration: none; font-weight: bold; } .restart-option a:hover { background: rgba(93, 255, 75, 0.3); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style>

:: Lysosome_Final_Wrong <<set $message = "Incorrect. Apoptosis is programmed cell death.">> <<goto "Lysosome_Game">>

<span id="no-sidebar-passage" class="hidden"></span> Alrighty, <<print $playerName>>. <<linkreplace "Hmm..">>Let's see, you'll be [[kore.]] ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⣶⣶⣶⣄⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⢠⣤⣄⣾⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠈⣻⣿⣿⣿⣿⣿⣿⣿⣶⣶⡄⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⣠⠟⠁⠀⠀⠉⠉⠛⠛⠛⢻⡏⠁⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⢰⠏⠀⠀⢰⣷⠀⠀⣤⡄⠀⠀⢹⡄⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⡿⠀⠀⠀⠀⣴⠶⣦⡉⠁⠀⠀⠀⣷⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⢸⡇⠀⠀⢀⡀⢷⣤⣼⠇⢠⡀⠀⠀⣿⠀⠀⠀⠀ ⠀⠀⠀⠀⣰⠞⠃⠀⠀⣨⡿⢶⣤⣤⡶⠏⠀⠀⢀⡟⠀⠀⠀⠀ ⠀⠀⢀⡾⠁⠀⠀⠀⣰⠏⠀⠀⣿⠀⠀⠀⠀⠀⠈⠻⡄⠀⠀⠀ ⠀⠀⡾⠁⠀⠀⠀⣰⠟⠀⠀⢀⡟⠀⠀⠀⠀⣀⠀⠀⢻⠀⠀⠀ ⠀⢸⡇⠀⠀⠲⠛⠁⠀⠀⢀⡾⠁⠀⠀⠀⠀⢸⡆⠀⢸⡇⠀⠀ ⠀⠘⣇⠀⠀⠀⠀⠀⠀⣠⡞⠁⠀⠀⠀⠀⠀⢸⡇⠀⢸⡇⠀⠀ ⠀⠀⠙⠷⣤⣤⣤⣤⠾⠋⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⢸⡇⠀⠀ <</linkreplace>>

<span class="titleshake">CELL INTERIOR</span> You wake up floating in a dark, strange, and fluid space. Somehow, a glowing note drifts toward you: <<timed 300ms>> > ??? <</timed>> <<timed 0.3s>> > Visit all 8 organelle stations. <</timed>> <<timed 0.5s>> > Help with their final functions. <</timed>> <<timed 0.8s>> > Report complete when finished. <</timed>> <<timed 1s>> What's your name? <<textbox "$playerName" $playerName>> <<button "This is me">> <<set $playerName to $playerName.trim()>> <</button>> Below, a simple map shows your route: Nucleus → Ribosome → Rough ER → Smooth ER → Golgi → Mitochondria → Cytoskeleton → Lysosome <span class="titleshake">[[Acknowledge Mission|Nucleus_Intro]]</span> <</timed>>