iT邦幫忙

0

請問要怎麼將圖片加入每一題的背景? 每一題會有不一樣的圖片

#html #css #javascript #新手求指導
0967052569 2024-10-09 12:29:05 ‧ 899 瀏覽

  • 分享至 

  • xImage

我嘗試了很多方法 要不是圖片呈現不出來，畫面都是白色，不然就是圖片比例錯誤，或是圖片整個呈現在文字下方 最下面一小張圖片而已。
這是原程式碼，麻煩各位了 感恩的心

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()">&#9776;</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;
}
看更多先前的討論...收起先前的討論...
ccutmis iT邦高手 2 級 ‧ 2024-10-09 13:12:14 檢舉
/* 用 CSS 設定每個題目的背景圖應該就可以了 範例如下 */
#question1{background:url('https://www.web3d.url.tw/ITHELP/tmp/demo-bg001.jpg');background-size: cover;}
#question2{background:url('https://www.web3d.url.tw/ITHELP/tmp/demo-bg002.jpg');background-size: cover;}
窮嘶發發發 iT邦高手 1 級 ‧ 2024-10-16 11:17:31 檢舉
仔細看一下CSS 的內容
首先你的背景圖要一樣大小，接著是不同解析度設定跟上一層DIV相同的寬度
接著是如果你的背景圖跟問題要重疊顯示，用 Z-INDEX 或 POSITION 去做圖層重疊
樓上的方法可以參考，直接上背景圖片，這方法有好有壞，可以自己試試哪種比較方便
還有就是善用 CODEPEN 之類的 SAAS服務，把CODE放上去，這樣馬上能看到效果
0967052569 iT邦新手 5 級 ‧ 2024-10-16 14:38:38 檢舉
謝謝各位指教

但我完成後
.illustration{
position: absolute;
top: 50%; /* 垂直居中 */
left: 50%; /* 水平居中 */
transform: translate(-50%, -50%); /* 將圖片向左上移以精確居中 */
z-index: -1; /* 確保圖片位於選項下面 */
width: 80%; /* 可根據需要調整寬度 */
height: auto; /* 確保圖片比例不變 */
background-size: cover;
}

label {
display: block; /* 讓每個選項獨占一行 */
width:700px;
background-color: #7B5F49; /* 背景顏色：棕色 */
border: 3px solid goldenrod;
color:white;
font-weight:6px;
padding: 16px; /* 內邊距 */
border-radius: 12px; /* 圓角 */
margin-top: 10px; /* 上邊距 */
cursor: pointer; /* 滑鼠移上去時變成手型 */
font-size: 16px; /* 字體大小 */
margin : 0 auto;
z-index: 10;
}

圖片消失了，只有題目、選項還在...
可以怎麼做調整嗎..
窮嘶發發發 iT邦高手 1 級 ‧ 2024-10-25 17:02:52 檢舉
下面講一個觀念
DIV 題目區{
DIV 題目{}
DIV 選項{}
DIV 圖片{}
}
CSS
題目區
position: relative;

題目區 題目
position: absolute;
top:1em;
z-index: 2;

題目區 選項
position: absolute;
bottom:6em;
z-index: 2;

題目區 圖片
position: absolute;
top:0;
z-index: 1;

基本觀念就這樣
還有你用 -1 圖片會消失，是因為你原本的物件背景沒有穿透屬性
你要讓前景物件可以看到背景圖，前景物件的背景必須要有穿透屬性
例如使用 RGBA 的設定例如 33,33,33,0.5 透明度50%，就能看到背景圖
另外就是你的html 有些區段不太正確，建議你重新整理
之前有把你的code丟到codepen跑，大概看一下，後來沒時間弄
所以有沒把結果存下來，但是觀念跟我上寫的一樣，給樓主參考
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

2
rin0913
iT邦新手 5 級 ‧ 2024-10-11 10:45:34

給你一些經驗

  1. 不要一次弄一堆題目上去。先弄一題，把那一體完全弄好了，再說。
  2. 如果要導入後端，那更好了，一題一題可以分開出現，也不需要處理多個題目排版問題。
  3. 就算不導入後端，我們也可以使用前端框架，把他們變成一個個物件，然後再導入到主頁面，程式碼會更簡潔。

所以我的建議是，你先弄一個題目就好，這樣提問的時候，別人也不需要看你的一大堆程式碼來幫你找問題點。

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22189 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