I’ve used this in the past to show the text input when the checkbox is selected and to hide when unselected. Try adding the below to the question’s JavaScript in the OnReady section:var qid = this.questionId;jQuery('#'+qid+' input:text').hide(); jQuery("#"+qid+" [type='checkbox']").change(function(){ if(jQuery(this).prop("checked") == true){ var v1 = jQuery(this).attr("id"); jQuery("[id*='"+v1+"~TEXT']").show(); }else{ var v1 = jQuery(this).attr("id"); jQuery("[id*='"+v1+"~TEXT']").val(''); jQuery("[id*='"+v1+"~TEXT']").hide(); } });
@giuliopalma I would first recommend to remove all your CSS and add rules one at a time to ensure they are affecting your survey in the way you want. What I think is happening is that the Groups are defined to be 240px and the Groups go to a new line when they are too wide to fit in one line in the Groups Container. I think the 240px takes up more of the available screen space the further in the zoom and so a second line gets added when you zoom in. To have your widths be based on screen size instead of pixels, you can try updating your CSS to use percentages, like in the below:.Skin .PGR .DragAndDrop .Group {width: 20% !important;}You might also want to include some CSS that adjusts the width of the Group Headers and the items once they are placed in the Groups. Also, since your items are pictures, you may want to hide the rank once placed in the Group..Skin .PGR .DragAndDrop .Group h2 {width: 100% !important;}.Skin .PGR .DragAndDrop .Items > ul, .Skin .PGR .DragAndDrop .Group >
@Raf here you go. I added the keith-wood calculator from the other thread in there too.
@Lisa M If you would like to have each submission count as a new response in your data, I recommend not using Loop and Merge but instead using the Survey Flow to redirect respondents back to the Anonymous Link of your survey if they have another submission. See my screen shot. Also be sure to "Customize" the End of Survey element so that it overrides the default End of Survey settings and redirects these respondents back to the Anonymous Link URL.If you would like to have all of the submissions contained within a single response, Loop and Merge will do this, but the Survey Flow will not allow respondents to exit the Loop and Merge early. I believe that would have to be done using the method where JavaScript sets an Embedded Data field value and all the questions within the Loop and Merge block have Display Logic to only display if the Embedded Data field does not equal the value that is set by the JavaScript.I think of it this way - The Survey Flow goes from top to bottom, element by e
Another solution that I think is closer to your original requirement is to use the Survey Flow to branch respondents to an End of Survey element that redirects respondents back to the Anonymous link of the survey. This way, each submission will be a new record in your data. Set up your Survey Flow like the below and in the End of Survey element, click 'Override Survey Options', then "Redirect to a URL”, and then add the Anonymous link of the survey to this field.Also, for the Loop and Merge option, I am a little confused by the described implementation. I don't see a way to implement step 4. Maybe you could elaborate with screen shots?In the past, I have used the solution described in this thread to allow respondents to exit a Loop & Merge block based on a survey question in the Loop & Merge. It uses JavaScript to set an Embedded Data field inside the loop and uses that Embedded Data field in display logic for every question within the loop.
@maranhao Try using the Embedded Data options to change the field to ‘Text Set’ and republish your survey. This will make the Embedded Data field usable in breakout reporting.
Since you are using Flatpickr, you can use the Monthselect plugin. To give it a try, first add the below to the survey’s header:<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" /><link href="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/style.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/npm/flatpickr"></script><script src="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/index.js"></script>Then, add the below to the JavaScript of the Text Entry question in the OnReady section:jQuery("#"+this.questionId+" .InputText").flatpickr({ disableMobile: "true", plugins: [ new monthSelectPlugin({ shorthand: true, dateFormat: "m/Y", altFormat: "F Y", theme: "material_blue" }) ]});For Mobile devices, to avoid using the phone's built-in calendar which would include days, disableMobile: true can be added to flatpickr, like
Thank you for providing the links to the test surveys. On my end, the Group containers are the same width when viewing both test surveys. Are you reviewing both test surveys on the same screen? The Group widths are being controlled by this CSS line:.Skin .PGR .DragAndDrop .Group { width: 20% !important;}If you wanted the Groups to be the same width across different screen sizes, you could try setting the widths in pixels instead of percentages. Maybe like:.Skin .PGR .DragAndDrop .Group { width: 200px !important;}
@giuliopalma hmm it is hard to say just looking at the CSS code. If you can provide a QSF or Preview link to your survey, it can be more closely investigated.
Hmm on my end, when I download the responses In Progress with RelevantID enabled, Q_RelevantIDDuplicate, Q_RelevantIDDuplicateScore, Q_RelevantIDFraudScore, and Q_RelevantIDLastStartDate all exist in the export with values included. You could use this export to determine which responses In Progress could be closed.According to the support page, you can also use these values in Display Logic to screen out fraudulent responses.
@BrianGunther Glad it helped! You're correct that Quotas do have their risks with respondents taking the survey at the same time, per the support page:"Warning: Quotas aren’t always foolproof. Quota information is not saved until the respondent submits their survey, giving respondents time to change their answers or deliberate over their choices. Because more than 1 person can enter the survey at a time, there is a chance that multiple people submit answers at the same time, possibly resulting in going over quota. For this reason, we caution against users relying exclusively on quota data for providing any monetary rewards or compensation to survey respondents.I think the only way to guarantee that seats are not overbooked is to use a Web Service instead of Quotas like AnthonyR recommended, but I have not yet needed to go down that road. One idea to lessen the potential overbooking issue with Quotas is to direct respondents to a "Wait List Signup" block when you are ~5% short of your a
If you work in Google Chrome, you can try enabling the experimental "Auto Dark Mode for Web Contents"Launch Google Chrome Type "chrome://flags" in address bar and hit Enter Search for "dark mode" in the search box at the top of the Experiments page. Click the box to the right of "Auto Dark Mode for Web Contents" and select "Enabled" as the default settingYou can also use an extension like “Dark Night Mode”
Original comment:Hi there, I found a page online that touches on what you are trying to do.https://support.remarkety.com/hc/en-us/articles/360029681351-How-to-add-a-hidden-preview-text-to-an-email-#step-1-0-0In configuring the Qualtrics Mailer, click on the Source code button "<>" and insert the below code for the preview text at the top of the editor:<div style="display: none; max-height: 0px; overflow: hidden;">Insert hidden preheader text here</div><!-- Insert &zwnj;&nbsp; after hidden preview text --><div style="display: none; max-height: 0px; overflow: hidden;">&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;</div>Update the "Inser
Something that's worked for me before is to use Branching at the top of the Survey Flow to set Embedded Data fields with CSS values. Then in the Header, the CSS values are piped into CSS properties via a Style tag. So if the Survey Flow was set up like the below and “Brand” was included in a Query string from the URL: And in the Header:<style>.matrix .matrix-table .matrix-scale-points-item.hover {border-bottom-color: ${e://Field/Color1};}</style>
Original comment:Hi there, adding the below to the Survey's Header should work to change the background color, where "Color1" is an Embedded Data field that contains a hex code:<style>.Skin, .SkinInner {background-color: ${e://Field/Color1} !important;}</style>
Hi @IsaN99 , I gave it a try with a Matrix Drag and Drop and think the below comes close to your description. I used CSS to extend the size of the Selections + Answers containers and adjusted the size of the elements within those containers. Using Classic layout, create a Matrix question and set it to Drag and Drop. Set it to 18 statements, 8 scale points, and fill up the statements with your pictures. Then, add the below CSS to the Style section of the survey's Look & Feel:/*full screen width*/.Skin .SkinInner { width: 99% !important; max-width: 99% !important;}.Skin .QuestionOuter.Matrix { width: 99% !important; max-width: 99% !important;}/*full container widths and selections and answers on own row*/.JFEScope .DND .Choices { width: 100% !important;}.JFEScope .DND .Answers { width: 100%;}/*statement adjustments*/.JFEScope .DND .Selection { width: 5%; margin: 1px !important; list-style: none !important; display: inline-block; padding: 1px !importan
@cturtle The 50 value can be blanked out by setting the Constant Sum field to ‘’ after the value is updated to 50 by the noUiSlider updating function. Also, you might want to have the noUiSlider handle not display until the track is interacted with so I added some code for that in the OnReady section. Below is the full JS for the question:Qualtrics.SurveyEngine.addOnload(function() {//uiSlider var vSlider = document.getElementById('uiSlider'); noUiSlider.create(vSlider, { start: 50, step: 1, direction: 'rtl', orientation: 'vertical', range: { min: 0, max: 100 }, format: wNumb({ decimals: 0 }), // Show a scale with the slider pips: { mode: 'positions', values: [0,10,20,30,40,50,60,70, 80,90,100], stepped: true, } });//update constant sum answer choice var inputNumber = document.getElementById('QR~'+this.questionId+'~1'); vSlider.noUiSlider.on('update', function (val
@Henri from ilem hmm there are a couple implementations of the Not Applicable checkbox for Star Sliders on this thread, but they all should clear out the stars when the box is checked. Not sure what you are running into, but attached is a QSF where 3 of the implementations are working for me:Star sliders on their own row and then adds a Not Applicable checkbox to each star slider that will clear out the stars when checked, and uncheck when the stars are selected. Supports any number of star sliders. Star sliders on same row and then adds a Not Applicable checkbox to each star slider that will clear out the stars when checked, and uncheck when the stars are selected. Supports any number of star sliders. Star sliders on their own row and then adds a Not Applicable checkbox to the 3rd star slider that will clear out the stars when checked, and uncheck when the stars are selected. Also reads "Not Applicable" for English language and "NA" for French language.
Adding the below CSS to the Style section of the Look & Feel is working on my end:.Skin .Matrix table td, .Skin .Matrix table th {border-bottom: 1px solid gray;}
@DKICM hmm my hunch is that the piece of code that clicks the "Go Back" button of the hidden dialog might need more than 5ms after the PreviousButton click to work consistently. Try updating like the below:<script>jQuery("#PreviousButton").click(function() { setTimeout(function() {jQuery("#Page > div > div.PageErrorDialog.TOC > div.ErrorButtons > button:nth-child(1)").click(); }, 500); })</script>
In the Survey Flow, I do not see an element called "JavaScript". The code looks good though. I’ve edited it to get the ID of the Text Entry question. Try adding the below to the OnReady section of the Text Entry question's JavaScript to force lower case.var emailInput = document.getElementById("QR~"+this.questionId); emailInput.addEventListener("input", function() { this.value = this.value.toLowerCase(); });
You can also do this with the Distribute Survey option of the XM Directory Task Workflow.edit: beat me to it Deepak!
Hi @giuliopalma , I think what you're describing is sort of in between a Hot Spot and Heat Map. With Hot Spot, regions can be visible to the respondent but the click count can't be limited. With Heat Map, regions are not visible to the respondent but the click count can be limited.A workaround that I think might come close to what you're looking for is to use the click count limiting of the Heat Map question but change the Heat Map Circle (click indicator) to resemble the Regions of the Heat Map.To give it a try, create a Heat Map question, add your picture, define the regions, and set the number of clicks to 1. Next, add the below CSS to the Style section of the Look & Feel to change how the Heat Map circle looks. In the below, I changed the circle to be square, gray, black bordered, and larger/smaller based on screen width. Edit the height and width values as needed. You might also want to do this as a single select Multiple Choice question..heatmap-circle { background: #d3d3d
@MadhurSingh I see in the other thread that your use case is a little different than what my code was doing. The code I posted is about when all Carousel statements receive an answer, while the code you were looking for has to do with when the last statement is displayed to the respondent. I am glad you got helped! For anyone else, it doesn't look like the code I posted is compatible with Carry Forward, but the below revision that checks if the number of selected choices is equal to the number of available choices is working on my end if interested in hiding the next button until all Carousel statements receive an answer.//hide next buttonjQuery("#NextButton").hide();//define buttons to clickvar elAnswerButtons = document.querySelector('.CarouselAnswerButtonList');//function to check selectionsvar that = this;var selections = 0;function checkSelections() {var allchoices = that.getChoices().length;var allselchoices = that.getSelectedChoices().length;console.log(allchoices);console.log(a
Hi @MadhurSingh what the above code is doing is counting the number of times that the Carousel buttons are clicked and then advancing the page once the buttons are clicked the same number of times as there are cards.This is workable for Single Selects (as long as the respondent is not going backwards to change answers to previous statements) since it advances the Card after each click, but not ideal for Multiple Selects because it is not known how many times the respondents will click the buttons for any statement before wanting to see the next one.You could create JS that uses getChoiceValue to check if each statement has received at least 1 answer and then show the Next Button once each statement has received an answer. To give it a try, create a Matrix question with 5 statements that is set to Multiple Answer and to Carousel. Then, add the below to the question's JavaScript in the OnReady section://hide next buttonjQuery("#NextButton").hide();//define buttons to clickvar elAnswerBu
Already have an account? Login
Enter your 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.
