1.增加4道新题。

2.为每一道题添加笔记输入功能且可以被保存。
3.为每一道题添加1-5分的智能打分功能并可以保存历史最高分。

quiz-app/index.html

@@ -31,6 +31,27 @@
             <label for="d" id="d_text">Question</label>
           </li>
         </ul>
+
+        <div class="note-section">
+          <h3>题目笔记</h3>
+          <textarea id="note-input" placeholder="在此输入你的笔记..." rows="3"></textarea>
+          <button id="save-note" class="save-note-btn">保存笔记</button>
+        </div>
+
+        <div class="rating-section">
+          <h3>智能评分 (1-5分)</h3>
+          <div class="rating-wrapper">
+            <div id="rating-container" class="rating-container">
+              <span class="star" data-value="1">★</span>
+              <span class="star" data-value="2">★</span>
+              <span class="star" data-value="3">★</span>
+              <span class="star" data-value="4">★</span>
+              <span class="star" data-value="5">★</span>
+            </div>
+            <span id="rating-value" class="rating-value">未评分</span>
+          </div>
+          <div id="high-score-display" class="high-score-display">暂无评分记录</div>
+        </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 company developed JavaScript?",
+        a: "Microsoft",
+        b: "Netscape",
+        c: "Google",
+        d: "Apple",
+        correct: "b",
+    },
+    {
+        question: "What is the correct syntax for referring to an external script called 'xxx.js'?",
+        a: "<script href='xxx.js'>",
+        b: "<script name='xxx.js'>",
+        c: "<script src='xxx.js'>",
+        d: "<script file='xxx.js'>",
+        correct: "c",
+    },
+    {
+        question: "How do you write 'Hello World' in an alert box?",
+        a: "alertBox('Hello World');",
+        b: "msg('Hello World');",
+        c: "alert('Hello World');",
+        d: "msgBox('Hello World');",
+        correct: "c",
+    },
+    {
+        question: "Which operator is used to assign a value to a variable?",
+        a: "*",
+        b: "-",
+        c: "=",
+        d: "x",
+        correct: "c",
+    },
 ];
 
 const quiz = document.getElementById('quiz')
@@ -41,9 +73,52 @@ 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 noteInput = document.getElementById('note-input')
+const saveNoteBtn = document.getElementById('save-note')
+const ratingContainer = document.getElementById('rating-container')
+const ratingValue = document.getElementById('rating-value')
+const highScoreDisplay = document.getElementById('high-score-display')
 
 let currentQuiz = 0
 let score = 0
+let currentRating = 0
+
+function loadNotes() {
+    const notes = JSON.parse(localStorage.getItem('quizNotes')) || {}
+    return notes
+}
+
+function saveNote(questionIndex, note) {
+    const notes = loadNotes()
+    notes[questionIndex] = note
+    localStorage.setItem('quizNotes', JSON.stringify(notes))
+}
+
+function getNote(questionIndex) {
+    const notes = loadNotes()
+    return notes[questionIndex] || ''
+}
+
+function loadHighScores() {
+    const highScores = JSON.parse(localStorage.getItem('quizHighScores')) || {}
+    return highScores
+}
+
+function saveHighScore(questionIndex, rating) {
+    const highScores = loadHighScores()
+    const currentHigh = highScores[questionIndex] || 0
+    if (rating > currentHigh) {
+        highScores[questionIndex] = rating
+        localStorage.setItem('quizHighScores', JSON.stringify(highScores))
+        return true
+    }
+    return false
+}
+
+function getHighScore(questionIndex) {
+    const highScores = loadHighScores()
+    return highScores[questionIndex] || 0
+}
 
 loadQuiz()
 
