Solved
How to get a result of a math operation within the same page?
Hello!
I have a question in which the respondent have to choose a product and then how much of it they would like to buy. I would like to add a feature in which in the moment they select the amount, they can see how much they would have to pay for it. Everything in the same page. I called the customer service but they told me that this feature requieres Java script, but I am not so good in it. Does anybody has previusly used a similar code that I could adapt to my survey?
Thank you!
Best answer by Anonymous
hello @ecd921,
Agreed with @srane , here's the implementation of the question. For eg there are four products and has price 1, 2, 3, 4. Add the following script in the header of the survey i.e go to look and feel -> advanced -> header (click edit):
<script>
document.getElementById('QR~QID2').setAttribute("onkeyup","myfun()");
function myfun(){
var pcost;
var that1=document.getElementById('QR~QID1~20');
if(that1.checked){
var pcost=1;
}
var that2=document.getElementById('QR~QID1~21');
if(that2.checked){
var pcost=2;
}
var that3=document.getElementById('QR~QID1~22');
if(that3.checked){
var pcost=3;
}
var that4=document.getElementById('QR~QID1~23');
if(that4.checked){
var pcost=4;
}
var val=document.getElementById('QR~QID2').value;
//alert (val);
var t=val * pcost;
document.getElementById('tt').innerHTML=t;
}
</script>
You can find the survey qsf here.
View original
What kind of elements are you using to fetch the input from the user. Is it a textbox, dropdown or something else. Once that is known, you can add an eventlistener on the said element that monitors the changes being made to it and would then calculate the value by multiplying the quantity of the product by its price and then display it. Displaying such a value can be done in two ways: As an alert OR By using a jQuery on the innerHTML of the span tag to display it on the webpage. ($(spanId).innerHTML = calculated_value;)
hello @ecd921,
Agreed with @srane , here's the implementation of the question. For eg there are four products and has price 1, 2, 3, 4. Add the following script in the header of the survey i.e go to look and feel -> advanced -> header (click edit):
<script>
document.getElementById('QR~QID2').setAttribute("onkeyup","myfun()");
function myfun(){
var pcost;
var that1=document.getElementById('QR~QID1~20');
if(that1.checked){
var pcost=1;
}
var that2=document.getElementById('QR~QID1~21');
if(that2.checked){
var pcost=2;
}
var that3=document.getElementById('QR~QID1~22');
if(that3.checked){
var pcost=3;
}
var that4=document.getElementById('QR~QID1~23');
if(that4.checked){
var pcost=4;
}
var val=document.getElementById('QR~QID2').value;
//alert (val);
var t=val * pcost;
document.getElementById('tt').innerHTML=t;
}
</script>
You can find the survey qsf here.
+1Hello @ecd921
Above issue can also be addressed with the help of javascript codes by using sessionStorage method to store the value till that session is valid and it can be utilized in the next questions javascript .. over here javascript is embedded with each question
Find the QSF File Attached For better understanding
code for selecting the product:
Qualtrics.SurveyEngine.addOnload(function()
{
this.questionclick=function(event,element)
{
var Per_Costs = 0;
var selectedchoice=this.getSelectedChoices();
if ( selectedchoice==20)
{
Per_Costs=5;
sessionStorage.setItem("Per_Costs_Key", Per_Costs);
}
if ( selectedchoice==21)
{
Per_Costs=6;
sessionStorage.setItem("Per_Costs_Key", Per_Costs);
}
if ( selectedchoice==22)
{
Per_Costs=7;
sessionStorage.setItem("Per_Costs_Key", Per_Costs);
}
if ( selectedchoice==23)
{
Per_Costs=8;
sessionStorage.setItem("Per_Costs_Key", Per_Costs);
}
}
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
code for Taking Input in Text Entry:
Qualtrics.SurveyEngine.addOnload(function()
{
document.getElementById('QR~QID2').addEventListener("input", function(){
var textinput=document.getElementById('QR~QID2').value;
sessionStorage.setItem("textinput_Key", textinput);
});
});
Qualtrics.SurveyEngine.addOnReady(function()
{
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
code For Final Display of calculated amount:
Qualtrics.SurveyEngine.addOnload(function()
{
this.questionclick=function(event,element)
{
document.getElementById('QR~QID3~8~TEXT').disabled="true";
var Tot1= sessionStorage.getItem("Per_Costs_Key") * sessionStorage.getItem("textinput_Key");
document.getElementById('QR~QID3~8~TEXT').value=Tot1;
}
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
+18Hey @ecd921 ,
Take three textboxes and add following code in 2nd textbox....
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
jQuery("[id='QR~QID1']").bind('keypress keyup blur', function(e){
if(jQuery(this).val().length > 2 )
{
e.preventDefault();
}
jQuery("[id='QR~QID6']").val(jQuery("[id='QR~QID1']").val() + ' + ' + jQuery("[id='QR~QID7']").val());
if(jQuery(this).val().length > 2 )
{
jQuery("[id='QR~QID7']").focus();
}
});
jQuery("[id='QR~QID7']").bind('keypress keyup blur', function(e){
if(jQuery(this).val().length > 2 )
{
e.preventDefault();
}
var num1 =parseInt(jQuery("[id='QR~QID1']").val());
var num2 = parseInt(jQuery("[id='QR~QID7']").val());
var num3 = num1 + num2;
jQuery("[id='QR~QID6']").val(jQuery("[id='QR~QID1']").val() + ' + ' + jQuery("[id='QR~QID7']").val() + ' = ' + num3);
if(jQuery(this).val().length > 2 )
{
jQuery("#NextButton").focus();
}
});
});
Best, Saurabh
Dear all, I have tried all the suggestions but something is not working out properly because nothing happends to my question. The question is a 5 single choice question with images. I attached an example image on how it should look. My main concern is that the people after selecting their choice can also introduce in some text box (that appears after) the amount they would like to buy. So, I figure how the make the text box appear after click, but I do not have yet figure how to add a display of text like "how many gramms/pounds you would like to buy?". Then it would be great if the person can see how much they are paying for it. I would appreciate if you could clarify me what I am missing to use your beautiful codes.
Thank you.
Here is the Image: !
1 person likes this
Hello @ecd921 ,
Hope the following code will help you: Add the following js in js(onReady) of your question:
jQuery('input:text').hide();
jQuery("[type='radio']").change(function(){
if(jQuery(this).prop("checked") == true){
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").show();
jQuery("[id*='"+v1+"~TEXT']").attr("placeholder", " how many gramms/pounds you would like to buy?");
jQuery("[id*='"+v1+"~TEXT']").css('width',500);
jQuery("[type='text']").not("[id*='"+v1+"~TEXT']").hide();
}else{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").val('');
jQuery("[id*='"+v1+"~TEXT']").hide();
}
});
+18Hii @ecd921 ,
If you could accept the answer that i posted it would be helpful for the people , coming with a similar query in future.
and
Happy that i could help :)
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.