console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no">
<title>当代大学生课余运动情况调研</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Microsoft YaHei","PingFang SC",sans-serif;overflow:hidden}
.container{width:100%;height:100vh;position:relative}
.page{width:100%;height:100%;position:absolute;top:0;left:0;display:none;flex-direction:column;justify-content:flex-start;align-items:center;padding:18px 18px 30px 18px;background:linear-gradient(180deg,#dff8d8,#b9ecaa,#9be28a);color:#222}
.page.active{display:flex;animation:fadeIn 0.5s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.page-indicator{position:fixed;top:10px;right:18px;color:#4caf50;font-size:15px;background:rgba(255,255,255,0.85);padding:7px 14px;border-radius:20px;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.top-tag{width:100%;max-width:720px;display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding:0 8px}
.logo-circle{width:42px;height:42px;border-radius:50%;background:#4caf50;color:white;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:bold}
.top-title{font-size:16px;color:#4caf50;font-weight:bold}
.content-card{width:100%;max-width:720px;background:rgba(255,255,255,0.96);border-radius:20px;padding:22px 18px;box-shadow:0 8px 24px rgba(0,0,0,0.12);flex:1;overflow-y:auto;max-height:calc(100vh - 210px)}
h1{font-size:28px;text-align:center;margin-bottom:10px;color:#2e7d32;font-weight:bold}
.info-name{text-align:center;font-size:17px;color:#2e7d32;margin-bottom:16px}
h2{font-size:22px;text-align:center;margin-bottom:16px;color:#2e7d32;font-weight:bold}
.decor-img{width:100%;height:150px;border-radius:16px;margin-bottom:16px;background:linear-gradient(135deg,#81c784,#4caf50);display:flex;align-items:center;justify-content:center;font-size:24px;color:white}
.content-card p{font-size:16px;line-height:1.8;margin-bottom:14px;text-indent:2em;color:#333}
.content-card ul{margin-left:24px;margin-bottom:14px}
.content-card li{margin-bottom:10px;line-height:1.7;color:#333}
.question{margin-bottom:22px;padding-bottom:16px;border-bottom:1px dashed #ddd}
.question:last-child{border-bottom:none}
.options{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.option{display:flex;align-items:center;gap:10px;font-size:16px;color:#333}
textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #ccc;margin-top:8px;font-size:16px;background:#fafafa}
.ending{text-align:center;font-size:21px;margin-top:24px;font-weight:bold;color:#2e7d32}
.nav{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:18px;z-index:100}
.nav button{padding:12px 28px;font-size:16px;border:none;border-radius:25px;background:#4caf50;color:white;cursor:pointer;box-shadow:0 4px 12px rgba(76,175,80,0.35);transition:all 0.3s}
.nav button:active{transform:translateY(-2px);box-shadow:0 6px 16px rgba(76,175,80,0.45)}
.nav button:disabled{opacity:0.45;cursor:not-allowed;transform:none}
.bottom-decor{position:absolute;bottom:0;left:0;width:100%;height:70px;pointer-events:none;display:flex;align-items:flex-end;justify-content:center;gap:12px;font-size:24px;color:#66bb6a;opacity:0.55}
</style>
</head>
<body>
<div class="container">
<div class="page-indicator" id="indicator">1 / 7</div>
<div class="page active">
<div class="top-tag">
<div class="logo-circle">运</div>
<div class="top-title">大学生课余运动调研</div>
<div style="width:42px;"></div>
</div>
<div class="content-card">
<h1>当代大学生课余运动情况调研</h1>
<div class="info-name">姓名：张梦雨 班级：本科国际商务2501</div>
<div class="decor-img">运动调研封面</div>
<p>健康的体魄是大学生学习生活的重要基础。为了解当代大学生课余体育锻炼真实现状，本次调研面向在校大学生收集信息，挖掘大学生运动存在的现实困境，探索推动大学生参与课余运动的可行路径。</p>
<p>本调研为匿名调研，收集数据仅用于课程研究，不会泄露个人信息，请根据真实情况填写。</p>
<p style="text-align:center;text-indent:0;margin-top:20px;font-weight:500;">青春运动，活力校园。<br>左滑或点击按钮开始浏览</p>
</div>
<div class="bottom-decor">————————</div>
</div>
<div class="page">
<div class="top-tag">
<div class="logo-circle">运</div>
<div class="top-title">调研背景</div>
<div style="width:42px;"></div>
</div>
<div class="content-card">
<h2>一、调研背景</h2>
<div class="decor-img">调研背景</div>
<p>在大学生日常学习生活中，课业压力、线上娱乐占据了大量课余时间。多数大学生了解运动有益于身心健康，但实际主动参与课余锻炼的时间较少。</p>
<p>长期缺少体育锻炼，容易造成体能下降、疲惫焦虑等问题。课余运动不仅可以强健身体，也能够舒缓情绪、丰富课余生活。</p>
<p>本次调研希望摸清大学生课余运动现状，找出阻碍运动的因素，为引导大学生养成运动习惯提供参考。</p>
</div>
<div class="bottom-decor">————————</div>
</div>
<div class="page">
<div class="top-tag">
<div class="logo-circle">运</div>
<div class="top-title">理论意义</div>
<div style="width:42px;"></div>
</div>
<div class="content-card">
<h2>二、调研意义（理论意义）</h2>
<div class="decor-img">理论意义</div>
<ul>
<li><strong>完善大学生体育现状研究</strong><br>收集一手调研数据，丰富当代大学生课余体育相关调研资料。</li>
<li><strong>探究运动影响因素</strong><br>分析时间、同伴、场地、个人意愿等因素对大学生运动行为的影响。</li>
<li><strong>实践社会调研方法</strong><br>完整完成选题、问卷设计、调研分析流程，熟悉社会调查的规范。</li>
</ul>
</div>
<div class="bottom-decor">————————</div>
</div>
<div class="page">
<div class="top-tag">
<div class="logo-circle">运</div>
<div class="top-title">实践意义</div>
<div style="width:42px;"></div>
</div>
<div class="content-card">
<h2>二、调研意义（实践意义）</h2>
<div class="decor-img">实践意义</div>
<ul>
<li><strong>给高校体育工作提供参考</strong><br>帮助学校了解学生运动痛点，优化运动场地、体育活动安排。</li>
<li><strong>引导大学生关注自身健康</strong><br>让参与者反思自己的运动习惯，树立主动锻炼的意识。</li>
<li><strong>营造校园运动氛围</strong><br>根据调研发现的问题，提出可行建议，带动校园体育风气。</li>
</ul>
</div>
<div class="bottom-decor">————————</div>
</div>
<div class="page">
<div class="top-tag">
<div class="logo-circle">运</div>
<div class="top-title">填写说明</div>
<div style="width:42px;"></div>
</div>
<div class="content-card">
<h2>三、调研对象与填写说明</h2>
<div class="decor-img">填写说明</div>
<ul>
<li><strong>调研对象</strong><br>在校全日制大学生，覆盖不同年级、不同专业。</li>
<li><strong>调研方式</strong><br>匿名线上问卷调研，答案没有对错之分。</li>
<li><strong>数据用途</strong><br>问卷数据仅用于本次课程调研分析，不会对外泄露信息。</li>
<li><strong>填写提示</strong><br>请结合你真实的课余情况选择答案。</li>
</ul>
</div>
<div class="bottom-decor">————————</div>
</div>
<div class="page">
<div class="top-tag">
<div class="logo-circle">运</div>
<div class="top-title">问卷一</div>
<div style="width:42px;"></div>
</div>
<div class="content-card">
<h2>四、问卷题目（一）</h2>
<div class="decor-img">问卷题目</div>
<div class="question">
<p><strong>Q1：你每周进行课余运动的频率？</strong></p>
<div class="options">
<div class="option"><input type="radio" name="q1"> 几乎不运动</div>
<div class="option"><input type="radio" name="q1"> 每周1-2次</div>
<div class="option"><input type="radio" name="q1"> 每周3-4次</div>
<div class="option"><input type="radio" name="q1"> 每周5次及以上</div>
</div>
</div>
<div class="question">
<p><strong>Q2：你经常参与哪些课余运动？（多选）</strong></p>
<div class="options">
<div class="option"><input type="checkbox" name="q2"> 跑步/快走</div>
<div class="option"><input type="checkbox" name="q2"> 球类运动</div>
<div class="option"><input type="checkbox" name="q2"> 健身/力量训练</div>
<div class="option"><input type="checkbox" name="q2"> 瑜伽/拉伸</div>
<div class="option"><input type="checkbox" name="q2"> 骑行/跳绳</div>
<div class="option"><input type="checkbox" name="q2"> 其他</div>
</div>
</div>
<div class="question">
<p><strong>Q3：你单次课余运动时长大概是？</strong></p>
<div class="options">
<div class="option"><input type="radio" name="q3"> 15分钟以内</div>
<div class="option"><input type="radio" name="q3"> 15-30分钟</div>
<div class="option"><input type="radio" name="q3"> 30-60分钟</div>
<div class="option"><input type="radio" name="q3"> 60分钟以上</div>
</div>
</div>
<div class="question">
<p><strong>Q4：你参与运动的主要目的？（多选）</strong></p>
<div class="options">
<div class="option"><input type="checkbox" name="q4"> 增强体质</div>
<div class="option"><input type="checkbox" name="q4"> 减肥塑形</div>
<div class="option"><input type="checkbox" name="q4"> 释放压力</div>
<div class="option"><input type="checkbox" name="q4"> 兴趣爱好</div>
<div class="option"><input type="checkbox" name="q4"> 社交交友</div>
</div>
</div>
</div>
<div class="bottom-decor">————————</div>
</div>
<div class="page">
<div class="top-tag">
<div class="logo-circle">运</div>
<div class="top-title">问卷二</div>
<div style="width:42px;"></div>
</div>
<div class="content-card">
<h2>四、问卷题目（二）</h2>
<div class="decor-img">问卷题目</div>
<div class="question">
<p><strong>Q5：阻碍你课余运动的主要原因？</strong></p>
<div class="options">
<div class="option"><input type="radio" name="q5"> 学业繁忙，没有时间</div>
<div class="option"><input type="radio" name="q5"> 缺乏毅力，懒得运动</div>
<div class="option"><input type="radio" name="q5"> 缺少一起运动的伙伴</div>
<div class="option"><input type="radio" name="q5"> 场地设施不足</div>
<div class="option"><input type="radio" name="q5"> 天气或者身体原因</div>
</div>
</div>
<div class="question">
<p><strong>Q6：你认为学校运动场地设施充足吗？</strong></p>
<div class="options">
<div class="option"><input type="radio" name="q6"> 非常充足</div>
<div class="option"><input type="radio" name="q6"> 比较充足</div>
<div class="option"><input type="radio" name="q6"> 一般</div>
<div class="option"><input type="radio" name="q6"> 不太充足</div>
<div class="option"><input type="radio" name="q6"> 严重不足</div>
</div>
</div>
<div class="question">
<p><strong>Q7：你希望学校增加哪些运动支持？（多选）</strong></p>
<div class="options">
<div class="option"><input type="checkbox" name="q7"> 增加运动场地</div>
<div class="option"><input type="checkbox" name="q7"> 多组织体育活动赛事</div>
<div class="option"><input type="checkbox" name="q7"> 推出运动打卡奖励</div>
<div class="option"><input type="checkbox" name="q7"> 开设免费运动指导课程</div>
<div class="option"><input type="checkbox" name="q7"> 优化场馆预约系统</div>
</div>
</div>
<div class="question">
<p><strong>Q8：对于校园课余运动，你还有其他建议吗？</strong></p>
<textarea rows="3" placeholder="请写下你的想法"></textarea>
</div>
<p class="ending">——问卷结束，感谢你的填写！——</p>
</div>
<div class="bottom-decor">————————</div>
</div>
</div>
<div class="nav">
<button id="prevBtn" onclick="prevPage()">上一页</button>
<button id="nextBtn" onclick="nextPage()">下一页</button>
</div>
<script>
let currentPage = 1;
const totalPages = 7;
function updatePage(){
document.querySelectorAll('.page').forEach((page,index)=>{
page.classList.remove('active');
if(index === currentPage - 1) page.classList.add('active');
})
document.getElementById('indicator').textContent = currentPage + ' / ' + totalPages;
document.getElementById('prevBtn').disabled = currentPage === 1;
document.getElementById('nextBtn').disabled = currentPage === totalPages;
}
function nextPage(){
if(currentPage < totalPages){currentPage++;updatePage();}
}
function prevPage(){
if(currentPage > 1){currentPage--;updatePage();}
}
let touchStartX = 0;
document.addEventListener('touchstart',e=>{touchStartX = e.touches[0].clientX})
document.addEventListener('touchend',e=>{
const touchEndX = e.changedTouches[0].clientX;
const diff = touchStartX - touchEndX;
if(diff>50) nextPage();
if(diff<-50) prevPage();
})
updatePage();
</script>
</body>
</html>