Cột appearance trong rtSurvey cho phép bạn tùy chỉnh cách trình bày trực quan và hành vi của các câu hỏi trong khảo sát. Tính năng này nâng cao trải nghiệm người dùng và có thể cải thiện đáng kể hiệu quả thu thập dữ liệu. rtSurvey hỗ trợ các thuộc tính appearance tiêu chuẩn của XLSForm và mở rộng chúng với các tùy chọn bổ sung.

Các thuộc tính Appearance tiêu chuẩn của XLSForm

rtSurvey hỗ trợ các thuộc tính appearance tiêu chuẩn sau của XLSForm:

Thuộc tính AppearanceLoại câu hỏiMô tả
multilinetextTạo hộp văn bản nhiều dòng (tốt nhất cho web)
minimalselect_one, select_multipleHiển thị các lựa chọn trong menu thả xuống
quickselect_oneTự động chuyển sang câu hỏi tiếp theo sau khi chọn (chỉ mobile)
no-calendardateKhông hiển thị lịch (chỉ mobile)
month-yeardateChỉ cho phép chọn tháng và năm
yeardateChỉ cho phép chọn năm
horizontal-compactselect_one, select_multipleHiển thị lựa chọn theo chiều ngang (chỉ web)
horizontalselect_one, select_multipleHiển thị lựa chọn theo chiều ngang trong các cột (chỉ web)
likertselect_oneTrình bày lựa chọn dưới dạng thang đo Likert
compactselect_one, select_multipleHiển thị lựa chọn cạnh nhau với khoảng cách tối thiểu
quickcompactselect_oneKết hợp hiển thị thu gọn với tự động chuyển câu hỏi (chỉ mobile)
field-listgroupsHiển thị toàn bộ nhóm trên một màn hình (chỉ mobile)
labelselect_one, select_multipleHiển thị nhãn lựa chọn mà không có nút chọn
list-nolabelselect_one, select_multipleHiển thị nút chọn mà không có nhãn (dùng với label)
table-listgroupsHiển thị câu hỏi theo định dạng bảng
signatureimageBật chụp chữ ký (chỉ mobile)
drawimageCho phép vẽ tay (chỉ mobile)
map, quick mapselect_one, select_one_from_fileBật chọn từ các đặc điểm trên bản đồ

Thực hành tốt khi sử dụng Appearance

  1. Nhất quán: Sử dụng các thuộc tính appearance nhất quán trong toàn bộ khảo sát để có giao diện đồng bộ.
  2. Mobile và Web: Xem xét cách appearance hiển thị trên các thiết bị và nền tảng khác nhau.
  3. Hiệu suất: Thận trọng với các appearance có thể làm chậm tải biểu mẫu (ví dụ: table-list cho các nhóm lớn).
  4. Trải nghiệm người dùng: Chọn appearance giúp nhập liệu dễ dàng và trực quan hơn cho người trả lời.
  5. Kiểm thử: Luôn kiểm tra biểu mẫu trên thiết bị đích để đảm bảo appearance hoạt động đúng mong đợi.

Kỹ thuật nâng cao

Kết hợp Appearance

Một số thuộc tính appearance có thể kết hợp để tạo bố cục phức tạp hơn:

  | type | name | label | appearance |
|------|------|-------|------------|
| select_one options | choice | Chọn một: | minimal compact |

Appearance động

rtSurvey cho phép thay đổi appearance động dựa trên logic biểu mẫu:

  | type | name | label | appearance | relevant |
|------|------|-------|------------|----------|
| text | time | Nhập thời gian: | inline-[%H:%M] | ${show_time} = 'yes' |

Lưu ý cho Ứng dụng di động

  • Một số appearance (ví dụ: quick, signature) chỉ dành riêng cho thiết bị di động.
  • Kiểm tra kỹ trên cả Android và iOS để đảm bảo hành vi nhất quán.

Các thuộc tính Appearance mở rộng của rtSurvey

