Calculattions

This Calculator Example built with USolver© will guide you as you easily create a web-based interactive Vehicle Payment Calculator.

Your calculator will compute the Monthly payment and the Total Cost associated with an automobile loan as you change variables such as Purchase Price, Down Payment, and Interest Rate.

Upon completion of this exercise, your calculator will look and feel the same as the one we have built for you. An embeded version of the web calculator is seen below.

Steps in Creating Your Calculator

  1. Create Model in a Spreadsheet
  2. Insert Model as a Calculator
  3. Design the Canvas
  4. Preview and Save your Project
  5. Share your calculator with others.

1. CREATE CALCULATION MODEL IN SPREADSHEET

USolver© allows you to perform a variety of calculations that make use of formulas commonly found in a spreadsheet used by business, science, engineering, and many other fields. (The USolver© spreadsheet also contains built-in functions for performing advanced mathematical computations such as calculus and linear algebra, but we won’t worry about those for now).

To start building your Vehicle Payment Calculator in the Design Stage, let’s start with some initial values to populate the spreadsheet. Assume that the:

We will make use of the common payment function that is frequently used to calculate the monthly payment for a specific loan amount: PMT(rate, nper, pv, [fv], [type]) (Note: This function is available in Excel or other spreadsheets. You can use other formulas in the formula bar to make different calculators.)

  1. Enter the descriptive text of the variables (Purchase Price, Down Payment, etc.) involved in the payment calculation process, putting one in each spreadsheet cell as shown above.
  2. Enter the relevant data in the adjacent cell for each of the items of step 1. Note that the Interest Rate 3.25% is entered as 0.0325 in cell B6.
  3. The Monthly Payment (Cell B9) is calculated using the payment formula in the format “=PMT(B6/12,B7,(B3-(B4+B5)))”, which is entered into the formula bar of the USolver spreadsheet. (You can use another formula placed in the formula bar to make a different calculator)
  4. The Total Cost (Cell B10) is calculated by summing up all the expenses the purchaser incurred, as = B9*B7-B4-B5. Insert this formula into Cell B10. (Note: B9 and B10 returns negative values. This represents a cash outflow.)

Next, we will format the data so that the dollar amount shows up with a "$" sign and percentage shows up with a "%" sign

  1. Select the cells that contain dollar amounts (cells B3, B4, B5, B9, and B10) and then click on the “$” button of the spreadsheet toolbar at the top of the page.
  2. Now, select the cell that contains the percentage value (cell B6) and then click on the “%” button of the spreadsheet toolbar

2. INSERT MODEL AS A CALCULATOR

To insert the selected cells from the Spreadsheet as a Calculator do the following:

  1. Select all the cells in the Spreadsheet in which you entered the variables and values.
  2. Next, click on the spreadsheet tool button "Insert into canvas". Click on the option "Calculation"
  3. This inserts a live Calculator onto the Canvas.

3. DESIGN THE CANVAS FOR PRESENTATION

Next, we will design the Canvas so that users can interact with the calculator on the Web. If you look at the original screenshot of the model, it has 3 objects:

INSER AND FORMAT A LABEL ELEMENT

To insert a Label element, go to Elements on the Toolbox at the left of the Canvas and simply click on the Label element (item 1, as seen in the image below). A editable Label box (item 2, as seen in the image below) automatically gets inserted onto the canvas.

Next, double-click the inserted Label element and type in “Vehicle Payment Calculator”. Then, select the element again and go to the top toolbar and change the Font size to 28 pixels, or as size you desire. (items 1 and 2, as seen in the image just below).

INSERT AN IMAGE ELEMENT

We will now insert an Image of the car onto the Canvas. There are several methods to insert an existing Image on the Canvas. The easiest is to Copy (Ctrl+C) and Paste (Ctrl+V). Locate an image of your choice, maybe from the web, and copy it. Next, click on the USolver canvas and perform the Paste command.

Once the Image is inserted, you can resize it to your choice.

Congratulations! You have already designed your interactive web-page!!

4. PREVIEW AND SAVE YOUR PROJECT

PREVIEW YOUR WORK

Before you start sharing your work with others, you should Preview it to check if your created Calculator functions properly. To Preview your calculator, click on the “Preview” button at the top of the Canvas.

This will take you to a Preview page for you to test the model.

You can change the values of Purchase Price, Interest Rate, and other variables to get instantly updated results.

If you want to make any changes, then click on the “Exit Preview” button on top of the Preview screen to return to the Design stage to view the Spreadsheet and Canvas.

SAVE YOUR WORK

Once you are satisfied with all your edits, the next step is to save it. Click on the File Menu (items 1 and 2, as seen in the image just below). You will see a Pop-up window (item 3, as seen in the image just below). Here you can provide a Name for your Project such as "Cal_Car_Loan", as seen in this example.

USolver© allows you to save your work as

  1. Private: this choice will keep your project private and cannot be shared with others
  2. Unlisted: this choice allows you to share your work with a select audience by mailing them a URL that gets generated (see the next section “Share Your Calculator”)
  3. Public: this choice allows anyone to view and interact with your saved work. Your work may appear on our website in the Public Gallery section USolver© users can also open a Public project and modify it to their needs.
Your Calculator will be saved on the secure USolver© server and available at any time.

5. SHARE YOUR CALCULATOR

Now that you have designed, tested, and saved your Calculator project, the next step is to make it available to your intended audience.
Clicking on the "Share" button that appears on the top toolbar

Share your Car Payment Calculator by sending out the automatically generated web-links via email, Facebook, Twitter.

To email the web-link of your Calculator, click on ‘Shareable Links’. A pop-up is displayed as below:

ITEM 1 (Web Preview): This link can be mailed to your intended audience and they can then view it on any web-based browser like Google Chrome, Firefox, etc.

ITEM 2 (Responsive): The Responsive link can be shared if you want the project to be viewed on any platform like a desktop, laptop, tablet, or smartphone. Your Project will usually adjust to the proper screen size.

ITEM 1 (Embed Code): Embed Code is used when the user would like your project to be a part of their webpage or their blog. In that case, the displayed code "<iframe> … </iframe>" should be shared with them so that they can paste it into their webpage,

That’s it – this is how a Project is Created, Saved, and Shared in USolver©!!