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.

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;
      }
    }