我尝试了很多方法 要不是图片呈现不出来，画面都是白色，不然就是图片比例错误，或是图片整个呈现在文字下方 最下面一小张图片而已。这是原程式码，麻烦各位了 感恩的心
HTML
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>article</title>
<style>
.question {
display: none; /* 初始隐藏所有问题 */
}
.active {
display: block; /* 只显示当前问题 */
}
</style>
</head>
<body>
<div class="container">
<nav class="menu">
<h1>
<a href="home.html"></a>
</h1>
<ul>
<li><a href="#">读嘉诊疗所</a></li>
<li><a href="vlog.html">嘉一点vlog</a></li>
<li><a href="article.html">读嘉记义</a></li>
<li><a href="about.html">1+1=4</a></li>
</ul>
<!-- 汉堡按钮 -->
<a href="javascript:void(0);" class="icon" onclick="toggleMenu()">☰</a>
</nav>
<!-- 心理测验首页 -->
<div class="main-page" id="mainPage" style ="text-align:center">
<h1 class="frontPage"><b>读嘉诊疗所</b></h1>
<h4 class="frontPageWord">
<br>总是被繁杂的课业压到喘不过气的你，给自己一个机会：去放空吧
<br>有些答案在书本找不到，就去经历那些不同的人间烟火
<br>把那些没走过的路，都去走一遍！
<br>治疗一直困在匆忙生活的你，是时候来一场漫游之旅了......
</h4>
<button class="start-button" onclick="startQuiz()">立即检测</button>
</div>
<form id="quizForm">
<!-- 进度条容器 -->
<div class="progress-bar">
<div class="progress"></div>
</div>
<!-- 问题 1 -->
<div class="question" id="question1" style="text-align:center">
<p>
<br>清晨六点半，叮咚，讯息声响起。
<br>突如其来的铃声惊醒在睡梦中的你，
<br>双击手机萤幕，睡眼惺忪的查看讯息：
<br>「今天学校跳电，停课一天。」
<br>此时你会……？
</p>
<label>
<input type="radio" name="q1" onchange="addScoreAndNext(1,{influencer: 2, nature: 1, nostalgia: 2, foodie: 1})">
A.心想难得放假，立马躺回去继续睡，睡到自然醒
</label><br>
<label>
<input type="radio" name="q1" onchange="addScoreAndNext(1,{influencer:1 , nature: 2, nostalgia: 1, foodie: 1})">
B.内心挣扎了一下决定设个九点的闹钟再起来吃早餐
</label><br>
<label>
<input type="radio" name="q1" onchange="addScoreAndNext(1,{influencer: 1, nature: 1, nostalgia: 1, foodie: 2})">
C.都起床了，盥洗完去吃个早餐吧
</label><br>
</div>
<!--
<div class="illustration">
<img src="images/topic1.png" alt="Character Illustration">
</div>
</div>-->
<!-- 问题 2 -->
<div class="question" id="question2" style="display:none;text-align:center">
<p>
<br>用餐完毕去柜檯结帐的时候，老闆拿出四张优惠券，
<br>并说道：「同学，老闆这里有四张不同的优惠卷，挑一张吧！」
<br>你惊喜若狂的向老闆道谢后，你会挑选……？
</p>
<label>
<input type="radio" name="q2" onchange="addScoreAndNext(2,{foodie: 2})">
A.四人同行一人免费的餐厅优惠卷
</label><br>
<label>
<input type="radio" name="q2" onchange="addScoreAndNext(2,{influencer: 2})">
B.四人同行的299元游乐园学生票
</label><br>
<label>
<input type="radio" name="q2" onchange="addScoreAndNext(2,{nostalgia: 2})">
C.单人DIY手作陶艺体验课程
</label><br>
<label>
<input type="radio" name="q2" onchange="addScoreAndNext(2,{nature:2})">
D.历史文化展览入园卷
</label><br>
<!-- 图像插图 -->
<div class="illustration">
<img src="images/topic2.png" alt="Character Illustration">
</div>
</div>
<!-- 问题 3 -->
<div class="question" id="question3" style="display:none;text-align:center">
<p>
<br>你开心的走在街上，挥舞着手上的优惠卷，心想真是美好的一天。
<br>突然，一阵大风刮来，手中的优惠卷随风飘去，你下意识地追向飘走的
<br>优惠卷，回过神来，眼前出现了一道料想不到的景象，此时你看到的是......？
</p>
<label>
<input type="radio" name="q3" onchange="addScoreAndNext(3,{ nature: 1, nostalgia: 2})">
A.充满历史痕迹的眷村
</label><br>
<label>
<input type="radio" name="q3" onchange="addScoreAndNext(3,{ nature: 2, nostalgia: 1})">
B.导游正在进行外国观光客的导览
</label><br>
<label>
<input type="radio" name="q3" onchange="addScoreAndNext(3,{ influencer: 2})">
C.灿烂耀眼的花海
</label><br>
<label>
<input type="radio" name="q3" onchange="addScoreAndNext(3,{foodie:2})">
D.人声鼎沸的各国特色美食市集
</label><br>
<!-- 图像插图 -->
<div class="illustration">
<img src="images/topic3.png" alt="Character Illustration">
</div>
</div>
<!-- 问题 4 -->
<div class="question" id="question4" style="display:none;text-align:center">
<p>
<br>看到这个景象，你会......？
</p>
<label>
<input type="radio" name="q4" onchange="addScoreAndNext(4,{ influencer:2})">
A.与景象合照
</label><br>
<label>
<input type="radio" name="q4" onchange="addScoreAndNext(4,{ nature: 2})">
B.静静的待在一旁观察
</label><br>
<label>
<input type="radio" name="q4" onchange="addScoreAndNext(4,{ foodie: 2})">
C.马上找当地人询问情况
</label><br>
<label>
<input type="radio" name="q4" onchange="addScoreAndNext(4,{nostalgia:2})">
D.单纯拍下眼前景象
</label><br>
<!-- 图像插图 -->
<div class="illustration">
<img src="images/topic4.png" alt="Character Illustration">
</div>
</div>
<!-- 问题 5 -->
<div class="question" id="question5" style="display:none;text-align:center">
<p>
<br>这时，远方有一个人朝你走来，你觉得他是为了......？
</p>
<label>
<input type="radio" name="q5" onchange="addScoreAndNext(5,{ foodie:2})">
A.找寻美食的同路人
</label><br>
<label>
<input type="radio" name="q5" onchange="addScoreAndNext(5,{ influence:2})">
B.请我帮他拍照
</label><br>
<label>
<input type="radio" name="q5" onchange="addScoreAndNext(5,{ natural: 2})">
C.跟我介绍当地的风俗民情
</label><br>
<label>
<input type="radio" name="q5" onchange="addScoreAndNext(5,{nostalgia:2})">
D.邀请我参加当地举办的祭典
</label><br>
<!-- 图像插图 -->
<div class="illustration">
<img src="images/topic5.png" alt="Character Illustration">
</div>
</div>
<!-- 问题 6 -->
<div class="question" id="question6" style="display:none;text-align:center">
<p>
<br>与他热情交流后，他拿出一样物品送你做纪念，
<br>你认为这样物品会是......？
</p>
<label>
<input type="radio" name="q6" onchange="addScoreAndNext(6,{ influence:2})">
A.精緻的吊饰
</label><br>
<label>
<input type="radio" name="q6" onchange="addScoreAndNext(6,{ nostalgia:2})">
B.黑胶唱片乐高
</label><br>
<label>
<input type="radio" name="q6" onchange="addScoreAndNext(6,{ natural: 2})">
C.具有当地特色的服饰
</label><br>
<label>
<input type="radio" name="q6" onchange="addScoreAndNext(6,{foodie:2})">
D.祖传秘制的地方滷味
</label><br>
<!-- 图像插图 -->
<div class="illustration">
<img src="images/topic6.png" alt="Character Illustration">
</div>
</div>
<!-- 问题 7 -->
<div class="question" id="question7" style="display:none;text-align:center">
<p>
<br>你认真的端详手中的礼物，几秒后抬头準备向他致谢，
<br>却发现他已不见人影，此时你内心会想......？
</p>
<label>
<input type="radio" name="q7" onchange="addScoreAndNext(7,{ influence:1,natural:1,nostalgia:1,foodie:2})">
A.没有多想，可能是有事先离开了
</label><br>
<label>
<input type="radio" name="q7" onchange="addScoreAndNext(7,{ influence:1,natural:2,nostalgia:1,foodie:1})">
B.好可惜，我还没聊够耶！
</label><br>
<label>
<input type="radio" name="q7" onchange="addScoreAndNext(7,{ influence:1,natural:1,nostalgia:2,foodie:1})">
C.我还没道谢呢，怎么就走了
</label><br>
<label>
<input type="radio" name="q7" onchange="addScoreAndNext(7,{influence:2,natural:1,nostalgia:1,foodie:1})">
D.啊～忘记跟他要联络方式了
</label><br>
<!-- 图像插图 -->
<div class="illustration">
<img src="images/topic7.png" alt="Character Illustration">
</div>
</div>
<!-- 问题 8 -->
<div class="question" id="question8" style="display:none;text-align:center">
<p>
<br>天色渐暗，你準备踏上返回的路途，此时的你会选择......?
</p>
<label>
<input type="radio" name="q8" onchange="addScoreAndNext(8,{natural:2})">
A.回味一天的旅程，慢慢步行回去
</label><br>
<label>
<input type="radio" name="q8" onchange="addScoreAndNext(8,{ influence:2,foodie:2})">
B.拦下路边经过的计程车，早点回去
</label><br>
<label>
<input type="radio" name="q8" onchange="addScoreAndNext(8,{nostalgia:2})">
C.搭乘接驳车，欣赏沿途风景
</label><br>
</div>
<!-- 问题 9 -->
<div class="question" id="question9" style="display:none;text-align:center">
<p>
<br>回到家中，你决定将此次奇妙的旅程？
</p>
<label>
<input type="radio" name="q9" onchange="addScoreAndNext(9,{influence:2,natural:1,nostalgia:1,foodie:1})">
A.抓紧时间，立即发文
</label><br>
<label>
<input type="radio" name="q9" onchange="addScoreAndNext(9,{natural:2,nostalgia:1,foodie:1})">
B.只与亲近的亲朋好友分享
</label><br>
<label>
<input type="radio" name="q9" onchange="addScoreAndNext(9,{natural:1,nostalgia:2,foodie:1})">
C.独自将一天所遇之事记录下来
</label><br>
<label>
<input type="radio" name="q9" onchange="addScoreAndNext(9,{natural:1,nostalgia:1,foodie:2})">
D.不做任何动作，将回忆单纯记在脑中
</label><br>
</div>
</div>
<script src="js/script.js"></script>
<script src="js/nav.js"></script>
</body>
</html>
CSS部分
@charset "utf-8";
*{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html{
font-size: 24px;
font-family: oswald;
margin: 0;
padding: 0;
height: 100%;
}
body{
margin: 0;
padding: 0;
max-height: 100%;
}
article{
flex-grow: 1; /* 让 article 填充剩余的空间 */
padding-bottom: 30px; /* 给 footer 一点空间 */
}
.container {
position: relative;
margin: 0 auto;
max-width: 100%;
background: linear-gradient(180deg, #FDFCFB 0%, #E2D1C3 100%);
overflow-x: hidden;
bottom: 0px; /* 尝试移除这个bottom属性 */
min-height: 100vh;
padding-top: 88px;
}
header {
height:700px;
width:100%;
}
.menu{
background-color:#FE9858;
padding:0px 5px 0px 16px;
height:88px;
width: 100%;
position :fixed;
top:0px;
z-index:20;
}
.menu.scrolled {
background-color: rgba(254, 152, 88, 0.8); /* 变成更透明 */
backdrop-filter: blur(10px); /* 添加模糊效果 */
}
.menu h1{
float:left;
}
.menu h1 a{
display:block;
background-image:url(https://images2.imgbox.com/96/0c/G1gO1j7e_o.png);
width:229px;
height:88px;
background-position:center center;
background-repeat:no-repeat;
text-indent:101%;
white-space:nowrap;
overflow:hidden;
}
.menu ul li {
float: right;
}
.menu ul li a {
font-size: 20px;
display: block;
font-weight: 600;
width: 148px;
height: 59px;
line-height: 29px;
margin: 16px 13px 16px 5px;
padding: 15px 0px;
color: #8C6C57;
background-color: #FFF;
text-decoration: none;
text-align: center;
border: 5px solid transparent; /* 初始状态下边框透明 */
transition: border 0.3s ease; /* 增加边框过渡效果 */
}
.menu ul {
display: flex;
justify-content: flex-end;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li a:hover {
border: 5px solid #7B5F49; /* 设置咖啡色边框 */
}
.icon {
display: none;
padding:20px 5% 0 40%;
font-size: 24px;
color: #fff;
cursor: pointer;
}
.menu.scrolled {
background-color: rgba(254, 152, 88, 0.8); /* 变成更透明 */
backdrop-filter: blur(10px); /* 添加模糊效果 */
}
.menu h1{
float:left;
}
.menu h1 a{
display:block;
background-image:url(https://images2.imgbox.com/96/0c/G1gO1j7e_o.png);
width:229px;
height:88px;
background-position:center center;
background-repeat:no-repeat;
text-indent:101%;
white-space:nowrap;
overflow:hidden;
}
/*
.menu ul li {
float: right;
}
*/
.menu ul li a {
font-size: 20px;
display: block;
font-weight: 600;
width: 130px;
height: 50px;
line-height: 29px;
margin: 10px 13px 16px 5px;
padding: 10px 0px;
color: #8C6C57;
background-color: #FFF;
text-decoration: none;
text-align: center;
border: 5px solid transparent; /* 初始状态下边框透明 */
transition: border 0.3s ease; /* 增加边框过渡效果 */
}
/*
.menu ul {
display: flex;
justify-content: flex-end;
list-style-type: none;
margin: 0;
padding: 0;
}
*/
.menu ul li a:hover {
border: 5px solid #7B5F49; /* 设置咖啡色边框 */
}
.menu {
background-color: #FE9858;
padding: 0px 5px 0px 16px;
height: 88px;
width: 100%;
position: fixed;
top: 0px;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
}
.menu ul {
display: flex;
justify-content: flex-end;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
margin-left: 3px;
}
.icon {
display: none;
font-size: 36px;
cursor: pointer;
color: #FFF;
}
@media (max-width: 900px) {
.menu ul {
/*
display: none;
flex-direction: column;
position: absolute;
right: 0;
top: 90px;
background-color: #fff;
width: 200px;
text-align: right;
height:100vh;
*/
width: 200px;
height: calc(100vh - 88px); /* 使菜单栏占据导航栏下方的整个网页高度 */
position: fixed;
right: 0;
top: 88px; /* 从导航栏底部开始 */
background-color: #fff;
flex-direction: column;
align-items: center;
justify-content: flex-start; /* 从上方开始显示菜单项 */
display: none;
z-index: 10;
}
.menu ul.show {
display: flex;
}
.menu ul li {
margin: 10px 0;
}
.icon {
display: block;
}
}
@media (max-width: 480px) {
.menu ul {
/*
display: none;
flex-direction: column;
position: absolute;
right: 0;
top: 90px;
background-color: #fff;
width: 200px;
text-align: right;
height:100vh;
*/
width: 100%;
height: calc(100vh - 88px); /* 使菜单栏占据导航栏下方的整个网页高度 */
position: fixed;
right: 0;
top: 88px; /* 从导航栏底部开始 */
background-color: #fff;
flex-direction: column;
align-items: center;
justify-content: flex-start; /* 从上方开始显示菜单项 */
display: none;
z-index: 10;
}
.menu ul.show {
display: flex;
}
.menu ul li {
margin: 10px 0;
}
.icon {
display: block;
}
}
/*新的*/
.frontPage{
width: 100%;
height: 112px;
flex-shrink: 0;
color: #000;
font-family: Oswald;
font-size: 80px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 6.72px;
margin-top: 112px;
}
.frontPageWord{
width: 100%;
height: 170px;
flex-shrink: 0;
color: #000;
text-align: center;
font-family: Oswald;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 3px;
margin-top: 51px;
}
.start-button{
width: 464px;
height: 148px;
flex-shrink: 0;
font-size:75px;
font-family: 微软正黑体;
border:solid 3px;
border-radius:15px;
display:inline-block;
padding:10px 20px;
background-color:white;
color:#D6E0DE;
cursor:pointer;
margin-top:30px;
margin-bottom: 21px;
}
.start-button:hover{
background-color:#D6E0DE;
color:white;
}
.question {
display: none; /* 初始隐藏所有问题 */
}
.active {
display: block; /* 只显示当前问题 */
}
.question{
color: #000;
text-align: center;
font-family: Oswald;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 3px;
}
.question{
display:flex;
width:1000px;
height:600px;
}
.question{
margin:auto;
}
label input[type="radio"] {
position: absolute;
opacity: 0; /* 隐藏单选框，并保留其功能 */
}
/* 按钮样式 */
label {
display: block; /* 让每个选项独占一行 */
background-color: #E0E0E0; /* 背景颜色：灰色 */
padding: 10px 20px; /* 内边距 */
border-radius: 8px; /* 圆角 */
margin-top: 10px; /* 上边距 */
cursor: pointer; /* 滑鼠移上去时变成手型 */
font-size: 16px; /* 字体大小 */
text-align: center;
}
/* 单选按钮样式 */
input[type="radio"] {
margin-right: 10px; /* 和文字之间的间距 */
}
/* 滑鼠移上去时选项的变化 */
label:hover {
background-color: #D3D3D3; /* 背景变得稍微暗一点 */
}
/* 问题文本区块样式 */
p {
text-align: center; /* 文字置中 */
margin-bottom: 20px; /* 底部留白 */
}
/* 进度条的容器 */
.progress-bar {
height: 20px;
width: 100%;
background-color: #ddd;
border-radius: 10px;
margin-bottom: 20px;
position: relative;
}
/* 进度条的填充部分 */
.progress {
height: 100%;
width: 25%; /* 控制进度条的宽度百分比，依情况调整 */
background-color: #FFD700;
border-radius: 10px;
}
.illustration {
position: relative; /* 设定位置相对性 */
width: 100%; /* 宽度佔满 */
display: flex; /* 弹性布局，方便居中 */
justify-content: center; /* 内容置中 */
margin-top: 20px; /* 顶部留白 */
}
.illustration img {
width: 100%; /* 图片宽度佔满 */
max-width: 400px; /* 最大宽度 */
height: auto; /* 高度自适应 */
}
/* 手机和平板响应式设计 */
@media screen and (max-width: 768px) {
body {
padding: 10px;
font-size: 2vw;
}
.main-page h1 {
font-size: 2.2em;
}
.main-page h4 {
font-size: 1.1em;
}
.frontPageWord{
font-size: 2vw; /* 调整字体大小 */
font-size: 15px !important;
margin:0 auto;
width: 80%;
}
.start-button {
width: 50%;
height: 50%;
font-size: 1.2em;
padding: 10px 20px;
width: 80%;
}
.question p {
font-size: 1.1em;
font-size: 2vw; /* 调整字体大小 */
}
.question{
font-size: 0.5em !important;
margin:0 auto;
width: 80%;
}
.label{
font-size: 2vw;
margin:0 auto;
width: 100%;
height: 50%;
padding: 10px 20px;
}
}
/* 更小的手机萤幕 */
@media (max-width: 599px) {
.main-page h1 {
font-size: 1.8em;
}
.main-page h4 {
font-size: 1em;
}
.start-button {
font-size: 1em;
padding: 8px 16px;
width: 80%;
}
.frontPageWord{
font-size: clamp(5px, 4vw, 16px) !important;
float:center;
margin:0 auto;
}
.question p {
font-size: 1em;
}
.question{
font-size: 0.5em !important;
margin:0 auto;
width: 80%;
}
.label{
font-size: 0.2em ;
margin:0 auto;
width: 100%;
height: 50%;
padding: 10px 20px;
}
}
javascript部分
function startQuiz() {
document.getElementById("mainPage").style.display = "none"; // 隐藏首页
document.getElementById("question1").style.display = "block"; // 显示第一题
}
// 纪录分数并跳到下一题
let scores = {
influencer: 0,
nature: 0,
nostalgia: 0,
foodie: 0
};
// 增加分数并跳转下一题
function addScoreAndNext(currentQuestion, scoreObject) {
// 更新分数逻辑
scores.influencer += scoreObject.influencer;
scores.nature += scoreObject.nature;
scores.nostalgia += scoreObject.nostalgia;
scores.foodie += scoreObject.foodie;
// 跳到下一题
nextQuestion(currentQuestion);
}
// 切换到下一题
function nextQuestion(currentQuestion) {
const currentDiv = document.getElementById(\'question\' + currentQuestion);
const nextDiv = document.getElementById(\'question\' + (currentQuestion + 1));
if(currentDiv){
currentDiv.style.display=\'none\'; //隐藏当前问题
}
if(nextDiv){
nextDiv.style.display=\'block\';//显示下一题
}else{
showResult(); //如果没有下一题显示结果
}
}
// 总题目数
const totalQuestions = 12;
// 当前题目编号
let currentQuestion = 0;
// 更新进度条
function updateProgress() {
if (currentQuestion < totalQuestions) {
currentQuestion++;
const progressPercentage = (currentQuestion / totalQuestions) * 100;
// 更新进度条高度
document.getElementById(\'progress-bar\').style.height = progressPercentage + \'%\';
// 更新进度百分比文字
document.getElementById(\'progress-text\').textContent = Math.round(progressPercentage) + \'%\';
}
}
// 显示测验结果
function showResult() {
document.getElementById(\'resultPage\').style.display = \'block\';
// 根据分数判断最高的类别
const maxCategory = Object.keys(scores).reduce((a, b) => scores[a] > scores[b] ? a : b);
let resultText = \'\';
switch (maxCategory) {
case \'influencer\':
resultText = \'你是「网美」类型，喜欢拍照打卡！\';
break;
case \'nature\':
resultText = \'你是「自然」类型，喜欢亲近大自然！\';
break;
case \'nostalgia\':
resultText = \'你是「怀旧」类型，喜欢怀旧风格！\';
break;
case \'foodie\':
resultText = \'你是「老饕」类型，热爱美食！\';
break;
}
document.getElementById(\'resultText\').innerText = resultText;
}
1 个回答
2
rin0913
iT邦新手 5 级 ‧ 2024-10-11 10:45:34
给你一些经验
- 不要一次弄一堆题目上去。先弄一题，把那一体完全弄好了，再说。
- 如果要导入后端，那更好了，一题一题可以分开出现，也不需要处理多个题目排版问题。
- 就算不导入后端，我们也可以使用前端框架，把他们变成一个个物件，然后再导入到主页面，程式码会更简洁。
所以我的建议是，你先弄一个题目就好，这样提问的时候，别人也不需要看你的一大堆程式码来帮你找问题点。