마우스를 떼지 않고 4개의 직선으로 9개의 점을 연결하는 퍼즐을 특징으로 하는 웹페이지를 만드세요.

지침:
- 퍼즐 레이아웃: 웹페이지에 3x3 격자 형태로 점들을 배치합니다.
- 사용자 상호작용: 사용자가 점 사이를 클릭하고 드래그하여 직선을 그릴 수 있도록 하며, 그 과정에서 선이 끊기지 않도록 합니다.
- 퍼즐 규칙: 4개의 직선만으로 9개의 점을 모두 연결하는 목표를 명확하게 설명합니다. 선이 연속되어야 함을 강조합니다.

피드백:
- 성공 메시지: 모든 점이 4개의 선으로 정확하게 연결되면, 친근하고 캐주얼한 축하 메시지를 표시합니다.
- 오류 설명: 해결이 올바르지 않으면, 조건 미달의 이유와 함께 힌트나 격려를 담은 친근한 설명을 제공합니다.

사용자 경험:
- 명확한 지침과 인터랙티브한 피드백을 제공하여 사용자가 다양한 시도를 즐길 수 있도록 매력적인 경험을 설계합니다.

고려사항:
- 사용자가 퍼즐 규칙을 쉽게 이해하고 원활하게 상호작용할 수 있는 직관적인 레이아웃을 만듭니다. 사용자 해답의 정확성을 확인하고 적절한 피드백을 표시하는 로직을 구현하며, 웹 디자인의 접근성과 반응성을 고려한 최상의 실무 방안을 따릅니다.

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

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

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