Spaces:
Running
Running
| <html lang="zh-TW"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>展開之塔 - 數學魔法王國：平方之旅</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <!-- 引入 SortableJS 庫 --> | |
| <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script> | |
| <style> | |
| body.tower-page { | |
| background-image: url('tower.jpg'); | |
| background-size: cover; | |
| background-position: center; | |
| background-attachment: fixed; | |
| } | |
| .tower-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| border-radius: 15px; | |
| box-shadow: 0 0 20px rgba(255, 140, 0, 0.5); | |
| border: 2px solid rgba(255, 140, 0, 0.7); | |
| } | |
| .tower-title { | |
| color: rgba(255, 165, 0, 0.9); | |
| font-size: 2rem; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); | |
| } | |
| .tower-story { | |
| color: white; | |
| font-size: 1.1rem; | |
| line-height: 1.6; | |
| margin-bottom: 30px; | |
| text-align: center; | |
| } | |
| .tower-emoji { | |
| font-size: 2rem; | |
| margin-bottom: 10px; | |
| text-align: center; | |
| } | |
| .video-links { | |
| background-color: rgba(60, 60, 60, 0.8); | |
| border: 2px solid rgba(255, 140, 0, 0.7); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .video-links h3 { | |
| color: rgba(255, 165, 0, 0.9); | |
| font-size: 1.2rem; | |
| margin-bottom: 10px; | |
| text-align: center; | |
| } | |
| .video-links ul { | |
| color: white; | |
| list-style-type: none; | |
| padding: 0; | |
| text-align: center; | |
| } | |
| .video-links li { | |
| margin-bottom: 10px; | |
| } | |
| .video-links a { | |
| color: #3498db; | |
| text-decoration: none; | |
| transition: all 0.3s; | |
| } | |
| .video-links a:hover { | |
| color: #2980b9; | |
| text-decoration: underline; | |
| } | |
| .quiz-container { | |
| display: none; | |
| margin-top: 20px; | |
| } | |
| .quiz-title { | |
| color: rgba(255, 165, 0, 0.9); | |
| font-size: 1.5rem; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| .question { | |
| color: white; | |
| font-size: 1.2rem; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| .stage-indicator { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .stage-btn { | |
| background-color: rgba(60, 60, 60, 0.8); | |
| border: 2px solid rgba(255, 140, 0, 0.7); | |
| border-radius: 10px; | |
| padding: 10px 15px; | |
| color: white; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .stage-btn.active { | |
| background-color: rgba(255, 140, 0, 0.8); | |
| box-shadow: 0 0 15px rgba(255, 140, 0, 0.5); | |
| } | |
| .formula-display { | |
| background-color: rgba(60, 60, 60, 0.8); | |
| border: 2px solid rgba(255, 140, 0, 0.7); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| color: white; | |
| font-size: 1.2rem; | |
| text-align: center; | |
| } | |
| .drag-drop-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin-bottom: 30px; | |
| } | |
| .formula-template { | |
| background-color: rgba(40, 44, 52, 0.9); | |
| border: 2px solid rgba(255, 140, 0, 0.7); | |
| border-radius: 15px; | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| color: white; | |
| font-size: 1.5rem; | |
| text-align: center; | |
| width: 100%; | |
| line-height: 2; | |
| } | |
| .drop-zone { | |
| display: inline-flex; | |
| justify-content: center; | |
| align-items: center; | |
| width: 60px; | |
| height: 40px; | |
| background-color: rgba(100, 100, 100, 0.5); | |
| border: 2px dashed rgba(255, 140, 0, 0.7); | |
| border-radius: 8px; | |
| margin: 0 5px; | |
| vertical-align: middle; | |
| transition: all 0.3s; | |
| touch-action: none; | |
| will-change: transform; | |
| } | |
| .drop-zone.filled { | |
| background-color: rgba(255, 140, 0, 0.3); | |
| border: 2px solid rgba(255, 140, 0, 0.9); | |
| } | |
| .drag-items { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 15px; | |
| margin-top: 25px; | |
| padding: 15px; | |
| background-color: rgba(60, 60, 60, 0.7); | |
| border-radius: 10px; | |
| } | |
| .drag-item { | |
| background-color: rgba(255, 140, 0, 0.8); | |
| border: 2px solid rgba(255, 215, 0, 0.9); | |
| border-radius: 5px; | |
| padding: 5px 10px; | |
| color: white; | |
| font-size: 1rem; | |
| font-weight: bold; | |
| cursor: grab; | |
| user-select: none; | |
| transition: all 0.3s; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); | |
| width: 40px; | |
| height: 30px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| z-index: 10; | |
| will-change: transform; | |
| touch-action: none; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| .drag-item:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(255, 140, 0, 0.3); | |
| } | |
| .drag-ghost { | |
| opacity: 0.5; | |
| background-color: rgba(255, 180, 0, 0.6); | |
| } | |
| .drag-item.sortable-chosen { | |
| background-color: rgba(255, 180, 0, 0.9); | |
| box-shadow: 0 0 15px rgba(255, 180, 0, 0.5); | |
| } | |
| .check-answer-btn { | |
| background-color: rgba(255, 140, 0, 0.8); | |
| color: white; | |
| border: none; | |
| border-radius: 10px; | |
| padding: 10px 20px; | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| .check-answer-btn:hover { | |
| background-color: rgba(255, 165, 0, 0.9); | |
| box-shadow: 0 0 15px rgba(255, 165, 0, 0.5); | |
| transform: translateY(-3px); | |
| } | |
| .next-btn { | |
| background-color: rgba(255, 140, 0, 0.8); | |
| color: white; | |
| border: none; | |
| border-radius: 10px; | |
| padding: 15px 30px; | |
| font-size: 1.2rem; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| display: none; | |
| margin: 20px auto 0; | |
| } | |
| .next-btn:hover { | |
| background-color: rgba(255, 165, 0, 0.9); | |
| box-shadow: 0 0 15px rgba(255, 165, 0, 0.5); | |
| transform: translateY(-3px); | |
| } | |
| .feedback-container { | |
| margin-top: 20px; | |
| padding: 10px; | |
| border-radius: 10px; | |
| text-align: center; | |
| font-size: 1.1rem; | |
| display: none; | |
| } | |
| .feedback-container.correct { | |
| background-color: rgba(100, 200, 100, 0.3); | |
| border: 2px solid rgba(100, 200, 100, 0.7); | |
| color: #2ecc71; | |
| } | |
| .feedback-container.incorrect { | |
| background-color: rgba(200, 100, 100, 0.3); | |
| border: 2px solid rgba(200, 100, 100, 0.7); | |
| color: #e74c3c; | |
| } | |
| .door-container { | |
| display: flex; | |
| justify-content: center; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .door { | |
| width: 30px; | |
| height: 40px; | |
| background-color: rgba(150, 150, 150, 0.8); | |
| border-radius: 5px 5px 0 0; | |
| transition: all 0.5s; | |
| } | |
| .door.opened { | |
| background-color: rgba(255, 140, 0, 0.8); | |
| transform: scaleY(0.7); | |
| opacity: 0.5; | |
| } | |
| .progress-container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .progress-text { | |
| color: white; | |
| font-size: 1.1rem; | |
| margin-right: 10px; | |
| } | |
| .result-container { | |
| display: none; | |
| text-align: center; | |
| margin-top: 30px; | |
| } | |
| .result-title { | |
| color: rgba(255, 165, 0, 0.9); | |
| font-size: 1.8rem; | |
| margin-bottom: 20px; | |
| } | |
| .result-message { | |
| color: white; | |
| font-size: 1.2rem; | |
| line-height: 1.6; | |
| margin-bottom: 30px; | |
| } | |
| .stars-result { | |
| display: flex; | |
| justify-content: center; | |
| gap: 15px; | |
| margin: 20px 0; | |
| } | |
| .star-result { | |
| font-size: 2.5rem; | |
| color: rgba(255, 255, 255, 0.3); | |
| transition: all 0.5s; | |
| } | |
| .star-result.earned { | |
| color: gold; | |
| text-shadow: 0 0 15px rgba(255, 215, 0, 0.7); | |
| animation: starPulse 2s infinite alternate; | |
| } | |
| @keyframes starPulse { | |
| 0% { | |
| transform: scale(1); | |
| text-shadow: 0 0 10px rgba(255, 215, 0, 0.7); | |
| } | |
| 100% { | |
| transform: scale(1.15); | |
| text-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 30px rgba(255, 180, 0, 0.5); | |
| } | |
| } | |
| .navigation-buttons { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| margin-top: 30px; | |
| } | |
| .nav-btn { | |
| background-color: rgba(80, 80, 80, 0.8); | |
| color: white; | |
| border: 2px solid rgba(255, 140, 0, 0.7); | |
| border-radius: 8px; | |
| padding: 10px 20px; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .nav-btn:hover { | |
| background-color: rgba(100, 100, 100, 0.8); | |
| box-shadow: 0 0 15px rgba(255, 140, 0, 0.3); | |
| } | |
| /* SortableJS 相關樣式 */ | |
| .sortable-container { | |
| min-height: 40px; | |
| touch-action: none; | |
| will-change: transform; | |
| } | |
| .sortable-fallback { | |
| opacity: 0.8; | |
| } | |
| /* 響應式設計 */ | |
| @media (max-width: 768px) { | |
| .tower-container { | |
| padding: 15px; | |
| margin: 10px; | |
| } | |
| .tower-title { | |
| font-size: 1.8rem; | |
| } | |
| .navigation-buttons { | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .drag-items { | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="tower-page"> | |
| <!-- 音效元素 --> | |
| <audio id="bgm" loop> | |
| <source src="tower.mp3" type="audio/mpeg"> | |
| </audio> | |
| <audio id="correct-sound"> | |
| <source src="bingo.mp3" type="audio/mpeg"> | |
| </audio> | |
| <audio id="wrong-sound"> | |
| <source src="wrong.mp3" type="audio/mpeg"> | |
| </audio> | |
| <div class="game-container"> | |
| <div class="tower-container"> | |
| <div class="tower-emoji">🗼</div> | |
| <h1 class="tower-title">第三試煉：展開之塔</h1> | |
| <div class="tower-story"> | |
| <p>你來到「展開之塔」，這裡的門需要你將 (a ± b)² 展開後才能解鎖。</p> | |
| <p>塔的守衛問你：「你知道 (30 - 1)² 等於什麼嗎？展開這件事看起來有點難，但凡事都有其規則！」</p> | |
| <p>守衛設下了六道考驗，測試你對平方展開公式的理解與應用。每答對一題，塔中的一扇門就會打開；全部答對，塔頂將賦予你「展開融合」的力量。</p> | |
| </div> | |
| <div class="video-links"> | |
| <h3>參考教學影片</h3> | |
| <ul> | |
| <li><a href="https://youtu.be/f5ydFDsqPz4?si=7RecrelWpskrzuFx" target="_blank">和的平方公式</a></li> | |
| <li><a href="https://youtu.be/3M7LCwpeXwk?si=QAp4wyEG_4BAJO1M" target="_blank">差的平方公式</a></li> | |
| </ul> | |
| </div> | |
| <button id="start-challenge" class="check-answer-btn">進入考驗</button> | |
| <div id="quiz-container" class="quiz-container"> | |
| <div class="door-container" id="doors-progress"> | |
| <div class="door" id="door-1"></div> | |
| <div class="door" id="door-2"></div> | |
| <div class="door" id="door-3"></div> | |
| <div class="door" id="door-4"></div> | |
| <div class="door" id="door-5"></div> | |
| <div class="door" id="door-6"></div> | |
| </div> | |
| <div class="progress-container"> | |
| <div class="progress-text">進度：<span id="current-question">1</span>/6</div> | |
| </div> | |
| <h2 class="quiz-title" id="question-title">問題 1</h2> | |
| <div class="formula-display" id="formula-display"></div> | |
| <div class="stage-indicator"> | |
| <button class="stage-btn active" id="stage-1-btn">第一階段：展開後</button> | |
| <button class="stage-btn" id="stage-2-btn">第二階段：合併中間項</button> | |
| </div> | |
| <div class="drag-drop-container"> | |
| <div class="formula-template" id="formula-template"> | |
| <!-- 將由JavaScript動態生成 --> | |
| </div> | |
| <div class="drag-items" id="drag-items"> | |
| <!-- 將由JavaScript動態生成 --> | |
| </div> | |
| </div> | |
| <div class="feedback-container" id="feedback-container"></div> | |
| <button id="check-answer" class="check-answer-btn">檢查答案</button> | |
| <button id="next-question" class="next-btn">下一題</button> | |
| </div> | |
| <div id="result-container" class="result-container"> | |
| <h2 class="result-title" id="result-title">試煉完成！</h2> | |
| <div class="result-message" id="result-message"></div> | |
| <div class="stars-result"> | |
| <span class="star-result" id="star-1">★</span> | |
| <span class="star-result" id="star-2">★</span> | |
| <span class="star-result" id="star-3">★</span> | |
| </div> | |
| <div class="navigation-buttons" id="success-buttons" style="display: none;"> | |
| <button id="back-to-map" class="nav-btn">返回王國地圖</button> | |
| <button id="next-trial" class="nav-btn">完成旅程</button> | |
| </div> | |
| <div class="navigation-buttons" id="fail-buttons" style="display: none;"> | |
| <button id="retry-challenge" class="nav-btn">重新挑戰</button> | |
| </div> | |
| </div> | |
| <!-- 音樂來源註記 --> | |
| <div class="music-credit"> | |
| <p>背景音樂：由Suno製作</p> | |
| <button id="toggle-bgm" class="small-btn">音樂開/關</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="tower.js"></script> | |
| </body> | |
| </html> | |