ऐसी वेबपेज बनाएँ जिसमें एक पहेली हो, जहाँ उपयोगकर्ता बिना माउस बटन छोड़े 4 सीधी रेखाओं का उपयोग करके 9 डॉट को कनेक्ट करें। रेखाएँ डॉट ग्रिड से बाहर भी जा सकती हैं। हल करने के नियम शामिल करें और माउस क्लिक एवं ड्रैग का उपयोग करते हुए एक इंटरएक्टिव समाधान प्रदान करें। यदि सही हल होता है तो 'Поздравляем, вы решили головоломку!' संदेश दिखाएं, अन्यथा गलत होने का कारण समझाएँ। पहेली को सुलझाने के लिए पर्याप्त जगह प्रदान करें, ताकि रेखाएँ ग्रिड से बाहर तक जा सकें।

प्रोजेक्ट अवलोकन
'4 रेखाओं से 9 डॉट कनेक्ट करें' चुनौती वाला एक पहेली पेज डिज़ाइन करें।

UI/UX डिज़ाइन और फ्लो
- 3x3 ग्रिड में व्यवस्थित 9 डॉट प्रदर्शित करें।
- उपयोगकर्ता को माउस क्लिक और ड्रैग करके रेखाएँ बनाने की अनुमति दें।
- सुनिश्चित करें कि बनाई गई रेखाएँ ग्रिड क्षेत्र से बाहर भी बढ़ सकती हैं।

मुख्य कार्यक्षमता और लॉजिक
- माउस क्लिक और ड्रैग से रेखा बनाने की कार्यक्षमता लागू करें।
- रेखाएँ बनने के बाद स्वतः समाधान की जाँच करें।
- तुरंत प्रतिक्रिया दें: सही समाधान पर 'Поздравляем, вы решили головоломку!' संदेश दिखाएं या गलत होने पर स्पष्ट स्पष्टीकरण दें।

सर्वोत्तम प्रथाएँ
- उत्तरदायी और उपयोगकर्ता-मित्र इंटरफ़ेस बनायें।
- पृष्ठ रिफ्रेश किए बिना डायनामिक रूप से समाधान की जांच करें।
- उपयोगकर्ताओं को सही समाधान की ओर मार्गदर्शन करने के लिए स्पष्ट त्रुटि संदेशों का उपयोग करें।

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

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

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

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