QualtricsXM Custom Surveys
Hardcoded CanvasJS and custom JS/CSS inside scalable QualtricsXM surveys.
Role: Technical Manager / Developer
Overview
For the Center for Positive Leadership, I hardcoded CanvasJS visualizations and custom JavaScript/HTML5/CSS into scalable QualtricsXM surveys, and maintained the center's WordPress site with SEO and Google Analytics best practices. Counted as part of my co-op experience alongside the Leadership Amplifier migration.
Highlights
- Custom CanvasJS charts embedded directly into QualtricsXM surveys via the API.
- Hand-written JS/HTML5/CSS for survey interactivity and styling.
- WordPress maintenance with SEO and Google Analytics.
Custom in-survey result charts
Qualtrics shows only static answer text by default. For the Center's leadership self-assessments I injected hand-written JavaScript and a charting library directly into the survey result pages, reading each respondent's scored dimensions (e.g. compassion vs. firmness) and rendering a live, branded chart inline. Below is a faithful recreation of one of those result visualizations, rebuilt with a lightweight canvas renderer instead of the paid CanvasJS dependency.
Survey result · live recreation
scale 1–7
The original ran inside the survey's result page as injected JS:
// Qualtrics result page — embedded JS
Qualtrics.SurveyEngine.addOnload(function () {
var scores = JSON.parse("${e://Field/scoresJSON}");
new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
axisY: { minimum: 0, maximum: 7 },
data: [{ type: "column", dataPoints: scores }],
}).render();
});