|
|
<!DOCTYPE html>
|
|
|
<html lang="ko">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>인적자원관리 퀴즈</title>
|
|
|
<style>
|
|
|
* , *::before, *::after { box-sizing: border-box; }
|
|
|
body {
|
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
|
line-height: 1.6;
|
|
|
margin: 0;
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
color: #1a202c;
|
|
|
min-height: 100vh;
|
|
|
padding: 20px;
|
|
|
overflow-x: hidden;
|
|
|
}
|
|
|
.container {
|
|
|
max-width: 720px;
|
|
|
margin: 0 auto;
|
|
|
padding: 0 16px;
|
|
|
}
|
|
|
.quiz-header {
|
|
|
background: rgba(255, 255, 255, 0.95);
|
|
|
backdrop-filter: blur(20px);
|
|
|
border-radius: 20px;
|
|
|
padding: 30px;
|
|
|
margin-bottom: 25px;
|
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
text-align: center;
|
|
|
}
|
|
|
.quiz-title {
|
|
|
font-size: clamp(22px, 6vw, 28px);
|
|
|
font-weight: 700;
|
|
|
margin: 0 0 15px 0;
|
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
background-clip: text;
|
|
|
}
|
|
|
.card {
|
|
|
background: rgba(255, 255, 255, 0.95);
|
|
|
backdrop-filter: blur(20px);
|
|
|
border-radius: 16px;
|
|
|
padding: 24px;
|
|
|
margin: 16px 0;
|
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
}
|
|
|
.question-text {
|
|
|
font-size: clamp(16px, 4.5vw, 18px);
|
|
|
font-weight: 500;
|
|
|
line-height: 1.7;
|
|
|
margin-bottom: 20px;
|
|
|
color: #2d3748;
|
|
|
}
|
|
|
.choice {
|
|
|
display: block;
|
|
|
border: 2px solid #e2e8f0;
|
|
|
border-radius: 12px;
|
|
|
padding: 14px 16px;
|
|
|
margin: 10px 0;
|
|
|
background: white;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s ease;
|
|
|
font-weight: 500;
|
|
|
font-size: clamp(16px, 5vw, 18px);
|
|
|
color: #4a5568;
|
|
|
width: 100%;
|
|
|
text-align: left;
|
|
|
}
|
|
|
.choice:hover {
|
|
|
border-color: #667eea;
|
|
|
background: #f7fafc;
|
|
|
transform: translateX(4px);
|
|
|
}
|
|
|
.choice.selected {
|
|
|
border-color: #667eea;
|
|
|
background: linear-gradient(135deg, #ebf4ff, #e6fffa);
|
|
|
color: #2b6cb0;
|
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
|
|
}
|
|
|
.btn {
|
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
|
color: white;
|
|
|
border: none;
|
|
|
border-radius: 12px;
|
|
|
padding: 12px 20px;
|
|
|
cursor: pointer;
|
|
|
font-weight: 500;
|
|
|
font-size: 15px;
|
|
|
transition: all 0.3s ease;
|
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
|
|
margin: 10px 5px;
|
|
|
}
|
|
|
.btn:hover:not(:disabled) {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
|
|
|
}
|
|
|
.btn:disabled {
|
|
|
opacity: 0.5;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
.status-bar {
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
backdrop-filter: blur(10px);
|
|
|
border-radius: 15px;
|
|
|
padding: 12px 18px;
|
|
|
margin-bottom: 16px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
}
|
|
|
.progress-info {
|
|
|
font-weight: 500;
|
|
|
color: #4a5568;
|
|
|
}
|
|
|
.score-display {
|
|
|
background: linear-gradient(135deg, #48bb78, #38a169);
|
|
|
color: white;
|
|
|
padding: 8px 14px;
|
|
|
border-radius: 20px;
|
|
|
font-weight: 600;
|
|
|
font-size: 14px;
|
|
|
box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
|
|
|
}
|
|
|
|
|
|
|
|
|
@media (max-width: 480px) {
|
|
|
body { padding: 8px; }
|
|
|
.container { padding: 0 6px; max-width: 100%; }
|
|
|
.quiz-header { padding: 18px; border-radius: 16px; }
|
|
|
.card { padding: 16px; border-radius: 14px; }
|
|
|
.question-text { margin-bottom: 16px; }
|
|
|
.choice { padding: 14px 16px; margin: 8px 0; font-size: clamp(17px, 5.4vw, 19px); }
|
|
|
.status-bar { flex-direction: column; align-items: stretch; text-align: center; }
|
|
|
.btn { padding: 12px 18px; font-size: 15px; }
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
<div class="quiz-header">
|
|
|
<h1 class="quiz-title">인적자원관리 퀴즈</h1>
|
|
|
</div>
|
|
|
|
|
|
<div class="status-bar">
|
|
|
<div id="status" class="progress-info">문항 1/16</div>
|
|
|
<div class="score-display">점수: <span id="score-text">0/16</span></div>
|
|
|
</div>
|
|
|
|
|
|
<div id="quiz"></div>
|
|
|
|
|
|
<div style="text-align: center; margin-top: 20px;">
|
|
|
<button id="prev" class="btn">← 이전</button>
|
|
|
<button id="next" class="btn">다음 →</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
const questions = [
|
|
|
{
|
|
|
"qtype": "mcq",
|
|
|
"prompt": "조직이 더욱 커져 해외로 진출하거나 글로벌 지점을 늘리는 등 운영 범위가 확장될 때 나타납니다.해외 사업장의 법인장이나 임원들을 관리해야 할 필요성이 생기면서, 인사 담당 임원 (전무, 부사장, 상무 등)을 조직에 보직합니다. 이와 같은 인적자원관리의 유형을 무엇이라 하는가?",
|
|
|
"choices": [
|
|
|
"원시적인사관리(PPM)",
|
|
|
"인사관리(PM)",
|
|
|
"인적자원관리(HRM)",
|
|
|
"전략적인적자원관리(SHRM)"
|
|
|
],
|
|
|
"answer": "전략적인적자원관리(SHRM)"
|
|
|
},
|
|
|
{
|
|
|
"qtype": "mcq",
|
|
|
"prompt": "다음 중 직무분석에 활용에 대해 틀린 내용을 고르시오.",
|
|
|
"choices": [
|
|
|
"직무분석을 기초로 직무가치를 산정하고 보상체계에 반영할 수 있다.",
|
|
|
"직무 분석은 조직 내에 존재하는 각 직무의 구체적인 내용, 요건, 역할과 책임을 체계적으로 분석하고 정의하는 활동. 인사 관리의 기초.",
|
|
|
"직무 기술서는 직무 분석을 통해 도출된 결과물로, 특정 직무를 구성하는 일의 전체 내용(과업, 절차, 책임 등)을 기술한 문서. 채용, 평가, 교육 등의 기준으로 활용.",
|
|
|
"경력개발을 위한 직무수행 요구조건(지식, 기술 등) 정립 및 이동, 승진을 위한 필요한 자료 제공 및 교육훈련 정보 제공"
|
|
|
],
|
|
|
"answer": "직무분석을 기초로 직무가치를 산정하고 보상체계에 반영할 수 있다."
|
|
|
}
|
|
|
];
|
|
|
|
|
|
let idx = 0;
|
|
|
let score = 0;
|
|
|
let state = new Map();
|
|
|
let finished = false;
|
|
|
|
|
|
function getState(i) {
|
|
|
if (!state.has(i)) {
|
|
|
state.set(i, {selected: null, correct: false, revealed: false, scored: false});
|
|
|
}
|
|
|
return state.get(i);
|
|
|
}
|
|
|
|
|
|
function normalize(s) {
|
|
|
return (s || '').toString().replace(/[\s ]+/g, '').toLowerCase();
|
|
|
}
|
|
|
|
|
|
function select(val) {
|
|
|
const q = questions[idx];
|
|
|
const st = getState(idx);
|
|
|
if (st.revealed) return;
|
|
|
st.selected = val;
|
|
|
st.correct = normalize(val) === normalize(q.answer);
|
|
|
render();
|
|
|
}
|
|
|
|
|
|
function render() {
|
|
|
const quiz = document.getElementById('quiz');
|
|
|
quiz.innerHTML = '';
|
|
|
|
|
|
if (finished) {
|
|
|
const done = document.createElement('div');
|
|
|
done.className = 'card';
|
|
|
done.innerHTML = `
|
|
|
<div style="text-align: center;">
|
|
|
<h2>퀴즈 완료! 🎉</h2>
|
|
|
<p>최종 점수: ${score}/${questions.length} (${Math.round(score/questions.length*100)}%)</p>
|
|
|
<button class="btn" onclick="restart()">다시 시작하기</button>
|
|
|
</div>
|
|
|
`;
|
|
|
quiz.appendChild(done);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const q = questions[idx];
|
|
|
const st = getState(idx);
|
|
|
|
|
|
const card = document.createElement('div');
|
|
|
card.className = 'card';
|
|
|
|
|
|
const questionDiv = document.createElement('div');
|
|
|
questionDiv.className = 'question-text';
|
|
|
questionDiv.textContent = q.prompt;
|
|
|
card.appendChild(questionDiv);
|
|
|
|
|
|
if (q.choices && q.choices.length) {
|
|
|
q.choices.forEach((c, i) => {
|
|
|
const btn = document.createElement('button');
|
|
|
btn.className = 'choice';
|
|
|
btn.textContent = (i + 1) + '. ' + c;
|
|
|
btn.onclick = () => select(c);
|
|
|
|
|
|
const stNow = getState(idx);
|
|
|
if (stNow.revealed) {
|
|
|
btn.disabled = true;
|
|
|
btn.style.cursor = 'default';
|
|
|
if (normalize(c) === normalize(q.answer)) {
|
|
|
btn.style.borderColor = '#48bb78';
|
|
|
btn.style.background = 'linear-gradient(135deg, #f0fff4, #ebf8ff)';
|
|
|
btn.style.color = '#2f855a';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (stNow.selected === c) {
|
|
|
btn.classList.add('selected');
|
|
|
}
|
|
|
|
|
|
card.appendChild(btn);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
const btnWrap = document.createElement('div');
|
|
|
btnWrap.style.textAlign = 'center';
|
|
|
btnWrap.style.marginTop = '12px';
|
|
|
|
|
|
const submitBtn = document.createElement('button');
|
|
|
submitBtn.className = 'btn';
|
|
|
submitBtn.textContent = '정답 확인';
|
|
|
submitBtn.onclick = () => reveal();
|
|
|
|
|
|
const nextBtn = document.createElement('button');
|
|
|
nextBtn.className = 'btn';
|
|
|
nextBtn.textContent = '다음 문항';
|
|
|
nextBtn.onclick = () => gotoNext();
|
|
|
|
|
|
btnWrap.appendChild(submitBtn);
|
|
|
btnWrap.appendChild(nextBtn);
|
|
|
card.appendChild(btnWrap);
|
|
|
|
|
|
quiz.appendChild(card);
|
|
|
|
|
|
|
|
|
document.getElementById('status').textContent = `문항 ${idx+1}/${questions.length}`;
|
|
|
document.getElementById('score-text').textContent = `${score}/${questions.length}`;
|
|
|
|
|
|
|
|
|
document.getElementById('prev').disabled = (idx === 0);
|
|
|
document.getElementById('next').disabled = (idx >= questions.length - 1);
|
|
|
}
|
|
|
|
|
|
function reveal() {
|
|
|
const st = getState(idx);
|
|
|
if (st.revealed) return;
|
|
|
const q = questions[idx];
|
|
|
if (st.selected == null) return;
|
|
|
st.revealed = true;
|
|
|
if (!st.scored && st.correct) {
|
|
|
score += 1;
|
|
|
st.scored = true;
|
|
|
}
|
|
|
render();
|
|
|
}
|
|
|
|
|
|
function gotoNext() {
|
|
|
if (idx < questions.length - 1) {
|
|
|
idx += 1;
|
|
|
render();
|
|
|
} else {
|
|
|
finished = true;
|
|
|
render();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function restart() {
|
|
|
idx = 0;
|
|
|
score = 0;
|
|
|
state = new Map();
|
|
|
finished = false;
|
|
|
render();
|
|
|
}
|
|
|
|
|
|
|
|
|
document.getElementById('prev').addEventListener('click', () => {
|
|
|
if (idx > 0) {
|
|
|
idx -= 1;
|
|
|
render();
|
|
|
}
|
|
|
});
|
|
|
document.getElementById('next').addEventListener('click', () => {
|
|
|
if (idx < questions.length - 1) {
|
|
|
idx += 1;
|
|
|
render();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
render();
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
