Embed Mortgage Calculator into Slide using java source code?

Jan 29, 2022

Greetings, 

I'm a total newbie with Storyline using the free trial and tutorials to teach myself while trying to develop my portfolio.  I've taken on a project to create a course for first time home renters/buyers and would like to include a mortgage calculator on one of the slides.  Another discussion post noted pasting the source code into the Video Insert Box, but it doesn't work.  The result is a static black and white box with no text or data entry options.  I'm totally lost as to how to make this work.  I have pasted the source code here in hopes that helps answer the question.  Thanks to anyone in advance for providing any insights!

<div><p align="center"><a href="https://www.mortgagecalculator.org/"><img src="https://www.mortgagecalculator.org/images/mortgage-calculator-logo.png" width="589" height="57" alt="MortgageCalculator.org" border="0" style="max-width: 100%;" target="_blank"></a></p> <iframe src="https://www.mortgagecalculator.org/webmasters/?downpayment=50000&homevalue=300000&loanamount=250000&interestrate=4&loanterm=30&propertytax=2400&pmi=1&homeinsurance=1000&monthlyhoa=0" style="width: 100%; height: 1200px; border: 0;"></iframe>
<div style="font-family: Arial; height: 36px; top: -36px; padding: 0 8px 0 0; box-sizing: border-box; text-align: right; background: #f6f9f9; border: 1px solid #ccc; color: #868686; line-height: 34px; font-size: 12px; position: relative;"> <a style="color: #868686;" href="https://www.mortgagecalculator.org/free-tools/javascript-mortgage-calculator.php" target="_blank">Javascript Mortgage Calculator</a> by MortgageCalculator.org</div>
</div>

4 Replies
Peter Mercier

Let me add one other question which may alleviate my concerns.  As another route, I input this source code into a new google sites page and it worked just fine after publishing.  Should it work (including interactivity) in storyline while I'm editing?  The preview when I try video or web object gives a message that it's not viewable in preview mode.  Is there another way to check it in Storyline without publishing or exporting?

Maria Costa-Stienstra

Hi, Peter.

Thank you for reaching out!

It sounds like you're trying to add the Mortgage Calculator widget as a web object in Storyline. Here are the steps I used in my example below: 

  • Go to Insert > Web Object

Windows 10 (1) 2022-01-31 at 9.27.23 AM

  • Enter the URL of the calculator. For the mortgage calculator, it would be:
    *https://www.mortgagecalculator.org/free-tools/calculator/*

Web objects can't be previewed. To view web objects in your course, publish for Review 360 or Web. For additional information, take a look at this article:

Windows 10 (1) 2022-01-31 at 9.34.20 AM

I hope this helps!

Ross Henderson

Thank you for sharing your query about embedding a mortgage calculator into an Articulate Storyline slide using Java source code. Is there any update on this issue? Did you manage to solve the problem? If you're looking for financial solutions or loans in Olongapo, you might want to check out https://triceloans.ph/lending-companies-olongapo/ that helps me a lot recently. They offer lending services and financial assistance that could help you manage your financial needs effectively. You can learn more about their offerings and services by visiting this link. Feel free to explore different resources to find the best solution for your project. Best of luck with embedding the mortgage calculator, and I hope you find the assistance you need for your financial endeavors!

Jose Tansengco

Hi Ross,

Happy to help!

There wasn't an actual issue identified in this thread, just some confusion with how web objects are previewed. With that being said, can I ask what specific issues are you encountering with the web object in your project? Are you seeing the same issue when the slide is previewed and published? As my colleague Maria mentioned, web objects can only be viewed when the course is published. Web objects won't display in edit or preview mode.

If your web object isn't displaying properly in the published output, please share a copy of your project file here or in private by opening a support case so we can take a closer look at what's happening. We'll delete it when we're done testing!