Cách các quản trị viên web nhúng một bài kiểm tra Google Forms vào trang web?

Việc nhúng một bài kiểm tra Google Forms vào trang web của bạn thực sự đơn giản một cách đáng ngạc nhiên. Dù bạn là giáo viên tạo bài đánh giá, người huấn luyện xây dựng bài kiểm tra kiến thức, hay quản lý nhân sự thiết kế khảo sát nhân viên, hướng dẫn này sẽ hướng dẫn bạn mọi điều cần biết. Và chúng ta sẽ cùng khám phá một số giải pháp thay thế mạnh mẽ trên đường đi.

Mục lục

Tại sao nên nhúng bài kiểm tra thay vì chia sẻ liên kết?

Hãy thành thực mà nói—có điều gì đó về việc nhấp vào một liên kết đưa người dùng rời khỏi trang web của bạn khiến bạn cảm thấy không đúng. Nó phá vỡ dòng chảy. Trang web được thiết kế cẩn thận của bạn đột nhiên nhường chỗ cho giao diện chung chung của Google, và trước khi bạn kịp nhận ra, một nửa số khách truy cập đã lang thang đi kiểm tra email của họ.

Việc nhúng giữ mọi thứ ở một nơi. Bài kiểm tra của bạn trở thành một phần của trải nghiệm trang web, không phải là một suy nghĩ muộn màng. Nó trông chuyên nghiệp, cảm thấy liền mạch, và quan trọng nhất, giữ cho khán giả của bạn tương tác ngay tại nơi bạn muốn.

Hãy nghĩ về điều này từ góc nhìn của người dùng. Bạn có muốn nhấp vào một liên kết mở tab mới (hoặc tệ hơn, chuyển hướng bạn hoàn toàn), hay cuộn xuống trang bạn đang đọc và tìm thấy bài kiểm tra đang chờ bạn? Câu trả lời có vẻ khá rõ ràng.

Hướng dẫn từng bước nhúng bài kiểm tra Google Forms vào trang web

Lấy mã nhúng từ Google Forms

Đây là nơi phép thuật bắt đầu, và nó dễ dàng hơn việc pha cà phê buổi sáng của bạn. Google Forms trao cho bạn mọi thứ bạn cần trên một chiếc đĩa bạc—bạn chỉ cần biết nơi để tìm.

Bước 1: Mở bài kiểm tra của bạn

Điều hướng đến bài kiểm tra Google Forms của bạn. Thấy nút Gửi ở góc trên bên phải chưa? Đó là cửa ngõ của bạn. Nhấp vào nó, và một cửa sổ sẽ bật lên với một số tùy chọn chia sẻ.

Bước 2: Tìm biểu tượng Nhúng

Nhấp vào biểu tượng ba chấm ở góc trên bên phải để lấy nút mã nhúng. Đây là biểu tượng Nhúng HTML, và nhấp vào nó sẽ hiển thị mã iframe sẽ đưa bài kiểm tra của bạn vào trang web.

Bước 3: Tùy chỉnh kích thước

Đây là nơi bạn có thể sáng tạo một chút. Kích thước mặc định có thể không phù hợp hoàn hảo với trang web của bạn. Muốn bài kiểm tra kéo dài trên toàn bộ chiều rộng của khu vực nội dung? Thay đổi giá trị chiều rộng thành 100%. Thấy bài kiểm tra bị bó hẹp theo chiều dọc? Tăng chiều cao lên 800 hoặc thậm chí 1000 pixel.

Mã của bạn sẽ trông giống như thế này:

<iframe src="https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform?embedded=true" width="100%" height="800" frameborder="0">Đang tải…</iframe>

Bước 4: Sao chép mã

Khi bạn đã hài lòng với kích thước, sao chép toàn bộ đoạn mã. Bây giờ bạn đã sẵn sàng để dán nó vào trang web của mình.

Thêm bài kiểm tra của bạn vào các nền tảng trang web khác nhau

Các trình xây dựng trang web khác nhau có những điểm đặc thù riêng, nhưng tất cả đều nói cùng một ngôn ngữ khi nói đến việc nhúng: HTML. Hãy phân tích quy trình cho các nền tảng phổ biến nhất.

WordPress: Ông lớn quản lý nội dung

WordPress hỗ trợ một phần lớn internet, và vì lý do chính đáng. Đây là cách để nhúng bài kiểm tra của bạn:

Chỉnh sửa trang hoặc bài viết nơi bạn muốn bài kiểm tra xuất hiện. Trong trình chỉnh sửa khối (còn gọi là Gutenberg), nhấp vào biểu tượng dấu cộng để thêm một khối mới. Tìm kiếm HTML tùy chỉnh và chọn nó. Dán mã iframe trực tiếp vào khối đó. Nhấn xuất bản, và bạn đã hoàn tất.

