347 lines
18 KiB
HTML
347 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>初中数学典型题思维导图</title>
|
||
<!-- 引入jsmind资源 -->
|
||
<link rel="stylesheet" type="text/css" href="./jsmind/jsmind.css" />
|
||
<script type="text/javascript" src="./jsmind/jsmind.js"></script>
|
||
<style>
|
||
html, body {
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.controls {
|
||
margin: 10px;
|
||
padding: 10px;
|
||
background-color: #e9ecef;
|
||
border-radius: 4px;
|
||
}
|
||
#mindmap-container {
|
||
flex: 1;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
button { margin-right: 10px; padding: 6px 12px; cursor: pointer; }
|
||
#status { margin-left: 10px; color: #666; }
|
||
|
||
/* 增强的强制右对齐样式 */
|
||
.jm-mindmap-container { justify-content: flex-end !important; }
|
||
.jm-node-container { flex-direction: row-reverse !important; }
|
||
.jm-node-wrap { float: right !important; }
|
||
.jm-line-container { justify-content: flex-end !important; }
|
||
.jm-right { display: flex !important; }
|
||
.jm-left { display: none !important; }
|
||
/* 根节点子节点强制右对齐终极方案 */
|
||
.jm-root > .jm-node-container > .jm-node-wrap {
|
||
float: right !important;
|
||
clear: right !important;
|
||
position: relative !important;
|
||
left: auto !important;
|
||
right: 0 !important;
|
||
}
|
||
/* 修改连接线起点位置 */
|
||
.jm-root > .jm-node-container > .jm-line-container {
|
||
justify-content: flex-end !important;
|
||
padding-left: 0 !important;
|
||
padding-right: 20px !important;
|
||
}
|
||
/* 掌握状态复选框样式 */
|
||
.mastery-checkbox { display: none; }
|
||
.mastery-checkbox + .mastery-icon { margin-right: 8px; cursor: pointer; }
|
||
.mastery-checkbox:not(:checked) + .mastery-icon::before { content: '❌'; color: #ff4d4f; }
|
||
.mastery-checkbox:checked + .mastery-icon::before { content: '✅'; color: #52c41a; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="controls">
|
||
<button onclick="addNode()">添加节点</button>
|
||
<button onclick="deleteNode()">删除节点</button>
|
||
<button onclick="saveMindMap()">保存数据</button>
|
||
<button onclick="resetMindMap()">重置画布</button>
|
||
<span id="status"></span>
|
||
</div>
|
||
<div id="mindmap-container"></div>
|
||
|
||
<script>
|
||
// 思维导图初始化配置
|
||
const mindMapOptions = {
|
||
container: 'mindmap-container',
|
||
theme: 'primary',
|
||
editable: true,
|
||
default_direction: 'right',
|
||
mode: 'full',
|
||
support_html: true // 添加HTML支持
|
||
};
|
||
|
||
// 初中数学典型题与解题思路数据
|
||
// 将军饮马问题及变形数据
|
||
const initialData = {
|
||
"meta": { "name": "将军饮马问题及变形解题思路", "author": "jsmind" },
|
||
"format": "node_tree",
|
||
"data": {
|
||
"id": "root",
|
||
"topic": "<a href='https://mp.weixin.qq.com/s?__biz=MzI1NjYzNjE1NQ==&mid=2247540913&idx=2&sn=7a061ec4c7dbbcc94b8bf2fa7d93f4c9&chksm=ea21c525dd564c33b578037e893e5190b92841f3db0837191864591bb3da0e10d8af7ce5da10&scene=27' target='_blank'>将军饮马问题及变形</a>",
|
||
"direction": "right",
|
||
"children": [
|
||
{
|
||
"id": "basic_model",
|
||
"topic": "<input type='checkbox' class='mastery-checkbox' data-id='basic_model'> <span class='mastery-icon'></span> 【类型一】 两定一动基本型",
|
||
"direction": "right",
|
||
"children": [
|
||
{ "id": "basic_feature", "topic": "特点：两定点A、B位于直线l同侧，在l上找一点P使PA+PB最短", "direction": "right" },
|
||
{ "id": "basic_solution", "topic": "解题思路：作A关于直线l的对称点A'，连接A'B交l于点P，P即为所求", "direction": "right" },
|
||
{ "id": "basic_case", "topic": "典型案例：牧马人从A地出发到河边饮水后到B地，怎样走路径最短", "direction": "right" }
|
||
]
|
||
},
|
||
{
|
||
"id": "two_points_one_line",
|
||
"topic": "<input type='checkbox' class='mastery-checkbox' data-id='two_points_one_line'> <span class='mastery-icon'></span> 【类型二】 两次对称型",
|
||
"direction": "right",
|
||
"children": [
|
||
{ "id": "two_points_feature", "topic": "特点：定点A、B位于平面内，有两条相交直线l、m，在l、m上分别找点P、Q使AP+PQ+QB最短", "direction": "right" },
|
||
{ "id": "two_points_solution", "topic": "解题思路：分别作A关于l的对称点A'，B关于m的对称点B'，连接A'B'交l于P，交m于Q", "direction": "right" },
|
||
{ "id": "two_points_case", "topic": "典型案例：台球两次反弹后撞击目标球，求反弹路径", "direction": "right" }
|
||
]
|
||
},
|
||
{
|
||
"id": "polygon_model",
|
||
"topic": "<input type='checkbox' class='mastery-checkbox' data-id='polygon_model'> <span class='mastery-icon'></span> 【类型三】 平移型",
|
||
"direction": "right",
|
||
"children": [
|
||
{ "id": "polygon_feature", "topic": "特点：在多边形边上找一点或多点，使路径之和最短", "direction": "right" },
|
||
{ "id": "polygon_solution", "topic": "解题思路：利用多边形对称性，通过多次作对称点转化为直线距离问题", "direction": "right" },
|
||
{ "id": "polygon_case", "topic": "典型案例：矩形ABCD中，E为AB上一点，在BC、CD上分别找点P、Q使EP+PQ+QA最短", "direction": "right" }
|
||
]
|
||
},
|
||
{
|
||
"id": "angle_model",
|
||
"topic": "<input type='checkbox' class='mastery-checkbox' data-id='angle_model'> <span class='mastery-icon'></span> 【类型四】 点到直线垂线段最短",
|
||
"direction": "right",
|
||
"children": [
|
||
{ "id": "angle_feature", "topic": "特点：定点A在∠MON内部，在OM、ON上分别找点B、C使△ABC周长最短", "direction": "right" },
|
||
{ "id": "angle_solution", "topic": "解题思路：分别作A关于OM、ON的对称点A'、A''，连接A'A''交OM于B，交ON于C", "direction": "right" },
|
||
{ "id": "angle_case", "topic": "典型案例：锐角三角形内一点到三边距离之和最短问题", "direction": "right" }
|
||
]
|
||
}
|
||
,
|
||
{
|
||
"id": "angle_model5",
|
||
"topic": "<input type='checkbox' class='mastery-checkbox' data-id='angle_model'> <span class='mastery-icon'></span> 【类型五】 三动点“将军饮马”问题",
|
||
"direction": "right",
|
||
"children": [
|
||
{ "id": "angle_feature", "topic": "特点：定点A在∠MON内部，在OM、ON上分别找点B、C使△ABC周长最短", "direction": "right" },
|
||
{ "id": "angle_solution", "topic": "解题思路：分别作A关于OM、ON的对称点A'、A''，连接A'A''交OM于B，交ON于C", "direction": "right" },
|
||
{ "id": "angle_case", "topic": "典型案例：锐角三角形内一点到三边距离之和最短问题", "direction": "right" }
|
||
]
|
||
}
|
||
,
|
||
{
|
||
"id": "angle_model6",
|
||
"topic": "<input type='checkbox' class='mastery-checkbox' data-id='angle_model'> <span class='mastery-icon'></span> 【类型六】 相对运动思想的运用",
|
||
"direction": "right",
|
||
"children": [
|
||
{ "id": "angle_feature", "topic": "特点：定点A在∠MON内部，在OM、ON上分别找点B、C使△ABC周长最短", "direction": "right" },
|
||
{ "id": "angle_solution", "topic": "解题思路：分别作A关于OM、ON的对称点A'、A''，连接A'A''交OM于B，交ON于C", "direction": "right" },
|
||
{ "id": "angle_case", "topic": "典型案例：锐角三角形内一点到三边距离之和最短问题", "direction": "right" }
|
||
]
|
||
}
|
||
,
|
||
{
|
||
"id": "angle_model7",
|
||
"topic": "<input type='checkbox' class='mastery-checkbox' data-id='angle_model'> <span class='mastery-icon'></span> 【类型七】 先找“河”，再“饮马”",
|
||
"direction": "right",
|
||
"children": [
|
||
{ "id": "angle_feature", "topic": "特点：定点A在∠MON内部，在OM、ON上分别找点B、C使△ABC周长最短", "direction": "right" },
|
||
{ "id": "angle_solution", "topic": "解题思路：分别作A关于OM、ON的对称点A'、A''，连接A'A''交OM于B，交ON于C", "direction": "right" },
|
||
{ "id": "angle_case", "topic": "典型案例：锐角三角形内一点到三边距离之和最短问题", "direction": "right" }
|
||
]
|
||
}
|
||
]
|
||
}
|
||
};
|
||
|
||
// 创建思维导图实例
|
||
const jm = new jsMind(mindMapOptions);
|
||
|
||
// 初始化函数
|
||
function init() {
|
||
// 彻底清除所有可能相关的本地存储数据
|
||
localStorage.removeItem('mindMapData');
|
||
localStorage.removeItem('savedMindMap');
|
||
localStorage.removeItem('jsmind_state');
|
||
|
||
// 尝试从本地存储加载数据
|
||
const savedData = localStorage.getItem('mindMapData');
|
||
if (savedData) {
|
||
try {
|
||
const data = JSON.parse(savedData);
|
||
jm.show(data);
|
||
updateStatus('已加载保存的数据');
|
||
return;
|
||
} catch (e) {
|
||
updateStatus('加载保存数据失败，使用初始数据');
|
||
}
|
||
}
|
||
// 使用初始数据
|
||
jm.show(initialData);
|
||
}
|
||
|
||
// 状态更新函数
|
||
function updateStatus(message) {
|
||
const statusElement = document.getElementById('status');
|
||
if (statusElement) {
|
||
statusElement.textContent = message;
|
||
setTimeout(() => { statusElement.textContent = ''; }, 3000);
|
||
}
|
||
}
|
||
|
||
// 保存思维导图数据到本地存储
|
||
function saveMindMapData() {
|
||
const mindData = jm.get_data();
|
||
localStorage.setItem('mindMapData', JSON.stringify(mindData));
|
||
}
|
||
|
||
// 添加节点功能
|
||
function addNode() {
|
||
const selectedNode = jm.get_selected_node();
|
||
if (!selectedNode) {
|
||
updateStatus('请先选择一个节点');
|
||
return;
|
||
}
|
||
const newNodeId = Date.now().toString();
|
||
const newNodeText = prompt('请输入新节点内容:', '新节点');
|
||
if (!newNodeText) return;
|
||
// 关键修复：使用jsmind原生支持的side参数，移除direction和position
|
||
jm.add_node(selectedNode, newNodeId, newNodeText, {
|
||
side: 'right' // 这是jsmind库控制节点位置的原生参数
|
||
});
|
||
saveMindMapData();
|
||
updateStatus('节点添加成功');
|
||
}
|
||
|
||
// 删除节点功能
|
||
function deleteNode() {
|
||
const selectedNode = jm.get_selected_node();
|
||
if (!selectedNode || selectedNode.isroot) {
|
||
updateStatus('不能删除根节点');
|
||
return;
|
||
}
|
||
jm.remove_node(selectedNode.id);
|
||
saveMindMapData();
|
||
updateStatus('节点已删除');
|
||
}
|
||
|
||
// 保存思维导图
|
||
function saveMindMap() {
|
||
saveMindMapData();
|
||
updateStatus('思维导图已保存到本地存储');
|
||
}
|
||
|
||
// 重置思维导图
|
||
function resetMindMap() {
|
||
if (confirm('确定要重置思维导图吗？当前数据将丢失')) {
|
||
localStorage.removeItem('mindMapData');
|
||
jm.show(initialData);
|
||
updateStatus('思维导图已重置');
|
||
}
|
||
}
|
||
|
||
// 页面加载完成后初始化
|
||
window.onload = function() {
|
||
init();
|
||
// Fixed: Use reliable timeout instead of unsupported event listener
|
||
setTimeout(initMasteryCheckboxes, 50);
|
||
};
|
||
|
||
// 初始化掌握状态复选框
|
||
function initMasteryCheckboxes() {
|
||
// 从本地存储加载掌握状态
|
||
const masteryStates = JSON.parse(localStorage.getItem('masteryStates') || '{}');
|
||
|
||
// 添加重试机制确保节点加载完成
|
||
const initializeNodes = () => {
|
||
let nodesInitialized = 0;
|
||
const totalNodes = Object.keys(masteryStates).length;
|
||
|
||
Object.keys(masteryStates).forEach(id => {
|
||
const checkbox = document.querySelector(`.mastery-checkbox[data-id='${id}']`);
|
||
if (checkbox) {
|
||
checkbox.checked = masteryStates[id];
|
||
|
||
// 重试获取节点直到成功或超时
|
||
let attempts = 0;
|
||
const maxAttempts = 5;
|
||
const tryGetNode = () => {
|
||
const node = jm.get_node(id);
|
||
if (node) {
|
||
nodesInitialized++;
|
||
if (checkbox.checked) {
|
||
jm.collapse_node(node);
|
||
// 确保子节点也被收起
|
||
if (node.children && node.children.length > 0) {
|
||
node.children.forEach(childId => {
|
||
const childNode = jm.get_node(childId);
|
||
if (childNode) jm.collapse_node(childNode);
|
||
});
|
||
}
|
||
} else {
|
||
jm.expand_node(node);
|
||
}
|
||
} else if (attempts < maxAttempts) {
|
||
attempts++;
|
||
setTimeout(tryGetNode, 200); // 200ms后重试
|
||
}
|
||
};
|
||
|
||
tryGetNode();
|
||
}
|
||
});
|
||
};
|
||
|
||
initializeNodes();
|
||
|
||
// 为所有复选框添加事件监听
|
||
document.addEventListener('click', function(e) {
|
||
if (e.target.classList.contains('mastery-icon')) {
|
||
const checkbox = e.target.previousElementSibling;
|
||
if (checkbox && checkbox.classList.contains('mastery-checkbox')) {
|
||
checkbox.checked = !checkbox.checked;
|
||
saveMasteryState(checkbox.dataset.id, checkbox.checked);
|
||
const node = jm.get_node(checkbox.dataset.id);
|
||
if (node) {
|
||
if (checkbox.checked) {
|
||
jm.collapse_node(node);
|
||
// 收起所有子节点
|
||
if (node.children && node.children.length > 0) {
|
||
node.children.forEach(childId => {
|
||
const childNode = jm.get_node(childId);
|
||
if (childNode) jm.collapse_node(childNode);
|
||
});
|
||
}
|
||
} else {
|
||
jm.expand_node(node);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 保存掌握状态到本地存储
|
||
function saveMasteryState(modelId, isMastered) {
|
||
const masteryStates = JSON.parse(localStorage.getItem('masteryStates') || '{}');
|
||
masteryStates[modelId] = isMastered;
|
||
localStorage.setItem('masteryStates', JSON.stringify(masteryStates));
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |