javascript multiple textboxes in one line | XM Community
Skip to main content

javascript multiple textboxes in one line

  • November 7, 2022
  • 4 replies
  • 502 views
E
Forum|alt.badge.img+1

Hello,
I wanted to know how I can add multiple text boxes in one row.
for example:
i want to show the respondent the following letters
e           g           r
between the e and g there should be a textbox (textbox 1) and between g and r there should be a second text box (textbox2) so that they can complete the word => eager.

I already found the following code but I am not good enough in javascript to add a second textbox right after the g and another 'after' item.
I have in total 2 words (e-g-r, act-v-e). if they can appear on the same page that would be great. if i need to make a question for each not a problem. Thanks a lot in advance

Elke

var inputs = $(this.getQuestionContainer()).select('input[type="text"]');

for (var i = 0; i < inputs.length; i++) {
 var input = inputs[i];
 $(input).insert({before: 'e '});
 $(input).insert({after: ' g'});
}

    4 replies

    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • November 7, 2022

    You can do something like this in your question text html:
    Please complete these words:



    egr



    actve
    With a bit of CSS it could look like this:
    image.pngSince Qualtrics won't know about the input fields, you'll need JavaScript to capture the input values into a question or embedded data fields.
    If you are interested, I have a function that does this (and a whole lot more).

    E
    Forum|alt.badge.img+1
    • elc
    • Author
    • November 9, 2022

    Thanks Tom.
    I also wanted to use the greyletters but it doesn't seem to work or I have put the code in the wrong place? I have put it in custom css under look & feel.
    then to capture the input given by the respondents can you tell a bit more, (I am just a starter in javascript :))



    Deepak
    QPN Level 8 ●●●●●●●●
    Forum|alt.badge.img+46
    • Deepak
    • November 9, 2022

    elc
    Just create a text graphic question and click on HTML view and add the below code to get the desired result.
    image.png
    image.png
    Please complete these words:



    egr



    actve

    Preview:
    image.pngYou can change the font-size as needed I have kept 24px. To get this recorded or within Data Analysis you will have to push the values in an embedded data.
    Hope it helps!

    E
    Forum|alt.badge.img+1
    • elc
    • Author
    • November 9, 2022

    works perfect!
    thanks a lot!
    elke

    Terms & ConditionsAccessibility statement