From 1b485ec7b468435592cf5552f69b01cbd194a8c9 Mon Sep 17 00:00:00 2001 From: zhangyi-user <1293605013@qq.com> Date: Fri, 20 Mar 2026 11:07:14 +0800 Subject: [PATCH] =?UTF-8?q?1.=E5=A2=9E=E5=8A=A04=E9=81=93=E6=96=B0?= =?UTF-8?q?=E9=A2=98=E3=80=82=202.=E4=B8=BA=E6=AF=8F=E4=B8=80=E9=81=93?= =?UTF-8?q?=E9=A2=98=E6=B7=BB=E5=8A=A0=E7=AC=94=E8=AE=B0=E8=BE=93=E5=85=A5?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=B8=94=E5=8F=AF=E4=BB=A5=E8=A2=AB=E4=BF=9D?= =?UTF-8?q?=E5=AD=98=E3=80=82=203.=E4=B8=BA=E6=AF=8F=E4=B8=80=E9=81=93?= =?UTF-8?q?=E9=A2=98=E6=B7=BB=E5=8A=A01-5=E5=88=86=E7=9A=84=E6=99=BA?= =?UTF-8?q?=E8=83=BD=E6=89=93=E5=88=86=E5=8A=9F=E8=83=BD=E5=B9=B6=E5=8F=AF?= =?UTF-8?q?=E4=BB=A5=E4=BF=9D=E5=AD=98=E5=8E=86=E5=8F=B2=E6=9C=80=E9=AB=98?= =?UTF-8?q?=E5=88=86=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- quiz-app/index.html | 19 ++++++++ quiz-app/script.js | 109 ++++++++++++++++++++++++++++++++++++++++++++ quiz-app/style.css | 93 +++++++++++++++++++++++++++++++++++++ 3 files changed, 221 insertions(+) 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; +}