67 lines
2.5 KiB
HTML
67 lines
2.5 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>
|
||
|
|
<link rel="stylesheet" href="style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<header class="header">
|
||
|
|
<h1>日常英语学习</h1>
|
||
|
|
<p class="subtitle">场景对话练习</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="status-bar">
|
||
|
|
<div class="score">
|
||
|
|
<span id="score">得分: 0</span>
|
||
|
|
</div>
|
||
|
|
<div class="progress">
|
||
|
|
<span id="progress">进度: 1/10</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
<div class="scene-info">
|
||
|
|
<h2 id="scene-title">餐厅点餐</h2>
|
||
|
|
<p id="scene-description">在餐厅点餐的日常对话练习</p>
|
||
|
|
<div class="scene-image-container">
|
||
|
|
<img id="scene-image" src="" alt="场景插图" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="conversation-area">
|
||
|
|
<div id="conversation" class="conversation">
|
||
|
|
<!-- 对话内容将通过JavaScript动态添加 -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="question-area" class="question-area" style="display: none;">
|
||
|
|
<div class="question">
|
||
|
|
<h3 id="question-text">请选择合适的回答:</h3>
|
||
|
|
<div class="options">
|
||
|
|
<button class="option" data-index="0">选项1</button>
|
||
|
|
<button class="option" data-index="1">选项2</button>
|
||
|
|
<button class="option" data-index="2">选项3</button>
|
||
|
|
<button class="option" data-index="3">选项4</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="feedback" class="feedback" style="display: none;">
|
||
|
|
<p id="feedback-text">反馈信息</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="controls">
|
||
|
|
<button id="start-button" class="btn btn-primary">开始学习</button>
|
||
|
|
<button id="reset-button" class="btn btn-secondary">重新开始</button>
|
||
|
|
<button id="next-scene-button" class="btn btn-success" disabled>下一个场景</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="data.js"></script>
|
||
|
|
<script src="script.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|