@@ -57,6 +132,18 @@ function loadQuiz() {
     b_text.innerText = currentQuizData.b
     c_text.innerText = currentQuizData.c
     d_text.innerText = currentQuizData.d
+
+    if (noteInput) {
+        noteInput.value = getNote(currentQuiz)
+    }
+
+    currentRating = 0
+    updateRatingDisplay()
+    
+    if (highScoreDisplay) {
+        const highScore = getHighScore(currentQuiz)
+        highScoreDisplay.textContent = highScore > 0 ? `历史最高分: ${highScore}分` : '暂无评分记录'
+    }
 }
 
 function deselectAnswers() {
@@ -75,6 +162,52 @@ function getSelected() {
     return answer
 }
 
+function updateRatingDisplay() {
+    const stars = ratingContainer.querySelectorAll('.star')
+    stars.forEach((star, index) => {
+        if (index < currentRating) {
+            star.classList.add('active')
+        } else {
+            star.classList.remove('active')
+        }
+    })
+    ratingValue.textContent = currentRating > 0 ? `${currentRating}分` : '未评分'
+}
+
+if (ratingContainer) {
+    ratingContainer.addEventListener('click', (e) => {
+        if (e.target.classList.contains('star')) {
+            currentRating = parseInt(e.target.dataset.value)
+            updateRatingDisplay()
+            
+            const isNewHighScore = saveHighScore(currentQuiz, currentRating)
+            if (isNewHighScore && highScoreDisplay) {
+                const highScore = getHighScore(currentQuiz)
+                highScoreDisplay.textContent = `历史最高分: ${highScore}分`
+                highScoreDisplay.classList.add('new-record')
+                setTimeout(() => {
+                    highScoreDisplay.classList.remove('new-record')
+                }, 1000)
+            }
+        }
+    })
+}
+
+if (saveNoteBtn) {
+    saveNoteBtn.addEventListener('click', () => {
+        const note = noteInput.value.trim()
+        saveNote(currentQuiz, note)
+        
+        const originalText = saveNoteBtn.textContent
+        saveNoteBtn.textContent = '已保存!'
+        saveNoteBtn.classList.add('saved')
+        setTimeout(() => {
+            saveNoteBtn.textContent = originalText
+            saveNoteBtn.classList.remove('saved')
+        }, 1500)
+    })
+}
+
 submitBtn.addEventListener('click', () => {
     const answer = getSelected()
     
@@ -88,11 +221,30 @@ submitBtn.addEventListener('click', () => {
         if(currentQuiz < quizData.length) {
             loadQuiz()
         } else {
-            quiz.innerHTML = `
-                <h2>You answered ${score}/${quizData.length} questions correctly</h2>
+            const allNotes = loadNotes()
+            const allHighScores = loadHighScores()
+            
+            let notesHtml = '<div class="result-notes"><h3>题目笔记汇总:</h3>'
+            quizData.forEach((q, index) => {
+                const note = allNotes[index] || '无笔记'
+                const highScore = allHighScores[index] || 0
+                notesHtml += `
+                    <div class="note-item">
+                        <strong>第${index + 1}题:</strong> 
+                        <span class="note-text">${note}</span>
+                        <span class="note-score">最高分: ${highScore}分</span>
+                    </div>
+                `
+            })
+            notesHtml += '</div>'
 
+            quiz.innerHTML = `
+                <div class="quiz-header">
+                    <h2>You answered ${score}/${quizData.length} questions correctly</h2>
+                    ${notesHtml}
+                </div>
                 <button onclick="location.reload()">Reload</button>
             `
         }
     }
-})
+})

quiz-app/style.css

@@ -11,9 +11,10 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100vh;
-  overflow: hidden;
+  min-height: 100vh;
+  overflow-x: hidden;
   margin: 0;
+  padding: 20px 0;
 }
 
 .quiz-container {
@@ -25,7 +26,7 @@ body {
 }
 
 .quiz-header {
-  padding: 4rem;
+  padding: 2rem;
 }
 
 h2 {
@@ -34,6 +35,12 @@ h2 {
   margin: 0;
 }
 
+h3 {
+  margin: 0.5rem 0;
+  font-size: 1rem;
+  color: #555;
+}
+
 ul {
   list-style-type: none;
   padding: 0;
@@ -68,3 +75,151 @@ button:focus {
   outline: none;
   background-color: #5e3370;
 }
+
+.note-section {
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid #eee;
+}
+
+.note-section textarea {
+  width: 100%;
+  padding: 0.8rem;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  font-family: inherit;
+  font-size: 0.9rem;
+  resize: vertical;
+  min-height: 60px;
+}
+
+.note-section textarea:focus {
+  outline: none;
+  border-color: #8e44ad;
+}
+
+.save-note-btn {
+  margin-top: 0.5rem;
+  padding: 0.6rem 1.2rem;
+  width: auto;
+  font-size: 0.9rem;
+  border-radius: 5px;
+  display: inline-block;
+}
+
+.save-note-btn.saved {
+  background-color: #27ae60;
+}
+
+.rating-section {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid #eee;
+}
+
+.rating-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.rating-container {
+  display: flex;
+  gap: 0.3rem;
+}
+
+.star {
+  font-size: 2rem;
+  color: #ddd;
+  cursor: pointer;
+  transition: color 0.2s ease, transform 0.1s ease;
+}
+
+.star:hover {
+  transform: scale(1.1);
+}
+
+.star.active {
+  color: #f39c12;
+}
+
+.rating-value {
+  font-size: 0.9rem;
+  color: #666;
+  min-width: 60px;
+}
+
+.high-score-display {
+  margin-top: 0.5rem;
+  font-size: 0.85rem;
+  color: #888;
+}
+
+.high-score-display.new-record {
+  color: #27ae60;
+  font-weight: bold;
+  animation: pulse 0.5s ease;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+.result-notes {
+  margin-top: 1rem;
+  padding: 1rem;
+  background-color: #f9f9f9;
+  border-radius: 5px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.result-notes h3 {
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.note-item {
+  padding: 0.8rem;
+  margin-bottom: 0.5rem;
+  background-color: #fff;
+  border-radius: 5px;
+  border-left: 3px solid #8e44ad;
+}
+
+.note-text {
+  color: #555;
+  font-size: 0.9rem;
+}
+
+.note-score {
+  display: block;
+  margin-top: 0.3rem;
+  font-size: 0.8rem;
+  color: #f39c12;
+  font-weight: bold;
+}
+
+@media (max-width: 600px) {
+  .quiz-container {
+    width: 95%;
+    margin: 10px;
+  }
+  
+  .quiz-header {
+    padding: 1rem;
+  }
+  
+  ul li {
+    font-size: 1rem;
+  }
+  
+  .star {
+    font-size: 1.5rem;
+  }
+}