Answered
I've got the coding for a credit card interest fees calculator and would like to embed this as a passage format question (or as part of a passage format question) but when I select 'embed code' and click on Code, then enter the coding, it doesn't give a place for the result calculated to show up. Here's the coding I'm using:
<!DOCTYPE html>
<html>
<head>
<title>Credit Card Interest Calculator</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="calculator">
<h1>Credit Card Interest Calculator</h1>
<label for="balance">Initial Balance ($):</label>
<input type="number" id="balance" placeholder="Enter balance">
<label for="rate">Annual Interest Rate (%):</label>
<input type="number" id="rate" placeholder="Enter interest rate">
<label for="payment">Monthly Payment ($):</label>
<input type="number" id="payment" placeholder="Enter monthly payment">
<button id="calculate">Calculate</button>
<p id="result"></p>
</div>
<script src="script.js"></script>
</body>
</html>
After entering the data and clicking 'Calculate' nothing happens...Can you help?
Comments (1)
Hi Laura,
Your desired behavior can be achieved by utilizing in-line JavaScript. You may utilize the following code as an example. It can either be added to the passage question with the "Embed content" or "Code view" buttons in the toolbar of the rich text editor:
<h1 style="color: #333; text-align: center;">Credit Card Interest Calculator</h1><form style="background-color: #fff; padding: 20px; border-radius: 5px; width: 300px; margin: 0 auto;"><label for="initialBalance" style="font-weight: bold;">Initial Balance ($):</label> <input type="text" id="initialBalance" placeholder="Enter balance" style="padding: 5px; width: 100%; margin-bottom: 10px;"><br><label for="annualInterestRate" style="font-weight: bold;">Annual Interest Rate (%):</label> <input type="text" id="annualInterestRate" placeholder="Enter interest rate" style="padding: 5px; width: 100%; margin-bottom: 10px;"><br><label for="monthlyPayment" style="font-weight: bold;">Monthly Payment ($):</label> <input type="text" id="monthlyPayment" placeholder="Enter monthly payment" style="padding: 5px; width: 100%; margin-bottom: 10px;"><br><button data-ignore="1" onclick="var initialBalance = parseFloat(document.getElementById('initialBalance').value); var annualInterestRate = parseFloat(document.getElementById('annualInterestRate').value); var monthlyPayment = parseFloat(document.getElementById('monthlyPayment').value); if (isNaN(initialBalance) || isNaN(annualInterestRate) || isNaN(monthlyPayment)) { document.getElementById('result').innerHTML = 'Please enter valid numbers.'; } else { var b = initialBalance, i = annualInterestRate / 1200, p = monthlyPayment, n = Math.ceil(-(Math.log(1 - b * i / p) / Math.log(1 + i))); var totalInterest = 0; for (var month = 1; month <= n; month++) { var monthlyInterest = (b * i); var monthlyPrincipal = p - monthlyInterest; totalInterest += monthlyInterest; b -= monthlyPrincipal; } var formattedTotalInterest = totalInterest.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); document.getElementById('result').innerHTML = 'It will take ' + Math.floor(n / 12) + ' years and ' + (n % 12) + ' months to payoff the balance. The total interest is $' + formattedTotalInterest; } return false;" style="background-color: #007bff; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; margin-top: 10px;">Calculate</button></form><p id="result" style="font-weight: bold; font-size: 18px; margin: 20px auto; text-align: center;"><br></p>Depending on your needs, you may need to edit this example code. Additionally, you may want to consider reaching out to a developer or publisher familiar with creating and editing such content.