sprint day5
1.项目预期任务量：15天
2.已花费时间：10天
3.剩余时间：5天
任务看板：
SCRUM会议照片：
产品状态：
独立考试界面
界面演示：承接上文，这里是独立考试界面，在考试界面添加的试题会在这里有显示
然后我们进行第二套试卷的作答 
答案提交完就不可以重复考试了 
代码：`
.sidebar {
width: 200px;
background-color: #f4f4f4;
padding: 20px;
display: flex;
flex-direction: column;
}
.sidebar button {
margin-bottom: 10px;
padding: 10px;
border: none;
border-radius: 4px;
background-color: #4a90e2;
color: white;
cursor: pointer;
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
}
.role-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #f8f9fa;
border-bottom: 1px solid #ddd;
}
.login-info {
font-size: 14px;
}
.logout-btn {
background-color: #ff4444;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
.question-table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
.question-table th,
.question-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.question-table th {
background-color: #f8f9fa;
font-weight: 600;
}
.action-btn {
padding: 6px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
margin-right: 5px;
background-color: #4a90e2;
color: white;
}
/* 新增考试卡片样式 */
.paper-card {
margin: 20px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
}
.paper-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.paper-type {
font-weight: bold;
color: #4a90e2;
}
.start-btn {
background-color: #28a745;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.submit-paper-btn {
background-color: #dc3545;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.paper-meta {
color: #666;
font-size: 14px;
}
/* 答题弹窗样式 */
.answer-popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.answer-popup input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.answer-popup button {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
background-color: #4a90e2;
color: white;
}
/* 搜索框样式 */
.search-box {
margin: 10px;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
</style>
<!-- 搜索框 -->
<input type="text" class="search-box" id="searchBox" placeholder="输入试卷类型搜索" oninput="filterPapers()">
<!-- 考试列表容器 -->
<div id="paperListContainer">
<!-- 考试卡片模板（动态生成） -->
</div>
<!-- 题目列表容器 -->
<div id="questionListContainer" style="display: none;">
<table class="question-table">
<thead>
<tr>
<th>题目内容</th>
<th>操作</th>
</tr>
</thead>
<tbody id="questionTableBody">
</tbody>
</table>
</div>
<!-- 答题弹窗 -->
<div class="answer-popup" id="answerPopup">
<h2>答题</h2>
<input type="hidden" id="answerPaperId">
<input type="hidden" id="answerQuestionId">
<input type="hidden" id="answerStudentName">
<label for="answerContent">答案：</label>
<input type="text" id="answerContent">
<button onclick="submitAnswer()">提交答案</button>
<button onclick="closeAnswerPopup()">取消</button>
</div>
浙公网安备 33010602011771号