Ngoài các appearance XLSForm tiêu chuẩn, rtSurvey hỗ trợ các tùy chọn riêng cho nền tảng sau:

Kiểm soát hiển thị và dữ liệu

Thuộc tính AppearanceLoại câu hỏiMô tả
invisiblebất kỳẨn trường khỏi hiển thị trong khi vẫn thu thập hoặc tính toán giá trị. Khác với loại hidden — trường vẫn tham gia vào logic.
displaytitlebất kỳBuộc hiển thị nhãn/tiêu đề của trường ngay cả khi nó thường bị ẩn.
autopullselect_one, select_multipleTự động lấy dữ liệu bên ngoài để điền lựa chọn khi biểu mẫu tải hoặc trường kích hoạt thay đổi.
floating_hinttext, integer, decimalHiển thị gợi ý dưới dạng nhãn nổi phía trên trường nhập thay vì phía dưới.
calculate-buttoncalculateThêm nút hiển thị kích hoạt tính lại trường theo yêu cầu, thay vì tính tự động.

Bố cục

Thuộc tính AppearanceLoại câu hỏiMô tả
1screengroupBuộc hiển thị toàn bộ nhóm trên một màn hình bất kể kích thước nhóm.
columns(n)select_one, select_multipleHiển thị lựa chọn theo n cột. Ví dụ: columns(3) hiển thị ba cột nút radio.
gridformat<row=R col=C colspan=S align=center>bất kỳĐịnh vị trường trong bố cục CSS grid tại hàng R, cột C, kéo dài S cột. Dùng với advanced-extension/grid-layout.
ignore-simplifybất kỳHướng dẫn renderer biểu mẫu bỏ qua đơn giản hóa hoặc thu gọn tự động bố cục trường này.

Widget

Thuộc tính AppearanceLoại câu hỏiMô tả
likertselect_oneTrình bày lựa chọn dưới dạng hàng thang Likert (đã có trong bảng tiêu chuẩn ở trên; được xác nhận hỗ trợ).
distressselect_oneHiển thị lựa chọn dưới dạng widget trực quan Thang đo tâm lý Kessler (K10) với biểu tượng cảm xúc.

Tích hợp API

Thuộc tính AppearanceLoại câu hỏiMô tả
callapitext, integer, decimal, select_oneBật tích hợp gọi API cho trường này. Cột calculation phải chứa biểu thức callapi(). Xem Call API.
callapi-verify(params)text, integer, decimalKích hoạt cuộc gọi API xác minh với tham số tĩnh. Biểu mẫu chặn tiến độ cho đến khi API xác nhận giá trị.
callapi-verify(dynamicParams)text, integer, decimalGiống callapi-verify nhưng với tham số lấy từ giá trị trường khác trong thời gian thực.

Định dạng ngày/giờ inline

Với các trường date, time, và datetime, bạn có thể chỉ định định dạng hiển thị tùy chỉnh bằng chuỗi định dạng gắn vào appearance:

  inline-[%d/%m/%Y]
inline-1line-[%d/%m/%Y %H:%M]

Các mã định dạng giống với format-date() và format-date-time(). Xem Hàm — Hàm ngày giờ.

Ví dụ:

typenamelabelappearance
datetimeevent_timeNgày và giờ sự kiệninline-[%d/%m/%Y %I:%M %p]
datebirth_dateNgày sinhinline-[%d/%m/%Y]

Hạn chế đã biết

  • Các appearance phức tạp có thể không hiển thị giống hệt nhau trên tất cả các nền tảng.
  • Một số appearance nâng cao của rtSurvey có thể không được hỗ trợ ở chế độ ngoại tuyến.

Khắc phục sự cố Appearance

  1. Appearance không được áp dụng: Kiểm tra lỗi đánh máy trong cột appearance.
  2. Hiển thị không nhất quán: Xác minh tính tương thích với loại câu hỏi và nền tảng.
  3. Vấn đề hiệu suất: Cân nhắc đơn giản hóa các appearance phức tạp, đặc biệt với khảo sát lớn.
Trang này có hữu ích không?