Recording User Inputs in a Text/Graphic Question | XM Community
Skip to main content

I've created a survey question using the Text/Graphic format where participants can enter numbers into fields that I've detailed within the HTML and JavaScript. However, the user inputs are not appearing in the survey data exports.

Before I move on, I want to confirm whether these inputs are being recorded somewhere, as I believe that user data entered into these fields must be captured in some form. Here are the specifics:

  1. The question uses custom HTML and JavaScript to allow user input.
  2. The input fields aren't standard Qualtrics fields but custom ones embedded directly into the HTML.
  3. I'm not seeing these inputs in the data export, and I'm concerned they might not be linked correctly to be captured by Qualtrics.

Could you please advise if there’s a way to retrieve this data? Specifically:

  • Is there a method to ensure these custom inputs are captured in the survey data?
  • Are there specific steps or configurations I need to apply to the JavaScript/HTML to make sure this data is saved?
  • Is there any chance the data is being recorded in the raw export data (such as JSON or another format) that might not be visible in the standard CSV/XLS export?

Thank you for your assistance!

Visual Context 

 

The data is not recorded. Qualtrics only records fields it knows about.

You should use a constant sum question.

The data is not recorded. Qualtrics only records fields it knows about.

You should use a constant sum question.

Thanks Tom! 

Is there any way that I can add that level of custom look/feel to the constant sum table? Or am I wasting my time/energy with this project? 

One way to do it would be to use JS move the constant sum input fields into your html table and hide the “question body”.

One way to do it would be to use JS move the constant sum input fields into your html table and hide the “question body”.

How would one pull this off?

Attached is a screen shot of my current question (HTML has not changed) - but i switched question type to constant sum (just produces a table at the bottom of question for now) 

Here is my current HTML:

<p>Imagine you just received a windfall of $100,000. How would you invest it among the following options?<br><br></p>
<p>Please distribute the total amount among these options by entering the percentage you would invest in each. For example, if you want to invest 20% of the total amount in the first investment option, enter '20' in its matching cell to the right.<br><br></p>

<table style="width: 100%; border-collapse: collapse;">
    <thead>
        <tr style="border-bottom: 1px solid lightgray;">
            <th style="padding: 10px; font-size: 15px; font-weight: bold; width: 20%;">Fund Name</th>
            <th style="padding: 10px; font-size: 15px; font-weight: bold; width: 40%;">Description</th>
            <th style="padding: 10px; font-size: 15px; font-weight: bold; width: 15%;">Annual Return</th>
            <th style="padding: 10px; font-size: 15px; font-weight: bold; width: 15%;">Risk Level</th>
            <th style="padding: 10px; font-size: 15px; font-weight: bold; width: 10%;">Allocation (%)</th>
        </tr>
    </thead>
    <tbody>
        <tr style="border-bottom: 1px solid lightgray;">
            <td style="padding: 10px; font-size: 15px;">Global Equity Fund</td>
            <td style="padding: 10px; font-size: 15px;">An ETF that invests in a diverse range of companies around the world</td>
            <td style="padding: 10px; font-size: 15px;">10.25</td>
            <td style="padding: 10px; font-size: 15px;">Moderate Risk</td>
            <td style="padding: 10px; font-size: 15px;"><input type="text" name="QR~QID48~1" style="width: 100%;"></td>
        </tr>
        <tr style="border-bottom: 1px solid lightgray;">
            <td style="padding: 10px; font-size: 15px;">Large Cap Stock Fund</td>
            <td style="padding: 10px; font-size: 15px;">An ETF focused on large, well-established companies domestically</td>
            <td style="padding: 10px; font-size: 15px;">11.44</td>
            <td style="padding: 10px; font-size: 15px;">Highest Risk</td>
            <td style="padding: 10px; font-size: 15px;"><input type="text" name="QR~QID48~2" style="width: 100%;"></td>
        </tr>
        <tr style="border-bottom: 1px solid lightgray;">
            <td style="padding: 10px; font-size: 15px;">Small Cap Stock Fund</td>
            <td style="padding: 10px; font-size: 15px;">An ETF focused on smaller companies domestically</td>
            <td style="padding: 10px; font-size: 15px;">9.12</td>
            <td style="padding: 10px; font-size: 15px;">Lowest Risk</td>
            <td style="padding: 10px; font-size: 15px;"><input type="text" name="QR~QID48~3" style="width: 100%;"></td>
        </tr>
        <tr style="border-bottom: 1px solid lightgray;">
            <td style="padding: 10px; font-size: 15px;">Sustainable Investing Equity Fund</td>
            <td style="padding: 10px; font-size: 15px;">An ETF that prioritizes investments in companies meeting environmental and social criteria</td>
            <td style="padding: 10px; font-size: 15px;">10.35</td>
            <td style="padding: 10px; font-size: 15px;">Moderately High Risk</td>
            <td style="padding: 10px; font-size: 15px;"><input type="text" name="QR~QID48~4" style="width: 100%;"></td>
        </tr>
    </tbody>
</table>
<p><br>The total allocation must equal 100% to continue.</p>



Here is my current JavaScript: 

Qualtrics.SurveyEngine.addOnload(function() {
    // This function runs when the page initially loads.
});

Qualtrics.SurveyEngine.addOnReady(function() {
    var that = this;

    function updateTotal() {
        var totalSum = 0;
        document.querySelectorAll('.constant-sum').forEach(input => {
            totalSum += parseFloat(input.value) || 0;
        });

        if (totalSum === 100) {
            that.enableNextButton();
        } else {
            that.disableNextButton();
        }
    }

    document.querySelectorAll('.constant-sum').forEach(input => {
        input.addEventListener('input', updateTotal);
    });

    updateTotal();
});

Qualtrics.SurveyEngine.addOnUnload(function() {
    // This function runs when the page is unloaded.
});

 

Remove the input fields from your html and add a class (e.g., csInput) to those td elements instead.  Then loop through the td elements with that class and append the matching constant sum input fields to them.

Leave a Reply


Terms & Conditions