Merge 1b485ec7b4 into c92b0bc3a8

quiz-app/index.html

@@ -31,6 +31,25 @@
             <label for="d" id="d_text">Question</label>
           </li>
         </ul>
+
+        <div class="rating-section">
+          <p>为这道题打分 (1-5分):</p>
+          <div class="stars" id="rating-stars">
+            <span class="star" data-rating="1">★</span>
+            <span class="star" data-rating="2">★</span>
+            <span class="star" data-rating="3">★</span>
+            <span class="star" data-rating="4">★</span>
+            <span class="star" data-rating="5">★</span>
+          </div>
+          <p class="high-score" id="high-score">历史最高分: 未评分</p>
+        </div>
+
+        <div class="notes-section">
+          <label for="notes">笔记:</label>
+          <textarea id="notes" placeholder="输入你的笔记..."></textarea>
+          <button id="save-notes" class="save-btn">保存笔记</button>
+          <p class="save-status" id="save-status"></p>
+        </div>
       </div>
       <button id="submit">Submit</button>
     </div>

quiz-app/script.js

@@ -31,6 +31,38 @@ const quizData = [
         d: "none of the above",
         correct: "b",
     },
+    {
+        question: "Which HTTP method is used to retrieve data from a server?",
+        a: "POST",
+        b: "PUT",
+        c: "GET",
+        d: "DELETE",
+        correct: "c",
+    },
+    {
+        question: "What is the purpose of the 'localStorage' in JavaScript?",
+        a: "To store temporary session data",
+        b: "To store data permanently in the browser",
+        c: "To store cookies only",
+        d: "To store data on the server",
+        correct: "b",
+    },
+    {
+        question: "Which CSS property is used to change the text color?",
+        a: "text-color",
+        b: "font-color",
+        c: "color",
+        d: "foreground",
+        correct: "c",
+    },
+    {
+        question: "What does DOM stand for?",
+        a: "Data Object Model",
+        b: "Document Object Model",
+        c: "Digital Ordinance Model",
+        d: "Desktop Orientation Module",
+        correct: "b",
+    },
 ];
 
 const quiz = document.getElementById('quiz')
@@ -41,9 +73,83 @@ const b_text = document.getElementById('b_text')
 const c_text = document.getElementById('c_text')
 const d_text = document.getElementById('d_text')
 const submitBtn = document.getElementById('submit')
+const notesEl = document.getElementById('notes')
+const saveNotesBtn = document.getElementById('save-notes')
+const saveStatusEl = document.getElementById('save-status')
+const starsEl = document.getElementById('rating-stars')
+const highScoreEl = document.getElementById('high-score')
 
 let currentQuiz = 0
 let score = 0
+let currentRating = 0
+
+const NOTES_KEY = 'quiz_notes'
+const RATINGS_KEY = 'quiz_ratings'
+
+function loadNotes() {
+    const notes = JSON.parse(localStorage.getItem(NOTES_KEY) || '{}')
+    notesEl.value = notes[currentQuiz] || ''
+}
+
+function saveNotes() {
+    const notes = JSON.parse(localStorage.getItem(NOTES_KEY) || '{}')
+    notes[currentQuiz] = notesEl.value
+    localStorage.setItem(NOTES_KEY, JSON.stringify(notes))
+    saveStatusEl.textContent = '笔记已保存!'
+    setTimeout(() => {
+        saveStatusEl.textContent = ''
+    }, 2000)
+}
+
+function loadRatings() {
+    const ratings = JSON.parse(localStorage.getItem(RATINGS_KEY) || '{}')
+    const highScore = ratings[currentQuiz] || 0
+    highScoreEl.textContent = highScore > 0 ? `历史最高分: ${highScore}分` : '历史最高分: 未评分'
+    currentRating = 0
+    updateStarsDisplay(0)
+}
+
+function saveRating(rating) {
+    const ratings = JSON.parse(localStorage.getItem(RATINGS_KEY) || '{}')
+    const currentHigh = ratings[currentQuiz] || 0
+    if (rating > currentHigh) {
+        ratings[currentQuiz] = rating
+        localStorage.setItem(RATINGS_KEY, JSON.stringify(ratings))
+        highScoreEl.textContent = `历史最高分: ${rating}分`
+    }
+}
+
+function updateStarsDisplay(rating) {
+    const stars = starsEl.querySelectorAll('.star')
+    stars.forEach((star, index) => {
+        if (index < rating) {
+            star.classList.add('active')
+        } else {
+            star.classList.remove('active')
+        }
+    })
+}
+
+starsEl.addEventListener('click', (e) => {
+    if (e.target.classList.contains('star')) {
+        currentRating = parseInt(e.target.dataset.rating)
+        updateStarsDisplay(currentRating)
+        saveRating(currentRating)
+    }
+})
+
+starsEl.addEventListener('mouseover', (e) => {
+    if (e.target.classList.contains('star')) {
+        const rating = parseInt(e.target.dataset.rating)
+        updateStarsDisplay(rating)
+    }
+})
+
+starsEl.addEventListener('mouseleave', () => {
+    updateStarsDisplay(currentRating)
+})
+
+saveNotesBtn.addEventListener('click', saveNotes)
 
 loadQuiz()
 
@@ -57,6 +163,9 @@ function loadQuiz() {
     b_text.innerText = currentQuizData.b
     c_text.innerText = currentQuizData.c
     d_text.innerText = currentQuizData.d
+
+    loadNotes()
+    loadRatings()
 }
 
 function deselectAnswers() {

quiz-app/style.css

@@ -68,3 +68,96 @@ button:focus {
   outline: none;
   background-color: #5e3370;
 }
+
+.rating-section {
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid #e0e0e0;
+}
+
+.rating-section p {
+  margin: 0.5rem 0;
+  font-size: 0.9rem;
+  color: #555;
+}
+
+.stars {
+  display: flex;
+  gap: 0.5rem;
+  margin: 0.5rem 0;
+}
+
+.star {
+  font-size: 1.5rem;
+  color: #ddd;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.star:hover,
+.star.active {
+  color: #ffc107;
+}
+
+.star:hover ~ .star {
+  color: #ddd;
+}
+
+.high-score {
+  font-size: 0.85rem;
+  color: #8e44ad;
+  font-weight: bold;
+}
+
+.notes-section {
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid #e0e0e0;
+}
+
+.notes-section label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+  color: #555;
+}
+
+#notes {
+  width: 100%;
+  min-height: 80px;
+  padding: 0.75rem;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  font-family: inherit;
+  font-size: 0.9rem;
+  resize: vertical;
+}
+
+#notes:focus {
+  outline: none;
+  border-color: #8e44ad;
+}
+
+.save-btn {
+  margin-top: 0.75rem;
+  padding: 0.5rem 1rem;
+  background-color: #27ae60;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  width: auto;
+  display: inline-block;
+}
+
+.save-btn:hover {
+  background-color: #219a52;
+}
+
+.save-status {
+  font-size: 0.85rem;
+  color: #27ae60;
+  margin-top: 0.5rem;
+  min-height: 1.2rem;
+}