Perform calculation on user entered number


(ed) #1

We use hype for lots of presentations and animations. Where would I start to perform a calculation on a user-entered number (say, their income) and present them with a calculation (say, how much tax they would pay).

Is this possible?


How to add Input form in a hype document and use it with javascript
(Greg) #2

You could use a input form on the innerHTML of a box (check the innerHTML of the top box in the sample), then use javascript to do the calculation from a button. Here’s a basic sample…

taxed.hype.zip (11.4 KB)


(Shong) #3

Thanks gasspence, your posts helps me on learning Javascript!

Will it be possible to make shapes like ellipses or rectangles to change dimension based on the calculation? I’ve seen some jQuery effect that does, but Hype may be able to make a bouncing growing shape stops on time line based on the calculation. That will be more interesting than an animation chart.


(Greg) #4

Something like this…
taxed1.hype.zip (12.7 KB)


(ed) #5

Thanks very much for this. Will have a play around.

Has anyone else captured user variables for later use?


(Shong) #6

Hay gasspence,

Wanna say thank you for your knowledge sharing, I just make another version based on symbol. maybe you know a better way to do it. (maybe use javascript to control start or end keyframe? )

chart animation.hype.zip (17.8 KB)


(Greg) #7

I really like what you have for this chart – good job Shong.


(ed) #8

that’s really nice! thanks.


#9

Hello gasspence. Thanks for helping us non programmers to go farther with hype. I have this calculation to perform with two inputed numbers:

(variable x - variable y / 60) * 600)

I tried to do it this way but it didn’t work

var UserAmount = document.getElementById('textbox_id').value; // from the innerHTML
var UserAmount2 = document.getElementById('textbox_id').value; // from the innerHTML

var y = ((UserAmount - UserAmount2 / 60) * 600); // calcul de la valeur chaulante

hypeDocument.getElementById('taxed').innerHTML = (y).toFixed(2); // two decial places

(Greg) #10

try something like this…

var UserAmount = document.getElementById('textbox_id').value; // from the innerHTML

var UserAmount2 = document.getElementById('textbox_id2').value; // from the innerHTML "note the 2"

var x = (+UserAmount) - (+UserAmount2); 

var z = (x /60) * 600

var y = (x * 1.0725); // 7.25% tax amount on user entry

hypeDocument.getElementById('taxed').innerHTML = (y).toFixed(2); // two decial places