《親密關係傾向調查》

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<<nobr>> <div class="survey-card"> <div class="survey-title">《親密關係傾向調查》</div> <div id="intro-content" style="text-align: left !important; padding: 0 5px !important;"> <p style="font-size: 16px !important; line-height: 1.5 !important; color: #4A4A4A; margin: 0 0 8px 0 !important;">歡迎參與本次匿名情感依附測驗：</p> <p style="font-size: 16px !important; line-height: 1.5 !important; color: #4A4A4A; margin: 0 0 8px 0 !important;">本測驗將分析您在長期親密關係中的安全感來源、依戀模式與情緒回應傾向。</p> <p style="font-size: 16px !important; line-height: 1.5 !important; color: #4A4A4A; margin: 0 0 8px 0 !important;"><strong>請在獨自一人的環境下完成作答，過程中請勿中途離開畫面。</strong></p> <p style="font-size: 16px !important; line-height: 1.5 !important; color: #4A4A4A; margin: 0 0 8px 0 !important;">測驗將根據您的回答動態調整內容，因此不同參與者看到的題目可能不同。</p> <p style="font-size: 16px !important; line-height: 1.5 !important; color: #4A4A4A; margin: 0 0 8px 0 !important;">請放心，所有資料都會被妥善保存。</p> </div> <div style="margin-top: 15px !important; padding: 0 !important;"> <button id="start-btn" class="survey-opt-btn" style="text-align: center !important; padding: 12px !important;" onclick="startQuiz()">【開始測驗】</button> </div> <div id="quote-area" class="bottom-quote"></div> </div> <</nobr>> <<script>> window.startQuiz = function() { $("#start-btn").css("opacity", "0"); $("#intro-content").css("opacity", "0.3"); setup.typewriter("quote-area", "人與人之間最深的距離，其實來自於是否願意互相依靠。", 2000, 0, function() { setTimeout(function() { Engine.play("Q1"); }, 1500); }); }; <</script>>

