Introduction
Use the InteractiveCalculator Javascript API to make your website interact with the calculator.
Initialize the API
To listen to the calculatorLoaded event:
window.addEventListener("calculatorLoaded", () => {
const icInstance = ic.getInstance("CALCULATOR_ID");
});
Make sure to replace
CALCULATOR_ID
with your calculator ID.
You will need a paid InteractiveCalculator.com account and to enable the Javascript API in your InteractiveCalculator account
After you have embedded the calculator on your website, add the Javascript code on the right to initialize the API:
Events
window.addEventListener("calculatorLoaded", () => {
const icInstance = ic.getInstance("CALCULATOR_ID");
icInstance.on("interaction", function(event) {
console.log(event);
})
icInstance.on("submit", function(event) {
console.log(event);
})
});
Event | Description |
---|---|
interaction | an interaction was detected with one of the calculator items (a click, a key press, etc) |
submit | the calculator was submitted |
Questions
Get a question by the reference
window.addEventListener("calculatorLoaded", () => {
const icInstance = ic.getInstance("CALCULATOR_ID");
const QG = icInstance.questions.getByReference("QG");
console.log(QG.getValue());
QG.setValue("20");
});
Use the getByReference function to retrieve a question by it's reference.
All the calculator items are represented as "questions" (including buttons, images, formulas, texts, etc)
Question Methods
Method | Description |
---|---|
getValue | get the question value |
setValue | set the question value |
getDOMElement | get the DOM element for that question |