Xây dựng Báo cáo Tiến độ của Học sinh bằng JavaScript

Khả năng xem báo cáo tiến bộ của học sinh trực tuyến mang lại nhiều lợi ích cho cả phụ huynh và nhà giáo dục. Truy cập trực tuyến cung cấp cho phụ huynh và học sinh những hiểu biết sâu sắc theo thời gian thực về kết quả học tập của học sinh, cho phép họ cập nhật thông tin và tham gia vào quá trình học tập của mình. Họ có thể dễ dàng theo dõi tiến độ, giám sát việc đi học chuyên cần, xem điểm và xác định các lĩnh vực có thể cần hỗ trợ thêm.

Đối với các nhà giáo dục, báo cáo tiến độ trực tuyến hợp lý hóa quy trình báo cáo, giúp việc tạo và chia sẻ các đánh giá toàn diện về thành tích của học sinh trở nên dễ dàng hơn. Nó cho phép giáo viên giao tiếp hiệu quả hơn với phụ huynh, thúc đẩy sự hợp tác và cho phép các biện pháp can thiệp có mục tiêu. Nhìn chung, việc truy cập trực tuyến vào các báo cáo tiến độ của học sinh giúp tăng cường giao tiếp, nâng cao trách nhiệm giải trình và hỗ trợ cách tiếp cận chủ động để đạt được thành công của học sinh.

Rất may, ActiveReportsJS giúp các nhà giáo dục dễ dàng xây dựng và tùy chỉnh các báo cáo tiến độ này cũng như giúp họ dễ dàng xem chúng trong các ứng dụng web. Bài viết này sẽ chỉ cho bạn cách sử dụng Trình thiết kế báo cáo ActiveReportsJS để tạo báo cáo tiến độ và sử dụng Trình xem báo cáo để hiển thị báo cáo của bạn trong ứng dụng JavaScript.

Tổng quan về nội dung

• Kết nối dữ liệu với báo cáo

• Tạo đầu trang và chân trang của báo cáo tiến độ

• Hiển thị thông tin sinh viên

• Xây dựng bảng tổng hợp GPA và tiến độ học tập

• Tạo Tablix về tiến trình hành vi và thái độ

• Tạo Tablix chấm công

• Thêm ActiveReportsJS vào ứng dụng JavaScript

  
  

Nếu bạn muốn theo dõi bài viết, bạn có thể tìm thấy báo cáo và đơn đăng ký hoàn chỉnh tại đây .

Kết nối dữ liệu với báo cáo

Với mục đích của bài viết này, chúng tôi sẽ sử dụng trình thiết kế độc lập có trong bản tải xuống ActiveReportsJS. Sau khi cài đặt và khởi chạy trình thiết kế, chúng ta sẽ có thể xem báo cáo trống của mình. Trước khi bắt đầu thêm các điều khiển vào báo cáo, chúng tôi cần đảm bảo liên kết dữ liệu chúng tôi sẽ sử dụng với báo cáo.

Ở phía trên bên phải của công cụ thiết kế, chọn bảng Dữ liệu . Thao tác này sẽ hiển thị màn hình cho Nguồn dữ liệu , Tập dữ liệu và Thông số của chúng tôi:

Để bắt đầu, chúng tôi sẽ cần một nguồn dữ liệu. Nhấp vào nút Thêm trong phần Nguồn dữ liệu để hiển thị cửa sổ Nguồn dữ liệu:

Từ đây, chúng tôi có thể cho báo cáo biết nơi cần tìm dữ liệu. Chúng tôi có hai tùy chọn về nơi dữ liệu có thể đến: JSON từ xa hoặc JSON được nhúng . JSON từ xa yêu cầu bạn cung cấp URL cho điểm cuối API, trong khi JSON nhúng cho phép bạn chọn tệp JSON để sử dụng để tải dữ liệu trực tiếp vào báo cáo.

Đối với báo cáo này, chúng tôi sẽ sử dụng JSON nhúng để tải một số tệp JSON ; Chúng tôi có các tệp thông tin, điểm số, hành vi và điểm danh của học sinh, vì vậy chúng tôi sẽ cần tạo nguồn dữ liệu cho từng tệp này.

