以下が実際のプログラム例です。セキュリティ脆弱性を考慮し、evalや他のサイトへの遷移、リダイレクトは使用していません。また、alertも使わず、代わりにコンソールにメッセージを表示するようにしています。
```
<!DOCTYPE html>
<html>
<head>
<title>謎解き脱出ゲーム</title>
<meta charset="UTF-8">
<style type="text/css">
body {
background-color: #222;
color: #fff;
font-family: sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
text-align: center;
}
h1 {
font-size: 3rem;
margin-bottom: 2rem;
}
form {
margin-bottom: 2rem;
}
input[type="text"] {
background-color: #111;
border: none;
color: #fff;
font-size: 1.5rem;
margin-right: 1rem;
padding: 0.5rem;
text-align: center;
width: 15rem;
}
input[type="submit"] {
background-color: #e08e0b;
border: none;
color: #fff;
cursor: pointer;
font-size: 1.5rem;
padding: 0.5rem 2rem;
}
p {
margin-bottom: 1rem;
}
#console {
background-color: #111;
height: 20rem;
overflow-y: scroll;
padding: 1rem;
text-align: left;
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>謎解き脱出ゲーム</h1>
<form id="form">
<p>ヒントを入力してください。</p>
<input type="text" name="hint" id="hint" autocomplete="off">
<input type="submit" value="送信">
</form>
<div id="console"></div>
<script type="text/javascript">
// ここからJavaScriptのコードを書いていきます
// 問題を表示する関数
function showQuestion() {
console.log("問題：");
console.log("「黒点」という言葉に隠された謎を解いてください。");
console.log("hint: この問題は英単語の[black dot]に関するものです。");
}
// 謎を解く関数
function solve(hint) {
if (hint.toLowerCase() === "braille") {
console.log("%c謎は解けました！", "color: green;");
} else {
console.log("%c解答が違います。もう一度考えてください。", "color: red;");
}
}
// メッセージを表示する関数
function showMessage(message, color) {
console.log("%c" + message, "color: " + (color ? color : "white") + ";");
}
// フォームのsubmitイベントを監視する
document.getElementById("form").addEventListener("submit", function(event) {
event.preventDefault();
var hint = document.getElementById("hint").value.trim();
if (hint === "") {
showMessage("ヒントを入力してください。", "red");
} else {
showMessage("あなたが入力したヒントは「" + hint + "」です。", "blue");
solve(hint);
}
});
// 最初に問題を表示する
showQuestion();
</script>
</body>
</html>
```
このプログラムは、1つのhtmlファイル内に書かれています。謎解き脱出ゲームとして、問題を出し、ヒントを入力して解答を確認する形式です。JavaScriptのコードでは、問題を表示する`showQuestion`関数、ヒントを解き答え合わせをする`solve`関数、メッセージを表示する`showMessage`関数などを定義しています。フォームのsubmitイベントを監視して、入力されたヒントを受け取り、`solve`関数で解答を判定し、コンソールに結果を表示します。また、最初に`showQuestion`関数を呼び出して、問題を表示させます。
ジョークとして、問題文には「黒点」という言葉に隠された謎を解くように書かれていますが、hintには「ブレイユ」という文字列を入れることで解答できるようになっています。
