250 lines
8.9 KiB
HTML
250 lines
8.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<title>基本GeoGebra操作页面</title>
|
|||
|
|
<script src="js/deployggb.js"></script>
|
|||
|
|
<style>
|
|||
|
|
.app-container {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#controlPanel {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 10px;
|
|||
|
|
min-width: 620px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-btn {
|
|||
|
|
padding: 8px 12px;
|
|||
|
|
background-color: #4CAF50;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-btn:hover {
|
|||
|
|
background-color: #45a049;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 批量指令输入框样式 */
|
|||
|
|
.command-input {
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: 150px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
padding: 8px;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
resize: vertical;
|
|||
|
|
font-family: monospace;
|
|||
|
|
font-size: 14px;
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
word-wrap: break-word;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h1>几何题图形交互功能演示</h1>
|
|||
|
|
<div class="app-container">
|
|||
|
|
<div id="ggbApplet"></div>
|
|||
|
|
<div id="controlPanel">
|
|||
|
|
示例：
|
|||
|
|
2025年长春中考数学第23题图
|
|||
|
|
<img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/wb/math.jpg">
|
|||
|
|
<!-- 添加批量指令输入区域 -->
|
|||
|
|
<textarea id="commandInput" class="command-input"
|
|||
|
|
placeholder="请输入GeoGebra指令，每行一条 例如: A=(1,2) B=(3,4) Line(A,B)"
|
|||
|
|
wrap="soft"></textarea>
|
|||
|
|
<button id="aiJieXi" class="control-btn">AI解析指令</button>
|
|||
|
|
<button id="executeCommands" class="control-btn">执行指令</button>
|
|||
|
|
<button id="executeErCiCommands" class="control-btn">二次函数示例</button>
|
|||
|
|
<button id="clearCanvas" class="control-btn">清空画布</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 配置GGB小程序参数
|
|||
|
|
const params = {
|
|||
|
|
width: 1024,
|
|||
|
|
height: 600,
|
|||
|
|
showToolBar: true,
|
|||
|
|
showAlgebraInput: true,
|
|||
|
|
showMenuBar: true,
|
|||
|
|
appletOnLoad: function (api) {
|
|||
|
|
console.log('GeoGebra applet loaded successfully');
|
|||
|
|
window.ggbApi = api; // 将API保存到全局变量
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 创建并注入GGB小程序
|
|||
|
|
const ggbApplet = new GGBApplet(params, true);
|
|||
|
|
window.onload = function () {
|
|||
|
|
ggbApplet.inject('ggbApplet');
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<script>
|
|||
|
|
// 添加清空画布功能
|
|||
|
|
document.getElementById('clearCanvas').addEventListener('click', function () {
|
|||
|
|
if (window.ggbApi) {
|
|||
|
|
if (confirm('确定要清空当前画布和指令输入框吗？')) {
|
|||
|
|
// 检查ggbApplet是否已加载
|
|||
|
|
if (window.ggbApplet && window.ggbApplet.reset) {
|
|||
|
|
window.ggbApplet.reset();
|
|||
|
|
// 清空指令输入框
|
|||
|
|
document.getElementById('commandInput').value = '';
|
|||
|
|
} else {
|
|||
|
|
alert('GeoGebra尚未完全加载，请稍候重试');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
alert('GeoGebra尚未完全加载，请稍候...');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
document.getElementById('aiJieXi').addEventListener('click', function () {
|
|||
|
|
document.getElementById('commandInput').value = `t=Slider(0,4*sqrt(2),0.01,1,140,false,true,false,false)
|
|||
|
|
A=(0,0)
|
|||
|
|
B=(4*sqrt(2),0)
|
|||
|
|
C=(2*sqrt(2),2*sqrt(2))
|
|||
|
|
D=(sqrt(2),sqrt(2))
|
|||
|
|
E=(t,0)
|
|||
|
|
F=Rotate(D,-45°,E)
|
|||
|
|
Segment(A,B)
|
|||
|
|
Segment(B,C)
|
|||
|
|
Segment(A,C)
|
|||
|
|
Segment(D,E)
|
|||
|
|
Segment(E,F)
|
|||
|
|
`
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 将 # 开头的行注释全部去掉
|
|||
|
|
* @param {string} raw - 原始带注释的 GGB 指令
|
|||
|
|
* @returns {string} - 去掉注释后的可执行指令
|
|||
|
|
*/
|
|||
|
|
function stripGGBComments(raw) {
|
|||
|
|
return raw
|
|||
|
|
.split('\n') // 按行拆分
|
|||
|
|
.map(line => line.replace(/#.*$/, '').trim()) // 去掉 # 及之后内容
|
|||
|
|
.filter(line => line.length > 0) // 去掉空行
|
|||
|
|
.join('\n'); // 重新拼成多行文本
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
<!-- 在清空画布脚本之后添加 -->
|
|||
|
|
// 批量执行指令功能
|
|||
|
|
document.getElementById('executeCommands').addEventListener('click', function () {
|
|||
|
|
if (!window.ggbApplet || !window.ggbApplet.evalCommand) {
|
|||
|
|
alert('GeoGebra尚未完全加载，请稍候重试');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const commandInput = document.getElementById('commandInput');
|
|||
|
|
const commands = commandInput.value.trim().split('\n');
|
|||
|
|
|
|||
|
|
if (commands.length === 0 || (commands.length === 1 && commands[0] === '')) {
|
|||
|
|
alert('请输入至少一条指令');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let successCount = 0;
|
|||
|
|
let errorCount = 0;
|
|||
|
|
const errorCommands = [];
|
|||
|
|
|
|||
|
|
commands.forEach((command, index) => {
|
|||
|
|
command = command.trim();
|
|||
|
|
command = stripGGBComments(command)
|
|||
|
|
if (!command) return;
|
|||
|
|
if (command.startsWith("#")) return;
|
|||
|
|
try {
|
|||
|
|
window.ggbApplet.evalCommand(command);
|
|||
|
|
successCount++;
|
|||
|
|
} catch (e) {
|
|||
|
|
errorCount++;
|
|||
|
|
errorCommands.push(`${index + 1}: ${command} (${e.message})`);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (errorCount === 0) {
|
|||
|
|
//alert(`全部指令执行完成，共成功${successCount}条`);
|
|||
|
|
} else {
|
|||
|
|
alert(`执行完成：成功${successCount}条，失败${errorCount}条\n失败指令：\n${errorCommands.join('\n')}`);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
document.getElementById('executeErCiCommands').addEventListener('click', function () {
|
|||
|
|
if (!window.ggbApplet || !window.ggbApplet.evalCommand) {
|
|||
|
|
alert('GeoGebra尚未完全加载，请稍候重试');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const commandInput = '# ========= 1 二次函数（开口向下，顶点在 (2,3)） =========\n' +
|
|||
|
|
'a = -0.5\n' +
|
|||
|
|
'h = 2\n' +
|
|||
|
|
'k = 3\n' +
|
|||
|
|
'f(x) = a * (x - h)^2 + k # 形如 y = a(x-h)^2 + k\n' +
|
|||
|
|
'\n' +
|
|||
|
|
'# ========= 2 直线（斜率 m、截距 q 可调） =========\n' +
|
|||
|
|
'm = 0.5\n' +
|
|||
|
|
'q = -1\n' +
|
|||
|
|
'g(x) = m * x + q\n' +
|
|||
|
|
'\n' +
|
|||
|
|
'# ========= 3 交点 =========\n' +
|
|||
|
|
'A = Intersect(f, g, 1) # 第 1 个交点\n' +
|
|||
|
|
'B = Intersect(f, g, 2) # 第 2 个交点（若存在）\n' +
|
|||
|
|
'\n' +
|
|||
|
|
'# ========= 4 动点 P 在 f 上滑动 =========\n' +
|
|||
|
|
'# 用滑动条 t 驱动\n' +
|
|||
|
|
't = Slider(-3, 6, 0.01, 1, 200, false, true, false, false)\n' +
|
|||
|
|
'P = (t, f(t)) # 动点\n' +
|
|||
|
|
'\n' +
|
|||
|
|
'# ========= 5 动态几何量 =========\n' +
|
|||
|
|
'# 5.1 P 到直线 g 的垂直距离\n' +
|
|||
|
|
'd = Distance(P, g)\n' +
|
|||
|
|
'\n' +
|
|||
|
|
'# 5.2 P 处切线斜率（修正点：使用导数函数名）\n' +
|
|||
|
|
'f_prime(x) = Derivative(f) # 合法函数名（避免特殊字符）\n' +
|
|||
|
|
'TangSlope = f_prime(t) # 在 t 处的导数值\n' +
|
|||
|
|
'TangLine: y - f(t) = TangSlope * (x - t) # 切线方程（隐式定义）\n' +
|
|||
|
|
'\n' +
|
|||
|
|
'# 5.3 三角形 PAB 的面积（修正点：使用 abs 函数）\n' +
|
|||
|
|
'Area = 0.5 * abs( x(A) * y(B) - x(B) * y(A) + x(B) * y(P) - x(P) * y(B) + x(P) * y(A) - x(A) * y(P) )\n'
|
|||
|
|
const commands = commandInput.trim().split('\n');
|
|||
|
|
|
|||
|
|
if (commands.length === 0 || (commands.length === 1 && commands[0] === '')) {
|
|||
|
|
alert('请输入至少一条指令');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let successCount = 0;
|
|||
|
|
let errorCount = 0;
|
|||
|
|
const errorCommands = [];
|
|||
|
|
|
|||
|
|
commands.forEach((command, index) => {
|
|||
|
|
command = command.trim();
|
|||
|
|
command = stripGGBComments(command)
|
|||
|
|
if (!command) return;
|
|||
|
|
if (command.startsWith("#")) return;
|
|||
|
|
try {
|
|||
|
|
window.ggbApplet.evalCommand(command);
|
|||
|
|
successCount++;
|
|||
|
|
} catch (e) {
|
|||
|
|
errorCount++;
|
|||
|
|
errorCommands.push(`${index + 1}: ${command} (${e.message})`);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (errorCount === 0) {
|
|||
|
|
//alert(`全部指令执行完成，共成功${successCount}条`);
|
|||
|
|
} else {
|
|||
|
|
alert(`执行完成：成功${successCount}条，失败${errorCount}条\n失败指令：\n${errorCommands.join('\n')}`);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|