<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>荆州市荆洁职业培训学校答题系统（仅支持Excel题库）</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script>
function loadScript(src, fallbackSrc, componentName, callback) {
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => { console.log(`${componentName} 加载成功`); callback(true); };
    script.onerror = () => {
        const fb = document.createElement('script');
        fb.src = fallbackSrc;
        fb.onload = () => { console.log(`本地${componentName} 加载成功`); callback(true); };
        fb.onerror = () => { alert(`${componentName} 加载失败`); callback(false); };
        document.head.appendChild(fb);
    };
    document.head.appendChild(script);
}

loadScript(
    'https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js',
    'xlsx.full.min.js',
    'xlsx',
    (ok) => { if (ok) loadTmExcelFile(); }
);
</script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,sans-serif;background:linear-gradient(to bottom right,#f3f4f6,#e5e7eb);min-height:100vh;color:#1f2937;padding-bottom:2rem}
.container{max-width:1200px;margin:0 auto;padding:2rem 1rem}
header{text-align:center;margin:1.5rem 0 2rem}
h1{font-size:clamp(1.8rem,5vw,2.5rem);font-weight:bold;background:linear-gradient(to right,#3B82F6,#8B5CF6);-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{color:#6b7280}
.card{background:#fff;border-radius:1rem;padding:2rem;box-shadow:0 10px 25px -5px rgba(0,0,0,.05);margin-bottom:2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:500;padding:.75rem 1.5rem;border-radius:.75rem;border:none;cursor:pointer;transition:all .3s;min-width:160px;height:50px}
.btn-two-lines{flex-direction:column;padding:.5rem 1rem;min-width:140px;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:#3B82F6;color:#fff}
.btn-secondary{background:#10B981;color:#fff}
.btn-gray{background:#e5e7eb;color:#4b5563}
.btn:disabled{opacity:.5;cursor:not-allowed}
.file-import{max-width:700px;margin:0 auto;text-align:center}
#file-upload{display:none}
.file-info{margin-top:1rem;display:none}
.help-text{color:#6b7280;font-size:.875rem;margin-top:1rem}
/* 修复：确保右侧正常显示 */
.flex-container{display:flex;flex-direction:row;gap:1.5rem;max-width:1200px;margin:0 auto}
.main-content{flex:1;min-width:0}
.sidebar{width:320px;flex-shrink:0}
@media(max-width:1023px){.flex-container{flex-direction:column}.sidebar{width:100%}}
.quiz-controls{display:none;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.quiz-controls.show{display:flex}
.question-count{font-size:1.125rem;font-weight:500}
.total-questions{color:#6b7280;margin-left:.5rem}
.score-display{background:#fff;padding:.5rem 1rem;border-radius:9999px;font-size:.875rem}
.score-value{font-weight:bold;color:#3B82F6}
.question-section{display:none}
.question-section.show{display:block}
.question-type{display:inline-block;padding:.5rem .75rem;background:rgba(59,130,246,.1);color:#3B82F6;font-size:.875rem;border-radius:9999px;margin-bottom:1rem}
.question-text{font-size:1.25rem;font-weight:600;margin-bottom:1.5rem;white-space:pre-wrap}
.options-container{margin-bottom:2rem;display:flex;flex-direction:column;gap:.75rem}
.option{padding:1rem;border:1px solid #e5e7eb;border-radius:.75rem;cursor:pointer}
.option:hover{background:rgba(59,130,246,.1)}
.option.selected{border-color:#3B82F6;background:rgba(59,130,246,.05)}
.option-label{display:flex}
.option-letter{width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:.75rem}
.option.selected .option-letter{background:#3B82F6;color:#fff}
.option:not(.selected) .option-letter{background:rgba(59,130,246,.1);color:#3B82F6}
.confirm-btn-container{text-align:center;margin-bottom:1.5rem}
.feedback{padding:1rem;border-radius:.5rem;margin-bottom:1.5rem;display:none}
.feedback.show{display:block}
.feedback-success{background:#f0fdf4;border:1px solid #dcfce7;color:#166534}
.feedback-error{background:#fee2e2;border:1px solid #fecaca;color:#b91c1c}
.explanation{padding:1.25rem;border-radius:.75rem;background:#f8fafc;border:1px solid #e2e8f0;margin-bottom:1.5rem;display:none}
.explanation.show{display:block}
.button-group{display:flex;justify-content:space-between;margin-top:1.5rem}
.results-section{display:none;text-align:center;max-width:700px;margin:0 auto}
.results-section.show{display:block}
.score-circle{width:9rem;height:9rem;border-radius:50%;background:linear-gradient(to bottom right,#3B82F6,#8B5CF6);margin:0 auto 2rem;color:#fff;display:flex;align-items:center;justify-content:center}
.final-score{font-size:3rem;font-weight:bold}
.results-buttons{display:flex;justify-content:center;gap:1rem;margin-top:2rem}
.error-section{display:none;text-align:center}
/* 修复：右侧答题卡默认隐藏，答题时显示 */
.answer-sheet-section{display:none}
.answer-sheet-section.show{display:block}
.answer-sheet{position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow-y:auto}
.answer-sheet-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin:1rem 0}
.answer-sheet-btn{width:2rem;height:2rem;border-radius:50%;border:none;font-size:.875rem;cursor:pointer}
.answer-sheet-btn.unanswered{background:#e5e7eb;color:#4b5563}
.answer-sheet-btn.current{background:#3B82F6;color:#fff}
.answer-sheet-btn.correct{background:#10B981;color:#fff}
.answer-sheet-btn.incorrect{background:#EF4444;color:#fff}
.legend{display:flex;gap:1rem;font-size:.75rem;flex-wrap:wrap}
.legend-color{width:1rem;height:1rem;border-radius:50%}
.debug-toggle-btn{background:transparent;border:1px solid #6b7280;color:#6b7280;padding:.5rem 1rem;border-radius:.5rem;cursor:pointer;margin-top:.5rem}
.start-quiz-section{display:none;text-align:center;padding:1rem 0}
.btn-group{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}
.random-question-input{display:flex;align-items:center;gap:.5rem}
.random-question-input input{width:80px;padding:.75rem;border-radius:.75rem;border:1px solid #e5e7eb;text-align:center}
.debug-info{display:none;margin-top:1rem;padding:1rem;background:#f3f4f6;border-radius:.5rem}
</style>
</head>
<body>
<div class="container">
  <header>
    <h1>荆州市荆洁职业培训学校答题系统</h1>
    <p class="subtitle">本系统已自带题库，仅支持Excel (xlsx, xls) 格式题库</p>
  </header>

  <div id="file-import-section" class="card file-import">
    <div class="btn-group">
      <label for="file-upload" class="btn btn-primary">选择题库文件</label>
      <button id="download-sample-btn" class="btn btn-secondary">下载题库示例</button>
    </div>
    <input id="file-upload" type="file" accept=".xlsx,.xls">
    <p class="help-text">
      格式：问题,选项A,选项B,选项C,选项D,选项E,选项F,解析,答案<br>
      答案支持：A-F、1-6、正确/错误、对/错、Y/N
    </p>
    <div id="file-info" class="file-info">
      <span>✓</span> <span id="selected-filename"></span>
    </div>
    
    <div id="start-quiz-section" class="start-quiz-section">
      <div class="btn-group">
        <button id="sequential-quiz-btn" class="btn btn-secondary btn-two-lines">顺序答题<br>顺序选项</button>
        <button id="sequential-shuffle-btn" class="btn btn-secondary btn-two-lines">顺序答题<br>随机选项</button>
        <button id="random-quiz-btn" class="btn btn-primary btn-two-lines">随机抽题<br>顺序选项</button>
        <button id="random-shuffle-btn" class="btn btn-primary btn-two-lines">随机抽题<br>随机选项</button>
      </div>
      <div style="margin-top:1rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap">
        <button id="debug-toggle" class="debug-toggle-btn">显示调试信息</button>
        <div class="random-question-input">
          <span>随机</span><input type="number" id="random-count" min="1" value="10"><span>题</span>
        </div>
      </div>
    </div>
    
    <div id="debug-info" class="debug-info">
      <p id="debug-details"></p>
    </div>
  </div>

  <div class="flex-container">
    <div class="main-content">
      <div id="quiz-controls" class="quiz-controls">
        <div class="question-count">
          <span id="current-question">问题1</span>
          <span id="total-questions">/0</span>
        </div>
        <div class="score-display">得分: <span id="score">0</span></div>
      </div>

      <div id="quiz-section" class="card question-section">
        <div class="question-type">选择题</div>
        <h2 id="question-text" class="question-text"></h2>
        <div id="options-container" class="options-container"></div>
        <div class="confirm-btn-container">
          <button id="confirm-btn" class="btn btn-primary">提交答案</button>
        </div>
        <div id="feedback" class="feedback"></div>
        <div id="explanation" class="explanation">
          <strong>解析：</strong>
          <div id="explanation-content"></div>
        </div>
        <div class="button-group">
          <button id="prev-btn" class="btn btn-gray" disabled>上一题</button>
          <button id="next-btn" class="btn btn-primary" disabled>下一题</button>
        </div>
      </div>

      <div id="results-section" class="card results-section">
        <h2>测验完成！</h2>
        <div class="score-circle">
          <span id="final-score">0</span>/<span id="final-total">0</span>
        </div>
        <div class="results-buttons">
          <button id="restart-btn" class="btn btn-secondary">重新开始</button>
          <button id="export-wrong-btn" class="btn btn-gray">导出错题</button>
          <button id="new-file-btn" class="btn btn-gray">换文件</button>
        </div>
      </div>

      <div id="error-section" class="card error-section">
        <h3 style="color:#dc2626">文件处理错误</h3>
        <p id="error-message"></p>
        <button id="retry-btn" class="btn btn-primary">重试</button>
      </div>
    </div>

    <!-- 右侧答题卡区域 -->
    <div id="answer-sheet-section" class="sidebar answer-sheet-section">
      <div class="card answer-sheet">
        <h3>答题卡</h3>
        <div style="display:flex;justify-content:space-between;margin:1rem 0">
          <div>已答：<span id="answered-count">0</span></div>
          <div>正确：<span id="correct-count">0</span></div>
          <div>总题：<span id="total-count">0</span></div>
        </div>
        <div id="answer-sheet-grid" class="answer-sheet-grid"></div>
        <div class="legend">
          <div><span class="legend-color" style="background:#e5e7eb"></span>未答</div>
          <div><span class="legend-color" style="background:#3B82F6"></span>当前</div>
          <div><span class="legend-color" style="background:#10B981"></span>正确</div>
          <div><span class="legend-color" style="background:#EF4444"></span>错误</div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
let questions = [], originalQuestions = [];
let current = 0, score = 0, answered = 0, correct = 0;
let status = [];
let parsingErrors = [];
let originalFileName = '';

const el = id => document.getElementById(id);
const fileUpload = el('file-upload');
const confirmBtn = el('confirm-btn');
const nextBtn = el('next-btn');
const prevBtn = el('prev-btn');
const answerSheetSection = el('answer-sheet-section');

fileUpload.addEventListener('change', handleFile);
confirmBtn.addEventListener('click', confirmAnswer);
prevBtn.addEventListener('click', () => go(-1));
nextBtn.addEventListener('click', () => go(1));
el('restart-btn').addEventListener('click', restart);
el('new-file-btn').addEventListener('click', selectNewFile);
el('retry-btn').addEventListener('click', retryFile);
el('sequential-quiz-btn').addEventListener('click', () => start('normal'));
el('sequential-shuffle-btn').addEventListener('click', () => start('shuffle'));
el('random-quiz-btn').addEventListener('click', () => start('random'));
el('random-shuffle-btn').addEventListener('click', () => start('random-shuffle'));
el('debug-toggle').addEventListener('click', () => el('debug-info').classList.toggle('show'));
el('download-sample-btn').addEventListener('click', sample);
el('export-wrong-btn').addEventListener('click', exportWrong);

function loadTmExcelFile() {
  fetch('物业管理师刷题平台题库.xlsx')
    .then(r => r.arrayBuffer())
    .then(data => {
      const wb = XLSX.read(new Uint8Array(data), { type: 'array' });
      const json = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1 });
      const res = parse(json.map(r => r.join(',')));
      originalQuestions = res.questions.map((q, i) => ({ ...q, originalIndex: i }));
      questions = [...originalQuestions];
      parsingErrors = res.errors;
      el('debug-details').textContent = parsingErrors.join('\n') || '无错误';
      if (questions.length) {
        el('selected-filename').textContent = '物业管理师刷题平台题库.xlsx';
        el('file-info').style.display = 'block';
        el('start-quiz-section').style.display = 'block';
      }
    })
    .catch(() => {});
}

function sample() {
  const wb = XLSX.utils.book_new();
  const data = [
    ['问题','A','B','C','D','E','F','解析','答案'],
    ['1+1=?','1','2','3','4','','','等于2','B']
  ];
  XLSX.utils.book_append_sheet(wb, XLSX.utils.aoa_to_sheet(data), '示例');
  XLSX.writeFile(wb, '示例题库.xlsx');
}

function handleFile(e) {
  const file = e.target.files[0];
  if (!file) return;
  const r = new FileReader();
  r.onload = () => {
    const wb = XLSX.read(new Uint8Array(r.result), { type: 'array' });
    const json = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1 });
    const res = parse(json.map(r => r.join(',')));
    originalQuestions = res.questions.map((q, i) => ({ ...q, originalIndex: i }));
    questions = [...originalQuestions];
    el('selected-filename').textContent = file.name;
    el('file-info').style.display = 'block';
    el('start-quiz-section').style.display = 'block';
  };
  r.readAsArrayBuffer(file);
}

function parse(lines) {
  const qs = [], err = [];
  for (let i = 1; i < lines.length; i++) {
    try {
      const f = lines[i].split(',').map(x => x.trim());
      const question = f[0];
      const opts = f.slice(1, 7).filter(x => x);
      const options = opts.length >= 2 ? opts : ['正确', '错误'];
      const expl = f[7] || '';
      let ans = (f[8] || f[7] || '').toUpperCase().replace(/[^A-Z1-6]/g, '');
      if (/^[1-6]$/.test(ans)) ans = String.fromCharCode(64 + parseInt(ans));
      qs.push({
        question, options,
        optionLabels: ['A', 'B', 'C', 'D', 'E', 'F'].slice(0, options.length),
        correctAnswers: ans.split(''),
        explanation: expl
      });
    } catch (e) {
      err.push(`第${i + 1}行错误`);
    }
  }
  return { questions: qs, errors: err };
}

function start(mode) {
  if (mode.includes('random')) {
    const c = parseInt(el('random-count').value) || 10;
    questions = [...originalQuestions].sort(() => Math.random() - 0.5).slice(0, c);
  } else {
    questions = [...originalQuestions];
  }
  if (mode.includes('shuffle')) {
    questions = questions.map(q => {
      const os = [...q.options];
      for (let i = os.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [os[i], os[j]] = [os[j], os[i]];
      }
      return { ...q, options: os };
    });
  }
  el('file-import-section').style.display = 'none';
  current = score = answered = correct = 0;
  status = questions.map(() => ({ answered: false, correct: false, selected: [] }));
  el('quiz-controls').classList.add('show');
  el('quiz-section').classList.add('show');
  // 修复：答题时显示右侧答题卡
  answerSheetSection.classList.add('show');
  buildSheet();
  render();
}

function buildSheet() {
  const g = el('answer-sheet-grid');
  g.innerHTML = '';
  el('total-count').textContent = questions.length;
  el('total-questions').textContent = `/${questions.length}`;
  questions.forEach((_, i) => {
    const b = document.createElement('button');
    b.className = 'answer-sheet-btn unanswered';
    b.textContent = i + 1;
    b.onclick = () => {
      if (status[current].answered || current === i) render(i);
    };
    g.appendChild(b);
  });
}

function render(idx = current) {
  current = idx;
  const q = questions[idx];
  el('question-text').textContent = q.question;
  el('current-question').textContent = `问题${idx + 1}`;
  el('options-container').innerHTML = '';
  el('feedback').classList.remove('show');
  el('explanation').classList.remove('show');
  confirmBtn.disabled = status[idx].answered;

  q.options.forEach((opt, i) => {
    const o = document.createElement('div');
    o.className = `option ${status[idx].selected.includes(i) ? 'selected' : ''}`;
    o.onclick = () => {
      if (status[idx].answered) return;
      o.classList.toggle('selected');
      const s = status[idx].selected;
      o.classList.contains('selected') ? s.push(i) : s.splice(s.indexOf(i), 1);
    };
    o.innerHTML = `<div class="option-label"><div class="option-letter">${q.optionLabels[i]}</div><div>${opt}</div></div>`;
    el('options-container').appendChild(o);
  });

  const btns = Array.from(el('answer-sheet-grid').children);
  btns.forEach((b, i) => {
    b.className = 'answer-sheet-btn';
    if (i === idx) b.classList.add('current');
    else b.classList.add(status[i].answered ? (status[i].correct ? 'correct' : 'incorrect') : 'unanswered');
  });

  prevBtn.disabled = idx === 0;
  nextBtn.disabled = !status[idx].answered || idx >= questions.length - 1;
}

function confirmAnswer() {
  const idx = current;
  if (status[idx].answered) return;
  const q = questions[idx];
  const sel = status[idx].selected.map(i => q.optionLabels[i]).sort().join('');
  const ans = q.correctAnswers.sort().join('');

  status[idx].answered = true;
  status[idx].correct = sel === ans;
  if (status[idx].correct) { score++; correct++; }
  answered++;

  el('score').textContent = score;
  el('answered-count').textContent = answered;
  el('correct-count').textContent = correct;

  const fb = el('feedback');
  fb.className = `feedback ${sel === ans ? 'feedback-success' : 'feedback-error'}`;
  fb.textContent = sel === ans ? '✓ 正确' : `✗ 错误，正确：${ans}`;
  fb.classList.add('show');

  if (q.explanation) {
    el('explanation-content').textContent = q.explanation;
    el('explanation').classList.add('show');
  }

  confirmBtn.disabled = true;
  nextBtn.disabled = idx >= questions.length - 1;

  if (answered === questions.length) {
    setTimeout(() => {
      el('quiz-section').classList.remove('show');
      el('results-section').classList.add('show');
      el('final-score').textContent = score;
      el('final-total').textContent = questions.length;
    }, 1500);
  }
}

function go(delta) {
  const n = current + delta;
  if (n >= 0 && n < questions.length) render(n);
}

function restart() {
  el('results-section').classList.remove('show');
  current = score = answered = correct = 0;
  status = questions.map(() => ({ answered: false, correct: false, selected: [] }));
  el('score').textContent = 0;
  el('answered-count').textContent = 0;
  el('correct-count').textContent = 0;
  el('quiz-section').classList.add('show');
  buildSheet();
  render();
}

function selectNewFile() {
  el('results-section').classList.remove('show');
  el('quiz-section').classList.remove('show');
  el('quiz-controls').classList.remove('show');
  // 修复：换文件时隐藏右侧答题卡
  answerSheetSection.classList.remove('show');
  el('file-import-section').style.display = 'block';
  el('start-quiz-section').style.display = 'none';
  el('file-info').style.display = 'none';
  fileUpload.value = '';
}

function retryFile() {
  el('error-section').classList.remove('show');
  el('file-import-section').style.display = 'block';
}

function exportWrong() {
  const wrong = questions.filter((_, i) => status[i].answered && !status[i].correct);
  if (!wrong.length) return alert('全对！');
  const wb = XLSX.utils.book_new();
  const data = [['问题', 'A', 'B', 'C', 'D', 'E', 'F', '解析', '答案']];
  wrong.forEach(q => {
    const row = [q.question, ...q.options];
    while (row.length < 7) row.push('');
    row.push(q.explanation || '', q.correctAnswers.join(''));
    data.push(row);
  });
  XLSX.utils.book_append_sheet(wb, XLSX.utils.aoa_to_sheet(data), '错题');
  XLSX.writeFile(wb, '错题集.xlsx');
}
</script>
</body>
</html>