Khi hoàn tất, nó sẽ trông như thế này:

Bây giờ chúng ta đã thiết lập bốn nguồn dữ liệu của mình, đã đến lúc tạo tập dữ liệu cho từng nguồn. Để tạo tập dữ liệu cho nguồn dữ liệu, chỉ cần nhấp vào biểu tượng Dấu cộng bên cạnh nguồn dữ liệu bạn muốn sử dụng; thao tác này sẽ hiển thị cửa sổ Tập dữ liệu:

Vì chúng tôi đang sử dụng JSON được nhúng nên tất cả những gì chúng tôi cần cung cấp là Đường dẫn JSON; điều này cho báo cáo biết dữ liệu nào chúng tôi muốn truy xuất từ JSON. Trong trường hợp này, chúng tôi muốn truy xuất tất cả JSON, vì vậy chúng tôi sử dụng đường dẫn $.* . Điều này yêu cầu báo cáo nhận được tất cả dữ liệu có sẵn.

Khi Đường dẫn JSON được đưa vào, hãy nhấn nút Xác thực để xác nhận rằng tập dữ liệu của bạn có thể truy xuất dữ liệu được yêu cầu.

Nếu mọi thứ hoạt động chính xác thì trường Trường cơ sở dữ liệu giờ đây sẽ được điền các giá trị từ dữ liệu của chúng tôi:

Sau khi chúng tôi thiết lập tập dữ liệu cho từng nguồn dữ liệu, bảng dữ liệu của chúng tôi sẽ trông như thế này:

Và thế là xong! Bây giờ chúng ta đã có dữ liệu được kết nối với báo cáo mà chúng ta có thể tham khảo trong các điều khiển. Trong phần tiếp theo, chúng ta sẽ bắt đầu xây dựng các phần khác nhau của báo cáo, bắt đầu bằng đầu trang và chân trang.

Tạo đầu trang và chân trang của báo cáo tiến độ

Bây giờ chúng ta có thể bắt đầu tạo các thành phần báo cáo khi dữ liệu đã được thiết lập. Để bắt đầu, chúng tôi sẽ tạo đầu trang và chân trang cho các trang trong báo cáo của mình. Trên thanh công cụ, chọn tab Phần và nhấp vào nút Thêm đầu trang và Thêm chân trang :

Điều này sẽ thêm phần đầu trang và chân trang vào báo cáo. Chúng tôi muốn thêm hai điều khiển từ Hộp công cụ điều khiển vào phần tiêu đề. Nhấp vào nút bánh hamburger ở phía trên bên trái của công cụ thiết kế để mở rộng hộp công cụ, sau đó kéo Hộp văn bản và điều khiển Hình ảnh vào tiêu đề trang.

Bên trong TextBox, chúng ta sẽ đặt giá trị của nó thành “Báo cáo tiến độ của học sinh”.

Sau đó, chúng tôi sẽ nhúng hình ảnh vào báo cáo cho điều khiển Hình ảnh. Chọn tùy chọn kiểm soát Hình ảnh, sau đó mở rộng danh sách thả xuống Hình ảnh trong phần Giao diện của thuộc tính. Để nhúng hình ảnh, hãy nhấp vào nút Đã nhúng rồi nhấp vào **Tải…** để mở trình khám phá tệp và chọn hình ảnh bạn muốn tải:

Bây giờ hình ảnh của chúng ta đã được tải và văn bản của chúng ta đã được thiết lập, chúng ta sẽ thực hiện một chút thay đổi kích thước và kiểu dáng thông qua bảng Thuộc tính. Khi hoàn tất, phần tiêu đề của chúng ta trông như sau:

Bây giờ là lúc tạo chân trang. Trong phần chân trang, chúng tôi sẽ muốn bao gồm 3 Hộp văn bản: hai hộp chứa thông tin liên hệ và một hộp hiển thị năm hiện tại. Bên cạnh mỗi hộp chứa thông tin liên hệ, chúng tôi cũng muốn thêm biểu tượng điện thoại để biểu thị rằng đây là những số điện thoại.

