Notes from Qualtrics JS series: Basic create boxes, and hiding next button

In this series, I try to learn how to use Javascript in Qualtrics.

Qualtrics.SurveyEngine.addOnload(function() {
    var w = 100; // width of the squares
    var d = 350; // distance between the centers of the squares

    // Create squares
    var square1 = document.createElement('div');
    square1.id = 'square1';
    square1.style.width = w + 'px';
    square1.style.height = w + 'px';
    square1.style.background = 'grey';
    square1.style.position = 'absolute';
    square1.style.left = (d/2) - (w/2) + 'px'; // Positioning from the center

    var square2 = document.createElement('div');
    square2.id = 'square2';
    square2.style.width = w + 'px';
    square2.style.height = w + 'px';
    square2.style.background = 'grey';
    square2.style.position = 'absolute';
    square2.style.left = (d/2) + (w/2) + d + 'px'; // Positioning from the center

    // Append squares to the body of the question
    this.getQuestionContainer().appendChild(square1);
    this.getQuestionContainer().appendChild(square2);
    
    this.hideNextButton();
});

Javascript for use in Qualtrics.

This creates two boxes with defined widths and distances. Distance measured from the centre of the boxes.

Even the next button is hidden.

Results as shown below.