एक वेबपेज बनाएं जिसमें 'Connect 9 Dots' पहेली हो, जिसमें माउस को उठाए बिना चार लाइनों का उपयोग करें, और लाइनों को ग्रिड से बाहर जाने की अनुमति हो। नियमों का वर्णन करें और इसे माउस से हल करने के लिए इंटरैक्टिव बनाएं। सुनिश्चित करें कि यदि पहेली सही हल हो जाती है तो उपयोगकर्ता को बधाई दी जाए, अन्यथा त्रुटियों की व्याख्या करें।

प्रोजेक्ट अवलोकन
- 'Connect 9 Dots' पहेली के लिए एक वेबपेज तैयार करें।
- गेम को समझाने के लिए नियम और दिशानिर्देश लागू करें।

UI/UX डिज़ाइन और फ्लो
- मिनिमलिस्ट डिज़ाइन जिसमें डॉट्स के चारों ओर पर्याप्त जगह हो ताकि पारंपरिक समाधान संभव हो सकें।
- माउस के उपयोग से डॉट्स को लाइनों से जोड़ने के लिए इंटरैक्टिव क्षेत्र।
- चुनौती के लिए टाइमर लागू करें।

कोर कार्यक्षमता और लॉजिक
- इंटरैक्टिव लाइन ड्राइंग के लिए JavaScript/CSS का उपयोग करें।
- पहेली के समाधान को मान्य करें: यदि सही है तो बधाई संदेश दिखाएं, या गलत होने पर त्रुटि समझाएं।
- टाइमर पहेली हल करने में लगने वाले समय को गिनता है।

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

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

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

Q: Какой стиль или визуальное оформление вы предпочитаете для головоломки?
A: Например, минималистичный, яркий и игривый.

Q: Хотите ли вы добавить таймер или счетчик попыток для решения головоломки?
A: Да, хочу таймер.