Kéo ba điều khiển TextBox và hai điều khiển Hình ảnh vào khu vực chân trang của trang. Chúng tôi sẽ làm theo các bước tương tự được nêu ở trên để thiết lập hình ảnh.

Đối với hai trong số các điều khiển TextBox, chúng tôi sẽ nhập một số số điện thoại có thể được sử dụng để liên hệ với chủ sở hữu báo cáo, nhưng đối với điều khiển thứ ba, chúng tôi sẽ sử dụng một biểu thức để nó luôn hiển thị năm hiện tại.

Bên trong TextBox thứ ba này, đặt giá trị này: © {Year(Now())} GrapeCity, Inc. Mọi quyền được bảo lưu. Bạn có thể thấy bên trong chuỗi mà chúng tôi đã bao gồm các dấu ngoặc nhọn và bên trong dấu ngoặc nhọn là biểu thức Year(Now()) ; điều này sẽ trả về năm hiện tại và báo cáo biết đánh giá đây là một biểu thức vì chúng tôi đã đặt nó trong dấu ngoặc nhọn.

Sau khi thực hiện một chút kiểu dáng, phần chân trang sẽ trông như thế này:

Chúng tôi có thể xem trước báo cáo để xem biểu thức mà chúng tôi đã tạo đánh giá như thế nào:

Bây giờ chúng ta đã tạo đầu trang và chân trang, chúng sẽ được hiển thị trên mỗi trang báo cáo. Trong phần tiếp theo, chúng tôi sẽ thêm một số dữ liệu chúng tôi đã tải bằng cách hiển thị một số thông tin cơ bản về học sinh.

Hiển thị thông tin sinh viên

Bây giờ là lúc bắt đầu kết hợp một số dữ liệu mà báo cáo đang tải. Đầu tiên, kéo điều khiển TextBox và Container vào nội dung báo cáo. Mở rộng cả hai để chúng mở rộng hầu hết chiều rộng của trang và bên trong điều khiển TextBox, bao gồm văn bản “Thông tin học sinh”:

Chúng tôi sẽ sử dụng Vùng chứa này để chứa tất cả thông tin liên quan đến học sinh.

Bây giờ, chúng ta sẽ đặt TextBox bên trong Container; những thứ này sẽ được sử dụng cho cả nhãn và để chứa thông tin từ các tập dữ liệu.

Thiết lập vùng chứa để phù hợp với những điều sau:

Bây giờ, bên trong mỗi TextBox trống, chúng ta sẽ muốn bao gồm các biểu thức truy xuất dữ liệu từ tập dữ liệu thông tin học sinh của mình.

Bao gồm văn bản sau trong các Hộp văn bản được liên kết:

Khi hoàn tất, bạn sẽ có thể xem trước báo cáo và xem những thông tin sau:

Xây dựng bảng tổng hợp GPA và tiến độ học tập

Tiếp theo, chúng tôi sẽ hiển thị thông tin liên quan đến điểm số của học sinh.

Đầu tiên chúng ta sẽ tạo phần Tóm tắt GPA; giống như trong phần trước, hãy kéo điều khiển Hộp văn bản và Vùng chứa vào báo cáo. Mở rộng cả hai để chúng mở rộng hầu hết chiều rộng của trang và bên trong điều khiển TextBox, bao gồm văn bản “Tóm tắt GPA”:

Bên trong Vùng chứa này, chúng tôi muốn hiển thị điểm trung bình chung của học sinh cũng như phần trăm của họ.

Kéo bốn Hộp văn bản vào vùng chứa, thiết lập chúng như sau:

Tiếp theo, chúng ta sẽ cần thiết lập thêm một số biểu thức bên trong các TextBox trống:

Biểu thức GPA tổng thể sẽ tính toán phần trăm mà chúng rơi vào và sau đó, dựa vào đó, sẽ cung cấp giá trị GPA bằng số liên quan. Biểu thức Phần trăm chỉ đơn giản tính điểm của chúng dựa trên tỷ lệ phần trăm.

