Search code examples
javascriptcssembeddingsurveyqualtrics

In Qualtrics, what can I do to make my with javasectipt embedded HTML text exactly the same as the default text?

I try to have a table visible for multiple questions on multiple qualtrics pages one after the other. I followed guidelines here: https://community.qualtrics.com/custom-code-12/pin-instructions-to-top-of-page-as-participants-scroll-through-questions-13191

This is my javascript on the question

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/

var base_element = document.querySelector(".QuestionOuter");
base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" style="position: sticky; top:0;" align="middle">');

var new_element = document.querySelector("#sticky_vid");

// Change the text below to add the element of your choice
new_element.innerHTML = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
&nbsp;
<br />
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px;">
    <thead>
        <tr>
            <th scope="col">Some text</th>
            <th scope="col">&nbsp;Project A</th>
            <th scope="col">Project B (some more info)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">More text</th>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
            <td>ELorem ipsum dolor sit amet, consectetur</td>
        </tr>
        <tr>
            <th scope="row">Lorep 1</th>
            <td>Lorem ipsum dolor sit amet, consectetur</td>
            <td>orem ipsum dolor sit amet, consectetur</td>
        </tr>
        <tr>
            <th scope="row">Even more text&nbsp;</th>
            <td>Required behavioral<br />
            adoption</td>
            <td>Encroaching on the land&nbsp;and rights of local communities, labour right violations</td>
        </tr>
        <tr>
            <th scope="row">Some numbers</th>
            <td>32</td>
            <td>32</td>
        </tr>
    </tbody>
</table>
<br />
We now ask you several questions on these proposed projects.<br />
&nbsp;`
;

// This is important, otherwise, the element you add will be at the back
base_element.style.zIndex = 1;
new_element.style.zIndex = 10;

});

However, the size and formatting of the text I added via JS is not the same as the text within the qualtrics question. I show this by adding the same text below without page break to show what I would have wanted instead of the stuff I got:

what I got vs what I wanted

Any idea how to fix this?

EDIT: No, I tried it without this custom CSS (see below) and I have indeed the same problem, see this picture:

without custom CSS

Could the custom CSS (in Look&Feel) be a problem: 

.Skin .QuestionBody {
    min-width: 1300px!important;
}


.Skin .QuestionText {
    min-width: 1300px!important;
}

.Skin .SkinInner {
    min-width: 1400px!important;
}

@media only screen and (max-width: 768px) {
    .Skin .QuestionBody {
        min-width: auto !important;
    }
     .Skin .QuestionText {
        min-width: auto !important;
    }
     .Skin .SkinInner {
        min-width: auto !important;
    }
}

Solution

  • thanks to @C3row I got to the solution of this.

    Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/

var base_element = document.querySelector(".QuestionOuter");
base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" style="position: sticky; top:0;" align="middle">');

var new_element = document.querySelector("#sticky_vid");

// Change the text below to add the element of your choice
new_element.innerHTML = `<div class="QuestionText BorderColor"><p align="left">
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
&nbsp;
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px;">
    <thead>
        <tr>
            <th scope="col" style="padding: 1px;">Some text</th>
            <th scope="col" style="padding: 1px;">&nbsp;Project A</th>
            <th scope="col" style="padding: 1px;">Project B (some more info)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" style="padding: 1px;">More text</th>
            <td style="padding: 1px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
            <td style="padding: 1px;">ELorem ipsum dolor sit amet, consectetur</td>
        </tr>
        <tr>
            <th scope="row" style="padding: 1px;">Lorep 1</th>
            <td style="padding: 1px;">Lorem ipsum dolor sit amet, consectetur</td>
            <td style="padding: 1px;">orem ipsum dolor sit amet, consectetur</td>
        </tr>
        <tr>
            <th scope="row" style="padding: 1px;">Even more text&nbsp;</th>
            <td style="padding: 1px;">Required behavioral<br>
            adoption</td>
            <td style="padding: 1px;">Encroaching on the land&nbsp;and rights of local communities, labour right violations</td>
        </tr>
        <tr>
            <th scope="row" style="padding: 1px;">Some numbers</th>
            <td style="padding: 1px;">32</td>
            <td style="padding: 1px;">32</td>
        </tr>
    </tbody>
</table>
<br>
We now ask you several questions on these proposed projects.<br> </p>
&nbsp;</div>`
;

// This is important, otherwise, the element you add will be at the back
base_element.style.zIndex = 1;
new_element.style.zIndex = 10;

});

    Or if you want to do it more neatly:

    Move the div part up to the rest of the div.

    Qualtrics.SurveyEngine.addOnReady(function()
{

var base_element = document.querySelector(".QuestionOuter");
base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" class="QuestionText BorderColor" style="position: sticky; top:0"; align="left">');

var new_element = document.querySelector("#sticky_vid");

// Change the text below to add the element of your choice
new_element.innerHTML = `
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
    &nbsp;
    <table border="1" cellpadding="1" cellspacing="1" style="width:1000px;">
        <thead>
            <tr>
                <th scope="col" style="padding: 1px;">Some text</th>
                <th scope="col" style="padding: 1px;">&nbsp;Project A</th>
                <th scope="col" style="padding: 1px;">Project B (some more info)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row" style="padding: 1px;">More text</th>
                <td style="padding: 1px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
                <td style="padding: 1px;">ELorem ipsum dolor sit amet, consectetur</td>
            </tr>
            <tr>
                <th scope="row" style="padding: 1px;">Lorep 1</th>
                <td style="padding: 1px;">Lorem ipsum dolor sit amet, consectetur</td>
                <td style="padding: 1px;">orem ipsum dolor sit amet, consectetur</td>
            </tr>
            <tr>
                <th scope="row" style="padding: 1px;">Even more text&nbsp;</th>
                <td style="padding: 1px;">Required behavioral<br>
                adoption</td>
                <td style="padding: 1px;">Encroaching on the land&nbsp;and rights of local communities, labour right violations</td>
            </tr>
            <tr>
                <th scope="row" style="padding: 1px;">Some numbers</th>
                <td style="padding: 1px;">32</td>
                <td style="padding: 1px;">32</td>
            </tr>
        </tbody>
    </table>
    <br>
    We now ask you several questions on these proposed projects.<br> 
    &nbsp;`
    ;

// This is important, otherwise, the element you add will be at the back
base_element.style.zIndex = 1;
new_element.style.zIndex = 10;

});