diff --git a/quiz-app/index.html b/quiz-app/index.html
index 688716a..ad8aa54 100644
--- a/quiz-app/index.html
+++ b/quiz-app/index.html
@@ -31,6 +31,25 @@
+
+
+
为这道题打分 (1-5分):
+
+ ★
+ ★
+ ★
+ ★
+ ★
+
+
历史最高分: 未评分
+
+
+
diff --git a/quiz-app/script.js b/quiz-app/script.js
index 543ee19..39119f9 100644
--- a/quiz-app/script.js
+++ b/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() {
diff --git a/quiz-app/style.css b/quiz-app/style.css
index 2db24b0..42af565 100644
--- a/quiz-app/style.css
+++ b/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;
+}