<!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>
:root {
--bg-color: #f5f5f5;
--text-color: #333;
--container-bg: #fff;
--border-color: #ddd;
--accent-color: #4285f4;
--button-bg: #f1f1f1;
--button-hover: #e6e6e6;
--correct-color: #34a853;
--wrong-color: #ea4335;
--progress-bg: #e0e0e0;
--transition-time: 0.3s;
}
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #e0e0e0;
--container-bg: #1e1e1e;
--border-color: #444;
--accent-color: #8ab4f8;
--button-bg: #333;
--button-hover: #444;
--correct-color: #81c995;
--wrong-color: #f28b82;
--progress-bg: #333;
}
body {
font-family: 'Arial', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color var(--transition-time), color var(--transition-time);
margin: 0;
padding: 20px;
min-height: 100vh;
}
.container {
background-color: var(--container-bg);
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
max-width: 800px;
margin: 0 auto;
transition: all var(--transition-time);
border: 1px solid var(--border-color);
}
h1, h2 {
color: var(--accent-color);
text-align: center;
margin-top: 0;
}
/* Google风格主题切换 */
.theme-toggle-container {
position: absolute;
top: 20px;
right: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.theme-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.theme-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--accent-color);
}
input:checked + .slider:before {
transform: translateX(26px);
}
/* 测试系统原有样式 */
.difficulty-selector {
display: flex;
justify-content: center;
margin: 20px 0;
flex-wrap: wrap;
gap: 10px;
}
.difficulty-btn {
background-color: var(--button-bg);
color: var(--text-color);
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: all var(--transition-time);
font-weight: bold;
}
.difficulty-btn:hover {
background-color: var(--button-hover);
transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.easy-btn { border-left: 4px solid #2e7d32; }
.standard-btn { border-left: 4px solid #1565c0; }
.hard-btn { border-left: 4px solid #c62828; }
.question-container {
display: none;
margin-top: 20px;
}
.question-text {
font-size: 1.2em;
margin-bottom: 20px;
line-height: 1.5;
}
.options-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.option-btn {
background-color: var(--button-bg);
color: var(--text-color);
border: 1px solid var(--border-color);
padding: 12px;
border-radius: 5px;
text-align: left;
cursor: pointer;
transition: all var(--transition-time);
}
.option-btn:hover:not(.disabled) {
background-color: var(--button-hover);
border-color: var(--accent-color);
}
/* 修复答题后颜色被覆盖的问题 */
.option-btn.correct,
.option-btn.correct:hover {
background-color: var(--correct-color) !important;
color: white !important;
border-color: var(--correct-color) !important;
}
.option-btn.wrong,
.option-btn.wrong:hover {
background-color: var(--wrong-color) !important;
color: white !important;
border-color: var(--wrong-color) !important;
}
.option-btn.disabled {
cursor: default;
pointer-events: none;
opacity: 0.9;
}
/* 添加动画效果 */
.correct {
animation: pulse-correct 0.5s;
}
.wrong {
animation: pulse-wrong 0.5s;
}
@keyframes pulse-correct {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes pulse-wrong {
0% { transform: scale(1); }
50% { transform: scale(0.95); }
100% { transform: scale(1); }
}
.progress-bar {
margin: 20px 0;
height: 10px;
background-color: var(--progress-bg);
border-radius: 5px;
overflow: hidden;
}
.progress {
height: 100%;
background-color: var(--accent-color);
width: 0%;
transition: width var(--transition-time);
}
.result-container {
display: none;
text-align: center;
}
.result-score {
font-size: 2em;
color: var(--accent-color);
margin: 20px 0;
}
.result-feedback {
font-size: 1.2em;
margin-bottom: 20px;
}
.restart-btn {
background-color: var(--accent-color);
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: all var(--transition-time);
}
.restart-btn:hover {
opacity: 0.9;
transform: translateY(-2px);
}
</style>
</head>
<body>
<div class="theme-toggle-container">
<span id="theme-status">Light</span>
<label class="theme-switch">
<input type="checkbox" id="theme-toggle">
<span class="slider"></span>
</label>
</div>
<div class="container">
<h1>全维度人才评估系统</h1>
<div id="difficulty-selection">
<h2>请选择难度级别</h2>
<div class="difficulty-selector">
<button class="difficulty-btn easy-btn" onclick="startTest('easy')">简单 (CSP-J ~ CSP-S)</button>
<button class="difficulty-btn standard-btn" onclick="startTest('standard')">标准 (全栈开发)</button>
<button class="difficulty-btn hard-btn" onclick="startTest('hard')">困难 (IOI/ACM级)</button>
</div>
</div>
<div id="test-container" class="question-container">
<div class="progress-bar">
<div id="progress" class="progress"></div>
</div>
<div id="question-text" class="question-text"></div>
<div id="options-container" class="options-container"></div>
</div>
<div id="result-container" class="result-container">
<h2>评估结果</h2>
<div id="result-score" class="result-score"></div>
<div id="result-feedback" class="result-feedback"></div>
<button class="restart-btn" onclick="restartTest()">重新测试</button>
</div>
</div>
<script>
// 主题切换功能
const toggle = document.getElementById('theme-toggle');
const themeStatus = document.getElementById('theme-status');
const html = document.documentElement;
// 检查本地存储或系统偏好
const savedTheme = localStorage.getItem('theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
// 应用保存的主题
if (savedTheme === 'dark') {
html.setAttribute('data-theme', 'dark');
toggle.checked = true;
themeStatus.textContent = 'Dark';
}
// 切换主题
toggle.addEventListener('change', function() {
if (this.checked) {
html.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
themeStatus.textContent = 'Dark';
} else {
html.removeAttribute('data-theme');
localStorage.setItem('theme', 'light');
themeStatus.textContent = 'Light';
}
});
// 题目数据库
const questionBank = {
easy: [
// 简单难度 - 量化能力
{
text: "以下哪种排序的最坏时间复杂度是 O(n²)?",
options: ["归并排序", "快速排序", "堆排序", "计数排序"],
answer: 1,
type: "quant"
},
{
text: "HTTP 状态码 404 表示什么？",
options: ["成功", "未找到", "服务器错误", "禁止访问"],
answer: 1,
type: "quant"
},
{
text: "二叉树的中序遍历顺序是？",
options: ["根-左-右", "左-根-右", "右-根-左", "左-右-根"],
answer: 1,
type: "quant"
},
// 简单难度 - 创造能力
{
text: "在项目初期，快速原型设计比完美架构更重要吗？",
options: ["完全不重要", "视情况而定", "非常重要", "只对 UI 设计重要"],
answer: 2,
type: "creative"
},
{
text: "技术债务应该完全避免吗？",
options: ["是", "否", "视项目而定", "不知道"],
answer: 1,
type: "creative"
},
{
text: "阅读他人的代码是否有助于提升编程技能？",
options: ["是", "否", "仅限优秀代码", "会干扰自己的风格"],
answer: 0,
type: "creative"
},
// 简单难度 - UI 设计能力
{
text: "移动端设计推荐的最小可点击区域尺寸是多少？",
options: ["20×20px", "44×44px", "30×30px", "10×10px"],
answer: 1,
type: "ui"
},
{
text: "以下哪种颜色组合最容易阅读？",
options: ["黑底黄字", "白底黑字", "红底绿字", "蓝底红字"],
answer: 1,
type: "ui"
},
{
text: "UI 设计的首要原则是什么？",
options: ["美观", "一致性", "创新", "炫酷动效"],
answer: 1,
type: "ui"
}
],
standard: [
// 标准难度 - 量化能力
{
text: "RESTful API 中，GET 和 POST 的主要区别是什么？",
options: ["GET 有长度限制", "POST 更安全", "GET 是幂等的", "POST 更快"],
answer: 2,
type: "quant"
},
{
text: "数据库索引的主要作用是什么？",
options: ["节省存储空间", "加速数据检索", "保证数据唯一性", "简化表结构"],
answer: 1,
type: "quant"
},
{
text: "OAuth 2.0 授权码模式的特点是什么？",
options: ["客户端直接获取 Token", "需要前端参与", "最安全的模式", "适合移动端"],
answer: 2,
type: "quant"
},
// 标准难度 - 创造能力
{
text: "在团队开发中，代码风格一致性是否比个人偏好更重要？",
options: ["是", "否", "视项目规模而定", "只在大项目中重要"],
answer: 0,
type: "creative"
},
{
text: "重构代码时是否应该同时添加新功能？",
options: ["是", "否", "视情况而定", "只在小改动时允许"],
answer: 1,
type: "creative"
},
{
text: "优秀的开发者是否应该自己解决所有问题，而不是求助？",
options: ["是", "否", "视问题复杂度而定", "只对高级开发者适用"],
answer: 1,
type: "creative"
},
// 标准难度 - UI 设计能力
{
text: "Figma/Sketch 中的 Design System 主要用于什么？",
options: ["统一视觉风格", "减少重复设计", "提高团队协作效率", "以上全部"],
answer: 3,
type: "ui"
},
{
text: "无障碍设计（WCAG）推荐的最小文字对比度是多少？",
options: ["3:1", "4.5:1", "2:1", "5:1"],
answer: 1,
type: "ui"
},
{
text: "响应式设计最适合使用哪种布局方式？",
options: ["固定像素布局", "Flexbox（弹性盒子）", "表格布局", "绝对定位"],
answer: 1,
type: "ui"
}
],
hard: [
// 困难难度 - 量化能力
{
text: "Dijkstra 算法不能处理哪种情况？",
options: ["无向图", "负权边", "稀疏图", "有环图"],
answer: 1,
type: "quant"
},
{
text: "CAP 理论中，哪两个特性不能同时满足？",
options: ["一致性和分区容错", "可用性和一致性", "可用性和分区容错", "都不可以"],
answer: 1,
type: "quant"
},
{
text: "红黑树的插入操作时间复杂度是？",
options: ["O(1)", "O(log n)", "O(n)", "O(n log n)"],
answer: 1,
type: "quant"
},
// 困难难度 - 创造能力
{
text: "在分布式系统中，如何解决脑裂问题？",
options: ["增加节点", "使用 Quorum 机制", "减少网络延迟", "提高硬件性能"],
answer: 1,
type: "creative"
},
{
text: "高并发系统中，如何优化数据库写入性能？",
options: ["增加索引", "批量写入", "使用外键约束", "减少事务隔离级别"],
answer: 1,
type: "creative"
},
{
text: "微服务架构下，如何保证数据一致性？",
options: ["强一致性", "最终一致性", "避免分布式事务", "使用消息队列"],
answer: 1,
type: "creative"
},
// 困难难度 - UI 设计能力
{
text: "Dark Mode 设计时，应避免哪种做法？",
options: ["直接反转颜色", "降低对比度", "避免纯黑背景", "仅改变文字颜色"],
answer: 0,
type: "ui"
},
{
text: "Material Design 的核心原则不包括什么？",
options: ["有意义的动效", "扁平化设计", "拟物化阴影", "逼真的纹理细节"],
answer: 3,
type: "ui"
},
{
text: "用户流程图（User Flow）主要用于描述什么？",
options: ["界面视觉风格", "用户操作路径", "技术架构", "数据库关系"],
answer: 1,
type: "ui"
}
]
};
// 测试状态变量
let currentTest = {
difficulty: "",
questions: [],
currentQuestionIndex: 0,
scores: {
quant: 0,
creative: 0,
ui: 0
}
};
// 开始测试
function startTest(difficulty) {
currentTest = {
difficulty: difficulty,
questions: [...questionBank[difficulty]],
currentQuestionIndex: 0,
scores: {
quant: 0,
creative: 0,
ui: 0
}
};
// 打乱题目顺序
shuffleArray(currentTest.questions);
// 切换到测试界面
document.getElementById('difficulty-selection').style.display = 'none';
document.getElementById('test-container').style.display = 'block';
// 显示第一题
showQuestion();
}
// 显示当前题目
function showQuestion() {
const question = currentTest.questions[currentTest.currentQuestionIndex];
const questionText = document.getElementById('question-text');
const optionsContainer = document.getElementById('options-container');
// 更新进度条
const progress = (currentTest.currentQuestionIndex / currentTest.questions.length) * 100;
document.getElementById('progress').style.width = `${progress}%`;
// 设置题目文本
questionText.textContent = question.text;
// 清空选项容器
optionsContainer.innerHTML = '';
// 添加选项按钮
question.options.forEach((option, index) => {
const button = document.createElement('button');
button.className = 'option-btn';
button.textContent = `${String.fromCharCode(65 + index)}. ${option}`;
button.onclick = () => checkAnswer(index);
optionsContainer.appendChild(button);
});
}
// 检查答案
function checkAnswer(selectedIndex) {
const question = currentTest.questions[currentTest.currentQuestionIndex];
const options = document.querySelectorAll('.option-btn');
// 禁用所有选项并移除悬停效果
options.forEach(btn => {
btn.onclick = null;
btn.classList.add('disabled');
btn.style.pointerEvents = 'none';
});
// 标记正确答案和用户选择
options[question.answer].classList.add('correct');
if (selectedIndex !== question.answer) {
options[selectedIndex].classList.add('wrong');
}
// 计分
if (selectedIndex === question.answer) {
currentTest.scores[question.type] += 1;
}
// 延迟后进入下一题
setTimeout(() => {
currentTest.currentQuestionIndex++;
if (currentTest.currentQuestionIndex < currentTest.questions.length) {
showQuestion();
} else {
showResults();
}
}, 1000);
}
// 显示结果
function showResults() {
// 计算总分
const totalQuant = currentTest.questions.filter(q => q.type === 'quant').length;
const totalCreative = currentTest.questions.filter(q => q.type === 'creative').length;
const totalUI = currentTest.questions.filter(q => q.type === 'ui').length;
const quantPercent = (currentTest.scores.quant / totalQuant) * 100 || 0;
const creativePercent = (currentTest.scores.creative / totalCreative) * 100 || 0;
const uiPercent = (currentTest.scores.ui / totalUI) * 100 || 0;
const totalPercent = (quantPercent * 0.4 + creativePercent * 0.3 + uiPercent * 0.3);
// 显示结果界面
document.getElementById('test-container').style.display = 'none';
document.getElementById('result-container').style.display = 'block';
// 设置结果文本
document.getElementById('result-score').textContent = `综合得分: ${totalPercent.toFixed(1)}%`;
let feedback = "";
if (totalPercent >= 85) {
feedback = "💎 顶尖水平: 具备全栈专家潜力";
} else if (totalPercent >= 60) {
feedback = "🎯 达标水平: 符合当前难度要求";
} else {
feedback = "🌱 成长阶段: 需要系统性提升";
}
document.getElementById('result-feedback').textContent = feedback;
}
// 重新开始测试
function restartTest() {
document.getElementById('result-container').style.display = 'none';
document.getElementById('difficulty-selection').style.display = 'block';
}
// 辅助函数：打乱数组顺序
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
</script>
</body>
</html>
0 条评论
目前还没有评论...
