function calculateAverageRateOfChange() {
var funcStr = document.getElementById("functionExpression").value;
var x1 = parseFloat(document.getElementById("x1").value);
var x2 = parseFloat(document.getElementById("x2").value);
var resultDiv = document.getElementById("result");
if (isNaN(x1) || isNaN(x2) || funcStr.trim() === "") {
resultDiv.innerHTML = "Please enter valid numbers for x1 and x2, and a function expression.";
return;
}
if (x1 === x2) {
resultDiv.innerHTML = "The interval cannot be a single point (x1 must be different from x2).";
return;
}
try {
// Helper function to evaluate the expression at a given x
var evaluateFunction = function(x) {
// Replace 'x' with the numerical value, handle common math functions
var expression = funcStr.replace(/x/g, `(${x})`);
expression = expression.replace(/sin/g, 'Math.sin');
expression = expression.replace(/cos/g, 'Math.cos');
expression = expression.replace(/tan/g, 'Math.tan');
expression = expression.replace(/sqrt/g, 'Math.sqrt');
expression = expression.replace(/\^/g, '**'); // Handle exponentiation
// Use a safer evaluation method if possible or a library, but for simplicity here, using eval with caution.
// In a real-world scenario, consider a robust math expression parser.
return Function('"use strict";return (' + expression + ')')();
};
var y1 = evaluateFunction(x1);
var y2 = evaluateFunction(x2);
if (isNaN(y1) || isNaN(y2)) {
resultDiv.innerHTML = "Could not evaluate the function at the given x-values. Please check your function expression.";
return;
}
var averageRateOfChange = (y2 – y1) / (x2 – x1);
resultDiv.innerHTML = "The average rate of change of the function " + funcStr + " over the interval [" + x1 + ", " + x2 + "] is:
" + averageRateOfChange.toFixed(4) + "";
} catch (error) {
resultDiv.innerHTML = "Error evaluating function: " + error.message + ". Please check your function syntax.";
}
}
.calculator-container {
font-family: sans-serif;
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.calculator-form h2 {
text-align: center;
margin-bottom: 15px;
color: #333;
}
.calculator-form p {
margin-bottom: 20px;
color: #555;
text-align: justify;
line-height: 1.6;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #444;
}
.form-group input[type="text"],
.form-group input[type="number"] {
width: calc(100% – 12px);
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
.calculator-form button {
display: block;
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.calculator-form button:hover {
background-color: #0056b3;
}
.calculator-result {
margin-top: 25px;
padding: 15px;
background-color: #f9f9f9;
border: 1px solid #eee;
border-radius: 4px;
}
.calculator-result h3 {
margin-top: 0;
color: #333;
}
#result {
font-size: 1.1em;
color: #007bff;
font-weight: bold;
}