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

Обзор проекта
Разработайте страницу головоломки с заданием «Соедините 9 точек 4 линиями».

Дизайн UI/UX и взаимодействие
- Отобразите 9 точек, расположенных в виде сетки 3x3.
- Позвольте пользователям рисовать линии, кликая и перетаскивая мышь.
- Убедитесь, что нарисованные линии могут выходить за границы сетки.

Основной функционал и логика
- Реализуйте функционал рисования линий через клики и перетаскивания.
- Автоматически проверьте правильность решения после рисования линий.
- Обеспечьте мгновенную обратную связь: покажите «Поздравляем, вы решили головоломку!» при правильном решении или дайте ясное объяснение в противном случае.

Лучшие практики
- Обеспечьте удобный и адаптивный интерфейс.
- Валидируйте решение динамически без перезагрузки страницы.
- Используйте понятные сообщения об ошибках для направления пользователей к правильному решению.

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

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

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

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