Bạn có thể sử dụng JavaScript trong Qualtrics không?

Trong phần này, tôi sẽ đi qua thiết lập cơ bản cho các hướng dẫn này. Tôi cũng sẽ nói về một số tài nguyên mà bạn có thể tham khảo nếu bạn hoàn toàn mới viết mã trong Javascript (hoặc lập trình nói chung)

Mã nguồn. Kiểm traKhảo sát. qsf

Tôi đã làm việc tại Qualtrics được vài năm. Đó là một nền tảng tuyệt vời cho các cuộc khảo sát, biểu mẫu, bảng câu hỏi, v.v. Nhưng việc sử dụng nó cũng có thể được mở rộng gần như vô hạn bởi JavaScript. Nó không phải lúc nào cũng là nền tảng ổn định nhất để phát triển JavaScript, nhưng với quá trình chuyển đổi gần đây sang Công cụ biểu mẫu JavaScript (JFE) để hỗ trợ các cuộc khảo sát, giờ đây mọi thứ hoạt động tốt hơn bao giờ hết. Trong bài đăng này, tôi muốn làm nổi bật một số phương pháp hay nhất cũng như một số mẹo và thủ thuật mà những người hiện đang thêm JavaScript vào Khảo sát qualtrics có thể biết hoặc không

JFE vs SurveyEngine

Mặc dù điều này ngày càng trở thành một vấn đề cũ, nhưng điều quan trọng cần nhớ là Qualtrics sử dụng hai công cụ khác nhau để hỗ trợ các cuộc khảo sát của họ.

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

5 là nền tảng kế thừa phần lớn không được dùng nữa vào thời điểm này để thay thế cho

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

6. JFE, như nó được gọi, là Ứng dụng một trang, giảm đáng kể thời gian tải trang giữa các trang nhưng tải với chi phí đầu vào ban đầu lớn hơn. Điều này rất quan trọng vì bạn cần ghi nhớ khi viết WAS rằng ________ 00 và

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

1 không thay đổi từ trang này sang trang khác khi khảo sát đang chạy trên JFE

Bạn có thể biết liệu một khảo sát có được tải hay không bằng cách sử dụng công cụ tiêu chuẩn mới bằng cách xem URL. Nó sẽ có một

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

2 hoặc

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

3 ở trung tâm

Thực hành tốt nhất cho kết quả tuyệt vời

Qualtrics là một nền tảng thực sự vững chắc để phát triển JavaScript và nó có thể mở rộng đáng kể chức năng đã có trong nền tảng. Những thực tiễn tốt nhất sau đây là những gì tôi đã tìm thấy để giữ cho mọi thứ hoạt động trơn tru

Giữ mã nơi nó thuộc về

Một nơi dành cho mọi thứ và mọi thứ ở vị trí của nó. Điều này khá đơn giản, nhưng JavaScript bị loại bỏ khỏi chế độ xem câu hỏi HTML, vì vậy hãy giữ nó trong trình chỉnh sửa JS cho câu hỏi thay thế. CSS có thể được bọc trong các thẻ

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

4 nhưng bạn chắc chắn sẽ mất nó. Thay vào đó, hãy giữ nó trong phần CSS tùy chỉnh của giao diện

Tận dụng API Qualtrics JS

Qualtrics JavaScript API khá mạnh mẽ và cung cấp cho bạn quyền truy cập vào tất cả các loại chức năng, sự kiện, trình nghe, v.v. giúp tích hợp với nền tảng dễ dàng hơn. Mặc dù có một số lỗ hổng lớn, chức năng hiện có khá hữu ích

Một trong những phương pháp hữu ích nhất là

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

5vì nó cho phép bạn lấy giá trị của các tùy chọn đã chọn. Bạn có thể thấy việc sử dụng nó ở đây trong một loại câu hỏi mà tôi đã tạo cho một cuộc khảo sát nội bộ

Nếu bạn quan tâm đến việc sử dụng câu hỏi này, hãy thêm

đến cuối văn bản câu hỏi của bạn khi ở chế độ HTML. Sau đó, thêm phần này vào CSS tùy chỉnh của bạn trong Giao diện > Nâng cao > CSS tùy chỉnh

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

Sử dụng jQuery khi có thể

jQuery là một thư viện phổ biến được sử dụng để phát triển JavaScript. Nó xử lý lỗi rất tốt, tương thích trên hàng trăm phiên bản trình duyệt và làm cho nhiều thứ trở nên rất dễ dàng đối với các nhà phát triển giao diện người dùng. Thật may mắn cho bạn, jQuery cũng được đưa vào Qualtrics miễn phí, nhưng có thể không như bạn mong đợi. Trong khi các tham chiếu jQuery điển hình sử dụng một

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

6, Qualtrics đã dành riêng khóa đó cho những thứ khác và thay vào đó sử dụng

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

7 làm bộ chọn. Còn hơn là

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

0

Thay vào đó bạn sẽ viết

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

1

Nó không quá khác biệt, về cơ bản chỉ là Tìm và Thay thế trên

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

6 cho

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

7

