Please how do I make "In March, what are the chances out of 100 that the yield will be below [0.90 × Y1] bushels per acre when you harvest in [HRVSTMO]" lie horizontally on the sliding bar instead of it being at the left side of the bar. see attached image(NB: I am using Constant sum as question type)thank you

Hi there, if you still need, I would recommend using the Slider question type as it is already configured to have the statements lie horizontally on top of the slider track. Your statement text looks like you might not need to sum across the 5 statements, but if you do, you could put in some custom validation so that the respondent can only proceed if the sum of all the sliders is equal to a certain amount or they will see an error message.This can be put in place by creating a fake next button, hiding the real one, and performing a validation check using JavaScript which will either click the real Next Button if successful or display a Custom Error message if not. The fake next button will have CSS so that it looks like the real one. First, create a slider question that has 3 tracks.Then, add the below to the question's JavaScript in the OnReady section. If the tracks sum to 100, the real next button is clicked. If they do not, a Custom Error message is shown://define values to capturevar qid = this.questionId;var track1 = document.getElementById(qid+'~1~true-result');var track2 = document.getElementById(qid+'~2~true-result');var track3 = document.getElementById(qid+'~3~true-result');//create fake next button, needs CSS to mimic real oneconst next = document.getElementById("NextButton");const newnext = next.cloneNode(true);newnext.id = "newnext";jQuery(newnext).appendTo("#Buttons");jQuery(next).css({"visibility":"hidden"});//validation checkvar newnextclick = document.getElementById("newnext");jQuery(newnextclick).on("click , touchstart", function() {var slider1 = jQuery(track1).val() || 0;var slider2 = jQuery(track2).val() || 0;var slider3 = jQuery(track3).val() || 0;var slidertotal = parseInt(slider1)+parseInt(slider2)+parseInt(slider3);Qualtrics.SurveyEngine.setEmbeddedData("slidertotal", slidertotal);if (slidertotal == 100) {jQuery(next).click();}else {var vale = document.getElementById("QR~"+qid+"~VALIDATION");vale.style.display = "block";vale.innerHTML = "Custom Error Message - Must sum to 100"}});Then, add the below CSS in the Style section of the survey's Look & Feel. The below is for Classic layout and references the id of the newly created fake next button:#newnext { border: none; color: #fff; font-size: 16px; padding: 8px 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; cursor: pointer; margin: 0; text-align: center; text-decoration: none; -webkit-appearance: none; transition: background .3s; background-color: #007ac0;}Finally, if you want to capture the slidertotal as its own field, create an Embedded Data element with a field called "slidertotal" and place it at the top of the Survey Flow.

Custom sum sliding bars | Experience Community

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded