أنشئ صفحة ويب تحتوي على لغز حيث يقوم المستخدمون بتوصيل 9 نقاط باستخدام 4 خطوط مستقيمة دون رفع زر الفأرة. يمكن للخطوط أن تمتد خارج شبكة النقاط. قم بتضمين قواعد الحل وقدم حلاً تفاعلياً باستخدام النقر والسحب بالماوس. اعرض رسالة تهنئة ('Поздравляем, вы решили головоломку!') عند حل اللغز بشكل صحيح أو اشرح سبب عدم صحة الحل. وفر مساحة كافية لحل اللغز مع إمكانية امتداد الخطوط خارج الشبكة.

نظرة عامة على المشروع
صمِّم صفحة لغز تعرض تحدي 'وصل 9 نقاط بـ4 خطوط'.

تصميم واجهة المستخدم وتجربة الاستخدام
- اعرض 9 نقاط مرتبة في شبكة 3x3.
- اسمح للمستخدمين برسم الخطوط من خلال النقر والسحب بالماوس.
- تأكد من أن الخطوط المرسومة يمكن أن تمتد خارج منطقة الشبكة.

الوظائف الأساسية والمنطق
- نفّذ وظيفة رسم الخطوط عند النقر والسحب بالماوس.
- تحقق تلقائيًا من صحة الحل فور رسم الخطوط.
- قدم تغذية راجعة فورية: اعرض 'Поздравляем, вы решили головоломку!' إذا تم الحل بشكل صحيح أو قدم شرحًا واضحًا إذا كان الحل خاطئًا.

أفضل الممارسات
- تأكد من أن الواجهة سريعة الاستجابة وسهلة الاستخدام.
- تحقق من صحة الحل ديناميكياً دون الحاجة إلى تحديث الصفحة.
- استخدم رسائل خطأ ذات مغزى لتوجيه المستخدمين نحو الحل الصحيح.

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

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

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

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