How to format Qualtrics embedded data on a per-input basis?

Question

What I'm trying to accomplish is grab some embedded data, and output it in a specific way (color, position, etc.). For instance, we put the embedded data as <div class="previous">$e://Field/DTBEG}</div> in the question text, but I want to grab it and insert it directly under the input field (something I don't think we can do directly in Qualtrics, so custom JS is needed here).

So in the question text, I have:

<div>1a. Reporting Period: Beginning</div>
<div class="previous date">${e://Field/DTBEG}</div>

where the DTBEG data may be empty, or may be 5/6 digits representing a date. The header of the survey has:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    var $j = jQuery.noConflict();
</script>

as explained in their documentation.

So then in jQuery I can access the field's previous data with $j(".previous"), but the issue is that Qualtrics actually puts 2 (or more, depending on the question type) <div class="previous date"></div> fields in my question. This is very misleading now, because each embedded data may have additional "previous" divs, so there's no way for me to determine if the embedded data was just empty, or if this is a duplicate field.

...
<h2 class="noStyle">
    <label class="QuestionText BorderColor">
        <div>1b. Reporting Period: End</div>
        <div class="previous date">33113</div> <!-- first instance of the div, this seems to be visible -->
    </label>
</h2>
<fieldset>
    <div class="QuestionBody">
        <table class="ChoiceStructure" border="0" cellpadding="0" cellspacing="0" summary=" 1b.&amp;nbsp; Reporting Period:&amp;nbsp; End&amp;nbsp; 33113 " style="width:710px">
        <caption class="QuestionText BorderColor">
            <div>1b. Reporting Period: End</div>
            <div class="previous date">33113</div> <!-- second instance of the div, this seems to be hidden -->
        </caption>
        ...
    </div>
</fieldset
...

Is there a better way to accomplish what I'm trying to do? I'm fine writing my own JS to do so, but so far, because Qualtrics' HTML output isn't quite what I expected I'm running into issues.

Answer 1

Try the following javascript in the necessary question:

Qualtrics.SurveyEngine.addOnload(function()
{

$$('.QuestionBody')[0].insert($$('.previous')[0]);

});

Rather than using jQuery and having to go to that hassle, this uses the baked in PrototypeJS. The selector

$$('.class')

will return an array of elements. Since there is and should be only 1 element with your "previous" class, it is the first and only element in the array. The number selected for the ".QuestionBody" array will need to be adjusted based on the number of questions on the page, and where they will be showing.

also worth noting that

$('idName') 

can be used to select an element with an id, and does not return an array.