| <!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> |
