I'm looking for a jquery-style javascript / CSS control that will allow the user to expand on the expression.
For example, imagine that we have the following expression:
(2+3) × (4+5) + Max(22, 31, 16, 62, 40)
This will be evaluated as follows:
(((2 + 3) × (4 + 5)) + Max (22, 31, 16, 62, 40))
⇒ ((5 × 9) +62)
⇒ (45 + 62)
⇒ 107
I would like to present these intermediate steps in such a way that the user can expand a specific branch of the evaluation in order to discover the inputs that gave a certain value.
I played with the idea of manipulating the generation of expressions in a tree structure, possibly with intermediate ratings inserted (blue shown in the example). However, I am concerned that the audience I am targeting this software to may seem a little intimidating.
eg.
An alternative, friendlier view might be to allow collapsing in place, as shown in this example:
At first, the expression looks like this:
The user presses the button "107", which changes the control to this:
The user presses the "62" button, which changes the control to this:
, , , . , , .