A link to Qualtrics survey for demo: https://ubc.ca1.qualtrics.com/jfe/form/SV_0oiEz2f76DneukR
A link to Drupal website for demo: https://qualtrics.dp7prod.webi.it.ubc.ca/
- Getting started ➜
- How to embed a Qualtrics survey to a website ➜
- How to make an embedded survey responsive ➜
- How to get [anonymous-survey-link] ➜
- How to export JSON feeds from Drupal to Qualtrics ➜
- How to create an Autocomplete question type using imported JSON feeds on Qualtrics ➜
- For Developers: Guide to Debug ➜
To learn more about Drupal, please visit here for more information.
To learn more about Qualtrics, please visit here for more information.
To download the above contrib modules, here is a good tutorial that covers how to install and enable contrib modules in Drupal.
If you are comfortable using Drush, Drupal's command line tool, then you can run the following commands:
$ drush -y dl views views_datasource ctools ckeditor
$ drush -y en views views_json views_ui
If you are comfortable using Git, you can
$ git clone https://github.com/ubc-web-services/ubc_qualtrics_drupal_integration.git
to download files. If not, you can choose to download a .zip file. Here is a good reference.
- Theme: UBC CLF 7.0.4 Drupal Theme 3.0 ➜
- Administration theme: Adminimal - Responsive Administration Theme ➜
- Additional installed modules:
- Administration menu ➜
Note: All screenshots are from Drupal website for demo. If you started your own Drupal website, you can install the modules mentioned above to have the same look and feel of the website we are demonstrating.
- Download Drupal and start building your own Drupal website.
- Create a basic page:
Go to Content > Add content > Page.
Select
button located at the bottom row of the text editing tools.
In Body field, add:
<iframe align="middle" frameborder="no" height="800px" name="qualtrics" scrolling="auto" src=[anonymous-survey-link] width="800px"></iframe>
You can copy and paste the above line, but you must replace the [anonymous-survey-link] with your own.
You can retrieve your own [anonymous-survey-link] with the step-by-step instruction.
In the case of demo, the link is https://ubc.ca1.qualtrics.com/jfe/form/SV_0oiEz2f76DneukR.
- Save the page to see the survey embedded to the designated page.
- Go to the page on your Drupal website with a Qualtrics survey embedded from the previous step and click Edit.
- In the Body field, add a containing wrapper around
iframe. You can choose to copy and paste the below example:
<div class="embedded-survey">
<iframe align="middle" frameborder="no" height="800px" name="qualtrics" scrolling="auto" src=[Anonymous Survey Link] width="800px">
</iframe>
</div>- Add the below line of code in your CSS file or wrap around
<style>tag:
.embedded-survey {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.embedded-survey iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}- Click Save.
For more information, visit here.
- Go to Qualtrics website and login using your CWL account.
- Create a survey for demo.
For the purpose of demo, I created a survey titled as Test: Course Evaluation. - Click the survey title to see the page similar to this:
- Go to Distribution tab located at the top of the page, and the link will be provided when the page is loaded.
- Create a page view:
Go to Structure > Views > Add new view and select Create a page. Click Continue & Edit.
Under Format field, click Unformatted list.
Click JSON data document and click Apply (all displays).
For the advanced Drupal developers: you can choose to select Fields instead of Contents to export fields of your choice. Moreover, you can choose different display modes(e.x. Default, etc.) other than Teaser demonstrated in our example for a desired display style.
- Once saved, you will be able to see the preview at the bottom of the page that is similar to this:
{
"nodes" : [
{
"node" : {
"title" : "Wood Products Processing"
}
},
{
"node" : {
"title" : "Statistics"
}
},
{
"node" : {
"title" : "Pharmacy"
}
},
...
If you click Settings next to JSON data document under Format field, you can modify root object name (nodes in this demo) and top-level child object(node in this demo).
-
Go to Qualtrics website and login using your CWL account.
-
Create a survey, or locate the existing survey that you wish to import JSON feeds from your Drupal website.
-
To create an autocomplete text field, create a question of type Single Line under Text Entry.
Then, right-click the question card of interest to locate Add JavaScript option.
Copy and paste the code provided below:
In jQuery:
Qualtrics.SurveyEngine.addOnReady(function() {
$.getJSON('https://[YOUR_SITE_DOMAIN/ENDPOINT]', function(data) {
var nodes = data.nodes;
var availableTags = [];
for (var node of nodes) {
availableTags.push(node.node.title);
}
var org_html = '<input type="TEXT" autocomplete="off" id="QR~QIDXX" value="" class="InputText QR-QIDXX QWatchTimer ui-autocomplete-input" name="QR~QIDXX~TEXT" data-runtime-textvalue="runtime.Value" style="width: 324px;" aria-describedby="QR~QIDXX~VALIDATION">'
var new_html = '<div id="ui-widget">' + org_html + '</div>';
$('.QR-QIDXX').html(new_html);
$(".QR-QIDXX").autocomplete({
source: availableTags
});
});
});IMPORTANT: Note that QR~QIDXX and QR-QIDXX are unique to each question, and they need to be replaced. You can find the last two digits of your question ID's and classes by going to the preview of your survey, inspect the page and hover over the question of your interest and look for ID.
In this case, the question ID is QR~QID80, highlighted in orange color.
Your [YOUR_SITE_DOMAIN/ENDPOINT] is the path assigned to your page view created for exporting JSON feeds.
-
Click save button, and find
button on top of the page. -
Click and you will see a pop-up window that looks like this:
- Click Advanced option and add below lines to Header section:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>- Click save button, and click
to have a preview look of your survey.
There is a quick way to check whether Qualtrics Drupal Integration module has been set up properly in Firefox.
- Go to your website and locate the page view with the JSON feeds you wish to export.
- At the top of the browser, there are three tabs: JSON, Raw Data, and Headers. If you click Headers, you should see Access-Control-Allow-Origin header similar to this:
under Response Headers.
- If not, you would want to go back to your Drupal website and see if the module has been installed and enabled, and make sure that all the caches are cleared.
By default, Drupal automatically optimizes external resources to reduce both the size and number of requests made to your website. Hence, you want to make sure that these options are disabled in order to properly load your custom CSS and JavaScript files:
- Go to Configuration > Development > Performance or simply admin/config/development/performance.
- Under Bandwidth Optimization, disable all three options: Compress cached pages, Aggregate and compress CSS files, and Aggregate JavaScript files.
- Click Save Configuration.
Back to Top ➜