Custom Code

Hi, how can I force qualtrix to display matrix like questions well formatted and without any horizontal scrolls? I already forced bigger width for entire survey (using classic layout) .Skin .SkinInner {min-width: 1000px!important;} But this seems to be not enough to display my questions properly: ! Here we see uneven spacing. And here both uneven spacing and scrolling: ! How can I make it work properly? Is there any documentation for all the CSS codes recognized by qualtrics? Like .SkinInner and so on?

I need help piping in answers from a matrix (entire rows of selected choices) into text. At the same time, I want the list to not be comma spiced but rather with a slash. Can someone help me with this?

In old Qualtrics surveys, I've successfully used some simple HTML effects under the question's "HTML view" with code like this: <p style=”text-align:center; color:black; background:LightCyan; font-weight:bolder; border:1px solid PaleTurquoise; padding:5px;”> Some signpost text that gives guidance to respondents </p> This code still works when I view old surveys, but it doesn't work in new surveys. What's up? Here's one bit of info that may be helpful for diagnosis. I've noticed that the "Look & Feel Theme" I was using on the old surveys seems to be unavailable for new surveys. I cant' find any new themes that support the simple HTML. But maybe the problem has nothing at all to do with the L&F theme. Let me mention what <u>won't</u> work for what I'm doing. Neither the "Look & Feel editor" nor "Adding Custom CSS" are the answers here. I'm not looking for any global, survey-wide changes. I'm only looking for some very localized HTML

I am creating a survey which requires users to specify the start date of a programme on the first page, then populate 4 matrix tables with a value for each of the following 28 days. I am trying to make the scale points on each table dates generated on the basis of the user's original entry value (+1, +2... +28). Not sure how to get qualtrics to recognise the original entry as a date (rather than just text) so I can perform this addition. I have come across a problem of a somewhat similar nature in the support pages where the person asking the question was directed toward 'moment.js' but details were sparse and I couldn't quite get my head round how to integrate this. I'd be grateful for any help or suggestions.

We'd like to use Qualtrics to administer a Spelling test to our elementary students. Tech support suggested I reach out to people here to ask if anyone has a custom code I can use to block spell check in the browser for those students during that time? Thanks!

Hello, I have a slider question (ranging from 0-100) and want the subsequent question to appear (in the same page) once the slider is moved. The value of the slider should not matter for the display of the subsequent question. Appreciate any inputs and help.

In survey 1, I have an action set up to distrubute a survey when staff enter the contact information of a client. For survey two, the email that clients receive should have an inline email question. I copied the source code of the invite email message from survey 2 into my distribute survey action, but the text that is displayed for the inline question is from survey 1. However, when I click on an answer choice it correctly takes me to survey 2. For the correct text to display, I think I need to change these portions of the code, but I don't know how to find the links or IDs to use from survey 2. Any ideas? ${q://QID1/QuestionText} ${q://QID1/ColumnLabel/0} ${q://QID1/ColumnLabel/1} href="${l://ChoiceLink/QID1/0}" ${q://QID1/ChoiceDescription/0} It should look like this (from Survey 2): ! It currently looks like this (Distribute survey task) !

