Erstelle eine Webseite mit einem Rätsel, bei dem Nutzer 9 Punkte mithilfe von 4 geraden Linien verbinden, ohne die Maustaste loszulassen. Die Linien können über das Punktgitter hinausgehen. Füge Lösungsvorgaben ein und biete eine interaktive Lösung per Mausklicks und -ziehen an. Zeige eine Glückwunschnachricht ('Поздравляем, вы решили головоломку!') an, wenn das Rätsel korrekt gelöst wird, oder erkläre, warum die Lösung falsch ist. Stelle genügend Platz bereit, damit die Linien über das Gitter hinaus erweitert werden können.

Projektübersicht
Gestalte eine Rätselseite mit der Herausforderung 'Verbinde 9 Punkte mit 4 Linien'.

UI/UX Design und Ablauf
- Zeige 9 Punkte in einem 3x3-Gitter an.
- Erlaube den Nutzern, Linien durch Klicken und Ziehen mit der Maus zu zeichnen.
- Stelle sicher, dass die gezeichneten Linien über das Gitter hinausgehen können.

Kernfunktionalität und Logik
- Implementiere die Linien-Zeichenfunktion bei Mausklicks und -ziehbewegungen.
- Überprüfe automatisch die Richtigkeit der Lösung, sobald die Linien gezeichnet wurden.
- Gib direktes Feedback: Zeige 'Поздравляем, вы решили головоломку!' an, wenn die Lösung korrekt ist, oder liefere eine klare Erklärung im Fehlerfall.

Beste Praktiken
- Sorge für eine responsive und benutzerfreundliche Oberfläche.
- Validieren Sie die Lösung dynamisch ohne Seitenaktualisierung.
- Verwende aussagekräftige Fehlermeldungen, um den Nutzer zur richtigen Lösung zu führen.

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

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

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

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