Créez une page web avec un puzzle où les utilisateurs connectent 9 points à l'aide de 4 lignes droites sans relâcher le bouton de la souris. Les lignes peuvent s'étendre au-delà de la grille de points. Incluez les règles de résolution et proposez une solution interactive utilisant des clics et des glissades de souris. Affichez un message de félicitations ('Поздравляем, вы решили головоломку!') en cas de bonne résolution ou expliquez en cas d'erreur. Fournissez suffisamment d'espace pour que les lignes puissent s'étendre hors de la grille.

Aperçu du projet
Concevez une page puzzle présentant le défi « Reliez 9 points avec 4 lignes ».

Design UI/UX et flux
- Affichez 9 points disposés en grille 3x3.
- Permettez aux utilisateurs de tracer des lignes en cliquant et en déplaçant la souris.
- Assurez-vous que les lignes tracées puissent s'étendre hors de la grille.

Fonctionnalités et logique
- Implémentez la fonctionnalité de dessin de lignes par clics et glissades.
- Vérifiez automatiquement la validité de la solution une fois les lignes tracées.
- Fournissez un retour immédiat : affichez 'Поздравляем, вы решили головоломку!' si la solution est correcte ou une explication claire sinon.

Bonnes pratiques
- Assurez-vous d'une interface réactive et conviviale.
- Validez la solution de façon dynamique sans rafraîchir la page.
- Utilisez des messages d'erreur explicites pour guider les utilisateurs vers la solution correcte.

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

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

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

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