一个简单、朴素的原生前端实现示例。
霍兰德职业兴趣测试（Holland Occupational Themes），又称RIASEC模型，将人的职业兴趣分为六种类型：现实型(R)、研究型(I)、艺术型(A)、社会型(S)、企业型(E)、常规型(C)。
以下是一个简化版的前端实现代码，包含题目展示、用户作答与结果计算功能。
<!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>
body { font-family: Arial, sans-serif; max-width: 700px; margin: 40px auto; padding: 20px; }
.question { margin: 20px 0; }
button { padding: 10px 15px; font-size: 16px; }
#result { margin-top: 30px; padding: 15px; border: 1px solid #ccc; display: none; }
</style>
</head>
<body>
<h1>霍兰德职业兴趣测试</h1>
<p>请选择最符合你情况的选项（每题单选）：</p>
<div id="quiz">
<div class="question">
<p>1. 喜欢修理电器或机械？</p>
<label><input type="radio" name="q1" value="R"> 是</label>
<label><input type="radio" name="q1" value="0"> 否</label>
</div>
<div class="question">
<p>2. 对科学研究感兴趣？</p>
<label><input type="radio" name="q2" value="I"> 是</label>
<label><input type="radio" name="q2" value="0"> 否</label>
</div>
<div class="question">
<p>3. 喜欢绘画、写作或音乐创作？</p>
<label><input type="radio" name="q3" value="A"> 是</label>
<label><input type="radio" name="q3" value="0"> 否</label>
</div>
<!-- 可继续添加更多题目 -->
</div>
<button onclick="calculateResult()">查看结果</button>
<div id="result">
<h2>你的职业兴趣类型</h2>
<p id="resultText"></p>
</div>
<script>
function calculateResult() {
const choices = document.querySelectorAll('input:checked');
const counts = { R: 0, I: 0, A: 0, S: 0, E: 0, C: 0 };
choices.forEach(input => {
const val = input.value;
if (val !== '0') counts[val]++;
});
let maxType = 'R';
for (const type in counts) {
if (counts[type] > counts[maxType]) {
maxType = type;
}
}
const descriptions = {
R: '现实型：喜欢动手操作，适合技术类、工程类工作。',
I: '研究型：善于思考分析，适合科研、学术类工作。',
A: '艺术型：富有创造力，适合艺术、设计、写作类工作。',
S: '社会型：乐于助人，适合教育、咨询、服务类工作。',
E: '企业型：追求领导与影响，适合管理、销售、创业类工作。',
C: '常规型：注重条理与细节，适合行政、会计、文秘类工作。'
};
document.getElementById('resultText').textContent = descriptions[maxType];
document.getElementById('result').style.display = 'block';
}
</script>
</body>
</html>说明：此代码为演示用途，实际应用中应增加更多题目（通常24-48题），并支持多维度排序（如前三高分类型）。后端可结合数据库存储题目与结果。