今天完成了社会评估相关代码，和前面一样这里就贴一个代码了：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>社会参与评估</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 600px;
}
.container h2 {
margin-bottom: 1rem;
text-align: center;
}
.section {
margin-bottom: 2rem;
display: none; /* 默认隐藏所有部分 */
}
.section.active {
display: block; /* 显示当前活动的部分 */
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
}
.form-group input[type="radio"] {
margin-right: 0.5rem;
}
.pagination {
text-align: center;
}
.pagination button {
padding: 0.7rem 1.5rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
margin: 0 0.5rem;
}
.pagination button:hover {
background-color: #0056b3;
}
.pagination button.disabled {
background-color: #ccc;
cursor: not-allowed;
}
.submit-btn {
width: 100%;
padding: 0.7rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
margin-top: 1rem;
}
.submit-btn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h2>社会参与评估表</h2>
<form id="assessmentForm" action="Social_result.jsp" method="post">
<!-- 第一部分 -->
<div class="section active" id="section1">
<h3>B.4.1 生活能力</h3>
<div class="form-group">
<label>0分，除个人生活自理外（如饮食、洗漱、穿戴、二便），能料理家务（如做饭、洗衣）或当家管理事务</label>
<label><input type="radio" name="livingSkills" value="0" required></label>
</div>
<div class="form-group">
<label>1分，除个人生活自理外，能做家务，但欠好，家庭事务安排欠条理</label>
<label><input type="radio" name="livingSkills" value="1"></label>
</div>
<div class="form-group">
<label>2分，个人生活自理；只有在他人帮助下才能做些家务，但质量不好</label>
<label><input type="radio" name="livingSkills" value="2"></label>
</div>
<div class="form-group">
<label>3分，个人基本生活事务能自理（如饮食、二便），在督促下可洗漱</label>
<label><input type="radio" name="livingSkills" value="3"></label>
</div>
<div class="form-group">
<label>4分，个人基本生活事务（如饮食、二便）需要部分帮助或完全依赖他人帮助</label>
<label><input type="radio" name="livingSkills" value="4"></label>
</div>
</div>
<!-- 第二部分 -->
<div class="section" id="section2">
<h3>B.4.2 工作能力</h3>
<div class="form-group">
<label>0分，原来熟练的脑力工作或体力技巧性工作可照常进行</label>
<label><input type="radio" name="workAbility" value="0" required></label>
</div>
<div class="form-group">
<label>1分，原来熟练的脑力工作或体力技巧性工作能力有所下降</label>
<label><input type="radio" name="workAbility" value="1"></label>
</div>
<div class="form-group">
<label>2分，原来熟练的脑力工作或体力技巧性工作明显不如以往，部分遗忘</label>
<label><input type="radio" name="workAbility" value="2"></label>
</div>
<div class="form-group">
<label>3分，对熟练工作只有一些片段保留，技能全部遗忘</label>
<label><input type="radio" name="workAbility" value="3"></label>
</div>
<div class="form-group">
<label>4分，对以往的知识或技能全部磨灭</label>
<label><input type="radio" name="workAbility" value="4"></label>
</div>
</div>
<!-- 第三部分 -->
<div class="section" id="section3">
<h3>B.4.3 时间/空间定向</h3>
<div class="form-group">
<label>0分，时间观念（年、月、日、时）清楚；可单独出远门，能很快掌握新环境的方位</label>
<label><input type="radio" name="timeSpaceOrientation" value="0" required></label>
</div>
<div class="form-group">
<label>1分，时间观念有些下降，年、月、日清楚，但有时相差几天；可单独来往于近街，知道现住地的名称和方位，但不知回家路线</label>
<label><input type="radio" name="timeSpaceOrientation" value="1"></label>
</div>
<div class="form-group">
<label>2分，时间观念较差，年、月、日不清楚，可知上半年或下半年；只能单独在家附近行动，对现住地只知名称，不知道方位</label>
<label><input type="radio" name="timeSpaceOrientation" value="2"></label>
</div>
<div class="form-group">
<label>3分，时间观念很差，年、月、日不清楚，可知上午或下午；只能在左邻右舍间串门，对现住地不知名称和方位</label>
<label><input type="radio" name="timeSpaceOrientation" value="3"></label>
</div>
<div class="form-group">
<label>4分，无时间观念；不能单独外出</label>
<label><input type="radio" name="timeSpaceOrientation" value="4"></label>
</div>
</div>
<!-- 第四部分 -->
<div class="section" id="section4">
<h3>B.4.4 人物定向</h3>
<div class="form-group">
<label>0分，知道周围人们的关系，知道祖孙、叔伯、姑姨、侄子侄女等称谓的意义；可分辨陌生人的大致年龄和身份，可用适当称呼</label>
<label><input type="radio" name="personOrientation" value="0" required></label>
</div>
<div class="form-group">
<label>1分，只知家中亲密近亲的关系，不会分辨陌生人的大致年龄，不能称呼陌生人</label>
<label><input type="radio" name="personOrientation" value="1"></label>
</div>
<div class="form-group">
<label>2分，只能称呼家中人，或只能照样称呼，不知其关系，不辨辈分</label>
<label><input type="radio" name="personOrientation" value="2"></label>
</div>
<div class="form-group">
<label>3分，只认识常同住的亲人，可称呼子女或孙子女，可辨熟人和生人</label>
<label><input type="radio" name="personOrientation" value="3"></label>
</div>
<div class="form-group">
<label>4分，只认识保护人，不辨熟人和生人</label>
<label><input type="radio" name="personOrientation" value="4"></label>
</div>
</div>
<!-- 第五部分 -->
<div class="section" id="section5">
<h3>B.4.5 社会参与</h3>
<div class="form-group">
<label>0分，参与社会，在社会环境有一定的适应能力，待人接物恰当</label>
<label><input type="radio" name="socialParticipation" value="0" required></label>
</div>
<div class="form-group">
<label>1分，能适应单纯环境，主动接触人，初见面时难让人发现智力问题，不能理解隐喻语</label>
<label><input type="radio" name="socialParticipation" value="1"></label>
</div>
<div class="form-group">
<label>2分，脱离社会，可被动接触，不会主动待人，谈话中很多不适词句，容易上当受骗</label>
<label><input type="radio" name="socialParticipation" value="2"></label>
</div>
<div class="form-group">
<label>3分，勉强可与人交往，谈吐内容不清楚，表情不恰当</label>
<label><input type="radio" name="socialParticipation" value="3"></label>
</div>
<div class="form-group">
<label>4分，难以与人接触</label>
<label><input type="radio" name="socialParticipation" value="4"></label>
</div>
</div>
<!-- 分页导航 -->
<div class="pagination">
<button id="prevBtn" onclick="goToPreviousSection()" class="disabled">上一页</button>
<span id="pageIndicator"></span>
<button id="nextBtn" onclick="goToNextSection()">下一页</button>
</div>
<!-- 提交按钮 -->
<button type="submit" class="submit-btn" style="display:none;" id="submitButton">提交</button>
</form>
</div>
<script>
let currentSection = 1;
const totalSections = document.querySelectorAll('.section').length;
function showCurrentSection() {
document.querySelectorAll('.section').forEach((section, index) => {
section.classList.toggle('active', index + 1 === currentSection);
});
updatePagination();
}
function updatePagination() {
document.getElementById('prevBtn').classList.toggle('disabled', currentSection === 1);
document.getElementById('nextBtn').classList.toggle('disabled', currentSection === totalSections);
document.getElementById('submitButton').style.display = currentSection === totalSections ? 'block' : 'none';
}
function goToNextSection() {
if (currentSection < totalSections) {
currentSection++;
showCurrentSection();
}
}
function goToPreviousSection() {
if (currentSection > 1) {
currentSection--;
showCurrentSection();
}
}
// 初始化显示第一部分
showCurrentSection();
</script>
</body>
</html>
效果：
浙公网安备 33010602011771号