国风心境小测
by EpicCobra11158 lines6.8 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>国风心境小测</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
font-family:"微软雅黑","宋体",sans-serif;
background:#FFF5EE;
background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23e8c8b8' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
text-align:center;
padding:20px 15px;
}
.box{
max-width:520px;
margin:0 auto;
background:#fffef8;
border:2px solid #d4a373;
border-radius:20px;
box-shadow:0 4px 15px rgba(212,163,115,0.3);
padding:25px;
}
h1{
color:#8b4513;
font-size:22px;
margin-bottom:10px;
letter-spacing:2px;
}
.desc{
color:#a0522d;
font-size:14px;
margin-bottom:20px;
}
.q{
background:#fff3e8;
border-radius:12px;
padding:15px;
margin:12px 0;
color:#5c3a21;
font-size:15px;
}
.opt{
display:inline-block;
background:#f0e0d0;
border:1px solid #d4a373;
border-radius:20px;
padding:8px 16px;
margin:5px;
cursor:pointer;
transition:all 0.2s;
}
.opt:hover{background:#e8c8b8;}
.opt.active{background:#c87e4f;color:white;}
#btn{
background:#c87e4f;
color:white;
border:none;
border-radius:30px;
padding:12px 30px;
font-size:16px;
margin-top:15px;
cursor:pointer;
}
#res{
margin-top:20px;
padding:15px;
border-radius:12px;
font-size:16px;
line-height:1.7;
}
</style>
</head>
<body>
<div class="box">
<h1>🍃 国风心境小测 🍃</h1>
<p class="desc">直接点选答案，选完点“查看结果”，自动出分！</p>
<div class="q" id="q1">
1. 雅居偏爱？<br>
<span class="opt" onclick="pick(1,3)">A 临窗暖阳</span>
<span class="opt" onclick="pick(1,2)">B 暖木清幽</span>
<span class="opt" onclick="pick(1,1)">C 星垂静雅</span>
</div>
<div class="q" id="q2">
2. 见江海你会？<br>
<span class="opt" onclick="pick(2,3)">A 心旷神怡</span>
<span class="opt" onclick="pick(2,2)">B 心绪烦乱</span>
<span class="opt" onclick="pick(2,1)">C 安然沉思</span>
</div>
<div class="q" id="q3">
3. 最爱的天气？<br>
<span class="opt" onclick="pick(3,3)">A 晴空万里</span>
<span class="opt" onclick="pick(3,2)">B 云淡风轻</span>
<span class="opt" onclick="pick(3,1)">C 细雨绵绵</span>
</div>
<div class="q" id="q4">
4. 疲惫时你会？<br>
<span class="opt" onclick="pick(4,3)">A 与友闲谈</span>
<span class="opt" onclick="pick(4,2)">B 独自静坐</span>
<span class="opt" onclick="pick(4,1)">C 安然小憩</span>
</div>
<div class="q" id="q5">
5. 见精致糕点？<br>
<span class="opt" onclick="pick(5,3)">A 满心欢喜</span>
<span class="opt" onclick="pick(5,2)">B 心情平淡</span>
<span class="opt" onclick="pick(5,1)">C 毫无波澜</span>
</div>
<div class="q" id="q6">
6. 近期常感到？<br>
<span class="opt" onclick="pick(6,3)">A 满怀期许</span>
<span class="opt" onclick="pick(6,2)">B 平淡安然</span>
<span class="opt" onclick="pick(6,1)">C 身心倦乏</span>
</div>
<button id="btn" onclick="calc()">查看我的心境</button>
<div id="res"></div>
</div>
<script>
let ans = {};
// 独立每题选中，互不干扰
function pick(qNum, score){
ans[qNum] = score;
const qDom = document.getElementById("q" + qNum);
const options = qDom.querySelectorAll(".opt");
options.forEach(item => item.classList.remove("active"));
event.target.classList.add("active");
}
function calc(){
if(Object.keys(ans).length < 6){
document.getElementById('res').innerText = "❀ 请先答完所有题目哦！";
return;
}
let total = 0;
for(let key in ans){
total += ans[key];
}
let r = document.getElementById('res');
if(total >= 16){
r.style.background="#fff9d9";
r.style.color="#946b2d";
r.innerText="☀️ 【晴光满庭】\n内心晴朗，元气满满！心态豁达，热爱生活，自带温暖气场。\n💫 心语：保持明媚，一路向阳。";
}else if(total >= 11){
r.style.background="#eef4f8";
r.style.color="#4a5c6c";
r.innerText="⛅ 【云卷云舒】\n心绪平和，偶有小压，处事稳重，懂得调节。\n💫 心语：闲看云舒，适时放慢脚步。";
}else{
r.style.background="#e8f0f7";
r.style.color="#3c5470";
r.innerText="🌧️ 【细雨绵绵】\n近期偏累，压力较多，习惯默默承担，需要休整。\n💫 心语：允许自己停歇，善待身心，雨过天晴。";
}
}
</script>
</body>
</html>Game Source: 国风心境小测
Creator: EpicCobra11
Libraries: none
Complexity: moderate (158 lines, 6.8 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: -epiccobra11-mpqa9jjp" to link back to the original. Then publish at arcadelab.ai/publish.