How to show a real time calculation in javascript?

I think that you will need to provide further details about your requirements.

For example: You have a PHP array, containing math expressions that will be used in a math quiz slideshow/timer thing.

$expressions = array(
    array("2 + 4 / 5 * 5", "5"),
    array("17 - 2 * 4", "9")

Yes I know that your PHP code generates the expressions in a different way, but the above is a simplification that can help us to focus on what’s important - the JavaScript side of things.

You want to use JavaScript to show the expressions, and to show the real time calculation.

Question: What do you mean by real time calculation?

  • Do you want “2 + 3 / 5 * 5” to be replaced by the answer of “5”?
  • Or, do you want “2 + 3 / 5 * 5” to have an equals sign added to it with the answer? " = 5"
  • Or. do you want “2 + 3 / 5 * 5” to show the BODMAS steps of solving the equation?
1 Like

Thanks for the reply , I am answering to the questions below

  • what I ment by real time calculation is for example I 've got an expression like “2 + 3 / 5 * 5” then already this expression is displaying in slideshow in the manner of ony by one items at a time.

  • In addition to this I also want to show the above expression in a total block that I have creted lin the manner lke
    - firstly 2 will display in that block as wll as in a slideshow
    - then when +3 is displayed in slideshow at same time in the block named total +3 should get added to previous element i.e 2 and will show the total 5
    - like this after +3 , /5 will display in slideshow and in block 1 should display (as 5/5 = 1) and so on .

  • This is real time calculation I want to show

  • I don’t want to show = sign

I tried to show it with known values and it was working but as here its already geting sored in an array I am getting confused

But isn’t the total calculated in a way that’s different from just left to right?

The following “6 / 2(1 + 2)” formula helps to demonstrate the difference.

An incorrect answer is found by doing 6/2, then multiplying by 1+2

The correct answer is found by resolving the parenthesis first
6 / 2 * 3
Then applying the multiplication and divisions from left to right:
3 * 3
Until you get to the answer

All in all the steps are:

  • 6 / 2(1 + 2)
  • 6 / 2(3)
  • 6 / 2 * 3
  • 3 * 3
  • 9

That seems to be a different process from the “after +3 , /5 will display in slideshow” that you were mentioning.
If you have something different in mind, can you please provide further clarification?

By the way, there is a useful “step by step” formula solver that you might find useful, at

  • basically in the bloc named “total” I want to show only one number and that number will be calculation of current number displaying in slideshow and the pevious number

  • for ex 1 +2 *3 is expression then firstly only 1 will display in block and after 1 when +2 is displaying in slideshow at the same time +2 will get append to previous element i.e 1 and will show result 3 in that block , this process will continues untill last element of expression
    -Note - there is no operator preference

  • can I provide the code which I have created but this code is for only 4 numbers ?

Okay, I’ll stop developing an operator preference solution then.

Won’t people be highly confused when 1+2*3 is shown to be 9 when the correct answer really is 7?

I am feeling highly emotionally charged by this separation from operator preference.

If you carry on down that path of ignoring operator precedence, then someone else with a stronger stomach than my own will need to step in to move forward with helping you towards your solution.

yeah Technically its confusing but its like abacus thing and follows First come first serve formulae

  • because here I am using rand function its not in anyone’'s control that what will be numbers and operations and final answer

here is the code of how I am displayiing the expression one by one ina slideshow

              <div class="slide" id="out">
    <div class="head">Q(<?php echo $index+1.?>).</div><br>
            <div class="expression flex flex-row" id="exp">
      $iCount = count($expression);
         foreach($expression as $key => $item) { ?>
            <span class="slide-item" id="visible"><center> <?php 

  //logic 1  for operand and operator togather
            if($item == "*")
                 echo "x".$expression[$key+1];;
            elseif($key == 0  &&  $key < $iCount -1)
                  echo $item;     
            elseif($key % 2  !== 0)
                  echo $item.$expression[$key+1];
    ?></span><!--displaying each item at a time-->
<?php  }  ?></div>

I know its not a proper way but what should I do now , its because I am using eval() function
but I can’t chnange the core logic now it will be complecated . Please guide me through the real time calculation isuue
can I provide the logic I have used to generate thhe expression with rand function ?

Sorry no, not from me. I’ve been down this road many time before when people do things the Wrong Way™ and I just can’t face myself the next morning.

Someone else will be needed to guide you through the way that you want to do things.

I’m not aware of such, got a link? AFAIK multiplication and division before addition and subtraction are pretty much de facto.

I have a feeling you want it to be so primarily because doing it the proper way would be more complex.

Note that precedence rules can be “avoided” by using parentheses. eg.
1 + 2 * 3 = 7
(1 + 2) * 3 = 9

If you really must have things “in order” you should be able to code in parentheses where appropriate.

1 Like

I will definitely fix this , I 've got an idea from above post of using parenthesis but please do tell me how to get the expression from $expression and display the real time calculation that I have explained

hey @ Paul_Wilkins , @ Mittineague
I hve teted my code once again and I calculated the expression manually which is displying currently and its showing answer in a correct way with operator preference ,
seriously I personally never checked it in that way manually because I have not included seperate code for operator preference , but now when I checked it its correctly evaluating the expression Thans for showing the correct way I will remember this from next time that it should be in proper preference

A few rare formulas will evaluate correctly with and without operator preference.

That’s why I like to use 6 + 2 * 3 as you can clearly recognise good evaluation from bad.

With correct evaluation you get:
6 + 2 * 3 => 6 + 6 => 12

With sequential evaluation you get:
6 + 2 * 3 => 8 * 3 => 24

One of those answers is correct, and the other is not. Using the correct evaluation order matters.

1 Like

yes exactly , I have calculated it manually whatever expression isdisplaying and eventually my code is showing it correctly like this 6 + 2 * 3 => 6 + 6 => 12

now I have only one issue and that is real time calculation I am still trying but its not working somehow

Yes, eventually it will because JavaScript knows about operator precedence too.

The problem that I have is with the steps that your planned program instructs the students to take.

6 + 2 * 3 being solved by:

  1. 6 = 6
  2. 6 + 2 = 8
  3. 6 + 2 * 3 = 12

That is not how things should be done, it is not how math should be taught, and you will damage students that try to learn math using that sequential technique.

I now need a break before I damage something around me.


I’m having some trouble thinking of a good way to do this. My understanding is the process is basically a series of “using that result, now do this” steps?

One way might be to actually use the result eg.
6 + 2 = 8
8 * 3 = 24

But if the numbers and operators are pulled from arrays, I can’t think of a way other than parentheses, which could get messy looking, depending, eg.
6 + 2 = 8
(6 + 2) * 3 = 24
((6 + 2) * 3) - 4 = 20
(((6 + 2) * 3) - 4) / 2 = 10

1 Like

A post was merged into an existing topic: Problem with the count up timer in javascript

In case this helps someone out, I’ve put together some sample code.

This sample code automatically generates steps for solving equations, using the following libraries:

and reveals them in a step-by-step manner, with automatic timing between each question, and the timing between each step varying depending on the number of steps, to fit within the question timing.


Sample input for the above code is: ["2+4/5*5", "12-5*2", "6/2*(1+2)+4"]

Sample output is:

• Question: 2+4/5*5
• Hint: 2+0.8*5
• Hint: 2+4
• Answer: 6

• Question: 12-5*2
• Hint: 12-10
• Answer: 2

• Question: 6/2*(1+2)+4
• Hint: 6/2*3+4
• Hint: 3*3+4
• Hint: 9+4
• Answer: 13

The timings for when hints are revealed cannot be realistically shown in this text format.
You can experience it though by visiting

Be sure to press the jsfiddle Run button at upper-left, to run the code again.