英語部では射的とカード・ボードゲームの展示を行います

①射的
射的では、アルファベットが書いてある紙コップを撃ち、当たったアルファベットで単語を作ります。
当てた数や、できた単語などにより、スコアが決まります。
ランキングボードも作り、スコア上位の人はランキングに乗るので、高いスコアを目指してください！

②カード・ボードゲーム
英語部の展示では、例年カードゲームとボードゲームを行っています。
今年はドブルやスクラブル、アノミアの３種類を展示する予定です。

③注意事項等
混雑状況はこまめに更新するので、それを参考にしてきていただけるとありがたいです。
　※混雑状況は校内マップより見ることができます
昼休憩のために、12:00～12:20は展示を一時中断しております。

/* ======================================== 謎解き全体 ======================================== */ #mystery-page { position: relative; width: 100%; } /* ======================================== 隠された問題 ======================================== */ .mystery-quiz { max-width: 900px; margin: 0 auto; padding: 80px 20px 30px; text-align: center; } /* * 問題文は完全透明 */ .mystery-question { margin: 0; font-size: 10px; line-height: 2; color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; background: none !important; user-select: text; -webkit-user-select: text; cursor: text; } /* * マウスで選択したときだけ見える */ .mystery-question::selection { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: #222222 !important; } .mystery-question::-moz-selection { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: #222222 !important; } /* ======================================== ページ内検索 ======================================== */ .page-search { width: 100%; max-width: 500px; margin: 0 auto; padding: 20px 20px 50px; box-sizing: border-box; } #page-search-form { display: flex; width: 100%; margin: 0; border: 1px solid rgba(0, 0, 0, 0.2); background: rgba(255, 255, 255, 0.7); border-radius: 4px; overflow: hidden; } #page-search-input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: none; outline: none; background: transparent; color: #333; font-size: 14px; box-sizing: border-box; } #page-search-input::placeholder { color: rgba(0, 0, 0, 0.5); } #page-search-form button { width: 65px; border: none; background: #ffffff; color: #333; cursor: pointer; font-size: 13px; transition: background 0.2s; } #page-search-form button:hover { background: #eeeeee; } #page-search-form button:disabled { cursor: default; opacity: 0.5; } /* ======================================== 検索結果メッセージ ======================================== */ #search-message { margin: 8px 0 0; font-size: 12px; color: blue; text-align: left; } /* ======================================== 正解後の画面 ======================================== */ #mystery-transition { position: fixed; z-index: 999999; inset: 0; width: 100%; height: 100%; background: #050505; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 2s ease, visibility 0s linear 2s; display: flex; align-items: center; justify-content: center; color: #ffffff; } /* * 暗転開始 */ #mystery-transition.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 2s ease, visibility 0s; } /* ======================================== ローディング ======================================== */ .mystery-loading { text-align: center; opacity: 1; transition: opacity 1s ease; } .loading-circle { width: 45px; height: 45px; margin: 0 auto 25px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); border-top-color: #ffffff; animation: mystery-spin 1s linear infinite; } @keyframes mystery-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loading-text { margin: 0; font-family: monospace; font-size: 13px; letter-spacing: 4px; color: rgba(255,255,255,0.8); } /* ======================================== キーワード ======================================== */ .mystery-result { position: absolute; text-align: center; opacity: 0; transform: translateY(15px); transition: opacity 1.5s ease, transform 1.5s ease; pointer-events: none; } .mystery-result.is-visible { opacity: 1; transform: translateY(0); } .result-small { margin: 0 0 15px; font-family: monospace; font-size: 12px; letter-spacing: 4px; color: #888; } .mystery-result h2 { margin: 0 0 20px; font-size: 30px; font-weight: 400; letter-spacing: 8px; } .keyword { margin: 0; font-family: monospace; font-size: 40px; letter-spacing: 6px; color: red; } /* ======================================== キーワード説明 ======================================== */ .mystery-result h3 { margin: 30px 0 0; font-size: 11px; font-weight: 400; line-height: 1.8; letter-spacing: 0.5px; color: rgba(255,255,255,0.5); } /* ======================================== スマホ ======================================== */ @media screen and (max-width: 768px) { .mystery-quiz { padding-top: 60px; } .mystery-question { font-size: 16px; } .page-search { max-width: 90%; } .mystery-result h2 { font-size: 24px; } .keyword { font-size: 20px; } .mystery-result h3 { max-width: 90%; margin-left: auto; margin-right: auto; } } document.addEventListener(“DOMContentLoaded”, function () { /* ==================================== 設定 ==================================== */ // このWordを検索すると秘密の演出が発動 const secretWord = “She practices the piano after school.”; // 正解後に表示するキーワード const keyword = “HISTORY”; /* ==================================== 要素取得 ==================================== */ const form = document.getElementById(“page-search-form”); const input = document.getElementById(“page-search-input”); const message = document.getElementById(“search-message”); const transition = document.getElementById(“mystery-transition”); const loading = document.querySelector(“.mystery-loading”); const result = document.querySelector(“.mystery-result”); const keywordElement = document.querySelector(“.keyword”); /* ==================================== ページ内検索 ==================================== */ form.addEventListener(“submit”, function (event) { event.preventDefault(); const searchWord = input.value.trim(); /* * 空欄 */ if (searchWord === “”) { message.textContent = “検索する文字を入力してください。”; return; } /* * ==================================== * 秘密のWord * ==================================== */ if ( searchWord.toLowerCase() === secretWord.toLowerCase() ) { success(); return; } /* * ==================================== * 通常のページ内検索 * ==================================== */ searchPage(searchWord); }); /* ==================================== 通常のページ内検索 ==================================== */ function searchPage(word) { /* * ブラウザ標準のページ内検索 */ const found = window.find(word); if (found) { message.textContent = “ページ内で見つかりました。”; } else { message.textContent = “ページ内に見つかりませんでした。”; } } /* ==================================== 秘密のWordが入力された場合 ==================================== */ function success() { /* * 連打防止 */ form.querySelector(“button”).disabled = true; input.disabled = true; /* * 検索メッセージを消す */ message.textContent = “”; /* * キーワードを設定 */ keywordElement.textContent = keyword; /* * ==================================== * 暗転開始 * ==================================== */ setTimeout(function () { transition.classList.add(“is-active”); }, 300); /* * ==================================== * 3秒後 * LOADINGをフェードアウト * ==================================== */ setTimeout(function () { loading.style.opacity = “0”; }, 3000); /* * ==================================== * 4秒後 * KEYWORDを表示 * ==================================== */ setTimeout(function () { loading.style.display = “none”; result.classList.add(“is-visible”); }, 4000); } });