In Qualtrics, I would like to establish a relationship between two sliders (using the "Draggable Sliders" question type).
One slider would dynamically decrease the value of another slider by the same amount. The user should be able to adjust only the first slider, which would automatically adjust the second slider and its associated value (which should be displayed and updated with the dynamic adjustment).
Does anyone have a suggestion for the javascript necessary to establish this type of relationship between two sliders in Qualtrics?
Right - you could start with the custom sliders, but that won't dynamically update. It will only force a constant sum.
If you go to innovation exchange linked below you can download an example of survey that does this though.
You have to upload the survey to qualtrics, and the only way at least I'm familiar with this is to go into an existing survey and go to the advanced options. You'll find "Import Survey," which is what you want. Import that QSF file and you'll have a version of the slider to play with.
This is the link with more info and the qsf file.
http://www.qualtrics.com/innovation-exchange/dan-ariely-tradeoff-question/
Here's a link with a preview I just mocked up. Not pretty, but I'm sure you can toy with the css.
https://az1.qualtrics.com/jfe3/preview/SV_6lIzOgpiSm91X4F
Related
I have been collecting product prices for a market investigation project in my University. So far I have been looking at very basic pages or forms where I could extract every product´s name and price with a simple js, but I have encountered many pages like this one, where upon scrolling there is an event listener that updates the html to only have the code of the products the user can see.
My knowledge in javascript is not this advanced, and I can´t figure out how to make the html show all divs at the same time, so I can then extract them with one script.
Try to use Position: Sticky in your css file
I have an issue that I can't seem to resolve. Even though my current job does not call for integration, I have been doing a bit of it for a specific project.
BACKGROUND:
Basically, this is what I am currently working on: when I click on my fake button, it creates a box - more clicks, means more boxes which are created. However, the boxes need to be able to do one more thing than simply replicate - each one of them needs to allow me to drag and drop an image into them. So, if I click 5 times on the fake button, the 5 new boxes needs to allow me to drag and drop 5 different images. Currently, I have a box there by default (as a testing ground).
PROBLEM:
I cannot seem to duplicate the boxes correctly. I have tried several things, including switching classes to id's and what not to try and merge several pieces of coding together. Ultimately, I need to be able to place any images in the draggable boxes. 5 boxes, 5 images dragged into them etc.
NOTE 1:
I cannot use server-side coding, as I don't have access to the server. All of it has to be client side.
NOTE 2:
The images I bring in are from outside folders - from the desktop (dragged and dropped).
NOTE 3:
I watered down the code in the fiddle to only have the pieces of coding relevant to what I am attempting to do. However, the scripts there don't work within the fiddle, since I had to take them out of the environment. Though, they do work within the correct environment.
FIDDLE:
[My link] https://jsfiddle.net/t9dq3w28/10/
...
I'm looking to put together a dynamic Web form where, when the customer selects options from a series of radio buttons, additional items will be added to the main image.
Think of it as if you had a Photoshop layer and all the other layers above could be hidden or revealed dependent on the customer's input on the form.
So, two questions...
I assume I should be using JavaScript for this form. Being a beginner with JavaScript, is there a way for me to tell it to change the image based on multiple inputs selected by the customer? The base image would be the same but I would be looking to hide/reveal multiple "overlays" on top of the base image.
Is this something that React can handle or should I be looking at something like Angular?
Thanks for your assistance with this question!
I can answer for number one by providing a live example: http://codepen.io/zvona/pen/mVQWvX
It consists of three components, FormControls, Blocks and App. Names are quite self-explanatory and so should be code itself. There may be some minor mistakes in code since it's quite quickly written on the fly, but it should give you insight on how this can be achieved with React.
I have a web form.
I have a group of about 20 images displayed on the page. I want the user to be able to drag five images into a holding area, and to be able to arrange their order.
On submit, I'd like the names of those images, and their order, to become part of the $_POST data.
I'd appreciate it if someone could point me to a working example of this functionality that I can reverse engineer, point me to an open source project that offers this functionality, or can provide the code to do this.
I am using PHP, with jquery and js
Thank you.
If already using JQuery, go for JQuery UI.
They have actions called DRAGGABLE and DROPPABLE which you apply to divs. It's a very elegant, easy to use setup.
Examples:
Look to the right for more examples
http://jqueryui.com/droppable/
As for posting, at submit time you can iterate through the DOM, find the images in the "holder div" and post that OR you can hook into the event that fires every time an item is 'dropped' and write that to a hidden or other form element what is in each box.
What I want to achieve is as follows:
For example, there is a symbol which represents a table on a web page, a user can drag this element to any place on the web page, when the user looses the cursor, a dialogue box will pop up to ask the user to input values of attributes, for example,the number of columns, the number of rows, after the input, the corresponding table will come out at the place where the user chose. Of course, the symbol which represents a table is still at the original place. It is like a web version of dreamweaver. How to do this with Javascript?
If your question is how to start researching this feature I'd start with:
JQuery to get started with fancy yet easy javascript functionality
JQuery UI: Draggable, Dialog, etc
To actually develop the feature, if you don't know where to start, start small. Create a very basic web page with maybe just an icon and a button and then write some javascript to do something minor like display a dialog and show the result. Slowly start adding things like dragging something around, etc.
The JQuery UI stuff has lots of demos that you can start out with as a base to start customizing.
Warning: The first time I hit the JQuery UI Demos page I wasted at least a couple of days playing with all their cool stuff. It's so easy because the source is right there and you can also see it working in the browser on the demo page.
Did you look at the jQuery UI demonstration pages? The simple photo manager demo contains all the major pieces you'll need: Dragging an item, handling the drop event, doing something custom on drop. The revert demo may also be of interest
Begin by defining the requirements of your project. Break it down into smaller tasks and milestones. Then some learning and research on what javascript and frameworks like jquery can provide. Also check for existing solutions or components that you may be able to use and reduce your development efforts.