Display math operation results real-time | XM Community
Solved

Display math operation results real-time

T

Hello,
I'm trying to display math operation results using multiple piped texts within a question. I have multiple text entries that allow for numeric values, certain calculation using these values is done, and the result needs to be displayed real-time within the question. For example, if respondents enter x, y, and z for each text entry, the result of 2*x + 3*y + 5*z needs to shown to them real-time.
It seems that the calculation result of question 1 can be confirmed in the subsequent questions by piped texts, but not in question 1. I would appreciate it if you could provide any ways to handle this problem.

icon

Best answer by TomG 2 May 2020, 15:54

View original

5 replies

TomG
Rank
Userlevel 7
Badge +27

@Tae,
You need to do the calculation and display of the result using a JavaScript event handler.

T

TomG

Thank you, TomG. The following is the JS code I've been working on.

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var FirstNumber ="${q://QID62/ChoiceTextEntryValue/13}" ;
var SecondNumber = "${q://QID62/ChoiceTextEntryValue/14}" ;
varThirdNumber = "${q://QID62/ChoiceTextEntryValue/15" ;
var result = parseInt(FirstNumber)*2 + parseInt(SecondNumber)*3 + parseInt(ThirdNumber)*5 ;

  if(result > 20) {
    alert("The result exceeds 20."); } 

});

My ultimate goal is to show an error message and not to allow respondents to proceed to the next question if the result exceeds 20. So the challenges are
1) How to display the 'result' variable real-time to respondents, and
2) How to force respondents not to proceed to the next question if the result exceeds 20.

I really appreciate your help.




TomG
Rank
Userlevel 7
Badge +27

Piped values are resolved on the server before the page is sent to the browser. They are NOT dynamic. Therefore, you have to get the values using JavaScript. If you have three text entry boxes in your question, then the first number would be:
var textInputs = jQuery("#"+this.questionId+" .InputText");
var FirstNumber = parseInt(textInputs.eq(0).val());
You need an html element in your question to display the total where you want it:

You need an event handler to calculate and display the total:
textInputs.blur(function() {
var result = ; //equation to calculate total goes here
jQuery("#t").text(result);
});
You can use custom validation and a math operation to make sure the result doesn't exceed 20. See this post to get the general idea: https://www.qualtrics.com/community/discussion/comment/13115#Comment_13115

T

TomG ,
Thank you very much for your quick response and the guidance. I followed your code and now I can display the total value where I want somehow. But it seems that the appearance of the result is not immediate and a bit odd. I expected the total number to vary at the moment I change the input, but the total value appears only when I bump into another error messages and have to revise the input. Do you have any idea as to why this happens? And possibly the solution?
The following is the updated code:

Qualtrics.SurveyEngine.addOnReady(function()
{

/*Place your JavaScript here to run when the page is fully displayed*/

var textInputs = jQuery("#"+this.questionId+" .InputText");
var txtFirstNumberValue = parseInt(textInputs.eq(0).val());
var txtSecondNumberValue = parseInt(textInputs.eq(1).val());
var txtThirdNumberValue = parseInt(textInputs.eq(2).val());
 
textInputs.blur(function() {
var result =parseInt(txtFirstNumberValue)*2 + parseInt(txtSecondNumberValue)*3+ parseInt(txtThirdNumberValue)*5 ;
  jQuery("#total").text(result);
});



});

TomG
Rank
Userlevel 7
Badge +27

You have to get the values inside the event handler.

Leave a Reply


Terms & Conditions