Tạo các chức năng toàn cầu trong tiêu đề

Chỉ có thể truy cập các hàm JavaScript bạn đặt trong các khối Câu hỏi JS từ phạm vi đó. Nếu bạn muốn khai báo các hàm, đối tượng, biến toàn cục, v.v. bạn nên sử dụng phần Tiêu đề tùy chỉnh của Giao diện. Chỉ cần bọc mã của bạn trong thẻ

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

00 và thế là xong

Sẽ tốt hơn nếu giữ các chức năng của bạn trong một số loại Đối tượng khi theo đuổi lộ trình này. Một cái gì đó như thế này sẽ làm các trick

Truyền biến qua Chuỗi truy vấn

Khi phát triển bằng JavaScript, đừng quên tất cả các tài nguyên tuyệt vời mà nó cung cấp cho bạn. Thay vì phát triển độc lập với chúng, hãy sử dụng chúng để tạo lợi thế cho bạn. Một cách là tận dụng bộ lưu trữ

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

01 mà Qualtrics sử dụng theo mặc định. Khi chạy trên JFE, các chức năng sau đây cho phép bạn làm việc với nó một cách dễ dàng

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

6

Hãy nhớ khai báo tên biến dữ liệu nhúng của bạn trong Luồng khảo sát nếu bạn muốn truy cập chúng bằng văn bản dẫn xuất hoặc trong kết quả khảo sát của mình. Bạn cũng có thể chuyển các biến vào một cuộc khảo sát bằng cách sử dụng chuỗi truy vấn và dữ liệu được nhúng. Ví dụ: chúng tôi sử dụng khảo sát làm hệ thống bán vé nội bộ. Chúng tôi tải khảo sát trong iFrame trên các trang web nội bộ của mình và chuyển id, tên và siêu dữ liệu khác của nhân viên qua chuỗi truy vấn. Sau đó, chúng tôi có thể sử dụng nó trong cuộc khảo sát hoặc chuyển nó vào phiếu cuối cùng sau khi hoàn thành khảo sát

Đang tải trong thư viện dưới dạng tệp

Bạn muốn sử dụng thư viện JavaScript từ người khác? . js và thêm nó vào Thư viện tệp trong tài khoản Qualtrics của bạn. Bây giờ hãy lấy URL đó và thêm nó dưới dạng

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

02 vào tiêu đề của bạn (Giao diện > Nâng cao > Tiêu đề). Nó hiện có trên trang để bạn sử dụng.

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

03 là một tài nguyên ví dụ dễ tải vào để thay đổi hộp nhập văn bản thành bộ chọn màu

yêu cầu AJAX

Mặc dù các yêu cầu AJAX có thể được chạy trực tiếp từ JavaScript, nhưng đừng quên tận dụng phần tử

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

04 mới được cải tiến trong Luồng khảo sát. Nó hiện cho phép các yêu cầu

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

05,

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

06,

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

07,

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

08 và

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

09, thậm chí hỗ trợ các phần tử JSON lồng nhau

Ví dụ chung

Tôi nghĩ rằng tôi sẽ đưa ra một vài ví dụ về những điều tôi đã làm gần đây thực sự hữu ích khi phát triển trong Qualtrics

Tích hợp sọc

Ngày càng có nhiều người muốn sử dụng Qualtrics như một giải pháp thanh toán. API Stripe giúp dễ dàng tích hợp phương thức thanh toán vào trang của bạn và giải pháp này ghi lại mã thông báo thanh toán vào Qualtrics để bạn có thể đảm bảo mình được thanh toán trước khi gửi khảo sát

Điều này giúp lưu hai trường dữ liệu được nhúng,

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

10 và

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

11 mà bạn có thể sử dụng để buộc họ thanh toán bằng logic nhánh trong quy trình khảo sát. Về cơ bản, hãy đặt JS này vào JS Câu hỏi của một câu hỏi duy nhất trong một khối, sau đó buộc họ phải liên tục xem khối đó cho đến khi

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

10 không còn trống

Tại thời điểm này, bạn đã sẵn sàng tính phí người dùng. Chìa khóa ở đây là lấy mã thông báo đã lưu đó và gửi nó tới Stripe dưới dạng yêu cầu POST. Điều này may mắn có thể được thực hiện thông qua Phần tử dịch vụ web Qualtrics trong Luồng khảo sát. Điều này thật may mắn vì nó chứa khóa bí mật của bạn mà bạn không muốn tiết lộ công khai. Phần tử Dịch vụ web chạy phía máy chủ để mọi người không thể Kiểm tra phần tử và đánh cắp mã thông báo của bạn. Đây là một ví dụ về những gì nó sẽ trông giống như

Tôi khuyên rằng, sau khi nhận được Mã thông báo kiểm tra từ bước đầu tiên, bạn hãy đến màn hình này và chạy yêu cầu theo cách thủ công bằng chức năng URL kiểm tra. Stripe trả về rất nhiều dữ liệu về giao dịch mà bạn nên lưu trữ dưới dạng Dữ liệu nhúng. Khi bạn đã sẵn sàng, đừng quên thay đổi mã xác thực cho khóa Trực tiếp của bạn thay vì khóa Kiểm tra

