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

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.

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

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



});

You have to get the values inside the event handler.