Hi all, I'd like to display question separator in the whole survey. In the old Look & feel editor, it was easy. Unfortunately, I can't find the way while using the new one. Therefore I tried some CSS code. I ended up with the one below, however, it doesn't work at all: .Separator{ border-style: solid!important; border-width: 5px!important; border-color:green!important; height: 5px!important; color:green!important; background-color:green!important; display:block!important;} I've also tried the code by @Shashi from this discussion, but nothing happened. The question separator is there and its HTML looks like this: <div id="QID10Separator" class="Separator" data-runtime-show="runtime.SeparatorDisplayed"></div> I use the classic layout and rthe compact spacing. Thanks for any ideas!
Hi all, I tried to implement an onclick function for the next button in a survey which was designed using the old Look&feel editor (theme: Minimal - blue). MWE: `jQuery( "#NextButton" ).click(function() {alert("OK");});` I tried to solve this and wasn't succesful, but I found out following: 1. Other codes using this jQuery also doesn't work (e.g.: `jQuery(".NextButton").css("background-color", "yellow!important");` or `jQuery(".NextButton").hide();`) 2. Using the classname instead of the ID didn't help. 3. ID and class names were correct for actual survey. (I've checked this using inspector) 4. There are no errors in the console log (in both Mozilla and Chromium). 5. jQuery for other elements Would anyone have some suggestions what else could I check or try? I'd appreciate also some other ways how to create a function which will run after clicking on the next button. Thanks for any suggestions!
Hi all, I'd like to create a function which would put the number of times printscreen key was pressed into the embedded data. However, I found out that I'm not able to change the value of the embedded field from my event listener. I tried to change HTML of a given element from my function instead and it didn't work neither. There are no errors in the console. Both lines of the work in case they're outside the event listener. Would anyone have some ideas how to solve this? Qualtrics.SurveyEngine.addOnload(function() { var that = this; var id = that.questionId; jQuery("#" + id + " .QuestionText").append('<div id = "my_n">my_n</div>'); jQuery(window).focus(); jQuery(document).keyup(function(e) { if (e.keyCode == 44) { Qualtrics.SurveyEngine.setEmbeddedData('print_screen', "TEST"); jQuery("#my_n").html("TEST"); } }) });
Hi all, I'd like to include the Facebook like button to a survey with multiple language versions. I want the text of the button to be always in the same language as the rest of the survey. Therefore I detected the language and place it to the URL of the source script (`<script async defer crossorigin="anonymous" src="https://connect.facebook.net/'+ lang + '/sdk.js#xfbml=1&version=v3.0"></script>`). It works, but only in case, the language is selected on some of the previous pages. When I change the language nothing happens, even though it seems that the button is drawn again (it disappears for a short moment and appears again) and I'm able to `alert` the correct language. I've tried to dynamically modify the size of the button and this works. Therefore I suppose that the problem is that there is already loaded another script with another language. Unfortunately, I have no idea what to do with this. I have read that if I removed the script, the codes would stay in the brows
Hallo, I have a file with scripts stored in the files library. It is used in many surveys created by different people. I've written a new version of one of its functions and therefore I need to replace the current file with a new one. So far I have been doing this by clicking "Edit" and "Choose another file from your computer". Unfortunately, this time it doesn't work. I found out that the problem is in this line of my script: `jQuery('#scriptDiv').html('<script async defer crossorigin="anonymous" src="https://connect.facebook.net/'+ lang + '/sdk.js#xfbml=1&version=v3.0"></script>'); ` When I remove it, everything works fine. I'm also able to upload my script with this line as a new file. However, this doesn't solve my problem since I need to use the original URL which is already used by many surveys. Would anyone have an idea what to do with this?
Hello, I'd like to have my repeating background image everywhere outside but not directly above the `.SkinInner`. I don't care much whether the background image will be also bellow the `.SkinInner` or whether the `.SkinInner` will always end at the very bottom of the page. Unfortunately, I have following troubles with this. When I put this image into the CSS of `#SurveyEngineBody`, it is also above the `.SkinInner`. #SurveyEngineBody {background-color: #f0f0f0; background-image:url("my_URL"); background-repeat: repeat; background-size: 200px 200px; min-height: 90%;} ! But when I put the image to the CSS of `.SkinInner`, it is cut in the bottom: #SurveyEngineBody {background-color: #f0f0f0;} .SkinInner {background-color: #f0f0f0; background-image:url("my_URL"); background-repeat: repeat; background-size: 200px 200px;} ! Therefore I removed both footers. It looks OK, but only when the `.SkinInn
Hallo, I'd like to change the borer of text-entry box from blue to some else. The box is attached to one of options using the Qulatrics "Allow Text Entry" function. This option is pre-selected in the beginning. Ideally I'd like to have orange when the box is focused and light-gray otherwise. I've tried these two CSS codes: li.Selection.TextEntryBox.InputText {border-color: red!important;} li.Selection.TextEntryBox.InputText:checked {border-color: red!important;} li.Selection.TextEntryBox.InputText:focus {border-color: #f79013!important;} The first two do nothing and the second one works only if another option is selected. You can see it in following images: 1) The box is NOT focused: ! ! 2) The box is focused: ! ! Note: I use the Minimal blue template. Thank you for any ideas!
I'm using following code to get actual choice for multiple choice question: var selectedRecode; this.questionclick = function(event, element) { if(element.type == "radio") { selectedRecode = this.getChoiceRecodeValue(this.getSelectedChoices()); alert(selectedRecode);}} It works fine now, however I'd like to place this code to another question on the same page while the code will be still related to the original question. Therefore I want to put the question object into a variable and replace `this` in code by this variable. Unfortunately I haven't found out how to get the question object. I could probably send my recorde to embedded data each time, but I think there must be some way how to get the object of the previous question... I've tried following modification of my original code. There was no error, but nothing happened when I clicked on a choice. var Q = jQuery( "#QID460" ); var selectedRecode; Q.questionclick = function(e
Hi community, I have a multiple choice question with choices arranged in several columns. It looks great on computers, but unfortunately terrible on devices with small screen sizes. Would anyone know, whether and how to get different number of columns at different devices according to their screen size? Thanks in advance
Hi all, first question of my survey is a descriptive text question containing few paragraphs of text and an image. In a mobile preview there appears a slider bellow this question even though neither the image nor the text itself don't exceed the width of the "device screen". Would anyone know how to get rid of this "slider"? I've tried to modify ` max-width` of `.QuestionOuter`, `.Questions`, `.QuestionText` or `.InnerInner` using `%` or `vw`, but this didn't help. !
Hi community, I inserted images with transparent background to my choices in some multiple choice questions. When user clicks on the choice, the background of the image changes which would look very nice. Unfortunately, there "appear" one or two white lines at the border of the image which looks terrible. Therefore I don't want to have these lines there. Would anyone have some idea how to make them disappear (and still have colored background of selected choice)? ! I'm quite sure that there are not such lines in images themselves. It happens with images from many different resources. I have zoomed some of these images as much as I could and there were no white lines. Moreover I've obstructed borders of one of these images with eraser in Photoshop and it didn't help. And I'm also not the only one with these lines as you can see here. I use the "Minimal - blue" theme and don't want to change it since I have already done a lot styling within this theme.
Hi community, I use matrix table with text of "row labels" above particular rows. I'd like to: 1) add some space bellow (and above) radio buttons (there where the red dots are on the following pictures) ! I've tried to change margin, padding and height of the ChoiceRow, but it didn't do what i wanted. 2) change text of all "row labels" I've tried this: `.Skin label.ChoiceRow{color:red;}`, but nothing happened. Note: I use the theme "Minimal - blue" Thank you for any ideas
Hello everyone, I have modified style of my radio buttons and check-boxes using CSS while using the Theme "Minimal 2014". However, I didn't like that this theme switches my horizontal multiple choice questions to their vertical versions from the certain width of the browser window. Therefore I switched to "Plain Jane 2014" and it did not apply my CSS style to any radio buttons and check-boxes no matter on question type. All other CSSs are still working. I have tried also the "Blank" theme and radio buttons were same as with "Plain Jane". Would anyone know how to switch to the same type of radio buttons from "Minimal 2014" but use the "Plain Jane" theme? Eventually, disabling switching to the vertical version of multiple questions would also helped (as I asked here). Thanks for any ideas Here is my CSS: Skin label.q-checkbox,.Skin label.q-radio{border:3px solid #3A2310;} .Skin label.q-radio.q-checked{background-color:#695224;} .Skin label.q-checkbox.q-focused,.
I realized that my CSS code works in some themes only. I think that seeing defaults CSS stylesheets of particular themes might help me to solve this problem out. I found one of them in this discussion, but I'm not able to figure out where to find the rest. Would anyone advise me where to find these stylesheets?
Hallo, I want to change the default responsivity of a horizontal multiple choice question. 1) I'd like to decrease the minimal spaces between particular radio buttons. If I decrease the width of my browser window the distances between particular radio buttons decrease from this ! to this: ! and then the question is switched to the horizontal version for mobile phones. ! However, I'd like to reduce the spaces between my radio buttons even more before it switches to the horizontal version. How to do it? (I have tried to change some CSS parameters based on this discussion and additionally the width and left or right versions of some of them, but nothing happened.) 2) I'd like to add some custom CSS/JavaScript code for the horizontal version of the question. Therefore I need either to set when exactly the question will be changed from horizontal one to the vertical one or at least find it out. I'm able to set similar condition de novo, but I don't know whether and how can I edit a defa
Hallo, I'd like to change the basic background color and the background color on mouseover of the dropdown (multiple choice question). I tried to guess which line form this style-sheet could change it, but I was wrong. (I tried this one: `.JFEScope .Skin .q-matrix .dropdown-arrow .dropdown-down {background-color: #F3E0BD;}`) I also found this code: `.Skin .MC .ChoiceStructure .Selection {background-color: #F3E0BD;}` which should change the basic background color here but it doesn't work. Thank you for any help
Hello, I want to change padding using following CSS code. However, I want to apply it to some questions only. Is there some way how to define a CSS class for questions in Qualtrics or to change CSS style in some question only using its ID or something like that? Thank you very much for any ideas in advance. .Skin .Separator { margin:0px 20px; } .Skin .QuestionText { font-size: 100%; padding: 2px; } .Skin .QuestionBody { padding:0px 1px 0px 1px; } .Skin .MC .MAHR .QuestionBody table td span.LabelWrapper label, .Skin .MC .SAHR .QuestionBody table td span.LabelWrapper label { padding-bottom: 5px !important; }
Hello, I want to create piped in javascript and then use the value which is stored in the corresponding element/field in my script. I have tried to concatenate the required string using "+", but it doesn't work. Would anyone know how to solve this? Thanks for any ideas This doesn't work: var i = 1; var x = "${q://QID4/SelectedAnswerRecode/"+i+"}"; alert(x); //the message box is empty or var myName = "someName"; var efield = "${e://Field/" +myName+"}"; alert(efield); This works: var x = "${q://QID4/SelectedAnswerRecode/1}"; alert(x);
I'd like to see some of my variables while developing my code. (Currently I export them into embedded data fields which is very slowly and doesn't work well for all variables.) In many questions here and also elsewhere command `console.log()` is mentioned. I have tried it, but I can't find the log anywhere in Qualtrics. I haven't found the answer to my question anywhere. Could anyone show me either where to find the console log or some other effective way to see values of my variables?
Already have an account? Login
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.
Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.
Sorry, our virus scanner detected that this file isn't safe to download.
