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

admin管理员组

文章数量:1312878

I try to have a table visible for multiple questions on multiple qualtrics pages one after the other. I followed guidelines here:

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;

});

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/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:

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:

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;
    }
}

• javascript
• css
• embedding
• survey
• qualtrics

Share Improve this question Follow asked Jan 31 at 16:59 canIchangethiscanIchangethis 19711 silver badge1414 bronze badges 4

• 1 This is hard to reproduce for anyone here who doesn't have a running Qualtrics environment set-up to test this in. I can only guess that you perhaps left out some additional ancestor element wrapping this table, which has an influence on what selectors apply, or something like that. Inspect the elements in question using your browser dev tools, and check where their font-size comes from. – C3roe Commented Feb 3 at 8:33
• I will try that. Thank you. Should I have maybe added this link t1p.de/l0e3k to the qualtrics survey? – canIchangethis Commented Feb 3 at 10:33
• The second question is directly wrapped into a div with class QuestionText, and based on that .Skin .QuestionText { font-size: 22px; } applies. What you are inserting, is not wrapped into a div.QuestionText, and therefor this font size setting doesn't apply to it. – C3roe Commented Feb 3 at 10:58
• Thank you, this was the secret. I solved my own issue :) – canIchangethis Commented Feb 3 at 12:32

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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;

});

本文标签：