Alex Fink, Research Fellow, School of Social Work
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
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();
});
});
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
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]
}
]
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;
}
}