Và sau đó bùng nổ. Bạn đã sẵn sàng để đi. Không phải là một cú nhấp chuột, nhưng trên thực tế, việc thêm Stripe vào khảo sát Qualtrics khá dễ dàng

Chuyển đổi biểu định kiểu

Đôi khi bạn muốn CSS chỉ xuất hiện trên một trang. Mặc dù bạn có thể làm điều này bằng cách thêm nó vào các thẻ

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

4 lồng nhau trên trang đó, nhưng tôi muốn có một cách lập trình để làm điều đó

Đầu tiên, tôi đã thêm CSS đã nhận xét vào tiêu đề trong thẻ kiểu có ID

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

9

Sau đó, tôi bỏ chức năng sau trong tiêu đề

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

0

Như bạn có thể thấy, nó chỉ thêm/xóa

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

14 đóng từ bình luận đầu tiên, bình luận ngẫu nhiên hoặc bỏ ghi chú toàn bộ khối

CSS được tải chậm

Bạn luôn có thể thêm tài nguyên vào tiêu đề, nhưng đôi khi bạn không cần chúng cho đến một trang nhất định. Trong trường hợp của tôi, tôi muốn có thể thêm Phông chữ Google theo ý muốn vào một trang. Bộ chức năng sau đây đã giúp việc này trở nên dễ dàng

Thay đổi hình nền

Điều này khá đơn giản nhưng hữu ích cho những lúc bạn chỉ muốn hình nền thỉnh thoảng hiển thị hoặc thay đổi giữa khảo sát

Tất nhiên, điều này được thực hiện dễ dàng hơn thông qua CSS nếu bạn không cần sửa đổi khảo sát giữa chừng này

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

2Nhược điểm

Mặc dù phát triển bằng JavaScript nhìn chung là tuyệt vời, nhưng vẫn có một vài nhược điểm

Thiếu đánh dấu mã và kiểm soát phiên bản

Tiêu đề có thể lưu trữ lượng thông tin gần như vô hạn, nhưng không có đánh dấu mã, nó không lưu các tab/khoảng cách của bạn và tất nhiên, không có kiểm soát phiên bản thực

Ngoài ra, trình soạn thảo JS không là gì so với IDE hoặc trình soạn thảo văn bản, vì vậy tôi thường thực hiện tất cả các chỉnh sửa của mình trong Sublime Text 3 và sau đó thả các thay đổi vào Qualtrics khi tôi hoàn thành chúng

Cập nhật chậm

Cập nhật cho các liên kết trực tiếp có thể chậm. Liên kết Xem trước thường được cập nhật gần như trực tiếp, nhưng liên kết Ẩn danh có thể mất tới 5 hoặc 6 phút để hiển thị các thay đổi. Để giúp tôi, tôi thường tạo một

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

15 đăng xuất số phiên bản. Sau đó, tôi tăng phiên bản đó mỗi khi tôi thực hiện các thay đổi. Không lý tưởng, nhưng ít nhất tôi biết mình đang kiểm tra đúng mã

Tính năng không tương thích

Thật không may, có một số tính năng không hoạt động tốt với JavaScript. Cái chính chắc chắn là chuyển trang. Vấn đề là Qualtrics đang sao chép DOM trong khi quá trình chuyển đổi đang diễn ra, vì vậy bạn không bao giờ biết mình đang chọn DOM nào. Đề nghị của tôi?

Phần kết luận

Có rất nhiều điều thú vị khi viết mã trong Qualtrics. Cuối cùng, tôi đã thêm JS tùy chỉnh vào hầu hết mọi cuộc khảo sát mà tôi viết để nâng cao trải nghiệm. Đó là một nền tảng ổn định, đáng tin cậy và cho phép mọi chức năng ngoại trừ

.carrot {
 display:inline-block;
 width: 30px;
 height:30px;
 background-image: url('https://survey.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_e8m8EBRgg9W3pEp');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 float:right;
 transform: rotate(90deg);
 transition: transform .5s;
}
.carrot-closed {
 transform: rotate(0deg);
}.selected-choice-text {
 margin-left: 5em;
 color: #aaa;
 font-style:italic;
}

16. Mặc dù nó có một vài nhược điểm, nhưng các phương pháp hay nhất ở đây cũng sẽ giúp bạn tận dụng tối đa chương trình JavaScript Qualtrics của mình

Nếu bạn đã sẵn sàng tiếp tục — hãy xem hướng dẫn này để khắc phục Chủ đề hiện đại trong Qualtrics. Hướng dẫn từng bước được thiết kế để giúp bạn suy nghĩ thấu đáo về logic trước khi thực hiện các thay đổi, nhưng tất nhiên, cũng có một lượng mã khá lớn

Bạn có thể viết mã trong Qualtrics không?

Tại sao tôi không thể thêm JavaScript vào Qualtrics?

Làm cách nào để thêm JavaScript vào tiêu đề trong Qualtrics?

Qualtrics sử dụng ngôn ngữ lập trình nào?