Download the KJECalc.exe (or KJECalc.zip, download instructions are emailed to you with your license receipt)
Make a directory or folder on your website to put all files that were extracted from step #2 above.
Use these instructions to embed a calculator on a page:Embed a Calculator
Edit the KJESiteSpecific.js and KJESiteSpecific.css files to change the fonts, colors and setting of the calculators. Use this for more instrucitons:V3 Customize FAQ
Please contact support with any questions you have when deploying or using the calculators. Feel free to contact us via email at or by phone at (612) 331-2291.
Dinkytown V3 Deployment and Installation Overview Video
How do I install the V3 financial calculators to my website?
Here is a brief description on how to deploy the V3 calculators.
Download the latest full installation package for your calculators from your download site, found on your e-mail notice.
Execute the KJECalc.exe to extract all of the required V3 calculators. This is a self-extracting zip file. (Or unzip the KJEUpdate.zip file if you are using a non-windows platform.) If you see a warning message, you can safely continue. When prompted for a directory, you may use the default or enter your own. It is recommended that you extract the update to a new directory and then move the required files to your production or staging environment. One directory will be created with no subdirectories.
Edit the HTML files to match your website, or cut and paste HTML file contents into new pages that have already been created (if you do this, make sure to copy the javascript section and the CSS file section. Your new page must also have a doctype.). Future updates will not require these pages to be replaced or modified, so custom changes will not be lost when you update the calculators. Please note that you can only have one calculator per page.
Edit the files KJESiteSpecific.js and KJESiteSpecific.css to apply change to the colors, fonts, etc. to ALL calculators. These files will not be replaced (like the html files) when you update and these two files are used by all calculators. So when you add in new calculators any changes you make here will apply to all calculators. These two files have safe items for you to change, in addition you can modify the KJESiteSpecific.css by overriding styles defined in KJE.css. Please note that future updates will impact KJE.css, so no changes to this file are recommended.
Deploy the files to your website. Normally it is easiest to put all calculator files into a single directory. You can then create links to the calculator pages or the provided calculator index page as needed through out your website.
How do I apply a V3 maintenance update?
If you have previously deployed the V3 calculators, applying a maintenance update is a pretty simple process. No manual editing is required of any files, the entire update process is accomplished by replacing a set of JavaScript files and one CSS file. To apply an update please do the following:
Download the latest update package for your calculators from your download site, found on your update e-mail notice.
Execute the KJEUpdate.exe file from your download. This is a self-extracting zip file. (Or unzip the KJEUpdate.zip file if you are using a non-windows platform.) If you see a warning message, you can safely continue. When prompted for a directory, you may use the default or enter your own. It is recommended that you extract the update to a new directory and then move the required files to your production or staging environment. One directory will be created with no subdirectories.
Replace the files in your current deployment with the new files provided in the update package. Do not delete existing files from your server, simply overwrite an existing file if a new one is provided in the update package. The update package will only include the JS files and CSS files that are required to be replaced. IMPORTANT! The update package does not contain any HTML files or the KJESiteSpecific.js or KJESiteSpecific.css files. These files should already be on your server and are not required to be changed for a normal update.
When you test the new version of the calculators, make sure that the browser you are using uses the new files instead of any it may have in its cache. You may need to clear the browser's cache (or history) manually to ensure the new versions are loaded.
Please note, if you have a Servlet or other custom deployment, installation instructions for your package will found on your download page or provided separately.
What files are used to display the calculators on my site?
We have HTML, JS and CSS files used to deploy the calculators. Certain files are used by all calculators and each calculator has two files specific to that individual calculator. Please see below for more information about each file type.
Files common to all calculators: The following files are used by all calculators.
KJE.js
Main JS file used by all calculators containing common functionality for reports, graphs, calculations, etc. This file should not be edited or changed.
KJE.css
Main CSS file used by all calculators containing common Style Sheet definitions. This file should not be edited or changed.
KJESiteSpecific.js
JS file that defines settings (including some color selections and custom functionality) specific to a website. This file can be edited and changed and is not overwritten when updates are applied to an existing calculation installation.
KJESiteSpecific.css
CSS file that defines custom styles for the calculators specific to a website. Like the KJESiteSpecific.js file this file is designed to be edited and changed to apply special styles to all of the calculators on your website. It is likewise not overwritten by updates.
excanvas.js
Provides legacy support for graphs when using IE7 and IE8. Not required by any other browser. If you do not support IE7 or IE8 you do not need to include this file in your deployment.
Calculator specific files: Each calculator has three files that are specific to the functionality of that specific calculator. The example below is for the Mortage Loan calculator. All calculators follow the naming pattern below with the name of the calculator's HTML file matching the name of the JS file and Params.js file.
MortageLoan.html
The HTML file with the calculator code. This file can be edited to match your deployment, updates will not overwrite changes you make to this file.
MortgageLoan.js
Main JS file specific to a financial calculator. Contains all of the content that can change over time, computions, rules and reports. This should not be modified.
MortgageLoanParams.js
PARAMS file for the specific calculator. You can edit this file to change default values and set calculator specific settings. Updates will not overwrite changes you make to this file.
Each calculator in your software download package has its own HTML page that the calculator installed on runs within. You can edit these pages to match your website, or copy the code embed a calculator into an page that already existing on your site. This normally is done by a web-developer who is familiar with HTML.
We also provide an index page with links to each of the calculator HTML pages. If your Software package has more than 10 calculators there will be sub-indexes for each category of calculators.
Where should I place the calculator files on my server?
Typically you would copy all of the files provided into a single directory on your webserver that is accessible to the Internet. You would then either create links from on your existing website to pages the HTML files in this directory or embed the calculator directly into an existing page that references your calculator directory.
The most common location would be the subdirectory "calculators". For example:
http://www.yourdownmain.com/calculators
Where "yourdomain.com" is your website. You could then create a link on your existing pages to the index page for the calculators, which would be: www.yourdomain.com/calculators/index.html
You can also create links to any other calculator pages. Alternatively, you can embed a calculator directly on an existing page and simply reference the files in this directory instead of a link. Please see "How do I embed a calculator directly into an existing page?"
How can I test them on my desktop (without a webserver)?
Download your calculator package from your download link. You should download load the full installation package KJECalc.exe.
Run this program (if you receive a warning message, it is safe to continue). When the program runs, it will prompt you to choose a directory. The default is \calculators which should be ok, but you can change if you wish. Once the program says it is finished you can close it.
To view the calculators open any web-browser, such as Internet Explorer, and enter the following into the address bar and hit enter (if you changed the directory for the install, enter the new directory in place of "calculators"):
C:\calculators\index.html
Click the links to your calculators. This will run on the calculator on your computer without accessing the internet. If there is a warning message, choose "Allow Blocked Content". This will only happen on some browsers and only when you run it from a laptop or desktop computer (not a website).
You can add the calculator page to your favorites, just like a normal website page. You can also create a shortcut on your desktop by right clicking anywhere on the page and choosing "create short cut".
How do I embed a calculator directly into an existing page?
You can use the code below to embed the calculator directly into a page. The example code below is for the Mortgage Loan calculator, but will work for any calculator with very minor changes. All calculators use the same code except two file reference specific to each calculator. Once this is in place you will not need make any changes to this code to install an update.
Open (or create) an HTML page where you wish to embed the calculator. This can be either an actual page you are editing directly or a page in virtually any Content Management System (CMS) like WordPress or Joomla.
Paste the HTML code into your page. Please note this needs to be pasted in as HTML code, not text on the page:
Change the directory (if required) from /calculators/ to the directory where you have the calculator files loaded on your server. If you have the calculator files in the same directory as the calculator pages themselves you can remove /calculators/ and simply have the file name. This is highlighted in GREEN above and needs to be changed in seven locations (five JS files and two CSS files). This will remain the same for all calculators in your package.
Each calculator will use the same code above with only calculator's JS specific file names changed. In the code above you would change MortgageLoan to match the HTML file name that contains the calculator you with to insert. The table below shows some examples of this change.
Calculator HTML file
Prefix to use in code block
Calculator Name
MortgageCompare.html
MortgageCompare
Mortgage Comparison: 15 Years vs. 30 Years
MortgageRentvsBuy.html
MortgageRentvsBuy
Rent vs. Buy
MortgageLoan.html
MortgageLoan
Mortgage Loan Calculator
MortgageQualifier.html
MortgageQualifier
Mortgage Qualifier
Copy the calculator specific Title, Introductory description and disclaimer to the page. This can be copied directly from the HTML page that contains the calculator. For a page in a CMS it is recommended that this text is placed on the page as normal formatted text, not a HTML code block. You can change this text as you see fit, either keeping it as is or modifying to better fit your site's needs. Change you make to this text and disclaimer will not be affected by future updates, your changes will remain intact.
Alternatively you may choose to use an iFrame to display the calculator. The iframe will load the calculator and automatically size/resize responsively. If your page format has issues with your sites CSS, using an iFrame often eliminates that problem.
Simply add this code where you wish the calculator to appear.
Make sure that "index.html" above points to the deployment location of your calculators. This will load the index page, with links to the calculators in your package. You can also directly load a calculator by changing the "index.html" to the calculator html file instead. For example, "MortgageLoan.html" for the mortgage calculator.
