オカンが意地悪なクイズを出して来るLINE風アプリ

こんにちは！オカンだよ。今日はクイズを出すから、しっかり答えてね。
さあ、始めるよ！
Q. 私の好きな果物は何でしょう？
以下が、オカンが意地悪なクイズを出してくるLINE風アプリの実装例です。

HTML:

```
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>オカンが意地悪なクイズを出して来るLINE風アプリ</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="chat-window">
      <div class="chat-bubble">
        <p class="chat-content">
          こんにちは！オカンだよ。今日はクイズを出すから、しっかり答えてね。
        </p>
      </div>
      <div class="chat-bubble">
        <p class="chat-content">
          さあ、始めるよ！<br />
          Q. 私の好きな果物は何でしょう？
        </p>
      </div>
      <div class="chat-bubble">
        <div class="answer">
          <input type="text" placeholder="答えを入力してください" />
          <button onclick="checkAnswer()">送信</button>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>
```

JavaScript:

```
function checkAnswer() {
  const answer = document.querySelector("input").value;

  if (answer === "なし") {
    const chatBubble = document.createElement("div");
    chatBubble.classList.add("chat-bubble");
    const chatContent = document.createElement("p");
    chatContent.classList.add("chat-content");
    chatContent.textContent = "正解！！！すごいじゃない！";

    chatBubble.appendChild(chatContent);

    const chatWindow = document.querySelector(".chat-window");
    chatWindow.appendChild(chatBubble);

    const answerBlock = document.querySelector(".answer");
    answerBlock.parentNode.removeChild(answerBlock);
  } else {
    const chatBubble = document.createElement("div");
    chatBubble.classList.add("chat-bubble");
    const chatContent = document.createElement("p");
    chatContent.classList.add("chat-content");
    chatContent.textContent = "残念！違うよ〜。もう一回考えてみてね！";

    chatBubble.appendChild(chatContent);

    const chatWindow = document.querySelector(".chat-window");
    chatWindow.appendChild(chatBubble);
  }
}
```

CSS:

```
.chat-window {
  margin: 50px auto;
  max-width: 600px;
}

.chat-bubble {
  margin: 10px;
  padding: 10px;
  border-radius: 20px;
  max-width: 80%;
  display: inline-block;
}

.chat-content {
  font-size: 18px;
  line-height: 1.5;
}

.answer {
  margin-top: 10px;
}

input[type="text"] {
  padding: 5px;
}

button {
  padding: 5px 10px;
  margin-left: 5px;
  border-radius: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  cursor: pointer;
}
```

このアプリでは、オカンが果物のクイズを出してくるLINE風のチャット画面が作られます。ユーザーは、答えを入力して送信することができます。答えが正しい場合は、「正解！すごいじゃない！」と表示され、答えが間違っている場合は、「残念！違うよ〜。もう一回考えてみてね！」と表示されます。実際に動かしてみると、オカンの意地悪なイメージを思い出させる楽しいアプリになっています。