\u70b9\u51fb\u7f51\u5740\u5373\u53ef\u89c2\u770b\u5e76\u4e0b\u8f7d<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u7a7a\u6c14\u4e2d\u6c27\u6c14\u542b\u91cf\u6d4b\u5b9a\u5b9e\u9a8c\u8bef\u5dee\u5206\u6790<\/title>\n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n \n body {\n font-family: 'Microsoft YaHei', sans-serif;\n background: linear-gradient(135deg, #1a2980, #26d0ce);\n color: #333;\n min-height: 100vh;\n padding: 20px;\n line-height: 1.6;\n }\n \n .container {\n max-width: 1400px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 300px 1fr;\n grid-template-rows: auto 1fr auto;\n grid-gap: 20px;\n grid-template-areas:\n \"header header\"\n \"controls particles\"\n \"knowledge knowledge\";\n min-height: 95vh;\n }\n \n .header {\n grid-area: header;\n text-align: center;\n background-color: rgba(255, 255, 255, 0.95);\n padding: 20px;\n border-radius: 15px;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);\n }\n \n h1 {\n color: #2c3e50;\n margin-bottom: 10px;\n font-size: 2.5rem;\n background: linear-gradient(to right, #3498db, #e74c3c);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n \n .controls {\n grid-area: controls;\n background-color: rgba(255, 255, 255, 0.95);\n padding: 25px;\n border-radius: 15px;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-direction: column;\n }\n \n .particles {\n grid-area: particles;\n background-color: rgba(255, 255, 255, 0.95);\n padding: 20px;\n border-radius: 15px;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-direction: column;\n }\n \n .knowledge {\n grid-area: knowledge;\n background-color: rgba(255, 255, 255, 0.95);\n padding: 25px;\n border-radius: 15px;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n margin-top: 20px;\n }\n \n h2 {\n font-size: 1.6rem;\n color: #2c3e50;\n margin-bottom: 20px;\n border-bottom: 3px solid #3498db;\n padding-bottom: 8px;\n }\n \n .btn-group {\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n \n .btn {\n background: linear-gradient(145deg, #3498db, #2980b9);\n color: white;\n border: none;\n padding: 14px 18px;\n border-radius: 10px;\n font-size: 1.1rem;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n text-align: center;\n font-weight: bold;\n letter-spacing: 0.5px;\n box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);\n }\n \n .btn:hover {\n background: linear-gradient(145deg, #2980b9, #3498db);\n transform: translateY(-3px);\n box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);\n }\n \n .btn:active {\n transform: translateY(1px);\n }\n \n .btn.active {\n background: linear-gradient(145deg, #e74c3c, #c0392b);\n box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);\n }\n \n .normal-btn {\n background: linear-gradient(145deg, #27ae60, #219653);\n }\n \n .normal-btn:hover {\n background: linear-gradient(145deg, #219653, #27ae60);\n }\n \n .particles-container {\n width: 100%;\n height: 550px;\n position: relative;\n border: 2px solid #3498db;\n border-radius: 10px;\n overflow: hidden;\n background: linear-gradient(to bottom, #f1f2f6, #dfe4ea);\n box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);\n }\n \n .particle {\n position: absolute;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n font-weight: bold;\n color: white;\n transition: all 10s ease;\n animation: float 10s infinite ease-in-out;\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);\n text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\n z-index: 5;\n }\n \n .O2 {\n background: radial-gradient(circle at 30% 30%, #ffff00, #ff9900);\n width: 42px;\n height: 42px;\n }\n \n .N2 {\n background: linear-gradient(145deg, #3498db, #2980b9);\n width: 38px;\n height: 38px;\n }\n \n .P {\n background: radial-gradient(circle at 30% 30%, #ff0000, #b30000);\n width: 36px;\n height: 36px;\n }\n \n .P2O5 {\n background: linear-gradient(145deg, #ffffff, #e0e0e0);\n color: #333;\n border: 2px solid #ccc;\n animation: none !important;\n z-index: 2;\n width: 42px;\n height: 42px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);\n }\n \n .heating .particle {\n animation: float 5s infinite ease-in-out, heat 10s infinite;\n transform: scale(1.3);\n }\n \n @keyframes float {\n 0%, 100% { transform: translate(0, 0); }\n 25% { transform: translate(8px, 10px); }\n 50% { transform: translate(-8px, 6px); }\n 75% { transform: translate(9px, -6px); }\n }\n \n @keyframes heat {\n 0%, 100% { box-shadow: 0 0 15px rgba(255, 100, 0, 0.9); }\n 50% { box-shadow: 0 0 25px rgba(255, 50, 0, 1); }\n }\n \n .knowledge-content {\n line-height: 1.8;\n font-size: 1.15rem;\n }\n \n .knowledge-point {\n margin: 12px 0;\n padding: 15px;\n background-color: rgba(236, 240, 241, 0.7);\n border-radius: 8px;\n transition: all 0.4s ease;\n border-left: 3px solid transparent;\n }\n \n .knowledge-point.active {\n background-color: rgba(52, 152, 219, 0.2);\n border-left: 4px solid #2980b9;\n padding-left: 18px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);\n }\n \n .value-display {\n position: absolute;\n top: 25px;\n right: 25px;\n background: rgba(255, 255, 255, 0.95);\n padding: 15px;\n border-radius: 10px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);\n font-weight: bold;\n text-align: center;\n z-index: 10;\n opacity: 0;\n transition: opacity 1s ease;\n border: 2px solid #3498db;\n width: 160px;\n }\n \n .value-display.visible {\n opacity: 1;\n }\n \n .value-display h3 {\n color: #2c3e50;\n font-size: 1.1rem;\n margin-bottom: 8px;\n }\n \n .oxygen-value {\n font-size: 1.8rem;\n color: #e74c3c;\n font-weight: bold;\n }\n \n .explanation-panel {\n position: absolute;\n top: 60px;\n left: 50%;\n transform: translateX(-50%);\n background: rgba(255, 255, 255, 0.95);\n padding: 12px 20px;\n border-radius: 8px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n z-index: 10;\n max-height: 80px;\n font-size: 1.1rem;\n line-height: 1.5;\n max-width: 80%;\n text-align: center;\n opacity: 0;\n transition: opacity 0.5s ease;\n border: 2px solid #e74c3c;\n }\n \n .explanation-panel.visible {\n opacity: 1;\n }\n \n .status-bar {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n background: linear-gradient(to right, #3498db, #2980b9);\n padding: 12px;\n text-align: center;\n font-weight: bold;\n color: white;\n font-size: 1.2rem;\n z-index: 15;\n box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);\n letter-spacing: 0.5px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n \n .water-level {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 0;\n background: linear-gradient(to top, rgba(52, 152, 219, 0.8), rgba(41, 128, 185, 0.9));\n transition: height 10s ease;\n z-index: 1;\n }\n \n .division-line {\n position: absolute;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: rgba(0, 0, 0, 0.4);\n z-index: 2;\n }\n \n .division-label {\n position: absolute;\n right: 10px;\n font-size: 14px;\n color: rgba(0, 0, 0, 0.7);\n z-index: 3;\n font-weight: bold;\n background: rgba(255, 255, 255, 0.7);\n padding: 2px 5px;\n border-radius: 3px;\n }\n \n .error-indicator {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: rgba(231, 76, 60, 0.9);\n color: white;\n padding: 12px 25px;\n border-radius: 8px;\n font-weight: bold;\n font-size: 1.4rem;\n z-index: 20;\n opacity: 0;\n transition: opacity 0.5s ease;\n }\n \n .error-indicator.visible {\n opacity: 1;\n }\n \n .pause-btn {\n cursor: pointer;\n padding: 5px 10px;\n background: rgba(255, 255, 255, 0.3);\n border-radius: 5px;\n font-size: 1.3rem;\n }\n \n .experiment-tips {\n margin-top: 20px;\n padding: 15px;\n background-color: rgba(255, 255, 240, 0.9);\n border-radius: 8px;\n border-left: 4px solid #f1c40f;\n font-size: 1.05rem;\n line-height: 1.7;\n }\n \n @media (max-width: 900px) {\n .container {\n grid-template-columns: 1fr;\n grid-template-areas:\n \"header\"\n \"controls\"\n \"particles\"\n \"knowledge\";\n }\n \n .particles-container {\n height: 450px;\n }\n \n h1 {\n font-size: 1.8rem;\n }\n \n .value-display {\n top: 15px;\n right: 15px;\n padding: 10px;\n width: 140px;\n }\n \n .explanation-panel {\n top: 50px;\n font-size: 1rem;\n padding: 10px 15px;\n max-height: 70px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>\u7a7a\u6c14\u4e2d\u6c27\u6c14\u542b\u91cf\u6d4b\u5b9a\u5b9e\u9a8c\u8bef\u5dee\u5206\u6790<\/h1>\n <p>\u6c14\u4f53\u7c92\u5b50\u5fae\u89c2\u6a21\u578b\u4e0e\u8bef\u5dee\u539f\u7406\u53ef\u89c6\u5316<\/p>\n <\/div>\n \n <div class=\"controls\">\n <h2>\u8bef\u5dee\u6a21\u62df\u9009\u62e9<\/h2>\n <div class=\"btn-group\">\n <button class=\"btn normal-btn\" id=\"normalBtn\">\u6b63\u5e38\u64cd\u4f5c\u5b9e\u9a8c<\/button>\n <button class=\"btn\" id=\"error1Btn\">\u6b62\u6c34\u5939\u672a\u5939\u7d27<\/button>\n <button class=\"btn\" id=\"error2Btn\">\u672a\u53ca\u65f6\u585e\u7d27\u74f6\u585e<\/button>\n <button class=\"btn\" id=\"error3Btn\">\u7ea2\u78f7\u91cf\u4e0d\u8db3<\/button>\n <button class=\"btn\" id=\"error4Btn\">\u672a\u51b7\u5374\u81f3\u5ba4\u6e29<\/button>\n <button class=\"btn\" id=\"error5Btn\">\u88c5\u7f6e\u6f0f\u6c14<\/button>\n <\/div>\n \n <div style=\"margin-top: 35px;\">\n <h2>\u5b9e\u9a8c\u539f\u7406<\/h2>\n <p style=\"margin-top: 15px; line-height: 1.8; font-size: 1.15rem;\">\n <strong>\u7ea2\u78f7\u71c3\u70e7\u53cd\u5e94\uff1a<\/strong> 4P + 5O\u2082 \u2192 2P\u2082O\u2085\u2085<br>\n \u6c27\u6c14\u6d88\u8017\u540e\uff0c\u6c14\u4f53\u4f53\u79ef\u51cf\u5c11\uff0c\u51b7\u5374\u540e\u6c34\u8fdb\u5165\u96c6\u6c14\u74f6\u5360\u636e\u88ab\u6d88\u8017\u6c27\u6c14\u7684\u7a7a\u95f4\u3002<br>\n <strong>\u7406\u60f3\u7ed3\u679c\uff1a<\/strong> \u6c34\u4f4d\u4e0a\u5347\u81f3\u7a7a\u6c14\u603b\u4f53\u79ef\u76841\/5\u5904\uff08\u7ea621%\uff09\u3002\n <\/p>\n <\/div>\n \n <div style=\"margin-top: 25px;\">\n <h2>\u5b9e\u9a8c\u8bf4\u660e<\/h2>\n <p style=\"margin-top: 15px; line-height: 1.7;\">\n 1. \u70b9\u51fb\u4e0a\u65b9\u6309\u94ae\u9009\u62e9\u5b9e\u9a8c\u7c7b\u578b<br>\n 2. \u89c2\u5bdf\u6c14\u4f53\u7c92\u5b50\u5fae\u89c2\u884c\u4e3a\u53d8\u5316<br>\n 3. \u67e5\u770b\u6c34\u4f4d\u53d8\u5316\u548c\u6c27\u6c14\u542b\u91cf\u7ed3\u679c<br>\n 4. \u9605\u8bfb\u4e0b\u65b9\u8bef\u5dee\u5206\u6790\u539f\u7406<br>\n 5. \u4f7f\u7528\u6682\u505c\u6309\u94ae\u63a7\u5236\u52a8\u753b\n <\/p>\n <\/div>\n \n <div class=\"experiment-tips\">\n <strong>\u6559\u5b66\u63d0\u793a\uff1a<\/strong><br>\n \u2022 \u7ea2\u78f7\u71c3\u70e7\u540e\u751f\u6210\u767d\u8272\u56fa\u4f53\u4e94\u6c27\u5316\u4e8c\u78f7(P\u2082O\u2085)<br>\n \u2022 \u7c92\u5b50\u989c\u8272\uff1a\u9ec4\u8272-\u6c27\u6c14(O\u2082), \u84dd\u8272-\u6c2e\u6c14(N\u2082), \u7ea2\u8272-\u7ea2\u78f7(P)<br>\n \u2022 \u56fa\u4f53\u4e94\u6c27\u5316\u4e8c\u78f7\u4f1a\u6c89\u5230\u5bb9\u5668\u5e95\u90e8<br>\n \u2022 \u4e0d\u540c\u8bef\u5dee\u7c7b\u578b\u5bfc\u81f4\u6c34\u4f4d\u53d8\u5316\u4e0d\u540c\n <\/div>\n <\/div>\n \n <div class=\"particles\">\n <h2>\u6c14\u4f53\u7c92\u5b50\u5fae\u89c2\u6a21\u578b<\/h2>\n <div class=\"particles-container\" id=\"particlesContainer\">\n <div class=\"status-bar\" id=\"statusBar\">\n <span>\u51c6\u5907\u5f00\u59cb\u5b9e\u9a8c<\/span>\n <div class=\"pause-btn\" id=\"pauseBtn\">\u23f8\u23f8\u23f8<\/div>\n <\/div>\n \n <div class=\"error-indicator\" id=\"errorIndicator\">\u51fa\u73b0\u8bef\u5dee\uff01<\/div>\n \n <div class=\"value-display\" id=\"valueDisplay\">\n <h3>\u6c27\u6c14\u542b\u91cf\u6d4b\u5b9a\u7ed3\u679c<\/h3>\n <div class=\"oxygen-value\" id=\"oxygenValue\">21.0%<\/div>\n <\/div>\n \n <div class=\"water-level\" id=\"waterLevel\"><\/div>\n \n <div class=\"explanation-panel\" id=\"explanationPanel\">\n \u6b63\u5e38\u64cd\u4f5c\uff1a\u7ea2\u78f7\u71c3\u70e7\u6d88\u8017\u6c27\u6c14\uff0c\u51b7\u5374\u540e\u6c34\u8fdb\u5165\u96c6\u6c14\u74f6\u7ea6\u5360\u7a7a\u6c14\u4f53\u79ef\u76841\/5\uff08\u7ea621%\uff09\u3002\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"knowledge\">\n <h2>\u8bef\u5dee\u539f\u7406\u8be6\u7ec6\u5206\u6790<\/h2>\n <div class=\"knowledge-content\">\n <div class=\"knowledge-point active\" id=\"knowledgePoint1\">\n <strong>\u6b63\u5e38\u64cd\u4f5c\uff1a<\/strong> \u7ea2\u78f7\u71c3\u70e7\u6d88\u8017\u6c27\u6c14\uff0c\u53cd\u5e94\u5f0f\u4e3a\uff1a4P + 5O\u2082 \u2192 2P\u2082O\u2085\u2085\u3002\u5f85\u51b7\u5374\u81f3\u5ba4\u6e29\u540e\uff0c\u6c34\u8fdb\u5165\u96c6\u6c14\u74f6\u5360\u636e\u88ab\u6d88\u8017\u6c27\u6c14\u7684\u7a7a\u95f4\u3002\u7406\u60f3\u60c5\u51b5\u4e0b\u6c34\u4f4d\u4e0a\u5347\u81f3\u7a7a\u6c14\u603b\u4f53\u79ef\u76841\/5\u5904\uff08\u7ea621%\uff09\uff0c\u8bc1\u660e\u6c27\u6c14\u7ea6\u5360\u7a7a\u6c14\u4f53\u79ef\u768421%\u3002\n <\/div>\n <div class=\"knowledge-point\" id=\"knowledgePoint2\">\n <strong>\u6b62\u6c34\u5939\u672a\u5939\u7d27\uff1a<\/strong> \u5b9e\u9a8c\u8fc7\u7a0b\u4e2d\u6c14\u4f53\u4ece\u5bfc\u7ba1\u9038\u51fa\uff0c\u4f7f\u74f6\u5185\u6c14\u4f53\u603b\u91cf\u51cf\u5c11\u3002\u51b7\u5374\u540e\u6253\u5f00\u6b62\u6c34\u5939\uff0c\u6c34\u8fdb\u5165\u91cf\u5927\u4e8e\u6b63\u5e38\u503c\uff08\u7ed3\u679c\u504f\u5927\uff09\u3002<strong>\u5fae\u89c2\u89e3\u91ca\uff1a<\/strong> \u6c14\u4f53\u7c92\u5b50\uff08\u4e3b\u8981\u662fN\u2082\uff09\u4ece\u5bfc\u7ba1\u9038\u51fa\uff0c\u5bfc\u81f4\u74f6\u5185\u7c92\u5b50\u603b\u6570\u51cf\u5c11\uff0c\u6c34\u8fdb\u5165\u6bd4\u4f8b\u589e\u52a0\u3002\n <\/div>\n <div class=\"knowledge-point\" id=\"knowledgePoint3\">\n <strong>\u672a\u53ca\u65f6\u585e\u7d27\u74f6\u585e\uff1a<\/strong> \u7ea2\u78f7\u653e\u5165\u65f6\u74f6\u585e\u672a\u53ca\u65f6\u585e\u7d27\uff0c\u90e8\u5206\u6c14\u4f53\uff08\u542b\u6c27\u6c14\u548c\u6c2e\u6c14\uff09\u4ece\u74f6\u53e3\u9038\u51fa\u3002\u51b7\u5374\u540e\u74f6\u5185\u6c14\u4f53\u603b\u91cf\u5c11\u4e8e\u6b63\u5e38\u60c5\u51b5\uff0c\u6c34\u8fdb\u5165\u91cf\u5927\u4e8e\u6b63\u5e38\u503c\uff08\u7ed3\u679c\u504f\u5927\uff09\u3002<strong>\u5fae\u89c2\u89e3\u91ca\uff1a<\/strong> \u7c92\u5b50\u4ece\u74f6\u53e3\u9038\u51fa\uff0c\u5305\u62ecO\u2082\u548cN\u2082\uff0c\u5bfc\u81f4\u7c92\u5b50\u603b\u6570\u51cf\u5c11\u3002\n <\/div>\n <div class=\"knowledge-point\" id=\"knowledgePoint4\">\n <strong>\u7ea2\u78f7\u91cf\u4e0d\u8db3\uff1a<\/strong> \u7ea2\u78f7\u91cf\u4e0d\u8db3\u65e0\u6cd5\u5b8c\u5168\u6d88\u8017\u6c27\u6c14\uff0c\u74f6\u4e2d\u4ecd\u6709\u90e8\u5206\u6c27\u6c14\u6b8b\u7559\u3002\u51b7\u5374\u540e\u6253\u5f00\u6b62\u6c34\u5939\uff0c\u6c34\u8fdb\u5165\u91cf\u5c0f\u4e8e\u6b63\u5e38\u503c\uff08\u7ed3\u679c\u504f\u5c0f\uff09\u3002<strong>\u5fae\u89c2\u89e3\u91ca\uff1a<\/strong> \u90e8\u5206O\u2082\u7c92\u5b50\u672a\u88ab\u6d88\u8017\uff0c\u74f6\u5185\u6c14\u4f53\u603b\u91cf\u51cf\u5c11\u7a0b\u5ea6\u4e0d\u8db3\uff0c\u6c34\u4e0a\u5347\u9ad8\u5ea6\u4e0d\u8db3\u3002\n <\/div>\n <div class=\"knowledge-point\" id=\"knowledgePoint5\">\n <strong>\u672a\u51b7\u5374\u81f3\u5ba4\u6e29\uff1a<\/strong> \u672a\u51b7\u5374\u5373\u6253\u5f00\u6b62\u6c34\u5939\uff0c\u74f6\u5185\u6c14\u4f53\u6e29\u5ea6\u9ad8\uff0c\u4f53\u79ef\u81a8\u80c0\uff08\u538b\u5f3a\u8f83\u5927\uff09\uff0c\u8fdb\u5165\u7684\u6c34\u91cf\u5c0f\u4e8e\u51b7\u5374\u540e\u5e94\u6709\u7684\u91cf\uff08\u7ed3\u679c\u504f\u5c0f\uff09\u3002<strong>\u5fae\u89c2\u89e3\u91ca\uff1a<\/strong> \u9ad8\u6e29\u4f7f\u7c92\u5b50\u8fd0\u52a8\u52a0\u5267\uff0c\u5360\u636e\u66f4\u5927\u7a7a\u95f4\uff0c\u6c34\u65e0\u6cd5\u5145\u5206\u8fdb\u5165\u3002\n <\/div>\n <div class=\"knowledge-point\" id=\"knowledgePoint6\">\n <strong>\u88c5\u7f6e\u6f0f\u6c14\uff1a<\/strong> \u88c5\u7f6e\u5b58\u5728\u6f0f\u6c14\u70b9\uff0c\u51b7\u5374\u8fc7\u7a0b\u4e2d\u5916\u754c\u7a7a\u6c14\u8fdb\u5165\u74f6\u5185\u8865\u5145\u6c27\u6c14\u3002\u6253\u5f00\u6b62\u6c34\u5939\u540e\uff0c\u6c34\u8fdb\u5165\u91cf\u5c11\u4e8e\u6b63\u5e38\u503c\uff08\u7ed3\u679c\u504f\u5c0f\uff09\u3002<strong>\u5fae\u89c2\u89e3\u91ca\uff1a<\/strong> \u5916\u754c\u7a7a\u6c14\uff08\u542bO\u2082\u548cN\u2082\uff09\u8fdb\u5165\u74f6\u5185\uff0c\u8865\u5145\u4e86\u88ab\u6d88\u8017\u7684O\u2082\uff0c\u5bfc\u81f4\u6c14\u4f53\u603b\u91cf\u51cf\u5c11\u4e0d\u8db3\u3002\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u7c92\u5b50\u5b9a\u4e49\n const particles = {\n O2: { count: 21, label: \"O\u2082\", className: \"O2\" },\n N2: { count: 79, label: \"N\u2082\", className: \"N2\" },\n P: { count: 20, label: \"P\", className: \"P\" }\n };\n \n \/\/ \u8bef\u5dee\u89e3\u91ca\u6587\u672c\n const explanations = {\n normal: \"\u6b63\u5e38\u64cd\u4f5c\uff1a\u7ea2\u78f7\u71c3\u70e7\u6d88\u8017\u6c27\u6c14\uff0c\u51b7\u5374\u540e\u6c34\u8fdb\u5165\u96c6\u6c14\u74f6\u7ea6\u5360\u7a7a\u6c14\u4f53\u79ef\u76841\/5\uff08\u7ea621%\uff09\u3002\",\n error1: \"\u6b62\u6c34\u5939\u672a\u5939\u7d27\uff1a\u6c14\u4f53\u4ece\u5bfc\u7ba1\u9038\u51fa\uff08\u4e3b\u8981\u662fN\u2082\uff09\uff0c\u74f6\u5185\u7c92\u5b50\u603b\u6570\u51cf\u5c11\uff0c\u6c34\u8fdb\u5165\u6bd4\u4f8b\u589e\u52a0\uff08\u7ed3\u679c\u504f\u5927\uff09\u3002\",\n error2: \"\u672a\u53ca\u65f6\u585e\u7d27\u74f6\u585e\uff1a\u6c14\u4f53\u4ece\u74f6\u53e3\u9038\u51fa\uff08\u542bO\u2082\u548cN\u2082\uff09\uff0c\u74f6\u5185\u7c92\u5b50\u603b\u6570\u51cf\u5c11\uff0c\u6c34\u8fdb\u5165\u6bd4\u4f8b\u589e\u52a0\uff08\u7ed3\u679c\u504f\u5927\uff09\u3002\",\n error3: \"\u7ea2\u78f7\u91cf\u4e0d\u8db3\uff1a\u90e8\u5206O\u2082\u7c92\u5b50\u672a\u88ab\u6d88\u8017\uff0c\u74f6\u5185\u6c14\u4f53\u603b\u91cf\u51cf\u5c11\u7a0b\u5ea6\u4e0d\u8db3\uff0c\u6c34\u4e0a\u5347\u9ad8\u5ea6\u4e0d\u8db3\uff08\u7ed3\u679c\u504f\u5c0f\uff09\u3002\",\n error4: \"\u672a\u51b7\u5374\u81f3\u5ba4\u6e29\uff1a\u9ad8\u6e29\u4f7f\u7c92\u5b50\u8fd0\u52a8\u52a0\u5267\uff0c\u5360\u636e\u66f4\u5927\u7a7a\u95f4\uff0c\u6c34\u65e0\u6cd5\u5145\u5206\u8fdb\u5165\uff08\u7ed3\u679c\u504f\u5c0f\uff09\u3002\",\n error5: \"\u88c5\u7f6e\u6f0f\u6c14\uff1a\u5916\u754c\u7a7a\u6c14\uff08\u542bO\u2082\u548cN\u2082\uff09\u8fdb\u5165\u74f6\u5185\uff0c\u8865\u5145\u4e86\u88ab\u6d88\u8017\u7684O\u2082\uff0c\u5bfc\u81f4\u6c14\u4f53\u603b\u91cf\u51cf\u5c11\u4e0d\u8db3\uff08\u7ed3\u679c\u504f\u5c0f\uff09\u3002\"\n };\n \n \/\/ \u5b9e\u9a8c\u72b6\u6001\n let currentError = null;\n let isHeating = false;\n let animationTimer = null;\n let isPaused = false;\n let activeTimers = [];\n \n \/\/ \u521d\u59cb\u5316\u7c92\u5b50\u7cfb\u7edf\n function initParticles() {\n const container = document.getElementById('particlesContainer');\n container.innerHTML = '';\n \n \/\/ \u6dfb\u52a0\u72b6\u6001\u6761\n const statusBar = document.createElement('div');\n statusBar.id = 'statusBar';\n statusBar.className = 'status-bar';\n statusBar.innerHTML = '<span>\u51c6\u5907\u5f00\u59cb\u5b9e\u9a8c<\/span><div class=\"pause-btn\" id=\"pauseBtn\">\u23f8\u23f8\u23f8<\/div>';\n container.appendChild(statusBar);\n \n \/\/ \u6dfb\u52a0\u6682\u505c\u6309\u94ae\u4e8b\u4ef6\n document.getElementById('pauseBtn').addEventListener('click', togglePause);\n \n \/\/ \u6dfb\u52a0\u4e94\u7b49\u5206\u6807\u8bb0\u7ebf\n for (let i = 1; i <= 4; i++) {\n const line = document.createElement('div');\n line.className = 'division-line';\n line.style.top = `${i * 20}%`;\n container.appendChild(line);\n \n const label = document.createElement('div');\n label.className = 'division-label';\n label.style.top = `${i * 20}%`;\n label.textContent = `${i * 20}%`;\n container.appendChild(label);\n }\n \n \/\/ \u6dfb\u52a0\u6c34\u4f4d\n const waterLevel = document.createElement('div');\n waterLevel.id = 'waterLevel';\n waterLevel.className = 'water-level';\n container.appendChild(waterLevel);\n \n \/\/ \u6dfb\u52a0\u7c92\u5b50\n Object.entries(particles).forEach(([key, config]) => {\n for (let i = 0; i < config.count; i++) {\n createParticle(container, config.className, config.label);\n }\n });\n \n \/\/ \u6dfb\u52a0\u8bef\u5dee\u6307\u793a\u5668\n const errorIndicator = document.createElement('div');\n errorIndicator.id = 'errorIndicator';\n errorIndicator.className = 'error-indicator';\n errorIndicator.textContent = '\u51fa\u73b0\u8bef\u5dee\uff01';\n container.appendChild(errorIndicator);\n \n \/\/ \u6dfb\u52a0\u89e3\u91ca\u9762\u677f\n const explanationPanel = document.createElement('div');\n explanationPanel.id = 'explanationPanel';\n explanationPanel.className = 'explanation-panel';\n explanationPanel.textContent = explanations.normal;\n container.appendChild(explanationPanel);\n \n \/\/ \u6dfb\u52a0\u503c\u663e\u793a\n const valueDisplay = document.createElement('div');\n valueDisplay.id = 'valueDisplay';\n valueDisplay.className = 'value-display';\n valueDisplay.innerHTML = `\n <h3>\u6c27\u6c14\u542b\u91cf\u6d4b\u5b9a\u7ed3\u679c<\/h3>\n <div class=\"oxygen-value\" id=\"oxygenValue\">21.0%<\/div>\n `;\n container.appendChild(valueDisplay);\n }\n \n \/\/ \u6682\u505c\/\u7ee7\u7eed\u52a8\u753b\n function togglePause() {\n isPaused = !isPaused;\n const pauseBtn = document.getElementById('pauseBtn');\n \n if (isPaused) {\n pauseBtn.textContent = '\u25b6';\n pauseAllAnimations();\n updateStatus('\u5b9e\u9a8c\u6682\u505c');\n } else {\n pauseBtn.textContent = '\u23f8\u23f8\u23f8';\n resumeAllAnimations();\n updateStatus('\u5b9e\u9a8c\u7ee7\u7eed');\n }\n }\n \n \/\/ \u6682\u505c\u6240\u6709\u52a8\u753b\n function pauseAllAnimations() {\n \/\/ \u6682\u505c\u7c92\u5b50\u52a8\u753b\n const allParticles = document.querySelectorAll('.particle');\n allParticles.forEach(p => {\n p.style.animationPlayState = 'paused';\n });\n \n \/\/ \u6682\u505c\u6c34\u4f4d\u4e0a\u5347\n const waterLevel = document.getElementById('waterLevel');\n if (waterLevel) {\n const computedStyle = getComputedStyle(waterLevel);\n const currentHeight = parseFloat(computedStyle.height);\n waterLevel.style.height = `${currentHeight}%`;\n waterLevel.style.transition = 'none';\n }\n \n \/\/ \u6e05\u9664\u6240\u6709\u8ba1\u65f6\u5668\n activeTimers.forEach(timer => clearTimeout(timer));\n activeTimers = [];\n }\n \n \/\/ \u7ee7\u7eed\u6240\u6709\u52a8\u753b\n function resumeAllAnimations() {\n \/\/ \u7ee7\u7eed\u7c92\u5b50\u52a8\u753b\n const allParticles = document.querySelectorAll('.particle');\n allParticles.forEach(p => {\n p.style.animationPlayState = 'running';\n });\n \n \/\/ \u6062\u590d\u6c34\u4f4d\u8fc7\u6e21\u6548\u679c\n const waterLevel = document.getElementById('waterLevel');\n if (waterLevel) {\n waterLevel.style.transition = 'height 10s ease';\n }\n }\n \n \/\/ \u521b\u5efa\u5b9a\u65f6\u5668\uff08\u53ef\u88ab\u6682\u505c\uff09\n function createTimer(func, delay) {\n if (isPaused) return;\n \n const timer = setTimeout(() => {\n if (!isPaused) {\n func();\n }\n }, delay);\n \n activeTimers.push(timer);\n return timer;\n }\n \n \/\/ \u66f4\u65b0\u72b6\u6001\u6761\n function updateStatus(text) {\n const statusBar = document.getElementById('statusBar');\n if (statusBar) {\n statusBar.querySelector('span').textContent = text;\n }\n }\n \n \/\/ \u663e\u793a\/\u9690\u85cf\u8bef\u5dee\u6307\u793a\u5668\n function toggleErrorIndicator(show) {\n const indicator = document.getElementById('errorIndicator');\n if (indicator) {\n indicator.className = show ? 'error-indicator visible' : 'error-indicator';\n }\n }\n \n \/\/ \u663e\u793a\u8bef\u5dee\u89e3\u91ca\u9762\u677f\n function showErrorExplanation(text) {\n const explanationPanel = document.getElementById('explanationPanel');\n if (explanationPanel) {\n explanationPanel.textContent = text;\n explanationPanel.classList.add('visible');\n \n \/\/ 5\u79d2\u540e\u81ea\u52a8\u9690\u85cf\n setTimeout(() => {\n explanationPanel.classList.remove('visible');\n }, 5000);\n }\n }\n \n \/\/ \u521b\u5efa\u5355\u4e2a\u7c92\u5b50\n function createParticle(container, className, label) {\n const particle = document.createElement('div');\n particle.className = `particle ${className}`;\n particle.innerHTML = label;\n \n \/\/ \u968f\u673a\u4f4d\u7f6e\uff08\u4e0a\u534a\u90e8\u5206\uff09\n const posX = Math.random() * (container.offsetWidth - 50);\n const posY = Math.random() * (container.offsetHeight * 0.8);\n \n particle.style.left = `${posX}px`;\n particle.style.top = `${posY}px`;\n \n \/\/ \u968f\u673a\u52a8\u753b\u5ef6\u8fdf\n particle.style.animationDelay = `${Math.random() * 10}s`;\n \n container.appendChild(particle);\n }\n \n \/\/ \u79fb\u9664\u90e8\u5206\u6c27\u6c14\n function removeOxygen(ratio) {\n const O2Particles = document.querySelectorAll('.particle.O2');\n const toRemove = Math.floor(O2Particles.length * ratio);\n \n \/\/ \u79fb\u9664\u90e8\u5206O2\u7c92\u5b50\n for (let i = 0; i < toRemove; i++) {\n if (i < O2Particles.length) {\n O2Particles[i].style.opacity = '0';\n O2Particles[i].style.transform = 'scale(0)';\n }\n }\n }\n \n \/\/ \u6a21\u62df\u6c14\u4f53\u9038\u51fa\n function simulateLeak(count, direction) {\n const allParticles = document.querySelectorAll('.particle:not(.P)');\n const toRemove = Math.min(count, allParticles.length);\n \n \/\/ \u79fb\u9664\u90e8\u5206\u7c92\u5b50\n for (let i = 0; i < toRemove; i++) {\n const particle = allParticles[Math.floor(Math.random() * allParticles.length)];\n \n \/\/ \u521b\u5efa\u9038\u51fa\u52a8\u753b\n particle.style.transition = 'all 10s ease';\n if (direction === 'right') {\n particle.style.transform = `translateX(${Math.random() * 100 + 100}px)`;\n } else {\n particle.style.transform = `translateY(${-Math.random() * 100 - 100}px)`;\n }\n particle.style.opacity = '0';\n }\n }\n \n \/\/ \u8f6c\u6362\u7ea2\u78f7\u4e3a\u4e94\u6c27\u5316\u4e8c\u78f7\n function convertPhosphorus(convertCount) {\n const PParticles = document.querySelectorAll('.particle.P');\n const count = Math.min(convertCount, PParticles.length);\n \n \/\/ \u968f\u673a\u9009\u62e9\u90e8\u5206\u7ea2\u78f7\u8fdb\u884c\u8f6c\u6362\n const indices = new Set();\n while (indices.size < count) {\n indices.add(Math.floor(Math.random() * PParticles.length));\n }\n \n Array.from(indices).forEach(index => {\n const particle = PParticles[index];\n \/\/ \u8f6c\u6362\u7ea2\u78f7\u4e3a\u4e94\u6c27\u5316\u4e8c\u78f7\n particle.className = 'particle P2O5';\n particle.innerHTML = 'P\u2082O\u2085';\n \n \/\/ \u6dfb\u52a0\u8f6c\u6362\u52a8\u753b\n particle.style.transition = 'all 10s ease';\n particle.style.transform = 'scale(1.5)';\n \n \/\/ \u79fb\u52a8\u5230\u5bb9\u5668\u5e95\u90e8\uff08\u56fa\u4f53\u6c89\u5e95\uff09\n const container = document.getElementById('particlesContainer');\n const containerHeight = container.offsetHeight;\n const particleHeight = particle.offsetHeight;\n \n createTimer(() => {\n particle.style.top = `${containerHeight - particleHeight - 20}px`;\n particle.style.transform = 'scale(1)';\n particle.style.zIndex = '2';\n }, 500);\n });\n }\n \n \/\/ \u6e29\u5ea6\u5347\u9ad8\uff08\u7c92\u5b50\u8fd0\u52a8\u52a0\u5267\uff09\n function heatParticles() {\n if (isHeating) return;\n isHeating = true;\n \n const allParticles = document.querySelectorAll('.particle');\n allParticles.forEach(p => p.classList.add('heating'));\n }\n \n \/\/ \u51b7\u5374\u7c92\u5b50\n function coolParticles() {\n isHeating = false;\n const allParticles = document.querySelectorAll('.particle');\n allParticles.forEach(p => p.classList.remove('heating'));\n }\n \n \/\/ \u6dfb\u52a0\u5916\u754c\u7a7a\u6c14\uff08\u88c5\u7f6e\u6f0f\u6c14\uff09\n function addExternalAir() {\n const container = document.getElementById('particlesContainer');\n \n \/\/ \u6dfb\u52a04\u4e2a\u6c2e\u6c14\u7c92\u5b50\n for (let i = 0; i < 4; i++) {\n createTimer(() => {\n const particle = document.createElement('div');\n particle.className = 'particle N2';\n particle.innerHTML = 'N\u2082';\n \n \/\/ \u4ece\u9876\u90e8\u8fdb\u5165\n particle.style.left = `${Math.random() * (container.offsetWidth - 50)}px`;\n particle.style.top = '-50px';\n particle.style.opacity = '0';\n \n container.appendChild(particle);\n \n \/\/ \u52a8\u753b\uff1a\u5411\u4e0b\u79fb\u52a8\u5e76\u663e\u793a\n createTimer(() => {\n particle.style.transition = 'all 10s ease';\n particle.style.top = `${Math.random() * (container.offsetHeight * 0.8)}px`;\n particle.style.opacity = '1';\n }, 100);\n }, i * 1000);\n }\n \n \/\/ \u6dfb\u52a01\u4e2a\u6c27\u6c14\u7c92\u5b50\n createTimer(() => {\n const particle = document.createElement('div');\n particle.className = 'particle O2';\n particle.innerHTML = 'O\u2082';\n \n \/\/ \u4ece\u9876\u90e8\u8fdb\u5165\n particle.style.left = `${Math.random() * (container.offsetWidth - 50)}px`;\n particle.style.top = '-50px';\n particle.style.opacity = '0';\n \n container.appendChild(particle);\n \n \/\/ \u52a8\u753b\uff1a\u5411\u4e0b\u79fb\u52a8\u5e76\u663e\u793a\n createTimer(() => {\n particle.style.transition = 'all 10s ease';\n particle.style.top = `${Math.random() * (container.offsetHeight * 0.8)}px`;\n particle.style.opacity = '1';\n }, 100);\n }, 4000);\n }\n \n \/\/ \u66f4\u65b0\u6c27\u6c14\u542b\u91cf\u663e\u793a\n function updateOxygenValue(percent) {\n const oxygenValue = document.getElementById('oxygenValue');\n oxygenValue.textContent = `${percent.toFixed(1)}%`;\n \n \/\/ \u6839\u636e\u503c\u8c03\u6574\u989c\u8272\n if (percent > 21.1) {\n oxygenValue.style.color = '#27ae60';\n } else if (percent < 20.9) {\n oxygenValue.style.color = '#e74c3c';\n } else {\n oxygenValue.style.color = '#3498db';\n }\n }\n \n \/\/ \u66f4\u65b0\u6c34\u4f4d\u9ad8\u5ea6\n function updateWaterLevel(percent) {\n const waterLevel = document.getElementById('waterLevel');\n waterLevel.style.height = `${percent}%`;\n }\n \n \/\/ \u66f4\u65b0\u89e3\u91ca\u9762\u677f\n function updateExplanation(type) {\n const explanationPanel = document.getElementById('explanationPanel');\n explanationPanel.textContent = explanations[type];\n }\n \n \/\/ \u663e\u793a\u9762\u677f\uff08\u503c\u663e\u793a\u548c\u89e3\u91ca\u9762\u677f\uff09\n function showPanels() {\n const valueDisplay = document.getElementById('valueDisplay');\n const explanationPanel = document.getElementById('explanationPanel');\n \n if (valueDisplay) valueDisplay.classList.add('visible');\n if (explanationPanel) explanationPanel.classList.add('visible');\n }\n \n \/\/ \u9690\u85cf\u9762\u677f\n function hidePanels() {\n const valueDisplay = document.getElementById('valueDisplay');\n const explanationPanel = document.getElementById('explanationPanel');\n \n if (valueDisplay) valueDisplay.classList.remove('visible');\n if (explanationPanel) explanationPanel.classList.remove('visible');\n }\n \n \/\/ \u91cd\u7f6e\u5b9e\u9a8c\n function resetExperiment() {\n \/\/ \u6e05\u9664\u4e4b\u524d\u7684\u5b9a\u65f6\u5668\n activeTimers.forEach(timer => clearTimeout(timer));\n activeTimers = [];\n \n \/\/ \u91cd\u7f6e\u7c92\u5b50\n initParticles();\n \n \/\/ \u91cd\u7f6e\u6c34\u4f4d\n updateWaterLevel(0);\n \n \/\/ \u91cd\u7f6e\u52a0\u70ed\u72b6\u6001\n coolParticles();\n \n \/\/ \u9690\u85cf\u9762\u677f\n hidePanels();\n toggleErrorIndicator(false);\n \n \/\/ \u91cd\u7f6e\u77e5\u8bc6\u70b9\u9ad8\u4eae\n document.querySelectorAll('.knowledge-point').forEach(point => {\n point.classList.remove('active');\n });\n document.getElementById('knowledgePoint1').classList.add('active');\n \n \/\/ \u66f4\u65b0\u89e3\u91ca\n updateExplanation('normal');\n \n \/\/ \u66f4\u65b0\u72b6\u6001\n updateStatus('\u51c6\u5907\u5f00\u59cb\u5b9e\u9a8c');\n \n \/\/ \u91cd\u7f6e\u6309\u94ae\u72b6\u6001\n document.querySelectorAll('.btn').forEach(btn => {\n btn.classList.remove('active');\n });\n document.getElementById('normalBtn').classList.add('active');\n \n \/\/ \u91cd\u7f6e\u6682\u505c\u72b6\u6001\n isPaused = false;\n document.getElementById('pauseBtn').textContent = '\u23f8\u23f8\u23f8';\n }\n \n \/\/ \u6267\u884c\u5b9e\u9a8c\n function runExperiment(errorType = null) {\n resetExperiment();\n currentError = errorType;\n \n \/\/ \u9ad8\u4eae\u5f53\u524d\u6309\u94ae\n document.querySelectorAll('.btn').forEach(btn => btn.classList.remove('active'));\n if (errorType === null) {\n document.getElementById('normalBtn').classList.add('active');\n } else {\n document.getElementById(`error${errorType}Btn`).classList.add('active');\n }\n \n \/\/ \u5f00\u59cb\u71c3\u70e7\n updateStatus('\u70b9\u71c3\u7ea2\u78f7...');\n heatParticles(); \/\/ \u4ea7\u751f\u70ed\u91cf\n \n createTimer(() => {\n \/\/ \u663e\u793a\u8bef\u5dee\u63d0\u793a\uff08\u5982\u679c\u6709\uff09\n if (errorType) {\n toggleErrorIndicator(true);\n \n \/\/ \u6839\u636e\u9519\u8bef\u7c7b\u578b\u663e\u793a\u4e0d\u540c\u7684\u89e3\u91ca\n switch (errorType) {\n case 1:\n showErrorExplanation(\"\u6b62\u6c34\u5939\u672a\u5939\u7d27\uff1a\u6c14\u4f53\u4ece\u5bfc\u7ba1\u9038\u51fa\");\n break;\n case 2:\n showErrorExplanation(\"\u672a\u53ca\u65f6\u585e\u7d27\u74f6\u585e\uff1a\u6c14\u4f53\u4ece\u74f6\u53e3\u9038\u51fa\");\n break;\n case 3:\n showErrorExplanation(\"\u7ea2\u78f7\u91cf\u4e0d\u8db3\uff1a\u6c27\u6c14\u672a\u88ab\u5b8c\u5168\u6d88\u8017\");\n break;\n case 4:\n showErrorExplanation(\"\u672a\u51b7\u5374\u81f3\u5ba4\u6e29\uff1a\u6c14\u4f53\u4f53\u79ef\u81a8\u80c0\");\n break;\n case 5:\n showErrorExplanation(\"\u88c5\u7f6e\u6f0f\u6c14\uff1a\u5916\u754c\u7a7a\u6c14\u8fdb\u5165\u74f6\u5185\");\n break;\n }\n }\n \n \/\/ \u6d88\u8017\u6c27\u6c14\u5e76\u8f6c\u6362\u7ea2\u78f7\n switch (errorType) {\n case 1: \/\/ \u6b62\u6c34\u5939\u672a\u5939\u7d27\n simulateLeak(15, 'right'); \/\/ \u9038\u51fa\u7ea615\u4e2a\u7c92\u5b50\n removeAllOxygen(); \/\/ \u79fb\u9664\u6240\u6709\u6c27\u6c14\uff08\u5b8c\u5168\u6d88\u8017\uff09\n convertPhosphorus(16); \/\/ \u8f6c\u636216\u4e2a\u7ea2\u78f7\uff08\u4fdd\u75594\u4e2a\uff09\n updateExplanation('error1');\n break;\n \n case 2: \/\/ \u672a\u53ca\u65f6\u585e\u7d27\u74f6\u585e\n simulateLeak(12, 'top'); \/\/ \u9038\u51fa12\u4e2a\u7c92\u5b50\n removeAllOxygen(); \/\/ \u79fb\u9664\u6240\u6709\u6c27\u6c14\uff08\u5b8c\u5168\u6d88\u8017\uff09\n convertPhosphorus(16); \/\/ \u8f6c\u636216\u4e2a\u7ea2\u78f7\uff08\u4fdd\u75594\u4e2a\uff09\n updateExplanation('error2');\n break;\n \n case 3: \/\/ \u7ea2\u78f7\u91cf\u4e0d\u8db3\n \/\/ \u5148\u8f6c\u63628\u4e2a\u7ea2\u78f7\uff08\u56e0\u4e3a\u91cf\u4e0d\u8db3\uff09\n convertPhosphorus(8); \n \/\/ \u79fb\u9664\u6240\u6709\u672a\u88ab\u8f6c\u6362\u7684\u7ea2\u78f7\uff08\u56e0\u4e3a\u91cf\u4e0d\u8db3\uff09\n createTimer(() => {\n removeAllPhosphorus(); \n }, 1000);\n removeOxygen(0.5); \/\/ \u53ea\u6d88\u801750%\u6c27\u6c14\n updateExplanation('error3');\n break;\n \n case 4: \/\/ \u672a\u51b7\u5374\u81f3\u5ba4\u6e29\n \/\/ \u6b63\u5e38\u6d88\u8017\u6c27\u6c14\uff0c\u4f46\u4e0d\u51b7\u5374\n removeAllOxygen();\n convertPhosphorus(16); \/\/ \u8f6c\u636216\u4e2a\u7ea2\u78f7\uff08\u4fdd\u75594\u4e2a\uff09\n updateExplanation('error4');\n break;\n \n case 5: \/\/ \u88c5\u7f6e\u6f0f\u6c14\n removeAllOxygen();\n convertPhosphorus(16); \/\/ \u8f6c\u636216\u4e2a\u7ea2\u78f7\uff08\u4fdd\u75594\u4e2a\uff09\n updateExplanation('error5');\n break;\n \n default: \/\/ \u6b63\u5e38\u64cd\u4f5c\n removeAllOxygen(); \/\/ \u6d88\u8017\u5168\u90e8\u6c27\u6c14\n convertPhosphorus(16); \/\/ \u8f6c\u636216\u4e2a\u7ea2\u78f7\uff08\u4fdd\u75594\u4e2a\uff09\n updateExplanation('normal');\n break;\n }\n \n \/\/ \u7b49\u5f85\u4e94\u6c27\u5316\u4e8c\u78f7\u6c89\u964d\n createTimer(() => {\n updateStatus('\u71c3\u70e7\u7ed3\u675f');\n \n \/\/ \u51b7\u5374\u9636\u6bb5\uff08\u5982\u679c\u9002\u7528\uff09\n createTimer(() => {\n if (errorType !== 4) {\n updateStatus('\u51b7\u5374\u81f3\u5ba4\u6e29...');\n coolParticles();\n }\n \n \/\/ \u88c5\u7f6e\u6f0f\u6c14\uff1a\u6dfb\u52a0\u5916\u754c\u7a7a\u6c14\n if (errorType === 5) {\n updateStatus('\u88c5\u7f6e\u6f0f\u6c14\uff0c\u5916\u754c\u7a7a\u6c14\u8fdb\u5165...');\n addExternalAir();\n }\n \n \/\/ \u6253\u5f00\u6b62\u6c34\u5939\n createTimer(() => {\n updateStatus('\u6253\u5f00\u6b62\u6c34\u5939\uff0c\u6c34\u8fdb\u5165\u96c6\u6c14\u74f6...');\n \n \/\/ \u8ba1\u7b97\u6700\u7ec8\u6c27\u6c14\u542b\u91cf\u548c\u6c34\u4f4d\u9ad8\u5ea6\n let oxygenPercentage, waterLevel;\n switch (errorType) {\n case 1: \/\/ \u6b62\u6c34\u5939\u672a\u5939\u7d27\uff08\u7ed3\u679c\u504f\u5927\uff09\n oxygenPercentage = 21 + Math.random() * 5 + 3;\n waterLevel = oxygenPercentage;\n break;\n \n case 2: \/\/ \u672a\u53ca\u65f6\u585e\u7d27\u74f6\u585e\uff08\u7ed3\u679c\u504f\u5927\uff09\n oxygenPercentage = 21 + Math.random() * 4 + 2.5;\n waterLevel = oxygenPercentage;\n break;\n \n case 3: \/\/ \u7ea2\u78f7\u91cf\u4e0d\u8db3\uff08\u7ed3\u679c\u504f\u5c0f\uff09\n oxygenPercentage = 21 - Math.random() * 5 - 5;\n waterLevel = oxygenPercentage;\n break;\n \n case 4: \/\/ \u672a\u51b7\u5374\u81f3\u5ba4\u6e29\uff08\u7ed3\u679c\u504f\u5c0f\uff09\n oxygenPercentage = 21 - Math.random() * 4 - 4;\n waterLevel = oxygenPercentage;\n break;\n \n case 5: \/\/ \u88c5\u7f6e\u6f0f\u6c14\uff08\u7ed3\u679c\u504f\u5c0f\uff09\n oxygenPercentage = 21 - Math.random() * 6 - 4;\n waterLevel = oxygenPercentage;\n break;\n \n default: \/\/ \u6b63\u5e38\u60c5\u51b5\n oxygenPercentage = 21;\n waterLevel = 21;\n break;\n }\n \n \/\/ \u66f4\u65b0\u6c34\u4f4d\uff08\u88c5\u7f6e\u6f0f\u6c14\u9700\u8981\u7b49\u5f85\u5916\u754c\u7a7a\u6c14\u8fdb\u5165\u540e\u518d\u66f4\u65b0\uff09\n if (errorType === 5) {\n createTimer(() => {\n updateOxygenValue(oxygenPercentage);\n updateWaterLevel(waterLevel);\n \n \/\/ \u6c34\u4f4d\u52a8\u753b\u7ed3\u675f\u540e10\u79d2\u663e\u793a\u9762\u677f\n createTimer(() => {\n updateStatus('\u5b9e\u9a8c\u5b8c\u6210');\n showPanels();\n toggleErrorIndicator(false);\n }, 10000); \/\/ 10\u79d2\u540e\u663e\u793a\u9762\u677f\n }, 5000);\n } else {\n updateOxygenValue(oxygenPercentage);\n updateWaterLevel(waterLevel);\n \n \/\/ \u6c34\u4f4d\u52a8\u753b\u7ed3\u675f\u540e10\u79d2\u663e\u793a\u9762\u677f\n createTimer(() => {\n updateStatus('\u5b9e\u9a8c\u5b8c\u6210');\n showPanels();\n toggleErrorIndicator(false);\n }, 10000); \/\/ 10\u79d2\u540e\u663e\u793a\u9762\u677f\n }\n \n \/\/ \u9ad8\u4eae\u5bf9\u5e94\u77e5\u8bc6\u70b9\n document.querySelectorAll('.knowledge-point').forEach(point => {\n point.classList.remove('active');\n });\n const pointId = errorType === null ? 1 : errorType + 1;\n document.getElementById(`knowledgePoint${pointId}`).classList.add('active');\n }, 5000); \/\/ \u7b49\u5f855\u79d2\u540e\u6253\u5f00\u6b62\u6c34\u5939\n }, 5000); \/\/ \u51b7\u5374\u9636\u6bb5\u5ef6\u957f\u81f35\u79d2\n }, 10000); \/\/ \u7b49\u5f8510\u79d2\u8ba9\u4e94\u6c27\u5316\u4e8c\u78f7\u6c89\u964d\n }, 5000); \/\/ \u71c3\u70e7\u9636\u6bb5\u5ef6\u957f\u81f35\u79d2\n }\n \n \/\/ \u79fb\u9664\u6240\u6709\u6c27\u6c14\n function removeAllOxygen() {\n const O2Particles = document.querySelectorAll('.particle.O2');\n O2Particles.forEach(p => {\n p.style.opacity = '0';\n p.style.transform = 'scale(0)';\n });\n }\n \n \/\/ \u79fb\u9664\u6240\u6709\u7ea2\u78f7\n function removeAllPhosphorus() {\n const PParticles = document.querySelectorAll('.particle.P');\n PParticles.forEach(p => p.remove());\n }\n \n \/\/ \u7ed1\u5b9a\u6309\u94ae\u4e8b\u4ef6\n document.getElementById('normalBtn').addEventListener('click', () => runExperiment(null));\n document.getElementById('error1Btn').addEventListener('click', () => runExperiment(1));\n document.getElementById('error2Btn').addEventListener('click', () => runExperiment(2));\n document.getElementById('error3Btn').addEventListener('click', () => runExperiment(3));\n document.getElementById('error4Btn').addEventListener('click', () => runExperiment(4));\n document.getElementById('error5Btn').addEventListener('click', () => runExperiment(5));\n \n \/\/ \u521d\u59cb\u5316\n window.addEventListener('load', () => {\n initParticles();\n resetExperiment();\n });\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div><\/div>\n<\/details>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n