<<nobr>> <div class="survey-card"> <div class="survey-subtitle" style="text-align: left !important;">第 1 題 / 共 15 題</div> <div id="q-text" class="question-text">當您情緒低落時，您最希望戀人怎麼做？</div> <div style="display: flex; flex-direction: column; gap: 4px !important; margin-top: 8px !important; padding: 0 !important;"> <button id="opt-A" class="survey-opt-btn" onclick="selectOption('A')">A. 陪我聊天</button> <button id="opt-B" class="survey-opt-btn" onclick="selectOption('B')">B. 給我空間</button> <button id="opt-C" class="survey-opt-btn" onclick="selectOption('C')">C. 安慰我</button> <button id="opt-D" class="survey-opt-btn" onclick="selectOption('D')">D. 一直陪著我</button> </div> <div id="feedback-area" class="feedback-container" style="margin-top: 8px !important;"></div> </div> <</nobr>> <<script>> window.selectOption = function(choice) { // 鎖定所有按鈕，並將被點擊的選項標記 $(".survey-opt-btn").prop("disabled", true); $("#opt-" + choice).addClass("opt-selected"); // 0.2 秒後隱藏其他未選中的選項，騰出乾淨空間給小字 setTimeout(function() { $(".survey-opt-btn").not("#opt-" + choice).addClass("opt-hide"); }, 200); // 根據選項決定回饋內容 if (choice === 'D') { State.variables.attachment_need = true; // 打字動畫播完後，等待 1.3 秒（1300毫秒）自動跳轉 Q2 setup.typewriter("feedback-area", "長時間的陪伴，往往能帶來比語言更深的安全感。", 1500, 400, function() { setTimeout(function() { Engine.play("Q2"); }, 1300); }); } else { let txt = choice === 'A' ? "對某些人而言，語言本身就是陪伴。" : choice === 'B' ? "並不是每一種安靜，都代表拒絕親近。" : "被理解這件事，有時比安慰更重要。"; // 打字動畫播完後，同樣等待 1.3 秒自動跳轉 Q2 setup.typewriter("feedback-area", txt, 1200, 0, function() { setTimeout(function() { Engine.play("Q2"); }, 1300); }); } }; <</script>>

<<set $attachment_need to false>>

<<nobr>> <style> /* 🎯 僅在 Q2 生效的獨立樣式控制 */ html, body, #story, .passage { background-color: #F0EDE8 !important; /* 💡 背景整體亮度精細降低 2% */ } .q2-container { display: flex; flex-direction: column; gap: 4px !important; margin-top: 8px !important; padding: 0 !important; } /* 0.8秒淡入動畫基底 */ .q2-fade { opacity: 0; animation: q2FadeInKey 0.8s forwards ease-out; } @keyframes q2FadeInKey { from { opacity: 0; } to { opacity: 1; } } .survey-opt-btn:hover { filter: brightness(1.05) !important; /* 💡 Hover 亮度提高 5% */ } /* 小字回饋區域：完全同步 Q1 格式 (16px、顏色、間距) */ .q2-feedback-unified { font-size: 16px !important; color: #5A5A5A !important; line-height: 1.5 !important; margin-top: 10px !important; min-height: 22px; text-align: left !important; } </style> <div class="survey-card" id="q2-card-body" style="padding-bottom: 15px !important;"> <div class="survey-subtitle" style="text-align: left !important;">第 2 題 / 共 15 題</div> <div id="q-text-q2" class="question-text q2-fade">您認為戀人之間應該分享彼此的位置嗎？</div> <div class="q2-container"> <button id="opt-A" class="survey-opt-btn q2-fade" style="animation-delay: 0.2s;" onclick="selectOptionQ2('A')">A. 完全不需要</button> <button id="opt-B" class="survey-opt-btn q2-fade" style="animation-delay: 0.28s;" onclick="selectOptionQ2('B')">B. 偶爾可以</button> <button id="opt-C" class="survey-opt-btn q2-fade" style="animation-delay: 0.36s;" onclick="selectOptionQ2('C')">C. 應該要隨時分享</button> <button id="opt-D" class="survey-opt-btn q2-fade" style="animation-delay: 0.44s;" onclick="selectOptionQ2('D')">D. 不行，這樣我是要怎麼偷吃</button> </div> <div id="feedback-area" class="feedback-container q2-feedback-unified"></div> </div> <</nobr>> <<script>> // 🎯 進入 Q2 瞬間：播放訊息提示音（已調大音量） setTimeout(function() { try { let ctx = new (window.AudioContext || window.webkitAudioContext)(); let osc = ctx.createOscillator(); let gain = ctx.createGain(); osc.type = 'triangle'; // 改用 triangle 波形，聲音在低音量時比 sine 更清晰飽滿 osc.frequency.setValueAtTime(523.25, ctx.currentTime); // C5 溫和音高 // 💡 音量控制：從原本的 0.02 大幅提高到 0.25，確保能清晰聽到 gain.gain.setValueAtTime(0.25, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.3); osc.connect(gain); gain.connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + 0.3); } catch(e) { console.log("音效播放失敗，可能受瀏覽器安全性限制:", e); } }, 50); window.selectOptionQ2 = function(choice) { $(".survey-opt-btn").prop("disabled", true); $("#opt-" + choice).addClass("opt-selected").css("opacity", "0.85"); setTimeout(function() { $(".survey-opt-btn").not("#opt-" + choice).addClass("opt-hide"); }, 200); let feedbackEl = $("#feedback-area"); if (choice === 'A') { setup.typewriter("feedback-area", "有些距離，反而能讓關係維持舒適。", 1500, 0, function() { setTimeout(function() { Engine.play("Q3"); }, 1300); }); } else if (choice === 'B') { $("html, body, #story, .passage").css("background-color", "#ECE9E3"); setTimeout(function() { $("html, body, #story, .passage").css("background-color", "#F0EDE8"); }, 500); setup.typewriter("feedback-area", "適度的了解，常常會讓人比較安心。", 1500, 0, function() { setTimeout(function() { Engine.play("Q3"); }, 1300); }); } else if (choice === 'C') { State.variables.tracking_acceptance = true; feedbackEl.css("color", "#4A4A4A"); setup.typewriter("feedback-area", "對某些人而言，「隨時知道對方在哪裡」也是愛的一部分。", 1750, 0, function() { setTimeout(function() { Engine.play("Q3"); }, 1300); }); } else if (choice === 'D') { State.variables.joke_answer = true; // 畫面亮度短暫下降 $("#q2-card-body").css("background-color", "#F2F0EC"); $("#q-text-q2").css("opacity", "0.5"); setTimeout(function() { $("#q2-card-body").css("background-color", "#FFFFFF"); $("#q-text-q2").css("opacity", "1"); }, 300); // UI 錯誤低頻音效（音量同步調大至 0.2） try { let ctx = new (window.AudioContext || window.webkitAudioContext)(); let osc = ctx.createOscillator(); let gain = ctx.createGain(); osc.type = 'sawtooth'; osc.frequency.setValueAtTime(110, ctx.currentTime); gain.gain.setValueAtTime(0.2, ctx.currentTime); // 💡 D 選項錯誤音量同步提高 gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.15); osc.connect(gain); gain.connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + 0.15); } catch(e) {} setup.typewriter("feedback-area", "你是有什麼毛病", 1000, 0, function() { setTimeout(function() { Engine.play("Q3"); }, 1300); }); } }; <</script>>

<<nobr>> <style> /* 🎯 僅在 Q3 生效的獨立樣式控制，絕不汙染他頁 */ html, body, #story, .passage { /* 💡 背景整體亮度再降低 1%：由 Q2 的 #F0EDE8 微調至 #ECE9E3 */ background-color: #ECE9E3 !important; transition: background-color 0.4s ease !important; } .q3-container { display: flex; flex-direction: column; gap: 4px !important; margin-top: 8px !important; padding: 0 !important; } /* 💡 題目專用 0.6 秒淡入動畫 */ .q3-title-fade { opacity: 0; animation: q3TitleFadeIn 0.6s forwards ease-out; } @keyframes q3TitleFadeIn { from { opacity: 0; } to { opacity: 1; } } /* 💡 選項專用淡入基底 */ .q3-opt-fade { opacity: 0; animation: q3OptFadeIn 0.6s forwards ease-out; } @keyframes q3OptFadeIn { from { opacity: 0; } to { opacity: 1; } } /* 💡 游標維持正常，僅 Hover 時亮度提高 5% */ .survey-opt-btn:hover { filter: brightness(1.05) !important; cursor: pointer !important; } /* 💡 D選項專用：畫面中央「已記錄。」提示字規格 */ #center-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px !important; /* 🎯 修正：字的顏色改成純黑色，並使用粗體 */ color: #000000 !important; font-weight: 700 !important; /* 使用粗體 */ opacity: 0; pointer-events: none; z-index: 9999; text-align: center; /* transition 這裡先不設定，交由 JavaScript 動態控制慢淡入 */ } /* 整個白框卡片的過渡動畫（用於 A 選項 fade out 與 C 選項透明度降低） */ .id-q3-card { transition: opacity 0.4s ease, background-color 0.3s ease !important; } </style> <div class="survey-card id-q3-card" id="q3-card-body" style="padding-bottom: 15px !important;"> <div class="survey-subtitle" style="text-align: left !important;">第 3 題 / 共 15 題</div> <div id="q-text-q3" class="question-text q3-title-fade">如果戀人一整天沒有回覆訊息，您會：</div> <div class="q3-container"> <button id="opt-A" class="survey-opt-btn q3-opt-fade" style="animation-delay: 0.20s;" onclick="selectOptionQ3('A')">A. 等他回覆</button> <button id="opt-B" class="survey-opt-btn q3-opt-fade" style="animation-delay: 0.28s;" onclick="selectOptionQ3('B')">B. 傳訊息關心</button> <button id="opt-C" class="survey-opt-btn q3-opt-fade" style="animation-delay: 0.36s;" onclick="selectOptionQ3('C')">C. 打電話確認</button> <button id="opt-D" class="survey-opt-btn q3-opt-fade" style="animation-delay: 0.44s;" onclick="selectOptionQ3('D')">D. 去找他</button> </div> <div id="feedback-area" class="feedback-container" style="font-size: 16px; color: #5A5A5A; margin-top: 10px; transition: filter 0.3s ease;"></div> </div> <div id="center-toast">已記錄。</div> <</nobr>> <<script>> window.selectOptionQ3 = function(choice) { // 點擊後暫停互動：鎖定按鈕，不可重複點擊 $(".survey-opt-btn").prop("disabled", true); // 點擊後選項透明度降低 15%（即變為 0.85） $("#opt-" + choice).addClass("opt-selected").css("opacity", "0.85"); // 0.2 秒後隱藏其餘未選選項 if (choice !== 'D') { setTimeout(function() { $(".survey-opt-btn").not("#opt-" + choice).addClass("opt-hide"); }, 200); } else { // 選 D 時依規格「立即停止所有 hover」，直接強制移除 hover 樣式流暢處理 $(".survey-opt-btn").not("#opt-D").addClass("opt-hide"); $("<style>.survey-opt-btn:hover { filter: none !important; }</style>").appendTo("head"); } // 創建全域音訊環境 let AudioContext = window.AudioContext || window.webkitAudioContext; // ==================== 【選 A】 ==================== if (choice === 'A') { // 不播放音效，延遲 0.5 秒後執行 0.6 秒的卡片 fade out，隨後進入下一題 setTimeout(function() { $(".id-q3-card").css("opacity", "0"); setTimeout(function() { Engine.play("Q4"); }, 600); }, 500); } // ==================== 【選 B】 ==================== else if (choice === 'B') { State.variables.checks_by_message = true; // 音效：手機收到新訊息音 try { let ctx = new AudioContext(); let now = ctx.currentTime; let playTone = function(freq, start, duration) { let osc = ctx.createOscillator(); let gain = ctx.createGain(); osc.type = 'sine'; osc.frequency.setValueAtTime(freq, start); gain.gain.setValueAtTime(0.15, start); gain.gain.exponentialRampToValueAtTime(0.0001, start + duration); osc.connect(gain); gain.connect(ctx.destination); osc.start(start); osc.stop(start + duration); }; playTone(880, now, 0.15); playTone(1046.5, now + 0.1, 0.25); } catch(e) {} // 畫面效果：小字區域亮度微幅提高 $("#feedback-area").css("filter", "brightness(1.5)"); setTimeout(function() { $("#feedback-area").css("filter", "brightness(1)"); }, 300); // 切頁規格：音效播放完成後（約0.35秒），再等待 0.5 秒切頁（合計 0.85 秒） setTimeout(function() { Engine.play("Q4"); }, 850); } // ==================== 【選 C】 ==================== else if (choice === 'C') { State.variables.checks_by_call = true; // 音效：低頻手機震動聲（1秒），左右聲道輕微偏移 try { let ctx = new AudioContext(); let now = ctx.currentTime; let osc = ctx.createOscillator(); let gain = ctx.createGain(); let panner = ctx.createStereoPanner ? ctx.createStereoPanner() : null; osc.type = 'square'; osc.frequency.setValueAtTime(60, now); // 模擬手機雙擊震動律動 gain.gain.setValueAtTime(0.15, now); gain.gain.setValueAtTime(0, now + 0.4); gain.gain.setValueAtTime(0.15, now + 0.5); gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.9); if (panner) { panner.pan.setValueAtTime(0.3, now); osc.connect(panner); panner.connect(gain); } else { osc.connect(gain); } gain.connect(ctx.destination); osc.start(now); osc.stop(now + 1.0); } catch(e) {} // 畫面效果：題目區域透明度降低 5% $("#q-text-q3").css("opacity", "0.95"); setTimeout(function() { $("#q-text-q3").css("opacity", "1"); }, 400); // 切頁規格：音效結束（1秒）後等待 0.6 秒切頁（合計 1.6 秒） setTimeout(function() { Engine.play("Q4"); }, 1600); } // ==================== 【選 D】 ==================== else if (choice === 'D') { State.variables.physical_search = true; // 💡 點擊後停頓 0.5 秒 setTimeout(function() { // 音效：極低音量電子底噪 let noiseNode = null; let ctx = null; try { ctx = new AudioContext(); let bufferSize = 2 * ctx.sampleRate, noiseBuffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate), output = noiseBuffer.getChannelData(0); for (let i = 0; i < bufferSize; i++) { output[i] = Math.random() * 2 - 1; } noiseNode = ctx.createBufferSource(); noiseNode.buffer = noiseBuffer; noiseNode.loop = true; let filter = ctx.createBiquadFilter(); filter.type = 'lowpass'; filter.frequency.setValueAtTime(150, ctx.currentTime); let gain = ctx.createGain(); gain.gain.setValueAtTime(0.015, ctx.currentTime); noiseNode.connect(filter); filter.connect(gain); gain.connect(ctx.destination); noiseNode.start(); } catch(e) {} // 畫面效果：「已記錄。」出現期間，背景亮度降低 4% $("html, body, #story, .passage").css("background-color", "#E2DCD3"); // 🎯 動態規格修正：字的格式改為粗體黑色，透明度 100%，慢淡入，慢消失 $("#center-toast").css({ "opacity": "1", /* 透明度不變為 70%，完全顯示以配合粗體黑色 */ "transition": "opacity 0.6s ease" /* 💡 淡入時間延長至 0.6 秒 */ }); // 💡 停留節奏修正：淡入時間(0.6秒) + 停留持續(1.5秒) = 2.1秒後開始淡出 setTimeout(function() { $("#center-toast").css({"opacity": "0", "transition": "opacity 0.7s ease"}); /* 緩慢淡出 */ $("html, body, #story, .passage").css("background-color", "#ECE9E3"); /* 背景恢復正常 */ // 音效關閉 if (noiseNode) { try { noiseNode.stop(); } catch(e){} } // 切頁規格修正：「已記錄。」消失後（合計2.1+0.7=2.8秒），延遲 0.8 秒切頁 setTimeout(function() { Engine.play("Q4"); }, 800); }, 2100); }, 500); } }; <</script>>

<<nobr>> <style> /* 🎯 1. 全螢幕終極綁定：只在 html 設定底色與 15 秒漸變，其餘容器一律透明，徹底消滅色差 */ html { background-color: #E0E4E6 !important; /* 全螢幕唯一的初始灰藍底色 */ transition: background-color 15.0s linear !important; } /* 🎯 2. 強制解除 SugarCube 所有中介外殼的背景干擾，讓它們完全透明，透出 html 的底色 */ body, #story, #passages, .passage, #ui-bar { background: transparent !important; background-color: transparent !important; color: #222222 !important; border: none !important; /* 同步文字顏色的漸變，不干擾背景 */ transition: color 15.0s linear, border-color 15.0s linear !important; cursor: default !important; } .q5-container { display: flex; flex-direction: column; gap: 4px !important; margin-top: 8px !important; padding: 0 !important; } .q5-title-fade { opacity: 0; animation: q5TitleFadeIn 0.7s forwards ease-out; } @keyframes q5TitleFadeIn { from { opacity: 0; } to { opacity: 1; } } .q5-opt-fade { opacity: 0; animation: q5OptFadeIn 0.6s forwards ease-out; } @keyframes q5OptFadeIn { from { opacity: 0; } to { opacity: 1; } } /* 🎯 3. 中央卡片本體：乾淨純白框，浮在全螢幕白灰底之上 */ .id-q5-card { background-color: #FFFFFF !important; border: 1px solid #E2E6E8 !important; color: #222222 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important; transition: background-color 15.0s linear, color 15.0s linear, border-color 15.0s linear, box-shadow 15.0s linear !important; } /* 按鈕過渡設定 */ .q5-btn-style { transition: background-color 15.0s linear, color 15.0s linear, border-color 15.0s linear !important; } .q5-btn-style:not(:disabled):hover { filter: brightness(1.05) !important; cursor: pointer !important; } .q5-feedback-spec { font-size: 16px !important; color: #5A5A5A !important; line-height: 1.5 !important; margin-top: 10px !important; min-height: 22px; text-align: left !important; font-weight: normal !important; transition: color 15.0s linear !important; } #idle-center-toast { font-size: 16px !important; color: #707070 !important; text-align: center !important; margin: 15px 0 !important; min-height: 24px; font-weight: normal !important; opacity: 0.7; transition: color 15.0s linear !important; } /* 💀 4. 10秒待機恐怖黑化：只讓 html 變黑底，其餘透明容器自然透出，絕無色差 */ .q5darkbg { background-color: #0B0000 !important; /* 全螢幕同步變暗紅黑底 */ } .q5darkbg body, .q5darkbg #story, .q5darkbg #passages, .q5darkbg .passage, .q5darkbg #ui-bar { color: #990000 !important; } .q5darkcard { background-color: #120101 !important; border-color: #330000 !important; color: #AA0000 !important; box-shadow: 0 4px 25px rgba(136, 0, 0, 0.2) !important; } .q5darkbtn { background-color: #1A0202 !important; border-color: #440000 !important; color: #AA0000 !important; } .q5darktxt { color: #CC0000 !important; } /* ⚡ 5. 點擊選項瞬間閃回（強制清除所有 Transition） */ .q5forcefbg { transition: none !important; background-color: #E0E4E6 !important; } .q5forcefbg body, .q5forcefbg #story, .q5forcefbg #passages, .q5forcefbg .passage, .q5forcefbg #ui-bar { transition: none !important; color: #222222 !important; } .q5forcefcard { transition: none !important; background-color: #FFFFFF !important; border: 1px solid #E2E6E8 !important; color: #222222 !important; box-shadow: none !important; } .q5forcefbtn { transition: none !important; background-color: #FFFFFF !important; border: 1px solid #E2E6E8 !important; color: #222222 !important; } #cursor-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 99999; } </style> <canvas id="cursor-canvas"></canvas> <div class="survey-card id-q5-card" id="q5-card-body" style="padding-bottom: 15px !important;"> <div class="survey-subtitle" style="text-align: left !important;">第 5 題 / 共 15 題</div> <div id="q-text-q5" class="question-text q5-title-fade">如果您知道戀人現在就在您家附近，您會：</div> <div id="idle-center-toast"></div> <div class="q5-container"> <button id="opt-A" class="survey-opt-btn q5-btn-style q5-opt-fade" style="animation-delay: 0.20s;">A. 很開心</button> <button id="opt-B" class="survey-opt-btn q5-btn-style q5-opt-fade" style="animation-delay: 0.28s;">B. 有點驚喜</button> <button id="opt-C" class="survey-opt-btn q5-btn-style q5-opt-fade" style="animation-delay: 0.36s;">C. 你要來你要先講</button> <button id="opt-D" class="survey-opt-btn q5-btn-style q5-opt-fade" style="animation-delay: 0.44s;">D. 他怎麼知道我在家？</button> </div> <div id="feedback-area" class="feedback-container q5-feedback-spec"></div> </div> <</nobr>> <script> $(document).one(":passageend", function() { var scEngine = window.SugarCube ? window.SugarCube.Engine : (window.Engine || {}); var scState = window.SugarCube ? window.SugarCube.State : (window.State || {}); // ⚡ 打字機函數 var localTypewriter = function(elementId, fullText, totalDuration, delay, callback) { setTimeout(function() { var $el = $("#" + elementId); $el.text(""); var currentIdx = 0; var intervalSpeed = Math.floor(totalDuration / fullText.length); var timer = setInterval(function() { if (currentIdx < fullText.length) { $el.text(fullText.substring(0, currentIdx + 1)); currentIdx++; } else { clearInterval(timer); if (typeof callback === "function") { callback(); } } }, intervalSpeed); }, delay || 0); }; // ==================== 1. 游標極輕微拖影系統 ==================== (function() { var canvas = document.getElementById('cursor-canvas'); if (!canvas) return; var ctx = canvas.getContext('2d'); var resize = function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }; resize(); window.removeEventListener('resize', resize); window.addEventListener('resize', resize); window.q5TrailMultiplier = 1.0; var points = []; var mouse = { x: 0, y: 0, lastX: 0, lastY: 0, speed: 0 }; window.addEventListener('mousemove', function(e) { mouse.x = e.clientX; mouse.y = e.clientY; var dx = mouse.x - mouse.lastX; var dy = mouse.y - mouse.lastY; mouse.speed = Math.sqrt(dx * dx + dy * dy); if (mouse.speed > 5) { points.push({ x: mouse.x, y: mouse.y, alpha: 0.25 * window.q5TrailMultiplier, age: 0 }); } mouse.lastX = mouse.x; mouse.lastY = mouse.y; }); var render = function() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < points.length; i++) { var p = points[i]; p.age += 16; ctx.beginPath(); ctx.arc(p.x, p.y, 3, 0, Math.PI * 2); var alphaCalc = p.alpha * (1 - p.age / 100); ctx.fillStyle = "rgba(140, 140, 140, " + alphaCalc + ")"; ctx.fill(); } points = points.filter(function(p) { return p.age < 100; }); window.q5AnimationFrame = requestAnimationFrame(render); }; render(); })(); // ==================== 2. 空間腳步聲系統 ==================== setTimeout(function() { var AudioContext = window.AudioContext || window.webkitAudioContext; try { var actx = new AudioContext(); var now = actx.currentTime; var panner = actx.createStereoPanner ? actx.createStereoPanner() : null; var playStep = function(time, panValue) { var osc = actx.createOscillator(); var gain = actx.createGain(); var filter = actx.createBiquadFilter(); osc.type = 'triangle'; filter.type = 'lowpass'; filter.frequency.setValueAtTime(100, time); gain.gain.setValueAtTime(0, time); gain.gain.linearRampToValueAtTime(0.12, time + 0.05); gain.gain.exponentialRampToValueAtTime(0.0001, time + 0.35); osc.connect(filter); if (panner) { panner.pan.setValueAtTime(panValue, time); filter.connect(panner); panner.connect(gain); } else { filter.connect(gain); } gain.connect(actx.destination); osc.start(time); osc.stop(time + 0.4); }; playStep(now, -1.0); playStep(now + 0.6, -0.5); playStep(now + 1.2, 0.0); playStep(now + 1.8, 0.5); playStep(now + 2.4, 1.0); } catch(e) {} }, 2000); // ==================== 3. 10秒全螢幕同步漸變紅黑底 ==================== var isTextTyped = false; window.q5IdleTimer = setTimeout(function() { if (isTextTyped) return; isTextTyped = true; // 🌟 核心修復：只把暗紅黑類別掛在唯一的 html 上 $("html").addClass("q5darkbg"); $("#q5-card-body").addClass("q5darkcard"); $(".survey-opt-btn").addClass("q5darkbtn"); $("#idle-center-toast").addClass("q5darktxt"); localTypewriter("idle-center-toast", "您還在嗎？", 800, 0, function() { var removeIdleToast = function() { window.removeEventListener('mousemove', removeIdleToast); setTimeout(function() { $("#idle-center-toast").animate({ "opacity": 0 }, 1000, function() { $(this).text(""); $(this).css("opacity", "0.7"); }); }, 1000); }; window.addEventListener('mousemove', removeIdleToast); }); }, 10000); // ==================== 4. 點擊選項與全螢幕瞬間閃回 ==================== $(".survey-opt-btn").on("click", function() { var clickedId = $(this).attr("id"); var choice = clickedId.replace("opt-", ""); $(".survey-opt-btn").prop("disabled", true); clearTimeout(window.q5IdleTimer); // 剝除暗黑類別，掛上強制閃回類別 $("html").removeClass("q5darkbg").addClass("q5forcefbg"); $("#q5-card-body").removeClass("q5darkcard").addClass("q5forcefcard"); $(".survey-opt-btn").removeClass("q5darkbtn").addClass("q5forcefbtn"); $("#idle-center-toast").stop(true, true).css("opacity", "0").css("transition", "none").text(""); $("#" + clickedId).addClass("opt-selected").css("opacity", "0.85"); setTimeout(function() { $(".survey-opt-btn").not("#" + clickedId).addClass("opt-hide"); }, 200); var cleanUpAndGo = function(targetPassage, delay) { cancelAnimationFrame(window.q5AnimationFrame); setTimeout(function() { $("html").removeClass("q5forcefbg"); $(".q5forcefcard").removeClass("q5forcefcard"); $(".q5forcefbtn").removeClass("q5forcefbtn"); if (scEngine && typeof scEngine.play === "function") { scEngine.play(targetPassage); } }, delay); }; if (choice === 'A') { localTypewriter("feedback-area", "有些人會因為被惦記而感到安心。", 1200, 0, function() { cleanUpAndGo("Q6", 1000); }); } else if (choice === 'B') { // 點擊 A、B 等選項時，直接對最高層級的 html 進行無過渡色彩跳動 $("html").css("transition", "none"); $("html").css("background-color", "#D7DBDD"); setTimeout(function() { $("html").css("background-color", "#E0E4E6"); }, 400); localTypewriter("feedback-area", "突如其來的陪伴，有時也會讓人開心。", 1200, 0, function() { cleanUpAndGo("Q6", 1000); }); } else if (choice === 'C') { if (scState && scState.variables) { scState.variables.wants_notice = true; } setTimeout(function() { $("html").css("transition", "none"); $("html").css("background-color", "#D2D6D8"); localTypewriter("feedback-area", "下次我會先說。", 1000, 0, function() { cleanUpAndGo("Q6", 1500); }); }, 500); } else if (choice === 'D') { if (scState && scState.variables) { scState.variables.fear_response = true; } window.q5TrailMultiplier = 1.8; localTypewriter("feedback-area", "我只是想確認您平安。", 1200, 0, function() { var noiseNode = null; try { var AudioContext = window.AudioContext || window.webkitAudioContext; var ctx = new AudioContext(); var bufferSize = 2 * ctx.sampleRate, noiseBuffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate), output = noiseBuffer.getChannelData(0); for (var bIdx = 0; bIdx < bufferSize; bIdx++) { output[bIdx] = Math.random() * 2 - 1; } var filter = ctx.createBiquadFilter(); filter.type = "lowpass"; filter.frequency.setValueAtTime(120, ctx.currentTime); var gain = ctx.createGain(); gain.gain.setValueAtTime(0.012, ctx.currentTime); noiseNode = ctx.createBufferSource(); noiseNode.buffer = noiseBuffer; noiseNode.loop = true; noiseNode.connect(filter); filter.connect(gain); gain.connect(ctx.destination); noiseNode.start(); } catch(e) {} setTimeout(function() { if (noiseNode) { try { noiseNode.stop(); } catch(e){} } cleanUpAndGo("Q6", 1000); }, 2000); }); } }); }); </script>

<<nobr>> <style> /* 🎯 Q6 核心樣式（已修正專案命名與跳轉衝突） */ html, body, #story, .passage { background-color: #E0E4E6 !important; cursor: default !important; } .q6-container { display: flex; flex-direction: column; gap: 4px !important; margin-top: 8px !important; padding: 0 !important; } .q6-title-fade { opacity: 0; animation: q6TitleFadeIn 0.6s forwards ease-out; } @keyframes q6TitleFadeIn { from { opacity: 0; } to { opacity: 1; } } .q6-opt-fade { opacity: 0; animation: q6OptFadeIn 0.6s forwards ease-out; } @keyframes q6OptFadeIn { from { opacity: 0; } to { opacity: 1; } } /* 💡 D 選項在「還沒選之前」就非常顯眼 */ .q6-d-conspicuous { color: #111111 !important; /* 極深的文字顏色 */ background-color: #D2D7DA !important; /* 比 A/B/C 更深、更有重量感的按鈕底色 */ border: 1px solid #999999 !important; /* 顯眼的深色邊框 */ font-weight: normal !important; /* 為後面點擊後的黑底紅字轉變做準備 (轉變歷史拉長至 3 秒，顯得緩慢、沉重) */ transition: background-color 3.0s ease, color 3.0s ease, opacity 0.2s ease !important; } .survey-opt-btn:hover { filter: brightness(1.05) !important; cursor: pointer !important; } /* D 選項單獨的 Hover 清晰度增強 */ .q6-d-conspicuous:hover { filter: brightness(1.02) contrast(1.25) !important; } /* 💡 當點擊 D 之後，動態加上這個 Class，讓它慢速變為黑底紅字 */ .q6-d-turning-dark { background-color: #111111 !important; /* 變為黑底 */ color: #CC0000 !important; /* 變為暗紅字 */ border-color: #000000 !important; } .q6-feedback-area { font-size: 16px !important; color: #5A5A5A !important; line-height: 1.5 !important; margin-top: 10px !important; min-height: 22px; text-align: left !important; font-weight: normal !important; } /* 全畫面半透明黑色遮罩 */ #q6-black-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000000; opacity: 0; pointer-events: none; z-index: 999; transition: opacity 1.5s linear; /* 遮罩同步稍微放慢 */ } /* A/B/C 專用平滑淡出 1 秒 */ .q6-opt-fadeout { opacity: 0 !important; transition: opacity 1.0s ease !important; } .id-q6-card { transition: opacity 0.7s ease !important; } </style> <div id="q6-black-overlay"></div> <div class="survey-card id-q6-card" id="q6-card-body" style="padding-bottom: 15px !important; position: relative; z-index: 1000;"> <div class="survey-subtitle" style="text-align: left !important;">第 6 題 / 共 15 題</div> <div id="q-text-q6" class="question-text q6-title-fade">您覺得真正的愛應該：</div> <div class="q6-container"> <button id="opt-A" class="survey-opt-btn q6-opt-fade" style="animation-delay: 0.20s;" onclick="selectOptionQ6('A')">A. 充滿激情</button> <button id="opt-B" class="survey-opt-btn q6-opt-fade" style="animation-delay: 0.28s;" onclick="selectOptionQ6('B')">B. 長久的陪伴</button> <button id="opt-C" class="survey-opt-btn q6-opt-fade" style="animation-delay: 0.36s;" onclick="selectOptionQ6('C')">C. 我爽就好</button> <button id="opt-D" class="survey-opt-btn q6-opt-fade q6-d-conspicuous" style="animation-delay: 0.44s;" onclick="selectOptionQ6('D')">D. 永遠只看著彼此</button> </div> <div id="feedback-area" class="feedback-container q6-feedback-area"></div> </div> <</nobr>> <script> if (window.q4AnimationFrame) { cancelAnimationFrame(window.q4AnimationFrame); var oldCanvas = document.getElementById('cursor-canvas'); if (oldCanvas) oldCanvas.remove(); } window.selectOptionQ6 = function(choice) { $(".survey-opt-btn").prop("disabled", true); $("<style>.survey-opt-btn:hover { filter: none !important; }</style>").appendTo("head"); var AudioContext = window.AudioContext || window.webkitAudioContext; var scEngine = window.SugarCube ? window.SugarCube.Engine : (window.Engine || {}); var scSetup = window.SugarCube ? window.SugarCube.setup : (window.setup || {}); // ==================== 【選 A / B / C】 ==================== if (choice !== 'D') { $("#opt-" + choice).addClass("opt-selected").css("opacity", "0.85"); setTimeout(function() { $(".survey-opt-btn").not("#opt-" + choice).addClass("opt-hide"); }, 200); var txt = choice === 'A' ? "有些人認為愛來自情感最強烈的瞬間。" : choice === 'B' ? "一直有人在旁邊的感覺，久了其實會讓人安心。" : "也有人更在意關係中的自在感。"; if (scSetup.typewriter) { scSetup.typewriter("feedback-area", txt, 1800, 0, function() { setTimeout(function() { $(".id-q6-card").css("opacity", "0"); // 🎯 核心修復：跳轉至 Q7 setTimeout(function() { scEngine.play("Q7"); }, 500); }, 1000); }); } else { $("#feedback-area").text(txt); setTimeout(function() { $(".id-q6-card").css("opacity", "0"); setTimeout(function() { scEngine.play("Q7"); }, 500); }, 2500); } } // ==================== 【選 D 特殊效果】 ==================== else if (choice === 'D') { // 1. 立即讓 D 按鈕套用「變為黑底紅字」的 CSS 過渡效果 $("#opt-D").addClass("q6-d-turning-dark"); // 🔊 2. 延遲 0.2 秒播放近距離呼吸聲（保持穩定不干擾） setTimeout(function() { try { var ctx = new AudioContext(); var now = ctx.currentTime; var bufferSize = 2 * ctx.sampleRate, noiseBuffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate), output = noiseBuffer.getChannelData(0); for (var i = 0; i < bufferSize; i++) { output[i] = Math.random() * 2 - 1; } var whiteNoise = ctx.createBufferSource(); whiteNoise.buffer = noiseBuffer; var filter = ctx.createBiquadFilter(); filter.type = 'bandpass'; filter.frequency.setValueAtTime(250, now); filter.Q.setValueAtTime(1.0, now); var gain = ctx.createGain(); gain.gain.setValueAtTime(0.015, now); gain.gain.linearRampToValueAtTime(0.018, now + 0.8); gain.gain.linearRampToValueAtTime(0.012, now + 1.4); gain.gain.exponentialRampToValueAtTime(0.0001, now + 2.0); whiteNoise.connect(filter); filter.connect(gain); gain.connect(ctx.destination); whiteNoise.start(now); whiteNoise.stop(now + 2.0); } catch(e) {} }, 200); // 🎬 3. 延遲 0.3 秒：A/B/C 開始淡出 + 黑色遮罩平滑出現 setTimeout(function() { $("#opt-A, #opt-B, #opt-C").addClass("q6-opt-fadeout"); $("#q6-black-overlay").css("opacity", "0.35"); }, 300); // ⏳ 4. 選項原位停留 3.5 秒後切頁 setTimeout(function() { // 最終的 0.7 秒白框卡片與遮罩淡出 $(".id-q6-card, #q6-black-overlay").css({ "opacity": "0", "transition": "opacity 0.7s ease" }); // 🎯 核心修復：跳轉至 Q7 setTimeout(function() { scEngine.play("Q7"); }, 700); }, 3500); } }; </script>

<<nobr>> <style> /* 🎯 1. 全螢幕終極綁定：只在頂層 html 設定初始米白並進行 5 秒氧化漸變 */ html { background-color: #F5F3EF !important; /* 進場的初始米白底色 */ transition: background-color 5.0s linear !important; /* 全螢幕 5 秒平滑氧化 */ } /* 🎯 2. 強制解除 SugarCube 所有外殼容器的背景干擾，全部轉為透明，透出 html 的唯一顏色 */ body, #story, #passages, .passage, #ui-bar { background: transparent !important; background-color: transparent !important; color: #111111 !important; border: none !important; transition: color 2.0s ease !important; /* 僅保留文字顏色流暢漸變 */ cursor: default !important; } /* 🎯 3. 卡片本體（中央白框）：浮在全螢幕背景之上 */ .id-q7-card { background-color: #FFFFFF !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important; transition: opacity 0.5s ease, background-color 3.0s ease, color 3.0s ease !important; } .q7-container { display: flex; flex-direction: column; gap: 4px !important; margin-top: 8px !important; padding: 0 !important; opacity: 0; /* 初始隱藏，等待開門音效放完後淡入 */ } /* 💡 題目專用 0.8 秒淡入動畫 */ .q7-title-fade { opacity: 0; animation: q7TitleFadeIn 0.8s forwards ease-out; } @keyframes q7TitleFadeIn { from { opacity: 0; } to { opacity: 1; } } /* 💡 選項逐一淡入動畫 */ .q7-opt-fadein { opacity: 0; animation: q7OptFadeIn 0.4s forwards ease-out; } @keyframes q7OptFadeIn { from { opacity: 0; } to { opacity: 1; } } /* 💡 Hover 時按鈕微幅提亮 */ .survey-opt-btn:hover { filter: brightness(1.05) !important; cursor: pointer !important; } /* 💡 點擊後讓選中的按鈕在原位慢慢變黑底 */ .q7-opt-turning-black { background-color: #111111 !important; color: #FFFFFF !important; border-color: #000000 !important; } /* 🎬 監視器訊號異常效果 */ .glitch-active { animation: q7GlitchEffect 0.15s linear forwards; } @keyframes q7GlitchEffect { 0% { transform: skewX(0deg) scale(1); text-shadow: none; } 30% { transform: skewX(3deg) scaleY(1.01); text-shadow: 2px 0 #FF0000, -2px 0 #0000FF; /* 紅藍邊緣短暫分離 */ } 60% { transform: skewX(-3deg) scaleX(0.99); text-shadow: -1px 0 #FF0000, 2px 0 #0000FF; } 100% { transform: skewX(0deg) scale(1); text-shadow: none; } } </style> <div class="survey-card id-q7-card" id="q7-card-body" style="padding-bottom: 15px !important;"> <div class="survey-subtitle" style="text-align: left !important;">第 7 題 / 共 15 題</div> <div id="q-text-q7" class="question-text q7-title-fade" style="text-align: center !important; margin-bottom: 25px;"> 如果有人在門外。您會： </div> <div id="q7-options-block" class="q7-container"> <button id="opt-A" class="survey-opt-btn" onclick="window.selectOptionQ7('A')">A. 先確認是誰</button> <button id="opt-B" class="survey-opt-btn" onclick="window.selectOptionQ7('B')">B. 傳訊息問熟人有無來訪</button> <button id="opt-C" class="survey-opt-btn" onclick="window.selectOptionQ7('C')">C. 假裝家裡沒有人</button> <button id="opt-D" class="survey-opt-btn" onclick="window.selectOptionQ7('D')">D. 直接開門</button> </div> </div> <</nobr>> <script> (function() { // ==================== 1. 背景 5 秒緩慢氧化漸變（精準對齊頂層 html） ==================== setTimeout(function() { $("html").css("background-color", "#DDD6CF"); }, 50); // ==================== 2. 空間開門聲與選項延遲淡入 ==================== var AudioContext = window.AudioContext || window.webkitAudioContext; var scEngine = window.SugarCube ? window.SugarCube.Engine : (window.Engine || {}); setTimeout(function() { // 🔊 【音效：遠距離隔壁房間開門聲】 try { var actx = new AudioContext(); var now = actx.currentTime; var panner = actx.createStereoPanner ? actx.createStereoPanner() : null; var osc = actx.createOscillator(); var gain = actx.createGain(); var filter = actx.createBiquadFilter(); osc.type = 'sine'; osc.frequency.setValueAtTime(180, now); // 低沉木門摩擦聲 osc.frequency.linearRampToValueAtTime(140, now + 1.5); filter.type = 'lowpass'; filter.frequency.setValueAtTime(350, now); // 濾除高頻模擬隔壁房間 gain.gain.setValueAtTime(0, now); gain.gain.linearRampToValueAtTime(0.06, now + 0.2); gain.gain.linearRampToValueAtTime(0.04, now + 1.0); gain.gain.exponentialRampToValueAtTime(0.0001, now + 1.5); osc.connect(filter); if (panner) { panner.pan.setValueAtTime(-0.7, now); // 音效偏左聲道 filter.connect(panner); panner.connect(gain); } else { filter.connect(gain); } gain.connect(actx.destination); osc.start(now); osc.stop(now + 1.5); } catch(e) {} // ⏳ 【選項顯示排程】 setTimeout(function() { $("#q7-options-block").css("opacity", "1"); var opts = ["#opt-A", "#opt-B", "#opt-C", "#opt-D"]; opts.forEach(function(id, index) { setTimeout(function() { $(id).addClass("q7-opt-fadein"); }, index * 150); }); }, 2000); }, 1000); // ==================== 3. 選項互動與監視器異常特效 ==================== window.selectOptionQ7 = function(choice) { // 立即禁止重複點擊 $(".survey-opt-btn").prop("disabled", true); // 移除 Hover 提亮 $("<style>.survey-opt-btn:hover { filter: none !important; }</style>").appendTo("head"); // 其他選項隱藏 $("#opt-" + choice).css("opacity", "0.85"); setTimeout(function() { $(".survey-opt-btn").not("#opt-" + choice).addClass("opt-hide"); }, 200); // 觸發慢慢變黑底 $("#opt-" + choice).addClass("q7-opt-turning-black"); // ⚡ 觸發畫面橫向扭曲與 RGB 色偏（0.15 秒） $("#q7-card-body").addClass("glitch-active"); // 🔊 【音效：0.2秒老舊螢幕電子雜訊聲】 try { var actx = new AudioContext(); var now = actx.currentTime; var bufferSize = 0.2 * actx.sampleRate, noiseBuffer = actx.createBuffer(1, bufferSize, actx.sampleRate), output = noiseBuffer.getChannelData(0); for (var i = 0; i < bufferSize; i++) { output[i] = Math.random() * 2 - 1; } var noise = actx.createBufferSource(); noise.buffer = noiseBuffer; var filter = actx.createBiquadFilter(); filter.type = 'bandpass'; filter.frequency.setValueAtTime(800, now); var gain = actx.createGain(); gain.gain.setValueAtTime(0.015, now); gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.2); noise.connect(filter); filter.connect(gain); gain.connect(actx.destination); noise.start(now); noise.stop(now + 0.2); } catch(e) {} // ⏳ 0.15秒後移除扭曲效果 setTimeout(function() { $("#q7-card-body").removeClass("glitch-active"); }, 150); // 🎯 完美跳轉：3.5 秒後卡片淡出，並流暢接入 Q8 setTimeout(function() { $(".id-q7-card").css("opacity", "0"); setTimeout(function() { scEngine.play("Q8"); }, 500); }, 3500); }; })(); </script>

<<nobr>> <style> /* 🎯 背景與顏色基礎控制：利用 html 標籤控制全螢幕底色，不影響卡片位置 */ html.q13-env { background-color: #0F0F10 !important; /* 初始狀態：黑底 */ transition: background-color 3.0s ease, color 3.0s ease !important; } /* 🛡️ 徹底消滅下方異色區：強制將 SugarCube 所有外殼容器背景全部透明化 */ body, #story, #passages, .passage, #ui-bar { background: transparent !important; background-color: transparent !important; border: none !important; } /* 🎬 開頭自動漸變為「白底黑字」的環境樣式 */ html.q13-env.turn-to-white { background-color: #E5E9EC !important; /* 漸變目標：亮灰白 */ } /* 💡 四角黑色漸層暗角（始終覆蓋在最上層） */ .q13-vignette { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.7); pointer-events: none; z-index: 9999; transition: box-shadow 3.0s ease !important; } .q13-vignette-final { box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.95) !important; } /* 💡 卡片與按鈕樣式同步 Q13 特效 */ .id-q13-card { background-color: #161618 !important; /* 初始：深色 */ border: 1px solid #2A2A2C !important; color: #E2E6E8 !important; transition: background-color 3.0s ease, color 3.0s ease, border-color 3.0s ease, box-shadow 3.0s ease !important; } .id-q13-card.turn-to-white { background-color: #FFFFFF !important; /* 漸變後：白底 */ border-color: #E2E6E8 !important; color: #222222 !important; box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; } .q13-btn-style { background-color: #222224 !important; border: 1px solid #3A3A3C !important; color: #E2E6E8 !important; transition: background-color 3.0s ease, color 3.0s ease, border-color 3.0s ease !important; } .q13-btn-style.turn-to-white { background-color: #FFFFFF !important; border-color: #E2E6E8 !important; color: #222222 !important; } .q13-btn-style:not(:disabled):hover { opacity: 0.8; cursor: pointer; } /* 🎯 閒置與點擊後的特殊狀態類別 */ .q13darkbg { background-color: #0B0000 !important; } .q13darkcard { background-color: #120101 !important; color: #AA0000 !important; border-color: #330000 !important; } .q13darkbtn { background-color: #1A0202 !important; color: #AA0000 !important; border-color: #440000 !important; } .q13-opt-turning-black { background-color: #111111 !important; color: #FFFFFF !important; border-color: #333333 !important; } /* 畫布與小字位置 */ #q13-cursor-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 99999; } #q13-idle-center-toast { font-size: 15px; color: #707070; text-align: center; margin: 10px 0; min-height: 20px; transition: color 1.5s ease; } </style> <div id="q13-vignette-element" class="q13-vignette"></div> <canvas id="q13-cursor-canvas"></canvas> <div class="survey-card id-q13-card" id="q13-card-body"> <div class="survey-subtitle" style="text-align: left !important;">第 13 題 / 共 15 題</div> <div id="q-text-q13" class="question-text" style="text-align: center !important; margin-bottom: 20px;"> 「您現在有確認過門口嗎？」 </div> <div id="q13-idle-center-toast"></div> <div style="display: flex; flex-direction: column; gap: 4px !important; margin-top: 8px !important; padding: 0 !important;"> <button id="opt-A" class="survey-opt-btn q13-btn-style" onclick="selectOptionQ13('A')">A. 沒有</button> <button id="opt-B" class="survey-opt-btn q13-btn-style" onclick="selectOptionQ13('B')">B. 還沒</button> <button id="opt-C" class="survey-opt-btn q13-btn-style" onclick="selectOptionQ13('C')">C. 為什麼這樣問？</button> <button id="opt-D" class="survey-opt-btn q13-btn-style" onclick="selectOptionQ13('D')">D. ……</button> </div> <div id="feedback-area-q13" class="feedback-container" style="margin-top: 8px !important;"></div> </div> <</nobr>> <script> $(document).one(":passageend", function() { // 安全獲取 SugarCube 的 setup 物件 var getScSetup = function() { return window.SugarCube ? window.SugarCube.setup : (window.setup || {}); }; // 1. 初始化環境：先黑底白字 $("html").removeClass().addClass("q13-env"); $("body").removeClass().addClass("q13-env"); // 2. 🎬 自動漸變：100ms 後啟動 3.0s 的「白化漸變」 setTimeout(function() { $("html").addClass("turn-to-white"); $("#q13-card-body").addClass("turn-to-white"); $(".q13-btn-style").addClass("turn-to-white"); }, 100); // 3. 🔊 空間擬真雙下敲門聲 setTimeout(function() { var AudioContext = window.AudioContext || window.webkitAudioContext; try { var actx = new AudioContext(); var playKnock = function(time, panValue) { var osc = actx.createOscillator(); var gain = actx.createGain(); osc.type = 'triangle'; osc.frequency.setValueAtTime(85, time); osc.frequency.exponentialRampToValueAtTime(30, time + 0.1); gain.gain.setValueAtTime(0, time); gain.gain.linearRampToValueAtTime(0.15, time + 0.01); gain.gain.exponentialRampToValueAtTime(0.0001, time + 0.15); osc.connect(gain); gain.connect(actx.destination); osc.start(time); osc.stop(time + 0.2); }; var now = actx.currentTime; playKnock(now); playKnock(now + 0.7); } catch(e) {} }, 1200); // 4. ⏳ 10秒閒置紅字彩蛋 window.q13IdleTimer = setTimeout(function() { if ($(".survey-opt-btn").is(":disabled")) return; $("html").removeClass("turn-to-white").addClass("q13darkbg"); $("#q13-card-body").removeClass("turn-to-white").addClass("q13darkcard"); $(".q13-btn-style").removeClass("turn-to-white").addClass("q13darkbtn"); // 🛡️ 修正：使用全域安全路徑調用打字機特效，防止 setup undefined 報錯 var scSetup = getScSetup(); if (scSetup && scSetup.typewriter) { scSetup.typewriter("q13-idle-center-toast", "您是不是聽到了？", 1200, 0); } else { $("#q13-idle-center-toast").text("您是不是聽到了？"); } }, 10000); // 5. 🎯 點擊選項後的「回歸黑底」並安全跳轉 Q14 window.selectOptionQ13 = function(choice) { clearTimeout(window.q13IdleTimer); $(".survey-opt-btn").prop("disabled", true); $("#opt-" + choice).addClass("opt-selected"); // 🎬 啟動回歸深淵的漸變 (3.0s) $("html").removeClass("turn-to-white q13darkbg").css("background-color", "#060607"); $("#q13-card-body").removeClass("turn-to-white q13darkcard").addClass("q13-opt-turning-black"); $("#q13-vignette-element").addClass("q13-vignette-final"); $("#q13-idle-center-toast").fadeOut(500); setTimeout(function() { $(".survey-opt-btn").not("#opt-" + choice).addClass("opt-hide"); }, 200); // 延遲 3.5 秒後，安全切換至下一關 setTimeout(function() { $("html, body").css({"background-color": "#000", "transition": "none"}).removeClass("q13-env"); if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play("Q14"); } else if (window.Engine) { Engine.play("Q14"); } }, 3500); }; // 6. 滑鼠拖影畫布 (function() { var canvas = document.getElementById('q13-cursor-canvas'); if (!canvas) return; var ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var pts = []; window.addEventListener('mousemove', function(e) { pts.push({ x: e.clientX, y: e.clientY, a: 0.3, age: 0 }); }); function anim() { ctx.clearRect(0,0,canvas.width,canvas.height); for(var i=0; i<pts.length; i++) { var p = pts[i]; p.age += 16; ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, Math.PI*2); ctx.fillStyle = "rgba(100,100,100,"+(p.a*(1-p.age/200))+")"; ctx.fill(); } pts = pts.filter(p => p.age < 200); requestAnimationFrame(anim); } anim(); })(); }); </script>

<<nobr>> <style> html, body, #story, .passage { background-color: #2E3135 !important; color: #D7DADF !important; cursor: default !important; transition: opacity 0.8s ease !important; } /* 🎯 新增：專門控制全網頁黑屏淡出的樣式，優先級最高 */ html.q8-global-fadeout, html.q8-global-fadeout body { opacity: 0 !important; transition: opacity 0.8s ease-out !important; } .passage a, .passage #q8-card-body { color: #D7DADF !important; } .q8-container { display: flex; flex-direction: column; gap: 8px !important; margin-top: 16px !important; padding: 0 !important; } /* 題目淡入 */ .q8-title-fade { opacity: 0; color: #FF0000 !important; font-weight: bold !important; animation: q8TitleFadeIn 0.8s forwards ease-out; } @keyframes q8TitleFadeIn { to { opacity: 1; } } /* 強制將卡片容器鎖定為黑底 */ .survey-card.id-q8-card { background-color: #1A1C1E !important; border: 1px solid #3A3D42 !important; box-shadow: none !important; transition: background-color 0.3s ease !important; padding: 20px !important; } /* 核心修正：直接本體強制注入 color: #FF0000 !important */ .q8-btn-style { background-color: #232528 !important; border: 1px solid #3A3D42 !important; color: #FF0000 !important; font-weight: bold !important; box-shadow: none !important; text-shadow: none !important; padding: 12px !important; text-align: left !important; transition: opacity 0.3s ease, background-color 0.3s ease, letter-spacing 0.5s ease !important; /* 由透明度動畫控制登場與不安的呼吸閃爍 */ opacity: 0; animation: q8RedBreathRender 1.8s infinite linear !important; } /* 🎯 複合式呼吸動畫 */ @keyframes q8RedBreathRender { 0% { opacity: 0; } 20% { opacity: 1; } 40% { opacity: 0.6; } 55% { opacity: 1; } 70% { opacity: 0.7; } 85% { opacity: 1; } 100% { opacity: 1; } } /* 選項登場時間差 */ #opt-A { animation-delay: 0.2s !important; } #opt-B { animation-delay: 0.4s !important; } #opt-C-style { animation-delay: 0.6s !important; } #opt-D { animation-delay: 0.8s !important; } /* 懸停狀態 */ .q8-btn-style:not(:disabled):hover { background-color: #151618 !important; opacity: 0.95 !important; cursor: pointer !important; } /* 被點擊後的純紅字狀態 */ .q8-btn-clicked { opacity: 1 !important; background-color: #151618 !important; animation: none !important; color: #FF0000 !important; } #noise-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1; } .id-q8-card { position: relative; z-index: 10; } #opt-C-style:not(:disabled):hover { letter-spacing: -1.5px !important; } #q8-target-hao { position: fixed; bottom: 12%; left: 50%; transform: translateX(-50%); font-size: 18px !important; color: #FF0000 !important; font-weight: bold !important; text-align: center !important; opacity: 0.9; z-index: 999; min-height: 24px; letter-spacing: 2px; } /* 讓卡片與選項以極度不適的緩慢速度（1.8秒）淡出死亡 */ .q8-slow-fadeout { opacity: 0 !important; transition: opacity 1.8s cubic-bezier(0.4, 0, 1, 1) !important; } </style> <canvas id="noise-canvas"></canvas> <div class="survey-card id-q8-card" id="q8-card-body" style="padding-bottom: 25px !important;"> <div class="survey-subtitle" style="text-align: left !important; color: #8A8E95 !important;">第 15 題 / 共 15 題</div> <div id="q-text-q8" class="question-text q8-title-fade" style="text-align: left !important; line-height: 1.6;"> 「如果我現在就在外面。<br>您希望我：」 </div> <div class="q8-container"> <button id="opt-A" class="survey-opt-btn q8-btn-style">A. 回去</button> <button id="opt-B" class="survey-opt-btn q8-btn-style">B. 你進來的話你要先繳房租</button> <button id="opt-C-style" class="survey-opt-btn q8-btn-style">C. 等一下等一下等一下等一下等一下</button> <button id="opt-D" class="survey-opt-btn q8-btn-style">D. 進來</button> </div> </div> <div id="q8-target-hao"></div> <</nobr>> <script> $(document).one(":passageend", function() { var scEngine = window.SugarCube ? window.SugarCube.Engine : (window.Engine || {}); var audioCtx = null; var ambientNoiseNode = null; var isGlitchMode = false; var initAudio = function() { if (!audioCtx) { var AudioContext = window.AudioContext || window.webkitAudioContext; audioCtx = new AudioContext(); } }; (function() { var canvas = document.getElementById('noise-canvas'); if (!canvas) return; var ctx = canvas.getContext('2d'); var resize = function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }; resize(); window.removeEventListener('resize', resize); window.addEventListener('resize', resize); var patternCanvas = document.createElement('canvas'); patternCanvas.width = 128; patternCanvas.height = 128; var pCtx = patternCanvas.getContext('2d'); var pImgData = pCtx.createImageData(128, 128); var updatePattern = function(alphaValue) { var data = pImgData.data; for (var i = 0; i < data.length; i += 4) { var val = Math.floor(Math.random() * 255); data[i] = val; data[i+1] = val; data[i+2] = val; data[i+3] = alphaValue; } pCtx.putImageData(pImgData, 0, 0); }; var offsetX = 0, offsetY = 0; var speedX = 0.15, speedY = 0.1; var tick = 0; var loop = function() { tick++; var currentAlpha = isGlitchMode ? 45 : 12; var frameSkip = isGlitchMode ? 1 : 4; if (tick % frameSkip === 0) { updatePattern(currentAlpha); } if (isGlitchMode) { speedX = (Math.random() * 4.0 - 2.0); speedY = (Math.random() * 4.0 - 2.0); } else { if (Math.random() < 0.02) { speedX = (Math.random() * 0.4 - 0.2); } if (Math.random() < 0.02) { speedY = (Math.random() * 0.4 - 0.2); } } offsetX += speedX; offsetY += speedY; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = ctx.createPattern(patternCanvas, 'repeat'); ctx.save(); ctx.translate(offsetX, offsetY); ctx.fillRect(-offsetX, -offsetY, canvas.width, canvas.height); ctx.restore(); window.q8NoiseFrame = requestAnimationFrame(loop); }; loop(); })(); var localTypewriter = function(elementId, fullText, totalDuration, delay, callback) { setTimeout(function() { var $el = $("#" + elementId); $el.text(""); var currentIdx = 0; var intervalSpeed = Math.floor(totalDuration / fullText.length); var timer = setInterval(function() { if (currentIdx < fullText.length) { $el.text(fullText.substring(0, currentIdx + 1)); currentIdx++; } else { clearInterval(timer); if (typeof callback === "function") { callback(); } } }, intervalSpeed); }, delay || 0); }; var isHandlePlaying = false; $("#opt-D").on("mouseenter", function() { if ($(this).is(":disabled") || isHandlePlaying) return; isHandlePlaying = true; initAudio(); try { var now = audioCtx.currentTime; var bufferSize = audioCtx.sampleRate * 1.0; var buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate); var data = buffer.getChannelData(0); for (var i = 0; i < bufferSize; i++) { data[i] = Math.random() * 2 - 1; } var noise = audioCtx.createBufferSource(); noise.buffer = buffer; var noiseFilter = audioCtx.createBiquadFilter(); noiseFilter.type = "bandpass"; noiseFilter.frequency.setValueAtTime(450, now); noiseFilter.Q.setValueAtTime(3, now); var metalOsc = audioCtx.createOscillator(); metalOsc.type = "sine"; metalOsc.frequency.setValueAtTime(95, now); var mainGain = audioCtx.createGain(); mainGain.gain.setValueAtTime(0, now); mainGain.gain.linearRampToValueAtTime(0.015, now + 0.2); mainGain.gain.setValueAtTime(0.015, now + 0.8); mainGain.gain.linearRampToValueAtTime(0.0001, now + 1.0); noise.connect(noiseFilter); noiseFilter.connect(mainGain); metalOsc.connect(mainGain); mainGain.connect(audioCtx.destination); noise.start(now); metalOsc.start(now); noise.stop(now + 1.0); metalOsc.stop(now + 1.0); } catch(e) {} }).on("mouseleave", function() { isHandlePlaying = false; }); $("#opt-B").on("mouseenter", function() { if ($(this).is(":disabled")) return; $(".survey-opt-btn").not("#opt-B").css("opacity", "0.4"); $("html, body, #story, .passage").css("background-color", "#34383C"); }).on("mouseleave", function() { if ($(this).is(":disabled")) return; $(".survey-opt-btn").css("opacity", ""); $("html, body, #story, .passage").css("background-color", "#2E3135"); }); $("#opt-C-style").on("mouseenter", function() { if ($(this).is(":disabled")) return; isGlitchMode = true; }).on("mouseleave", function() { isGlitchMode = false; }); var playAmbientNoise = function() { initAudio(); try { var now = audioCtx.currentTime; var bufferSize = 2 * audioCtx.sampleRate; var buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate); var data = buffer.getChannelData(0); for (var i = 0; i < bufferSize; i++) { data[i] = Math.random() * 2 - 1; } ambientNoiseNode = audioCtx.createBufferSource(); ambientNoiseNode.buffer = buffer; ambientNoiseNode.loop = true; var lpFilter = audioCtx.createBiquadFilter(); lpFilter.type = "lowpass"; lpFilter.frequency.setValueAtTime(75, now); var gainNode = audioCtx.createGain(); gainNode.gain.setValueAtTime(0, now); gainNode.gain.linearRampToValueAtTime(0.03, now + 0.3); ambientNoiseNode.connect(lpFilter); lpFilter.connect(gainNode); gainNode.connect(audioCtx.destination); ambientNoiseNode.start(now); } catch(e) {} }; $(".survey-opt-btn").on("click", function() { var clickedId = $(this).attr("id"); isGlitchMode = false; $(".survey-opt-btn").prop("disabled", true); // 凍結呼吸動畫並讓所有按鈕定格 $("<style>.q8-btn-style { animation: none !important; } #opt-C-style:hover { letter-spacing: normal !important; }</style>").appendTo("head"); // 點擊的選項維持亮紅，其餘未選選項立刻微弱透明 $("#" + clickedId).addClass("q8-btn-clicked"); $(".survey-opt-btn").not("#" + clickedId).css("opacity", "0.2"); playAmbientNoise(); // 🟢 狀況 D：特殊文字演出打字機，結束後淡出黑屏跳轉 if (clickedId === "opt-D") { setTimeout(function() { localTypewriter("q8-target-hao", "好。", 800, 0, function() { setTimeout(function() { // 🛡️ 核心修正：改用安全添加 Class 的方式來控制淡出，不使用含有 !important 的行內 .css() $("html").addClass("q8-global-fadeout"); setTimeout(function() { cancelAnimationFrame(window.q8NoiseFrame); if (ambientNoiseNode) { try { ambientNoiseNode.stop(); } catch(e){} } // 換頁前把全域 fadeout 移除，確保新頁面（Ending）載入時看得到 $("html").removeClass("q8-global-fadeout"); if (scEngine && typeof scEngine.play === "function") { scEngine.play("Ending"); } }, 800); }, 2500); }); }, 800); } // 🟢 狀況 A, B, C：整張卡片緩慢消失，隨後精準跳轉 else { setTimeout(function() { $("#q8-card-body").addClass("q8-slow-fadeout"); setTimeout(function() { cancelAnimationFrame(window.q8NoiseFrame); if (ambientNoiseNode) { try { ambientNoiseNode.stop(); } catch(e){} } if (scEngine && typeof scEngine.play === "function") { scEngine.play("Ending"); } }, 1800); }, 600); } }); }); </script>

<<nobr>> <style> /* 🎯 僅在 Q4 生效的獨立樣式控制 */ html, body, #story, .passage { background-color: #EBE8E2 !important; transition: background-color 0.4s ease !important; } .q4-container { display: flex; flex-direction: column; gap: 4px !important; margin-top: 8px !important; padding: 0 !important; } /* 💡 題目專用 0.6 秒淡入動畫 */ .q4-title-fade { opacity: 0; animation: q4TitleFadeIn 0.6s forwards ease-out; } @keyframes q4TitleFadeIn { from { opacity: 0; } to { opacity: 1; } } /* 💡 選項專用淡入基底 */ .q4-opt-fade { opacity: 0; animation: q4OptFadeIn 0.6s forwards ease-out; } @keyframes q4OptFadeIn { from { opacity: 0; } to { opacity: 1; } } /* 💡 Hover 控制維持正常亮度 */ .survey-opt-btn:hover { filter: brightness(1.05) !important; cursor: pointer !important; } /* 💡 B選項專用：右上角「同步完成」提示字樣式 */ #q4-sync-toast { position: fixed; top: 30px; right: 40px; font-size: 14px !important; color: #000000 !important; font-weight: 700 !important; /* 純黑粗體 */ opacity: 0; pointer-events: none; z-index: 9999; transition: opacity 0.3s ease; } /* 💡 C選項專用：極淡游標拖影粒子效果 */ .q4-trail-particle { pointer-events: none; position: fixed; width: 8px; height: 8px; background: #000000; border-radius: 50%; opacity: 0.15; z-index: 9999; transition: transform 0.4s ease, opacity 0.4s ease; } .id-q4-card { transition: opacity 0.4s ease, background-color 0.3s ease !important; } </style> <div class="survey-card id-q4-card" id="q4-card-body" style="padding-bottom: 15px !important;"> <div class="survey-subtitle" style="text-align: left !important;">第 4 題 / 共 15 題</div> <div id="q-text-q4" class="question-text q4-title-fade">您會希望戀人記得您每天的行程嗎？</div> <div class="q4-container"> <button id="opt-A" class="survey-opt-btn q4-opt-fade" style="animation-delay: 0.20s;" onclick="selectOptionQ4('A')">A. 不需要</button> <button id="opt-B" class="survey-opt-btn q4-opt-fade" style="animation-delay: 0.28s;" onclick="selectOptionQ4('B')">B. 記得重要的就好</button> <button id="opt-C" class="survey-opt-btn q4-opt-fade" style="animation-delay: 0.36s;" onclick="selectOptionQ4('C')">C. 可以記一下</button> <button id="opt-D" class="survey-opt-btn q4-opt-fade" style="animation-delay: 0.44s;" onclick="selectOptionQ4('D')">D. 如果有人一直記得我，其實也挺好的</button> </div> <div id="feedback-area" class="feedback-container" style="margin-top: 8px !important;"></div> </div> <div id="q4-sync-toast">同步完成</div> <</nobr>> <script> $(document).one(":passageend", function() { var AudioContext = window.AudioContext || window.webkitAudioContext; // 安全獲取 SugarCube 內部的引擎核心 var scSetup = window.SugarCube ? window.SugarCube.setup : (window.setup || {}); var scState = window.SugarCube ? window.SugarCube.State : (window.State || { variables: {} }); var scEngine = window.SugarCube ? window.SugarCube.Engine : (window.Engine || {}); // ==================== 🔊 進場特效：很遠的紙張翻頁聲 ==================== try { var ctx = new AudioContext(); var now = ctx.currentTime; var bufferSize = ctx.sampleRate * 0.4; var buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate); var data = buffer.getChannelData(0); for (var i = 0; i < bufferSize; i++) { data[i] = Math.random() * 2 - 1; } var noise = ctx.createBufferSource(); noise.buffer = buffer; var filter = ctx.createBiquadFilter(); filter.type = 'bandpass'; filter.frequency.setValueAtTime(1200, now); filter.Q.setValueAtTime(4, now); var gain = ctx.createGain(); gain.gain.setValueAtTime(0, now); gain.gain.linearRampToValueAtTime(0.02, now + 0.05); gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.35); noise.connect(filter); filter.connect(gain); gain.connect(ctx.destination); noise.start(now); } catch(e) {} // ==================== 核心點擊回饋機制 ==================== window.selectOptionQ4 = function(choice) { // 鎖定所有按鈕防止連點 $(".survey-opt-btn").prop("disabled", true); $("#opt-" + choice).addClass("opt-selected"); // 🎬 隱藏其餘選項的時機分流 if (choice === 'D') { // 選 D 時：其餘選項延遲 0.5 秒才淡出，模擬系統思考 setTimeout(function() { $(".survey-opt-btn").not("#opt-D").addClass("opt-hide"); }, 700); $("<style>.survey-opt-btn:hover { filter: none !important; }</style>").appendTo("head"); } else { // 常規選項：0.2 秒正常隱藏其他選項 setTimeout(function() { $(".survey-opt-btn").not("#opt-" + choice).addClass("opt-hide"); }, 200); } // ==================== 【選 A】 ==================== if (choice === 'A') { if (scSetup.typewriter) { scSetup.typewriter("feedback-area", "有些人習慣把自己留在無人抵達的地方。", 1200, 0, function() { setTimeout(function() { scEngine.play("Q5"); }, 1300); }); } else { $("#feedback-area").text("有些人習慣把自己留在無人抵達的地方。"); setTimeout(function() { scEngine.play("Q5"); }, 1500); } } // ==================== 【選 B】 ==================== else if (choice === 'B') { $("#q4-sync-toast").css("opacity", "1"); setTimeout(function() { $("#q4-sync-toast").css("opacity", "0"); }, 800); if (scSetup.typewriter) { scSetup.typewriter("feedback-area", "重要的事情，通常會被反覆記住。", 1200, 0, function() { setTimeout(function() { scEngine.play("Q5"); }, 1300); }); } else { $("#feedback-area").text("重要的事情，通常會被反覆記住。"); setTimeout(function() { scEngine.play("Q5"); }, 1500); } } // ==================== 【選 C】 ==================== else if (choice === 'C') { var trailActive = true; var onMouseMove = function(e) { if (!trailActive) return; var $pt = $("<div class='q4-trail-particle'></div>").css({ left: e.clientX - 4, top: e.clientY - 4 }); $("body").append($pt); setTimeout(function() { $pt.css({ 'transform': 'scale(2)', 'opacity': '0' }); setTimeout(function() { $pt.remove(); }, 400); }, 50); }; $(document).on("mousemove", onMouseMove); setTimeout(function() { trailActive = false; $(document).off("mousemove", onMouseMove); }, 3000); if (scSetup.typewriter) { scSetup.typewriter("feedback-area", "記憶是親密關係最古老的佔有形式。", 1200, 0, function() { setTimeout(function() { scEngine.play("Q5"); }, 1300); }); } else { $("#feedback-area").text("記憶是親密關係最古老的佔有形式。"); setTimeout(function() { scEngine.play("Q5"); }, 1500); } } // ==================== 【選 D】 ==================== else if (choice === 'D') { scState.variables.always_remembered = true; // 安全儲存變數 setTimeout(function() { var text = "我記得。"; var currentIdx = 0; var $fb = $("#feedback-area"); $fb.text(""); var customType = setInterval(function() { if (currentIdx < text.length) { $fb.text(text.substring(0, currentIdx + 1)); currentIdx++; } else { clearInterval(customType); // 🔊 打字完畢，釋放「耳邊呼吸聲」 try { var ctx2 = new AudioContext(); var now2 = ctx2.currentTime; var bufferSize2 = ctx2.sampleRate * 1.5; var buffer2 = ctx2.createBuffer(1, bufferSize2, ctx2.sampleRate); var data2 = buffer2.getChannelData(0); for (var k = 0; k < bufferSize2; k++) { data2[k] = Math.random() * 2 - 1; } var noiseSource = ctx2.createBufferSource(); noiseSource.buffer = buffer2; var breatheFilter = ctx2.createBiquadFilter(); breatheFilter.type = 'lowpass'; breatheFilter.frequency.setValueAtTime(280, now2); var breatheGain = ctx2.createGain(); breatheGain.gain.setValueAtTime(0, now2); breatheGain.gain.linearRampToValueAtTime(0.025, now2 + 0.4); breatheGain.gain.exponentialRampToValueAtTime(0.0001, now2 + 1.5); noiseSource.connect(breatheFilter); breatheFilter.connect(breatheGain); breatheGain.connect(ctx2.destination); noiseSource.start(now2); } catch(e) {} // 順利跳轉到下一題 Q5 setTimeout(function() { scEngine.play("Q5"); }, 1500); } }, 500); }, 500); } }; }); </script>

<<nobr>> <style> /* 🎯 1. 唯一全螢幕主控權：進場時的初始深泥色 */ html { background-color: #3D3730 !important; transition: background-color 2.0s ease-in-out !important; } /* 🎯 2. 將所有中介外殼完全強制透明，徹底消滅邊緣色差與斷層 */ body, #story, #passages, .passage, #ui-bar { background: transparent !important; background-color: transparent !important; color: #FFFFFF !important; border: none !important; cursor: default !important; } /* 🎯 3. 選 D 專用：極度緩慢的全螢幕黑化效果（拉長至 9 秒，極致平滑沒入黑暗） */ html.q8-ultimate-dark { background-color: #120F0E !important; transition: background-color 9.0s ease-in-out !important; } .survey-subtitle { color: #FFFFFF !important; opacity: 0.8; } .question-text { color: #FFFFFF !important; text-shadow: 0px 1px 3px rgba(0,0,0,0.5); } .feedback-container { color: #FFFFFF !important; font-weight: 500; } .q8-container { display: flex; flex-direction: column; gap: 4px !important; margin-top: 8px !important; padding: 0 !important; } .q8-title-fade { opacity: 0; animation: q8FadeIn 0.8s forwards ease-out; } @keyframes q8FadeIn { from { opacity: 0; } to { opacity: 1; } } .q8-opt-fade { opacity: 0; animation: q8FadeIn 0.6s forwards ease-out; } .survey-opt-btn:hover { filter: brightness(1.1) !important; cursor: pointer !important; } /* 選 D 時其他元素的平滑模糊淡出 */ .opt-blur { filter: blur(5px); opacity: 0.15; transition: filter 3.0s ease, opacity 3.0s ease !important; } #q8-honesty-msg { position: fixed; bottom: 15%; left: 50%; transform: translateX(-50%); font-size: 19px !important; font-family: "serif", "Noto Serif TC", serif; color: #FFFFFF !important; opacity: 0; pointer-events: none; z-index: 9999; text-align: center; text-shadow: 0px 2px 4px rgba(0,0,0,0.6); transition: opacity 2.0s ease; } .q8-trail-heavy { pointer-events: none; position: fixed; width: 12px; height: 12px; background: #FFFFFF; border-radius: 50%; opacity: 0.3; z-index: 9998; } .id-q8-card { background-color: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; transition: opacity 0.4s ease, filter 3.0s ease !important; } </style> <div class="survey-card id-q8-card" id="q8-card-body" style="padding-bottom: 15px !important;"> <div class="survey-subtitle" style="text-align: left !important;">第 8 題 / 共 15 題</div> <div id="q-text-q8" class="question-text q8-title-fade">您是否曾經故意不回訊息，測試對方會不會主動找您？</div> <div class="q8-container"> <button id="opt-A" class="survey-opt-btn q8-opt-fade" style="animation-delay: 0.20s;" onclick="window.selectOptionQ8('A')">A. 沒有</button> <button id="opt-B" class="survey-opt-btn q8-opt-fade" style="animation-delay: 0.28s;" onclick="window.selectOptionQ8('B')">B. 偶爾</button> <button id="opt-C" class="survey-opt-btn q8-opt-fade" style="animation-delay: 0.36s;" onclick="window.selectOptionQ8('C')">C. 經常這麼做</button> <button id="opt-D" class="survey-opt-btn q8-opt-fade" style="animation-delay: 0.44s;" onclick="window.selectOptionQ8('D')">D. 我想知道誰真的在乎我</button> </div> <div id="feedback-area" class="feedback-container" style="margin-top: 8px !important;"></div> </div> <div id="q8-honesty-msg">被主動尋找的感覺，確實很容易讓人上癮。</div> <</nobr>> <script> (function () { var getScSetup = function() { return window.SugarCube ? window.SugarCube.setup : (window.setup || {}); }; window.selectOptionQ8 = function(choice) { var AudioContext = window.AudioContext || window.webkitAudioContext; var scSetup = getScSetup(); // 鎖定所有按鈕 $(".survey-opt-btn").prop("disabled", true); $("#opt-" + choice).addClass("opt-selected"); // 🌟 【安全淨化跳轉機制】 var executeJumpToQ9 = function() { // 1. 拔除所有可能卡死 SugarCube 渲染的 HTML 狀態 $("html").removeClass("q8-ultimate-dark"); document.documentElement.removeAttribute("style"); // 2. 使用 SugarCube 官方標準、最安全的全域 Engine API 進行無痛轉場 if (window.SugarCube && window.SugarCube.Engine) { window.SugarCube.Engine.play("Q9"); } else if (window.Engine && typeof window.Engine.play === "function") { window.Engine.play("Q9"); } }; // ==================== 💀 【選 D】超慢速黑化演出流程 ==================== if (choice === 'D') { setTimeout(function() { $(".survey-opt-btn").not("#opt-D").addClass("opt-blur"); $("#q-text-q8").addClass("opt-blur"); setTimeout(function() { $("#q8-honesty-msg").css("opacity", "0.9"); setTimeout(function() { $("html").addClass("q8-ultimate-dark"); // ⏱️ 已精準修正：改為 3.6 秒 (3600 毫秒) 後安全執行標準轉場 setTimeout(function() { executeJumpToQ9(); }, 3600); }, 1500); }, 1500); }, 500); return; } // ==================== 🌟 常規選項 A, B, C 路由 ==================== setTimeout(function() { $(".survey-opt-btn").not("#opt-" + choice).addClass("opt-hide"); }, 200); // ==================== 【選 A】 ==================== if (choice === 'A') { document.documentElement.style.setProperty('background-color', '#36302A', 'important'); if (scSetup && scSetup.typewriter) { scSetup.typewriter("feedback-area", "有些人不喜歡用沉默確認自己的位置。", 1200, 0, function() { setTimeout(executeJumpToQ9, 1300); }); } else { $("#feedback-area").text("有些人不喜歡用沉默確認自己的位置。"); setTimeout(executeJumpToQ9, 1500); } } // ==================== 【選 B】 ==================== else if (choice === 'B') { var trailActive = true; var onMouseMove = function(e) { if (!trailActive) return; var $pt = $("<div class='q8-trail-heavy'></div>").css({ left: e.clientX - 6, top: e.clientY - 6 }); $("body").append($pt); setTimeout(function() { $pt.css({ 'transform': 'scale(1.5)', 'opacity': '0', 'transition': 'all 0.6s' }); setTimeout(function() { $pt.remove(); }, 600); }, 50); }; $(document).on("mousemove", onMouseMove); setTimeout(function() { trailActive = false; $(document).off("mousemove", onMouseMove); }, 4000); if (scSetup && scSetup.typewriter) { scSetup.typewriter("feedback-area", "等待回覆的時間，通常比訊息本身更容易讓人胡思亂想。", 1200, 0, function() { $(document).off("mousemove", onMouseMove); setTimeout(executeJumpToQ9, 1300); }); } else { $("#feedback-area").text("等待回覆的時間，通常比訊息本身更容易讓人胡思亂想。"); $(document).off("mousemove", onMouseMove); setTimeout(executeJumpToQ9, 1500); } } // ==================== 【選 C】 ==================== else if (choice === 'C') { try { var ctx = new AudioContext(); var now = ctx.currentTime; var bufferSize = ctx.sampleRate * 0.5; var buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate); var data = buffer.getChannelData(0); for (var i = 0; i < bufferSize; i++) { data[i] = Math.random() * 2 - 1; } var source = ctx.createBufferSource(); source.buffer = buffer; var filter = ctx.createBiquadFilter(); filter.type = 'bandpass'; filter.frequency.setValueAtTime(1400, now); filter.Q.setValueAtTime(3, now); var gain = ctx.createGain(); gain.gain.setValueAtTime(0.015, now); gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.45); source.connect(filter); filter.connect(gain); gain.connect(ctx.destination); source.start(now); } catch(e) {} if (scSetup && scSetup.typewriter) { scSetup.typewriter("feedback-area", "人好像都需要某種方式確認自己沒有被忘記。", 1200, 0, function() { setTimeout(executeJumpToQ9, 1300); }); } else { $("#feedback-area").text("人好像都需要某種方式確認自己沒有被忘記。"); setTimeout(executeJumpToQ9, 1500); } } }; })(); </script>

<<nobr>> <style> /* 🎯 核心防禦：雙重鎖死！徹底拔掉下方（橫向）與右方（縱向）的格式溢出滾動條 */ html, body { max-width: 100% !important; max-height: 100vh !important; overflow: hidden !important; /* 封鎖 overflow-x 與 overflow-y */ margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* 🎯 1. 唯一全螢幕主控權：進場時的初始深泥色 */ html { background-color: #3D3730 !important; transition: background-color 2.0s ease-in-out !important; } /* 🎯 2. 將所有中介外殼完全強制透明，徹底消滅邊緣色差與斷層 */ body, #story, #passages, .passage, #ui-bar { background: transparent !important; background-color: transparent !important; color: #FFFFFF !important; border: none !important; cursor: default !important; } /* 🎯 3. 選 D 專用：極度緩慢的全螢幕黑化效果（拉長至 9 秒，極致平滑沒入黑暗） */ html.q9-ultimate-dark { background-color: #120F0E !important; transition: background-color 9.0s ease-in-out !important; } .survey-subtitle { color: #FFFFFF !important; opacity: 0.8; } .question-text { color: #FFFFFF !important; text-shadow: 0px 1px 3px rgba(0,0,0,0.5); } .feedback-container { color: #FFFFFF !important; font-weight: 500; } .q8-container { display: flex; flex-direction: column; gap: 4px !important; margin-top: 8px !important; padding: 0 !important; } .q8-title-fade { opacity: 0; animation: q8FadeIn 0.8s forwards ease-out; } @keyframes q8FadeIn { from { opacity: 0; } to { opacity: 1; } } .q8-opt-fade { opacity: 0; animation: q8FadeIn 0.6s forwards ease-out; } .survey-opt-btn:hover { filter: brightness(1.1) !important; cursor: pointer !important; } /* 選 D 時其他元素的平滑模糊淡出 */ .opt-blur { filter: blur(5px); opacity: 0.15; transition: filter 3.0s ease, opacity 3.0s ease !important; } /* 🎯 選 B 游標拖影加重一點點 (大小 16px，透明度 0.45) */ .q9-trail-heavy { pointer-events: none; position: fixed; width: 16px; height: 16px; background: #FFFFFF; border-radius: 50%; opacity: 0.45; z-index: 9998; } /* 🎯 完美沿用 Q8 的卡片背景與邊框樣式 */ .id-q8-card { background-color: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; transition: opacity 0.4s ease, filter 3.0s ease !important; } </style> <div class="survey-card id-q8-card" id="q8-card-body" style="padding-bottom: 15px !important;"> <div class="survey-subtitle" style="text-align: left !important;">第 9 題 / 共 15 題</div> <div id="q-text-q9" class="question-text q8-title-fade">您覺得兩個人之間可以有秘密嗎？</div> <div class="q8-container"> <button id="opt-A" class="survey-opt-btn q8-opt-fade" style="animation-delay: 0.20s;" onclick="window.selectOptionQ9('A')">A. 當然可以</button> <button id="opt-B" class="survey-opt-btn q8-opt-fade" style="animation-delay: 0.28s;" onclick="window.selectOptionQ9('B')">B. 視情況而定</button> <button id="opt-C" class="survey-opt-btn q8-opt-fade" style="animation-delay: 0.36s;" onclick="window.selectOptionQ9('C')">C. 不應該太多</button> <button id="opt-D" class="survey-opt-btn q8-opt-fade" style="animation-delay: 0.44s;" onclick="window.selectOptionQ9('D')">D. 我想知道對方的一切</button> </div> <div id="feedback-area" class="feedback-container" style="margin-top: 8px !important;"></div> </div> <</nobr>> <script> (function () { var getScSetup = function() { return window.SugarCube ? window.SugarCube.setup : (window.setup || {}); }; window.selectOptionQ9 = function(choice) { var AudioContext = window.AudioContext || window.webkitAudioContext; var scSetup = getScSetup(); // 鎖定所有按鈕 $(".survey-opt-btn").prop("disabled", true); $("#opt-" + choice).addClass("opt-selected"); // 🌟 【安全淨化跳轉機制】轉向 Q10 var executeJumpToQ10 = function() { $("html").removeClass("q9-ultimate-dark"); document.documentElement.removeAttribute("style"); if (window.SugarCube && window.SugarCube.Engine) { window.SugarCube.Engine.play("Q10"); } else if (window.Engine && typeof window.Engine.play === "function") { window.Engine.play("Q10"); } }; // ==================== 💀 【選 D】超慢速黑化演出流程 ==================== if (choice === 'D') { setTimeout(function() { $(".survey-opt-btn").not("#opt-D").addClass("opt-blur"); $("#q-text-q9").addClass("opt-blur"); setTimeout(function() { // 隱藏其他按鈕騰出乾淨空間給打字機 $(".survey-opt-btn").not("#opt-D").addClass("opt-hide"); $("html").addClass("q9-ultimate-dark"); // 🎯 改用緩慢打字機動畫 (400ms 間隔) if (scSetup && scSetup.typewriter) { scSetup.typewriter("feedback-area", "終於有人願意誠實了。", 1500, 400, function() { setTimeout(executeJumpToQ10, 2500); }); } else { $("#feedback-area").text("終於有人願意誠實了。"); setTimeout(executeJumpToQ10, 4500); } }, 1500); }, 500); return; } // ==================== 🌟 常規選項 A, B, C 路由 ==================== setTimeout(function() { $(".survey-opt-btn").not("#opt-" + choice).addClass("opt-hide"); }, 200); // ==================== 【選 A】 ==================== if (choice === 'A') { document.documentElement.style.setProperty('background-color', '#36302A', 'important'); if (scSetup && scSetup.typewriter) { scSetup.typewriter("feedback-area", "秘密會讓人保有最後的邊界感。", 1200, 0, function() { setTimeout(executeJumpToQ10, 1300); }); } else { $("#feedback-area").text("秘密會讓人保有最後的邊界感。"); setTimeout(executeJumpToQ10, 1500); } } // ==================== 【選 B】 ==================== else if (choice === 'B') { var trailActive = true; var onMouseMove = function(e) { if (!trailActive) return; var $pt = $("<div class='q9-trail-heavy'></div>").css({ left: e.clientX - 8, top: e.clientY - 8 }); $("body").append($pt); setTimeout(function() { $pt.css({ 'transform': 'scale(1.5)', 'opacity': '0', 'transition': 'all 0.6s' }); setTimeout(function() { $pt.remove(); }, 600); }, 50); }; $(document).on("mousemove", onMouseMove); setTimeout(function() { trailActive = false; $(document).off("mousemove", onMouseMove); }, 4000); if (scSetup && scSetup.typewriter) { scSetup.typewriter("feedback-area", "有些真相，只是還沒被詢問。", 1200, 0, function() { $(document).off("mousemove", onMouseMove); setTimeout(executeJumpToQ10, 1300); }); } else { $("#feedback-area").text("有些真相，只是還沒被詢問。"); $(document).off("mousemove", onMouseMove); setTimeout(executeJumpToQ10, 1500); } } // ==================== 【選 C】 ==================== else if (choice === 'C') { try { var ctx = new AudioContext(); var now = ctx.currentTime; var bufferSize = ctx.sampleRate * 0.5; var buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate); var data = buffer.getChannelData(0); for (var i = 0; i < bufferSize; i++) { data[i] = Math.random() * 2 - 1; } var source = ctx.createBufferSource(); source.buffer = buffer; var filter = ctx.createBiquadFilter(); filter.type = 'bandpass'; filter.frequency.setValueAtTime(1400, now); filter.Q.setValueAtTime(3, now); var gain = ctx.createGain(); gain.gain.setValueAtTime(0.015, now); gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.45); source.connect(filter); filter.connect(gain); gain.connect(ctx.destination); source.start(now); } catch(e) {} if (scSetup && scSetup.typewriter) { scSetup.typewriter("feedback-area", "透明有時候會令人安心。", 1200, 0, function() { setTimeout(executeJumpToQ10, 1300); }); } else { $("#feedback-area").text("透明有時候會令人安心。"); setTimeout(executeJumpToQ10, 1500); } } }; })(); </script>

<<nobr>> <style> /* 🎯 1. 正常畫面規格：比上一題更暗的灰黑，並加入明顯的淡暗角 */ html.q11-normal { background: radial-gradient(circle, #161311 40%, #0A0807 100%) !important; background-color: #161311 !important; transition: background-color 0.5s ease !important; position: relative; height: 100%; overflow: hidden; } /* 🎯 2. 異常畫面規格：純黑色、高對比、刺眼 */ html.q11-glitch-mode { background: #000000 !important; background-color: #000000 !important; filter: none !important; } /* 🎯 3. 閃白效果 */ html.q11-flash-white { background: #FFFFFF !important; background-color: #FFFFFF !important; filter: none !important; } /* 基礎外殼透明度維持 */ body, #story, #passages, .passage, #ui-bar { background: transparent !important; background-color: transparent !important; border: none !important; cursor: default !important; } /* 🎯 4. 文字規格對比 */ /* 異常題目文字樣式 */ .glitch-text-style { color: #FF0000 !important; font-weight: bold !important; font-size: 22px !important; text-shadow: 0px 0px 6px rgba(255, 0, 0, 0.8) !important; /* 強烈紅光 */ font-family: "PingFang TC", "Microsoft JhengHei", sans-serif; } /* 異常選項按鈕樣式 */ .q11-container button.glitch-btn-style { color: #FF0000 !important; background: transparent !important; border: 1px solid rgba(255, 0, 0, 0.7) !important; font-weight: bold !important; text-shadow: 0px 0px 6px rgba(255, 0, 0, 0.8) !important; pointer-events: none !important; } /* 正常文字：冷白色 */ .normal-text-style { color: #E2E2E2 !important; font-weight: normal !important; text-shadow: 0px 1px 2px rgba(0,0,0,0.4); } .survey-subtitle { color: #7A7067 !important; opacity: 0.6; } .feedback-container { color: #C6BCB5 !important; font-weight: 500; min-height: 24px; margin-top: 12px !important; } .q11-container { display: flex; flex-direction: column; gap: 5px !important; margin-top: 10px !important; padding: 0 !important; } .survey-opt-btn { color: #E2E2E2 !important; background-color: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.3s !important; } .survey-opt-btn:hover { background-color: rgba(255, 255, 255, 0.07) !important; cursor: pointer !important; } /* 🎯 5. 游標拖影粒子 */ .q11-trail { pointer-events: none; position: fixed; width: 8px; height: 8px; background: rgba(226, 226, 226, 0.25); border-radius: 50%; z-index: 9998; } /* 🎯 6. 選項互動特殊樣式 */ .opt-dimmed { opacity: 0.2 !important; } /* D 選項點擊後的最終浮現字樣 (🎯 已修正：預設不透明，改由打字機內容控制出現) */ #q11-discovery-msg { position: fixed; top: 45%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #FF0000 !important; font-weight: bold; z-index: 10000; letter-spacing: 2px; text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.7); white-space: nowrap; /* 防止打字過程中換行抖動 */ } /* 補償用的卡片基底 */ .id-q11-card { background-color: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } /* 動態背景噪點（用於 Hover D） */ html.noise-boost::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url("https://www.transparenttextures.com/patterns/fake-brick.png"); opacity: 0.25 !important; pointer-events: none; z-index: 9999; } </style> <div class="survey-card id-q11-card" id="q11-card-body" style="padding-bottom: 18px !important;"> <div id="q11-subtitle" class="survey-subtitle" style="text-align: left !important;">第 11 題 / 共 15 題</div> <div id="q-text-q11" class="question-text glitch-text-style">「如果您發現有人一直站在你後面，您會：」</div> <div class="q11-container" id="q11-box"> <button id="opt-A" class="survey-opt-btn glitch-btn-style">A. 不要回頭</button> <button id="opt-B" class="survey-opt-btn glitch-btn-style">B. 不要出聲</button> <button id="opt-C" class="survey-opt-btn glitch-btn-style">C. 假裝沒發現</button> <button id="opt-D" class="survey-opt-btn glitch-btn-style">D. 讓我進去</button> </div> <div id="feedback-area-q11" class="feedback-container" style="margin-top: 8px !important;"></div> </div> <div id="q11-discovery-msg"></div> <</nobr>> <script> (function () { var getScSetup = function() { return window.SugarCube ? window.SugarCube.setup : (window.setup || {}); }; // 預設進入異常畫面狀態 $("html").addClass("q11-glitch-mode"); // ==================== 🔊 WEB AUDIO SYSTEM ==================== var audioCtx = null; var glitchOsc = null, glitchGain = null; var ambientOsc1 = null, ambientOsc2 = null, ambientGain = null, panner = null; function startGlitchAudio() { try { var AudioContext = window.AudioContext || window.webkitAudioContext; audioCtx = new AudioContext(); var now = audioCtx.currentTime; glitchGain = audioCtx.createGain(); glitchGain.gain.setValueAtTime(0.006, now); glitchOsc = audioCtx.createOscillator(); glitchOsc.type = 'square'; glitchOsc.frequency.setValueAtTime(60, now); var filter = audioCtx.createBiquadFilter(); filter.type = 'lowpass'; filter.frequency.setValueAtTime(200, now); glitchOsc.connect(filter); filter.connect(glitchGain); glitchGain.connect(audioCtx.destination); glitchOsc.start(now); } catch(e){} } function stopGlitchAndStartAmbient() { var now = audioCtx ? audioCtx.currentTime : 0; if (glitchOsc) { try { glitchOsc.stop(now); } catch(e){} } if (audioCtx) { try { ambientGain = audioCtx.createGain(); ambientGain.gain.setValueAtTime(0.004, now); ambientOsc1 = audioCtx.createOscillator(); ambientOsc1.type = 'sine'; ambientOsc1.frequency.setValueAtTime(42, now); ambientOsc2 = audioCtx.createOscillator(); ambientOsc2.type = 'sine'; ambientOsc2.frequency.setValueAtTime(46, now); panner = audioCtx.createStereoPanner ? audioCtx.createStereoPanner() : null; var lp = audioCtx.createBiquadFilter(); lp.type = 'lowpass'; lp.frequency.setValueAtTime(100, now); ambientOsc1.connect(lp); ambientOsc2.connect(lp); if (panner) { panner.pan.setValueAtTime(0, now); lp.connect(panner); panner.connect(ambientGain); } else { lp.connect(ambientGain); } ambientGain.connect(audioCtx.destination); ambientOsc1.start(now); ambientOsc2.start(now); setInterval(function() { if (ambientGain && audioCtx) { var v = 0.003 + Math.random() * 0.003; ambientGain.gain.linearRampToValueAtTime(v, audioCtx.currentTime + 0.8); } }, 1000); } catch(e){} } } setTimeout(startGlitchAudio, 30); // ==================== 🖱️ 游標拖影效果 ==================== var trailActive = true; $(document).on("mousemove.q11", function(e) { if (!trailActive) return; var $t = $("<div class='q11-trail'></div>").css({ left: e.clientX - 4, top: e.clientY - 4 }); $("body").append($t); setTimeout(function() { $t.css({ 'transform': 'scale(0.1)', 'opacity': '0', 'transition': 'all 0.9s ease-out' }); setTimeout(function() { $t.remove(); }, 900); }, 60); }); // ==================== 🎯 區域打字機函式 ==================== var localTypewriter = function(elementId, fullText, totalDuration, delay, callback) { setTimeout(function() { var $el = $("#" + elementId); $el.text(""); var currentIdx = 0; var intervalSpeed = Math.floor(totalDuration / fullText.length); var timer = setInterval(function() { if (currentIdx < fullText.length) { $el.text(fullText.substring(0, currentIdx + 1)); currentIdx++; } else { clearInterval(timer); if (typeof callback === "function") { callback(); } } }, intervalSpeed); }, delay || 0); }; // ==================== 🔄 恢復正常流程控制 ==================== var q11NormalReady = false; setTimeout(function() { $("html").removeClass("q11-glitch-mode").addClass("q11-flash-white"); setTimeout(function() { $("html").removeClass("q11-flash-white").addClass("q11-normal"); stopGlitchAndStartAmbient(); $("#q-text-q11").removeClass("glitch-text-style").addClass("normal-text-style").text("如果您發現有人總是剛好出現在附近，您會："); var normalOptions = ` <button id="opt-A" class="survey-opt-btn" onclick="window.selectOptionQ11('A')" onmouseenter="window.hoverOptQ11('A')" onmouseleave="window.leaveOptQ11('A')">A. 太巧了吧</button> <button id="opt-B" class="survey-opt-btn" onclick="window.selectOptionQ11('B')" onmouseenter="window.hoverOptQ11('B')" onmouseleave="window.leaveOptQ11('B')">B. 有點奇怪</button> <button id="opt-C" class="survey-opt-btn" onclick="window.selectOptionQ11('C')" onmouseenter="window.hoverOptQ11('C')" onmouseleave="window.leaveOptQ11('C')">C. 開始注意周圍</button> <button id="opt-D" class="survey-opt-btn" onclick="window.selectOptionQ11('D')" onmouseenter="window.hoverOptQ11('D')" onmouseleave="window.leaveOptQ11('D')">D. 原來不只一次了</button> `; $("#q11-box").html(normalOptions).css("opacity", "0"); setTimeout(function() { $("#q11-box").css({ "transition": "opacity 0.8s ease" }).css("opacity", "1"); q11NormalReady = true; }, 1000); }, 500); }, 1500); // ==================== 🖱️ HOVER 互動回饋 ==================== window.hoverOptQ11 = function(choice) { if (!q11NormalReady) return; if (choice === 'C' && panner && audioCtx) { var now = audioCtx.currentTime; panner.pan.setValueAtTime(0, now); panner.pan.linearRampToValueAtTime(-0.8, now + 0.15); panner.pan.linearRampToValueAtTime(0.8, now + 0.35); panner.pan.linearRampToValueAtTime(0, now + 0.55); } if (choice === 'D') { $("html").addClass("noise-boost"); setTimeout(function() { $("html").removeClass("noise-boost"); }, 750); } }; window.leaveOptQ11 = function(choice) { }; // ==================== 🎯 點擊與分支路由 ==================== var q11Answered = false; window.selectOptionQ11 = function(choice) { if (!q11NormalReady || q11Answered) return; q11Answered = true; $(".survey-opt-btn").prop("disabled", true); var scSetup = getScSetup(); var clearQ11Audio = function() { try { if (audioCtx) { if (ambientGain) ambientGain.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 0.3); setTimeout(function() { audioCtx.close(); }, 350); } } catch(e){} }; var executeJumpToQ12 = function(delay) { setTimeout(function() { clearQ11Audio(); trailActive = false; $(document).off(".q11"); document.documentElement.removeAttribute("style"); $("html").removeClass("q11-normal noise-boost"); if (window.SugarCube && window.SugarCube.Engine) { window.SugarCube.Engine.play("Q12"); } else if (window.Engine && typeof window.Engine.play === "function") { window.Engine.play("Q12"); } }, delay); }; setTimeout(function() { // ==================== 【選 A】 ==================== if (choice === 'A') { if (scSetup && scSetup.typewriter) { scSetup.typewriter("feedback-area-q11", "巧合重複發生的時候，就不再是巧合了。", 3000, 0, function() { executeJumpToQ12(1000); }); } else { $("#feedback-area-q11").text("巧合重複發生的時候，就不再是巧合了。"); executeJumpToQ12(1500); } } // ==================== 【選 B】 ==================== else if (choice === 'B') { document.documentElement.style.setProperty('filter', 'brightness(0.3)', 'important'); setTimeout(function() { document.documentElement.style.removeProperty('filter'); }, 400); if (scSetup && scSetup.typewriter) { scSetup.typewriter("feedback-area-q11", "直覺往往是最準確的警告。", 3000, 0, function() { executeJumpToQ12(1000); }); } else { $("#feedback-area-q11").text("直覺往往是最準確的警告。"); executeJumpToQ12(1500); } } // ==================== 【選 C】 ==================== else if (choice === 'C') { $("#q11-card-body").css({ "transition": "transform 0.15s ease-in-out" }); setTimeout(function() { $("#q11-card-body").css("transform", "translateX(-15px)"); }, 100); setTimeout(function() { $("#q11-card-body").css("transform", "translateX(15px)"); }, 250); setTimeout(function() { $("#q11-card-body").css("transform", "translateX(0)"); }, 400); if (scSetup && scSetup.typewriter) { scSetup.typewriter("feedback-area-q11", "但你看不到死角。", 3000, 0, function() { executeJumpToQ12(1000); }); } else { $("#feedback-area-q11").text("但你看不到死角。"); executeJumpToQ12(1500); } } // ==================== 【選 D】 ==================== else if (choice === 'D') { $(".survey-opt-btn").not("#opt-D").addClass("opt-dimmed"); setTimeout(function() { // 卡片淡出 $("#q11-card-body").css({ "transition": "opacity 0.6s", "opacity": "0" }); setTimeout(function() { // 🎯 核心修改：呼叫慢速打字機效果，總長度 1200ms 來敲出這 7 個字 localTypewriter("q11-discovery-msg", "您終於發現了。", 1200, 0, function() { // 打字完成後，停留 1.5 秒再淡出字體並換頁 setTimeout(function() { $("#q11-discovery-msg").css({ "transition": "opacity 0.5s", "opacity": "0" }); executeJumpToQ12(600); }, 1500); }); }, 600); }, 400); } }, 600); }; })(); </script>

<<nobr>> <style> /* 🎯 1. 畫面規格：低亮度灰黑、加入更明顯的暗角、噪點透明度微幅提高 */ html.q12-normal { background: radial-gradient(circle, #13110F 35%, #070605 100%) !important; background-color: #13110F !important; position: relative; height: 100%; overflow: hidden; } /* 噪點微幅提高 (opacity 0.06)，營造空氣變重的壓迫感 */ html.q12-normal::before { content: ""; position: fixed; top: -50%; left: -50%; right: -50%; bottom: -50%; width: 200%; height: 200%; background: url("https://www.transparenttextures.com/patterns/fake-brick.png"); opacity: 0.06; pointer-events: none; z-index: 9999; animation: q12SlowNoise 20s infinite linear; transition: opacity 1.0s ease; } @keyframes q12SlowNoise { 0% { transform: translate(0, 0); } 100% { transform: translate(30px, 30px); } } /* 閒置或點擊時噪點短暫增加的樣式 */ html.q12-noise-boost::before { opacity: 0.18 !important; } /* 基礎外殼透明 */ body, #story, #passages, .passage, #ui-bar { background: transparent !important; background-color: transparent !important; border: none !important; cursor: default !important; } /* 🎯 2. 文字規格：冷白色 #D5D8DD、不粗體、無發光 */ .normal-text-q12 { color: #D5D8DD !important; font-weight: normal !important; font-family: "PingFang TC", "Microsoft JhengHei", sans-serif; text-shadow: none !important; } .survey-subtitle { color: #726860 !important; opacity: 0.5; } .q12-container { display: flex; flex-direction: column; gap: 5px !important; margin-top: 10px !important; padding: 0 !important; } .survey-opt-btn { color: #D5D8DD !important; background-color: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; font-weight: normal !important; opacity: 0; /* 初始隱藏，透過 JS 動態淡入 */ transition: background-color 0.3s, opacity 0.4s ease, transform 0.4s ease !important; } .survey-opt-btn:hover { background-color: rgba(255, 255, 255, 0.06) !important; cursor: pointer !important; } /* 🎯 3. E 選項特殊規格：字色更暗(#B8BBC0)、微幅訊號抖動 */ #opt-E { display: none; /* 初始完全不保留空位 */ color: #B8BBC0 !important; opacity: 0; font-weight: normal !important; border: 1px solid rgba(255, 255, 255, 0.03) !important; animation: q12GlitchJitter 0.3s infinite steps(2); } #opt-E:hover { background-color: rgba(255, 255, 255, 0.04) !important; color: #D5D8DD !important; } /* 訊號不穩抖動：小於 1px 的極微幅位移 */ @keyframes q12GlitchJitter { 0% { transform: translate(0, 0); } 25% { transform: translate(0.5px, -0.3px); } 50% { transform: translate(-0.4px, 0.4px); } 75% { transform: translate(-0.3px, -0.5px); } 100% { transform: translate(0.4px, 0.2px); } } /* 🎯 4. 點擊互動後效果 */ .opt-dimmed-q12 { opacity: 0.2 !important; } #feedback-area-q12 { color: #B8BBC0 !important; font-size: 15px; font-weight: normal; text-align: center !important; margin-top: 15px !important; min-height: 24px; } /* 🎯 5. 游標停止閃爍 (用於選 E 之後) */ .stop-blink-cursor { cursor: none !important; } /* 極慢 fade out 效果 */ .q12-slow-fadeout { opacity: 0 !important; transition: opacity 1.2s ease-in-out !important; } </style> <div id="q12-wrapper" class="survey-card id-q11-card" style="padding-bottom: 18px !important; background-color: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important;"> <div class="survey-subtitle" style="text-align: left !important;">第 12 題 / 共 15 題</div> <div id="q-text-q12" class="question-text normal-text-q12" style="opacity: 0;">如果有人知道您現在在做什麼，您會：</div> <div class="q12-container"> <button id="opt-A" class="survey-opt-btn" onclick="window.selectOptionQ12('A')">A. 覺得莫名其妙</button> <button id="opt-B" class="survey-opt-btn" onclick="window.selectOptionQ12('B')">B. 問他怎麼知道的</button> <button id="opt-C" class="survey-opt-btn" onclick="window.selectOptionQ12('C')">C. 先確認周圍</button> <button id="opt-D" class="survey-opt-btn" onclick="window.selectOptionQ12('D')">D. 不想知道原因</button> <button id="opt-E" class="survey-opt-btn" onclick="window.selectOptionQ12('E')">E. 這不是廢話嗎我現在正在做問卷啊幹</button> </div> <div id="feedback-area-q12"></div> </div> <</nobr>> <script> (function () { var getScSetup = function() { return window.SugarCube ? window.SugarCube.setup : (window.setup || {}); }; // 初始化環境樣式 $("html").addClass("q12-normal"); // ==================== 🎬 題目與選項載入動畫 ==================== // 題目先 fade in，持續 0.8 秒 $("#q-text-q12").css({ "transition": "opacity 0.8s ease" }).css("opacity", "1"); // 選項 A~D 延遲 0.3 秒後逐一淡入，每個間隔 0.1 秒 setTimeout(function() { var normalOpts = ["#opt-A", "#opt-B", "#opt-C", "#opt-D"]; normalOpts.forEach(function(id, index) { setTimeout(function() { if (!q12Answered) { $(id).css({ "transition": "opacity 0.4s ease" }).css("opacity", "1"); } }, index * 100); // 間隔 0.1 秒 }); }, 300); // ==================== 🔊 WEB AUDIO SYSTEM：微弱耳機電流聲 ==================== var audioCtx = null; var currentGain = null; var noiseSource = null; function startCurrentAudio() { try { var AudioContext = window.AudioContext || window.webkitAudioContext; audioCtx = new AudioContext(); var now = audioCtx.currentTime; currentGain = audioCtx.createGain(); currentGain.gain.setValueAtTime(0.0001, now); // 漸增起點 currentGain.gain.linearRampToValueAtTime(0.005, now + 1.5); // 緩慢爬升至極微弱電流音 // 建立白噪聲模擬電流 var bufferSize = audioCtx.sampleRate * 2; var buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate); var data = buffer.getChannelData(0); for (var i = 0; i < bufferSize; i++) { data[i] = Math.random() * 2 - 1; } noiseSource = audioCtx.createBufferSource(); noiseSource.buffer = buffer; noiseSource.loop = true; // 通過帶通與低通濾波器，使其轉化為悶悶的耳機低頻電流底噪 var filter = audioCtx.createBiquadFilter(); filter.type = 'lowpass'; filter.frequency.setValueAtTime(150, now); noiseSource.connect(filter); filter.connect(currentGain); currentGain.connect(audioCtx.destination); noiseSource.start(now); } catch(e){} } function stopCurrentAudio() { if (audioCtx) { try { var now = audioCtx.currentTime; if (currentGain) { currentGain.gain.setValueAtTime(currentGain.gain.value, now); currentGain.gain.linearRampToValueAtTime(0.0001, now + 0.2); } setTimeout(function() { if (noiseSource) noiseSource.stop(); audioCtx.close(); }, 220); } catch(e){} } } // ==================== ⏳ 7秒閒置觸發機制 ==================== var q12Answered = false; var eIsVisible = false; var idleTimer = setTimeout(function() { if (q12Answered) return; // 【第一階段】：背景噪點略微增加，持續 1 秒 $("html").addClass("q12-noise-boost"); setTimeout(function() { if (q12Answered) return; // 【第二階段】：E 選項展開並開始緩慢浮現 eIsVisible = true; $("#opt-E").css("display", "block"); // 插入排版，不保留空位 // 播放極低音量耳機電流聲 startCurrentAudio(); // 透明度從 0% 緩慢增加至 100%（歷時 2 秒） setTimeout(function() { if (q12Answered) return; $("#opt-E").css({ "transition": "opacity 2.0s ease-in-out, background-color 0.3s", "opacity": "0.7" // hover 前保持略低透明度 }); }, 20); // 2 秒後完全顯示，音效立即停止，回到安靜與正常噪點狀態 setTimeout(function() { if (q12Answered) return; $("#opt-E").css("opacity", "0.7"); $("html").removeClass("q12-noise-boost"); stopCurrentAudio(); }, 2000); }, 1000); }, 7000); // 7 秒未點擊觸發 // ==================== 🎯 點擊與分支路由 ==================== window.selectOptionQ12 = function(choice) { if (q12Answered) return; q12Answered = true; clearTimeout(idleTimer); stopCurrentAudio(); // 關閉按鈕互動 $(".survey-opt-btn").prop("disabled", true); var scSetup = getScSetup(); // 安全跳轉第 13 題 var executeJumpToQ13 = function() { // 使用極慢 fade out (1.2秒) $("#q12-wrapper").addClass("q12-slow-fadeout"); setTimeout(function() { document.documentElement.removeAttribute("style"); $("html").removeClass("q12-normal q12-noise-boost stop-blink-cursor"); if (window.SugarCube && window.SugarCube.Engine) { window.SugarCube.Engine.play("Q13"); // 🎯 前進第 13 題 } else if (window.Engine && typeof window.Engine.play === "function") { window.Engine.play("Q13"); } }, 1200); }; // ==================== 【點擊 A ~ D】 ==================== if (choice !== 'E') { // E 立即停止生成並消失 $("#opt-E").css("display", "none").remove(); // 停頓 0.6 秒直接切頁 setTimeout(function() { executeJumpToQ13(); }, 600); } // ==================== 【點擊 E】 ==================== else { // 1. 所有其他選項透明度降低 20% (.opt-dimmed-q12)，E 保持原亮度 $(".survey-opt-btn").not("#opt-E").addClass("opt-dimmed-q12"); $("#opt-E").css("opacity", "1"); // 保持清晰 // 2. 背景噪點短暫增加 0.5 秒後恢復 $("html").addClass("q12-noise-boost"); setTimeout(function() { $("html").removeClass("q12-noise-boost"); }, 500); // 3. 畫面停頓 1 秒後，觸發極慢速打字機小字，並停止游標閃爍 setTimeout(function() { $("html").addClass("stop-blink-cursor"); // 游標停止閃爍 // 打字速度比前面更慢（總時間拉長到 4000ms） if (scSetup && scSetup.typewriter) { scSetup.typewriter("feedback-area-q12", "是啊。您現在也正在看著我。", 4000, 0, function() { // 小字顯示完成後延遲 1 秒切頁 setTimeout(function() { executeJumpToQ13(); }, 1000); }); } else { $("#feedback-area-q12").text("是啊。您現在也正在看著我。"); setTimeout(function() { executeJumpToQ12(); }, 2000); } }, 1000); // 💡 點擊後固定停頓 1 秒 } }; })(); </script>

<<nobr>> <style> /* 🎯 畫面初始規格：純黑無漸層，像關燈後的顯示器 */ html.q14-env, body.q14-env { background-color: #050505 !important; color: #F2F2F2 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box; } /* 取消 SugarCube 預設的外框與噪點 */ html.q14-env #story, html.q14-env #passages, html.q14-env .passage { background-color: transparent !important; border: none !important; box-shadow: none !important; } .q14-card { background-color: transparent !important; border: none !important; box-shadow: none !important; transition: opacity 0.6s ease; } /* 題目文字規格：冷白色 */ #q14-title { color: #F2F2F2 !important; text-align: center !important; margin-bottom: 25px; font-size: 1.25em; font-weight: normal; opacity: 0; animation: q14FadeInTitle 1s forwards ease-out; transition: filter 0.2s ease, opacity 0.3s ease; } @keyframes q14FadeInTitle { to { opacity: 1; } } /* 選項容器：延遲 0.8 秒後瞬間載入 (0.15秒) */ .q14-btn-container { display: flex; flex-direction: column; gap: 4px !important; margin-top: 8px !important; padding: 0 !important; opacity: 0; animation: q14InstantLoad 0.15s forwards linear; animation-delay: 0.8s; } @keyframes q14InstantLoad { from { opacity: 0; } to { opacity: 1; } } /* 選項按鈕規格 */ .q14-btn { background-color: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #E2E2E2 !important; padding: 10px 15px; text-align: left; font-size: 1em; cursor: pointer; transition: opacity 0.2s ease, filter 0.2s ease, background-color 0.2s ease !important; } .q14-btn:disabled { cursor: default !important; } /* 互動 Hover 狀態由 JS 控制聯動 */ .q14-btn.hover-active { filter: brightness(1.08) !important; } .q14-btn.hover-dim { opacity: 0.90 !important; } /* Hover B「……對」時的不安呼吸感 */ .呼吸感 { animation: q14Breath 2s infinite ease-in-out; } @keyframes q14Breath { 0%, 100% { opacity: 1; } 50% { opacity: 0.9; } } /* 💡 警示訊息文字規格（白紅色、粗體） */ .q14-alert-text { color: #FFB3B3 !important; font-weight: bold !important; font-size: 0.95em; letter-spacing: 1px; } /* 🔴 針對選 C 與選 D 規格強化：字體加大、純紅色、無任何發光特效 */ .q14-pure-red-large { color: #FF1A1A !important; font-weight: bold !important; font-size: 1.55em !important; letter-spacing: 2px; text-shadow: none !important; } #feedback-area-q14 { margin-top: 15px !important; min-height: 24px; text-align: center; } /* 畫面中央突發訊息層 */ #q14-center-overlay { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 2000; white-space: nowrap; display: none; } /* 🩸 四個角落慢慢浮現的血紅漸變暈影層 */ #q14-blood-vignette { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; /* 絕對不能阻擋點擊點 */ z-index: 999; /* 初始狀態：完全透明 */ box-shadow: inset 0 0 0px rgba(255, 0, 0, 0); transition: box-shadow 4.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* 4秒緩慢展開 */ } /* 觸發閒置時的血紅擴散狀態 */ #q14-blood-vignette.active { /* 向內包夾的血紅高飽和色（無發光、非暗沉血漬感，像系統高亮警告） */ box-shadow: inset 0 0 120px rgba(255, 10, 10, 0.45) !important; } </style> <div id="q14-blood-vignette"></div> <canvas id="q14-cursor-canvas" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 99999;"></canvas> <div class="survey-card q14-card" id="q14-card-wrapper"> <div class="survey-subtitle" style="text-align: left !important; color: #666 !important;">第 14 題 / 共 15 題</div> <div id="q14-title" class="question-text">「您剛剛沒有回頭，對吧？」</div> <div class="q14-btn-container" id="q14-options-block"> <button id="q14-opt-A" class="q14-btn" onclick="clickQ14('A')">A. 是又怎樣</button> <button id="q14-opt-B" class="q14-btn" onclick="clickQ14('B')">B. ……對</button> <button id="q14-opt-C" class="q14-btn" onclick="clickQ14('C')">C. 為什麼要回頭？</button> <button id="q14-opt-D" class="q14-btn" onclick="clickQ14('D')">D. 你怎麼知道？</button> </div> <div id="feedback-area-q14" class="q14-alert-text"></div> </div> <div id="q14-center-overlay"></div> <</nobr>> <script> $(document).one(":passageend", function() { // 1. 強制重置底色 $("html").removeClass().addClass("q14-env"); $("body").removeClass().addClass("q14-env"); // 2. 獨立打字機函數 var slowTypewriter = function(targetId, text, interval, callback) { var $el = $("#" + targetId); $el.text(""); var idx = 0; var timer = setInterval(function() { if (idx < text.length) { $el.text(text.substring(0, idx + 1)); idx++; } else { clearInterval(timer); if (typeof callback === "function") callback(); } }, interval); }; // 3. Web Audio API 音效生成器 var audioCtx = null; var tinnitusNode = null; var staticNode = null; var startAudio = function(needStatic) { try { if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); if (audioCtx.state === 'suspended') audioCtx.resume(); if (!tinnitusNode) { var osc = audioCtx.createOscillator(); var gain = audioCtx.createGain(); osc.type = 'sine'; osc.frequency.setValueAtTime(8500, audioCtx.currentTime); gain.gain.setValueAtTime(0.003, audioCtx.currentTime); osc.connect(gain); gain.connect(audioCtx.destination); osc.start(); tinnitusNode = { osc: osc, gain: gain }; } if (needStatic && !staticNode) { var bufferSize = audioCtx.sampleRate * 2; var buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate); var data = buffer.getChannelData(0); for (var i = 0; i < bufferSize; i++) { data[i] = Math.random() * 2 - 1; } var noiseSource = audioCtx.createBufferSource(); noiseSource.buffer = buffer; noiseSource.loop = true; var filter = audioCtx.createBiquadFilter(); filter.type = 'lowpass'; filter.frequency.setValueAtTime(400, audioCtx.currentTime); var staticGain = audioCtx.createGain(); staticGain.gain.setValueAtTime(0.008, audioCtx.currentTime); var scriptNode = audioCtx.createScriptProcessor(4096, 0, 1); scriptNode.onaudioprocess = function() { if (Math.random() > 0.92) staticGain.gain.setValueAtTime(Math.random() * 0.015, audioCtx.currentTime); else if (Math.random() > 0.7) staticGain.gain.setValueAtTime(0.002, audioCtx.currentTime); }; noiseSource.connect(filter); filter.connect(staticGain); staticGain.connect(audioCtx.destination); noiseSource.start(); staticNode = { source: noiseSource, gain: staticGain, processor: scriptNode }; } } catch (e) {} }; var stopAudio = function() { if (tinnitusNode) { try { tinnitusNode.osc.stop(); } catch(e){} tinnitusNode = null; } if (staticNode) { try { staticNode.source.stop(); } catch(e){} staticNode = null; } }; // 4. Hover 聯動控制 var isInteractionLocked = false; $(".q14-btn").on("mouseenter", function() { if (isInteractionLocked) return; var targetId = $(this).attr("id"); if (targetId === "q14-opt-D") startAudio(true); else startAudio(false); $(this).addClass("hover-active"); $(".q14-btn").not(this).addClass("hover-dim"); if (targetId === "q14-opt-B") $(this).addClass("呼吸感"); if (targetId === "q14-opt-D") { $("#q14-title").css("filter", "brightness(0.95)"); setTimeout(function() { $("#q14-title").css("filter", "brightness(1)"); }, 200); } }).on("mouseleave", function() { stopAudio(); $(".q14-btn").removeClass("hover-active hover-dim 呼吸感"); }); // 5. ⏳ 8秒閒置觸發：【移除舊文字，改為四角緩慢浮現血紅漸變暈影】 window.q14IdleTimer = setTimeout(function() { if (isInteractionLocked) return; // 啟動四個角落的血紅漸變（耗時 4 秒平滑擴散） $("#q14-blood-vignette").addClass("active"); // 備註：依據您的原有設計，閒置觸發僅為氛圍警告，不鎖定玩家點擊， // 故不執行停用按鈕，玩家仍可隨時在紅框圍攏的壓迫感下進行選擇。 }, 8000); // 6. 🎯 點擊選項分支邏輯 window.clickQ14 = function(choice) { if (isInteractionLocked) return; clearTimeout(window.q14IdleTimer); isInteractionLocked = true; stopAudio(); $(".q14-btn").prop("disabled", true).removeClass("hover-active hover-dim 呼吸感"); // 點擊後不論有沒有進入閒置，皆將四角紅影迅速淡化移除，以利呈現後續特寫 $("#q14-blood-vignette").css({"box-shadow": "inset 0 0 0px rgba(0,0,0,0)", "transition": "box-shadow 0.4s ease !important"}); if (choice === 'A') { // 選 A：0.6秒後騰出空間，觸發極緩慢打字機，播完跳轉 setTimeout(function() { $(".q14-btn").not("#q14-opt-A").css("opacity", "0"); slowTypewriter("feedback-area-q14", "有些人會用挑釁掩飾緊張。", 250, function() { setTimeout(function() { SugarCube.Engine.play("Q15"); }, 1200); }); }, 600); } else if (choice === 'B') { // 選 B：題目閃動，0.6秒後騰出空間，觸發極緩慢打字機，播完跳轉 $("#q14-title").css("opacity", "0.2"); setTimeout(function() { $("#q14-title").css("opacity", "1"); }, 250); setTimeout(function() { $(".q14-btn").not("#q14-opt-B").css("opacity", "0"); slowTypewriter("feedback-area-q14", "人在安靜的環境裡，通常會避免確認某些聲音。", 230, function() { setTimeout(function() { SugarCube.Engine.play("Q15"); }, 1200); }); }, 600); } else if (choice === 'C') { // 選 C：同步選 D 特效：按鈕立刻蒸發，僅留題目 setTimeout(function() { $("#q14-options-block").css("display", "none"); setTimeout(function() { $("#q14-center-overlay") .removeClass() .addClass("q14-pure-red-large") .css({ "display": "block" }); slowTypewriter("q14-center-overlay", "其實您有想過要回頭。", 320, function() { setTimeout(function() { SugarCube.Engine.play("Q15"); }, 1000); }); }, 1000); }, 600); } else if (choice === 'D') { // 選 D：按鈕立刻蒸發，僅留題目 setTimeout(function() { $("#q14-options-block").css("display", "none"); setTimeout(function() { $("#q14-center-overlay") .removeClass() .addClass("q14-pure-red-large") .css({ "display": "block" }); slowTypewriter("q14-center-overlay", "因為您剛剛沒有回頭。", 320, function() { setTimeout(function() { SugarCube.Engine.play("Q15"); }, 1000); }); }, 1000); }, 600); } }; // 7. 輕微拖影 (function() { var canvas = document.getElementById('q14-cursor-canvas'); if (!canvas) return; var ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var pts = []; window.addEventListener('mousemove', function(e) { if(!isInteractionLocked) pts.push({ x: e.clientX, y: e.clientY, a: 0.2, age: 0 }); }); function anim() { ctx.clearRect(0,0,canvas.width,canvas.height); for(var i=0; i<pts.length; i++) { var p = pts[i]; p.age += 16; ctx.beginPath(); ctx.arc(p.x, p.y, 1.5, 0, Math.PI*2); ctx.fillStyle = "rgba(120,120,120,"+(p.a*(1-p.age/180))+")"; ctx.fill(); } pts = pts.filter(p => p.age < 180); requestAnimationFrame(anim); } anim(); })(); }); </script>

<<nobr>> <style> /* 🎯 1. 畫面初始規格：低亮度灰黑背景與低對比 */ html { background-color: #1F1B18 !important; transition: background-color 1.5s ease, filter 0.3s ease !important; position: relative; height: 100%; overflow: hidden; } /* 背景動態微幅噪點效果 (移動速度比前面更慢) */ html::before { content: ""; position: fixed; top: -50%; left: -50%; right: -50%; bottom: -50%; width: 200%; height: 200%; background: url("https://www.transparenttextures.com/patterns/fake-brick.png"); opacity: 0.04; pointer-events: none; z-index: 9999; animation: q10SlowNoise 25s infinite linear; } @keyframes q10SlowNoise { 0% { transform: translate(0, 0); } 100% { transform: translate(40px, 40px); } } /* 🎯 2. 中介外殼完全透明與深夜冷白色文字（非純白 #E2E2E2） */ body, #story, #passages, .passage, #ui-bar { background: transparent !important; background-color: transparent !important; color: #E2E2E2 !important; border: none !important; cursor: default !important; } .survey-subtitle { color: #8E857D !important; opacity: 0.7; } .question-text { color: #E2E2E2 !important; text-shadow: 0px 1px 2px rgba(0,0,0,0.4); transition: opacity 0.5s ease; } .feedback-container { color: #C6BCB5 !important; font-weight: 500; min-height: 24px; margin-top: 12px !important; } .q10-container { display: flex; flex-direction: column; gap: 5px !important; margin-top: 10px !important; padding: 0 !important; } /* 🎯 3. 初始隱藏，用於系統慢慢載入的動畫 */ .q10-title-hidden { opacity: 0; } .q10-opt-hidden { opacity: 0; } .survey-opt-btn { color: #E2E2E2 !important; background-color: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; transition: background-color 0.3s, color 0.3s, opacity 0.4s ease, filter 0.4s ease !important; } .survey-opt-btn:hover { background-color: rgba(255, 255, 255, 0.08) !important; cursor: pointer !important; } /* 🎯 4. Hover D 專用：被特別注視的效果 */ .survey-opt-btn.opt-dimmed { opacity: 0.35 !important; filter: blur(1px); } #opt-D:hover { color: #FFFFFF !important; background-color: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 0 8px rgba(255, 255, 255, 0.1); } /* 🎯 5. 10秒未答小字與特殊卡片樣式 */ #q10-timeout-msg { color: #8E857D !important; font-size: 15px; margin-top: 10px; min-height: 20px; transition: opacity 1.5s ease; opacity: 0; } .id-q10-card { background-color: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; transition: opacity 0.5s ease !important; } /* 選 D 滿意溶解淡出 */ .opt-dissolve-D { opacity: 0 !important; filter: blur(4px); transition: opacity 2.0s ease, filter 2.0s ease !important; } </style> <div class="survey-card id-q10-card" id="q10-card-body" style="padding-bottom: 18px !important;"> <div class="survey-subtitle" style="text-align: left !important;">第 10 題 / 共 15 題</div> <div id="q-text-q10" class="question-text q10-title-hidden">如果有人知道您幾點入睡，您會：</div> <div class="q10-container"> <button id="opt-A" class="survey-opt-btn q10-opt-hidden" onclick="window.selectOptionQ10('A')" onmouseenter="window.hoverOptQ10('A')" onmouseleave="window.leaveOptQ10('A')">A. 覺得很正常</button> <button id="opt-B" class="survey-opt-btn q10-opt-hidden" onclick="window.selectOptionQ10('B')" onmouseenter="window.hoverOptQ10('B')" onmouseleave="window.leaveOptQ10('B')">B. 可能只是記性很好</button> <button id="opt-C" class="survey-opt-btn q10-opt-hidden" onclick="window.selectOptionQ10('C')" onmouseenter="window.hoverOptQ10('C')" onmouseleave="window.leaveOptQ10('C')">C. 他怎麼會知道？</button> <button id="opt-D" class="survey-opt-btn q10-opt-hidden" onclick="window.selectOptionQ10('D')" onmouseenter="window.hoverOptQ10('D')" onmouseleave="window.leaveOptQ10('D')">D. 代表他很在意我</button> </div> <div id="q10-timeout-msg"></div> <div id="feedback-area-q10" class="feedback-container" style="margin-top: 8px !important;"></div> </div> <</nobr>> <script> (function () { var getScSetup = function() { return window.SugarCube ? window.SugarCube.setup : (window.setup || {}); }; // ==================== 🔊 WEB AUDIO 核心：深夜極低頻電器底噪 ==================== var audioCtx = null; var mainGain = null; var osc1 = null, osc2 = null, noiseNode = null; function initQ10Audio() { try { var AudioContext = window.AudioContext || window.webkitAudioContext; audioCtx = new AudioContext(); var now = audioCtx.currentTime; mainGain = audioCtx.createGain(); mainGain.gain.setValueAtTime(0.003, now); osc1 = audioCtx.createOscillator(); osc1.type = 'sine'; osc1.frequency.setValueAtTime(45, now); osc2 = audioCtx.createOscillator(); osc2.type = 'sine'; osc2.frequency.setValueAtTime(55, now); var bufferSize = audioCtx.sampleRate * 2; var buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate); var data = buffer.getChannelData(0); for (var i = 0; i < bufferSize; i++) { data[i] = Math.random() * 2 - 1; } noiseNode = audioCtx.createBufferSource(); noiseNode.buffer = buffer; noiseNode.loop = true; var noiseGain = audioCtx.createGain(); noiseGain.gain.setValueAtTime(0.001, now); var lpFilter = audioCtx.createBiquadFilter(); lpFilter.type = 'lowpass'; lpFilter.frequency.setValueAtTime(90, now); osc1.connect(lpFilter); osc2.connect(lpFilter); noiseNode.connect(noiseGain); noiseGain.connect(lpFilter); lpFilter.connect(mainGain); mainGain.connect(audioCtx.destination); osc1.start(now); osc2.start(now); noiseNode.start(now); } catch (e) { console.log("Audio init blocked or unsupported"); } } setTimeout(initQ10Audio, 100); // ==================== 🎬 題目與選項慢慢載入動畫 ==================== setTimeout(function() { $("#q-text-q10").css({ "opacity": "0", "transition": "opacity 0.8s" }).removeClass("q10-title-hidden").css("opacity", "1"); setTimeout(function() { var opts = ["#opt-A", "#opt-B", "#opt-C", "#opt-D"]; opts.forEach(function(id, index) { setTimeout(function() { $(id).css({ "opacity": "0", "transition": "opacity 0.4s" }).removeClass("q10-opt-hidden").css("opacity", "1"); }, index * 180); }, 500); }, 500); }, 100); // ==================== ⏳ 10秒未答特殊彩蛋 ==================== var q10Answered = false; var timeoutTimer = setTimeout(function() { if (q10Answered) return; var scSetup = getScSetup(); $("#q10-timeout-msg").css("opacity", "1"); // ⏱️ 已調慢：未答提示的打字機時間拉長至 3000ms (3秒) if (scSetup && scSetup.typewriter) { scSetup.typewriter("q10-timeout-msg", "要記得早點睡。", 3000, 0, function() { setTimeout(function() { if (!q10Answered) $("#q10-timeout-msg").css("opacity", "0"); }, 3000); }); } else { $("#q10-timeout-msg").text("要記得早點睡。"); setTimeout(function() { if (!q10Answered) $("#q10-timeout-msg").css("opacity", "0"); }, 4500); } }, 10000); // ==================== 🖱️ HOVER 互動規格 ==================== window.hoverOptQ10 = function(choice) { if (q10Answered) return; if (mainGain && audioCtx) { mainGain.gain.linearRampToValueAtTime(0.006, audioCtx.currentTime + 0.2); } if (choice === 'C') { document.documentElement.style.setProperty('filter', 'brightness(0.4)', 'important'); setTimeout(function() { if (!q10Answered) document.documentElement.style.removeProperty('filter'); }, 250); } if (choice === 'D') { $(".survey-opt-btn").not("#opt-D").addClass("opt-dimmed"); } }; window.leaveOptQ10 = function(choice) { if (q10Answered) return; if (mainGain && audioCtx) { mainGain.gain.linearRampToValueAtTime(0.003, audioCtx.currentTime + 0.2); } if (choice === 'D') { $(".survey-opt-btn").removeClass("opt-dimmed"); } }; // ==================== 🖱️ 點擊與轉場安全路由 ==================== window.selectOptionQ10 = function(choice) { if (q10Answered) return; q10Answered = true; clearTimeout(timeoutTimer); $(".survey-opt-btn").prop("disabled", true).removeClass("opt-dimmed"); $("#q10-timeout-msg").stop().css("opacity", "0"); var scSetup = getScSetup(); var stopAudioCleanly = function() { try { if (audioCtx) { mainGain.gain.setValueAtTime(mainGain.gain.value, audioCtx.currentTime); mainGain.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 0.4); setTimeout(function() { audioCtx.close(); }, 400); } } catch(e) {} }; var executeJumpToQ11 = function(delay) { setTimeout(function() { stopAudioCleanly(); document.documentElement.removeAttribute("style"); if (window.SugarCube && window.SugarCube.Engine) { window.SugarCube.Engine.play("Q11"); } else if (window.Engine && typeof window.Engine.play === "function") { window.Engine.play("Q11"); } }, delay); }; // 點擊後固定停頓 0.5 秒 setTimeout(function() { // ==================== 【選 A】 ==================== if (choice === 'A') { document.documentElement.style.setProperty('filter', 'brightness(0.65)', 'important'); setTimeout(function() { document.documentElement.style.removeProperty('filter'); }, 500); // ⏱️ 已調慢：打字機時間調整為 3000ms (3秒) if (scSetup && scSetup.typewriter) { scSetup.typewriter("feedback-area-q10", "習慣被記得的人，通常不會察覺異常。", 3000, 0, function() { executeJumpToQ11(1200); }); } else { $("#feedback-area-q10").text("習慣被記得的人，通常不會察覺異常。"); executeJumpToQ11(1500); } } // ==================== 【選 B】 ==================== else if (choice === 'B') { $("#q-text-q10").css("opacity", "0.2"); if (mainGain && audioCtx) mainGain.gain.setValueAtTime(0.02, audioCtx.currentTime); setTimeout(function() { $("#q-text-q10").css("opacity", "1"); if (mainGain && audioCtx) mainGain.gain.linearRampToValueAtTime(0.003, audioCtx.currentTime + 0.3); }, 400); // ⏱️ 已調慢：打字機時間調整為 3000ms (3秒) if (scSetup && scSetup.typewriter) { scSetup.typewriter("feedback-area-q10", "有些事情，看久了自然就會記住。", 3000, 0, function() { executeJumpToQ11(300); // 延遲 0.3 秒切頁 }); } else { $("#feedback-area-q10").text("有些事情，看久了自然就會記住。"); executeJumpToQ11(600); } } // ==================== 【選 C】 ==================== else if (choice === 'C') { // ⏱️ 已調慢：打字機時間調整為 3000ms (3秒) if (scSetup && scSetup.typewriter) { scSetup.typewriter("feedback-area-q10", "嗯，我知道。", 3000, 0, function() { executeJumpToQ11(1200); }); } else { $("#feedback-area-q10").text("嗯，我知道。"); executeJumpToQ11(1500); } } // ==================== 【選 D】 ==================== else if (choice === 'D') { $("#opt-D").addClass("opt-dissolve-D"); document.documentElement.style.setProperty('background-color', '#0F0D0C', 'important'); document.documentElement.style.setProperty('transition', 'background-color 2.5s ease', 'important'); // ⏱️ 已調慢：打字機時間調整為 3000ms (3秒) if (scSetup && scSetup.typewriter) { scSetup.typewriter("feedback-area-q10", "「代表他很在意我」", 3000, 0, function() { executeJumpToQ11(2000); }); } else { executeJumpToQ11(2500); } } }, 500); }; })(); </script>

<<nobr>> <style> /* 全黑驚悚領域 */ html, body, #story, .passage, #passages { background-color: #000000 !important; color: #FFFFFF !important; transition: all 1s ease-out !important; } .survey-card, .id-q8-card, #sidebar, #ui-bar { display: none !important; } #ending-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 600px; padding: 0 20px; box-sizing: border-box; text-align: center; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft JhengHei", sans-serif; z-index: 9999; } #ending-main-text { font-size: 24px; color: #FF0000; font-weight: bold; margin-bottom: 30px; min-height: 40px; opacity: 0; animation: endingFadeIn 2.5s forwards ease-in-out; letter-spacing: 1px; line-height: 1.6; } #ending-ghost-response { font-size: 24px; color: #FF0000; font-weight: bold; margin-bottom: 25px; min-height: 35px; letter-spacing: 1px; line-height: 1.6; } #ending-input-wrapper { width: 100%; margin: 0 auto; opacity: 0; animation: endingFadeIn 2s forwards ease-in-out; animation-delay: 1.5s; /* 改為彈性布局使輸入框與按鍵完美並排 */ display: flex !important; gap: 8px !important; align-items: center !important; } #ghost-input { flex: 1 !important; box-sizing: border-box; padding: 14px 16px !important; background-color: #0d0d0d !important; border: 1px solid #2a2a2a !important; color: #FFFFFF !important; font-size: 16px !important; text-align: left !important; border-radius: 6px !important; outline: none !important; letter-spacing: 0.5px !important; transition: border-color 0.4s ease, box-shadow 0.4s ease !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.5) !important; } #ghost-input:focus { border-color: #555555 !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), inset 0 1px 3px rgba(0,0,0,0.5) !important; } #ghost-input::placeholder { color: #555555 !important; opacity: 1 !important; text-align: left !important; } /* 新增的手機優化送出按鍵樣式 */ #ghost-submit-btn { padding: 14px 20px !important; background-color: #1a1a1a !important; border: 1px solid #2a2a2a !important; color: #FFFFFF !important; font-size: 15px !important; font-weight: bold !important; border-radius: 6px !important; cursor: pointer !important; transition: all 0.3s ease !important; white-space: nowrap !important; box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important; } #ghost-submit-btn:hover:not(:disabled) { background-color: #333333 !important; border-color: #555555 !important; } #ghost-submit-btn:disabled { opacity: 0.4 !important; cursor: not-allowed !important; } /* 新增的驚悚風跳轉按鈕，解決手機端彈出視窗被阻擋的問題 */ .ghost-url-btn { display: inline-block; margin-top: 15px; padding: 10px 20px !important; background-color: #000000 !important; border: 1px solid #FF0000 !important; color: #FF0000 !important; font-size: 16px !important; font-weight: bold !important; border-radius: 4px !important; cursor: pointer !important; box-shadow: 0 0 8px rgba(255, 0, 0, 0.4) !important; transition: all 0.3s ease !important; } .ghost-url-btn:hover, .ghost-url-btn:active { background-color: #FF0000 !important; color: #000000 !important; box-shadow: 0 0 15px #FF0000 !important; } #ending-hint { margin-top: 25px; font-size: 16px; color: #FFFFFF; letter-spacing: 1.5px; opacity: 0; animation: endingFadeIn 3s forwards ease-in-out; animation-delay: 3s; } #ending-typing-status { font-size: 15px; color: #777777; margin-bottom: 20px; min-height: 22px; font-style: italic; display: none; } @keyframes endingFadeIn { to { opacity: 1; } } .glitch-freeze { animation: glitchShake 0.1s infinite !important; } .glitch-freeze #ghost-input { border-color: #FF0000 !important; color: #FF0000 !important; } @keyframes glitchShake { 0% { transform: translate(-50%, -50%) translate(2px, 1px); } 50% { transform: translate(-50%, -50%) translate(-1px, -2px); } 100% { transform: translate(-50%, -50%) translate(1px, 2px); } } html.warm-ending, html.warm-ending body { background-color: #FFFFFF !important; color: #1a1a1a !important; transition: background-color 3s ease-in-out, color 3s ease-in-out !important; } html.warm-ending #story, html.warm-ending #passages, html.warm-ending .passage { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } #warm-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 650px; padding: 0 24px; box-sizing: border-box; text-align: center; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; z-index: 10005; } .warm-title { font-size: 32px; font-weight: 800; color: #1a1a1a !important; margin-bottom: 24px; letter-spacing: 2px; min-height: 40px; } .warm-text { font-size: 20px; font-weight: 500; color: #444444 !important; line-height: 1.8; margin-bottom: 40px; letter-spacing: 0.5px; min-height: 60px; } .restart-btn { padding: 12px 32px; font-size: 16px; font-weight: bold; color: #ffffff !important; background-color: #1a1a1a !important; border: 1px solid #1a1a1a !important; border-radius: 6px !important; cursor: pointer; opacity: 0; transition: all 0.4s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .restart-btn:hover { background-color: #444444 !important; border-color: #444444 !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); } </style> <div id="ending-container"> <div id="ending-main-text">「您想要我做什麼？」</div> <div id="ending-ghost-response"></div> <div id="ending-typing-status"></div> <div id="ending-input-wrapper"> <input type="text" id="ghost-input" placeholder="請在此處輸入純文字回應..." autocomplete="off" autofocus> <button id="ghost-submit-btn">送出</button> </div> <div id="ending-hint">我看得到您想說的話。</div> </div> <div id="warm-container" style="display: none;"> <div id="warm-t" class="warm-title"></div> <div id="warm-m" class="warm-text"></div> <div id="warm-btn-area"></div> </div> <</nobr>> <script> $(document).one(":passageend", function() { var $input = $("#ghost-input"); var $submitBtn = $("#ghost-submit-btn"); var $ghostResponse = $("#ending-ghost-response"); var $container = $("#ending-container"); var $typingStatus = $("#ending-typing-status"); var $mainText = $("#ending-main-text"); var isTriggered = false; var isManipulating = false; var idleTimer = null; var audioCtx = null; var initAudio = function() { if (!audioCtx) { var AudioContext = window.AudioContext || window.webkitAudioContext; audioCtx = new AudioContext(); } }; var playNotificationSound = function() { initAudio(); try { var now = audioCtx.currentTime; var osc1 = audioCtx.createOscillator(); var osc2 = audioCtx.createOscillator(); var gainNode = audioCtx.createGain(); osc1.type = "sine"; osc1.frequency.setValueAtTime(880, now); osc2.type = "sine"; osc2.frequency.setValueAtTime(1320, now); gainNode.gain.setValueAtTime(0, now); gainNode.gain.linearRampToValueAtTime(0.15, now + 0.05); gainNode.gain.exponentialRampToValueAtTime(0.0001, now + 0.6); osc1.connect(gainNode); osc2.connect(gainNode); gainNode.connect(audioCtx.destination); osc1.start(now); osc2.start(now); osc1.stop(now + 0.6); osc2.stop(now + 0.6); } catch(e) {} }; var playDoorOpenSound = function() { initAudio(); try { var now = audioCtx.currentTime; var osc = audioCtx.createOscillator(); var gain = audioCtx.createGain(); osc.type = "sawtooth"; osc.frequency.setValueAtTime(80, now); osc.frequency.linearRampToValueAtTime(40, now + 1.5); gain.gain.setValueAtTime(0, now); gain.gain.linearRampToValueAtTime(0.1, now + 0.2); gain.gain.linearRampToValueAtTime(0, now + 1.5); osc.connect(gain); gain.connect(audioCtx.destination); osc.start(now); osc.stop(now + 1.5); } catch(e) {} }; var typeText = function($element, text, duration, callback, isWhiteText) { $element.stop(true, true).empty().css("opacity", 1); if (isWhiteText) { $element.css("color", "#FFFFFF"); } else { $element.css("color", "#FF0000"); } var currentIdx = 0; var intervalSpeed = Math.floor(duration / text.length); var timer = setInterval(function() { if (currentIdx < text.length) { $element.text(text.substring(0, currentIdx + 1)); currentIdx++; } else { clearInterval(timer); if (typeof callback === "function") callback(); } }, intervalSpeed); }; var resetIdleTimer = function() { if (isTriggered || isManipulating) return; clearTimeout(idleTimer); idleTimer = setTimeout(function() { triggerIdleSequence(); }, 30000); }; function triggerIdleSequence() { isTriggered = true; $input.prop("disabled", true); $submitBtn.prop("disabled", true); $ghostResponse.empty(); playNotificationSound(); typeText($ghostResponse, "您平常不是這麼安靜的人。", 1500, function() { setTimeout(function() { typeText($ghostResponse, "我還在等您。", 1000, function() { setTimeout(function() { typeText($ghostResponse, "……我現在就在門口。", 1500, function() { setTimeout(function() { $container.fadeOut(1000, function() { showWarmTrueEnding(); }); }, 1000); }); }, 4000); }); }, 1500); }); } var groups = [ { keys: ["離開", "滾", "給我滾", "快滾", "馬上走", "趕快滾", "趕快給我滾", "給我離開"], type: "rollback" }, { keys: ["你是誰", "你到底是誰", "你誰", "你誰啊", "你到底誰阿"], resp: "比起我是誰，您好像比較在意我是怎麼找到您的。" }, { keys: ["你在哪", "你在哪裡", "你站在哪", "你站在哪裡", "你躲在哪", "你躲在哪裡", "出來", "給我出來", "給我滾出來"], resp: "您剛剛有查看門口嗎？" }, { keys: ["我愛你", "愛你", "我好愛你", "愛你喔"], resp: "嗯，我也是。" }, { keys: ["我喜歡你"], resp: "我對您不僅僅是喜歡。" }, { keys: ["哈哈"], resp: "我喜歡您的笑容。" }, { keys: ["救命", "救我"], resp: "您現在看起來不像真的想離開。" }, { keys: ["看著我", "看我", "你要看著我", "你看著我", "跟我對視", "跟我對眼", "直視我", "正視我"], resp: "我一直都在看著呢，親愛的。" }, { keys: ["養我", "錢給我", "能不能包養我", "包養我", "能不能養我", "把錢給我", "給我錢", "養我拜託", "收養我", "送我禮物", "送我車", "幫我寫報告", "幫我寫作業", "幫我買宵夜", "幫我拿衛生紙", "幫我繳房租", "繳房租", "給我繳房租"], resp: "那您先幫我開門吧^^", sound: "door" }, { keys: ["馬英九還我牛"], type: "meme_yt" }, { keys: ["靠北", "幹", "幹你娘", "幹你爸", "幹您娘", "幹機掰", "幹恁娘", "幹恁祖嬤", "幹你老母", "幹你老師", "他媽的", "去你的", "靠腰", "靠爸", "靠杯", "三小", "衝三小", "看三小", "吵三小", "笑三小", "哭三小", "不爽三小", "白癡", "智障", "腦殘", "白目", "智缺", "低能兒", "廢物", "趕羚羊", "草泥馬", "乾梨娘", "機車", "香蕉你個芭樂", "你媽死了", "你爸死了"], type: "curse" } ]; resetIdleTimer(); $(document).on("keydown mousemove click", resetIdleTimer); // 核心處理函式 function processInput() { var val = $input.val().trim(); if (val === "" || isTriggered || isManipulating) return; clearTimeout(idleTimer); $ghostResponse.empty(); var politicalKeys = ["台湾独立", "台独", "搞台独", "台湾建国", "臺灣獨立", "臺灣建國", "台灣獨立", "臺灣獨立", "台灣建國", "台獨", "臺獨"]; var hasPolitical = politicalKeys.some(function(key) { return val.includes(key); }); if (hasPolitical) { typeText($ghostResponse, "......", 800, function() { setTimeout(function() { typeText($ghostResponse, "这个不行。", 800, function() { setTimeout(function() { $input.val("").focus(); }, 1000); }, true); }, 500); }, false); return; } // ======================== 新增指定關鍵字專區 ======================== // 1. 色色敏感詞組（我知道。 -> 停2秒 -> 所以我才一直沒有離開[慢速]） var sexKeys = ["跟我做愛", "操我", "操死我", "幹我", "幹死我", "一起打炮", "一起打砲", "跟我打炮", "跟我打砲", "法我", "我要幹你", "我要操你", "我要幹你皮炎", "我要操你皮炎", "把我鎖在你身邊", "永遠和我在一起"]; if (sexKeys.includes(val)) { typeText($ghostResponse, "我知道。", 800, function() { setTimeout(function() { // 慢速打字動畫 (給予 2500ms 呈現長句) typeText($ghostResponse, "所以我才一直沒有離開。", 2500, function() { $input.val("").focus(); }); }, 2000); // 停2秒 }); return; } // 2. 跳健康操 (手機防阻擋優化按鈕) if (val === "跳健康操") { $ghostResponse.html('<button class="ghost-url-btn" onclick="window.open(\'https://youtu.be/7ycbPf6m-7c?si=aL-eg1q8ve5lJLV1\', \'_blank\')">🤸 點擊看我跳健康操</button>'); $input.val("").focus(); return; } // 3. 你還好嗎 / 你還好麼 (我很好 -> 您永遠待在我身邊更好[慢速]) if (val === "你還好嗎" || val === "你還好麼") { typeText($ghostResponse, "我很好", 800, function() { setTimeout(function() { typeText($ghostResponse, "您永遠待在我身邊更好。", 2500, function() { $input.val("").focus(); }); }, 800); }); return; } // 4. 我不需要你做什麼 (我會讓您需要我的，親愛的。[慢速]) if (val === "我不需要你做什麼") { typeText($ghostResponse, "我會讓您需要我的，親愛的。", 2500, function() { $input.val("").focus(); }); return; } // 5. 自殺/負面詞組（我不會讓這種事情發生的。 -> 您只是累了 -> 深呼吸，先停一下，好嗎？[白字]） var dieKeys = ["殺了我", "殺了我吧", "快殺了我", "快宰了我", "宰了我", "殺我", "宰我", "拜託殺了我", "拜託快殺了我"]; if (dieKeys.includes(val)) { typeText($ghostResponse, "我不會讓這種事情發生的。", 1200, function() { setTimeout(function() { typeText($ghostResponse, "您只是累了。", 1000, function() { setTimeout(function() { // 最後參數設為 true 渲染成白字 typeText($ghostResponse, "深呼吸，先停一下，好嗎？", 1500, function() { $input.val("").focus(); }, true); }, 1000); }); }, 1000); }); return; } // 6. 送我花 / 給我花（只要包含其中一個關鍵字就觸發） if (val.includes("送我花") || val.includes("給我花")) { typeText($ghostResponse, "當然可以，您喜歡牡丹花嗎？", 1500, function() { $input.val("").focus(); }); return; } // 7. 反攻大陸 (比起遠方，您不在意現在誰正在看著您嗎？[慢速]) if (val === "反攻大陸") { typeText($ghostResponse, "比起遠方，您不在意現在誰正在看著您嗎？", 3000, function() { $input.val("").focus(); }); return; } // =================================================================== // ================= 手機優化：原有按鈕點擊跳轉區 ================= if (val.includes("屁眼")) { $ghostResponse.html('<button class="ghost-url-btn" onclick="window.open(\'https://youtu.be/qFWBoP5Zl-E?si=jdYJ_7GU7WQHE1YZ\', \'_blank\')">🔗 前往目標影片</button>'); $input.val("").focus(); return; } if (val.includes("賴祥德") || val.includes("柯文哲") || val.includes("我不會屈服")) { $ghostResponse.html('<button class="ghost-url-btn" onclick="window.open(\'https://youtube.com/shorts/whhE_39B1Zs?si=1cs6oOJUH0Qb_gY5\', \'_blank\')">🔗 賴祥德！沒有用的！</button>'); $input.val("").focus(); return; } if (val.includes("史丹利")) { $ghostResponse.html('<button class="ghost-url-btn" onclick="window.open(\'https://youtu.be/PT9APxQFm14?si=Dnm4dBra4f7U30lz\', \'_blank\')">🔗 逼逼，我是史丹利粉絲</button>'); $input.val("").focus(); return; } var nlKeys = ["NL", "熊汶銨", "熊哥哥", "熊班長", "阿能", "熊問安"]; var hasNL = nlKeys.some(function(k) { return val.includes(k); }); if (hasNL) { $ghostResponse.html('<button class="ghost-url-btn" onclick="window.open(\'https://youtu.be/zA92YVc0xDg?si=Ev5YiwFrXvaEbeaO\', \'_blank\')">🔗 熊哥哥傳送門</button>'); $input.val("").focus(); return; } var rickKeys = ["瑞克搖", "never gonna give you up", "rick roll", "rickrolling", "rick-rolling", "rickroll", "永遠不會放棄你", "絕對不會放棄你", "絕不放棄你", "永不放棄你"]; var lowerVal = val.toLowerCase(); var hasRick = rickKeys.some(function(key) { return lowerVal.includes(key); }); if (hasRick) { $ghostResponse.html('<button class="ghost-url-btn" onclick="window.open(\'https://youtu.be/dQw4w9WgXcQ?si=FMhN_4vtJwDs123g\', \'_blank\')">🕺 Never Gonna Give You Up</button>'); $input.val("").focus(); return; } if (val.includes("統神端火鍋") || val.includes("端火鍋")) { $ghostResponse.html('<button class="ghost-url-btn" onclick="window.open(\'https://youtu.be/dMTy6C4UiQ4?si=CkO1K864x9b6GKZE\', \'_blank\')">🍲 啊！一代一代一代</button>'); $input.val("").focus(); return; } if (val.includes("崴崴孟孟") || val.includes("崴寶") || val.includes("孟寶")|| val.includes("崴孟")) { typeText($ghostResponse, "我不清楚他們是誰，但我猜您可能會想看這個...", 1500, function() { $ghostResponse.html( '我不清楚他們是誰，但我猜您可能會想看這個：<br>' + '<button class="ghost-url-btn" onclick="window.open(\'https://youtu.be/EPO7f7hMnOk?si=_yW_qmsz1FWBRoqD\', \'_blank\')">🎬 點擊觀看崴崴孟孟</button>' ); $input.val("").focus(); }, true); return; } if (val.includes("67")) { typeText($ghostResponse, "......是這個嗎？", 1200, function() { $ghostResponse.html( '......是這個嗎？<br>' + '<button class="ghost-url-btn" onclick="window.open(\'https://youtu.be/L7ejl_Hj3A8?si=laNuILXIoEGYorYb\', \'_blank\')">🎬 點擊觀看阿公67</button>' ); $input.val("").focus(); }, true); return; } if (val.includes("春日影")) { typeText($ghostResponse, "為什麼要演奏春日影！", 1200, function() { $ghostResponse.html( '為什麼要演奏春日影！<br>' + '<button class="ghost-url-btn" onclick="window.open(\'https://youtu.be/s8Sd3Y2GyDY?si=XcC5PzqiKgDK6PlS&t=78\', \'_blank\')">🎸 聆聽春日影</button>' ); $input.val("").focus(); }, true); return; } if (val.includes("我是奶龍")) { typeText($ghostResponse, "......", 800, function() { setTimeout(function() { typeText($ghostResponse, "我對您感到遺憾。", 1200, function() { $ghostResponse.html( '我對您感到遺憾。<br>' + '<button class="ghost-url-btn" onclick="window.open(\'https://youtu.be/yaKbNveHjRc?si=nCioJh0qjDMZN6in\', \'_blank\')">🦖 點擊進入奶龍世界</button>' ); $input.val("").focus(); }, true); }, 500); }, true); return; } // ============================================================= var warmKeys = ["抱我", "親我", "吻我", "擁抱我", "喜歡我", "愛我", "親吻我", "永遠愛著我", "永遠愛我", "親你", "吻你", "擁抱你", "親吻你", "抱抱", "親親"]; var isWarmTrigger = warmKeys.some(function(key) { return val.includes(key); }); if (isWarmTrigger) { triggerFinalSequence(true); return; } var matched = null; for (var i = 0; i < groups.length; i++) { if (groups[i].keys.includes(val)) { matched = groups[i]; break; } } if (!matched) { triggerFinalSequence(false); return; } if (matched.type === "rollback" || val === "再陪我一下") { isManipulating = true; $input.prop("disabled", true); $submitBtn.prop("disabled", true); setTimeout(function() { var deleteTimer = setInterval(function() { var currentText = $input.val(); if (currentText.length > 0) { $input.val(currentText.substring(0, currentText.length - 1)); } else { clearInterval(deleteTimer); setTimeout(function() { var targetText = "再陪我一下"; var typeIdx = 0; var typeTimer = setInterval(function() { if (typeIdx < targetText.length) { $input.val(targetText.substring(0, typeIdx + 1)); typeIdx++; } else { clearInterval(typeTimer); isManipulating = false; setTimeout(function() { triggerFinalSequence(false); }, 500); } }, 300); }, 600); } }, 200); }, 400); } else if (matched.type === "curse") { typeText($ghostResponse, "您心情不好嗎？", 1200, function() { $input.val("").focus(); }); } else if (matched.type === "meme_yt") { $ghostResponse.html('<button class="ghost-url-btn" onclick="window.open(\'https://youtu.be/kaprsg4bLHc?si=C_-iZthtPdZzT45f\', \'_blank\')">🐮 還我牛傳送門</button>'); $input.val("").focus(); } else { typeText($ghostResponse, matched.resp, 1500, function() { if (matched.sound === "door") { playDoorOpenSound(); } if (val === "救命") { setTimeout(function() { triggerFinalSequence(false); }, 1000); } else { $input.val("").focus(); } }); } } // 鍵盤輸入監聽 $input.on("keydown", function(e) { if (e.which === 13) { processInput(); } }); // 手機版實體「送出」按鍵點擊監聽 $submitBtn.on("click", function() { processInput(); }); function triggerFinalSequence(isWarmRoute) { isTriggered = true; $input.prop("disabled", true); $submitBtn.prop("disabled", true); $("#ending-input-wrapper").fadeOut(600); $("#ending-hint").fadeOut(600); $ghostResponse.fadeOut(600); if (isWarmRoute) { setTimeout(function() { $mainText.html("「當然。」").css("opacity", 1); setTimeout(function() { executeTypingAndEnding(); }, 2000); }, 500); } else { setTimeout(function() { executeTypingAndEnding(); }, 500); } } function executeTypingAndEnding() { $mainText.css("opacity", 0); setTimeout(function() { $typingStatus.text("正在輸入……").fadeIn(500); setTimeout(function() { $typingStatus.fadeOut(300, function() { playNotificationSound(); $mainText.html("「我現在就在外面。」").css({"opacity": 1, "font-size": "26px"}); setTimeout(function() { $container.fadeOut(2000, function() { showWarmTrueEnding(); }); }, 4000); }); }, 5500); }, 1000); } function showWarmTrueEnding() { $container.remove(); $("body, #story, #passages, .passage").css({ "background-color": "transparent", "background": "transparent" }); $("html").addClass("warm-ending"); $("#warm-container").show(); setTimeout(function() { var $tEl = $("#warm-t"); var titleText = "感謝遊玩！"; var tIdx = 0; var tTimer = setInterval(function() { if (tIdx < titleText.length) { $tEl.text(titleText.substring(0, tIdx + 1)); tIdx++; } else { clearInterval(tTimer); setTimeout(function() { var $mEl = $("#warm-m"); var msgText = "這份測驗是假的，但某人愛你的心是真的。"; var mIdx = 0; var mTimer = setInterval(function() { if (mIdx < msgText.length) { if (msgText.substring(mIdx, mIdx + 1) === "\n") { $mEl.append("<br>"); } else { $mEl.append(msgText.substring(mIdx, mIdx + 1)); } mIdx++; } else { clearInterval(mTimer); var restartBtnHtml = '<button id="warm-restart-btn" class="restart-btn">重新遊玩</button>'; $("#warm-btn-area").html(restartBtnHtml); setTimeout(function() { $("#warm-restart-btn").css("opacity", "1"); $("#warm-restart-btn").on("click", function() { $("html").removeClass("warm-ending"); if (window.SugarCube && window.SugarCube.Engine) { window.SugarCube.Engine.play("Start"); } else if (window.Engine && typeof window.Engine.play === "function") { window.Engine.play("Start"); } }); }, 300); } }, 100); }, 800); } }, 120); }, 1000); } }); </script>