TOP > 教職教養 一覧 [教採スタンダード] > 類型論と特性論、心理検査 ↓タブ切替でモード変更可↓ 参考書モード マッチングゲーム 講義モード(準備中) ◯類型論…いくつかの型に分ける コツ ○特性論…いくつかの観点を設定して評価する ○心理検査 コツ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>教採・スピードマッチング</title> <style> /* --- ベース設定 --- */ body { margin: 0; overflow: hidden; font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Helvetica Neue", Arial, sans-serif; background-color: #202020; color: white; touch-action: auto; user-select: none; display: flex; justify-content: center; align-items: center; height: 100vh; } /* --- アプリの枠（凝縮版） --- */ #app-frame { position: relative; width: 100%; max-width: 500px; /* ここで高さを制限 */ height: 100%; max-height: 720px; background-color: #1e293b; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.3); display: flex; flex-direction: column; } @media (max-width: 500px) { /* スマホでも縦長すぎないようにする */ #app-frame { border-radius: 0; } } /* --- 画面共通 --- */ .screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: rgba(44, 62, 80, 0.98); transition: opacity 0.3s; /* 中央寄せ配置 */ display: flex; flex-direction: column; justify-content: center; align-items: center; } .hidden { display: none !important; opacity: 0; pointer-events: none; } h1 { font-size: 20px; color: #f1c40f; text-shadow: 0 0 10px rgba(241, 196, 15, 0.5); margin: 6px 0 10px; text-align: center; } /* --- ボタン類 --- */ button { background: #6366f1; color: white; border: none; padding: 12px 24px; border-radius: 999px; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); transition: transform 0.1s, box-shadow 0.1s; } button:active { transform: translateY(2px); box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2); } button.start-btn { background: #4285f4; box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3); font-size: 16px; padding: 12px 20px; width: 100%; } button.start-btn:active { box-shadow: 0 2px 4px rgba(66, 133, 244, 0.2); } /* 入力エリア */ .input-box { width: 90%; background: #fff; color: #333; padding: 15px; border-radius: 10px; box-sizing: border-box; max-height: 35vh; overflow-y: auto; } textarea { width: 100%; height: 120px; box-sizing: border-box; resize: vertical; } /* カスタム入力オーバーレイ */ .custom-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: flex; align-items: center; justify-content: center; pointer-events: none; } .custom-overlay-bg { display: none; } .custom-overlay #custom-input-box { position: relative; z-index: 1; max-height: 85vh; width: 90%; max-width: 520px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); pointer-events: auto; } .custom-close-btn { position: absolute; top: 12px; right: 12px; background: #e74c3c; color: white; border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; font-weight: bold; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; } .custom-close-btn:hover { background: #c0392b; } .custom-close-btn:active { transform: scale(0.95); } /* PCでは設定カードの上に伸びる形 */ @media (min-width: 501px) { .custom-overlay { position: absolute; background: transparent; align-items: flex-start; padding-top: 20px; } .custom-overlay-bg { display: none; } .custom-overlay #custom-input-box { max-width: 90%; box-shadow: 0 8px 24px rgba(0,0,0,0.3); } } /* --- スタート画面: 中央配置 --- */ #start-screen { justify-content: flex-start; padding: 0; box-sizing: border-box; overflow: hidden; } #start-top { flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 46px 0 6px; } #start-top h1 { margin: 0 0 8px; } #preset-scroll-area { flex: 1 1 auto; width: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; min-height: 0; padding: 12px 0 8px; } #start-bottom { flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 0 0 16px; } #start-coach-panel { width: 90%; background: rgba(255,255,255,0.92); color: #333; padding: 8px 10px; border-radius: 12px; box-sizing: border-box; display: flex; gap: 8px; align-items: flex-end; margin-bottom: 8px; } #start-coach-img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; border: 2px solid rgba(0,0,0,0.15); background: rgba(0,0,0,0.05); flex: 0 0 auto; } #start-coach-bubble { flex: 1 1 auto; background: #fff; border-radius: 14px; padding: 8px 10px; font-weight: 900; font-size: 13px; line-height: 1.25; box-shadow: 0 6px 12px rgba(0,0,0,0.08); position: relative; min-height: 48px; display: flex; align-items: center; } #start-coach-bubble:before { content: ""; position: absolute; left: -10px; bottom: 18px; border-width: 10px; border-style: solid; border-color: transparent #fff transparent transparent; } /* --- スタート画面: 設定カード --- */ .settings-card { width: 90%; background: #ffffff; border: 2px solid #e2e8f0; color: #333; padding: 8px 12px; border-radius: 12px; box-sizing: border-box; margin-top: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); position: relative; } .setting-label-col { width: 76px; font-size: 11px; color: #666; font-weight: bold; white-space: nowrap; text-align: left; flex-shrink: 0; } .settings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .settings-title { font-weight: 900; font-size: 15px; color: #2c3e50; } .settings-toggle-btn { background: transparent; color: #7f8c8d; border: 1px solid #ccc; box-shadow: none; padding: 4px 10px; font-size: 12px; border-radius: 4px; display: flex; align-items: center; gap:4px; } .settings-toggle-btn:active { transform: translateY(1px); } .settings-row-display { display: flex; gap: 12px; } .settings-info-box { flex: 1; background: rgba(0,0,0,0.04); border-radius: 8px; padding: 8px; text-align: center; } .settings-label { font-size: 11px; color: #666; margin-bottom: 2px; } .settings-value { font-size: 14px; font-weight: 900; color: #2c3e50; } /* 詳細設定エリア */ .advanced { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #ccc; } .adv-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; font-size: 13px; flex-wrap: wrap; } .adv-row label { font-weight: 900; } .adv-label { font-weight: 900; min-width: 72px; } #custom-wave { width: 86px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.2); box-sizing: border-box; } .time-mode-group { display: flex; flex-wrap: wrap; gap: 8px; } .time-mode-group label { display: flex; align-items: center; gap: 2px; font-weight: normal; font-size: 12px; background: #fff; padding: 4px 6px; border-radius: 4px; border: 1px solid #ddd; } .adv-hint { font-size: 11px; color: #666; } /* --- ゲーム画面レイアウト --- */ #game-container { position: relative; width: 100%; height: 100%; background: radial-gradient(circle, #334155 0%, #0f172a 100%); display: flex; flex-direction: column; } /* 上部のプレイフィールド */ #play-field { flex: 1 1 auto; display: flex; flex-direction: column; max-height: 520px; margin: 0; width: 100%; position: relative; touch-action: none; } /* エリアの操作ヒント（グラデーション） */ #play-field::before, #play-field::after { content: ""; position: absolute; left: 0; width: 100%; height: 20px; z-index: 15; pointer-events: none; animation: hintPulse 2s ease-in-out infinite; } #play-field::before { top: 0; background: linear-gradient(to bottom, rgba(241,196,15,0.25), transparent); } #play-field::after { bottom: 0; background: linear-gradient(to top, rgba(52,152,219,0.25), transparent); } @keyframes hintPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } } /* エリアラベル（中央ディバイダーのみ残す） */ /* --- チュートリアル指アニメーション --- */ #tutorial-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; display: none; } #tutorial-overlay.active { display: block; } .tut-finger { position: absolute; left: 50%; font-size: 48px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); transform: translate(-50%, 0) rotate(-20deg); opacity: 0; animation: fingerGuide 2.4s ease-in-out forwards; } .tut-trail { position: absolute; left: 50%; width: 4px; transform: translateX(-50%); background: linear-gradient(to top, rgba(241,196,15,0.6), rgba(241,196,15,0)); border-radius: 4px; opacity: 0; animation: trailGuide 2.4s ease-in-out forwards; } @keyframes fingerGuide { 0% { bottom: 28%; opacity: 0; transform: translate(-50%, 0) rotate(-20deg) scale(0.7); } 12% { opacity: 0.85; transform: translate(-50%, 0) rotate(-20deg) scale(1); } 55% { bottom: 62%; opacity: 0.85; transform: translate(-50%, 0) rotate(-15deg) scale(1); } 70% { bottom: 62%; opacity: 0.7; transform: translate(-50%, 0) rotate(-15deg) scale(1.15); } 85% { opacity: 0.3; } 100% { bottom: 62%; opacity: 0; transform: translate(-50%, 0) rotate(-15deg) scale(1.2); } } @keyframes trailGuide { 0% { bottom: 28%; height: 0; opacity: 0; } 12% { opacity: 0.7; } 55% { bottom: 28%; height: 34%; opacity: 0.5; } 70% { opacity: 0.3; } 100% { bottom: 28%; height: 34%; opacity: 0; } } /* ターゲット（上：B群） */ #target-area { flex: 1 1 50%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; align-content: flex-end; gap: 8px; padding: 6px 28px 14px; box-sizing: border-box; } /* 中央ライン */ #center-divider { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; position: relative; } #center-divider::before, #center-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.25), transparent); } .center-arrow { font-size: 16px; color: rgba(241,196,15,0.9); animation: pulseArrow 1.6s ease-in-out infinite; } @keyframes pulseArrow { 0%,100% { opacity: 0.5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } } /* ソース（下：A群） */ #source-area { flex: 1 1 50%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; padding: 14px 28px 6px; box-sizing: border-box; } /* 残り組数表示 */ #center-indicator { background: rgba(44, 62, 80, 0.95); border: 1px solid rgba(255,255,255,0.3); padding: 3px 12px; border-radius: 20px; font-size: 11px; color: #fff; font-weight: bold; z-index: 5; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } /* カードデザイン */ .card { background: white; color: #2c3e50; border-radius: 10px; padding: 7px 12px; padding-top: 10px; font-weight: bold; font-size: 13px; box-shadow: 0 3px 6px rgba(0,0,0,0.3); cursor: pointer; user-select: none; transition: transform 0.2s, box-shadow 0.2s; text-align: center; display: flex; justify-content: center; align-items: center; min-width: 56px; min-height: 32px; max-width: 42%; position: relative; } .card ruby { ruby-position: over; } .card rt { font-size: 0.5em; color: #888; font-weight: normal; } @media (max-width: 400px) { .card { font-size: 12px; padding: 6px 10px; padding-top: 12px; min-width: 48px; min-height: 28px; max-width: 42%; } .card rt { font-size: 0.4em; } #target-area, #source-area { padding-left: 20px; padding-right: 20px; gap: 6px; } } .card.target { background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 16px; } .card.source { background: #fff; border: 2px solid #e2e8f0; border-bottom: 4px solid #cbd5e1; border-radius: 16px; } .card.highlight { transform: scale(1.1); background: #fbbf24; color: #fff; border-color: #fbbf24; border-bottom-color: #d97706; box-shadow: 0 8px 16px rgba(251, 191, 36, 0.3); } .card.matched { animation: popOut 0.4s forwards; } @keyframes popOut { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.8; } 100% { transform: scale(0); opacity: 0; } } /* SVG線描画 */ #svg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9; } .drag-line { stroke: #f1c40f; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(241, 196, 15, 0.8)); } /* --- 最下部 HUD --- */ #bottom-hud { flex: 0 0 auto; display: flex; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2)); pointer-events: auto; touch-action: auto; z-index: 12; align-items: flex-end; } #bottom-hud.hidden-ui { display: none; } /* 左60%：ゲージとセリフ */ #hud-left { width: 60%; padding: 10px 10px 14px 14px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; } #time-stack { width: 100%; } .hud-label { font-size: 11px; color: #ddd; margin-bottom: 2px; text-shadow: 1px 1px 2px #000; } #time-gauge { width: 100%; height: 12px; border-radius: 6px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); overflow: hidden; } #time-gauge-fill { height: 100%; width: 100%; background: #2ecc71; transition: width 0.1s linear; } #coach-text { font-size: 15px; font-weight: 900; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,0.5); text-shadow: 1px 1px 2px #000; line-height: 1.3; text-align: center; border: 1px solid rgba(255,255,255,0.1); color: #fff; } /* 右40%：画像（正方形固定） */ #hud-right { width: 40%; position: relative; } #coach-img-container { width: 100%; padding-top: 100%; /* Aspect Ratio 1:1 */ position: relative; } #coach-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-top-left-radius: 20px; border: 3px solid rgba(255,255,255,0.8); border-bottom: none; border-right: none; background: rgba(255,255,255,0.2); box-shadow: -4px -4px 10px rgba(0,0,0,0.5); } /* --- ペナルティ（フリーズ） --- */ #freeze-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(231, 76, 60, 0.3); z-index: 100; display: none; justify-content: center; align-items: center; backdrop-filter: blur(2px); } #freeze-overlay.active { display: flex; touch-action: none; overflow: hidden; } #freeze-msg { font-size: 30px; font-weight: 900; color: #fff; text-shadow: 0 0 10px #c0392b; transform: rotate(-10deg); border: 4px solid #fff; padding: 20px; background: rgba(192, 57, 43, 0.8); animation: shake 0.5s both; } @keyframes shake { 10%, 90% { transform: translate3d(-5px, 0, 0); } 20%, 80% { transform: translate3d(10px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-10px, 0, 0); } 40%, 60% { transform: translate3d(10px, 0, 0); } } /* 結果画面リスト */ #review-list { list-style: none; padding: 0; width: 100%; background: #fff; color: #333; border-radius: 5px; max-height: 130px; overflow-y: auto; text-align: left; } #review-list li { padding: 8px 10px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; } .wrong-highlight { color: #e74c3c; font-weight: bold; } .preset-load-btn{ font-size:12px; padding:8px 12px; border:none; cursor:pointer; border-radius:12px; color:#fff; background:#27ae60; box-shadow:0 3px 0 #1e8449; } .preset-load-btn:active{ transform: translateY(2px); box-shadow:0 1px 0 #1e8449; } /* 同時出現数ボタン */ .wave-btn-group { display:flex; gap:6px; justify-content:center; } .wave-btn { flex:1; padding:6px 0; border-radius:8px; font-size:12px; font-weight:900; background:#ecf0f1; color:#2c3e50; border:2px solid #bdc3c7; box-shadow:0 2px 0 #95a5a6; cursor:pointer; text-align:center; } .wave-btn:active { transform:translateY(2px); box-shadow:none; } .wave-btn.active { background:#3498db; color:#fff; border-color:#2980b9; box-shadow:0 2px 0 #2471a3; } /* 制限時間スライダー */ .time-slider-wrap { width:100%; } .time-slider-row { display:flex; align-items:center; gap:10px; } .time-slider-row input[type="range"] { flex:1; height:6px; -webkit-appearance:none; appearance:none; background:linear-gradient(to right,#2ecc71,#f1c40f,#e74c3c); border-radius:3px; outline:none; } .time-slider-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid #3498db; box-shadow:0 2px 6px rgba(0,0,0,0.3); cursor:pointer; } .time-slider-value { font-weight:900; font-size:15px; min-width:52px; text-align:center; color:#2c3e50; } .nolimit-row { display:flex; align-items:center; gap:6px; font-size:12px; margin-top:6px; } .time-slider-row.disabled input[type="range"] { opacity:0.3; pointer-events:none; } .time-slider-row.disabled .time-slider-value { opacity:0.3; } #validation-msg { font-size:12px; font-weight:900; padding:6px 8px; border-radius:8px; margin-bottom:8px; display:none; line-height:1.4; } #validation-msg.error { display:block; background:rgba(231,76,60,0.12); color:#e74c3c; border:1px solid rgba(231,76,60,0.3); } #validation-msg.warn { display:block; background:rgba(241,196,15,0.12); color:#b7950b; border:1px solid rgba(241,196,15,0.3); } .wave-btn.disabled { opacity:0.3; pointer-events:none; } .start-btn:disabled { opacity:0.4; pointer-events:none; } /* 難易度ボタン */ .diff-btn-group { display:flex; gap:6px; justify-content:center; } .diff-btn { flex:1; padding:6px 0; border-radius:8px; font-size:12px; font-weight:900; background:#ecf0f1; color:#2c3e50; border:2px solid #bdc3c7; box-shadow:0 2px 0 #95a5a6; cursor:pointer; text-align:center; } .diff-btn:active { transform:translateY(2px); box-shadow:none; } .diff-btn.active { background:#3498db; color:#fff; border-color:#2980b9; box-shadow:0 2px 0 #2471a3; } .diff-btn.disabled { opacity:0.3; pointer-events:none; } /* プリセットグループ */ .preset-group-section { width:100%; border-radius:14px; padding:8px 8px 6px; margin-bottom:10px; box-sizing:border-box; position:relative; } function updatePresetFromUI(){ if(selectedIndex < 0 || !DATA.presets[selectedIndex]) return; const p = DATA.presets[selectedIndex]; p.name = byId("presetName").value.trim(); p.id = byId("presetId").value.trim(); p.group = byId("presetGroup").value.trim(); // UIがロックされていない場合のみ更新 if (!byId("presetGroupColor").disabled) p.groupColor = byId("presetGroupColor").value || ""; if (!byId("presetGroupDesc").disabled) p.groupDesc = byId("presetGroupDesc").value.trim(); if (!byId("presetGroupOpacity").disabled) p.groupOpacity = parseFloat(byId("presetGroupOpacity").value) || 0.18; if (!byId("presetGroupEqualWidth").disabled) p.groupEqualWidth = byId("presetGroupEqualWidth").checked; if (!byId("presetGroupVertical").disabled) p.groupVertical = byId("presetGroupVertical").checked; if (!byId("presetHintAnimation").disabled) p.hintAnimation = byId("presetHintAnimation").value || "orbit"; // グループ色・説明・オプションを同グループ全体に伝播 if(p.group){ DATA.presets.forEach(op=>{ if(op !== p && (op.group||"").trim() === p.group){ op.groupColor = p.groupColor; op.groupDesc = p.groupDesc; op.groupOpacity = p.groupOpacity; op.groupEqualWidth = p.groupEqualWidth; op.groupVertical = p.groupVertical; op.hintAnimation = p.hintAnimation; } }); } p.pairs = pairsToArray(byId("presetPairs").value); } .preset-group-btns { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; } .preset-group-label { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; padding:5px 10px 5px 12px; border-radius:8px; margin-bottom:5px; border-left:4px solid currentColor; background:rgba(0,0,0,0.25); } .preset-group-name { font-weight:900; font-size:13px; color:#fff; } .preset-group-desc { font-size:11px; color:rgba(255,255,255,0.5); font-weight:normal; font-style:italic; } #min-pairs-msg { font-size:12px; font-weight:900; color:#e74c3c; margin-top:6px; display:none; } /* プリセットボタン */ .preset-btn-group { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; } .preset-btn { padding:7px 14px; border-radius:12px; font-size:13px; font-weight:900; background:var(--gc-bg, rgba(255,255,255,0.12)); color:#fff; border:2px solid var(--gc-border, rgba(255,255,255,0.35)); box-shadow:none; cursor:pointer; transition:transform 0.1s, background 0.2s; } .preset-btn:active { transform:translateY(2px); } .preset-btn.active { background:var(--gc-active, #27ae60); color:#fff; border-color:var(--gc-active, #27ae60); box-shadow:0 3px 0 var(--gc-shadow, #1e8449); } /* クリアバッジ（星マーク） */ .clear-badge { display: inline-block; color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .clear-badge.gold { background: #f1c40f; } .clear-badge.silver { background: #95a5a6; } /* ランク表示 */ #result-screen { justify-content: flex-start !important; padding-top: 40px !important; overflow-y: auto !important; } .result-rank { font-size: 36px; font-weight: 900; line-height: 1; margin: 0; text-shadow: 0 0 20px currentColor, 0 0 40px currentColor; animation: rankPop 0.5s ease-out; } @keyframes rankPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); } } .result-rank.rank-s { color: #f1c40f; } .result-rank.rank-a { color: #e67e22; } .result-rank.rank-b { color: #3498db; } .result-data-card { width: 90%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 12px 14px; margin-top: 10px; text-align: left; box-sizing: border-box; } .result-data-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; } .result-data-label { font-size: 12px; color: #999; flex-shrink: 0; } .result-data-value { font-size: 15px; font-weight: 900; color: #fff; text-align: right; } .result-data-sep { border: none; border-top: 1px solid rgba(255,255,255,0.10); margin: 6px 0; } .result-badge-row { text-align: center; font-size: 12px; font-weight: 900; padding: 6px 0 2px; } .result-best-line { font-size: 11px; color: #aaa; text-align: right; } .result-best-line .new-record { color: #f1c40f; font-weight: 900; animation: recordFlash 0.6s ease-in-out 3; } @keyframes recordFlash { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } /* タブ切替 */ .input-tabs { display:flex; gap:0; } .input-tab { flex:1; padding:8px 0; text-align:center; font-size:12px; font-weight:900; background:rgba(0,0,0,0.06); color:#999; border:1px solid rgba(0,0,0,0.12); cursor:pointer; border-bottom:none; } .input-tab:first-child { border-radius:8px 0 0 0; } .input-tab:last-child { border-radius:0 8px 0 0; } .input-tab.active { background:#fff; color:#2c3e50; } .input-tab-body { border:1px solid rgba(0,0,0,0.12); border-radius:0 0 8px 8px; padding:8px; background:#fff; } /* テーブル入力 */ .pair-table { width:100%; border-collapse:collapse; font-size:13px; } .pair-table th { background:#ecf0f1; padding:6px 8px; font-size:11px; text-align:center; border:1px solid #ddd; color:#666; } .pair-table td { padding:0; border:1px solid #ddd; } .pair-table input { width:100%; border:none; padding:6px 8px; font-size:13px; outline:none; box-sizing:border-box; background:transparent; color:#333; } .pair-table input:focus { background:#fffde7; } .pair-table .row-num { width:28px; text-align:center; color:#999; font-size:11px; background:#f9f9f9; padding:4px; } .pair-table .del-cell { width:28px; text-align:center; } .pair-table .del-btn { background:none; border:none; color:#ccc; cursor:pointer; font-size:14px; padding:2px 6px; box-shadow:none; border-radius:0; } .pair-table .del-btn:hover { color:#e74c3c; } .table-controls { display:flex; gap:8px; margin-top:8px; } .table-controls button { font-size:11px; padding:5px 12px; border-radius:8px; background:#ecf0f1; color:#333; border:1px solid #ccc; box-shadow:none; cursor:pointer; font-weight:bold; } .table-controls button:active { transform:translateY(1px); } /* フルスクリーンボタン（右上固定） */ .fullscreen-btn { position: fixed; top: 10px; right: 10px; z-index: 1000; background: rgba(0,0,0,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 8px 14px; font-size: 12px; font-weight: bold; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; backdrop-filter: blur(4px); } .fullscreen-btn:hover { background: rgba(0,0,0,0.75); } .fullscreen-btn:active { transform: scale(0.95); } /* TOPに戻るボタン（左下固定） */ .back-to-top-btn { position: fixed; bottom: 10px; left: 10px; z-index: 1000; background: rgba(0,0,0,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 6px 12px; font-size: 11px; font-weight: bold; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); cursor: pointer; backdrop-filter: blur(4px); } .back-to-top-btn:hover { background: rgba(0,0,0,0.75); } .back-to-top-btn:active { transform: scale(0.95); } /* 疑似フルスクリーン（iOS対応） */ body.is-fullscreen { overflow: hidden !important; } body.is-fullscreen #app-frame { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: none !important; max-height: none !important; z-index: 99999 !important; border-radius: 0 !important; } /* 上部バー（全画面時のみ表示） */ #top-hud { flex: 0 0 auto; display: none; align-items: center; justify-content: flex-end; padding: 6px 10px; background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent); touch-action: auto; pointer-events: auto; z-index: 20; } body.is-fullscreen #top-hud { display: flex; } body.is-fullscreen #btnFullscreenGame, body.is-fullscreen #btnFullscreenResult, body.is-fullscreen .back-to-top-btn { display: none !important; } #btn-exit-fs { background: rgba(0,0,0,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 5px 10px; font-size: 11px; font-weight: bold; border-radius: 12px; box-shadow: none; cursor: pointer; } /* プリセット選択ヒント */ #preset-hint-text { text-align:center; font-size:13px; font-weight:900; color:#f1c40f; padding:6px 0; text-shadow:0 0 8px rgba(241,196,15,0.4); animation: presetHintPulse 1.5s ease-in-out infinite; } @keyframes presetHintPulse { 0%,100% { opacity:0.5; } 50% { opacity:1; } } .group-hint-finger { position:absolute; font-size:24px; pointer-events:none; z-index:20; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5)); transform:rotate(-45deg); animation-fill-mode:forwards; } .group-hint-finger.anim-orbit { animation: grpHintOrbit 3s linear 1 forwards; } .group-hint-finger.anim-vertical { animation: grpHintVertical 2.4s ease-in-out 1 forwards; } .group-hint-finger.anim-horizontal { animation: grpHintHorizontal 2.4s ease-in-out 1 forwards; } .group-hint-finger.anim-vertical-round { animation: grpHintVerticalRound 3s ease-in-out 1 forwards; } @keyframes grpHintOrbit { 0% { top:-18px; left:50%; opacity:1; } 25% { top:50%; left:calc(100% + 4px); opacity:1; } 50% { top:calc(100% + 4px); left:50%; opacity:1; } 75% { top:50%; left:-20px; opacity:1; } 100% { top:-18px; left:50%; opacity:0; } } @keyframes grpHintVertical { 0% { top:-18px; left:50%; opacity:0; } 10% { opacity:1; } 50% { top:calc(100% + 4px); left:50%; opacity:1; } 90% { opacity:0.3; } 100% { top:calc(100% + 4px); left:50%; opacity:0; } } @keyframes grpHintHorizontal { 0% { top:50%; left:-20px; opacity:0; } 10% { opacity:1; } 50% { top:50%; left:calc(100% + 4px); opacity:1; } 90% { opacity:0.3; } 100% { top:50%; left:calc(100% + 4px); opacity:0; } } @keyframes grpHintVerticalRound { 0% { top:calc(100% + 4px); left:50%; opacity:0; } 8% { opacity:1; } 40% { top:-18px; left:50%; opacity:1; } 50% { top:-18px; left:50%; opacity:1; } 88% { top:calc(100% + 4px); left:50%; opacity:0.6; } 100% { top:calc(100% + 4px); left:50%; opacity:0; } } </style> </head> <body> <div id="app-frame"> <div id="start-screen" class="screen"> <div id="start-top"> <h1>教採・スピードマッチング</h1> <div id="start-coach-panel"> <img id="start-coach-img" alt="教おじ" /> <div id="start-coach-bubble">がんばろう〜！</div> </div> </div> <div id="preset-scroll-area"> <div style="width:90%; box-sizing:border-box; position:relative;"> <div id="preset-btn-area" class="preset-btn-group"></div> </div> </div> <div id="custom-overlay" class="custom-overlay" style="display:none;"> <div class="custom-overlay-bg" id="custom-overlay-bg"></div> <div class="input-box" id="custom-input-box"> <button type="button" class="custom-close-btn" id="btnCloseCustom">✕</button> <p style="margin:0 0 4px 0; font-size:14px; font-weight:900; color:#2c3e50;">カスタム問題を入力</p> <p style="margin:0 0 10px 0; font-size:11px; color:#888;">1行に1組「A,B」の形式で入力してください。<br> ※入力内容はこの端末にのみ一時保存され、ページを閉じると消えます。</p> <div class="input-tabs"> <div class="input-tab active" id="tabText">テキスト入力</div> <div class="input-tab" id="tabTable">テーブル入力</div> </div> <div class="input-tab-body"> <div id="inputTextMode"> <textarea id="raw-input" placeholder="例： Apple,りんご Dog,犬">__SM_CLOSE_TEXTAREA__ </div> <div id="inputTableMode" style="display:none;"> <div style="max-height:360px; overflow-y:auto;"> <table class="pair-table" id="pairTable"> <thead><tr><th style="width:28px;">#</th><th>A（問題）</th><th>B（答え）</th><th style="width:28px;"></th></tr></thead> <tbody id="pairTableBody"></tbody> </table> </div> <div class="table-controls"> <button type="button" id="btnAddRow">+ 行を追加</button> <button type="button" id="btnClearEmpty">空行を削除</button> </div> </div> </div> </div> </div> <div id="start-bottom"> <div class="settings-card"> <div style="display:flex; align-items:center; gap:8px; margin-bottom:6px;"> <div style="font-size:11px; color:#666; font-weight:bold; white-space:nowrap;">制限時間</div> <div id="time-info-display" style="font-size:15px; font-weight:900; min-width:50px; text-align:center; white-space:nowrap;"> <span id="time-info-value" style="color:#2c3e50;">—</span> </div> <label style="cursor:pointer; display:flex; align-items:center; gap:3px; font-size:12px; color:#666; flex:1;"> <input type="checkbox" id="chkNoLimit"> 無制限にする </label> <button type="button" class="settings-toggle-btn" id="btnToggleSettings">⚙ 設定</button> </div> <div id="advancedSettings" class="advanced" style="display:none; margin-top:0;"> <label style="cursor:pointer; display:flex; align-items:center; gap:4px; font-size:12px; font-weight:bold; color:#666; margin-bottom:6px;"> <input type="checkbox" id="sound-toggle" checked> 音を鳴らす </label> <div style="display:flex; align-items:center; gap:8px; margin-bottom:4px;"> <div class="setting-label-col">制限のきつさ</div> <div class="diff-btn-group" id="diffBtnGroup" style="flex:1;"> <button type="button" class="diff-btn" data-diff="easy" data-sec="3">ゆとり版</button> <button type="button" class="diff-btn active" data-diff="normal" data-sec="2.5">ふつう版</button> </div> </div> <div style="display:flex; align-items:center; gap:8px; margin-bottom:4px;"> <div class="setting-label-col">同時出現数</div> <div class="wave-btn-group" id="waveBtnGroup" style="flex:1;"> <button type="button" class="wave-btn active" data-wave="3">3組程度</button> <button type="button" class="wave-btn" data-wave="5">5組程度</button> </div> </div> <div id="validation-msg" style="margin-top:4px; margin-left:84px; font-weight:900; min-height:1.2em;"></div> <div style="margin-top:10px; padding-top:8px; border-top:1px dashed #ccc;"> <button type="button" id="btnResetRecords" style="background:#fff; color:#e74c3c; border:1px solid #e74c3c; border-radius:8px; padding:6px 12px; font-size:11px; font-weight:900; cursor:pointer; box-shadow:none; width:100%;">🗑 このセットの記録をリセット</button> </div> </div> <div id="min-pairs-msg"></div> <div id="start-error-msg" style="display:none; font-size:12px; font-weight:900; color:#e74c3c; background:rgba(231,76,60,0.08); border:1px solid rgba(231,76,60,0.25); border-radius:8px; padding:6px 8px; margin-top:6px; line-height:1.4; text-align:center;"></div> <div style="margin-top:10px;"> <button class="start-btn" type="button" id="btnStartGame" style="width:100%;">▶ スタート</button> </div> </div> </div> <button type="button" class="fullscreen-btn" id="btnFullscreen">⛶ 全画面表示</button> </div> <div id="game-screen" class="screen hidden" style="background:transparent;"> <button type="button" class="fullscreen-btn" id="btnFullscreenGame">⛶ 全画面表示</button> <button type="button" class="back-to-top-btn" id="btnBackToTopGame">◀ TOP</button> <div id="game-container"> <div id="top-hud"> <button type="button" id="btn-exit-fs">✕ 全画面解除</button> </div> <div id="play-field"> <div id="target-area"></div> <div id="center-divider"> <span class="center-arrow">▲</span> <span id="center-indicator">残り <span id="remain-count">0</span></span> <span class="center-arrow">▲</span> </div> <div id="source-area"></div> <!-- チュートリアル指アニメーション --> <div id="tutorial-overlay"> <div class="tut-trail"></div> <div class="tut-finger">👆</div> </div> </div> <div id="bottom-hud"> <div id="hud-left"> <div id="time-stack"> <div class="hud-label">残り時間 <span id="time-display" style="font-weight:bold; color:#fff;">—</span></div> <div id="time-gauge"><div id="time-gauge-fill"></div></div> </div> <div id="coach-text">いそげ〜！</div> </div> <div id="hud-right"> <div id="coach-img-container"> <img id="coach-img" alt="教おじ" /> </div> </div> </div> <div id="freeze-overlay"> <div id="freeze-msg">MISS!!</div> </div> <svg id="svg-layer"></svg> </div> </div> <div id="result-screen" class="screen hidden"> <h1 id="result-title" style="display:none; margin:0 0 10px;"></h1> <div style="width:90%; text-align:center;"> <img id="result-coach-img" alt="教おじ" style="width:100px; height:100px; border-radius:18px; object-fit:cover; border:3px solid rgba(255,255,255,0.6); background:rgba(255,255,255,0.15); margin-bottom:6px;" /> <div style="display:flex; align-items:center; justify-content:center; gap:6px;"> <div id="result-rank-display" class="result-rank" style="display:none;"></div> <div id="rank-speed-comment" style="font-size:12px; font-weight:900; color:rgba(255,255,255,0.55); display:none;"></div> </div> <div id="rank-miss-comment" style="font-size:16px; font-weight:900; margin:4px 0; text-shadow:0 0 10px rgba(241,196,15,0.5); line-height:1.3;"></div> </div> <div id="result-data-card" class="result-data-card"> <div class="result-data-row"> <span class="result-data-label">今回のタイム</span> <span class="result-data-value"><span id="final-time" style="color:#f1c40f;">—</span> <span id="final-time-note" style="font-size:11px; color:#aaa;"></span></span> </div> <div id="result-best-row" class="result-data-row" style="display:none;"> <span class="result-data-label">自己ベスト</span> <span class="result-data-value" id="result-best-display" style="font-size:13px;"></span> </div> <div id="result-badge-sep" class="result-data-sep" style="display:none;"></div> <div id="result-badge-msg" class="result-badge-row" style="display:none;"></div> </div> <div id="review-box" style="width:90%; margin-top:14px; display:none;"> <div style="font-size:13px; font-weight:900; color:#e74c3c; margin-bottom:6px;">❌ ミスした問題</div> <ul id="review-list"></ul> </div> <div style="margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center;"> <button type="button" id="btnBackToTitle" style="background:#3498db; box-shadow:0 4px 0 #2980b9;">TOPに戻る</button> </div> <div id="result-ad-box" style="margin-top:20px; width:90%; display:none; background:rgba(0,0,0,0.6); padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,0.2); font-size:13px; text-align:center; line-height:1.4;"></div> <button type="button" class="fullscreen-btn" id="btnFullscreenResult">⛶ 全画面表示</button> </div> </div> <script> // --- Audio System --- let audioCtx = null; function initAudioFromUserGesture(){ if(audioCtx) return; try{ audioCtx = new (window.AudioContext || window.webkitAudioContext)(); } catch(e){ audioCtx = null; } } function playSound(type) { if (!document.getElementById('sound-toggle').checked) return; if (!audioCtx) return; if (audioCtx.state === 'suspended') { try{ audioCtx.resume(); }catch(e){} } const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.connect(gain); gain.connect(audioCtx.destination); const now = audioCtx.currentTime; if (type === 'correct') { osc.type = 'sine'; osc.frequency.setValueAtTime(880, now); osc.frequency.exponentialRampToValueAtTime(1760, now + 0.1); gain.gain.setValueAtTime(0.3, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.3); osc.start(now); osc.stop(now + 0.3); } else if (type === 'auto_match') { osc.type = 'sine'; osc.frequency.setValueAtTime(1200, now); osc.frequency.exponentialRampToValueAtTime(2000, now + 0.1); gain.gain.setValueAtTime(0.2, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.2); osc.start(now); osc.stop(now + 0.2); } else if (type === 'wrong') { osc.type = 'sawtooth'; osc.frequency.setValueAtTime(150, now); osc.frequency.linearRampToValueAtTime(100, now + 0.3); gain.gain.setValueAtTime(0.5, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.5); osc.start(now); osc.stop(now + 0.5); } else if (type === 'clear') { osc.type = 'triangle'; osc.frequency.setValueAtTime(523, now); osc.frequency.setValueAtTime(659, now + 0.1); osc.frequency.setValueAtTime(783, now + 0.2); osc.frequency.setValueAtTime(1046, now + 0.3); gain.gain.setValueAtTime(0.3, now); gain.gain.linearRampToValueAtTime(0, now + 1.2); osc.start(now); osc.stop(now + 1.2); } } // --- Game State --- let allPairs = [], remainingPairs = [], currentWavePairs = [], missedPairs = []; let waveSize = 5; let currentWaveSizes = []; let startTime = 0; let timerInterval = null; let isFrozen = false; let gameEnded = false; let timeLimitSec = 60; // 0=制限なし let coachInterval = null; let interactionReady = false; // --- Embed/Parent bridge --- const __SM_EMBED_ID__ = "sm-embed-sc05pwdn"; // --- GAS Analytics --- const __SM_GAS_URL__ = "https://script.google.com/macros/s/AKfycbyL3NUBcCPkPuIzPqAmQjlNbq8sckoZa6XDr7G5oF-Cot-XAK_zr2FejA92gDMr-mZ7bA/exec"; function smInitUUID() { var KEY = 'skyosai_uuid_v1'; var id = null; try { id = localStorage.getItem(KEY); } catch(e){} if (!id) { id = 'user_' + Math.random().toString(36).substring(2,10) + Math.random().toString(36).substring(2,10); try { localStorage.setItem(KEY, id); } catch(e){} } return id; } const __SM_UID__ = smInitUUID(); function sendResult(isCleared, rankLetter) { if (!__SM_GAS_URL__) return; var _pr = activePresetId ? embeddedPresets.find(function(x){ return x.id === activePresetId; }) : null; if (_pr && _pr.customEditable) return; try { var elapsed = ((Date.now() - startTime) / 1000).toFixed(1); var missed = missedPairs.map(function(p){ return p.a + '→' + p.b; }); var badgeType = ''; if (isCleared) badgeType = (missedPairs.length === 0) ? 'gold' : 'silver'; var payload = { appType: 'speedmatch', uid: __SM_UID__, presetId: activePresetId || '', presetName: (function(){ var pr = embeddedPresets.find(function(x){ return x.id === activePresetId; }); return pr ? (pr.name || pr.id) : ''; })(), waveSize: waveSize, difficulty: getSelectedDifficulty(), timeLimitSec: timeLimitSec, totalPairs: allPairs.length, missCount: missedPairs.length, isCleared: isCleared, clearTime: parseFloat(elapsed), rank: rankLetter || '', badge: badgeType, missedPairs: missed.join(' | '), url: (function(){ try { return window.parent !== window ? window.parent.location.href : window.location.href; } catch(e) { return document.referrer || window.location.href; } })(), ua: navigator.userAgent }; fetch(__SM_GAS_URL__, { method: 'POST', mode: 'no-cors', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }) .catch(function(e){ console.error('SM log error', e); }); } catch(e){ console.error('SM sendResult error', e); } } // --- Embedded Data (generated) --- const APP_DATA = {"version":1,"appName":"教採・スピードマッチング","coach":{"images":["https://skyosai.com/wp-content/uploads/2025/12/教おじ_01.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_02.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_03.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_04.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_05.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_06.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_07.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_08アウチ.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_09アウチ2.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_10頑張る.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_11頑張る2.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_12頑張る3.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_13困っている1.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_14困っている2.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_15困っている3.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_16困っている4.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_17困っている5.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_18指立て.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_19出来た.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_20出来た2.jpg","https://skyosai.com/wp-content/uploads/2025/12/教おじ_21両手でまる.jpg"],"topLines":["がんばろう〜","今日もコツコツ","迷ってる暇はない！一問一問に魂を込めろ！","よし、今日も最高のアウトプットをしよう！","楽しみながら学ぶんだ！","やる気が起きない時は、とりあえず手を動かそう。","燃えてきたか！？その情熱をすべての解答にぶつけろ！","思考と指先をシンクロさせるんだ！","流れるように結んでいけ！","リズムに乗れば、正解は向こうからやってくる！","繰り返すたびにパワーアップ！もう1回！","クリアしたところには星マークがつくぞ。"],"normalLines":["いそげ〜！","急げ急げ！","集中！","まだ間に合う！","あと少し！","いける！","がんばれ！","ミス注意！","リズム良く繋げ！","視界を広げて全体を見るんだ","自分との戦いだ"],"hurryLines":["急げ！","時間ないぞ！","ラストスパート！","落ち着いて手早く！","加速しろ！ギアを上げるんだ！","脳をフル回転させろ！","直感を信じろ！迷いは敵だ！","コンマ一秒を削り出せ！","ここからの加速が勝負だぞ！"],"panicLines":["やばい！","あと少し！","間に合えーー！","急げーー！","はやくはやく〜","フルスロットルだ！","魂のプレーを見せろ！","正解が呼んでるぞ！"],"rankSLines":["高速すぎる！","反射神経が異次元！","達人のスピード！","電光石火！","指のオーバーヒート注意だ！","新幹線より速い！"],"rankALines":["なかなかのスピード！","いいテンポ！","スムーズな指さばき！","安定したスピード！","いい感じの加速だ！"],"rankBLines":["よくやった！","堅実にクリア！","粘り強くやりきったな！","GOOD！","焦らずクリア！","着実に前に進んだぞ！"],"noMissLines":["完璧クリアで知識が完全に定着してるな！","パーフェクトで一切の迷いがなかったぞ！","ノーミスはすごい！自信を持っていいぞ！","全問正解！知識のネットワークが盤石だな！","ミスなしクリア！もう忘れることはないぞ！","知識の精度が素晴らしい！","文句なしのパーフェクトだ！"],"missLines":["間違えたところは復習しよう！","以下内容をもう一度確認してみよう！","次はノーミスでいけるぞ！","間違えた分だけ賢くなれるぞ！","ミスは伸びしろだ！次こそ全問正解だ！","もう一回やればきっとパーフェクトだ！","知識の穴をどんどん埋めていこう！","間違いから学べる人は強い！","あとちょっとだ！ゴールドバッジを目指そう！"],"timeupLines":["おしい！つぎこそ！","タイムアップ！次は、あと数秒の壁を破ろう！","挑戦はこれから！即、再起動だ！","次こそは必ず時間内に決めるぞ！","内容が多かったから仕方ない！"],"adText":"きょうさい対策ブログの教材→<a href=\"https://skyosai.com/shop\" target=\"_blank\" style=\"color:#3b82f6; text-decoration:underline; font-weight:bold;\">ショップ</a>へ"},"presets":[{"id":"sinri8","name":"1類型論と特性論、心理検査[人名]","pairs":[{"a":"肥満型・細長型などの人格分類","b":"クレッチマー"},{"a":"内胚葉・外胚葉などの人格分類","b":"シェルドン"},{"a":"外向型・内向型の2類型","b":"ユング"},{"a":"『生の諸形式』","b":"シュプランガー"},{"a":"心誌(サイコグラフ)","b":"オルポート"},{"a":"モーズレイ人格目録(MPI)","b":"アイゼンク"},{"a":"16PF","b":"キャッテル"},{"a":"5因子モデル(ビッグ・ファイブ)","b":"ゴールドバーグ"},{"a":"YG性格検査","b":"矢田部達郎"},{"a":"ミネソタ多面人格目録(MMPI)","b":"ハサウェイとマッキンリー"},{"a":"エゴグラム","b":"デュセイ"},{"a":"P-Fスタディ","b":"ローゼンツヴァイク"},{"a":"文章完成テスト(SCT)","b":"エビングハウス"},{"a":"ロールシャッハ・テスト","b":"ロールシャッハ"},{"a":"主題統覚検査(TAT)","b":"マレーとモーガン"},{"a":"バウム・テスト","b":"コッホ"},{"a":"HTPテスト","b":"バック"}],"group":"人格・集団・評価","groupColor":"#e74c3c","groupDesc":"関連が深い人名or用語を答える(プリセットごとに固定)","groupOpacity":0.18,"groupEqualWidth":true,"groupVertical":true,"hintAnimation":"vertical-round","customEditable":false},{"id":"sinri9","name":"2適応機制[用語]","pairs":[{"a":"2つの魅力的な目標で迷う","b":"接近-接近型"},{"a":"2つの嫌な目標で迷う","b":"回避-回避型"},{"a":"魅力と嫌悪が共存する目標への葛藤","b":"接近-回避型"},{"a":"苦痛な記憶を無意識に封じ込める","b":"抑圧"},{"a":"幼い発達段階の行動に戻る","b":"退行"},{"a":"困難から空想や病気に逃げ込む","b":"逃避"},{"a":"思考から感情を切り離す","b":"隔離"},{"a":"別の相手や物に八つ当たりする","b":"置き換え"},{"a":"欲求を芸術やスポーツなどに向ける","b":"昇華"},{"a":"劣等感を別の得意分野で埋め合わせる","b":"補償"},{"a":"似たもので我慢して満足を得る","b":"代償"},{"a":"もっともらしい理屈で弁解する","b":"合理化"},{"a":"本心とは正反対の態度をとる","b":"反動形成"},{"a":"難しい理屈を使って抽象的に論じる","b":"知性化"},{"a":"自分の感情を相手のものと思い込む(責任転嫁)","b":"投影"},{"a":"理想の他人の特徴を自分に取り込む","b":"同一視"}],"group":"人格・集団・評価","groupColor":"#e74c3c","groupDesc":"関連が深い人名or用語を答える(プリセットごとに固定)","groupOpacity":0.18,"groupEqualWidth":true,"groupVertical":true,"hintAnimation":"vertical-round","customEditable":false},{"id":"sinri10","name":"3心理療法・集団の心理学[人名]","pairs":[{"a":"行動療法(命名)","b":"アイゼンク"},{"a":"系統的脱感作法","b":"ウォルピ"},{"a":"箱庭療法","b":"ローエンフェルト、カルフ"},{"a":"心理劇(サイコドラマ)","b":"モレノ"},{"a":"認知療法","b":"ベック"},{"a":"論理療法(論理情動療法)","b":"エリス"},{"a":"ゲシュタルト療法","b":"パールズ"},{"a":"森田療法","b":"森田{正馬|まさたけ}"},{"a":"内観療法","b":"吉本{伊信|いしん}"},{"a":"自律訓練法","b":"シュルツ"},{"a":"B=f(P、E)の公式","b":"レヴィン"},{"a":"社会的手抜き","b":"リンゲルマン"},{"a":"リーダーシップ3類型","b":"レヴィン"},{"a":"PM理論","b":"三隅{二不二|じふじ}"},{"a":"ソシオメトリック・テスト","b":"モレノ"},{"a":"ゲス・フー・テスト","b":"ハーツホーン"}],"group":"人格・集団・評価","groupColor":"#e74c3c","groupDesc":"関連が深い人名or用語を答える(プリセットごとに固定)","groupOpacity":0.18,"groupEqualWidth":true,"groupVertical":true,"hintAnimation":"vertical-round","customEditable":false},{"id":"sinri11","name":"4評価や働きかけに関係した心理効果[用語]","pairs":[{"a":"中央に評価が集中","b":"中心化傾向"},{"a":"甘く評価する","b":"寛容効果(寛大効果)"},{"a":"自分の能力を基準に他者を評価","b":"対比効果(対比誤差)"},{"a":"問題が簡単すぎて得点が上限に集中","b":"天井効果"},{"a":"一般的な性格記述を自分特有と思う","b":"バーナム効果"},{"a":"教師の期待が生徒の成績を向上させる","b":"ピグマリオン効果"},{"a":"教師の低い期待で生徒の成績が下がる","b":"ゴーレム効果"},{"a":"目立つ特徴に引きずられて全体を評価","b":"ハロー効果(光背効果)"},{"a":"注目・期待されることで生産性が向上","b":"ホーソン効果"},{"a":"思い込みで偽薬でも効果が現れる","b":"プラセボ効果"},{"a":"説得が逆効果で反発を招く","b":"ブーメラン効果"},{"a":"時間経過で不信感が薄れ信頼性が高まる","b":"スリーパー効果"},{"a":"騒音の中でも興味ある話は聞こえる","b":"カクテルパーティー効果"}],"group":"人格・集団・評価","groupColor":"#e74c3c","groupDesc":"関連が深い人名or用語を答える(プリセットごとに固定)","groupOpacity":0.18,"groupEqualWidth":true,"groupVertical":true,"hintAnimation":"vertical-round","customEditable":false},{"id":"custum","name":"自分で問題を作成する","pairs":[{"a":"北海道","b":"札幌市"},{"a":"宮城県","b":"仙台市"},{"a":"神奈川県","b":"横浜市"},{"a":"愛知県","b":"名古屋市"},{"a":"兵庫県","b":"神戸市"},{"a":"島根県","b":"松江市"},{"a":"香川県","b":"高松市"},{"a":"沖縄県","b":"那覇市"}],"group":"カスタム問題","groupColor":"#879eb5","groupDesc":"","groupOpacity":0.08,"groupEqualWidth":true,"groupVertical":true,"hintAnimation":"none","customEditable":true}],"gasUrl":"https://script.google.com/macros/s/AKfycbyL3NUBcCPkPuIzPqAmQjlNbq8sckoZa6XDr7G5oF-Cot-XAK_zr2FejA92gDMr-mZ7bA/exec","__gasUrl":"https://script.google.com/macros/s/AKfycbyL3NUBcCPkPuIzPqAmQjlNbq8sckoZa6XDr7G5oF-Cot-XAK_zr2FejA92gDMr-mZ7bA/exec"}; const __SM_SELECTED_PRESET_ID__ = "sinri8"; const coachImages = (APP_DATA.coach && APP_DATA.coach.images) ? APP_DATA.coach.images : []; const startCoachLines = (APP_DATA.coach && APP_DATA.coach.topLines) ? APP_DATA.coach.topLines : ["がんばろう〜！"]; const coachLinesNormal = (APP_DATA.coach && APP_DATA.coach.normalLines) ? APP_DATA.coach.normalLines : ["いそげ〜！"]; const coachLinesHurry = (APP_DATA.coach && APP_DATA.coach.hurryLines) ? APP_DATA.coach.hurryLines : ["急げ！"]; const coachLinesPanic = (APP_DATA.coach && APP_DATA.coach.panicLines) ? APP_DATA.coach.panicLines : ["やばい！"]; const coachRankSLines = (APP_DATA.coach && APP_DATA.coach.rankSLines) ? APP_DATA.coach.rankSLines : ["神速クリア！"]; const coachRankALines = (APP_DATA.coach && APP_DATA.coach.rankALines) ? APP_DATA.coach.rankALines : ["なかなかのスピードだ！"]; const coachRankBLines = (APP_DATA.coach && APP_DATA.coach.rankBLines) ? APP_DATA.coach.rankBLines : ["堅実にクリアだ！"]; const coachNoMissLines = (APP_DATA.coach && APP_DATA.coach.noMissLines) ? APP_DATA.coach.noMissLines : (APP_DATA.coach && APP_DATA.coach.clearLines) ? APP_DATA.coach.clearLines : ["すばらしい！"]; const coachMissLines = (APP_DATA.coach && APP_DATA.coach.missLines) ? APP_DATA.coach.missLines : (APP_DATA.coach && APP_DATA.coach.clearMissLines) ? APP_DATA.coach.clearMissLines : ["次はノーミスで！"]; const coachLinesTimeup = (APP_DATA.coach && APP_DATA.coach.timeupLines) ? APP_DATA.coach.timeupLines : ["惜しい！次こそ！"]; const coachAdText = (APP_DATA.coach && APP_DATA.coach.adText) ? APP_DATA.coach.adText : ""; function pick(arr) { return arr[Math.floor(Math.random() * arr.length)]; } // --- Presets (embedded) --- const embeddedPresets = Array.isArray(APP_DATA.presets) ? APP_DATA.presets : []; function presetToText(preset) { if (!preset || !Array.isArray(preset.pairs)) return ""; return preset.pairs.map(p => { const a = String(p.a ?? "").replace(/\s+/g, " ").trim(); const b = String(p.b ?? "").replace(/\s+/g, " ").trim(); return `${a},${b}`; }).join("\n"); } let activePresetId = null; var customInputCache = {}; function groupColorFromName(name) { if (!name) return null; var hash = 0; for (var i = 0; i < name.length; i++) { hash = name.charCodeAt(i) + ((hash << 5) - hash); } var h = ((hash % 360) + 360) % 360; return 'hsl(' + h + ', 55%, 38%)'; } function populatePresetButtons() { const area = document.getElementById('preset-btn-area'); if (!area) return; area.innerHTML = ''; var groups = []; var groupMap = {}; var ungrouped = []; embeddedPresets.forEach((p) => { var g = (p.group || '').trim(); if (!g) { ungrouped.push(p); return; } if (!groupMap[g]) { groupMap[g] = { name: g, color: p.groupColor || groupColorFromName(g), desc: p.groupDesc || '', opacity: p.groupOpacity || 0.18, equalWidth: !!p.groupEqualWidth, vertical: !!p.groupVertical, hintAnimation: p.hintAnimation || 'orbit', presets: [] }; groups.push(groupMap[g]); } groupMap[g].presets.push(p); }); function makePresetBtn(p, groupColor) { const btn = document.createElement('button'); btn.type = 'button'; btn.className = 'preset-btn'; btn.textContent = (p.customEditable ? '✏ ' : '') + (p.name || p.id) + ' (' + (Array.isArray(p.pairs) ? p.pairs.length : 0) + '組)'; // ★ クリアバッジの追加処理（gold/silver対応） try { var raw = JSON.parse(localStorage.getItem('sm-cleared-presets') || '{}'); // 旧形式（配列）互換 if (Array.isArray(raw)) { var obj = {}; raw.forEach(function(id){ obj[id] = 'gold'; }); raw = obj; } var rank = raw[p.id]; if (rank) { var badge = document.createElement('span'); badge.className = 'clear-badge ' + (rank === 'gold' ? 'gold' : 'silver'); badge.textContent = rank === 'gold' ? '★' : '☆'; btn.appendChild(badge); } } catch(e) {} btn.dataset.presetId = p.id; var gc = groupColor || p.groupColor || ''; if (gc) { btn.style.setProperty('--gc-bg', colorWithAlpha(gc, 0.15)); btn.style.setProperty('--gc-border', colorWithAlpha(gc, 0.40)); btn.style.setProperty('--gc-active', colorWithAlpha(gc, 0.85)); btn.style.setProperty('--gc-shadow', colorWithAlpha(gc, 0.55)); } btn.addEventListener('click', () => { initAudioFromUserGesture(); selectPreset(p.id); }); return btn; } function colorWithAlpha(color, alpha) { if (!color) return 'rgba(100,100,100,' + alpha + ')'; if (color.startsWith('#')) { var hex = color.replace('#',''); if (hex.length === 3) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]; var r = parseInt(hex.substring(0,2),16); var g2 = parseInt(hex.substring(2,4),16); var b = parseInt(hex.substring(4,6),16); return 'rgba('+r+','+g2+','+b+','+alpha+')'; } if (color.startsWith('hsl(')) { return color.replace('hsl(','hsla(').replace(')',','+alpha+')'); } return color; } groups.forEach((g) => { var sec = document.createElement('div'); sec.className = 'preset-group-section'; sec.style.position = 'relative'; var bgColor = g.color || 'hsl(210,50%,38%)'; var op = g.opacity || 0.18; sec.style.background = colorWithAlpha(bgColor, op); sec.style.border = '1px solid ' + colorWithAlpha(bgColor, Math.min(1, op + 0.17)); var lbl = document.createElement('div'); lbl.className = 'preset-group-label'; lbl.style.borderColor = bgColor; var nameSpan = document.createElement('span'); nameSpan.className = 'preset-group-name'; nameSpan.textContent = g.name; lbl.appendChild(nameSpan); if (g.desc) { var descSpan = document.createElement('span'); descSpan.className = 'preset-group-desc'; descSpan.textContent = g.desc; lbl.appendChild(descSpan); } sec.appendChild(lbl); var btns = document.createElement('div'); btns.className = 'preset-group-btns'; if (g.vertical) { btns.style.flexDirection = 'column'; btns.style.alignItems = 'stretch'; } else if (g.equalWidth) { btns.style.display = 'grid'; btns.style.gridTemplateColumns = 'repeat(auto-fill, minmax(120px, 1fr))'; } g.presets.forEach((p) => { btns.appendChild(makePresetBtn(p, g.color)); }); sec.appendChild(btns); // Per-group hint finger if (g.hintAnimation !== 'none') { var finger = document.createElement('div'); finger.className = 'group-hint-finger anim-' + (g.hintAnimation || 'orbit'); finger.textContent = '👆'; finger.style.display = 'none'; finger.dataset.hintFinger = '1'; sec.appendChild(finger); } area.appendChild(sec); }); ungrouped.forEach((p) => { area.appendChild(makePresetBtn(p)); }); } function selectPreset(presetId) { const preset = embeddedPresets.find(p => p.id === presetId); if (!preset) return; activePresetId = presetId; // ヒント指を消す var _ht = document.getElementById('preset-hint-text'); if(_ht) _ht.style.display='none'; document.querySelectorAll('[data-hint-finger]').forEach(function(f){ f.style.display='none'; }); if (preset.customEditable && customInputCache[presetId]) { document.getElementById('raw-input').value = customInputCache[presetId]; } else { document.getElementById('raw-input').value = presetToText(preset); } if (preset.customEditable) { showCustomInput(); } else { closeCustomInput(); } const startScreen = document.getElementById('start-screen'); if (startScreen) startScreen.scrollTop = 0; updatePresetBtnHighlight(); updateStartMeta(); autoSetTimeForPairs(); } let customInputTimer = null; function showCustomInput() { const overlay = document.getElementById('custom-overlay'); if (overlay) { clearTimeout(customInputTimer); // 200ミリ秒遅らせて表示し、ボタンの押し込みをしっかり見せる customInputTimer = setTimeout(() => { overlay.style.display = 'flex'; }, 200); } } function closeCustomInput() { clearTimeout(customInputTimer); // 連続タップ時の誤作動を防止 if (activePresetId) { customInputCache[activePresetId] = document.getElementById('raw-input').value; } const overlay = document.getElementById('custom-overlay'); if (overlay) overlay.style.display = 'none'; updateStartMeta(); } function updatePresetBtnHighlight() { document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active')); if (activePresetId) { document.querySelectorAll('.preset-btn[data-preset-id]').forEach(b => { if (b.dataset.presetId === activePresetId) b.classList.add('active'); }); } } // --- Input Parsing --- function parseInput() { const raw = document.getElementById('raw-input').value; const lines = String(raw ?? "").split(/\r?\n/); let list = []; let id = 0; lines.forEach(line => { const parts = String(line ?? "").split(/,|\t/); if (parts.length >= 2 && parts[0].trim() && parts[1].trim()) { list.push({ id: id++, a: parts[0].trim(), b: parts[1].trim() }); } }); return list; } function validatePairs(list) { const aCount = {}, bCount = {}; const aDupes = []; const pairSet = new Set(); const pairDupes = []; for (const p of list) { aCount[p.a] = (aCount[p.a] || 0) + 1; if (aCount[p.a] === 2) aDupes.push(p.a); bCount[p.b] = (bCount[p.b] || 0) + 1; var pairKey = p.a + '\t' + p.b; if (pairSet.has(pairKey)) { if (!pairDupes.includes(pairKey)) pairDupes.push(p.a + ',' + p.b); } else pairSet.add(pairKey); } const maxB = Math.max(0, ...Object.values(bCount)); const n = list.length; // 現在の難易度設定を取得して、実際のウェーブ（箱）の数を計算 const diffBtn = document.querySelector('.diff-btn.active'); const isNormal = diffBtn && diffBtn.dataset.diff === 'normal'; const validWaves = [3, 5].filter(ws => { if (n <= 0) return false; // 実際の getWaveSizes ロジックに基づいて箱の数を算出 let waveCount = 0; if (!isNormal) { waveCount = Math.ceil(n / ws); } else { waveCount = Math.ceil(n / (ws + 1)); if (waveCount <= 0) waveCount = 1; } // 箱の数(waveCount)が、答えの最大重複回数(maxB)以上ならOK return waveCount >= maxB; }); return { aDupes, pairDupes, maxB, validWaves, totalPairs: n }; } function getWaveSizes(total, ws, isNormal) { if (total <= 0) return []; const sizes = []; if (!isNormal) { // ゆとり版: ひたすら区切り、最後が1になる場合は直前と分けて2・2にする let rem = total; while (rem > 0) { if (rem >= ws) { sizes.push(ws); rem -= ws; } else { if (rem === 1 && sizes.length > 0 && sizes[sizes.length - 1] > 1) { sizes[sizes.length - 1] -= 1; sizes.push(2); } else { sizes.push(rem); } rem = 0; } } return sizes; } else { // ふつう版: wsをベースに、余りを後半のウェーブに+1で分散 let count = Math.floor(total / ws); if (count <= 0) count = 1; let rem = total - count * ws; if (rem > count) count++; const base = Math.floor(total / count); rem = total % count; for (let i = 0; i < count; i++) { if (i < count - rem) sizes.push(base); else sizes.push(base + 1); } return sizes; } } function distributePairsByB_Sizes(pairs, sizes) { const bCount = {}; pairs.forEach(p => { bCount[p.b] = (bCount[p.b] || 0) + 1; }); const sortedPairs = [...pairs].sort((p1, p2) => { if (bCount[p2.b] !== bCount[p1.b]) return bCount[p2.b] - bCount[p1.b]; return Math.random() - 0.5; }); const waves = sizes.map(targetSize => ({ target: targetSize, items: [], usedB: new Set() })); for (const p of sortedPairs) { let candidates = waves.filter(w => w.items.length < w.target && !w.usedB.has(p.b)); if (candidates.length > 0) { const targetWave = candidates[Math.floor(Math.random() * candidates.length)]; targetWave.items.push(p); targetWave.usedB.add(p.b); } else { let fallback = waves.filter(w => w.items.length < w.target); if(fallback.length > 0) { const targetWave = fallback[Math.floor(Math.random() * fallback.length)]; targetWave.items.push(p); targetWave.usedB.add(p.b); } } } const result = []; for (const w of waves) { shuffle(w.items); result.push(...w.items); } return result; } // --- Time Helpers --- function formatMMSS(secInt) { const s = Math.max(0, Math.floor(secInt)); const m = Math.floor(s / 60); const r = String(s % 60).padStart(2, '0'); return `${m}:${r}`; } function roundUpTo30(sec) { return Math.ceil(sec / 30) * 30; } function getSelectedDifficulty() { const active = document.querySelector('.diff-btn.active'); return active ? parseFloat(active.dataset.sec) : 2.5; } function calcAutoTimeSec(list) { if (!Array.isArray(list)) list = []; const n = list.length; if (n <= 0) return 30; const secPerPair = getSelectedDifficulty(); var sec = n * secPerPair; for (var i = 0; i < n; i++) { var aLen = (list[i].a || '').length; if (aLen > 10) sec += (aLen - 10) * 0.2; } sec = Math.ceil(sec / 5) * 5; return Math.max(10, sec) | 0; } function getSelectedWave() { const active = document.querySelector('.wave-btn.active'); return active ? parseInt(active.dataset.wave, 10) : 5; } function autoSetTimeForPairs() { // 他から呼ばれているため空関数として残す } // --- Start Screen Meta Update --- function updateStartMeta() { const list = parseInput(); updateTimeDisplay(list); runValidation(list); } function runValidation(list) { const msgEl = document.getElementById('validation-msg'); const minMsg = document.getElementById('min-pairs-msg'); const startBtn = document.getElementById('btnStartGame'); const startErrMsg = document.getElementById('start-error-msg'); if (startErrMsg) { startErrMsg.style.display = 'none'; startErrMsg.textContent = ''; } if (!msgEl) return; if (list.length === 0) { msgEl.className = ''; msgEl.style.display = 'none'; msgEl.textContent = ''; if (minMsg) minMsg.style.display = 'none'; document.querySelectorAll('.wave-btn').forEach(b => b.classList.remove('disabled')); if (startBtn) startBtn.disabled = false; return; } if (list.length < 8) { if (minMsg) { minMsg.style.display = 'block'; minMsg.textContent = '\u26a0 最低8組必要です（現在' + list.length + '組）'; } msgEl.className = ''; msgEl.style.display = 'none'; msgEl.textContent = ''; document.querySelectorAll('.wave-btn').forEach(b => b.classList.add('disabled')); if (startBtn) startBtn.disabled = true; return; } else { if (minMsg) minMsg.style.display = 'none'; } const v = validatePairs(list); if (v.aDupes.length > 0 || v.pairDupes.length > 0) { var msgs = []; if (v.aDupes.length > 0) msgs.push('A側に重複があります：' + v.aDupes.join('、')); if (v.pairDupes.length > 0) msgs.push('同一ペアが重複しています：' + v.pairDupes.join('、')); msgEl.className = 'error'; msgEl.textContent = '\u26a0 ' + msgs.join(' / '); document.querySelectorAll('.wave-btn').forEach(b => b.classList.add('disabled')); if (startBtn) startBtn.disabled = true; if (startErrMsg) { startErrMsg.style.display = 'block'; startErrMsg.textContent = '\u26a0 ' + msgs.join(' / '); } return; } if (v.maxB > 1) { const disabledWaves = [3,5].filter(ws => !v.validWaves.includes(ws)); document.querySelectorAll('.wave-btn').forEach(b => { const ws = parseInt(b.dataset.wave, 10); if (disabledWaves.includes(ws)) { b.classList.add('disabled'); if (b.classList.contains('active')) b.classList.remove('active'); } else { b.classList.remove('disabled'); } }); var activeBtn = document.querySelector('.wave-btn.active:not(.disabled)'); if (!activeBtn && v.validWaves.length > 0) { var first = document.querySelector('.wave-btn[data-wave="' + v.validWaves[0] + '"]'); if (first) first.classList.add('active'); } if (disabledWaves.length === 0) { msgEl.className = ''; msgEl.style.display = 'none'; msgEl.textContent = ''; if (startBtn) startBtn.disabled = false; } else if (v.validWaves.length > 0) { msgEl.className = 'error'; // 赤字で表示 msgEl.style.display = 'block'; msgEl.textContent = '\u26a0 重複した答えを多く含むため、' + disabledWaves.join('組程度と') + '組程度は選べません'; if (startBtn) startBtn.disabled = false; } else { msgEl.className = 'error'; // 赤字で表示 msgEl.style.display = 'block'; msgEl.textContent = '\u26a0 重複した答えを多く含むため、ゲームを開始できません'; if (startBtn) startBtn.disabled = true; if (startErrMsg) { startErrMsg.style.display = 'block'; startErrMsg.textContent = '\u26a0 重複した答えを多く含むため、ゲームを開始できません'; } } return; } msgEl.className = ''; msgEl.style.display = 'none'; msgEl.textContent = ''; document.querySelectorAll('.wave-btn').forEach(b => b.classList.remove('disabled')); if (startBtn) startBtn.disabled = false; } function updateTimeDisplay(list) { if (!Array.isArray(list)) list = []; const chk = document.getElementById('chkNoLimit'); const display = document.getElementById('time-info-value'); if (!display) return; if (chk && chk.checked) { display.textContent = '制限なし'; display.style.color = '#27ae60'; } else { const sec = calcAutoTimeSec(list); display.textContent = formatMMSS(sec); display.style.color = '#2c3e50'; } } // --- Tab Switching (text / table) --- function switchInputTab(mode) { const tabText = document.getElementById('tabText'); const tabTable = document.getElementById('tabTable'); const textMode = document.getElementById('inputTextMode'); const tableMode = document.getElementById('inputTableMode'); if (mode === 'table') { tabText.classList.remove('active'); tabTable.classList.add('active'); textMode.style.display = 'none'; tableMode.style.display = ''; syncTextareaToTable(); } else { tabTable.classList.remove('active'); tabText.classList.add('active'); tableMode.style.display = 'none'; textMode.style.display = ''; syncTableToTextarea(); } } function syncTextareaToTable() { const raw = document.getElementById('raw-input').value; const lines = String(raw || '').split(/\r?\n/); const tbody = document.getElementById('pairTableBody'); if (!tbody) return; tbody.innerHTML = ''; let count = 0; lines.forEach(line => { const parts = String(line || '').split(/,|\t/); if (parts.length >= 2 && parts[0].trim()) { count++; addTableRowWithData(count, parts[0].trim(), parts.slice(1).join(',').trim()); } }); // add a few empty rows for (let i = 0; i < 3; i++) { count++; addTableRowWithData(count, '', ''); } } function syncTableToTextarea() { const tbody = document.getElementById('pairTableBody'); if (!tbody) return; const rows = tbody.querySelectorAll('tr'); const lines = []; rows.forEach(row => { const inputs = row.querySelectorAll('input'); if (inputs.length >= 2) { const a = inputs[0].value.trim(); const b = inputs[1].value.trim(); if (a && b) lines.push(a + ',' + b); } }); document.getElementById('raw-input').value = lines.join('\n'); updateStartMeta(); autoSetTimeForPairs(); } function addTableRowWithData(num, a, b) { const tbody = document.getElementById('pairTableBody'); if (!tbody) return; const tr = document.createElement('tr'); tr.innerHTML = '<td class="row-num">' + num + '</td>' + '<td><input type="text" value="' + escHtml(a) + '" placeholder="A"></td>' + '<td><input type="text" value="' + escHtml(b) + '" placeholder="B"></td>' + '<td class="del-cell"><button type="button" class="del-btn" title="削除">✕</button></td>'; tr.querySelector('.del-btn').addEventListener('click', function(){ tr.remove(); renumberTable(); }); tbody.appendChild(tr); } function escHtml(s) { return String(s||'').replace(/&/g,'&').replace(/"/g,'"').replace(/</g,'<').replace(/>/g,'>'); } function rubyRender(s) { var safe = escHtml(s); return safe.replace(/\{([^|{}]+)\|([^|{}]+)\}/g, '<ruby>$1<rp>(</rp><rt>$2</rt><rp>)</rp></ruby>'); } function addTableRow() { const tbody = document.getElementById('pairTableBody'); const num = tbody ? tbody.querySelectorAll('tr').length + 1 : 1; addTableRowWithData(num, '', ''); } function clearEmptyRows() { const tbody = document.getElementById('pairTableBody'); if (!tbody) return; const rows = tbody.querySelectorAll('tr'); rows.forEach(row => { const inputs = row.querySelectorAll('input'); if (inputs.length >= 2 && !inputs[0].value.trim() && !inputs[1].value.trim()) { row.remove(); } }); renumberTable(); } function renumberTable() { const tbody = document.getElementById('pairTableBody'); if (!tbody) return; const rows = tbody.querySelectorAll('tr'); rows.forEach((row, i) => { const numCell = row.querySelector('.row-num'); if (numCell) numCell.textContent = i + 1; }); } // --- Start Screen Logic --- let startCoachTimer = null; function updateStartCoach() { const imgEl = document.getElementById('start-coach-img'); const bubEl = document.getElementById('start-coach-bubble'); if (!imgEl || !bubEl) return; imgEl.src = encodeURI(pick(coachImages)); bubEl.innerText = pick(startCoachLines); } function startStartCoachLoop() { stopStartCoachLoop(); updateStartCoach(); startCoachTimer = setInterval(updateStartCoach, 3000); } function stopStartCoachLoop() { if (startCoachTimer) clearInterval(startCoachTimer); startCoachTimer = null; } function startGame() { initAudioFromUserGesture(); // If in table mode, sync to textarea first if (document.getElementById('inputTableMode') && document.getElementById('inputTableMode').style.display !== 'none') { syncTableToTextarea(); } // 非カスタムプリセットなら、raw-inputをプリセット本来のデータに強制リセット if (activePresetId) { var _ap = embeddedPresets.find(function(p){ return p.id === activePresetId; }); if (_ap && !_ap.customEditable) { document.getElementById('raw-input').value = presetToText(_ap); } } // カスタム入力を閉じる closeCustomInput(); const list = parseInput(); if (list.length < 8) { alert('最低8組必要です（現在' + list.length + '組）'); return; } const v = validatePairs(list); if (v.aDupes.length > 0) { alert('A側に重複があります：' + v.aDupes.join('、')); return; } if (v.pairDupes.length > 0) { alert('同一ペアが重複しています：' + v.pairDupes.join('、')); return; } if (!v.validWaves.includes(getSelectedWave())) { alert('選択中の同時出現数では開始できません'); return; } waveSize = getSelectedWave(); const chkNoLimit = document.getElementById('chkNoLimit'); if (chkNoLimit && chkNoLimit.checked) { timeLimitSec = 0; } else { timeLimitSec = calcAutoTimeSec(list); } launchGameLoop(list); } // --- Game HUD (Time + Coach) --- function getRemainingSeconds() { const elapsed = (Date.now() - startTime) / 1000; return Math.max(0, timeLimitSec - elapsed); } function setGaugeByRemain(remainSec) { const ratio = (timeLimitSec <= 0) ? 0 : Math.max(0, Math.min(1, remainSec / timeLimitSec)); const fill = document.getElementById('time-gauge-fill'); if (!fill) return; fill.style.width = (ratio * 100).toFixed(1) + '%'; fill.style.background = (remainSec <= 5) ? '#f43f5e' : (remainSec <= 15) ? '#fbbf24' : '#10b981'; } function updateCoach(remainSec) { const imgEl = document.getElementById('coach-img'); const txtEl = document.getElementById('coach-text'); if (!imgEl || !txtEl) return; imgEl.src = encodeURI(pick(coachImages)); const line = (remainSec <= 5) ? pick(coachLinesPanic) : (remainSec <= 15) ? pick(coachLinesHurry) : pick(coachLinesNormal); txtEl.innerText = line; } function startCoachLoop() { stopCoachLoop(); updateCoach(timeLimitSec); coachInterval = setInterval(() => updateCoach(getRemainingSeconds()), 3000); } function stopCoachLoop() { if (coachInterval) { clearInterval(coachInterval); coachInterval = null; } } // --- Drag Interaction --- let dragging = false; let dragStartCard = null; let currentLine = null; function setupInteraction() { const frame = document.getElementById('app-frame'); const svg = document.getElementById('svg-layer'); const getLocalCoords = (clientX, clientY) => { const rect = frame.getBoundingClientRect(); return { x: clientX - rect.left, y: clientY - rect.top }; }; const onDown = (e) => { initAudioFromUserGesture(); if (isFrozen || gameEnded) return; const t = e.touches ? e.touches[0] : e; const target = document.elementFromPoint(t.clientX, t.clientY); const card = target ? target.closest('.card') : null; if (card) { e.preventDefault(); // チュートリアルを即消し var tov = document.getElementById('tutorial-overlay'); if(tov) tov.classList.remove('active'); dragging = true; dragStartCard = { element: card, type: card.classList.contains('source') ? 'source' : 'target', id: parseInt(card.dataset.id, 10) }; const rect = card.getBoundingClientRect(); const fRect = frame.getBoundingClientRect(); const sx = (rect.left + rect.width / 2) - fRect.left; const sy = (rect.top + rect.height / 2) - fRect.top; currentLine = document.createElementNS('http://www.w3.org/2000/svg', 'line'); currentLine.classList.add('drag-line'); currentLine.setAttribute('x1', sx); currentLine.setAttribute('y1', sy); currentLine.setAttribute('x2', sx); currentLine.setAttribute('y2', sy); svg.appendChild(currentLine); } }; const onMove = (e) => { if (!dragging || isFrozen || gameEnded || !currentLine) return; e.preventDefault(); const t = e.touches ? e.touches[0] : e; const p = getLocalCoords(t.clientX, t.clientY); currentLine.setAttribute('x2', p.x); currentLine.setAttribute('y2', p.y); document.querySelectorAll('.card').forEach(c => c.classList.remove('highlight')); const target = document.elementFromPoint(t.clientX, t.clientY); const card = target ? target.closest('.card') : null; if (card && card !== dragStartCard.element) { const cType = card.classList.contains('source') ? 'source' : 'target'; if (cType !== dragStartCard.type) card.classList.add('highlight'); } }; const onUp = (e) => { if (!dragging) return; const t = e.changedTouches ? e.changedTouches[0] : e; const target = document.elementFromPoint(t.clientX, t.clientY); const card = target ? target.closest('.card') : null; if (card && dragStartCard && card !== dragStartCard.element) { const cType = card.classList.contains('source') ? 'source' : 'target'; if (cType !== dragStartCard.type) { checkMatch(dragStartCard, { element: card, id: parseInt(card.dataset.id, 10) }); } } dragging = false; dragStartCard = null; if (currentLine) { currentLine.remove(); currentLine = null; } document.querySelectorAll('.card').forEach(c => c.classList.remove('highlight')); }; frame.addEventListener('mousedown', onDown); frame.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); frame.addEventListener('touchstart', onDown, { passive: false }); frame.addEventListener('touchmove', onMove, { passive: false }); window.addEventListener('touchend', onUp); } // --- Tutorial finger animation --- let tutorialShown = false; function showTutorial(){ if(tutorialShown) return; tutorialShown = true; const ov = document.getElementById('tutorial-overlay'); if(!ov) return; // Reset animation by re-inserting ov.classList.remove('active'); ov.innerHTML = '<div class="tut-trail"></div><div class="tut-finger">👆</div>'; void ov.offsetWidth; // force reflow ov.classList.add('active'); setTimeout(()=>{ ov.classList.remove('active'); }, 2800); } // --- Game Flow --- function shuffle(arr) { for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } function launchGameLoop(list) { stopStartCoachLoop(); // init gameEnded = false; isFrozen = false; missedPairs = []; tutorialShown = false; // 毎ゲーム最初に1回だけ表示 allPairs = list; const diffBtn = document.querySelector('.diff-btn.active'); const isNormal = diffBtn && diffBtn.dataset.diff === 'normal'; currentWaveSizes = getWaveSizes(list.length, waveSize, isNormal); remainingPairs = distributePairsByB_Sizes(list, currentWaveSizes); currentWavePairs = []; document.getElementById('result-screen').classList.add('hidden'); document.getElementById('start-screen').classList.add('hidden'); document.getElementById('game-screen').classList.remove('hidden'); // HUD visibility const hud = document.getElementById('bottom-hud'); if (timeLimitSec <= 0) { hud.classList.add('hidden-ui'); stopCoachLoop(); } else { hud.classList.remove('hidden-ui'); } // clear svg document.getElementById('svg-layer').innerHTML = ''; startTime = Date.now(); if (timerInterval) clearInterval(timerInterval); timerInterval = setInterval(updateTimerTick, 100); if (timeLimitSec > 0) { updateCoach(timeLimitSec); startCoachLoop(); } nextWave(); showTutorial(); // 最初のウェーブ表示直後に指ガイド if (!interactionReady) { setupInteraction(); interactionReady = true; } } function updateTimerTick() { if (gameEnded) return; if (timeLimitSec > 0) { const remain = getRemainingSeconds(); document.getElementById('time-display').innerText = formatMMSS(remain); setGaugeByRemain(remain); if (remain <= 0) { timeUp(); return; } } } function updateRemainCount() { const el = document.getElementById('remain-count'); if(el) el.innerText = remainingPairs.length + currentWavePairs.length; } function nextWave() { updateRemainCount(); if (remainingPairs.length === 0 && currentWavePairs.length === 0) { gameClear(); return; } if (currentWavePairs.length > 0) return; const count = currentWaveSizes.shift() || remainingPairs.length; const wave = remainingPairs.splice(0, count); currentWavePairs = wave; renderWave(wave); checkAutoMatch(); } function renderWave(pairs) { const targetArea = document.getElementById('target-area'); const sourceArea = document.getElementById('source-area'); targetArea.innerHTML = ''; sourceArea.innerHTML = ''; const targets = [...pairs].sort(() => Math.random() - 0.5); targets.forEach(p => { const el = document.createElement('div'); el.className = 'card target'; el.innerHTML = '<span>' + rubyRender(p.b) + '</span>'; // ←ココを変更 el.dataset.id = p.id; targetArea.appendChild(el); }); const sources = [...pairs].sort(() => Math.random() - 0.5); sources.forEach(p => { const el = document.createElement('div'); el.className = 'card source'; el.innerHTML = '<span>' + rubyRender(p.a) + '</span>'; // ←ココを変更 el.dataset.id = p.id; sourceArea.appendChild(el); }); updateRemainCount(); } function checkAutoMatch() { if (currentWavePairs.length === 1) { setTimeout(() => { if (gameEnded) return; if (currentWavePairs.length !== 1) return; const lastId = currentWavePairs[0].id; const sCard = document.querySelector(`.card.source[data-id="${lastId}"]`); const tCard = document.querySelector(`.card.target[data-id="${lastId}"]`); if (sCard && tCard) { playSound('auto_match'); sCard.classList.add('matched'); tCard.classList.add('matched'); setTimeout(() => { if (sCard.parentNode) sCard.remove(); if (tCard.parentNode) tCard.remove(); currentWavePairs = []; nextWave(); }, 400); } }, 500); } } function checkMatch(startObj, endObj) { if (gameEnded) return; if (startObj.id === endObj.id) { playSound('correct'); startObj.element.classList.add('matched'); endObj.element.classList.add('matched'); setTimeout(() => { if (startObj.element.parentNode) startObj.element.remove(); if (endObj.element.parentNode) endObj.element.remove(); currentWavePairs = currentWavePairs.filter(p => p.id !== startObj.id); updateRemainCount(); if (currentWavePairs.length === 1) { checkAutoMatch(); } else if (currentWavePairs.length === 0) { nextWave(); } }, 400); } else { playSound('wrong'); triggerPenalty(); const pair = allPairs.find(p => p.id === startObj.id); if (pair && !missedPairs.includes(pair)) missedPairs.push(pair); } } function triggerPenalty() { isFrozen = true; const overlay = document.getElementById('freeze-overlay'); overlay.classList.add('active'); setTimeout(() => { isFrozen = false; overlay.classList.remove('active'); }, 1500); } function timeUp() { if (gameEnded) return; gameEnded = true; if (timerInterval) clearInterval(timerInterval); timerInterval = null; stopCoachLoop(); isFrozen = true; sendResult(false, null); document.getElementById('game-screen').classList.add('hidden'); document.getElementById('result-screen').classList.remove('hidden'); document.getElementById('result-screen').scrollTop = 0; const rImg = document.getElementById('result-coach-img'); if(rImg) rImg.src = encodeURI(pick(coachImages)); var _rtEl = document.getElementById('result-title'); _rtEl.innerText = 'TIME UP!'; _rtEl.style.display = ''; var _prAd = activePresetId ? embeddedPresets.find(function(x){ return x.id === activePresetId; }) : null; var adBox = document.getElementById('result-ad-box'); if(adBox && coachAdText) adBox.style.display = (_prAd && _prAd.customEditable) ? 'none' : 'block'; document.getElementById('final-time').innerText = ((Date.now() - startTime) / 1000).toFixed(1) + 's'; showRank(null); var bestRow = document.getElementById('result-best-row'); if (bestRow) bestRow.style.display = 'none'; var timeNote = document.getElementById('final-time-note'); if (timeNote) timeNote.textContent = ''; var badgeSep = document.getElementById('result-badge-sep'); if (badgeSep) badgeSep.style.display = 'none'; var badgeMsg = document.getElementById('result-badge-msg'); if (badgeMsg) badgeMsg.style.display = 'none'; showReview(); var speedEl = document.getElementById('rank-speed-comment'); if (speedEl) { speedEl.style.display = 'none'; speedEl.textContent = ''; } document.getElementById('rank-miss-comment').innerText = pick(coachLinesTimeup); } function gameClear() { if (gameEnded) return; gameEnded = true; if (timerInterval) clearInterval(timerInterval); timerInterval = null; stopCoachLoop(); playSound('clear'); // ★ クリアバッジ保存処理（gold/silver対応、カスタム編集可・無制限は除外） var _clrP = activePresetId ? embeddedPresets.find(function(x){ return x.id === activePresetId; }) : null; if (_clrP && !_clrP.customEditable && timeLimitSec > 0) { try { var raw = JSON.parse(localStorage.getItem('sm-cleared-presets') || '{}'); if (Array.isArray(raw)) { var obj = {}; raw.forEach(function(id){ obj[id] = 'gold'; }); raw = obj; } var newRank = (missedPairs.length === 0) ? 'gold' : 'silver'; var current = raw[activePresetId] || ''; // goldは降格しない if (current !== 'gold') { raw[activePresetId] = newRank; localStorage.setItem('sm-cleared-presets', JSON.stringify(raw)); } else if (newRank === 'gold' && current !== 'gold') { raw[activePresetId] = 'gold'; localStorage.setItem('sm-cleared-presets', JSON.stringify(raw)); } } catch(e) {} } var elapsedNum = (Date.now() - startTime) / 1000; var elapsed = elapsedNum.toFixed(1); document.getElementById('game-screen').classList.add('hidden'); document.getElementById('result-screen').classList.remove('hidden'); document.getElementById('result-screen').scrollTop = 0; const rImg = document.getElementById('result-coach-img'); if(rImg) rImg.src = encodeURI(pick(coachImages)); document.getElementById('result-title').style.display = 'none'; var _prAd = activePresetId ? embeddedPresets.find(function(x){ return x.id === activePresetId; }) : null; var adBox = document.getElementById('result-ad-box'); if(adBox && coachAdText) adBox.style.display = (_prAd && _prAd.customEditable) ? 'none' : 'block'; document.getElementById('final-time').innerText = elapsed + 's'; var rank = calcRank(elapsedNum, timeLimitSec); showRank(rank); sendResult(true, rank); var _isCustom = _prAd && _prAd.customEditable; showBestTime(elapsedNum, activePresetId, _isCustom); // バッジ通知 var badgeSep = document.getElementById('result-badge-sep'); var badgeMsg = document.getElementById('result-badge-msg'); if (badgeMsg) { if (_isCustom) { badgeMsg.style.display = 'none'; if (badgeSep) badgeSep.style.display = 'none'; } else if (timeLimitSec <= 0) { if (badgeSep) badgeSep.style.display = ''; badgeMsg.style.display = ''; badgeMsg.style.color = '#999'; badgeMsg.textContent = 'バッジ獲得には制限時間ありでクリアしよう！'; } else if (missedPairs.length === 0) { if (badgeSep) badgeSep.style.display = ''; badgeMsg.style.display = ''; badgeMsg.style.color = '#f1c40f'; badgeMsg.textContent = '★ ノーミスクリア → ゴールドバッジ獲得！'; } else { if (badgeSep) badgeSep.style.display = ''; badgeMsg.style.display = ''; badgeMsg.style.color = '#bdc3c7'; badgeMsg.textContent = '☆ クリア → シルバーバッジ獲得（ノーミスでゴールドに！）'; } } // コメント表示：ランク別 + ミス有無 var speedEl = document.getElementById('rank-speed-comment'); if (speedEl) { if (rank) { speedEl.style.display = ''; var rankLines = rank === 'S' ? coachRankSLines : rank === 'A' ? coachRankALines : coachRankBLines; speedEl.innerText = pick(rankLines); } else { speedEl.style.display = 'none'; speedEl.textContent = ''; } } document.getElementById('rank-miss-comment').innerText = (missedPairs.length > 0) ? pick(coachMissLines) : pick(coachNoMissLines); showReview(); } function calcRank(elapsedSec, limitSec) { if (limitSec <= 0) return null; var ratio = Math.max(0, (limitSec - elapsedSec) / limitSec); if (ratio >= 0.50) return 'S'; if (ratio >= 0.30) return 'A'; return 'B'; } function showRank(rank) { var el = document.getElementById('result-rank-display'); if (!el) return; if (!rank) { el.style.display = 'none'; return; } el.style.display = ''; el.className = 'result-rank rank-' + rank.toLowerCase(); el.textContent = rank; } function loadBestTimes() { try { var d = JSON.parse(localStorage.getItem('sm-best-times') || '{}'); return (typeof d === 'object' && !Array.isArray(d)) ? d : {}; } catch(e) { return {}; } } function showBestTime(elapsedSec, presetId, isCustom) { var el = document.getElementById('result-best-display'); var row = document.getElementById('result-best-row'); var timeNote = document.getElementById('final-time-note'); if (!el) return; if (timeNote) timeNote.textContent = ''; if (!presetId || isCustom) { if (row) row.style.display = 'none'; return; } var bests = loadBestTimes(); var prev = bests[presetId]; var isNew = false; if (prev === undefined || elapsedSec < prev) { bests[presetId] = elapsedSec; try { localStorage.setItem('sm-best-times', JSON.stringify(bests)); } catch(e) {} isNew = (prev !== undefined); } if (row) row.style.display = ''; if (prev === undefined) { if (timeNote) timeNote.textContent = ''; el.innerHTML = elapsedSec.toFixed(1) + 's <span style="font-size:11px; color:#f1c40f;">← NEW!</span>'; } else if (isNew) { if (timeNote) timeNote.innerHTML = '<span style="color:#f1c40f;">🎉 NEW RECORD!</span>'; el.innerHTML = bests[presetId].toFixed(1) + 's <span style="font-size:11px; color:#aaa;">（前回 ' + prev.toFixed(1) + 's）</span>'; } else { var diff = elapsedSec - bests[presetId]; if (timeNote && diff > 0) timeNote.textContent = '（ベスト+' + diff.toFixed(1) + 's）'; el.textContent = bests[presetId].toFixed(1) + 's'; } } function showReview(){ const reviewBox = document.getElementById('review-box'); const listEl = document.getElementById('review-list'); listEl.innerHTML = ''; if (missedPairs.length > 0) { reviewBox.style.display = 'block'; missedPairs.forEach(p => { const li = document.createElement('li'); li.innerHTML = `<span>${rubyRender(p.a)}</span> <span style="font-size:20px;">↔</span> <span class="wrong-highlight">${rubyRender(p.b)}</span>`; listEl.appendChild(li); }); } else { reviewBox.style.display = 'none'; } } function backToTitle() { if (timerInterval) clearInterval(timerInterval); timerInterval = null; stopCoachLoop(); gameEnded = true; document.getElementById('game-screen').classList.add('hidden'); document.getElementById('result-screen').classList.add('hidden'); document.getElementById('start-screen').classList.remove('hidden'); startStartCoachLoop(); updateStartMeta(); populatePresetButtons(); // ★ バッジ表示を更新するためにボタンを再描画 updatePresetBtnHighlight(); // ★ 選択状態を復元 } // --- Parent iframe auto-height --- function __sm_postHeight(){ try{ if(!__SM_EMBED_ID__) return; if(!window.parent || window.parent === window) return; const af = document.getElementById('app-frame'); const h = Math.max( document.documentElement.scrollHeight || 0, document.body ? document.body.scrollHeight : 0, af ? af.scrollHeight : 0 ); window.parent.postMessage({type:'sm-height', id: __SM_EMBED_ID__, h: h}, '*'); }catch(e){} } (function(){ if(!window.parent || window.parent === window) return; setTimeout(__sm_postHeight, 60); window.addEventListener('resize', ()=>setTimeout(__sm_postHeight, 60)); try{ const ro = new ResizeObserver(()=>__sm_postHeight()); ro.observe(document.documentElement); if(document.body) ro.observe(document.body); const af = document.getElementById('app-frame'); if(af) ro.observe(af); }catch(e){ setInterval(__sm_postHeight, 800); } })(); // --- Init --- document.addEventListener('DOMContentLoaded', () => { populatePresetButtons(); const adBox = document.getElementById('result-ad-box'); if(adBox && coachAdText) { adBox.innerHTML = coachAdText.replace(/\n/g, '<br>'); adBox.style.display = 'block'; } const bStart = document.getElementById('btnStartGame'); if(bStart) bStart.addEventListener('click', ()=>{ initAudioFromUserGesture(); startGame(); }); const bBack = document.getElementById('btnBackToTitle'); if(bBack) bBack.addEventListener('click', ()=>{ backToTitle(); }); // Settings toggle var btnToggle = document.getElementById('btnToggleSettings'); var advSec = document.getElementById('advancedSettings'); if (btnToggle && advSec) { btnToggle.addEventListener('click', function() { if (advSec.style.display === 'none') { advSec.style.display = ''; btnToggle.textContent = '⚙ 閉じる'; } else { advSec.style.display = 'none'; btnToggle.textContent = '⚙ 設定'; } }); } // Wave buttons document.querySelectorAll('.wave-btn').forEach(btn => { btn.addEventListener('click', () => { if (btn.classList.contains('disabled')) return; document.querySelectorAll('.wave-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); autoSetTimeForPairs(); updateStartMeta(); }); }); // Difficulty buttons document.querySelectorAll('.diff-btn').forEach(btn => { btn.addEventListener('click', () => { if (btn.classList.contains('disabled')) return; document.querySelectorAll('.diff-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); updateStartMeta(); }); }); // カスタム入力の閉じるボタン const btnCloseCustom = document.getElementById('btnCloseCustom'); if (btnCloseCustom) btnCloseCustom.addEventListener('click', closeCustomInput); // カスタム入力のオーバーレイ背景クリック const customOverlayBg = document.getElementById('custom-overlay-bg'); if (customOverlayBg) customOverlayBg.addEventListener('click', closeCustomInput); // 制限時間なしチェックボックス // 制限時間なしチェックボックス const chkNoLimit = document.getElementById('chkNoLimit'); if (chkNoLimit) { chkNoLimit.addEventListener('change', function(){ var isNoLimit = chkNoLimit.checked; document.querySelectorAll('.diff-btn').forEach(function(b){ if(isNoLimit) b.classList.add('disabled'); else b.classList.remove('disabled'); }); updateStartMeta(); }); } // Tab switching const tabText = document.getElementById('tabText'); const tabTable = document.getElementById('tabTable'); if (tabText) tabText.addEventListener('click', () => switchInputTab('text')); if (tabTable) tabTable.addEventListener('click', () => switchInputTab('table')); // Table buttons const btnAddRow = document.getElementById('btnAddRow'); if (btnAddRow) btnAddRow.addEventListener('click', addTableRow); const btnClearEmpty = document.getElementById('btnClearEmpty'); if (btnClearEmpty) btnClearEmpty.addEventListener('click', clearEmptyRows); // Auto-select first preset or custom try{ const selId = (__SM_SELECTED_PRESET_ID__||"").toString(); if(selId && embeddedPresets.find(p => p.id === selId)){ selectPreset(selId); } else if(embeddedPresets.length > 0){ selectPreset(embeddedPresets[0].id); } }catch(e){} const ta = document.getElementById('raw-input'); if (ta) ta.addEventListener('input', () => { updateStartMeta(); autoSetTimeForPairs(); }); updateStartMeta(); startStartCoachLoop(); // プリセット選択ヒント（2回目まで表示、プレビューではカウントしない） try { var _isPreview = (__SM_EMBED_ID__ === 'preview'); var _hKey = 'sm-preset-hint-shown'; var _hCnt = parseInt(localStorage.getItem(_hKey)||'0',10); if(_hCnt < 3 && embeddedPresets.length > 0){ if(!_isPreview) localStorage.setItem(_hKey, String(_hCnt+1)); var _hText = document.getElementById('preset-hint-text'); if(_hText) _hText.style.display=''; document.querySelectorAll('[data-hint-finger]').forEach(function(f){ f.style.display=''; }); } } catch(e){} // --- 疑似フルスクリーン（iOS対応） --- const btnFs = document.getElementById('btnFullscreen'); const btnExitFs = document.getElementById('btn-exit-fs'); function updateFsButtons(){ var isFull = document.body.classList.contains('is-fullscreen'); if(btnFs) btnFs.innerHTML = isFull ? '✕ 全画面解除' : '⛶ 全画面表示'; if(btnExitFs) btnExitFs.innerHTML = isFull ? '✕ 全画面解除' : '⛶ 全画面'; } function enterPseudoFullscreen(){ document.body.classList.add('is-fullscreen'); updateFsButtons(); window.scrollTo(0, 1); try{ if(__SM_EMBED_ID__ && window.parent && window.parent !== window){ window.parent.postMessage({type:'sm-fullscreen', id:__SM_EMBED_ID__, mode:'enter'}, '*'); } }catch(e){} } function exitPseudoFullscreen(){ document.body.classList.remove('is-fullscreen'); updateFsButtons(); try{ if(__SM_EMBED_ID__ && window.parent && window.parent !== window){ window.parent.postMessage({type:'sm-fullscreen', id:__SM_EMBED_ID__, mode:'exit'}, '*'); } }catch(e){} setTimeout(function(){ __sm_postHeight(); }, 100); setTimeout(function(){ __sm_postHeight(); }, 400); } function toggleFullscreen(){ initAudioFromUserGesture(); if(document.body.classList.contains('is-fullscreen')){ exitPseudoFullscreen(); } else { enterPseudoFullscreen(); } } if(btnFs) btnFs.addEventListener('click', toggleFullscreen); if(btnExitFs) btnExitFs.addEventListener('click', toggleFullscreen); // 全画面ボタン（ゲーム中・結果画面） const btnFsGame = document.getElementById('btnFullscreenGame'); if(btnFsGame) btnFsGame.addEventListener('click', toggleFullscreen); const btnFsResult = document.getElementById('btnFullscreenResult'); if(btnFsResult) btnFsResult.addEventListener('click', toggleFullscreen); // 記録リセットボタン var btnReset = document.getElementById('btnResetRecords'); if (btnReset) btnReset.addEventListener('click', function(){ var ok = confirm('【警告】\nこのセットのバッジ・自己ベスト記録がリセットされます。\n（他のセットの記録は消えません）\n\n本当によろしいですか？'); if (!ok) return; try { var ids = embeddedPresets.map(function(p){ return p.id; }); var badges = JSON.parse(localStorage.getItem('sm-cleared-presets') || '{}'); if (Array.isArray(badges)) { var obj = {}; badges.forEach(function(id){ obj[id] = 'gold'; }); badges = obj; } ids.forEach(function(id){ delete badges[id]; }); localStorage.setItem('sm-cleared-presets', JSON.stringify(badges)); var bests = JSON.parse(localStorage.getItem('sm-best-times') || '{}'); ids.forEach(function(id){ delete bests[id]; }); localStorage.setItem('sm-best-times', JSON.stringify(bests)); } catch(e){} populatePresetButtons(); updatePresetBtnHighlight(); alert('このセットの記録をリセットしました。'); }); // TOPに戻るボタン（ゲーム中） const btnBackGame = document.getElementById('btnBackToTopGame'); if(btnBackGame) btnBackGame.addEventListener('click', ()=>{ backToTitle(); }); }); </script> </body> </html> 以下は通常の演習問題です。 解説ー準備中 この記事は役に立ちましたか？ 間違い/不具合かな？と思ったらこちらへ ✉️ 修正を提案する 2026年2月9日 author
