マウスボタンを離さずに、4本の直線を使って9つの点を繋ぐパズルを含むウェブページを作成してください。線は点のグリッドの外にまで延びることができます。解くためのルールを含め、マウスのクリックとドラッグを使用するインタラクティブな解法を提供してください。正しく解けた場合は 'Поздравляем, вы решили головоломку!' というお祝いのメッセージを表示し、正解でない場合はその理由を説明してください。グリッド外に線が延びることができる十分なスペースを確保してください。

プロジェクト概要
「4本の直線で9つの点を繋ぐ」挑戦をフィーチャーしたパズルページを設計してください。

UI/UXデザインと流れ
- 3x3グリッドに配置された9つの点を表示する。
- ユーザーがマウスのクリックとドラッグで線を描けるようにする。
- 描かれた線がグリッド域外にも拡張できるようにする。

主要機能とロジック
- クリックとドラッグで線を描く機能を実装する。
- 線が描かれたら自動的に解答の正否をチェックする。
- 正解の場合は 'Поздравляем, вы решили головоломку!' のメッセージを表示し、不正解の場合は理由の説明をすぐに提供する。

ベストプラクティス
- レスポンシブで使いやすいインターフェースを提供する。
- ページをリロードせずに動的に解答を検証する。
- 明確なエラーメッセージでユーザーを正解へ導く。

Создай страницу с головоломкой соедини 9 точек 4-мя линиями не отпуская левой кнопки мыши, линии могут выходить за пределы поля точек.
опиши правила и сделай чтобы можно было ее решить мышкой.
Обязательно выводи поздравление если задача решена,  или объяснение почему задача решена неверно.

Оставь достаточно места, для того чтобы решить задачу и выйти за пределы как в классическом решении

Q: Как должны выглядеть 9 точек на странице?
A: Например, сетка 3x3.

Q: Какое сообщение вывести при правильном решении?
A: Например, 'Поздравляем, вы решили головоломку!'.