Embedding a survey into a flask/js web application and getting responseids on completion | XM Community
Skip to main content
This is one of my first times working with REST apis and before I go down this rabbithole I could really use some help.



I built an online experiment using JsPsych for frontend and Flask as a micro backend framework. I managed to get this experiment online deployed through Heroku.



I created a qualtrics survey, let's just call it "Decision task survey", that includes some important demographic and personality batteries/questionnaires related to my experiment.



So ideally, I'd want to embed the qualtrics survey onto the homepage of my Flask web application, `index.html`, allowing people to complete it there. Then I need some way of storing a unique identifier for that qualtrics survey, so that I can make calls to the qualtrics api to get the participant's survey data later on for data analysis. If I have read the documentation correctly, it seems like the `response id` can uniquely distinguish the completed survey responses of each participant.



* https://api.qualtrics.com/docs/listen-to-and-retrieve-responses-in-real-time

* https://api.qualtrics.com/reference#getresponse-1



But I haven't really found a source that clearly shows how I can get the `response id` in real-time for a participant that's completing an embedded qualtrics survey. I'm not sure if I truly need a web listener/webhook as shown in the "Listen to and Retrieve Responses In Real Time", and even then I'm not sure if this would actually work with heroku since it seems like there's only native support for event subscriptions to things that relate to the heroku app (https://devcenter.heroku.com/articles/app-webhooks). In addition, the call for `get response` require you to have a response id as a parameter... but that's what I need, i don't know how I'm supposed to generate that parameter.



I tried looking up some questions existing on this forum about getting the `response id` and showing that to users with javascript. These questions don't use web listeners, and instead make use of embedded data in javascript.



* https://www.qualtrics.com/community/discussion/3721/getting-responseid-using-javascript-with-getembeddeddata

* https://www.qualtrics.com/community/discussion/764/displaying-responseid-to-survey-respondents

* https://www.qualtrics.com/community/discussion/2895/how-can-i-show-responseid-at-the-end-of-the-survey



It sounds like trying to get the `request id` using embedded data might be the easiest route to take in terms of making the response id be clearly visible.



```

Qualtrics.SurveyEngine.addOnload(function()

{

var s = "${e://Field/ResponseID}";

});

```

i wasn't sure where this javascript was being posted though. I naively tried putting it in my `index.html` file after embedding the link to my survey, which failed. That redirected my attention to this link: https://www.qualtrics.com/support/survey-platform/survey-module/question-options/add-javascript/



It seems like the only way to make use of the qualtrics javascript api is by attaching the javascript code to an individual question. So I see that one possible route is to do a `console.log(s)` on one of the questions and have the user manually copy that into a `<form>` on index.html. But to avoid errors, I really would like if there was a way for me to get the request id automatically loaded into a form on `index.html`, or to a mounted endpoint of my flask application



I wanted to ask if there's any way for me to get the response id to be automatically loaded into a form or to a mounted endpoint of my flask application. If not, then getting the user to manually input the requestid seems like the only path I can take.
Few questions:

1. How do you "embedded" the Qualtrics survey into the index.html? I assume you use iframe?

2. Does the user submit the survey in and iframe inside index.html and redirect back to index.html's form tag with the respond id?

There are a lot of way to send the ${e://Field/ResponseID}

1. Survey Flow > Web Service > Query Parameters / Custom Header, you can set the value equal to ${e://Field/ResponseID}, you can trigger

2. if you use the per question JavaScript, it will launch when the question show up, but it seems like you can have the child iframe communicate with parent page:

https://stackoverflow.com/questions/8822907/html5-cross-browser-iframe-postmessage-child-to-parent
> @TJUH_Kai said:

> 1. How do you "embedded" the Qualtrics survey into the index.html? I assume you use iframe?

Yes, I use an iframe.

```

<div class="center-div">

<iframe src="https://washcoll.co1.qualtrics.com/jfe/form/SID" height="800px" width="700px"></iframe>

</div>

```



> 2. Does the user submit the survey in and iframe inside index.html and redirect back to index.html's form tag with the respond id?



Not yet currently implemented. But that sounds like the functionality I want ideally. The user does submit the survey inside of index.html. Ideally, i would want a `<form>` tag on index.html that, upon completing the survey, has the response id entered into its content.



So let's just imagine...

```

```

<div class="center-div">

<iframe src="https://washcoll.co1.qualtrics.com/jfe/form/SID" height="800px" width="700px"></iframe>

</div>



```



> There are a lot of way to send the ${e://Field/ResponseID}

> 1. Survey Flow > Web Service > Query Parameters / Custom Header, you can set the value equal to ${e://Field/ResponseID}, you can trigger



I've been trying to implement this today. I think the issue I'm running into is one of my Flask application not being public and accessible to qualtrics.

I followed instructions here to try to get my local flask app to be visible to other machines - https://stackoverflow.com/questions/7023052/configure-flask-dev-server-to-be-visible-across-the-network

If you follow instructions here or in Flask's documentation, you can get your website running at

`http://[your_ipv4]:[port]`. Using this link, I can actually access my flask application from another desktop computer (besides my personal laptop which is what I've been developing on). However, trying to test this in the "web service" menu gives you a message saying: "The web service returned no fields. Raw data: Local addresses not allowed."



I've disabled my firewall at the port number that my flask app is running on. But it's still not working with qualtrics.

Although I have my flask app deployed to heroku (and testing my heroku url works), implementing this stuff on heroku is going to be a more time consuming process and I'd greatly prefer to make sure I have a functional local flask instance before deploying with heroku. I'd rather not be debugging on heroku.



Is qualtrics really supposed to not allow a website that's hosted at your ipv4 address?



> 2. if you use the per question JavaScript, it will launch when the question show up, but it seems like you can have the child iframe communicate with parent page:

> https://stackoverflow.com/questions/8822907/html5-cross-browser-iframe-postmessage-child-to-parent



Just from trying this... I still have my iframe kept the same. I added the following javascript to the first question in my survey.



```

Qualtrics.SurveyEngine.addOnload(function()

{

console.log("howdy partner");



});

```



Nothing gets printed to the console though when I access the flask application, nor when I access the link to the survey directly.



I'm also still not sure how I'm supposed to extract a single message from an iframe since an iframe has many elements inside of it, so how am I supposed to select the single string that I would need... I feel like I could try searching this more, but for now, getting my javascript question api code to actually print out something would be good.
Can I suggest the following workflow, and let me know what you think:

1. When embed the iframe link, can you pass the current session (from the parent's site, index.html) to the survey using URL query parameter, you can checkout how to get the data in the survey in the embedded data using this article:

https://www.qualtrics.com/support/survey-platform/survey-module/survey-flow/standard-elements/embedded-data/

2. After the survey started, make sure you can access the session id that you passed in from the URL, so that you can use that information later.

3. Use survey flow to trigger a web service at the end of the survey, when you trigger the web service, redirect the user to a URL on your site (maybe response.html), and pass the response ID, and the session ID back to to your site, like (response.html?session_id=123&response_id=345), so you can use those information to match the user's current session and the response they entered in the survey. By using those information, you can then pull the response back from qualtrics and link it back to the session the user is in.



what do you think? would that work? try to break down the above steps and implement it one by one. (one step at a time).



I am not sure if it would work with localhost ip address... you can always reach out to qualtrics support to verify that.
Hm.

Leave a Reply