114 lines
5.2 KiB
HTML
114 lines
5.2 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="physics_quiz.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>物理知识测验 - 万有引力定律</h1>
|
||
<div class="difficulty-indicator difficulty-medium">当前难度：中等</div>
|
||
<div class="quiz-info">
|
||
共15道题，分三个难度级别。完成当前难度后将根据您的表现推荐下一难度。
|
||
</div>
|
||
</header>
|
||
|
||
<div class="question-section">
|
||
<!-- 试题将通过JavaScript动态渲染 -->
|
||
</div>
|
||
|
||
<div class="navigation-section" id="navigation">
|
||
<h3 id="navigation-message"></h3>
|
||
<button type="button" id="next-btn">开始答题</button>
|
||
</div>
|
||
|
||
<div class="submit-section">
|
||
<button type="button" id="submit-btn">提交答案</button>
|
||
<div id="result">
|
||
<div class="result-header">测验结果</div>
|
||
<div class="score">您的得分：<span id="score-value">0</span>/100分</div>
|
||
<div class="correct-answers">正确题数：<span id="correct-count">0</span>道</div>
|
||
<div class="incorrect-answers">错误题数：<span id="incorrect-count">0</span>道</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 学伴功能区域 -->
|
||
<div class="model-selector">
|
||
<label for="model-select">选择学伴:</label>
|
||
<select id="model-select">
|
||
<option value="shizuku">小智</option>
|
||
<option value="koharu">小荷</option>
|
||
<option value="wanko">汪喵</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="recording-indicator" id="recordingIndicator">
|
||
<div class="recording-dot"></div>
|
||
<span>正在录音...</span>
|
||
</div>
|
||
|
||
<div class="thinking-indicator" id="thinkingIndicator">
|
||
<div class="thinking-dots">
|
||
<div class="thinking-dot"></div>
|
||
<div class="thinking-dot"></div>
|
||
<div class="thinking-dot"></div>
|
||
</div>
|
||
<span>学伴正在思考中...</span>
|
||
</div>
|
||
|
||
<div class="recording-controls" style="position: fixed; right:37px; bottom: 230px; z-index: 998;">
|
||
<button class="record-button" id="startRecordBtn" style="font-size: 14px;">帮我讲题</button>
|
||
<button class="stop-button" id="stopRecordBtn" style="font-size: 14px;">停止讲话</button>
|
||
</div>
|
||
|
||
<div class="result-container" id="resultContainer">
|
||
<div>
|
||
<div class="result-header asr">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M12 1H4C2.89 1 2 1.9 2 3V13C2 14.1 2.89 15 4 15H12C13.11 15 14 14.1 14 13V3C14 1.9 13.11 1 12 1ZM12 13H4V3H12V13Z" fill="#007bff"/>
|
||
<path d="M8 4C6.34 4 5 5.34 5 7C5 8.66 6.34 10 8 10C9.66 10 11 8.66 11 7C11 5.34 9.66 4 8 4ZM8 8.5C7.17 8.5 6.5 7.83 6.5 7C6.5 6.17 7.17 5.5 8 5.5C8.83 5.5 9.5 6.17 9.5 7C9.5 7.83 8.83 8.5 8 8.5Z" fill="#007bff"/>
|
||
<path d="M8 11C5.79 11 4 12.79 4 15V16H12V15C12 12.79 10.21 11 8 11ZM8 13C9.1 13 10 13.9 10 15H6C6 13.9 6.9 13 8 13Z" fill="#007bff"/>
|
||
</svg>
|
||
你讲的话
|
||
</div>
|
||
<div class="result-text" id="asrResultText"></div>
|
||
</div>
|
||
<div>
|
||
<div class="result-header feedback">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M1 4C1 2.9 1.9 2 3 2H13C14.1 2 15 2.9 15 4V11C15 12.1 14.1 13 13 13H9L5 16V13H3C1.9 13 1 12.1 1 11V4Z" fill="#28a745"/>
|
||
<path d="M8 8H6V5H8V8ZM11 8H9V5H11V8ZM11 11H6V9H11V11Z" fill="#28a745"/>
|
||
</svg>
|
||
学伴回复
|
||
</div>
|
||
<div class="result-text" id="feedbackResultText"></div>
|
||
</div>
|
||
<div class="audio-player-container">
|
||
<button class="play-button" id="playAudioBtn">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M8 5V19L19 12L8 5Z" fill="white"/>
|
||
</svg>
|
||
</button>
|
||
<div class="audio-progress" id="audioProgress">
|
||
<div class="progress-bar" id="progressBar"></div>
|
||
</div>
|
||
<div class="audio-time" id="audioTime">00:00 / 00:00</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<a href="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/11%E3%80%81%E5%AD%A6%E4%BC%B4Chrome%E5%BD%95%E9%9F%B3%E9%85%8D%E7%BD%AE%E4%BF%AE%E6%94%B9.pdf">有权限问题？</a>
|
||
</div>
|
||
|
||
<!-- 引入看板娘相关脚本 -->
|
||
<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
|
||
<script src="live2d_widget.js"></script>
|
||
<!-- 引入试题数据和渲染逻辑 -->
|
||
<script src="physics_quiz.js"></script>
|
||
</body>
|
||
</html> |