Hello all, I'm building a survey (for the first time ever) in Qualtrics. I'm trying to get a color system for answered questions like so: ! If you have answered the question, the question's link in the sidebar turns blue (well, the border does). With this survey we're building though, it might take someone a long time to answer, so I would like to keep the link to answered questions blue. Right now, they are turning back to red, the default. I have this code for when the user clicks on the question and answers it: ``` Qualtrics.SurveyEngine.addOnload(function (){ this.questionclick = function(event,element){ element.addEventListener("blur", blurFunction, true); function blurFunction() { if ((element.type == "text") && (element.value != "")){ var elementID = element.id.split('~')[1]; var questionID = elementID.substr(3, elementID.length); document.getElementById('question-card' + questionID).classList.add('card-validated'); console.log("validated"); } }

Looking to create a unique identifier on a HTML input to be able to hook up a multi select js function.

Hi, How can we embed a form on an iframe? Thank you

I'm currently trying to get a behavioral task to work with Qualtrics using Javascript. Essentially, the task consists of people pumping a balloon. Each pump brings it closer to popping the balloon, but they get more rewards based on the number of times they pump. They can collect rewards at any time. In total, they repeat pumping balloon and collecting rewards 30 times (30 rounds). I'm interested in how many times they press the pump button in each round. I was able to find a script online that can be used to display the task in Qualtrics (did not write it myself). I'll add the code to the comments. The only thing that was missing was a way to get Qualtrics to record the data I want. I've looked through forums and found that the following script can be used to get Qualtrics to record data: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> Qualtrics.SurveyEngine.setEmbeddedData( 'embeddedDataVariable', value ); Qualt

Hi there, I'm trying to write custom code to overwrite the responses from previous questions. Near the end of our survey, I use piped text to display responses from earlier in the survey. I only want to overwrite these responses after displaying them at the end of the survey, but before they are recorded. I want to do this using javascript/jquery at the end of the survey to avoid the complexity of setting embedded data fields for each individual question. Ideally, the process would be something like this: use the QID of questions from previous blocks to access the responses. Then, change the values that respondents gave, but only at the very end of the study; this is why the responses cannot be overwritten or deleted on the page immediately after the respondent leaves the page. I know we can used piped text to display text from previous questions/responses; how can I modify those previous responses? Here's what I've tried before: 1) Setting a variable to `${q://QID3/ChoiceGroup/Se

Using the Net Promoter survey to accomplish look/feel that I couldn't seem to in Slider or Multiple Choice. Questions: 1) Can gray boxes (0-10) have a light to dark/gradation feel to them? 2) Can gray boxes be made wider or closer together to fill void (keep a slight space as in sample)? 3) Font for Qualtrics sample appears different than default? Please refer to samples. ! ! Many thanks!!!

I would like to get the current time of my participants based on their time zone so that I can use "branches" in survey flow to direct them to different pages/blocks. I need some support in developing codes to do this. Thanks!

I am trying to make it so that participants in my survey can open a modal that displays another web page in an iframe. The problem is on mobile it does not display properly. I have also tried using the `<embed>` and `<object>` tags, and those display the page correctly, but they don't allow scrolling even with "-webkit-overflow-scrolling: touch;" Here is the code I have. I am not very familiar with coding. I simply found this and have tried to modify it for my purposes. <style type="text/css">body {font-family: Arial, Helvetica, sans-serif;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 100; /* Sit on top */ padding-top: 0px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: hidden; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback c

I understand there is a similar question that has already been answered, but that code only works when I don't have any other commas and if I put the div around everything. Could someone please help me with this? I wish to change the commas in the piped text to dashes. Example: "Afterwards, my ${q://QID76/ChoiceGroup/SelectedChoicesTextEntry} controlled what I watched on the Internet."

I am creating a survey on which respondents can select multiple choices from a long list of names. Each possible choice is in the format of "LastName, FirstName." I would like to show respondents a list of their selections for review before submitting the survey. I created a static content text question using the piped text, ${q://QID2/ChoiceGroup/SelectedChoices}, to display the selected choices. This displays the selected choices as a long comma separated string (i.e., "LastName1, FirstName1, LastName2, FirstName2,...). I tried to custom code a function to replace the commas with line breaks using guidance provided here: https://www.qualtrics.com/community/discussion/198/how-to-change-the-separator-for-piped-text My issue is that this replaces every comma, so, instead of: LastName1, FirstName1 LastName2, FirstName2 ... I end up with: LastName1 FirstName1 LastName2 FirstName2 ... Can anyone provide advice on how to replace every other comma? Thank you so much for any help y

I am designing an experiment in qualtrics using java script. For each question in my study, a participant needs to guess the correct answer, type it in, and then hit the space button. Once they hit the space button, a logic checks whether their answer is correct or not. If the answer was correct, a sound should be played for 1.2 seconds, the background color should change into red for a second and then back to white, and lastly the experiment should automatically moves on to the next question. It seems like i am not using the setTimeout logic correctly. no matter what combination of timeout values I used, I couldn't get it to play all the middles steps, including the audio play and red background flash, before the screen moves to the next question. Currently, she background flashes red for less than a second and the screen moves on to the next question. The audio sound simply gets skipped. Even if I change the 2000 an 3000 to 5000 and 8000, still the same result. It is as if these num

I'd like to be able to give a question prompt and allow the respondent to provide sentences or even paragraphs of an answer, but score certain words with certain values attached. For example, if someone uses the word "global" in their answer, I'd like to give them two points. If they also use the phrase "open-minded" I'd like to give them three points. I don't want to give any points for words like "the", "and", etc. Does anyone know how to do this? Currently, the only way I can score words is to have a single-word answer and it must match the "right answer" exactly to get credit.

the video is already uploaded to the library, is it possible to do it?

In a survey I'm running, I have a Pick/Group/Rank Table with Items that are a picture and some associated text! I wanted to format the table into two columns, as there are a number of such Items, so I found the below CSS script (appended to the last Item's html) to do so: <style> .Skin .PGR .DragAndDrop .Items ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; } </style> Unfortunately, this seems to have broken the table's formatting in two ways: first, each Item's image on the right-hand column is no longer sizing correctly—they're returning to their native dimension ration (e.g. 50 px by 80 xp) rather than locking at 80 x 80 like they're supposed to, AND there's a weird issue where the text associated with a given Item ends up on the right column while the image remains on the left (while an odd number of items are in the table)! The only other CSS I'm using is a global script—I suspect this is contributing to the issue but am unsure of the solution: .Skin .PGR

Here is what I am trying to execute: I have 2 designs (we will call them A & B ), each of which I am comparing to 19 other designs in paired comparisons. The respondent will rank each pair on a sliding scale from 0 (completely different) to 100 (identical). Rather than having each respondent go through all 38 pairs, what I would like to do is be able to have the block randomly select 10 of the 19 pairs with design A and 10 of the 19 pairs with design B to show the respondent. The thing is, I need the selected A-to-other design comparisons to be the same "other designs" as the B-to-other design comparisons in order to analyze the data comparatively. And, the block needs to be entirely randomized, showing the selected 20 pairs in random order. Is there a way to execute this?

Hi all, The check boxes in my matrix table (likert, multiple answer) turn white after I select them. I would like the selected check boxes to turn teal (#44b8bd). I was able to successfully do this with the regular multiple and single answer questions with the following code: .Skin label.MultipleAnswer.q-checked, .Skin label.SingleAnswer.q-checked { background: #44b8bd; Background-color: #44b8bd; border-color:#44b8bd; color: #000000; } .Skin label.MultipleAnswer.q-focused.q-checked, .Skin label.SingleAnswer.q-focused.q-checked { background: #44b8bd; } I'm not sure how to make the selected check boxes in the matrix table the same color. Can someone help? Thanks!

Is there a way to increase the width of your survey on screen? I ideally would like the images (which are in the "choice text" boxes) to appear to the left of my sliders, but due to the tight constraint of the survey on screen, everything is squeezed to the middle of the screen and the images appear above the scales (see image attached)--It seems there is a lot of wasted space. !

Hi, I'm developing a survey where I want to insert pictures which automatically diseapper after a few seconds. How do I need to do this? I understanded that this needs to be possible with custom code.