Skip to content

Commit aa7176f

Browse files
isaactpetersenisaactpetersen
committed
20250429 - Qualtrics
1 parent d915273 commit aa7176f

File tree

2 files changed

+182
-0
lines changed

2 files changed

+182
-0
lines changed

‎_site.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ navbar:
5656
href: opportunities.html
5757
- text: REDCap
5858
href: redcap-manual.html
59+
- text: Qualtrics
60+
href: qualtrics-manual.html
5961
- text: Remote Participation
6062
href: documentation-remote.html
6163
- text: Social Media

‎qualtrics-manual.Rmd

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
---
2+
title: "Qualtrics Manual"
3+
---
4+
5+
```{r setup, include = FALSE}
6+
knitr::opts_chunk$set(
7+
echo = TRUE,
8+
error = TRUE,
9+
comment = "")
10+
```
11+
12+
# Using JavaScript {#javascript}
13+
14+
The base structure of JavaScript syntax in Qualtrics is as follows:
15+
16+
```javascript
17+
Qualtrics.SurveyEngine.addOnload(function()
18+
{
19+
/*Place your JavaScript here to run when the page loads*/
20+
21+
});
22+
23+
Qualtrics.SurveyEngine.addOnReady(function()
24+
{
25+
/*Place your JavaScript here to run when the page is fully displayed*/
26+
27+
});
28+
29+
Qualtrics.SurveyEngine.addOnUnload(function()
30+
{
31+
/*Place your JavaScript here to run when the page is unloaded*/
32+
33+
});
34+
```
35+
36+
## Absolute Frequency Items {#absoluteFrequency}
37+
38+
Absolute frequency items have three columns:
39+
40+
1. "amount", i.e., number of times per interval
41+
1. "timeframe", i.e., per day/week, in the past month, in the past year
42+
1. "not in the past year"
43+
44+
where respondents are expected to fill in the first two columns and check the third column if they have not experienced the event in the past year.
45+
That is, the respondent should fill in EITHER the first two columns OR check the third column.
46+
The JavaScript code below is used to ensure that if the third column is checked, the first two columns are hidden and cleared.
47+
It also ensures that at least one of the first two columns is filled in or that the third column is checked before allowing the survey next button to be clicked to advance the survey to the next page.
48+
49+
```javascript
50+
Qualtrics.SurveyEngine.addOnReady(function () {
51+
console.log("✅ JS is running!");
52+
53+
var matrix = this.getQuestionContainer();
54+
var rows = matrix.querySelectorAll("tr.Choice");
55+
56+
// Widen the header (leftmost) column
57+
var headerCell = matrix.querySelector("th");
58+
if (headerCell) {
59+
headerCell.style.width = "300px";
60+
}
61+
62+
for (var r = 0; r < rows.length; r++) {
63+
(function (row, rowIndex) {
64+
var cells = row.querySelectorAll("td");
65+
if (cells.length < 9) return;
66+
67+
var textCell = cells[2]; // SBS1: text input
68+
var dropdownCell = cells[5]; // SBS2: dropdown
69+
var checkboxCell = cells[8]; // SBS3: checkbox
70+
var checkbox = checkboxCell.querySelector('input[type="checkbox"]');
71+
var inputField = textCell.querySelector('input[type="text"]');
72+
var dropdownField = dropdownCell.querySelector('select');
73+
74+
// Widen the leftmost item label column (first td)
75+
var labelCell = row.querySelector("td:first-child");
76+
if (labelCell) {
77+
labelCell.style.width = "300px";
78+
}
79+
80+
// Set column widths
81+
textCell.style.width = "100px"; // Smaller input box
82+
dropdownCell.style.width = "160px"; // Wider dropdown
83+
checkboxCell.style.width = "120px"; // Checkbox column wider
84+
checkboxCell.style.textAlign = "center";
85+
86+
// Prevent input cells from adding extra borders
87+
textCell.style.borderRight = "none";
88+
dropdownCell.style.borderRight = "none";
89+
90+
// Format separators
91+
for (var i = 0; i < cells.length; i++) {
92+
if (cells[i].className.indexOf("Separator1") !== -1 || cells[i].className.indexOf("Separator2") !== -1) {
93+
cells[i].style.display = "";
94+
cells[i].style.minWidth = "1px";
95+
cells[i].style.width = "1px";
96+
cells[i].style.borderRight = "1px solid #ccc";
97+
cells[i].style.borderLeft = "none";
98+
if (cells[i].innerHTML.trim() === "") {
99+
cells[i].innerHTML = "&nbsp;";
100+
}
101+
}
102+
}
103+
104+
if (checkbox && checkbox.checked) {
105+
textCell.style.visibility = "hidden";
106+
dropdownCell.style.visibility = "hidden";
107+
textCell.style.border = "none";
108+
dropdownCell.style.border = "none";
109+
if (inputField) inputField.value = "";
110+
if (dropdownField) dropdownField.selectedIndex = 0;
111+
}
112+
113+
if (checkbox) {
114+
checkbox.addEventListener("change", function () {
115+
var hide = checkbox.checked;
116+
117+
textCell.style.visibility = hide ? "hidden" : "visible";
118+
dropdownCell.style.visibility = hide ? "hidden" : "visible";
119+
textCell.style.border = hide ? "none" : "";
120+
dropdownCell.style.border = hide ? "none" : "";
121+
122+
if (hide) {
123+
if (inputField) inputField.value = "";
124+
if (dropdownField) dropdownField.selectedIndex = 0;
125+
}
126+
127+
for (var i = 0; i < cells.length; i++) {
128+
if (cells[i].className.indexOf("Separator1") !== -1 || cells[i].className.indexOf("Separator2") !== -1) {
129+
cells[i].style.display = "";
130+
cells[i].style.minWidth = "1px";
131+
cells[i].style.width = "1px";
132+
cells[i].style.borderRight = "1px solid #ccc";
133+
cells[i].style.borderLeft = "none";
134+
if (cells[i].innerHTML.trim() === "") {
135+
cells[i].innerHTML = "&nbsp;";
136+
}
137+
}
138+
}
139+
});
140+
}
141+
})(rows[r], r);
142+
}
143+
144+
this.disableNextButton();
145+
var that = this;
146+
147+
function validateRows() {
148+
var allValid = true;
149+
150+
for (var r = 0; r < rows.length; r++) {
151+
var cells = rows[r].querySelectorAll("td");
152+
if (cells.length < 9) continue;
153+
154+
var textInput = cells[2].querySelector('input[type="text"]');
155+
var dropdown = cells[5].querySelector('select');
156+
var checkbox = cells[8].querySelector('input[type="checkbox"]');
157+
158+
var inputHasValue = textInput && textInput.value.trim() !== "";
159+
var dropdownHasValue = dropdown && dropdown.value.trim() !== "";
160+
var checkboxChecked = checkbox && checkbox.checked;
161+
162+
var rowIsValid = (inputHasValue && dropdownHasValue) || checkboxChecked;
163+
164+
if (!rowIsValid) {
165+
allValid = false;
166+
}
167+
}
168+
169+
if (allValid) {
170+
that.enableNextButton();
171+
} else {
172+
that.disableNextButton();
173+
}
174+
}
175+
176+
validateRows();
177+
matrix.addEventListener("input", validateRows);
178+
matrix.addEventListener("change", validateRows);
179+
});
180+
```

0 commit comments

Comments
 (0)