Khi hoàn tất, bạn sẽ có thể thấy những thông tin sau khi xem trước báo cáo:

Bây giờ chúng ta đã tạo xong bản tóm tắt, đã đến lúc hiển thị chi tiết về tiến bộ của học sinh theo chủ đề. Bên dưới phần Tóm tắt GPA, hãy kéo điều khiển Hộp văn bản và Bảng vào nội dung báo cáo. Bên trong TextBox, bao gồm văn bản “Tiến bộ học tập”, trong khi bên trong bảng, bao gồm các tiêu đề cột sau:

• Chủ thể
• Giáo viên
• Học kỳ 1
• Học kỳ 2
• Học kỳ 3

Khi hoàn thành, nó sẽ trông giống như thế này:

Điều tiếp theo chúng ta cần làm là liên kết tập dữ liệu chính xác với bảng. Chọn điều khiển Bảng, sau đó bên trong bảng Thuộc tính, đặt danh sách thả xuống Tên tập dữ liệu để sử dụng tập dữ liệu đánh dấu . Bây giờ chúng ta có thể tham chiếu dữ liệu từ tập dữ liệu này trong bảng.

Điền vào phần còn lại của bảng như sau:

Sau khi tạo kiểu bổ sung một chút, bảng điều khiển bây giờ trông như sau:

Khi chúng tôi xem trước báo cáo của mình, bảng sẽ trông như sau:

Thêm tab Tiến trình hành vi và thái độ

Bây giờ người dùng có thể xem tiến độ học tập của mình, đã đến lúc chúng ta thêm một phần hiển thị điểm của giáo viên về sự tiến bộ về hành vi và thái độ của học sinh. Trước khi thực hiện việc này, chúng tôi sẽ thêm một phần mới vào báo cáo của mình. Ở cuối trình thiết kế báo cáo, bạn sẽ thấy nút Thêm phần ; nhấn vào đây và nó sẽ thêm Trang/Phần liên tục mới vào báo cáo của bạn:

Bây giờ, bên dưới tiêu đề của phần mới này, hãy thêm điều khiển TextBox, điều khiển Vùng chứa và ba điều khiển TextBox bên trong điều khiển Vùng chứa:

Như bạn có thể thấy, chúng tôi đã điền vào các Hộp văn bản này bằng văn bản của riêng mình. Trước khi thêm các điều khiển Tablix, chúng tôi muốn thực hiện thêm một sửa đổi.

Trong các bảng này, chúng tôi muốn sử dụng các biểu tượng để hiển thị vị trí của học sinh ở mức Xuất sắc , Đạt yêu cầu và Cần cải thiện . Chúng ta sẽ sử dụng các biểu tượng màu xanh lá cây, vàng và đỏ. Để thêm những giá trị này, hãy thêm các giá trị sau vào thuộc tính Hình ảnh của Hộp văn bản được liên kết:

Bây giờ nếu chúng ta xem trước báo cáo, chúng ta sẽ thấy như sau:

Bây giờ, vùng chứa Tablix đã được thiết lập, đã đến lúc thêm các điều khiển Tablix để hiển thị dữ liệu tiến trình hành vi và thái độ. Kéo điều khiển Tablix vào vùng chứa này; bạn sẽ thấy Tablix Wizard bật lên trong cửa sổ thiết kế:

Trình hướng dẫn Tablix là một công cụ cực kỳ mạnh mẽ để tạo điều khiển Tablix (hoặc bảng trụ như nó còn được gọi), có thể hiển thị dữ liệu theo những cách năng động hơn bảng tiêu chuẩn.

Chúng tôi sẽ sử dụng dữ liệu từ tập dữ liệu hành vi mà chúng tôi đã tạo ở đầu bài viết. Mở rộng tập dữ liệu này, sau đó kéo và thả giá trị BehavioralMeasure vào phần Nhóm Hàng của trình hướng dẫn, đồng thời kéo và thả các giá trị T1 , T2 và T3 vào phần Giá trị của trình hướng dẫn. Đảm bảo thay đổi giá trị tổng hợp cho T1, T2 và T3 từ Count thành None .

