I want to create one single slider in Qualtrics where the min, the MAX and the intervals are chosen according to 4 different embedded data. I need help with the Javascript.
Why do I need one single slider? I need a single slider because I have 16 questions in total, and it is easier to recall 16 questions ID rather than 64 different questions ID.
How should the slider change? I need the slider MAX to be either 1, 10, 100 or 177. Moreover, I always need to have 100 possible choices. Therefore, I need to introduce 2, 1, 0 and 0 decimals, respectively.
Why Javascript? Qualtrics does not allow dynamic custom slider values.
What I have tried so far:
I tried using the default options, but they are not helpful.
I tied looking for resolved questions on StackOverflow but only found this thread: Qualtrics: Dynamically adjusting max value of slider
What your post asks is not a specific question, but rather an entire project. To aid you in this, I have broken up your question into subproblems, all of which can be resolved with simple googling.
First, set up your slider so that it ranges from 0 to 100 - that will ensure that the user always has 100 options. You can then perform a calculation to adjust that to any range you would like based on your embedded data (information how to get embedded data in JS can be found in this post or on the Qualtrics JS API). For more information on how to scale to any rage, here's a good place to start. This calculation is critical as you will use it later on to set the exact value of the grid lines (i.e. intervals) as well as the displayed value (if you opt to display value).
NB: Unfortunately, you are forced to set up the slider to range from 0-100, as you cannot set up more than 20 grid lines. If you could, you could have just set up 100 grid lines and removed the grid lines values and used labels instead for guidance, but there you go.
Next, start with a slider that has a single grid line in the options. You can now adjust these grid lines to your intervals. Specifically, to get the field where these gridlines are defined, get the ul with class name numbers in your slider question. This could look something like this:
let numbers = document.getElementById('QID1').getElementsByClassName('numbers')[0]
This numbers variable will now contain an HTML element with its children being a list of li elements, with each defining a different interval - calculate those interval however your heart desires and add them to the numbers element on the DOM. Tip: to see how this works, play around by examining the DOM when you vary the number of grid lines. Hint: careful when you set the widths (as this is your property to calculate) - for 2 grid lines or 4, all of the li elements have a width of 50 or 25, respectively, but for 11 grid lines the two li elements with classes first and last have width of 5 and the rest of the in-between li elements have a width of 10.
To customize the number that is shown in those intervals (to however many decimal places you want), adjust the innerHTML of those li elements.
Your next step is to make sure that if you do end up showing the value to the participant, then that value can only be a "legit" value. After all, we set the slider from 0 to 100, but it could be 50 to 250 and it must only show values 50-52-54 etc. To achieve that, find the element that displays the value and overwrite it with your calculation (the current value scaled to your desired range). To find the elements, use something like this:
document.getElementById('QID1~1~toolTipBox')
This will look for question with ID QID1 and then look at the first choice's toolTipBox. Overwrite the contest by change its innerHTML.
Finally, don't forget to adjust your data when you process it later on. After all, you have access to all embedded fields in the data, simply scale those to get the actual values (as the ones you will get will most likely be 0-100, though I am not 100% sure how Qualtrics decides what value to save in the data).
Related
I'm working on slider for which I want some odd behaviour. I was looking for solutions and librarys but didn't find nothing that fully fits what I need and I have some problem with building it.
I'm trying to create slider for range value. With steps, dynamic min and max value.
Also I found problematic to work with style effect.
Example:
slider with range from 0 - 50
step set to 10
min value is 16 (start value should be same) - to this point slider should be red
start point should be on 16 (which is hard to make when I want steps)
when value is >16 different color and for everything that is not selected like regular grey.
I was trying to use nouislider and overall everywhere I could. If anyone has any idea or solution I will be grateful for any help.
You can set this up in noUiSlider using the "non-linear ranges" and "padding" features.
Basicaly, you'd set up three ranges:
0 to 16, no step
16 to 20, step of 4
20 to 50, step of 10
You'd then disable the first sub range by setting a padding of [16, 0].
The styling you've described can be achieved by styling .noUi-target with your background colors.
In the code that I'm working in, there is a grid that has one column that represents the data from two of the store's fields using a customized progressBar. The progress is calculated from those two other fields and shown as text on the progress bar in a format like 'x / y'.
My problem is, when the grid is resorted, and the values of the x and y values are equal (i.e., the progress is 100%) for some or all of the rows, the progress column doesn't get updated properly; the progress bars that are at 100% don't move with their respective rows, and/or progress bars appear to be duplicated or go missing after the sort. Note that this would also happen where the progress is 0 for one or more rows or any other scenarios where the progress of 2 or more rows is the same, but the values used to calculate the progress for the respective rows are different.
Here is a fiddle that illustrates the problem: https://fiddle.sencha.com/#view/editor&fiddle/35c5
Is there some way that I can force the entire progress column to rerender whenever the grid is sorted, and not just the ones where the calculated progress value has changed, so that all of the progress bars always appear correct?
I managed to solve this issue by subtracting a small random amount (in the range 0, exclusive, to 10e-8, inclusive) from each of the calculated values (or adding it where the value is 0). (Where the value is set to 0 due to both contributing values being 0, no random value is added, as it is unnecessary in that case.) This ensures that every value in the grid will be different and will, therefore, follow its respective row when the order of the rows changes due to sorting or updating.
I'm trying to make a column graph in Highcharts and it's not working out too hot. I'm essentially trying to give the column a background color that the data point can overlay. I want the effect of stacking without actually stacking if that makes sense. Any thoughts on what I can do?
Essentially I want it to look like a progress bar... there should be a distinct coloring between the top of the bar and the top of the graph itself. I've already tried stacking: percentage, but to no avail. Thoughts?
There are three options that come to mind:
1) To achieve the 'effect' of stacking, actually stack it: use a dummy series with a color set to the background color that you want, and set with values to fill the gap from the actual data.
Example:
http://jsfiddle.net/jlbriggs/Zf8C7/5/
[[edit for questions
The order of the series does not matter for this to work, and neither does the legendIndex.
What does matter, if you are using multiple series, is the stack property for each series - http://api.highcharts.com/highcharts#series.stack
Each group will need its own stack, and the dummy series and real series within each group need to be assigned to the same stack.
In addition, you need to have one overall max value.
Updated example:
http://jsfiddle.net/jlbriggs/4d9tm6b8/4/
(keep in mind, there are much smoother methods to process and build your data - this is a quick and dirty example whose purpose is to show how to properly use the stack property to do what you need)
]]
2) plotBands, as mentioned above
3) using the alternateGridColor property and set your data to skip an x axis
value between each point.
Reference:
- http://api.highcharts.com/highcharts#xAxis.alternateGridColor
What's the principle of calculating growth/decay percentage if I have a set of numbers in an array, just like [20,10,50,90,100]? Look at the percentage changes on the image to get the idea of what I want to calculate.
Is it enough just to get first and last values and compare them, or do I need to find an average of all values with some formula?
I am trying to design a little game using JS, and what I want it to do is make a random number say... 1-100 and then randomly scatter the dots (I used periods with the font size at 200) on the screen. By random, I just mean that I don't want them to be arranged in rows and columns. What I have so far achieves all but scattering the dots, so how do I do that?
var i=0;
var inhtml="."
var num=10
function exe(){
i=Math.floor(Math.random()*100)
//alert(i)
while (i<=100){
document.getElementById("dot").innerHTML = inhtml + "."
inhtml = document.getElementById("dot").innerHTML
if (inhtml.length>num){
inhtml=document.getElementById("dot").innerHTML+"<br />"
num=num+20
}
i++;
}
}
Instead of using a single element containing several periods at a large size, I'd recommend using separate elements for each dot. Then, (besides not having to use 200px periods), you can use CSS to position each element however you want. I have an example here.
Edit: I don't know what the exact problem with getting the dots to not overlap you're having is, but you basically need to do this:
First you pick a position. Then, you check that position against all the other positions (which you'd probably want to do using Manhattan distance). If the point is valid, you use that point and add it to the array of taken positions. Otherwise, go back to the first step.
You may want to check your syntax errors before progressing; I do not know whether you copied all of your code, but you are missing semicolons at the end of your lines. Syntactical issues aside, one possible way to achieve what you describe would be to assign the x- and y-coordinate of each point to a random number. Examination of the code reveals that only the initial value of i is assigned to the value of random(). Incrementing i will make the coordinates of future points dependent on the initial value of i, which is something you may want to take into account. But nowhere in your code do I see you changing the position of the each element based on the values you generate.
I strongly suggest that you use the HTML5 Canvas instead of attempting to move HTML elements; the latter would be cumbersome and lead to messy and inefficient code. If you still want to stick to the method you are trying to use now, check to make sure that the CSS display property is set to block for these elements. You are using the getElementById() method, which is not very useful in this circumstance, since IDs are unique in HTML files. I would suggest using getElementsByTagName() and using those returned elements with a specific class attribute instead.
You might want to look at the HTML 5 Canvas. It allows you draw arcs (aka circles) In any postion, size, and fill color.
Look here for details, here for a tutorial, and here for a demo.
To not be bound by the browser's text layout constraints, you pretty much have to absolutely position your dots:
<div style="position: absolute; top: {random number}; left: {random number}">.</div>