Vẻ đẹp của WordPress là sự linh hoạt của nó—bạn có thể thả khối HTML tùy chỉnh đó vào bất kỳ đâu trong nội dung của mình, kẹp nó giữa các đoạn văn, hoặc dành riêng cho nó một phần riêng.

Trang web HTML thuần: Phương pháp truyền thống

Làm việc với HTML thô? Đây là lãnh thổ của bạn. Mở tệp HTML của bạn trong trình soạn thảo mã yêu thích, tìm vị trí trong phần <body> nơi bạn muốn đặt bài kiểm tra, và dán mã iframe. Lưu tệp, tải nó lên máy chủ của bạn, và bạn đã sẵn sàng.

Có điều gì đó thỏa mãn về sự trực tiếp của phương pháp này. Không có plugin, không có giao diện—chỉ có bạn và mã.

Wix, Squarespace và các trình xây dựng kéo-thả khác

Các nền tảng này tập trung vào việc làm cho mọi thứ trở nên trực quan và dễ nhìn. Tìm một widget Nhúng hoặc khối HTML trong trình chỉnh sửa của bạn. Kéo nó vào trang của bạn, dán mã iframe, và điều chỉnh vị trí theo ý thích.

Mỗi nền tảng có tên gọi hơi khác nhau cho tính năng này—Wix gọi nó là “HTML iframe”, Squarespace sử dụng “Khối mã”—nhưng khái niệm vẫn giống nhau.

Kiểm tra và tùy chỉnh bài kiểm tra đã nhúng

Bạn đã nhúng bài kiểm tra của mình. Tuyệt vời! Nhưng chờ đã—nó có hoạt động theo cách bạn muốn không?

Mở trang web của bạn trên các thiết bị khác nhau. Bài kiểm tra có trông đẹp trên điện thoại của bạn không? Còn máy tính bảng thì sao? Nếu mọi thứ trông chật chội hoặc bị kéo giãn, hãy quay lại các giá trị chiều rộng và chiều cao trong mã iframe của bạn. Đặt chiều rộng thành 100% thường hoạt động tốt cho thiết kế đáp ứng, trong khi chiều cao có thể cần một số thử nghiệm tùy thuộc vào độ dài bài kiểm tra của bạn.

Đây là một vấn đề tinh vi thường làm mọi người vấp phải: nếu Google Form của bạn yêu cầu người dùng đăng nhập bằng tài khoản Google, bạn sẽ mất một số người tham gia không muốn xác thực. Hãy kiểm tra lại cài đặt biểu mẫu và đảm bảo nó được đặt để cho phép phản hồi từ bất kỳ ai, không chỉ những người trong tổ chức của bạn.

Kiểm tra trải nghiệm làm bài kiểm tra thực tế. Tự mình nhấp qua. Tất cả các câu hỏi có hiển thị đúng không? Bạn có thể gửi nó mà không gặp vấn đề gì không? Đôi khi định dạng kỳ lạ len lỏi vào khi nội dung di chuyển từ Google Forms sang phiên bản nhúng của bạn.

Gặp gỡ OnlineExamMaker: Tạo bài kiểm tra có thể nhúng bằng AI

Google Forms rất tốt cho các bài kiểm tra cơ bản, nhưng nếu bạn cần một thứ gì đó mạnh mẽ hơn thì sao? Nếu bạn đang thực hiện các bài đánh giá quan trọng, theo dõi phân tích chi tiết, hoặc chỉ muốn kiểm soát nhiều hơn đối với thiết kế và chức năng?

Hãy gặp OnlineExamMaker, một phần mềm tạo bài thi được hỗ trợ bởi AI, đưa việc xây dựng bài kiểm tra lên một tầm cao mới.

Đây không chỉ là một trình xây dựng biểu mẫu khác. OnlineExamMaker được thiết kế chuyên biệt để tạo ra các bài thi và bài kiểm tra chuyên nghiệp với các tính năng khiến Google Forms trông giống như một cuốn sổ tay. Chúng ta đang nói về các biện pháp chống gian lận, ngân hàng câu hỏi, ngẫu nhiên hóa, phân tích chi tiết và thương hiệu có thể tùy chỉnh làm cho bài kiểm tra của bạn trở nên độc đáo.

Đặc biệt đối với giáo viên và người huấn luyện, khả năng tạo ra các bài thi có thời gian với các câu hỏi ngẫu nhiên có thể là một yếu tố thay đổi cuộc chơi. Các quản lý nhân sự sẽ đánh giá cao các công cụ đánh giá ứng viên chi tiết và khả năng theo dõi tỷ lệ hoàn thành giữa các phòng ban.

Tạo Bài kiểm tra/Kỳ thi tiếp theo của bạn bằng AI trong OnlineExamMaker

SAAS, miễn phí mãi mãi
100% quyền sở hữu dữ liệu

Tạo và nhúng một bài kiểm tra với OnlineExamMaker

Quy trình thực sự đơn giản. Đầu tiên, bạn sẽ tạo bài thi hoặc bài kiểm tra của mình trong nền tảng OnlineExamMaker. Giao diện rất trực quan—thêm câu hỏi, thiết lập quy tắc chấm điểm, cấu hình giới hạn thời gian nếu cần, và tùy chỉnh giao diện để phù hợp với thương hiệu của bạn.

Khi bài kiểm tra của bạn đã sẵn sàng, OnlineExamMaker tạo ra một mã nhúng tương tự như Google Forms, nhưng với nhiều tùy chọn tùy chỉnh hơn. Muốn kiểm soát giao diện bài kiểm tra trong trang web của bạn? Bạn có thể làm điều đó. Cần theo dõi ai đã làm bài kiểm tra và họ đã làm như thế nào? OnlineExamMaker đã hỗ trợ bạn.

Hướng dẫn chi tiết về cách nhúng bài kiểm tra OnlineExamMaker của bạn có thể được tìm thấy trong tài liệu chính thức của họ, hướng dẫn bạn từng bước trong quy trình nhúng. Bạn sẽ tìm thấy các tùy chọn để tùy chỉnh kích thước, chọn giữa hiển thị popup hoặc nội tuyến, và thậm chí gắn nhãn trắng trải nghiệm để nó hoàn toàn tự nhiên với trang web của bạn.

Khi nào bạn nên chọn OnlineExamMaker thay vì Google Forms?

Google Forms hoàn hảo cho các biểu mẫu phản hồi đơn giản và các bài kiểm tra thông thường. Nhưng khi bạn cần các bài thi chứng chỉ, đánh giá nhân viên, hoặc bất kỳ tình huống nào mà bảo mật và báo cáo chi tiết là quan trọng, OnlineExamMaker tỏa sáng.

Hãy nghĩ về sự khác biệt theo cách này: Google Forms giống như một quán cà phê thân thiện trong khu phố—tuyệt vời cho các cuộc gặp gỡ thông thường. OnlineExamMaker là trung tâm hội nghị chuyên nghiệp—được trang bị cho công việc nghiêm túc với tất cả các tiện nghi mà bạn mong đợi.

Các câu hỏi thường gặp và mẹo khắc phục sự cố khi nhúng bài kiểm tra

Tại sao bài kiểm tra của tôi không hiển thị trên trang web?

Đầu tiên, hãy kiểm tra xem trang web của bạn có cho phép iframe không. Một số nền tảng hoặc cài đặt bảo mật chặn hoàn toàn chúng. Nếu đó là trường hợp, bạn có thể chỉ thấy một khoảng trống nơi bài kiểm tra của bạn đáng lẽ phải có. Ngoài ra, hãy đảm bảo bạn đang dán mã trong một khu vực chỉnh sửa HTML, không phải một trình soạn thảo văn bản phong phú có thể loại bỏ mã.

Tôi có thể tùy chỉnh cách bài kiểm tra Google Forms của tôi trông như thế nào khi được nhúng không?

Google Forms cung cấp tùy chỉnh hạn chế trong chính biểu mẫu—bạn có thể thay đổi màu chủ đề và tải lên hình ảnh tiêu đề. Nhưng phiên bản nhúng sẽ luôn duy trì kiểu dáng cơ bản của Google. Để kiểm soát nhiều hơn về giao diện, các nền tảng như OnlineExamMaker cung cấp cho bạn các tùy chọn thương hiệu mở rộng.

Có giới hạn về số lượng người có thể làm bài kiểm tra nhúng của tôi không?

Bản thân Google Forms có thể xử lý tới 5 triệu phản hồi cho mỗi biểu mẫu, nhiều hơn hầu hết mọi người sẽ cần. Hạn chế nhiều khả năng đến từ dung lượng lưu lượng truy cập trang web của bạn hơn là bản thân bài kiểm tra.

Điều gì xảy ra nếu tôi muốn thay đổi bài kiểm tra sau khi đã nhúng nó?

Tin tốt—bạn không cần phải cập nhật mã nhúng. Bất kỳ thay đổi nào bạn thực hiện đối với Google Form gốc sẽ tự động phản ánh trong phiên bản nhúng. Chỉnh sửa biểu mẫu của bạn, và bài kiểm tra nhúng sẽ cập nhật ngay lập tức.

Bài kiểm tra của tôi trông tuyệt vời trên máy tính để bàn nhưng tệ trên thiết bị di động. Giúp tôi?

Điều này thường liên quan đến các giá trị chiều rộng và chiều cao đó. Hãy thử sử dụng width=”100%” để đảm bảo nó co giãn theo kích thước màn hình. Đối với chiều cao, bạn có thể cần sử dụng các truy vấn phương tiện trong CSS của mình để điều chỉnh cho màn hình nhỏ hơn, hoặc chỉ cần đặt một chiều cao cố định hợp lý hoạt động trên các thiết bị khác nhau.