Evaluate a user-input string as an expression

I’m trying to make a simple calculator widget that looks and functions like a standard calculator (number keys, basic operators, and a display). Ideally, I could type an expression like (4+3)*2 into the input field (which doubles as the display) and then somehow let JS take care of the math when I hit the “=” button… but everything I try results in NaN!
So far, I’ve tried a bunch of stuff like this:
set text on calc-display equal to [[Target.text*1]]
set text on calc-display equal to [[Math.pow(Target.text,1)]]
…and I just can’t seem to make Axure recognize that I’m after a numerical value. Anyone done something like this before?

Using a bit of JS you can accomplish this…

UserInputMath.rp (47.4 KB)

Here’s the explanation:
on click of the “=” button, we use an openLink action that contains some js and local vars:

javascript:void ($axure(‘@[[MathResult.name]]’).text(eval(‘[[EquationTextBox]]’).toString()));

You’ll notice local vars for the result widget (need to get the name of the widget to set the text) and then another local var to get the text on the equation text field.

What this does is tell axure to set the text of your result widget to the evaluated value of the formula you entered. We have to go back to a string because axure doesn’t like setting text to a numeric value. Note that you have to either have some text on the target widget or a space – it can’t be blank.

Update - I see @josephxbrick was responding as I was posting my file - he probably has some nifty trick, too :slight_smile:

2 Likes

Hi!

What you’re looking for is javascript’s eval() function, which Axure does not support, sadly. You can call eval() using javascript (by adding the javascript code to the address field of Open Link in Current Window)

The issue is that you can’t predict when the javascript will execute, so any command following this javascript command might execute prior to the answer being returned.

There are three possible solutions:

  1. You don’t plan to have a command after this eval() function executes. This is most likely and is the solution that UXProtoTyper added as I typed this! (Hi UXProtoTyper! :slight_smile: )
  2. You place a Wait command between the javascript command and any commands following it. This is unreliable unless you make the wait longer than you probably want.
  3. In the javascript, after setting the text of answer widget, you then move the answer widget by (0,0) and then use OnMove interaction of the answer widget to execute any followup commands.

Here is the result for 3. After the answer is returned, the answer widget sets the text of the ellipse to its text via its OnMove interaction.

eval.rp (52.9 KB)

Note: it’s important that you create the prototype with a blank space typed into the answer widget; otherwise, there will be no span tag, which the $axure text() command expects.

[Edit] if you are handy enough with javascript/jquery, here is the only reference that I know of that documents Axure’s javascript API.

1 Like

@UXProtoTyper, @josephxbrick – phew! Thank you both so much for your solutions. I figured it was going to involve eval(), but it would’ve taken me forever to realize I had to convert it back to a string.

@josephxbrick, the move by 0,0 trick was also just what I needed to pop the result into the input field, and your note about using a space to ensure the span tag saved me at least several hours of headdesking. Thanks again!

I’ve attached a version of the calculator I was working on in case it’s helpful to anyone else:

calculator.rp (88.8 KB)

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.