Visual Acuity Tester - Copy this Html, Tailwind Component to your project

Hãy tạo giao diện Ứng dụng đo thị lực dành cho học sinh. sử dụng bảng vòng tròn hở của Landolt. Nguyên tắc đo: 1. Học sinh: – Học sinh đứng cách màn hình 5m. – Học sinh nhìn vào màn hình và chọn vòng tròn màu trắng mà mắt có thể nhìn thấy. 2. Người điều khiển: Người điều khiển nhập tên học sinh. – Người điều khiển nhấn nút "Bắt đầu" để bắt đầu bài kiểm tra. Người điều khiển nhấn vào mũi tên trái, phải, trên, dưới theo hướng chỉ tay của học sinh. Người điểu khiển nhấn nút "Tiếp tục" để tiếp tục bài kiểm tra tiếp theo. Nếu thấy kết quả sai nhiều (> 20%) thì người điều khiển nhấn nút "Kết thúc" để kết thúc bài kiểm tra. Người điều khiển nhấn nút "Kết thúc" để kết thúc bài kiểm tra. 3. Hoạt động hệ thống: – Người điều khiển nhấn nút "Bắt đầu": + Hệ thống hiển thị vòng tròn hở của bài kiểm tra này. Người điều khiển nhấn vào mũi tên trái, phải, trên, dưới: + Hệ thống so sánh kết quả với vòng tròn hở đang hiển thị. + Nếu đúng: ghi nhận số lượng đúng + Nếu sai: ghi nhận số lượng sai. + Sau đó hiển thị vòng tròn hở tiếp theo (ngẫu nhiên không trùng với vòng tròn trước đó) Người điểu khiển nhấn nút "Tiếp tục": + Hiển thị bài kiểm tra tiếp theo. + Xóa kết quả của bài kiểm tra trước đó. Người điều khiển nhấn nút "Kết thúc": + Nếu không nhập tên học sinh thì tên học sinh sẽ là "Học sinh chưa nhập tên". + Hiển thị toàn bộ kết quả kiểm tra. + Hiển thị kết luận. Mục tiêu: Hiển thị các bài kiểm tra thị lực cho học sinh. Học sinh làm bài kiểm tra. Hiển thị kết quả bài kiểm tra. Công nghệ sử dụng: HTML, CSS, JavaScript: Để xây dựng giao diện người dùng. Các chức năng chính: Hiển thị các bài kiểm tra thị lực cho học sinh. Học sinh làm bài kiểm tra. Hiển thị kết quả bài kiểm tra.