国画文化知识答题游戏
by GlitchFlare80195 lines5.8 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>国画文化知识答题游戏</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: SimHei, sans-serif;
}
body {
background: #f8f2e4;
padding: 20px;
}
.head-title {
text-align: center;
color: #a0522d;
font-size: 24px;
margin-bottom: 15px;
}
.info-bar {
display: flex;
justify-content: space-around;
background: #fff;
padding: 10px;
border-radius: 10px;
margin-bottom: 20px;
font-weight: bold;
}
.q-box {
background: #ffffff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px #ccc;
}
.question-text {
font-size: 17px;
line-height: 1.7;
margin-bottom: 20px;
text-align: center;
}
.answer-item {
display: block;
width: 100%;
padding: 13px;
margin: 8px 0;
border: 1px solid #deb887;
border-radius: 8px;
background: #fffaf0;
font-size: 16px;
cursor: pointer;
}
.answer-item.right {
background: #d4edda;
border-color: #28a745;
}
.answer-item.error {
background: #f8d7da;
border-color: #dc3545;
}
.explain {
margin-top: 15px;
padding: 10px;
background: #fff3cd;
border-radius: 6px;
display: none;
font-size: 15px;
}
.btn-group {
text-align: center;
margin-top: 25px;
}
.oper-btn {
padding: 10px 25px;
border: none;
background: #a0522d;
color: #fff;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
}
.oper-btn:disabled {
background: #b99680;
cursor: not-allowed;
}
.over-page {
text-align: center;
display: none;
padding: 40px 0;
}
</style>
</head>
<body>
<h2 class="head-title">国画文化知识答题闯关</h2>
<div class="info-bar">
<span>题号：<span id="nowNum">1</span>/10</span>
<span>得分：<span id="userScore">0</span></span>
</div>
<div class="q-box" id="gameMain">
<p class="question-text" id="showQ"></p>
<div id="optionBox"></div>
<div class="explain" id="explainText"></div>
</div>
<div class="btn-group">
<button class="oper-btn" id="nextBtn" disabled onclick="goNext()">下一题</button>
</div>
<div class="over-page" id="endPage">
<h3>答题完成！</h3>
<p style="margin:20px 0;font-size:18px">最终成绩：<span id="lastScore">0</span> 分</p>
<button class="oper-btn" onclick="restartGame()">重新游玩</button>
</div>
<script>
// 国画专属题库
var dataList = [
{
q:"中国画按照题材分类不包括以下哪种？",
a:["山水画","花鸟画","人物画","科幻画"],
correct:3,
desc:"国画三大题材：山水、花鸟、人物。"
},
{
q:"国画创作最常用的颜料调和媒介是？",
a:["清水","酒精","汽油","牛奶"],
correct:0,
desc:"国画以水调和墨色与矿物颜料进行作画。"
},
{
q:"国画中的“文房四宝”不包含？",
a:["笔","墨","纸","油画布"],
correct:3,
desc:"文房四宝：笔、墨、纸、砚。"
},
{
q:"被誉为画圣的古代画家是？",
a:["吴道子","王羲之","李白","杜甫"],
correct:0,
desc:"吴道子唐代著名画家，被尊称为画圣。"
},
{
q:"国画主要使用哪种纸张作画？",
a:["素描纸","宣纸","卡纸","报纸"],
correct:1,
desc:"宣纸吸水性强，是国画专用纸张。"
},
{
q:"写意画最大特点是？",
a:["精细写实","简练传神","色彩艳丽","线条工整"],
correct:1,
desc:"写意重在意境，用笔简练，抒发情感。"
},
{
q:"工笔画的特点是？",
a:["笔触粗犷","勾勒精细层层染色","快速随性","只用黑色"],
correct:1,
desc:"工笔画线条工整细腻，设色精致典雅。"
},
{
q:"中国传统山水画主要讲究？",
a:["光影透视","意境气韵","立体写实","街头实景"],
correct:1,
desc:"山水画重气韵、构图、意境与笔墨情趣。"
},
{
q:"下列属于国画四君子的是？",
a:["梅兰竹菊","春夏秋冬","琴棋书画","喜怒哀乐"],
correct:0,
desc:"梅、兰、竹、菊合称国画四君子，象征高洁品格。"
},
{
q:"国画基础技法“墨分五色”不包括？",
a:["焦墨","浓墨","淡墨","彩色墨"],
correct:3,
desc:"墨分五色：焦、浓、重、淡、清。"
}
];
let nowIndex = 0;
let score = 0;
let showQ = document.getElementById("showQ");
let optionBox = document.getElementById("optionBox");
let explainText = document.getElementById("explainText");
let nextBtn = document.getElementById("nextBtn");
let nowNum = document.getElementById("nowNum");
let userScore = document.getElementById("userScore");
let gameMain = document.getElementById("gameMain");
let endPage = document.getElementById("endPage");
let lastScore Game Source: 国画文化知识答题游戏
Creator: GlitchFlare80
Libraries: none
Complexity: moderate (195 lines, 5.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: -glitchflare80-mpcs2x5f" to link back to the original. Then publish at arcadelab.ai/publish.