<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TVM Simulation System for Malaysian Higher Education</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
h1, h2 {
text-align: center;
color: #0056b3;
}
.container {
display: flex;
max-width: 1200px;
margin: 0 auto;
}
.sidebar {
width: 30%;
padding: 20px;
background-color: #fff;
border-right: 1px solid #ddd;
overflow-y: auto;
height: 80vh;
}
.main {
width: 70%;
padding: 20px;
}
.section {
margin-bottom: 20px;
background-color: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
#report {
margin-top: 20px;
padding: 15px;
background-color: #e9ecef;
border-radius: 8px;
display: none;
}
.formula {
font-style: italic;
color: #555;
}
@media print {
.sidebar, button { display: none; }
#report { display: block !important; }
}
</style>
</head>
<body>
<h1>Time Value of Money (TVM) Simulation System</h1>
<p style="text-align: center;">Designed for Higher Education Institutions in Malaysia. All examples use Malaysian Ringgit (MYR).</p>
<div class="container">
<div class="sidebar">
<h2>Guides and Notes</h2>
<div class="section">
<h3>Introduction to TVM</h3>
<p>The Time Value of Money (TVM) concept states that a sum of money is worth more now than the same sum in the future due to its potential earning capacity. This is fundamental in finance, especially in Malaysia's growing economy with investments in sectors like banking, real estate, and Islamic finance.</p>
<p>Key principles:</p>
<ul>
<li>Compounding: Earning interest on interest.</li>
<li>Discounting: Reducing future values to present terms.</li>
<li>Applications: Loans, investments, retirement planning in EPF (Employees Provident Fund), etc.</li>
</ul>
</div>
<div class="section">
<h3>All TVM Formulas</h3>
<p><strong>Future Value (FV) of a Single Sum:</strong><br>
FV = PV × (1 + r)^n<br>
<span class="formula">Where: PV = Present Value, r = interest rate per period, n = number of periods.</span></p>
<p><strong>Present Value (PV) of a Single Sum:</strong><br>
PV = FV / (1 + r)^n</p>
<p><strong>Future Value of an Ordinary Annuity (FVA):</strong><br>
FVA = PMT × [( (1 + r)^n - 1 ) / r]<br>
<span class="formula">PMT = periodic payment.</span></p>
<p><strong>Present Value of an Ordinary Annuity (PVA):</strong><br>
PVA = PMT × [ (1 - (1 + r)^(-n) ) / r ]</p>
<p><strong>Future Value of an Annuity Due:</strong><br>
FVAD = FVA × (1 + r)</p>
<p><strong>Present Value of an Annuity Due:</strong><br>
PVAD = PVA × (1 + r)</p>
<p><strong>Perpetuity PV:</strong><br>
PV = PMT / r<br>
<span class="formula">For infinite payments.</span></p>
<p><strong>Effective Annual Rate (EAR):</strong><br>
EAR = (1 + r/m)^m - 1<br>
<span class="formula">m = compounding periods per year.</span></p>
</div>
<div class="section">
<h3>Usage Guide</h3>
<p>1. Select the type of calculation from the dropdown.</p>
<p>2. Enter values in MYR where applicable (e.g., PV, FV, PMT).</p>
<p>3. Use decimal for rates (e.g., 5% = 0.05).</p>
<p>4. Click 'Calculate' to simulate.</p>
<p>5. View results and generate a report.</p>
<p>6. Print the report for educational purposes.</p>
</div>
</div>
<div class="main">
<h2>Simulation Interface</h2>
<div class="section">
<label for="calcType">Select Calculation Type:</label>
<select id="calcType">
<option value="fvSingle">Future Value of Single Sum</option>
<option value="pvSingle">Present Value of Single Sum</option>
<option value="fvAnnuity">Future Value of Ordinary Annuity</option>
<option value="pvAnnuity">Present Value of Ordinary Annuity</option>
<option value="fvAnnuityDue">Future Value of Annuity Due</option>
<option value="pvAnnuityDue">Present Value of Annuity Due</option>
<option value="perpetuity">Present Value of Perpetuity</option>
<option value="ear">Effective Annual Rate</option>
</select>
<div id="inputs">
<!-- Dynamic inputs will be added here -->
</div>
<button onclick="calculate()">Calculate</button>
<div id="result"></div>
</div>
<div id="report">
<h3>Simulation Report</h3>
<p id="reportContent"></p>
<button onclick="window.print()">Print Report</button>
</div>
</div>
</div>
<script>
const calcTypeSelect = document.getElementById('calcType');
const inputsDiv = document.getElementById('inputs');
const resultDiv = document.getElementById('result');
const reportDiv = document.getElementById('report');
const reportContent = document.getElementById('reportContent');
calcTypeSelect.addEventListener('change', updateInputs);
function updateInputs() {
const type = calcTypeSelect.value;
inputsDiv.innerHTML = '';
const fields = {
fvSingle: ['pv', 'r', 'n'],
pvSingle: ['fv', 'r', 'n'],
fvAnnuity: ['pmt', 'r', 'n'],
pvAnnuity: ['pmt', 'r', 'n'],
fvAnnuityDue: ['pmt', 'r', 'n'],
pvAnnuityDue: ['pmt', 'r', 'n'],
perpetuity: ['pmt', 'r'],
ear: ['r', 'm']
};
fields[type].forEach(field => {
const label = field.toUpperCase() + (field === 'r' ? ' (decimal, e.g., 0.05 for 5%)' : field === 'm' ? ' (compounding periods/year)' : '');
inputsDiv.innerHTML += `<label for="${field}">${label}:</label><input type="number" id="${field}" step="0.01" required>`;
});
}
function calculate() {
const type = calcTypeSelect.value;
let result;
let inputs = {};
try {
document.querySelectorAll('#inputs input').forEach(input => {
inputs[input.id] = parseFloat(input.value);
if (isNaN(inputs[input.id])) throw new Error('Invalid input');
});
switch (type) {
case 'fvSingle':
result = inputs.pv * Math.pow(1 + inputs.r, inputs.n);
break;
case 'pvSingle':
result = inputs.fv / Math.pow(1 + inputs.r, inputs.n);
break;
case 'fvAnnuity':
result = inputs.pmt * ( (Math.pow(1 + inputs.r, inputs.n) - 1) / inputs.r );
break;
case 'pvAnnuity':
result = inputs.pmt * ( (1 - Math.pow(1 + inputs.r, -inputs.n)) / inputs.r );
break;
case 'fvAnnuityDue':
result = inputs.pmt * ( (Math.pow(1 + inputs.r, inputs.n) - 1) / inputs.r ) * (1 + inputs.r);
break;
case 'pvAnnuityDue':
result = inputs.pmt * ( (1 - Math.pow(1 + inputs.r, -inputs.n)) / inputs.r ) * (1 + inputs.r);
break;
case 'perpetuity':
result = inputs.pmt / inputs.r;
break;
case 'ear':
result = Math.pow(1 + inputs.r / inputs.m, inputs.m) - 1;
break;
}
resultDiv.innerHTML = `<p>Result: MYR ${result.toFixed(2)}</p>`;
// Generate report
let reportText = `Calculation Type: ${calcTypeSelect.options[calcTypeSelect.selectedIndex].text}\n`;
for (let key in inputs) {
reportText += `${key.toUpperCase()}: ${inputs[key]}\n`;
}
reportText += `Result: MYR ${result.toFixed(2)}\n\nNotes: This simulation demonstrates TVM principles applicable in Malaysian contexts, such as loan calculations under Bank Negara Malaysia guidelines or investment returns in ASB/ASN funds.`;
reportContent.innerText = reportText;
reportDiv.style.display = 'block';
} catch (error) {
resultDiv.innerHTML = '<p style="color: red;">Error: Please enter valid numbers.</p>';
reportDiv.style.display = 'none';
}
}
// Initialize inputs on load
updateInputs();
</script>
</body>
</html>
Comments
Post a Comment