Solved

How to get a result of a math operation within the same page?

5 years ago
24 July 2018
9 replies
117 views

Userlevel 1

ecd921
9 replies

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!

icon

Best answer by Anonymous 6 August 2018, 22:37

View original

9 replies

Userlevel 7

Akdashboard
Level 4 ●●●●
488 replies
5 years ago
24 July 2018

TomG is usually pretty good with these types of questions.

@TomG

Userlevel 1

srane
Level 1 ●
11 replies
5 years ago
25 July 2018

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;)

Anonymous
0 replies
5 years ago
6 August 2018
Answer

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.

Userlevel 3

sankeshkumar
QPN Level 2 ●●
16 replies
5 years ago
7 August 2018

Hello @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*/

});

Userlevel 6

+18

SaurabhPujare_Ugam
QPN Level 5 ●●●●●
145 replies
5 years ago
13 August 2018

Hey @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();
}
});

});

Userlevel 1

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: !

Anonymous
0 replies
5 years ago
30 August 2018

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();
}

});

Userlevel 1

Thank you! It works!

Userlevel 6

+18

SaurabhPujare_Ugam
QPN Level 5 ●●●●●
145 replies
5 years ago
17 September 2018

Hii @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

Sign up

Social Login

Login to the community

Social Login

Scanning file for viruses.

This file cannot be downloaded