add phân tích ý tưởng

Author: TranHuuDat2004

components/footer.html

@@ -57,6 +57,7 @@ <h4>Các Kỹ năng</h4>
                     <a href="writing_errors.html">Các lỗi sai thường gặp</a>
                     <a href="grammar_errors.html">Các lỗi sai ngữ pháp</a>
                     <a href="writing-structure-quiz.html">Part 4 Structure Quiz </a>
+                    <a href="writing-prompt-quiz.html">Phân Tích Đề Bài </a>
                 </div>
             </div>
             <div class="footer-dropdown">

components/header.html

@@ -50,6 +50,7 @@
                         <a href="grammar_errors.html">Các lỗi sai ngữ pháp</a> <!-- THÊM DÒNG NÀY -->
                         <a href="writing_club_errors.html">Lỗi sai câu trả lời</a>
                         <a href="writing-structure-quiz.html">Part 4 Structure Quiz </a>
+                        <a href="writing-prompt-quiz.html">Phân Tích Đề Bài </a>
                     </div>
                 </li>
                 <li class="dropdown">
@@ -128,7 +129,7 @@
                     <a href="grammar_errors.html">- Các lỗi sai ngữ pháp</a> <!-- THÊM DÒNG NÀY -->
                     <a href="writing_club_errors.html">- Lỗi sai câu trả lời</a>
                     <a href="writing-structure-quiz.html">- Part 4 Structure Quiz </a>
-
+                    <a href="writing-prompt-quiz.html">- Phân Tích Đề Bài </a>
                 </div>
             </li>
 

css/quiz.css

@@ -0,0 +1,141 @@
+    /* === CSS CHO TRANG LISTENING PART 1 === */
+
+    .listening-question .question-title {
+        font-weight: 500;
+        margin-bottom: 20px;
+    }
+
+    .options-container {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .radio-label {
+        display: block;
+        padding: 15px;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s ease-in-out;
+    }
+
+    .radio-label:hover {
+        background-color: #f8f9fa;
+        border-color: #007bff;
+    }
+
+    .radio-label input[type="radio"] {
+        margin-right: 10px;
+    }
+
+    /* Style cho trạng thái Đúng/Sai */
+    .quiz-card.correct {
+        border-left: 5px solid #28a745;
+        background-color: #e6ffed;
+    }
+
+    .quiz-card.incorrect {
+        border-left: 5px solid #dc3545;
+        background-color: #ffe6e6;
+    }
+
+    .feedback-answer {
+        margin-top: 15px;
+        font-weight: 500;
+    }
+
+    .quiz-card.correct .feedback-answer {
+        color: #28a745;
+    }
+
+    .quiz-card.incorrect .feedback-answer {
+        color: #dc3545;
+    }
+
+    /* === STYLE MỚI CHO PHÂN TRANG (DÙNG CSS GRID) === */
+    .pagination-controls {
+        display: grid;
+        /* Desktop: 10 cột bằng nhau */
+        grid-template-columns: repeat(15, 1fr);
+        gap: 8px;
+        margin: 30px 0;
+    }
+
+    .pagination-controls button {
+        /* Làm cho nút có kích thước đồng đều và vuông vắn */
+        width: 100%;
+        aspect-ratio: 1 / 1;
+        /* Giữ tỷ lệ 1:1 (vuông) */
+        padding: 0;
+        /* Bỏ padding để nút lấp đầy ô grid */
+
+        /* Căn giữa số bên trong nút */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        /* Style cơ bản */
+        background-color: #fff;
+        border: 1px solid #ccc;
+        color: #333;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 1em;
+        font-weight: 500;
+    }
+
+    .pagination-controls button.active {
+        background-color: #007bff;
+        color: #fff;
+        border-color: #007bff;
+    }
+
+    /* Responsive: Áp dụng cho màn hình nhỏ hơn 768px (máy tính bảng và điện thoại) */
+    @media (max-width: 768px) {
+        .pagination-controls {
+            /* Mobile: 5 cột bằng nhau */
+            grid-template-columns: repeat(7, 1fr);
+        }
+    }
+
+    .audio-player {
+        width: 100%;
+        margin-bottom: 20px;
+
+        /* === ĐÂY LÀ DÒNG ĐỂ ẨN AUDIO === */
+        display: none;
+    }
+
+    /* === CSS MỚI CHO HỘP GIẢI THÍCH === */
+
+    .resource-links {
+        display: flex;
+        justify-content: center;
+        gap: 15px;
+        margin: 25px 0;
+    }
+
+    .resource-links .action-btn {
+        text-decoration: none;
+    }
+
+    .explanation-box h4 {
+        margin-top: 20px;
+        text-align: center;
+    }
+
+    .explanation-box .custom-ol {
+        max-width: 650px;
+        /* Giới hạn chiều rộng để dễ đọc */
+        margin: 15px auto 0;
+        /* Căn giữa block */
+        padding-left: 20px;
+        text-align: left;
+        /* Căn trái nội dung text */
+    }
+
+    .explanation-box .custom-ol li {
+        margin-bottom: 10px;
+        line-height: 1.6;
+    }

css/reading-test.css

@@ -172,8 +172,6 @@ html {
     border-radius: 6px;
 }
 
-/* === CSS ĐÃ SỬA LẠI CHO PART 5 === */
-.heading-matching-container {}
 
 .headings-list {
     list-style-type: none;

index.html

@@ -137,7 +137,7 @@ <h3>Cheatsheet</h3>
                         </a>
                         <a href="listening_part1_test.html" class="part-card">
                             <h3 style="color: red;">Làm bài Part 1</h3>
-                            <strong>Kiểm tra trí nhớ của bạn</strong>
+                            <strong>Kiểm tra ghi nhớ key</strong>
                         </a>
                     </div>
                 </section>
@@ -210,6 +210,10 @@ <h3>Part 4</h3>
                             <h3>Part 4 Structure Quiz</h3>
                             <p>Kiểm tra khả năng ghi nhớ câu mẫu Thân mật & Trang trọng.</p>
                         </a>
+                        <a href="writing-prompt-quiz.html" class="part-card">
+                            <h3>Phân Tích Đề Bài</h3>
+                            <p>Kiểm tra khả năng đọc hiểu yêu cầu.</p>
+                        </a>
                     </div>
                 </section>