学习12
评估问卷
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<style>
body {
background-color: #f5f5f5;
font-family: "Microsoft YaHei", sans-serif;
}
/* 头部样式 */
.header {
background-color: #fff;
padding: 20px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.logo img {
max-height: 60px;
}
/* 搜索框样式 */
.search-wrap {
padding: 10px 0;
}
.search-box {
display: flex;
margin-bottom: 10px;
}
.search-box input {
flex: 1;
padding: 8px 15px;
border: 2px solid #007bff;
border-right: none;
border-radius: 4px 0 0 4px;
outline: none;
}
.search-box button {
padding: 8px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
.hot-search {
font-size: 14px;
color: #666;
}
/* 导航栏样式 */
.navbar-style {
background: #007bff !important;
padding: 0;
}
.navbar-style .navbar {
background: #007bff !important;
padding: 0;
}
.navbar-style .nav-link {
color: white !important;
padding: 15px 20px !important;
font-size: 16px;
transition: background-color 0.3s;
}
.navbar-style .nav-link:hover,
.navbar-style .nav-link.active {
background-color: #0056b3;
}
/* 主要内容区域样式 */
.main-content {
padding: 30px 0;
}
.card {
border: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.card-header {
background-color: #f8f9fa;
border-bottom: 2px solid #007bff;
padding: 15px;
}
.card-header h5 {
color: #007bff;
font-weight: bold;
}
.main-content {
padding: 40px 0;
}
.assessment-form {
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
overflow: hidden;
}
.form-header {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: white;
padding: 20px 30px;
}
.form-header h2 {
margin: 0;
font-size: 24px;
font-weight: 600;
}
.form-progress {
padding: 20px 30px;
background: #f8f9fa;
border-bottom: 1px solid #eee;
}
.progress {
height: 10px;
border-radius: 5px;
}
.form-section {
padding: 30px;
display: none;
}
.form-section.active {
display: block;
}
.question-group {
margin-bottom: 30px;
padding: 20px;
border-radius: 8px;
background: #f8f9fa;
}
.question-title {
font-weight: 600;
color: #007bff;
margin-bottom: 15px;
font-size: 18px;
}
.form-check {
margin-bottom: 10px;
padding-left: 30px;
}
.form-check-input:checked {
background-color: #007bff;
border-color: #007bff;
}
.form-navigation {
padding: 20px 30px;
background: #f8f9fa;
border-top: 1px solid #eee;
display: flex;
justify-content: space-between;
}
.btn-nav {
padding: 10px 25px;
border-radius: 5px;
font-weight: 500;
}
.section-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
color: #333;
padding-bottom: 10px;
border-bottom: 2px solid #007bff;
}
/* 添加动画效果 */
.form-section {
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<div class="header">
<div class="containter">
<div class="row">
<div class="col-lg-8 col-md-6">
<a href="#" class="logo">
<img src="#" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6">
<div class="search-wrap">
<form action="/Serach" method="get" class="search-box" target="_blank">
<input type="text" name="keys" autocomplete="off" value>
<button type="submit">搜索</button>
</form>
<dl class="hot-search">
<dt>
<span>热门搜索：</span>
</dt>
</dl>
</div>
</div>
</div>
</div>
</div>
<div class="navbar-style">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="./index.html">首页</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="assessmentDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
老年人定期评估
</a>
<ul class="dropdown-menu" aria-labelledby="assessmentDropdown">
<li><a class="dropdown-item" href="./评估目的.html">评估目的</a></li>
<li><a class="dropdown-item" href="./评估重要性.html">评估重要性</a></li>
<li><a class="dropdown-item" href="./评估指标和方法.html">评估指标和方法</a></li>
<li><a class="dropdown-item" href="./评估问卷.html">评估问卷</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="./评估数据查询页面.html">评估数据查询</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./通知公告.html">通知公告</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./常见问题解答.html">常见问题解答</a>
<!-- </li>
<li class="nav-item">
<a class="nav-link" href="#">专家老师</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">课程中心</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="./联系方式.html">联系方式</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#">证书查询</a>
</li> -->
</ul>
</div>
</div>
</nav>
</div>
<div class="main-content">
<div class="container">
<form class="assessment-form">
<div class="form-header">
<h2><i class="fas fa-clipboard-list me-2"></i>老年人能力评估问卷</h2>
</div>
<div class="form-progress">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%"></div>
</div>
</div>
<div class="form-section active" id="section1">
<div class="section-title">
<i class="fas fa-tasks me-2"></i>日常生活活动 (ADL)
</div>
<!-- 进食 -->
<div class="question-group">
<div class="question-title">进食: 老年人是否能够独立使用餐具进食？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="eating" id="eating1">
<label class="form-check-label" for="eating1">完全独立，可自行使用餐具</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="eating" id="eating2">
<label class="form-check-label" for="eating2">需要部分帮助</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="eating" id="eating3">
<label class="form-check-label" for="eating3">使用留置营养管</label>
</div>
</div>
<!-- 洗澡 -->
<div class="question-group">
<div class="question-title">洗澡: 老年人是否能够独立完成洗澡过程？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bathing" id="bathing1">
<label class="form-check-label" for="bathing1">完全独立，可自行完成</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bathing" id="bathing2">
<label class="form-check-label" for="bathing2">需要他人帮助</label>
</div>
</div>
<!-- 修饰 -->
<div class="question-group">
<div class="question-title">修饰: 老年人是否能够独立完成洗脸、刷牙、梳头、刮脸等？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="grooming" id="grooming1">
<label class="form-check-label" for="grooming1">完全独立</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="grooming" id="grooming2">
<label class="form-check-label" for="grooming2">需要帮助</label>
</div>
</div>
<!-- 穿衣 -->
<div class="question-group">
<div class="question-title">穿衣: 老年人是否能够独立穿脱衣服、系扣、拉拉链、穿脱鞋袜、系鞋带？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="dressing" id="dressing1">
<label class="form-check-label" for="dressing1">完全独立</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="dressing" id="dressing2">
<label class="form-check-label" for="dressing2">需要帮助</label>
</div>
</div>
<!-- 大便控制 -->
<div class="question-group">
<div class="question-title">大便控制: 老年人是否能够控制大便？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bowelControl" id="bowelControl1">
<label class="form-check-label" for="bowelControl1">完全控制</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bowelControl" id="bowelControl2">
<label class="form-check-label" for="bowelControl2">偶尔失控</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bowelControl" id="bowelControl3">
<label class="form-check-label" for="bowelControl3">完全失控</label>
</div>
</div>
<!-- 小便控制 -->
<div class="question-group">
<div class="question-title">小便控制: 老年人是否能够控制小便？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="urineControl" id="urineControl1">
<label class="form-check-label" for="urineControl1">完全控制</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="urineControl" id="urineControl2">
<label class="form-check-label" for="urineControl2">偶尔失控</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="urineControl" id="urineControl3">
<label class="form-check-label" for="urineControl3">完全失控</label>
</div>
</div>
<!-- 如厕 -->
<div class="question-group">
<div class="question-title">如厕: 老年人是否能够独立完成去厕所、解开衣裤、擦净、整理衣裤、冲水？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="toileting" id="toileting1">
<label class="form-check-label" for="toileting1">完全独立</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="toileting" id="toileting2">
<label class="form-check-label" for="toileting2">需要帮助</label>
</div>
</div>
<!-- 床椅转移 -->
<div class="question-group">
<div class="question-title">床椅转移: 老年人是否能够独立完成床椅转移？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bedTransfer" id="bedTransfer1">
<label class="form-check-label" for="bedTransfer1">完全独立</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bedTransfer" id="bedTransfer2">
<label class="form-check-label" for="bedTransfer2">部分帮助</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bedTransfer" id="bedTransfer3">
<label class="form-check-label" for="bedTransfer3">极大帮助</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="bedTransfer" id="bedTransfer4">
<label class="form-check-label" for="bedTransfer4">完全依赖他人</label>
</div>
</div>
<!-- 平地行走 -->
<div class="question-group">
<div class="question-title">平地行走: 老年人是否能够独立在平地上行走45m？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="walking" id="walking1">
<label class="form-check-label" for="walking1">完全独立</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="walking" id="walking2">
<label class="form-check-label" for="walking2">部分帮助</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="walking" id="walking3">
<label class="form-check-label" for="walking3">极大帮助</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="walking" id="walking4">
<label class="form-check-label" for="walking4">完全依赖他人</label>
</div>
</div>
<!-- 上下楼梯 -->
<div class="question-group">
<div class="question-title">上下楼梯: 老年人是否能够独立上下楼梯？</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="stairs" id="stairs1">
<label class="form-check-label" for="stairs1">完全独立</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="stairs" id="stairs2">
<label class="form-check-label" for="stairs2">部分帮助</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="stairs" id="stairs3">
<label class="form-check-label" for="stairs3">极大帮助</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="stairs" id="stairs4">
<label class="form-check-label" for="stairs4">完全依赖他人</label>
</div>
</div>
</div>
<!-- 第二部分：精神状态 -->
<div class="form-section" id="section2">
<div class="section-title">
<i class="fas fa-brain me-2"></i>精神状态
</div>
<!-- 认知功能 -->
<div class="question-group">
<div class="question-title">认知功能</div>
<p>请您依次回答以下问题，以评估老年人的认知功能。</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="cognitive" id="cognitive1">
<label class="form-check-label" for="cognitive1">老年人能够回忆出您刚刚说过的三个物品？</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="cognitive" id="cognitive2">
<label class="form-check-label" for="cognitive2">老年人能够正确绘制一个时钟，并标出10点45分？</label>
</div>
</div>
<!-- 攻击行为 -->
<div class="question-group">
<div class="question-title">攻击行为</div>
<p>请您根据老年人近期的表现，选择相应的选项。</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="aggression" id="aggression1">
<label class="form-check-label" for="aggression1">老年人出现过身体攻击行为（如打人、踢人）？</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="aggression" id="aggression2">
<label class="form-check-label" for="aggression2">老年人出现过语言攻击行为（如骂人、威胁）？</label>
</div>
</div>
<!-- 抑郁症状 -->
<div class="question-group">
<div class="question-title">抑郁症状</div>
<p>请您根据老年人近期的表现，选择相应的选项。</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="depression" id="depression1">
<label class="form-check-label" for="depression1">老年人情绪低落、不爱说话、不爱梳洗、不爱活动？</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="depression" id="depression2">
<label class="form-check-label" for="depression2">老年人有自杀念头或行为？</label>
</div>
</div>
</div>
<!-- 第三部分：感知觉与沟通 -->
<div class="form-section" id="section3">
<div class="section-title">
<i class="fas fa-eye me-2"></i>感知觉与沟通
</div>
<!-- 意识水平 -->
<div class="question-group">
<div class="question-title">意识水平</div>
<p>请您根据老年人的意识状态，选择相应的选项。</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="consciousness" id="consciousness1">
<label class="form-check-label" for="consciousness1">清醒，对周围环境警觉</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="consciousness" id="consciousness2">
<label class="form-check-label" for="consciousness2">嗜睡</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="consciousness" id="consciousness3">
<label class="form-check-label" for="consciousness3">昏睡</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="consciousness" id="consciousness4">
<label class="form-check-label" for="consciousness4">昏迷</label>
</div>
</div>
<!-- 视力 -->
<div class="question-group">
<div class="question-title">视力</div>
<p>请您评估老年人佩戴眼镜后的视力状况。</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="vision" id="vision1">
<label class="form-check-label" for="vision1">能看清书报上的标准字体</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="vision" id="vision2">
<label class="form-check-label" for="vision2">能看清楚大字体，但看不清书报上的标准字体</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="vision" id="vision3">
<label class="form-check-label" for="vision3">视力有限，看不清报纸大标题，但能辨认物体</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="vision" id="vision4">
<label class="form-check-label" for="vision4">辨认物体有困难，但眼睛能跟随物体移动，只能看到光、颜色和形状</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="vision" id="vision5">
<label class="form-check-label" for="vision5">没有视力，眼睛不能跟随物体移动</label>
</div>
</div>
<!-- 听力 -->
<div class="question-group">
<div class="question-title">听力</div>
<p>请您评估老年人佩戴助听器后的听力状况。</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="hearing" id="hearing1">
<label class="form-check-label" for="hearing1">能正常交谈，听到电视、电话、门铃的声音</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="hearing" id="hearing2">
<label class="form-check-label" for="hearing2">轻声说话或说话距离超过2米时听不清</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="hearing" id="hearing3">
<label class="form-check-label" for="hearing3">正常交流有些困难，需在安静的环境或大声说话才能听到</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="hearing" id="hearing4">
<label class="form-check-label" for="hearing4">讲话者大声说话或说话很慢，才能部分听见</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="hearing" id="hearing5">
<label class="form-check-label" for="hearing5">完全听不见</label>
</div>
</div>
<!-- 沟通交流 -->
<div class="question-group">
<div class="question-title">沟通交流</div>
<p>请您评估老年人与人沟通交流的能力。</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="communication" id="communication1">
<label class="form-check-label" for="communication1">能与他人正常沟通和交流</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="communication" id="communication2">
<label class="form-check-label" for="communication2">能表达自己的需要及理解别人的话，但需要增加时间或给予帮助</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="communication" id="communication3">
<label class="form-check-label" for="communication3">表达需要或理解有困难，需频繁重复或简化口头表达</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="communication" id="communication4">
<label class="form-check-label" for="communication4">不能表达需要或理解他人的话</label>
</div>
</div>
</div>
<!-- 第四部分：社会参与 -->
<div class="form-section" id="section4">
<div class="section-title">
<i class="fas fa-users me-2"></i>社会参与
</div>
<!-- 生活能力 -->
<div class="question-group">
<div class="question-title">生活能力</div>
<p>请您评估老年人处理日常生活事务的能力。</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="lifeSkills" id="lifeSkills1">
<label class="form-check-label" for="lifeSkills1">除个人生活自理外，能料理家务或当家管理事务</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="lifeSkills" id="lifeSkills2">
<label class="form-check-label" for="lifeSkills2">除个人生活自理外，能做家务，但欠好，家庭事务安排欠条理</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="lifeSkills" id="lifeSkills3">
<label class="form-check-label" for="lifeSkills3">个人生活能自理；只有在他人帮助下才能做些家务，但质量不好</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="lifeSkills" id="lifeSkills4">
<label class="form-check-label" for="lifeSkills4">个人基本生活事务能自理，在督促下可洗漱</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="lifeSkills" id="lifeSkills5">
<label class="form-check-label" for="lifeSkills5">个人基本生活事务需要部分帮助或完全依赖他人帮助</label>
</div>
</div>
<!-- 工作能力 -->
<div class="question-group">
<div class="question-title">工作能力</div>
<p>请您评估老年人处理工作的能力。</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="workSkills" id="workSkills1">
<label class="form-check-label" for="workSkills1">原来熟练的脑力工作或体力技巧性工作可照常进行</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="workSkills" id="workSkills2">
<label class="form-check-label" for="workSkills2">原来熟练的脑力工作或体力技巧性工作能力有所下降</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="workSkills" id="workSkills3">
<label class="form-check-label" for="workSkills3">原来熟练的脑力工作或体力技巧性工作明显不如以往，部分遗忘</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="workSkills" id="workSkills4">
<label class="form-check-label" for="workSkills4">对熟练工作只有一些片段保留，技能全部遗忘</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="workSkills" id="workSkills5">
<label class="form-check-label" for="workSkills5">对以往的知识或技能全部磨灭</label>
</div>
</div>
<!-- 时间/空间定向 -->
<div class="question-group">
<div class="question-title">时间/空间定向</div>
<p>请您评估老年人对时间和空间的感知能力。</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="timeSpaceOrientation" id="timeSpaceOrientation1">
<label class="form-check-label" for="timeSpaceOrientation1">时间观念清楚，可单独出远门，能很快掌握新环境的方位</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="timeSpaceOrientation" id="timeSpaceOrientation2">
<label class="form-check-label" for="timeSpaceOrientation2">时间观念有些下降，年、月、日清楚，但有时相差几天；可单独来往于近街，知道现住地的名称和方位，但不知回家路线</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="timeSpaceOrientation" id="timeSpaceOrientation3">
<label class="form-check-label" for="timeSpaceOrientation3">时间观念较差，年、月、日不清楚，可知上半年或下半年；只能单独在家附近行动，对现住地只知名称，不知道方位</label>
</div>
</div>
</div>
<div class="form-navigation">
<button type="button" class="btn btn-secondary btn-nav" id="prevBtn">
<i class="fas fa-arrow-left me-2"></i>上一步
</button>
<button type="button" class="btn btn-primary btn-nav" id="nextBtn">
下一步<i class="fas fa-arrow-right ms-2"></i>
</button>
</div>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 修改 axios 的基础配置
axios.defaults.baseURL = 'http://localhost:8080'; // 添加后端服务器地址
axios.defaults.withCredentials = true; // 允许跨域请求携带凭证
// 处理表单导航
let currentSection = 1;
const totalSections = 4;
function updateProgress() {
const progress = (currentSection / totalSections) * 100;
document.querySelector('.progress-bar').style.width = `${progress}%`;
}
function showSection(sectionNumber) {
document.querySelectorAll('.form-section').forEach(section => {
section.classList.remove('active');
});
document.getElementById(`section${sectionNumber}`).classList.add('active');
updateProgress();
}
let formData = {
// ADL部分
eating: '',
bathing: '',
grooming: '',
dressing: '',
bowelControl: '',
urineControl: '',
toileting: '',
bedTransfer: '',
walking: '',
stairs: '',
// 精神状态部分
cognitiveMemory: false,
cognitiveClock: false,
aggressionPhysical: false,
aggressionVerbal: false,
depressionMood: false,
depressionSuicide: false,
// 感知觉与沟通部分
consciousness: '',
vision: '',
hearing: '',
communication: '',
// 社会参与部分
lifeSkills: '',
workSkills: '',
timeSpaceOrientation: ''
};
// 修改收集数据的函数，确保数据格式与后端实体类匹配
function collectCurrentSectionData() {
const currentSectionElement = document.getElementById(`section${currentSection}`);
// 获取所有单选按钮的值
currentSectionElement.querySelectorAll('input[type="radio"]:checked').forEach(radio => {
const name = radio.getAttribute('name');
// 获取选中选项的文本内容，并限制长度
const value = radio.nextElementSibling.textContent.trim();
// 根据不同字段设置不同的最大长度
const maxLength = getMaxLength(name);
formData[convertToCamelCase(name)] = value.substring(0, maxLength);
});
// 获取所有复选框的值
currentSectionElement.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
const name = checkbox.getAttribute('name');
if (name === 'cognitive') {
if (checkbox.id === 'cognitive1') {
formData.cognitiveMemory = checkbox.checked;
} else if (checkbox.id === 'cognitive2') {
formData.cognitiveClock = checkbox.checked;
}
} else if (name === 'aggression') {
if (checkbox.id === 'aggression1') {
formData.aggressionPhysical = checkbox.checked;
} else if (checkbox.id === 'aggression2') {
formData.aggressionVerbal = checkbox.checked;
}
} else if (name === 'depression') {
if (checkbox.id === 'depression1') {
formData.depressionMood = checkbox.checked;
} else if (checkbox.id === 'depression2') {
formData.depressionSuicide = checkbox.checked;
}
}
});
}
// 辅助函数：转换为驼峰命名
function convertToCamelCase(str) {
return str.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
}
// 根据字段名获取最大长度
function getMaxLength(fieldName) {
const lengthMap = {
// ADL部分
eating: 100,
bathing: 100,
grooming: 100,
dressing: 100,
bowelControl: 100,
urineControl: 100,
toileting: 100,
bedTransfer: 100,
walking: 100,
stairs: 100,
// 感知觉与沟通部分
consciousness: 100,
vision: 200,
hearing: 200,
communication: 200,
// 社会参与部分
lifeSkills: 200,
workSkills: 200,
timeSpaceOrientation: 200
};
return lengthMap[fieldName] || 100; // 默认长度为100
}
// 修改提交问卷函数
function submitQuestionnaire() {
// 最后一次收集数据
collectCurrentSectionData();
// 打印数据，用于调试
console.log('提交的数据：', formData);
// 发送数据到后端
axios.post('/api/questionnaire/submit', formData, {
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
console.log('响应数据：', response.data);
if (response.data.code === '1') {
alert('问卷提交成功！');
// 重置表单
document.querySelector('form').reset();
// 返回第一部分
currentSection = 1;
showSection(currentSection);
} else {
alert(response.data.msg || '提交失败');
}
})
.catch(error => {
console.error('Submit error:', error);
alert('提交失败：' + (error.response?.data?.msg || '请稍后重试'));
});
}
// 添加表单验证
function validateForm() {
const currentSectionElement = document.getElementById(`section${currentSection}`);
const unfilledQuestions = [];
// 检查当前部分的所有问题组
currentSectionElement.querySelectorAll('.question-group').forEach(group => {
const questionTitle = group.querySelector('.question-title').textContent;
const hasChecked = group.querySelector('input[type="radio"]:checked, input[type="checkbox"]:checked');
if (!hasChecked) {
unfilledQuestions.push(questionTitle.split(':')[0]);
}
});
if (unfilledQuestions.length > 0) {
alert(`请完成以下问题：\n${unfilledQuestions.join('\n')}`);
return false;
}
return true;
}
// 修改下一步按钮的点击事件
document.getElementById('nextBtn').addEventListener('click', () => {
// 验证当前部分
if (!validateForm()) {
return;
}
// 收集当前部分的答案
collectCurrentSectionData();
if (currentSection < totalSections) {
currentSection++;
showSection(currentSection);
} else {
// 最后一部分完成时，提交整个问卷
submitQuestionnaire();
}
});
document.getElementById('prevBtn').addEventListener('click', () => {
if (currentSection > 1) {
currentSection--;
showSection(currentSection);
}
});
</script>
</body>
</html>
浙公网安备 33010602011771号