672 lines
21 KiB
HTML
672 lines
21 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>AI智能游戏生成器 - 融光课堂</title>
|
||
<link rel="stylesheet" href="../css/indexDetail.css" />
|
||
<link rel="stylesheet" href="../css/userDisplay.css" />
|
||
<style>
|
||
.ai-generator-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
.generator-header {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 30px;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.generator-header h1 {
|
||
font-size: 2.5em;
|
||
margin-bottom: 10px;
|
||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.generator-header p {
|
||
font-size: 1.2em;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.generator-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 30px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.generator-panel {
|
||
background: white;
|
||
border-radius: 15px;
|
||
padding: 25px;
|
||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
||
border: 1px solid #e0e0e0;
|
||
}
|
||
|
||
.panel-title {
|
||
font-size: 1.5em;
|
||
font-weight: bold;
|
||
margin-bottom: 20px;
|
||
color: #333;
|
||
border-bottom: 2px solid #667eea;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-weight: 600;
|
||
color: #555;
|
||
}
|
||
|
||
.form-select,
|
||
.form-input {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
transition: border-color 0.3s;
|
||
}
|
||
|
||
.form-select:focus,
|
||
.form-input:focus {
|
||
outline: none;
|
||
border-color: #667eea;
|
||
}
|
||
|
||
.difficulty-slider {
|
||
width: 100%;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.difficulty-labels {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 0.9em;
|
||
color: #666;
|
||
}
|
||
|
||
.generate-btn {
|
||
width: 100%;
|
||
padding: 15px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 10px;
|
||
font-size: 1.1em;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.generate-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
||
}
|
||
|
||
.generate-btn:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
}
|
||
|
||
.game-preview {
|
||
background: #f8f9fa;
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
margin-top: 20px;
|
||
min-height: 200px;
|
||
}
|
||
|
||
.question-item {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
margin-bottom: 15px;
|
||
border-left: 4px solid #667eea;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.question-text {
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
color: #333;
|
||
}
|
||
|
||
.question-options {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 8px;
|
||
}
|
||
|
||
.option-item {
|
||
background: #e9ecef;
|
||
padding: 8px 12px;
|
||
border-radius: 5px;
|
||
text-align: center;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.stats-panel {
|
||
grid-column: 1 / -1;
|
||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
color: white;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 20px;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
padding: 15px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 10px;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 2em;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 0.9em;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.loading {
|
||
text-align: center;
|
||
padding: 40px;
|
||
color: #666;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 4px solid #f3f3f3;
|
||
border-top: 4px solid #667eea;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 20px;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.error-message {
|
||
background: #ffebee;
|
||
color: #c62828;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin: 15px 0;
|
||
border-left: 4px solid #c62828;
|
||
}
|
||
|
||
.success-message {
|
||
background: #e8f5e8;
|
||
color: #2e7d32;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin: 15px 0;
|
||
border-left: 4px solid #2e7d32;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.generator-content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.generator-header h1 {
|
||
font-size: 2em;
|
||
}
|
||
|
||
.question-options {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 导航条 -->
|
||
<div class="container-header">
|
||
<div class="container-header-logo">
|
||
<img src="../asset/logo.png" alt="logo" />
|
||
</div>
|
||
<nav class="container-header-nav">
|
||
<div data-url="indexHome">首页</div>
|
||
<div data-url="indexDetail">导航</div>
|
||
<div data-url="courseHome">课程</div>
|
||
<div data-url="student_analytics">数据分析</div>
|
||
<div class="active" data-url="ai_game_generator">AI游戏生成器</div>
|
||
</nav>
|
||
<div id="userDisplay" class="user-display"></div>
|
||
</div>
|
||
|
||
<!-- AI游戏生成器内容 -->
|
||
<div class="ai-generator-container">
|
||
<div class="generator-header">
|
||
<h1>🤖 AI智能游戏生成器</h1>
|
||
<p>
|
||
基于学习进度自动生成个性化游戏，智能调整难度，为每个学生定制专属学习体验
|
||
</p>
|
||
</div>
|
||
|
||
<div class="generator-content">
|
||
<!-- 游戏配置面板 -->
|
||
<div class="generator-panel">
|
||
<div class="panel-title">🎮 游戏配置</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">学科选择</label>
|
||
<select class="form-select" id="subjectSelect">
|
||
<option value="math">数学</option>
|
||
<option value="language">语文</option>
|
||
<option value="life">生活</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">游戏类型</label>
|
||
<select class="form-select" id="gameTypeSelect">
|
||
<option value="quiz">选择题游戏</option>
|
||
<option value="matching">配对游戏</option>
|
||
<option value="puzzle">拼图游戏</option>
|
||
<option value="memory">记忆游戏</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">题目数量</label>
|
||
<select class="form-select" id="questionCountSelect">
|
||
<option value="3">3题</option>
|
||
<option value="5" selected>5题</option>
|
||
<option value="8">8题</option>
|
||
<option value="10">10题</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label"
|
||
>难度等级: <span id="difficultyValue">1</span></label
|
||
>
|
||
<input
|
||
type="range"
|
||
class="difficulty-slider"
|
||
id="difficultySlider"
|
||
min="1"
|
||
max="5"
|
||
value="1"
|
||
/>
|
||
<div class="difficulty-labels">
|
||
<span>简单</span>
|
||
<span>中等</span>
|
||
<span>困难</span>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
class="generate-btn"
|
||
id="generateBtn"
|
||
onclick="generateGame()"
|
||
>
|
||
🚀 生成个性化游戏
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 游戏预览面板 -->
|
||
<div class="generator-panel">
|
||
<div class="panel-title">👀 游戏预览</div>
|
||
<div id="gamePreview" class="game-preview">
|
||
<div class="loading">
|
||
<div class="loading-spinner"></div>
|
||
<p>点击"生成个性化游戏"开始创建</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计面板 -->
|
||
<div class="generator-panel stats-panel">
|
||
<div class="panel-title">📊 学习统计</div>
|
||
<div class="stats-grid" id="statsGrid">
|
||
<div class="stat-item">
|
||
<div class="stat-value" id="currentDifficulty">1</div>
|
||
<div class="stat-label">当前难度</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value" id="totalGames">0</div>
|
||
<div class="stat-label">总游戏数</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value" id="successRate">0%</div>
|
||
<div class="stat-label">成功率</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value" id="avgTime">0s</div>
|
||
<div class="stat-label">平均用时</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 引入脚本 -->
|
||
<script src="../js/jquery-3.7.1.min.js"></script>
|
||
<script src="../js/apiService.js"></script>
|
||
<script src="../js/dataManager.js"></script>
|
||
<script src="../js/userManager.js"></script>
|
||
<script src="../js/aiGameGenerator.js"></script>
|
||
|
||
<script>
|
||
let currentGame = null;
|
||
let isGenerating = false;
|
||
|
||
// 页面加载完成后初始化
|
||
document.addEventListener("DOMContentLoaded", async function () {
|
||
try {
|
||
// 初始化用户管理器
|
||
await window.userManager.init();
|
||
window.userManager.createUserDisplay();
|
||
|
||
// 初始化数据管理器
|
||
await window.dataManager.init();
|
||
|
||
// 初始化AI游戏生成器
|
||
await window.aiGameGenerator.init();
|
||
|
||
// 更新统计信息
|
||
updateStats();
|
||
|
||
// 设置难度滑块事件
|
||
document
|
||
.getElementById("difficultySlider")
|
||
.addEventListener("input", function () {
|
||
document.getElementById("difficultyValue").textContent =
|
||
this.value;
|
||
window.aiGameGenerator.currentDifficulty = parseInt(this.value);
|
||
});
|
||
|
||
// 设置导航事件
|
||
document
|
||
.querySelectorAll(".container-header-nav > div")
|
||
.forEach((item) => {
|
||
item.addEventListener("click", function () {
|
||
const url = this.getAttribute("data-url");
|
||
if (url !== "ai_game_generator") {
|
||
window.open(`./${url}.html`);
|
||
}
|
||
});
|
||
});
|
||
|
||
console.log("AI游戏生成器页面初始化完成");
|
||
} catch (error) {
|
||
console.error("初始化失败:", error);
|
||
showError("初始化失败，请刷新页面重试");
|
||
}
|
||
});
|
||
|
||
// 生成游戏
|
||
async function generateGame() {
|
||
if (isGenerating) return;
|
||
|
||
const generateBtn = document.getElementById("generateBtn");
|
||
const gamePreview = document.getElementById("gamePreview");
|
||
|
||
try {
|
||
isGenerating = true;
|
||
generateBtn.disabled = true;
|
||
generateBtn.textContent = "🔄 生成中...";
|
||
|
||
// 显示加载状态
|
||
gamePreview.innerHTML = `
|
||
<div class="loading">
|
||
<div class="loading-spinner"></div>
|
||
<p>AI正在分析学习数据，生成个性化游戏...</p>
|
||
</div>
|
||
`;
|
||
|
||
// 获取当前用户
|
||
const currentUser = window.userManager.getCurrentUser();
|
||
if (!currentUser) {
|
||
throw new Error("请先登录");
|
||
}
|
||
|
||
// 获取配置
|
||
const subject = document.getElementById("subjectSelect").value;
|
||
const gameType = document.getElementById("gameTypeSelect").value;
|
||
const questionCount = parseInt(
|
||
document.getElementById("questionCountSelect").value
|
||
);
|
||
const difficulty = parseInt(
|
||
document.getElementById("difficultySlider").value
|
||
);
|
||
|
||
// 使用本地AI游戏生成器
|
||
if (!window.aiGameGenerator) {
|
||
throw new Error("AI游戏生成器未初始化");
|
||
}
|
||
|
||
// 设置难度
|
||
window.aiGameGenerator.currentDifficulty = difficulty;
|
||
|
||
// 生成完整游戏页面
|
||
const game = window.aiGameGenerator.generateGamePage(
|
||
subject,
|
||
gameType,
|
||
questionCount
|
||
);
|
||
|
||
if (game) {
|
||
currentGame = game;
|
||
// 显示游戏预览
|
||
displayGamePreview(currentGame);
|
||
showSuccess(
|
||
`成功生成${subject}学科的${gameType}游戏！游戏已嵌入当前页面。`
|
||
);
|
||
} else {
|
||
throw new Error("生成游戏失败");
|
||
}
|
||
} catch (error) {
|
||
console.error("生成游戏失败:", error);
|
||
showError("游戏生成失败，请重试");
|
||
gamePreview.innerHTML = `
|
||
<div class="loading">
|
||
<p>❌ 生成失败，请重试</p>
|
||
</div>
|
||
`;
|
||
} finally {
|
||
isGenerating = false;
|
||
generateBtn.disabled = false;
|
||
generateBtn.textContent = "🚀 生成个性化游戏";
|
||
}
|
||
}
|
||
|
||
// 显示游戏预览
|
||
function displayGamePreview(game) {
|
||
const gamePreview = document.getElementById("gamePreview");
|
||
|
||
let previewHTML = `
|
||
<div style="margin-bottom: 20px;">
|
||
<h3 style="color: #333; margin-bottom: 15px;">🎮 ${game.subject} - ${game.type} 游戏</h3>
|
||
<div style="display: flex; gap: 15px; margin-bottom: 15px; flex-wrap: wrap;">
|
||
<span style="background: #e3f2fd; color: #1976d2; padding: 5px 10px; border-radius: 15px; font-size: 0.9em;">
|
||
难度: ${game.difficulty}/5
|
||
</span>
|
||
<span style="background: #f3e5f5; color: #7b1fa2; padding: 5px 10px; border-radius: 15px; font-size: 0.9em;">
|
||
时间: ${game.timeLimit}秒
|
||
</span>
|
||
<span style="background: #e8f5e8; color: #388e3c; padding: 5px 10px; border-radius: 15px; font-size: 0.9em;">
|
||
提示: ${game.hints}次
|
||
</span>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 显示题目预览
|
||
game.questions.forEach((question, index) => {
|
||
previewHTML += `
|
||
<div class="question-item">
|
||
<div class="question-text">第${index + 1}题: ${
|
||
question.question
|
||
}</div>
|
||
<div class="question-options">
|
||
${question.options
|
||
.map(
|
||
(option) =>
|
||
`<div class="option-item">${option}</div>`
|
||
)
|
||
.join("")}
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
// 添加开始游戏按钮
|
||
previewHTML += `
|
||
<div style="text-align: center; margin-top: 20px;">
|
||
<button onclick="startGame()" style="
|
||
background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 30px;
|
||
border-radius: 25px;
|
||
font-size: 1.1em;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: transform 0.2s;
|
||
" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
|
||
🎯 开始游戏
|
||
</button>
|
||
</div>
|
||
`;
|
||
|
||
gamePreview.innerHTML = previewHTML;
|
||
}
|
||
|
||
// 开始游戏
|
||
function startGame() {
|
||
if (!currentGame) {
|
||
showError("请先生成游戏");
|
||
return;
|
||
}
|
||
|
||
// 这里可以跳转到游戏页面或打开游戏窗口
|
||
showSuccess("游戏即将开始！");
|
||
console.log("开始游戏:", currentGame);
|
||
|
||
// 可以在这里集成到现有的游戏系统
|
||
// 例如：window.open(`./play/game.html?gameId=${currentGame.id}`);
|
||
}
|
||
|
||
// 更新统计信息
|
||
async function updateStats() {
|
||
try {
|
||
const currentUser = window.userManager.getCurrentUser();
|
||
if (!currentUser) {
|
||
// 使用默认统计
|
||
document.getElementById("currentDifficulty").textContent = "1";
|
||
document.getElementById("totalGames").textContent = "0";
|
||
document.getElementById("successRate").textContent = "0%";
|
||
document.getElementById("avgTime").textContent = "0s";
|
||
return;
|
||
}
|
||
|
||
// 调用后端API获取统计
|
||
const response = await window.apiService.getStudentGameStats(
|
||
currentUser.id
|
||
);
|
||
|
||
if (response.success) {
|
||
const stats = response.data;
|
||
document.getElementById("currentDifficulty").textContent =
|
||
stats.currentLevel || 1;
|
||
document.getElementById("totalGames").textContent =
|
||
stats.totalGames || 0;
|
||
document.getElementById("successRate").textContent =
|
||
Math.round((stats.successRate || 0) * 100) + "%";
|
||
document.getElementById("avgTime").textContent =
|
||
Math.round(stats.avgTime || 0) + "s";
|
||
} else {
|
||
// 使用本地统计
|
||
const localStats = window.aiGameGenerator.getGameStats();
|
||
document.getElementById("currentDifficulty").textContent =
|
||
localStats.currentDifficulty;
|
||
document.getElementById("totalGames").textContent =
|
||
localStats.totalGames;
|
||
document.getElementById("successRate").textContent =
|
||
localStats.averageSuccessRate
|
||
? Math.round(localStats.averageSuccessRate * 100) + "%"
|
||
: "0%";
|
||
|
||
const avgTime =
|
||
localStats.performanceHistory.length > 0
|
||
? Math.round(
|
||
localStats.performanceHistory.reduce(
|
||
(sum, p) => sum + p.avgTimePerQuestion,
|
||
0
|
||
) / localStats.performanceHistory.length
|
||
)
|
||
: 0;
|
||
document.getElementById("avgTime").textContent = avgTime + "s";
|
||
}
|
||
} catch (error) {
|
||
console.error("获取统计信息失败:", error);
|
||
// 使用默认值
|
||
document.getElementById("currentDifficulty").textContent = "1";
|
||
document.getElementById("totalGames").textContent = "0";
|
||
document.getElementById("successRate").textContent = "0%";
|
||
document.getElementById("avgTime").textContent = "0s";
|
||
}
|
||
}
|
||
|
||
// 显示成功消息
|
||
function showSuccess(message) {
|
||
const gamePreview = document.getElementById("gamePreview");
|
||
const successDiv = document.createElement("div");
|
||
successDiv.className = "success-message";
|
||
successDiv.textContent = message;
|
||
gamePreview.insertBefore(successDiv, gamePreview.firstChild);
|
||
|
||
setTimeout(() => {
|
||
successDiv.remove();
|
||
}, 3000);
|
||
}
|
||
|
||
// 显示错误消息
|
||
function showError(message) {
|
||
const gamePreview = document.getElementById("gamePreview");
|
||
const errorDiv = document.createElement("div");
|
||
errorDiv.className = "error-message";
|
||
errorDiv.textContent = message;
|
||
gamePreview.insertBefore(errorDiv, gamePreview.firstChild);
|
||
|
||
setTimeout(() => {
|
||
errorDiv.remove();
|
||
}, 5000);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|