I would like to add a button to display more information if the respondent wants to see. By default the details will be hidden and on clicking the button it should toggle between displaying the details and hiding it again. How can it be done?
I have found the code on how to do it using JS but dont know how to make it work using Jquery.
It is the fourth answer in the link..
Hide and show text by click on div
Page 2 / 2
Hello everyone!
Please help a complete noob!!
I am trying the code provided by TomG in order to shorten my Participant Information Sheet on a survey.
I want to have a list of questions on the page that appear with a button "Answer" next to each question. The idea is that participants can see the long answers to the questions only if they want to. Hence, only if they click will the long info appear.
I used both the provided JS and HTML for each Text type of question. I can see them work on Preview Question but not in the preview survey or as a fake participant.
One example JS on a question is 
The corresponding HTML is:
Please help! I am trying to have the list of questions on one page with clickable answers without participants having to use display logic as this makes the study longer for participants.
https://community.qualtrics.com/XMcommunity/discussion/comment/49793#Comment_49793The event handler (
jQuery("#button").click(... ) should be inside the addOnload() function. Also if you have multiple buttons/infodivs they should all have unique ids and their own event handlers. It could be simplified by using classes instead of ids and have the event handler find the associated infodiv via traversal.TomG Thank you for the immediate reply! Tried changing the IDs and event handler and is working! 
https://community.qualtrics.com/XMcommunity/discussion/comment/27997#Comment_27997Hi TomG
The answer above is amazing! Can I ask another simple question? Would it be possible to measure the timing to which participants click the "button"? I want to measure how many seconds it take for a person to click the button.
What java script/ html should I add on top of the one you suggested above?
https://community.qualtrics.com/XMcommunity/discussion/comment/53136#Comment_53136Try this:
Qualtrics.SurveyEngine.addOnload(function() {
var start = Date.now();
jQuery("#button").click(function() { jQuery("#infodiv").toggle(); })
.one("click", function() {
Qualtrics.SurveyEngine.setEmbeddedData('firstClickSecs',(Date.now()-start)/1000);
});
});
https://community.qualtrics.com/XMcommunity/discussion/comment/53162#Comment_53162Hi TomG, Thank you so much for your quick reply! I tried your javascript, that looks like this: I combined the java script for the button and the timing measure. The survey CVS download file, when I download it, does not show the number of seconds in a spreadsheet. By any chance, could you tell me where I am not doing this correctly? (Sorry, I am completely new to java, and I need your expert advice!!)
---------------------
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#button").click(function() {
jQuery("#infodiv").toggle();
});
Qualtrics.SurveyEngine.addOnload(function() {
var start = Date.now();
jQuery("#button").click(function() { jQuery("#infodiv").toggle(); })
.one("click", function() {
Qualtrics.SurveyEngine.setEmbeddedData('firstClickSecs',(Date.now()-start)/1000);
});
});
});
------------------
To record the embedded data field in the response data, you have to define it in the survey flow (prior to the block that contains the JS).
BTW, you should only have one addOnload function:
Qualtrics.SurveyEngine.addOnload(function() {
var start = Date.now();
jQuery("#button").click(function() { jQuery("#infodiv").toggle(); })
.one("click", function() {
Qualtrics.SurveyEngine.setEmbeddedData('firstClickSecs',(Date.now()-start)/1000);
});
});
https://community.qualtrics.com/XMcommunity/discussion/comment/53187#Comment_53187Yay!!! It did work!!!
You are so amazing TomG!! I really appreciate your kindness helping me out--you saved my day and night.
God bless you and merry Christmas!
https://community.qualtrics.com/XMcommunity/discussion/comment/53187#Comment_53187Hi TomG,
This is very cool!! Can I ask you a question about an application of this? Would there be a way to record all time stamps at which one clicks a button (not just the time to make the very first click) when there are multiple buttons? For example, if one clicks buttonA three seconds after the page was loaded, then clicks button B in five seconds, then clicks button A in seven seconds, and exits the page in eight seconds, how can I record this information accordingly (e.g., buttonA_click1 = 3, buttonA_click2 = 7, buttonB_click1 = 5, Nextpage_click = 
?
Ultimately I'd like to use these timestamps to compute how much time one spent viewing information under a button when there are multiple buttons (e.g., duration for buttonA will be 4 = (3 - 0) + (8 - 7) seconds, duration for buttonB will be 2 = (7 - 5) seconds). Could you please give any insight into this by any chance? Would appreciate your help!
https://community.qualtrics.com/XMcommunity/discussion/comment/53454#Comment_53454Yes, you could save the timestamps in an embedded data field.
https://community.qualtrics.com/XMcommunity/discussion/comment/53470#Comment_53470Thanks for the quick reply, TomG! That'd be so cool!! I'm currently seeking to save a list of timestamps at which a button was clicked (e.g., "1.34 | 2.56 | 4.98 | ... | 4.44") as an embedded data field. I wrote the following code for this, but it does not record all the time stamps at which a button was clicked. Would you please help me with fixing this code? I'm a beginner in Javascript, so would greatly appreciate your expert advice!!
Qualtrics.SurveyEngine.addOnload(function()
{
//initialize objects
var TimeStampList = "";
var start = new Date();
var timeStamp;
jQuery("#button").click(function() { jQuery("#infodiv").toggle(); })
.one("click", function() {
timeStamp = (Date.now() - start)/1000;
TimeStampList += timeStamp + "|";
});
Qualtrics.SurveyEngine.setEmbeddedData('news1_commentsTime',TimeStampList);
});
Your timestamp code needs to be in the click handler, not the one click handler.
I would make TimeStampList an array, then join it when save the embedded data field.
Be sure to define new1_commentsTime in the survey flow.
Hi, I would like to know if the button is clicked and, if so, how long the user spends viewing the content on each click. Is it possible?
Hi all,
I’ve applied this code successfully to my survey, so thanks to everyone for the advice in this thread! I was wondering if you know how to ensure that the buttons are accessible to individuals who need to use the “tab” button on their keyboard to navigate the survey? I’ve posted my full question and current code here: Creating expandable/collapsible buttons that are fully accessible to individuals who use the "tab" button on the keyboard to navigate the survey. | XM Community (qualtrics.com)
Thank you in advance!
Rebecca
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.