Spaces:
Runtime error
Runtime error
File size: 48,436 Bytes
a9ffafc | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 | <!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unit 1 Quiz Report | 單元一測驗報告</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Playfair+Display:wght@600;700&display=swap');
:root {
--bg-primary: #0f1419;
--bg-secondary: #1a2332;
--bg-card: #212d3b;
--accent-coral: #ff6b6b;
--accent-teal: #4ecdc4;
--accent-gold: #ffd93d;
--accent-purple: #a855f7;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--border-color: #334155;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans TC', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.8;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
/* Header */
header {
text-align: center;
padding: 4rem 2rem;
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
border-bottom: 1px solid var(--border-color);
position: relative;
overflow: hidden;
}
header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 30% 70%, rgba(78, 205, 196, 0.08) 0%, transparent 50%),
radial-gradient(circle at 70% 30%, rgba(255, 107, 107, 0.08) 0%, transparent 50%);
animation: pulse 8s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
header h1 {
font-family: 'Playfair Display', serif;
font-size: 3rem;
font-weight: 700;
background: linear-gradient(135deg, var(--accent-teal), var(--accent-coral));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
position: relative;
z-index: 1;
}
header p {
color: var(--text-secondary);
font-size: 1.1rem;
position: relative;
z-index: 1;
}
/* Navigation Tabs */
.nav-tabs {
display: flex;
justify-content: center;
gap: 1rem;
padding: 1.5rem;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
flex-wrap: wrap;
}
.nav-tab {
padding: 0.75rem 1.5rem;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.nav-tab:hover, .nav-tab.active {
background: linear-gradient(135deg, var(--accent-teal), var(--accent-coral));
color: var(--bg-primary);
border-color: transparent;
transform: translateY(-2px);
}
/* Sections */
section {
padding: 3rem 0;
}
.section-title {
font-family: 'Playfair Display', serif;
font-size: 2rem;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--accent-teal);
display: inline-block;
}
/* Cards */
.card {
background: var(--bg-card);
border-radius: 16px;
padding: 2rem;
margin-bottom: 2rem;
border: 1px solid var(--border-color);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
/* Q&A Section */
.question-card {
position: relative;
overflow: hidden;
}
.question-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--accent-teal), var(--accent-coral));
}
.question-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--accent-teal), var(--accent-coral));
border-radius: 50%;
color: var(--bg-primary);
font-weight: 700;
margin-bottom: 1rem;
}
.question-text {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1rem;
}
.answer-box {
background: var(--bg-secondary);
padding: 1rem 1.5rem;
border-radius: 8px;
margin: 1rem 0;
border-left: 3px solid var(--accent-gold);
}
.answer-box strong {
color: var(--accent-gold);
}
.explanation {
background: rgba(78, 205, 196, 0.1);
padding: 1.5rem;
border-radius: 12px;
margin-top: 1rem;
}
.explanation h4 {
color: var(--accent-teal);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.concept-tag {
display: inline-block;
padding: 0.25rem 0.75rem;
background: rgba(168, 85, 247, 0.2);
color: var(--accent-purple);
border-radius: 20px;
font-size: 0.85rem;
margin: 0.25rem;
}
/* Statistics Section */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
background: var(--bg-card);
padding: 1.5rem;
border-radius: 12px;
text-align: center;
border: 1px solid var(--border-color);
}
.stat-value {
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(135deg, var(--accent-teal), var(--accent-coral));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
color: var(--text-secondary);
font-size: 0.9rem;
margin-top: 0.5rem;
}
.chart-container {
background: var(--bg-card);
padding: 2rem;
border-radius: 16px;
border: 1px solid var(--border-color);
}
/* Student Table */
.student-table {
width: 100%;
border-collapse: collapse;
margin-top: 1.5rem;
}
.student-table th,
.student-table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
.student-table th {
background: var(--bg-secondary);
color: var(--accent-teal);
font-weight: 600;
}
.student-table tr:hover {
background: rgba(78, 205, 196, 0.05);
}
.score-badge {
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.85rem;
}
.score-high { background: rgba(78, 205, 196, 0.2); color: var(--accent-teal); }
.score-mid { background: rgba(255, 217, 61, 0.2); color: var(--accent-gold); }
.score-low { background: rgba(255, 107, 107, 0.2); color: var(--accent-coral); }
/* Teacher Section */
.insight-card {
background: linear-gradient(135deg, rgba(78, 205, 196, 0.1), rgba(168, 85, 247, 0.1));
border: 1px solid var(--accent-teal);
}
.insight-card h3 {
color: var(--accent-teal);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.prompt-box {
background: var(--bg-primary);
padding: 1.5rem;
border-radius: 8px;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
line-height: 1.6;
border: 1px dashed var(--border-color);
white-space: pre-wrap;
margin-top: 1rem;
}
.improvement-list {
list-style: none;
padding: 0;
}
.improvement-list li {
padding: 0.75rem 0;
padding-left: 2rem;
position: relative;
border-bottom: 1px solid var(--border-color);
}
.improvement-list li::before {
content: '▸';
position: absolute;
left: 0;
color: var(--accent-coral);
}
/* Reading Passage */
.reading-passage {
background: var(--bg-secondary);
padding: 2rem;
border-radius: 12px;
margin: 1.5rem 0;
border: 1px solid var(--border-color);
font-style: italic;
line-height: 2;
}
.reading-passage .highlight {
background: rgba(255, 217, 61, 0.3);
padding: 0.1rem 0.3rem;
border-radius: 3px;
}
/* Responsive */
@media (max-width: 768px) {
header h1 { font-size: 2rem; }
.container { padding: 1rem; }
.card { padding: 1.5rem; }
.nav-tabs { gap: 0.5rem; }
.nav-tab { padding: 0.5rem 1rem; font-size: 0.9rem; }
}
/* Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-teal);
}
</style>
</head>
<body>
<header>
<div style="position: relative; z-index: 1; margin-bottom: 1rem;">
<span style="background: rgba(78, 205, 196, 0.2); color: var(--accent-teal); padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.85rem; font-weight: 500;">
📊 Generated by <strong>taboola-npo-cz-2026</strong>
</span>
</div>
<h1>Unit 1 Quiz Report</h1>
<p>單元一測驗分析報告 | My Wonderful Family 閱讀理解與寫作</p>
<div style="margin-top: 1.5rem; position: relative; z-index: 1;">
<a href="https://docs.google.com/forms/d/1WT9WrEPnV0U6_VYgEGXHc6geDtfe-Zd5BO6e_Y4ffOc/edit?ts=693672c2"
target="_blank"
style="display: inline-flex; align-items: center; gap: 0.5rem; background: var(--bg-card); color: var(--text-primary); padding: 0.75rem 1.5rem; border-radius: 8px; text-decoration: none; border: 1px solid var(--border-color); transition: all 0.3s ease;">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></polyline>
</svg>
📝 原始測驗連結 Original Quiz (Google Forms)
</a>
</div>
</header>
<nav class="nav-tabs">
<a href="#qa" class="nav-tab active">📝 題目詳解</a>
<a href="#stats" class="nav-tab">📊 成績統計</a>
<a href="#teacher" class="nav-tab">👩🏫 教師建議</a>
</nav>
<main class="container">
<!-- Q&A Section -->
<section id="qa">
<h2 class="section-title">📝 題目與詳解 Q&A Analysis</h2>
<div class="card">
<h3 style="color: var(--accent-teal); margin-bottom: 1rem;">📖 閱讀文章 Reading Passage</h3>
<div class="reading-passage">
<strong>Title: My Wonderful Family - The Lin's</strong><br><br>
Hello! My name is <span class="highlight">Nick</span>. I am a junior high school student, and I want to tell you about my family. We live in a warm and friendly home. My family is special to me, and I love spending time with them.<br><br>
My <span class="highlight">grandfather</span> is a farmer. He grows many fruits and vegetables. I always help him on weekends. My <span class="highlight">grandmother</span> is a cook. She makes delicious food. I like her famous soup! <span class="highlight">Paul</span> is my father. He is a tall man and a nurse. He helps many people when they are sick. My mother, <span class="highlight">Lily</span>, is a doctor. She is a kind and beautiful woman. I admire her very much.<br><br>
I have a sister named <span class="highlight">Bella</span>. She is my English teacher and <span class="highlight">helps me with my homework</span>. Sometimes we learn new words together. My brother, <span class="highlight">Eddie</span>, is in senior high school. He studies hard and <span class="highlight">wants to be a teacher one day</span>. We play games together after school, and I always have fun with him.<br><br>
Also, We have a cute pet pig named <span class="highlight">Abby</span>. She is small and loves to play in the garden. We feed her fruits and vegetables. Abby makes us all very happy.<br><br>
My family is full of love and joy. We enjoy spending time together, helping each other, and having fun. Everyone in my family has special jobs and interests, but we are always there for one another. I feel lucky to have such a wonderful family.
</div>
</div>
<!-- Question 1 -->
<div class="card question-card">
<div class="question-number">1</div>
<div class="question-text">How many people in Lin's family?<br>林家有幾個人？</div>
<div class="answer-box">
<strong>正確答案 Correct Answer:</strong> There are seven (7) people. / 有七個人
</div>
<div style="margin: 1rem 0;">
<span class="concept-tag">🎯 細節理解 Detail Comprehension</span>
<span class="concept-tag">🔢 數數技巧 Counting Skills</span>
<span class="concept-tag">👨👩👧👦 家庭成員辨識</span>
</div>
<div class="explanation">
<h4>📚 詳解 Detailed Explanation</h4>
<p><strong>這題測試什麼？</strong></p>
<p>這題主要測試學生的<strong>細節閱讀能力</strong>與<strong>資訊整合能力</strong>。學生需要仔細閱讀全文，找出所有家庭成員並正確計數。這是基礎閱讀理解中「找尋特定資訊」(scanning) 的技巧。</p>
<p style="margin-top: 1rem;"><strong>解題關鍵：</strong></p>
<p>林家成員共 7 人：</p>
<ol style="margin-left: 1.5rem; margin-top: 0.5rem;">
<li><strong>Nick</strong> - 敘述者本人 (國中生)</li>
<li><strong>Grandfather</strong> - 爺爺 (農夫)</li>
<li><strong>Grandmother</strong> - 奶奶 (廚師)</li>
<li><strong>Paul</strong> - 爸爸 (護士)</li>
<li><strong>Lily</strong> - 媽媽 (醫生)</li>
<li><strong>Bella</strong> - 姊姊 (英文老師)</li>
<li><strong>Eddie</strong> - 哥哥 (高中生)</li>
</ol>
<p style="margin-top: 0.5rem; color: var(--text-secondary);">※ 注意：寵物豬 Abby 不算在「人」的數量中</p>
<p style="margin-top: 1rem;"><strong>常見錯誤：</strong></p>
<ul style="margin-left: 1.5rem;">
<li>回答「六人」- 可能漏數了 Nick 本人或某位家庭成員</li>
<li>回答「五人」- 可能只數了核心家庭（父母+子女三人）</li>
<li>把寵物 Abby 也算進去</li>
</ul>
</div>
</div>
<!-- Question 2 -->
<div class="card question-card">
<div class="question-number">2</div>
<div class="question-text">Who doesn't have name in the reading?<br>文章中誰沒有名字？</div>
<div class="answer-box">
<strong>正確答案 Correct Answer:</strong> Nick's grandparents (grandfather and grandmother) / 尼克的祖父母
</div>
<div style="margin: 1rem 0;">
<span class="concept-tag">🔍 推論能力 Inference</span>
<span class="concept-tag">📖 細節對比 Detail Comparison</span>
<span class="concept-tag">🧠 批判思考</span>
</div>
<div class="explanation">
<h4>📚 詳解 Detailed Explanation</h4>
<p><strong>這題測試什麼？</strong></p>
<p>這題測試學生的<strong>細節辨識能力</strong>與<strong>對比分析能力</strong>。學生需要注意文章中提到的每個人物，並辨別哪些人有具體姓名、哪些人只用稱謂稱呼。這屬於較高層次的閱讀技巧。</p>
<p style="margin-top: 1rem;"><strong>解題關鍵：</strong></p>
<p>文章中有名字的人物：</p>
<ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
<li>Nick (敘述者)</li>
<li>Paul (爸爸)</li>
<li>Lily (媽媽)</li>
<li>Bella (姊姊)</li>
<li>Eddie (哥哥)</li>
<li>Abby (寵物豬)</li>
</ul>
<p style="margin-top: 0.5rem;"><strong>沒有名字的人物：Grandfather 和 Grandmother</strong></p>
<p>文章只用 "My grandfather" 和 "My grandmother" 來稱呼，沒有給予具體名字。</p>
<p style="margin-top: 1rem;"><strong>常見錯誤：</strong></p>
<ul style="margin-left: 1.5rem;">
<li>回答「Nick's pet」- Abby 是有名字的</li>
<li>混淆「稱謂」和「名字」的概念</li>
</ul>
</div>
</div>
<!-- Question 3 -->
<div class="card question-card">
<div class="question-number">3</div>
<div class="question-text">Who wants to become a teacher? (Name only)<br>誰想成為老師？（只寫名字）</div>
<div class="answer-box">
<strong>正確答案 Correct Answer:</strong> Eddie
</div>
<div style="margin: 1rem 0;">
<span class="concept-tag">🎯 特定資訊搜尋 Scanning</span>
<span class="concept-tag">📖 關鍵句辨識</span>
<span class="concept-tag">🔮 未來式理解</span>
</div>
<div class="explanation">
<h4>📚 詳解 Detailed Explanation</h4>
<p><strong>這題測試什麼？</strong></p>
<p>這題測試學生的<strong>關鍵字搜尋能力</strong> (Scanning) 以及對<strong>未來願望表達方式</strong>的理解。學生需要找到包含 "wants to be a teacher" 或類似表達的句子。</p>
<p style="margin-top: 1rem;"><strong>解題關鍵：</strong></p>
<p>關鍵句：<em>"My brother, Eddie, is in senior high school. He studies hard and <strong>wants to be a teacher one day</strong>."</em></p>
<p style="margin-top: 0.5rem;">注意這裡的 "wants to be" 表示「想要成為」，是表達未來願望的常見用法。</p>
<p style="margin-top: 1rem;"><strong>容易混淆的地方：</strong></p>
<ul style="margin-left: 1.5rem;">
<li><strong>Bella</strong> 是「現在」已經是英文老師 ("She <strong>is</strong> my English teacher")</li>
<li><strong>Eddie</strong> 是「想要」將來成為老師 ("He <strong>wants to be</strong> a teacher one day")</li>
</ul>
<p style="margin-top: 0.5rem; color: var(--accent-coral);">⚠️ 題目問的是「想要成為」(wants to become)，而不是「已經是」(is)，所以答案是 Eddie，不是 Bella！</p>
</div>
</div>
<!-- Question 4 -->
<div class="card question-card">
<div class="question-number">4</div>
<div class="question-text">Nick is struggling with his homework. According to the reading, who can help him?<br>Nick 正在為功課煩惱。根據文章，誰可以幫助他？</div>
<div class="answer-box">
<strong>正確答案 Correct Answer:</strong> His sister (Bella) / 他的姊姊（Bella）
</div>
<div style="margin: 1rem 0;">
<span class="concept-tag">🔍 應用推論 Application</span>
<span class="concept-tag">📖 情境理解 Context</span>
<span class="concept-tag">🔗 資訊連結 Connecting Information</span>
</div>
<div class="explanation">
<h4>📚 詳解 Detailed Explanation</h4>
<p><strong>這題測試什麼？</strong></p>
<p>這題測試學生的<strong>應用理解能力</strong>。學生需要將文章中的資訊應用到新的情境（Nick 需要功課幫助），這是較高層次的閱讀理解。</p>
<p style="margin-top: 1rem;"><strong>解題關鍵：</strong></p>
<p>關鍵句：<em>"I have a sister named Bella. She is my English teacher and <strong>helps me with my homework</strong>."</em></p>
<p style="margin-top: 0.5rem;">文章明確提到 Bella 會幫助 Nick 做功課。</p>
<p style="margin-top: 1rem;"><strong>常見錯誤：</strong></p>
<ul style="margin-left: 1.5rem;">
<li>回答「His grandparents」- 文章沒有提到祖父母幫忙功課</li>
<li>回答「His brother」- Eddie 是和 Nick 一起玩遊戲，不是幫忙功課</li>
<li>回答「His parents」- 雖然父母是護士和醫生，但文章沒提到他們幫功課</li>
</ul>
<p style="margin-top: 1rem;"><strong>學習重點：</strong></p>
<p>這題強調 "according to the reading"（根據文章），提醒學生答案必須來自文章內容，不能用自己的推測或生活經驗作答。</p>
</div>
</div>
<!-- Question 5 - Writing -->
<div class="card question-card">
<div class="question-number">5</div>
<div class="question-text">Can you introduce me your family?<br>你可以介紹你的家庭嗎？（寫作題）</div>
<div class="answer-box">
<strong>評分標準 Scoring Criteria:</strong><br>
• 至少介紹兩位家庭成員（包含自己）<br>
• 描述家庭生活或文化特色<br>
• 字數控制在 80 字以內<br>
• 可用 AI 輔助修改，但不可用 Google 翻譯
</div>
<div style="margin: 1rem 0;">
<span class="concept-tag">✍️ 寫作表達 Writing</span>
<span class="concept-tag">👨👩👧👦 家庭介紹 Family Introduction</span>
<span class="concept-tag">📝 段落組織 Organization</span>
</div>
<div class="explanation">
<h4>📚 詳解 Detailed Explanation</h4>
<p><strong>這題測試什麼？</strong></p>
<p>這題測試學生的<strong>英文寫作能力</strong>，包括：</p>
<ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
<li><strong>句子結構</strong>：能否正確使用主詞+動詞+受詞的基本句型</li>
<li><strong>家庭詞彙</strong>：father, mother, brother, sister, grandparents 等</li>
<li><strong>職業詞彙</strong>：student, teacher, farmer, nurse, doctor 等</li>
<li><strong>描述能力</strong>：描述家庭成員的特質或家庭文化</li>
</ul>
<p style="margin-top: 1rem;"><strong>範例解析：</strong></p>
<div style="background: var(--bg-secondary); padding: 1rem; border-radius: 8px; margin-top: 0.5rem;">
<p><em>"Hi, my name is May. There are four people in my family. I have a younger brother, and he is a police officer. My mom is a school nurse, and my dad is retired. My family is pretty noisy. We argue sometimes, but we still love each other very much."</em></p>
</div>
<p style="margin-top: 0.5rem;"><strong>範例優點：</strong></p>
<ul style="margin-left: 1.5rem;">
<li>✅ 清楚的開頭自我介紹</li>
<li>✅ 說明家庭人數</li>
<li>✅ 介紹家人及其職業</li>
<li>✅ 描述家庭特色（noisy, argue, love）</li>
<li>✅ 字數適中，約 60 字</li>
</ul>
</div>
</div>
</section>
<!-- Statistics Section -->
<section id="stats">
<h2 class="section-title">📊 成績統計 Statistics</h2>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-value">12</div>
<div class="stat-label">參與人數 Total Students</div>
</div>
<div class="stat-card">
<div class="stat-value">20.8</div>
<div class="stat-label">平均分數 Average Score</div>
</div>
<div class="stat-card">
<div class="stat-value">30</div>
<div class="stat-label">最高分 Highest</div>
</div>
<div class="stat-card">
<div class="stat-value">0</div>
<div class="stat-label">最低分 Lowest</div>
</div>
</div>
<div class="chart-container">
<h3 style="margin-bottom: 1.5rem; color: var(--accent-teal);">📈 分數分佈 Score Distribution</h3>
<canvas id="scoreChart" height="100"></canvas>
</div>
<div class="chart-container" style="margin-top: 2rem;">
<h3 style="margin-bottom: 1.5rem; color: var(--accent-teal);">🎯 各題答對率 Question Accuracy Rate</h3>
<canvas id="questionChart" height="100"></canvas>
</div>
<div class="card" style="margin-top: 2rem;">
<h3 style="color: var(--accent-teal); margin-bottom: 1rem;">📋 學生成績明細 Student Details</h3>
<div style="overflow-x: auto;">
<table class="student-table">
<thead>
<tr>
<th>姓名 Name</th>
<th>班級 Class</th>
<th>分數 Score</th>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
<th>Q4</th>
</tr>
</thead>
<tbody>
<tr>
<td>梁X邦</td>
<td>901</td>
<td><span class="score-badge score-high">30/70</span></td>
<td>✅</td>
<td>✅</td>
<td>✅</td>
<td>✅</td>
</tr>
<tr>
<td>李X恩</td>
<td>902</td>
<td><span class="score-badge score-high">30/70</span></td>
<td>✅</td>
<td>✅</td>
<td>✅</td>
<td>✅</td>
</tr>
<tr>
<td>謝X駿</td>
<td>902</td>
<td><span class="score-badge score-high">30/70</span></td>
<td>❌</td>
<td>✅</td>
<td>✅</td>
<td>✅</td>
</tr>
<tr>
<td>江X吟</td>
<td>901</td>
<td><span class="score-badge score-mid">20/70</span></td>
<td>✅</td>
<td>✅</td>
<td>❌</td>
<td>✅</td>
</tr>
<tr>
<td>賴X妤</td>
<td>901</td>
<td><span class="score-badge score-mid">20/70</span></td>
<td>✅</td>
<td>✅</td>
<td>❌</td>
<td>✅</td>
</tr>
<tr>
<td>陳X琳</td>
<td>902</td>
<td><span class="score-badge score-mid">20/70</span></td>
<td>❌</td>
<td>✅</td>
<td>❌</td>
<td>✅</td>
</tr>
<tr>
<td>郭X榕</td>
<td>902</td>
<td><span class="score-badge score-mid">20/70</span></td>
<td>❌</td>
<td>❌</td>
<td>✅</td>
<td>✅</td>
</tr>
<tr>
<td>黃X臻</td>
<td>901</td>
<td><span class="score-badge score-mid">20/70</span></td>
<td>✅</td>
<td>✅</td>
<td>❌</td>
<td>✅</td>
</tr>
<tr>
<td>王X芯</td>
<td>901</td>
<td><span class="score-badge score-mid">20/70</span></td>
<td>✅</td>
<td>✅</td>
<td>❌</td>
<td>✅</td>
</tr>
<tr>
<td>蕭X翔</td>
<td>901</td>
<td><span class="score-badge score-mid">20/70</span></td>
<td>❌</td>
<td>✅</td>
<td>✅</td>
<td>❌</td>
</tr>
<tr>
<td>X婕</td>
<td>901</td>
<td><span class="score-badge score-mid">20/70</span></td>
<td>❌</td>
<td>✅</td>
<td>✅</td>
<td>❌</td>
</tr>
<tr>
<td>消X好</td>
<td>901</td>
<td><span class="score-badge score-mid">20/70</span></td>
<td>❌</td>
<td>✅</td>
<td>❌</td>
<td>✅</td>
</tr>
<tr>
<td>許X彥</td>
<td>902</td>
<td><span class="score-badge score-low">0/70</span></td>
<td>❌</td>
<td>❌</td>
<td>❌</td>
<td>❌</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Teacher Section -->
<section id="teacher">
<h2 class="section-title">👩🏫 教師分析與建議 Teacher Insights</h2>
<div class="card insight-card">
<h3>📊 整體表現分析 Overall Performance Analysis</h3>
<p>本次測驗共 12 位學生參加，平均分數為 <strong>20.8/70</strong>（約 30%），顯示學生在閱讀理解方面仍有較大進步空間。</p>
<div style="margin-top: 1.5rem;">
<h4 style="color: var(--accent-gold); margin-bottom: 0.75rem;">🔍 各題表現分析：</h4>
<ul class="improvement-list">
<li>
<strong>Q1（家庭人數）- 答對率約 42%</strong><br>
<span style="color: var(--text-secondary);">問題：學生計數能力不足，容易漏數或多數家庭成員。部分學生混淆「人」與「寵物」的概念。</span>
</li>
<li>
<strong>Q2（沒有名字的人）- 答對率約 83%</strong><br>
<span style="color: var(--text-secondary);">表現最佳的題目。大部分學生能正確辨識祖父母沒有具體名字。</span>
</li>
<li>
<strong>Q3（想成為老師的人）- 答對率約 50%</strong><br>
<span style="color: var(--text-secondary);">問題：學生混淆「現在是」(is) 和「想要成為」(wants to be) 的差異。許多人誤答 Bella。</span>
</li>
<li>
<strong>Q4（誰能幫忙功課）- 答對率約 83%</strong><br>
<span style="color: var(--text-secondary);">大部分學生能正確找到關鍵句並回答。少數學生未根據文章回答。</span>
</li>
</ul>
</div>
</div>
<div class="card insight-card">
<h3>🎯 教學改進建議 Teaching Recommendations</h3>
<ul class="improvement-list">
<li>
<strong>加強「細節閱讀」訓練</strong><br>
建議在課堂上練習「畫重點」技巧，讓學生在閱讀時標記人物、數字、職業等關鍵資訊。
</li>
<li>
<strong>區分時態與語態</strong><br>
針對 Q3 的錯誤，需要加強 "is"（現在式）vs "wants to be"（未來願望）的教學。可設計對比練習讓學生辨別。
</li>
<li>
<strong>強調「根據文章回答」</strong><br>
提醒學生看到 "according to the reading" 時，答案必須來自文章，不能憑自己的想像或生活經驗作答。
</li>
<li>
<strong>計數策略教學</strong><br>
教導學生在回答「有幾個」類型的問題時，可以先在文章中圈出所有相關的人/物，再逐一計數。
</li>
<li>
<strong>寫作範例分析</strong><br>
在課堂上一起分析範例文章的結構，讓學生了解如何組織自我介紹段落。
</li>
</ul>
</div>
<div class="card insight-card">
<h3>🤖 下次出題 Prompt 建議 Next Exam Generation Prompt</h3>
<p style="margin-bottom: 1rem;">以下是給 AI 生成下次測驗的建議指令，可根據學生弱點調整題型：</p>
<div class="prompt-box">
請幫我生成一份英文閱讀測驗，針對國中生程度，主題為「家庭與日常生活」。
【文章要求】
- 長度：150-200 字
- 難度：國中一年級程度
- 內容：包含人物介紹、職業、日常活動
- 確保文章中有些人物有名字、有些人物只有稱謂
【題型要求】
1. 計數題（例：文中有幾個人/動物/物品？）
- 設計時確保答案需要仔細閱讀全文才能得出
2. 細節辨識題（例：誰沒有被提到名字？）
- 測試學生對細節的注意力
3. 時態辨別題 ⭐ 重點加強
- 設計「現在是什麼」vs「想要成為什麼」的對比問題
- 例如：Who IS a teacher? vs Who WANTS TO BE a teacher?
4. 應用推論題
- 給一個情境，讓學生從文章找出相關資訊
- 題目需包含 "according to the reading" 提示語
5. 簡答/寫作題
- 與閱讀主題相關的個人表達
- 字數限制 60-80 字
- 提供中文說明和範例
【額外要求】
- 提供標準答案和評分標準
- 每題標註測試的閱讀技能
- 題目需有中英對照
- 避免使用過於困難的生字
</div>
</div>
<div class="card insight-card">
<h3>📝 個別輔導建議 Individual Support</h3>
<div style="margin-top: 1rem;">
<h4 style="color: var(--accent-coral); margin-bottom: 0.5rem;">🔴 需要特別關注的學生：</h4>
<p><strong>許X彥 (0/70)</strong> - 所有選擇題皆答錯，建議：</p>
<ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
<li>一對一確認是否理解題目要求</li>
<li>檢視是否有閱讀理解的基礎困難</li>
<li>提供額外的閱讀練習材料</li>
</ul>
</div>
<div style="margin-top: 1.5rem;">
<h4 style="color: var(--accent-gold); margin-bottom: 0.5rem;">🟡 需要加強的學生（20/70）：</h4>
<p>大部分學生落在這個分數段，共同的弱點是 Q1（計數題）和 Q3（時態辨別）。建議進行全班性的複習。</p>
</div>
<div style="margin-top: 1.5rem;">
<h4 style="color: var(--accent-teal); margin-bottom: 0.5rem;">🟢 表現優良的學生（30/70）：</h4>
<p><strong>梁X邦、李X恩、謝X駿</strong> - 可以作為小老師協助同儕學習，或給予進階閱讀材料。</p>
</div>
</div>
</section>
</main>
<footer style="text-align: center; padding: 2rem; color: var(--text-muted); border-top: 1px solid var(--border-color);">
<p>Unit 1 Quiz Report | Generated by <strong style="color: var(--accent-teal);">taboola-npo-cz-2026</strong> | 慈中英文課 | 2025</p>
<p style="margin-top: 0.5rem; font-size: 0.85rem;">
<a href="https://docs.google.com/forms/d/1WT9WrEPnV0U6_VYgEGXHc6geDtfe-Zd5BO6e_Y4ffOc/edit?ts=693672c2"
target="_blank"
style="color: var(--text-secondary); text-decoration: none;">
📝 View Original Quiz
</a>
</p>
</footer>
<script>
// Score Distribution Chart
const scoreCtx = document.getElementById('scoreChart').getContext('2d');
new Chart(scoreCtx, {
type: 'bar',
data: {
labels: ['0分', '10分', '20分', '30分', '40分+'],
datasets: [{
label: '學生人數',
data: [1, 0, 9, 3, 0],
backgroundColor: [
'rgba(255, 107, 107, 0.7)',
'rgba(255, 159, 64, 0.7)',
'rgba(255, 217, 61, 0.7)',
'rgba(78, 205, 196, 0.7)',
'rgba(168, 85, 247, 0.7)'
],
borderColor: [
'rgba(255, 107, 107, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 217, 61, 1)',
'rgba(78, 205, 196, 1)',
'rgba(168, 85, 247, 1)'
],
borderWidth: 2,
borderRadius: 8
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
ticks: {
stepSize: 1,
color: '#94a3b8'
},
grid: {
color: 'rgba(51, 65, 85, 0.5)'
}
},
x: {
ticks: {
color: '#94a3b8'
},
grid: {
display: false
}
}
}
}
});
// Question Accuracy Chart
const questionCtx = document.getElementById('questionChart').getContext('2d');
new Chart(questionCtx, {
type: 'doughnut',
data: {
labels: ['Q1 家庭人數 (42%)', 'Q2 沒有名字 (83%)', 'Q3 想當老師 (50%)', 'Q4 幫忙功課 (83%)'],
datasets: [{
data: [42, 83, 50, 83],
backgroundColor: [
'rgba(255, 107, 107, 0.8)',
'rgba(78, 205, 196, 0.8)',
'rgba(255, 217, 61, 0.8)',
'rgba(168, 85, 247, 0.8)'
],
borderColor: '#1a2332',
borderWidth: 3
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',
labels: {
color: '#f1f5f9',
padding: 20,
font: {
size: 12
}
}
}
}
}
});
// Smooth scroll for navigation
document.querySelectorAll('.nav-tab').forEach(tab => {
tab.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
target.scrollIntoView({ behavior: 'smooth' });
document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
this.classList.add('active');
});
});
// Update active tab on scroll
window.addEventListener('scroll', () => {
const sections = document.querySelectorAll('section');
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
if (scrollY >= sectionTop - 200) {
current = section.getAttribute('id');
}
});
document.querySelectorAll('.nav-tab').forEach(tab => {
tab.classList.remove('active');
if (tab.getAttribute('href') === '#' + current) {
tab.classList.add('active');
}
});
});
</script>
</body>
</html>
|