|
2 | 2 | <html lang="en"> |
3 | 3 | <head> |
4 | 4 | <meta charset="utf-8"> |
5 | | -<title>Semantic Analysis Quiz</title> |
| 5 | +<title>Compiler Design Quiz</title> |
6 | 6 | <meta name="viewport" content="width=device-width,initial-scale=1"> |
7 | 7 | <style> |
8 | 8 | :root{ |
|
12 | 12 | body{font-family:system-ui,Segoe UI,Roboto,sans-serif;margin:0;background:var(--bg);color:var(--fg);} |
13 | 13 | header{padding:1rem;background:var(--accent);color:#fff;text-align:center;} |
14 | 14 | main{padding:1rem;max-width:820px;margin:auto;} |
15 | | - h2{margin-top:2rem;color:var(--accent);} |
| 15 | + h2{margin-top:2rem;color:var(--accent); border-bottom: 2px solid #eee; padding-bottom: 0.5rem;} |
16 | 16 | .q{padding:1rem;border:1px solid var(--border);border-radius:6px;margin-bottom:.8rem;background:#fff; transition: background 0.3s;} |
17 | 17 | .q.correct{border-color:var(--ok);background:#f1f8f4;} |
18 | 18 | .q.wrong {border-color:var(--bad);background:#fef5f5;} |
|
25 | 25 | #result.show{display:block; background:#e3f2fd;border:1px solid var(--accent);} |
26 | 26 | footer{padding:1rem;text-align:center;font-size:.85rem;color:#555;} |
27 | 27 |
|
28 | | - /* 新增：代码块与解析的样式 */ |
| 28 | + /* 代码块与解析的样式 */ |
29 | 29 | code { background: #eee; padding: 2px 5px; border-radius: 4px; color: #d63384; font-family: monospace; } |
30 | 30 | .explanation { |
31 | 31 | display: none; |
|
55 | 55 | <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> |
56 | 56 | </head> |
57 | 57 | <body> |
58 | | -<header><h1>Semantic Analysis – Self-Check Quiz</h1></header> |
| 58 | +<header><h1>Register Allocation – Self-Check Quiz</h1></header> |
59 | 59 | <main> |
| 60 | + <section id="tf"><h2>True / False</h2></section> |
60 | 61 | <section id="mcq"><h2>Multiple Choice</h2></section> |
61 | 62 | <div id="result"></div> |
62 | 63 | </main> |
63 | 64 | <footer> |
64 | | - <p>Based on "Semantic Analysis" chapter. © 2026</p> |
| 65 | + <p>Based on "Register Allocation" chapters. © 2026</p> |
65 | 66 | <p style="margin-top: 1rem; font-size: 0.85rem;"> |
66 | 67 | 📖 源码与贡献题目请访问：<a href="https://github.com/rainoftime/tiger/tree/main/exercises" target="_blank" style="color: var(--accent); text-decoration: none;">GitHub Exercises</a> |
67 | 68 | </p> |
68 | 69 | </footer> |
69 | 70 |
|
70 | 71 | <script> |
| 72 | +const tfWrap = document.getElementById('tf'); |
71 | 73 | const mcqWrap = document.getElementById('mcq'); |
72 | 74 | const resultBox = document.getElementById('result'); |
73 | 75 |
|
|
77 | 79 | return text.replace(/`([^`]+)`/g, '<code>$1</code>'); |
78 | 80 | } |
79 | 81 |
|
80 | | -// build multiple choice element |
81 | | -function buildMCQ(q, i){ |
82 | | - const div=document.createElement('div'); |
83 | | - div.className='q'; |
84 | | - div.dataset.correct=q.answer; // store index |
85 | | - let optionsHTML=''; |
| 82 | +// build multiple choice / TF element |
| 83 | +function buildMCQ(q, globalIdx, labelPrefix = "Q"){ |
| 84 | + const div = document.createElement('div'); |
| 85 | + div.className = 'q'; |
| 86 | + div.dataset.correct = q.answer; // store index |
| 87 | + let optionsHTML = ''; |
86 | 88 |
|
87 | 89 | q.options.forEach((opt, idx) => { |
88 | 90 | // 只有当有解析时才渲染解析 div |
89 | | - const expHTML = opt.explanation ? `<div class="explanation">${formatText(opt.explanation)}</div>` : ''; |
| 91 | + const expHTML = opt.explanation ? `<div class=explanation>${formatText(opt.explanation)}</div>` : ''; |
90 | 92 | optionsHTML += ` |
91 | | - <label class="option-label" id="lbl-${i}-${idx}"> |
92 | | - <input type="radio" name="mc${i}" value="${idx}"> |
| 93 | + <label class="option-label" id="lbl-${globalIdx}-${idx}"> |
| 94 | + <input type="radio" name="q${globalIdx}" value="${idx}"> |
93 | 95 | <span class="opt-text">${formatText(opt.text)}</span> |
94 | 96 | </label> |
95 | 97 | ${expHTML} |
96 | 98 | `; |
97 | 99 | }); |
98 | 100 |
|
99 | | - div.innerHTML=`<strong>Q${i+1}.</strong> ${formatText(q.question)}<br><div style="margin-top:0.8rem;">${optionsHTML}</div> |
100 | | - <button class="check-btn" id="btn-${i}">Check Answer / 查看解析</button>`; |
| 101 | + div.innerHTML=`<strong>${labelPrefix}.</strong> ${formatText(q.question)}<br><div style="margin-top:0.8rem;">${optionsHTML}</div> |
| 102 | + <button class="check-btn" id="btn-${globalIdx}">Check Answer / 查看解析</button>`; |
101 | 103 | return div; |
102 | 104 | } |
103 | 105 |
|
|
106 | 108 | const correctIdx = parseInt(div.dataset.correct); |
107 | 109 | const sel = div.querySelector('input[type=radio]:checked'); |
108 | 110 |
|
109 | | - // 如果没有选择，设定 selectedIdx 为 -1，不再拦截弹窗 |
| 111 | + // 如果没有选择，设定 selectedIdx 为 -1 |
110 | 112 | const selectedIdx = sel ? parseInt(sel.value) : -1; |
111 | 113 |
|
112 | 114 | // 判断对错（未作答视为错误） |
|
147 | 149 | checkAllFinished(); |
148 | 150 | } |
149 | 151 |
|
| 152 | +// 检查是否所有题目均已作答，完成后显示总分 |
| 153 | +function checkAllFinished() { |
| 154 | + const total = quizData.trueFalse.length + quizData.multipleChoice.length; |
| 155 | + const answered = document.querySelectorAll('.q.correct, .q.wrong').length; |
| 156 | + if (answered === total) { |
| 157 | + const correct = document.querySelectorAll('.q.correct').length; |
| 158 | + resultBox.innerHTML = `All Answered! Final Score (您的总成绩): ${correct} / ${total} (${Math.round(correct/total*100)}%)`; |
| 159 | + resultBox.classList.add('show'); |
| 160 | + } |
| 161 | +} |
| 162 | + |
150 | 163 | // 检查是否所有题目均已作答，完成后显示总分 |
151 | 164 | function checkAllFinished() { |
152 | 165 | const total = quizData.multipleChoice.length; |
|
0 commit comments