App Development with Qualtrics

Alex Fink, Research Fellow, School of Social Work

@alexfink / finkx082@umn.edu

Client Needs:

  • Attractive interface to collect data and display results to user.

  • Mobile first.

  • Test different UI options.

  • Collect data if possible for later analysis.

  • Low cost

  • Easy for future devs to manipulate

Qualtrics can

  • Use mobile-ready, responsive templates
  • Store data, provide reports, allow for easy analysis
  • Be easily manipulated by non-experts (and therefore, tested and changed)
  • Be heavily modified using a Javascript API and an external API
  • Provides a solid, secure, and stable platform with support
  • Easily manage and change permissions, visibility, metrics

Qualtrics can import Javascript libraries from CDNs.

cdnjs.com

Features

  1. 8 separate screens that each ask one survey question, pretty & mobile-friendly
  2. Different ways of displaying the questions for UI testing (that can easily be enabled/disabled later)
  3. A beautiful, designed chart at the end that shows the user their results and provides further resources depending on their answers
  4. An ability to email a copy of an IRB form and user results (including the graphic in #3)

It needs to be hard to break and easy to change.

Survey Q? Demo

Q? Display

  • In order to user test, client needs to be able to determine which questions will show a different interface
  • Sometimes, they wanted questions to look and feel like a mobile app - responding differently when a user clicked on a different answer
  • These needed to be readily change-able, yet not break easily

Q? Display

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat.

// test for which questions are shown on current page.
    j.each(qArray, function(index,val) {
      if(j("#QID" + val).length) {
        qId = "QR~QID" + val;
      }
    });

    // figure out which QR~QIDXX this is... if exists, then do this stuff...

    // just add the onclick to each of these...
    var all = j('input[name="' + qId + '"]');
    all.each(function(index, element) {

      // need to up the index by 1, since question ids start at 1
      var lab = j('label[for="' + qId + '~' + (index + 1) + '"]');

      // we grab the extra description text, which is the first td in the 2nd tr
      var flip = lab.find('>table >tbody tr:nth-child(2) td');

      // hide all of extra text
      hideAll();

      // attach click to unhide
      lab.click(function() {

        // for every click, hide everything, then toggle the clicked element on
        hideAll();
        flip.toggle();
      });

    });

Chart

Display results in a pie-type chart, where each slice was "filled" to a certain height by how the user had responded on the survey

Requirements

  • Pull data from responses and use it to develop the chart
  • Build a responsive chart that followed design, including overlaid symbols
  • Avoid loading a million images, if possible

Attempt 1

  • Chart.js library
  • Polar area chart
  • Easy to get working... difficult to get gradient and overlays to work effectively

Attempt 2

  fillColor: "rgb(203, 33, 48)",
        lines: [
          {
            first: "curveTo",
            moveTo: [771.3, 771.3],
            curveTo: [853.1, 689.6, 903.7, 576.6, 903.7, 451.8],
            lineTo: [450.5, 451.2]
          },
          {
            first: "curveTo",
            moveTo: [707.5, 706.2],
            curveTo: [772.9, 640.8, 813.3, 550.4, 813.3, 450.6],
            lineTo: [450.8, 450.0]
          },
          {
            first: "curveTo",
            moveTo: [643.6, 642.4],
            curveTo: [692.7, 593.3, 723.0, 525.6, 723.0, 450.7],
            lineTo: [451.1, 450.3]
          },
          {
            first: "curveTo",
            moveTo: [581.3, 579.3],
            curveTo: [614.4, 546.3, 634.8, 500.6, 634.8, 450.2],
            lineTo: [451.6, 449.9]
          },
          {
            first: "curveTo",
            moveTo: [519.0, 516.6],
            curveTo: [536.0, 499.6, 546.6, 476.0, 546.6, 450.0],
            lineTo: [452.1, 449.8]
          }
        ]

Attempt 2

  • Use Adobe Illustrator plugin to export design file as HTML5 Canvas drawing
  • Learn how HTML5 Canvas worked to understand how each piece was drawn "filled" or not
  • Convert to Create.js format to build on library's functionality
  • Programmatically determine what to draw to "fill"
  • Ahhh!

Attempt 2

    var fills = {};

    for (var prop in ans) {
      // if this is the "I don't care to answer this question", we don't actually
      // want this to be 6 or it will look like this person is doing REALLY great.

      if(parseInt(ans[prop]) == 6) {
        ans[prop] = 0;
      } else {
        ans[prop] = parseInt(ans[prop]);
      }

      // Take data and loop through each data point # of times
      // Set either to empty or full
      var tmpArr = [];

      for(var i = 0; i < 5; i++) {

        // set either to alpha as full or empty, based on whether it's in our data point
        if (i < ans[prop]) {
          tmpArr[i] = alphaFull;
        } else {
          tmpArr[i] = alphaEmpty;
        }

        // now we have this for each property
        fills[prop] = tmpArr;
      }
    }

Email

  • Email IRB form or Chart/results to user - mobile device doesn't make it easy to print
  • Need to create a pop-up that asks for a user's email address, then ships to user
  • Qualtrics doesn't do this kind of email

Email solved..

  • Mandrill has an API to ship a free number of emails
  • Ask for user's email, ship HTML5 to Mandrill, Mandrill ships to user

Hard 2 Break?

Easy 2 Change?

  • Versioned code: Posted all the code to a private git repository that can be drawn from in the future.
  • Replicable: All the code can be documented, with instructions on how and where to put it in the Qualtrics system
  • Configurable: Based on stable Qualtrics API and standard DOM elements, so adding/removing options should be safe

Pros

  • Mobile-friendly, stable templates
  • Easy to use, well-documented APIs
  • Extremely flexible
  • Stable hosting
  • Extraordinary support
  • Already solves a huge number of problems that require a lot of dev work

Cons

  • Occasionally unpredictable functionality
  • Possible software changes out of your control

Contact

Alex Fink

finkx082@umn.edu

@alexfink

 

Data Science & Analysis Tools:

http://bit.ly/DataScienceList

Developing (Mobile) Apps with Qualtrics

By Alex Fink

Developing (Mobile) Apps with Qualtrics

Presentation on Developing Mobile Apps with Qualtrics presented to Conversations & Computing Club @ University of Minnesota, November 20, 2015.

  • 878
Loading comments...

More from Alex Fink