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; +}