Embed qualtrics survey in empirica

[JamesPHoughton]

We want to use interventions from the Strengthening Democracy Challenge in empirica.

What we need is:

• [x] a way to embed the qualtrics survey in an a react component (probably in an iframe)
• [ ] a way to get the data back from qualtrics using a callback function.

I'm happy to do this in vite app, so you don't have to worry about setting up the empirica experiment, then we'll move to empirica afterwards and write a cypress test.

What it should look like:

• Run on localhost
• Embed qualtrics survey (make your own simple survey)
• Store API keys for qualtrics in an .env file or environment variables so that we can update them separately on the server.
• Supply a callback to the API? Or some other way of getting the data from the survey (preferably as a JSON or similar)
• Display or console.log the data returned from the API in the localhost window.

Resources

Qualtrics API: https://api.qualtrics.com/ Vite docs: https://vitejs.dev/guide/ Upenn's qualtrics page: https://upenn.co1.qualtrics.com/

@mykoal let me know if you have questions or get stuck

[JamesPHoughton]

If there is nothing in the qualtrics api that does what we want, we may be able to embed some JavaScript in the survey to detect if it is in an iframe, and report back the results to the parent window. There may be some cross-origin scripting issues to work around.

https://stackoverflow.com/a/41566923

[JamesPHoughton]

Looks like it would be simple to just know that a user completed the survey, as qualtrics already posts a message to the parent window on survey completion, which looks like QualtricsEOS|<survey_id>|<qualtrics_session_id>

• https://stackoverflow.com/a/73338650/6361632
• https://psiturk.readthedocs.io/en/python2/external_surveys.html#an-example-with-qualtrics

This doesn't get you the data, though. It may be sufficient for now for us to just let qualtrics handle the data, and pass an identifier down to the embedded qualtrics via a URL parameter, and then advance the stage when the survey is complete. We could merge the datasets later, even though that is annoying...

[JamesPHoughton]

Some react + iframe resources:

• https://shipshape.io/blog/dynamic-iframes-in-react/

[JamesPHoughton]

Because the completion message gets passed to the window object, we can only have one qualtrics survey on a page. Also, we may need to clear the message object if we want to do multiple qualtrics surveys in a row...

[JamesPHoughton]

Currently runs a survey from the distribution URL and when the survey is submitted, advances the page. Does not fetch the survey responses.

[JamesPHoughton]

Need to be able to pass url params to qualtrics to specify treatments, and conditions

          - type: qualtrics
            url: https://upenn.co1.qualtrics.com/jfe/form/SV_czNcL28CkElpBcO
            params:
              - Condition: Contact_Project
              - party: rep

Also should define some standard URL params that get passed:

• deliberationId
• some form of progress/stage indicator