Erstelle eine Webseite, die ein Rätsel präsentiert, bei dem Benutzer 9 Punkte mit 4 geraden Linien verbinden sollen, ohne die Maus loszulassen.

Anweisungen:
- Puzzle-Layout: Ordne die Punkte in einem 3x3-Raster auf der Webseite an.
- Benutzerinteraktion: Ermögliche es den Nutzern, durch Klicken und Ziehen zwischen den Punkten gerade Linien zu zeichnen. Sorge dafür, dass die Linien durchgehenden Kontakt behalten, ohne dass die Maus losgelassen wird.
- Rätselregeln: Erkläre klar das Ziel — verbinde alle 9 Punkte mit nur 4 durchgehenden geraden Linien.

Feedback:
- Erfolgsmeldung: Wenn alle Punkte korrekt mit 4 Linien verbunden sind, zeige eine freundliche und informelle Glückwunschnachricht an.
- Fehlererklärung: Falls die Lösung falsch ist, gib eine freundliche Erklärung, warum die Bedingungen nicht erfüllt wurden, und biete Tipps oder Zuspruch an.

Nutzererlebnis:
- Gestalte eine ansprechende Nutzererfahrung mit klaren Anweisungen und interaktivem Feedback, sodass die Benutzer verschiedene Ansätze ausprobieren können, ohne frustriert zu werden.

Überlegungen:
- Erstelle ein intuitives Design, damit die Nutzer die Rätselregeln leicht verstehen und reibungslos interagieren können. Implementiere eine Logik zur Überprüfung der Richtigkeit der Lösung und zur Anzeige des entsprechenden Feedbacks. Nutze Best Practices im Webdesign für Barrierefreiheit und responsives Layout.

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

Q: Как именно должна выглядеть головоломка?
A: Точки в квадрате 3x3.

Q: Какой стиль поздравления или объяснения вас интересует?
A: Неофициальный и дружелюбный.