Trước khi hoàn tất, hãy nhấp vào nút Bộ lọc trong trình hướng dẫn; chúng ta cần thiết lập bộ lọc cho bảng này. Tại đây, nhấp vào nút Thêm để thêm bộ lọc mới. Đặt hộp đầu tiên thành trường Loại của tập dữ liệu và đặt bộ lọc để tìm chuỗi “Thói quen làm việc”:

Khi hoàn tất, bạn có thể nhấn nút OK và xem Tablix của bạn trông như thế nào vào thời điểm này:

Bây giờ, giống như với các Hộp văn bản Đạt yêu cầu và Cần cải thiện Xuất sắc , chúng ta sẽ cập nhật các ô dữ liệu cho các cột T1, T2 và T3 để hiển thị các biểu tượng thay vì giá trị văn bản. Đối với mỗi ô dữ liệu này, hãy xóa giá trị văn bản và cập nhật thuộc tính Hình ảnh của Hộp văn bản được liên kết:

Điều này sẽ giúp điều khiển Tablix đặt biểu tượng đèn giao thông chính xác vào ô dựa trên giá trị của ô. Sau một số cập nhật về kiểu dáng, Tablix đầu tiên của chúng ta sẽ trông như sau:

Khi chúng tôi xem trước báo cáo, Tablix sẽ trông như sau:

Bây giờ, chúng ta cần tạo điều khiển Tablix thứ hai để hiển thị thông tin về thái độ. Điều đáng mừng là Tablix này gần giống với cái chúng tôi vừa tạo. Sao chép và dán Tablix đầu tiên mà chúng tôi đã tạo, sau đó đặt nó vào vùng chứa ngay bên dưới Tablix khác. Sau đó, cập nhật ô tiêu đề đầu tiên từ “Thói quen làm việc” thành “Tuân thủ Quy tắc ứng xử”.

Cuối cùng, chọn điều khiển Tablix thứ hai và nhấp vào biểu tượng bánh răng ở phía trên bên phải của điều khiển; thao tác này sẽ mở lại trình hướng dẫn Tablix. Nhấp vào nút Bộ lọc ; chúng tôi sẽ sửa đổi bộ lọc mà chúng tôi hiện đang sử dụng.

Cập nhật giá trị văn bản bộ lọc từ “Thói quen làm việc” thành “Ứng xử trong lớp học”. Bây giờ, phần Tiến trình Hành vi và Thái độ sẽ trông giống như sau:

Khi chúng tôi xem trước báo cáo, phần Tiến trình Hành vi và Thái độ sẽ như sau:

Thêm tab Chấm công

Phần cuối cùng mà chúng tôi sắp thêm vào báo cáo sẽ hiển thị sự tham dự của học sinh. Kéo điều khiển TextBox và điều khiển Tablix vào báo cáo rồi đặt chúng bên dưới phần Tiến trình Hành vi và Thái độ.

Bên trong trình hướng dẫn Tablix, chúng ta sẽ sử dụng bộ dữ liệu chấm công ; kéo giá trị Ngày vào phần Nhóm Hàng của trình hướng dẫn và kéo các giá trị T1 , T2 và T3 vào phần Giá trị của trình hướng dẫn.

Ngoài ra, hãy đảm bảo đặt các giá trị tổng hợp cho T1 , T2 và T3 thành Sum :

Bây giờ, phần Điểm danh sẽ trông như sau:

Và khi chúng ta xem trước báo cáo, nó sẽ trông như sau:

Bây giờ, khi báo cáo hoàn tất, khi chúng tôi xem trước báo cáo, các trang sẽ trông như sau:

Thêm ActiveReportsJS vào ứng dụng JavaScript

Bây giờ chúng ta đã tạo xong báo cáo tiến độ học tập, đã đến lúc thêm Trình xem báo cáo ActiveReportsJS vào ứng dụng JavaScript để chúng ta có thể xem báo cáo trong trình duyệt. Tạo một tệp mới có tên là index.html và mở tệp này trong IDE bạn chọn.

