請問要怎麼限制「加載畫面」在第九題和第十題之間才會跳出?
(目前程式已完成loading加載畫面,但是會在測驗一開始就跑出來,不是在第九題之後出現)
正在完成畢專 感恩的心!
/images/emoticon/emoticon07.gif
<!-- 問題 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>
<!-- loading畫面 -->
<div class="loading-wrapper" id="hidden">
<div style="color: #64d6e2" class="loading la-square-jelly-box la-3x">
<div></div>
<div></div>
</div>
</div>
(第十題開始是互動遊戲 目前還沒寫出來...)
css部分
/* loading畫面*/
.la-square-jelly-box,
.la-square-jelly-box > div {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.la-square-jelly-box {
display: block;
font-size: 0;
color: #fff;
}
.la-square-jelly-box.la-dark {
color: #333;
}
.la-square-jelly-box > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.la-square-jelly-box {
width: 32px;
height: 32px;
}
.la-square-jelly-box > div:nth-child(1),
.la-square-jelly-box > div:nth-child(2) {
position: absolute;
left: 0;
width: 100%;
}
.la-square-jelly-box > div:nth-child(1) {
top: -25%;
z-index: 1;
height: 100%;
border-radius: 10%;
-webkit-animation: square-jelly-box-animate 0.6s -0.1s linear infinite;
-moz-animation: square-jelly-box-animate 0.6s -0.1s linear infinite;
-o-animation: square-jelly-box-animate 0.6s -0.1s linear infinite;
animation: square-jelly-box-animate 0.6s -0.1s linear infinite;
}
.la-square-jelly-box > div:nth-child(2) {
bottom: -9%;
height: 10%;
background: #000;
border-radius: 50%;
opacity: 0.2;
-webkit-animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;
-moz-animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;
-o-animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;
animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;
}
.la-square-jelly-box.la-sm {
width: 16px;
height: 16px;
}
.la-square-jelly-box.la-2x {
width: 64px;
height: 64px;
}
.la-square-jelly-box.la-3x {
width: 96px;
height: 96px;
}
/*
* Animations
*/
@-webkit-keyframes square-jelly-box-animate {
17% {
border-bottom-right-radius: 10%;
}
25% {
-webkit-transform: translateY(25%) rotate(22.5deg);
transform: translateY(25%) rotate(22.5deg);
}
50% {
border-bottom-right-radius: 100%;
-webkit-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
transform: translateY(50%) scale(1, 0.9) rotate(45deg);
}
75% {
-webkit-transform: translateY(25%) rotate(67.5deg);
transform: translateY(25%) rotate(67.5deg);
}
100% {
-webkit-transform: translateY(0) rotate(90deg);
transform: translateY(0) rotate(90deg);
}
}
@-moz-keyframes square-jelly-box-animate {
17% {
border-bottom-right-radius: 10%;
}
25% {
-moz-transform: translateY(25%) rotate(22.5deg);
transform: translateY(25%) rotate(22.5deg);
}
50% {
border-bottom-right-radius: 100%;
-moz-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
transform: translateY(50%) scale(1, 0.9) rotate(45deg);
}
75% {
-moz-transform: translateY(25%) rotate(67.5deg);
transform: translateY(25%) rotate(67.5deg);
}
100% {
-moz-transform: translateY(0) rotate(90deg);
transform: translateY(0) rotate(90deg);
}
}
@-o-keyframes square-jelly-box-animate {
17% {
border-bottom-right-radius: 10%;
}
25% {
-o-transform: translateY(25%) rotate(22.5deg);
transform: translateY(25%) rotate(22.5deg);
}
50% {
border-bottom-right-radius: 100%;
-o-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
transform: translateY(50%) scale(1, 0.9) rotate(45deg);
}
75% {
-o-transform: translateY(25%) rotate(67.5deg);
transform: translateY(25%) rotate(67.5deg);
}
100% {
-o-transform: translateY(0) rotate(90deg);
transform: translateY(0) rotate(90deg);
}
}
@keyframes square-jelly-box-animate {
17% {
border-bottom-right-radius: 10%;
}
25% {
-webkit-transform: translateY(25%) rotate(22.5deg);
-moz-transform: translateY(25%) rotate(22.5deg);
-o-transform: translateY(25%) rotate(22.5deg);
transform: translateY(25%) rotate(22.5deg);
}
50% {
border-bottom-right-radius: 100%;
-webkit-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
-moz-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
-o-transform: translateY(50%) scale(1, 0.9) rotate(45deg);
transform: translateY(50%) scale(1, 0.9) rotate(45deg);
}
75% {
-webkit-transform: translateY(25%) rotate(67.5deg);
-moz-transform: translateY(25%) rotate(67.5deg);
-o-transform: translateY(25%) rotate(67.5deg);
transform: translateY(25%) rotate(67.5deg);
}
100% {
-webkit-transform: translateY(0) rotate(90deg);
-moz-transform: translateY(0) rotate(90deg);
-o-transform: translateY(0) rotate(90deg);
transform: translateY(0) rotate(90deg);
}
}
@-webkit-keyframes square-jelly-box-shadow {
50% {
-webkit-transform: scale(1.25, 1);
transform: scale(1.25, 1);
}
}
@-moz-keyframes square-jelly-box-shadow {
50% {
-moz-transform: scale(1.25, 1);
transform: scale(1.25, 1);
}
}
@-o-keyframes square-jelly-box-shadow {
50% {
-o-transform: scale(1.25, 1);
transform: scale(1.25, 1);
}
}
@keyframes square-jelly-box-shadow {
50% {
-webkit-transform: scale(1.25, 1);
-moz-transform: scale(1.25, 1);
-o-transform: scale(1.25, 1);
transform: scale(1.25, 1);
}
}
.loading-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #222;
z-index: 9999;
}
.loading {
position: absolute;
width: 80px;
height: 80px;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -15px;
}
js部分
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) + '%';
}
}
//loading畫面
$(document).ready(function () {
setTimeout(function () {
$(".loading-wrapper").fadeOut(500);
}, 1000);
});