Low Code Solutions (Sharing is Caring)

In our Quarterly “Education | Qualtrics User Group Session” meeting I showed the following “Low Code Solutions” for things I wanted in Qualtrics (question types) that didn’t exist. The Java Script for each is below.  Would LOVE to see what you have created (and are willing to share)

Calendar Widget
 

Qualtrics.SurveyEngine.addOnload(function()
{
    var qid = $(this.questionId).getAttribute("posttag");
    var c = this.questionContainer;

function loadScript(url, callback) {
  var script = document.createElement("script");
  script.type = "text/javascript";

  if (script.readyState){
    // handle IE
    script.onreadystatechange = function(){
      if (script.readyState == "loaded" || script.readyState == "complete"){
        script.onreadystatechange = null;
        callback();
      }
    };
  } else {
    // handle other browsers
    script.onload = function(){
      callback();
    };
  }

  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
};
    
    // loadScript('https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yahoo/yahoo-min.js',function() {
    loadScript('https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/utilities/utilities.js',function() {
    loadScript('https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js', function() {
    loadScript('https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/calendar-min.js',function() {
        YAHOO.util.Get.css('https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/assets/skins/sam/calendar.css');
        
    //var qid = $(this.questionId).getAttribute("posttag");
        //var qid = $("QID4").getAttribute("posttag");
    var calid = qid + '_cal';
    var y = QBuilder('div');
    $(y).setStyle({clear:'both'});
    var d = QBuilder('div',{className:'yui-skin-sam'},[
        QBuilder('div', {id:calid}),
        y
        ]);

    // var c = this.questionContainer;
    c = $(c).down('.QuestionText');
        // c = $('QID4').down('.QuestionText');
    c.appendChild(d);
    var cal1 = new YAHOO.widget.Calendar(calid);
    cal1.render();
    var input = $('QR~' + qid);
    $(input).setStyle({marginTop: '20px',width: '150px'});
    var p =$(input).up();
    var x = QBuilder('div');
    $(x).setStyle({clear:'both'});
    p.insert(x,{position:'before'});
    cal1.selectEvent.subscribe(function(e,dates){
      var date = dates[0][0];
      if (date[1] < 10)
      date[1] = '0' + date[1];
    if (date[2] < 10)
      date[2] = '0' + date[2];
    input.value = date[1] +'-'+date[2]+'-'+date[0];
    });
    
    
    });
    });
    });
    // });
});


TIME WIDGET

Qualtrics.SurveyEngine.addOnload(function()
{
    var qid = this.questionId;
    
    window.updateFields = function() {
        
        var shortnums = document.getElementsByClassName('shortnum');
        for (var i=0; i<shortnums.length; i++) {
            if (parseInt(shortnums[i].value) < 10) {
                shortnums[i].value = ("0"+shortnums[i].value).slice(-2);
            }
        }
    }
});

And the Source in the Rich Content Editor:

<style type="text/css">.shortnum {
  max-width: 40px !important;
  display: inline !important;
}
</style>
Select a Time (in 24 hours):  <input value="00" type="number" min="00" max="23" id="customFormTimeHour" class="shortnum"> : <input value="00" type="number" min="00" max="59" id="customFormTimeMinute" class="shortnum"> : <input value="00" type="number" min="00" max="59" id="customFormTimeSecond" class="shortnum">

Constant Sum - Skip or Total an Amount
Allow someone to skip my Constant Sum OR if they put in values, they have to total 100.  To modify, change the Java Script second choice to be different than 100.  Do NOT turn on validation if using this question.  Note: you won't get an error message, you just won't get the Next Button to be "live" unless it totals 100 or is skipped...so, recommend this question be in a block of its own with an explanation that it must total 100 or can skip.

Qualtrics.SurveyEngine.addOnReady(function () {
    let quest = this,
        qc = quest.questionContainer,
        id = quest.questionId,
        total_box = qc.querySelector("#" + id + "_Total");
    total_box.oninput = function () {
        quest.disableNextButton();
        if (total_box.value == 0 || total_box.value == 100) quest.enableNextButton();
    };
});

Adjustable width for Constant Sum

Qualtrics.SurveyEngine.addOnload(function()
{
    var sumInputs = document.querySelectorAll(".SumInput");
    for (var i=0; i < sumInputs.length; i++) {
        sumInputs[i].style.width="10em";
    }

});

And Last, but definitely NOT least. Using a DROP DOWN list within a Form Field Question

Example for having a drop down within a form field.  Uses JavaScript for the question
The key line is: 
var element="<select id='s3'><option></option><option value='2024'>2024</option><option value=2023'>2023</option><option value='2022'>2022</option>";
you can change it to be select id='s2' or 1 or 4...
The option values also have to be "hard coded" - in this case years.

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/
    var that=this.questionId;
var form3 = document.getElementById("QR~"+that+"~3");
var pipe3 = this.getTextValue(3);
var element="<select id='s3'><option></option><option value='2026'>2026</option><option value=2025'>2025</option><option value='2024'>2024</option>";
jQuery(element).insertAfter(form3);

jQuery(form3).hide().val(pipe3);
jQuery("#s3").val(pipe3);

var select3 = document.getElementById("s3");
select3.addEventListener('input', function (event) {
jQuery(form3).val(jQuery("#s3 option:selected").text());
}, false);

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});