Skip to content

Commit f6933ad

Browse files
lucybutlerlucybutler
committed
Corrected, completeupdate for qualtrics integration
1 parent ba88dc0 commit f6933ad

1 file changed

Lines changed: 150 additions & 4 deletions

File tree

‎docs/QualtricsIntegration.md‎

Lines changed: 150 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,16 @@ showPath: true
44
underDocsPath: true
55
showBackToTop: false
66
---
7-
87
# Qualtrics Integration
8+
99
{:#intro .no_toc}
1010

11+
<p class="update">
12+
<span span style="font-weight: bold">Updated Qualtrics Integration Capacity</span><br>
13+
<span>Below we present an option for more streamline Qualtrics integration. This has been updated since the publication of <a href="https://doi.org/10.3758/s13428-023-02153-x">
14+
The (Mis)information Game paper</a>.</span>
15+
</p>
16+
1117
<p class="error">
1218
<span style="font-weight: bold">This page is incomplete.</span>
1319
This guide only shows one method to include The Misinformation Game
@@ -21,12 +27,152 @@ users to your Misinformation Game site, then you can directly input
2127
information such as the user's ID through The Misinformation
2228
Game URL. This allows users to not have to enter their ID manually.
2329

30+
## Embedding iframe in Qualtrics (updated)
31+
32+
{:#embedding-iframe-in-qualtrics}
33+
34+
<p class="error">
35+
<span style="font-weight: bold">Important note.</span>
36+
Due to browser settings, iframe integrations may <b>fail</b> if a participant is using Safari. Because of this, we recommend preventing people on Safari from completing your survey if using an iframe integration option.
37+
</p>
38+
39+
We have now updated the debrief page within the misinfo game (v2.3.2) to allow for basic communication with a parent page (e.g., Qualtrics survey) when the tool is embedded as an iframe. This allows the game to 'tell' Qualtrics that the participant has reached the debrief page of the misinfo game study that you have embedded, which you can then use to trigger the next button. This integration is based on a paper by Benjamin Carter & Alessandro Del Ponte which can be found [here](https://doi.org/10.3758/s13428-022-01792-w), and we strongly recommend that you cite their paper (along with our paper) if you use this integration method.
40+
41+
Before you insert the misinfo game, you will need to ensure that the formatting in your qualtrics survey is appropriate. To do so, navigate to the look and feel tab of your Qualtrics survey.
42+
43+
* First, navigate to the "Theme" tab and select the "blank" theme - this will avoid any headers used in your university's Qualtrics theme overlaying the iframe.
44+
* Then, navigate to the "Style" tab, navigate to "Custom CSS", and select "edit". Enter the following and then hit save:
45+
46+
```
47+
.resp-container {
48+
position: relative;
49+
overflow: hidden;
50+
padding-top: 50%;
51+
}
52+
.resp-iframe {
53+
position: absolute;
54+
top: 0;
55+
left: 0;
56+
width: 100%;
57+
height: 100%;
58+
border: 0;
59+
}
60+
61+
#SkinContent{width:100%;}
62+
.Skin .SkinInner {width:100% !important;}
63+
.Skin .QuestionOuter.Matrix{width:100% !important;}
64+
65+
body .Skin #Plug a {
66+
display: none !important;
67+
height: 0 !important;
68+
padding: 0 !important;
69+
overflow: hidden !important;
70+
}
71+
```
72+
* This should force the iframe to take up the full screen, and will remove the Qualtrics popup which may impede participants' ability to interact with the iframe.
73+
74+
Now that you have set the appropriate formating, return to the builder tab to begin setting up the iframe.
75+
76+
* In the qualtrics block that you wish to embed the iframe create a text/graphic question. You should remove any default text so that the textbox is empty.
77+
* Click on the question that you have just created, and in the lefthand side panel titled "Edit question" select JavaScript (see [Figure 1](#fig1)). This should open to look like the JavaScript editor shown in [Figure 2](#fig2).
2478

79+
<figure id="fig1">
80+
<img src="screenshots/javascript-qualtrics-button1.png" alt="figure 1" height="372" />
81+
<figcaption>
82+
<a href="#fig1">Figure 1.</a> Qualtrics Edit Question panel with JavaScript button highlighted.
83+
</figcaption>
84+
</figure>
85+
86+
<figure id="fig2">
87+
<img src="screenshots/qualtrics-javascript-box.png" alt="figure 2" height="372" />
88+
<figcaption>
89+
<a href="#fig2">Figure 2.</a> Qualtrics JavaSript Editor
90+
</figcaption>
91+
</figure>
92+
93+
* You should now replace the text in the Javascript editor with the following. Note you will have to change the src to match the corresponding URL. If you wish to pipe the participant ID, you will need to add ?id=<user_id_inputted> to the end of the URL, which we recommend to set using embedded data (more information can be found in our paper):
94+
95+
```
96+
Qualtrics.SurveyEngine.addOnload(function() {
97+
// Insert the game iframe
98+
jQuery("#Header").html('<iframe allowfullscreen src="https://<your_domain>.web.app/study/<your_study_id>" class="resp-iframe"></iframe>');
99+
100+
// Adjust page layout
101+
jQuery("#SkinContent").css("width", "0px");
102+
console.log("Listening for game completion message...");
103+
104+
// Get the Next button
105+
var nextButton = document.getElementById("NextButton");
106+
if (nextButton) {
107+
nextButton.style.opacity = "0"; // Make it fully transparent
108+
nextButton.style.pointerEvents = "none"; // Disable interaction
109+
nextButton.style.position = "absolute"; // Prevent it from affecting layout
110+
nextButton.style.visibility = "hidden"; // Ensures it doesn't take up space
111+
}
112+
113+
// Listen for postMessage events
114+
window.addEventListener("message", function(event) {
115+
console.log("Received message from iframe:", event);
116+
117+
// Check for game completion message
118+
if (event.data && event.data.type === "gamecomplete") {
119+
console.log("Game complete message received. Showing Next button immediately.");
120+
121+
// Show and enable the Next button immediately
122+
if (nextButton) {
123+
nextButton.style.opacity = "1"; // Make it fully visible
124+
nextButton.style.pointerEvents = "auto"; // Enable interaction
125+
nextButton.style.position = "fixed"; // Position it properly
126+
nextButton.style.bottom = "20px";
127+
nextButton.style.right = "40px";
128+
nextButton.style.visibility = "visible"; // Ensure it's now visible
129+
console.log("Next button is now visible and enabled.");
130+
}
131+
}
132+
}, false);
133+
});
134+
```
135+
* This forces the Qualtrics next question button to appear when the participant has reached the debriefing page in the misinfo game. This is done by the game sending the "gamecomplete" message to the parent frame.
136+
* You may wish to delay the next button appearing for a set amount of time before the participant continues (e.g., to increase the chance of them reading the information presented). To do so, you will need to edit everything from the "Check for game completion message" to. You will need to change `<insert timing in milliseconds>` to the amount of time you want to delay the next button appearing for (e.g., if you want to add a 3 second delay add 3000 here):
137+
138+
```
139+
// Check for game completion message
140+
if (event.data && event.data.type === "gamecomplete") {
141+
console.log("Game complete message received. Delaying Next button appearance by X seconds.");
142+
143+
// Hide and disable the Next button completely
144+
if (nextButton) {
145+
nextButton.style.opacity = "0";
146+
nextButton.style.pointerEvents = "none";
147+
nextButton.style.position = "absolute";
148+
nextButton.style.visibility = "hidden";
149+
}
150+
151+
// After X amount of time, show and enable the Next button
152+
setTimeout(function() {
153+
if (nextButton) {
154+
nextButton.style.opacity = "1"; // Make it fully visible
155+
nextButton.style.pointerEvents = "auto"; // Enable interaction
156+
nextButton.style.position = "fixed"; // Position it properly
157+
nextButton.style.bottom = "20px";
158+
nextButton.style.right = "40px";
159+
nextButton.style.visibility = "visible"; // Ensure it's now visible
160+
console.log("Next button is now visible and enabled.");
161+
}
162+
}, <insert timing in milliseconds>);
163+
}
164+
}, false);
165+
});
166+
```
167+
168+
## Inserting a link to redirect to misinfo game
169+
170+
### Setting up the survey
25171

26-
## 1. Setting up the survey
27172
{:#setting-up-survey}
28173

29174
In Qualtrics you will need to set up the survey as follows:
175+
30176
- First, create a question which asks for the user's ID
31177
- Second, create a page break
32178
- Thirdly, create a question which is used to display the URL
@@ -44,8 +190,8 @@ which is not "Question Text."
44190
(The name of the item will change depending on your own survey.)
45191

46192
The final text in the question will be in the following format:
47-
<b><your_domain>.web.app/study/<your_study_id>?id=<user_id_inputted></b>
193+
`<b>`<your_domain>.web.app/study/<your_study_id>?id=<user_id_inputted>`</b>`
48194

49195
After this your survey will contain the following questions in the
50196
following format:
51-
<img src="screenshots/Qualtrics-Example.png" alt="Example Qualtrics Survey" height="258" />
197+
`<img src="screenshots/Qualtrics-Example.png" alt="Example Qualtrics Survey" height="258" />`

0 commit comments

Comments
 (0)