读懂规则，才能赢得比赛 ｜ 课型：理论课 ｜ 建议课时：2节
互动问答：13任务分值分布与J/M分判断，答完即时评分。
新窗口运行 下载源码<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>评分体系自测</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; background: #f2f6f8; margin: 0;
display: flex; justify-content: center; padding: 30px 16px; }
.quiz { background: #fff; border-radius: 14px; padding: 26px; width: 480px;
box-shadow: 0 6px 24px rgba(18,58,82,.1); }
h1 { font-size: 20px; color: #123a52; }
.q { margin: 18px 0; }
.q p { font-weight: bold; margin-bottom: 8px; }
.opt { display: block; margin: 6px 0; padding: 10px 14px; border: 2px solid #d7e3ea;
border-radius: 8px; cursor: pointer; }
.opt:hover { border-color: #0f8c7f; }
.opt.right { background: #e7f7f4; border-color: #0f8c7f; }
.opt.wrong { background: #fbeae0; border-color: #c05a1e; }
button { width: 100%; padding: 12px; border: none; border-radius: 8px; background: #0f8c7f;
color: #fff; font-size: 16px; cursor: pointer; margin-top: 8px; }
#score { text-align: center; font-size: 22px; color: #c77728; font-weight: bold; margin-top: 14px; }
</style>
</head>
<body>
<div class="quiz">
<h1>🏆 世赛评分体系自测</h1>
<div id="box"></div>
<button onclick="grade()">提交评分</button>
<div id="score"></div>
</div>
<script>
const QS = [
{ q: '模块A（网页元素开发）的分值是？', opts: ['15分', '25分', '35分'], a: 1 },
{ q: '下列哪个属于测量分（M分）？', opts: ['视觉一致性', '动画时长恰好3秒', '主题相关性'], a: 1 },
{ q: 'J分评级的最高等级是？', opts: ['2级', '3级', '5级'], a: 1 },
{ q: '任务6七段计时器与任务7立方体的分值特点是？', opts: ['都是1分题', '都是3分高值题', '都是2分题'], a: 1 },
{ q: '分值最高的模块是？', opts: ['模块A', '模块C', '模块D'], a: 1 }
];
const box = document.getElementById('box');
QS.forEach((item, i) => {
const div = document.createElement('div'); div.className = 'q';
div.innerHTML = '<p>' + (i + 1) + '. ' + item.q + '</p>' +
item.opts.map((o, j) => '<label class="opt"><input type="radio" name="q' + i + '" value="' + j + '"> ' + o + '</label>').join('');
box.appendChild(div);
});
function grade() {
let s = 0;
QS.forEach((item, i) => {
const sel = document.querySelector('input[name="q' + i + '"]:checked');
const opts = document.querySelectorAll('input[name="q' + i + '"]');
opts.forEach(o => o.parentElement.classList.remove('right', 'wrong'));
if (sel) {
const ok = +sel.value === item.a;
sel.parentElement.classList.add(ok ? 'right' : 'wrong');
opts[item.a].parentElement.classList.add('right');
if (ok) s += 20;
}
});
document.getElementById('score').textContent = '得分：' + s + ' / 100';
}
</script>
</body>
</html>任务目标：吃透评分体系，学会拆解任务书
| 任务内容与评分 |
|---|
| 任务1：默写四模块分值结构（20分） |
| 任务2：默写13个任务名称与分值（30分） |
| 任务3：给出任务3任务书原文，圈出全部评分点（25分） |
| 任务4：写出J分0级与3级在"对齐"锚点上的差别（25分） |