Chúng ta sẽ thêm đoạn mã sau vào tập tin:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Student Progress Report</title> <meta name="description" content="ARJS Report viewer" /> <meta name="author" content="GrapeCity" /> </head> <body></body> </html>

Bây giờ tệp HTML đã được thiết lập, đã đến lúc thêm ActiveReportsJS vào tệp. Đối với điều này, chúng tôi sẽ sử dụng CDN để tải các tệp cần thiết.

Bên trong thẻ <head> , thêm đoạn mã sau:

 <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-ui.css" type="text/css" /> <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-viewer.css" type="text/css" /> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-core.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-viewer.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-pdf.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-tabular-data.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-html.js"></script>

Hai dòng mã đầu tiên tải các tệp CSS cần thiết: tệp CSS lõi và tệp CSS của trình xem. Sau đó, chúng tôi đang tải tệp JavaScript cốt lõi và tệp JavaScript của trình xem. Cuối cùng, chúng tôi đang tải tệp PDF, dữ liệu dạng bảng và tệp JavaScript HTML ; những tệp này cung cấp cho người dùng khả năng xuất báo cáo theo các loại tệp tương ứng.

Nếu bạn không muốn cho phép người dùng xuất báo cáo theo một định dạng cụ thể, tất cả những gì bạn cần làm là loại trừ thẻ <script> được liên kết và người dùng sẽ không thể xuất ở loại tệp đó.

Tiếp theo, chúng ta sẽ thêm một số kiểu cơ bản cho các thành phần trên trang. Bên trong thẻ <head> , bên dưới thẻ script chúng ta vừa thêm, hãy thêm đoạn mã sau:

 <style> body { margin: 0; } #viewer-host { width: 100%; height: 100vh; } </style>

Điều này sẽ loại bỏ lề khỏi phần tử nội dung và cũng sẽ đặt chiều rộng và chiều cao của phần tử bằng ID của người xem-máy chủ .

Bây giờ, bên trong thẻ <body> , hãy thêm phần tử sau:

 <div id="viewer-host"></div>

Chúng tôi đã cấp cho div này ID của user-host ; điều này có nghĩa là nó sẽ nhận các kiểu CSS mà chúng ta đã đặt trước đó, nhưng nó cũng sẽ cho phép chúng ta liên kết Trình xem Báo cáo JavaScript với div.

Cuối cùng, bên dưới div, thêm đoạn mã sau:

 <script> var viewer = new ActiveReports.Viewer("#viewer-host"); viewer.open("StudentProgressReport.rdlx-json"); </script>

JavaScript này sẽ tạo Trình xem ActiveReportsJS mới, liên kết nó với phần tử có ID trình xem-máy chủ . Sau đó, chúng tôi gọi phương thức mở của trình xem và chuyển tên báo cáo của mình.

Điều cuối cùng bạn cần chắc chắn là bạn đặt báo cáo vào cùng thư mục với tệp index.html của mình; nếu không, hãy đảm bảo trỏ đến đúng vị trí của báo cáo của bạn.

Việc duy nhất còn lại là chạy ứng dụng. Bạn có thể sử dụng bất kỳ máy chủ web tĩnh nào để chạy ứng dụng; vì chúng tôi sử dụng Visual Studio Code nên chúng tôi sử dụng tiện ích mở rộng Live Server để nhanh chóng khởi động máy chủ web tĩnh. Khi bạn mở ứng dụng trong trình duyệt của mình, bạn sẽ thấy như sau:

Phần kết luận

Và đó là tất cả những gì cần làm! Như bạn có thể thấy, ActiveReportsJS giúp dễ dàng xây dựng các báo cáo tiến độ tùy chỉnh, cho phép giáo viên cũng như học sinh theo dõi tiến bộ của học sinh trong suốt năm học.

Nếu bạn muốn tải xuống báo cáo và ứng dụng được xây dựng trong bài viết này, bạn có thể tìm thấy kho lưu trữ tại đây .

Chúc mừng mã hóa!