+3
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
Best answer by TomG
View original
+27
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.
+1
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);
});
+27
https://community.qualtrics.com/XMcommunity/discussion/comment/53454#Comment_53454Yes, you could save the timestamps in an embedded data field.
+1
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!
+27
+1
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!
+27
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);
});
});
+1
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);
});
});
});
------------------
+27
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);
});
});
+1
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?
+1
TomG Thank you for the immediate reply! Tried changing the IDs and event handler and is working! 
+27
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.
+1
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.
+8
Hi all (RachDH, uniproject)
sorry I'm late to respond (was on vacation). To the issue about using it on the same page, this is what we tell our users:
NOTE: If you want to use this code more than once in the same block, you need to change the IDs in both the JS and the HTML. For example, change button id = "button" to button id = "button2" and the div id from infodiv to infodiv2 in both the JS and the HTML.
+27
https://community.qualtrics.com/XMcommunity/discussion/comment/45808#Comment_45808html ids should be unique to the page. Use classes if you want to identify groups of things.
Hi there,
I've been following this thread (total newbie here!) and I've followed the instructions to set up a 'more/less' button for questions with details on a participant information sheet they need to read prior to consenting to the study.
I've managed to get it so that when I preview individual questions, each 'more/less' button works, however when I preview it on a page, the clicking the 'more/less' button for the first question (i.e. 'What will happen to me if I take part?' expands with the relevant text - the next questions show on the same page, but none of the more/less buttons work...any ideas? I'm assuming it's how I'm setting up the JS to run as it's only working for the first question and not the others...?
This is the HTML code:
+27
https://community.qualtrics.com/XMcommunity/discussion/comment/42457#Comment_42457I don't know of any code that addresses your specific need. You probably need to write it from scratch.
+1
https://community.qualtrics.com/XMcommunity/discussion/comment/42455#Comment_42455Hi Tom, thank you for getting back so quickly. Would you be able to help me with this different code? Or direct me to a page that could? I'm finding it difficult to find.
Thanks again.
+27
https://community.qualtrics.com/XMcommunity/discussion/comment/42451#Comment_42451That would require different code.
+1
Hi,
I was wondering how I can use the button to reveal another answer option in a multiple choice question. Participants for my survey should ideally be able to keep clicking the same button (max. 36x) to display more options if they wish. I've been successful in adding the button so far, do I add to the existing code or would this need a different approach?
Thanks!
https://community.qualtrics.com/XMcommunity/discussion/comment/40453#Comment_40453Thanks, that helped! However, now nothing appears below the button (or the expanded text if the button is clicked) - what have I done wrong?
+27
https://community.qualtrics.com/XMcommunity/discussion/comment/40450#Comment_40450Click on the question the right click on the ... in the upper right, then choose Add JavaScript. Paste the JS code where it says '/*Place your JavaScript here to run when the page loads*/'.
For the html, click on the Question Text then click the HTML View tab. Paste the html were you want the button/info text to appear in the Question Text.
https://community.qualtrics.com/XMcommunity/discussion/comment/40449#Comment_40449Yes but I don't understand how to do the JS - people refer to 'onload' and I don't know what that means. Or do I just paste the JS code and then the html? Do I change anything in the JS code? Thanks
+8
Lapwing Did you take note of this?
NOTE for noobs like me...you need both the JS in the question's JS and the HTML in the question. Change "Button Text" to whatever you want it to say (I like "more/less") and put the text you want to hide / show where the word "Information" is.
I'm a total newbie. I think this is the solution to the problem I have - I want more information/text to be visible to people if they click on a word, probably as a pop-up window. I've entered the html and made a button, but nothing happens when I click on it. I can't see a 'cog on the left' (as some have mentioned) in order to do the 'addOnload' - I don't know what this means at all, but gather I need to do this then copy the JS code too? Any help would be very much appreciated! Thanks.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.