diff --git a/quiz-app/index.html b/quiz-app/index.html index 688716a..18518c5 100644 --- a/quiz-app/index.html +++ b/quiz-app/index.html @@ -9,6 +9,10 @@
+
+ 1/8 + Best: 0/8 +

Question text

+ +
+ +
+ ★ + ★ + ★ + ★ + ★ +
+ Not rated +
+ +
+ + + +
+
+
+
-
diff --git a/quiz-app/script.js b/quiz-app/script.js index 543ee19..dd2c2e5 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 company developed the React library?", + a: "Google", + b: "Facebook (Meta)", + c: "Microsoft", + d: "Apple", + correct: "b", + }, + { + question: "What is the default port number for Node.js?", + a: "3000", + b: "8080", + c: "5000", + d: "8000", + correct: "a", + }, + { + question: "Which CSS property is used to change the text color?", + a: "background-color", + b: "font-color", + c: "color", + d: "text-color", + correct: "c", + }, + { + question: "What does API stand for?", + a: "Application Programming Interface", + b: "Advanced Programming Interface", + c: "Automated Processing Interface", + d: "Application Process Integration", + correct: "a", + }, ]; const quiz = document.getElementById('quiz') @@ -41,11 +73,22 @@ 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 questionCounter = document.getElementById('question-counter') +const bestScoreEl = document.getElementById('best-score') +const ratingStars = document.querySelectorAll('.star') +const currentRatingEl = document.getElementById('current-rating') +const notesTextarea = document.getElementById('notes') +const saveNotesBtn = document.getElementById('save-notes') let currentQuiz = 0 let score = 0 +let currentRating = 0 +let questionRatings = JSON.parse(localStorage.getItem('questionRatings')) || {} +let questionNotes = JSON.parse(localStorage.getItem('questionNotes')) || {} +let bestScore = parseInt(localStorage.getItem('bestScore')) || 0 loadQuiz() +updateBestScore() function loadQuiz() { deselectAnswers() @@ -57,6 +100,11 @@ function loadQuiz() { b_text.innerText = currentQuizData.b c_text.innerText = currentQuizData.c d_text.innerText = currentQuizData.d + + questionCounter.innerText = `${currentQuiz + 1}/${quizData.length}` + + loadQuestionRating() + loadQuestionNotes() } function deselectAnswers() { @@ -75,7 +123,84 @@ function getSelected() { return answer } +function updateBestScore() { + bestScoreEl.innerText = `Best: ${bestScore}/${quizData.length}` +} + +function saveBestScore() { + if (score > bestScore) { + bestScore = score + localStorage.setItem('bestScore', bestScore) + updateBestScore() + } +} + +ratingStars.forEach(star => { + star.addEventListener('click', () => { + const value = parseInt(star.dataset.value) + currentRating = value + updateRatingDisplay() + saveQuestionRating() + }) + + star.addEventListener('mouseenter', () => { + const value = parseInt(star.dataset.value) + highlightStars(value) + }) + + star.addEventListener('mouseleave', () => { + highlightStars(currentRating) + }) +}) + +function highlightStars(rating) { + ratingStars.forEach(star => { + const value = parseInt(star.dataset.value) + if (value <= rating) { + star.classList.add('active') + } else { + star.classList.remove('active') + } + }) +} + +function updateRatingDisplay() { + highlightStars(currentRating) + if (currentRating > 0) { + currentRatingEl.innerText = `Your rating: ${currentRating}/5` + } else { + currentRatingEl.innerText = 'Not rated' + } +} + +function saveQuestionRating() { + questionRatings[currentQuiz] = currentRating + localStorage.setItem('questionRatings', JSON.stringify(questionRatings)) +} + +function loadQuestionRating() { + currentRating = questionRatings[currentQuiz] || 0 + updateRatingDisplay() +} + +saveNotesBtn.addEventListener('click', () => { + saveQuestionNotes() + alert('Notes saved successfully!') +}) + +function saveQuestionNotes() { + questionNotes[currentQuiz] = notesTextarea.value + localStorage.setItem('questionNotes', JSON.stringify(questionNotes)) +} + +function loadQuestionNotes() { + notesTextarea.value = questionNotes[currentQuiz] || '' +} + submitBtn.addEventListener('click', () => { + saveQuestionNotes() + saveQuestionRating() + const answer = getSelected() if(answer) { @@ -88,11 +213,16 @@ submitBtn.addEventListener('click', () => { if(currentQuiz < quizData.length) { loadQuiz() } else { + saveBestScore() quiz.innerHTML = ` -

You answered ${score}/${quizData.length} questions correctly

- - +
+

You answered ${score}/${quizData.length} questions correctly

+

Best Score: ${bestScore}/${quizData.length}

+ +
` } + } else { + alert('Please select an answer before submitting!') } }) \ No newline at end of file diff --git a/quiz-app/style.css b/quiz-app/style.css index 2db24b0..eab5b0d 100644 --- a/quiz-app/style.css +++ b/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-y: auto; margin: 0; + padding: 20px; } .quiz-container { @@ -21,17 +22,27 @@ body { border-radius: 10px; box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1); width: 600px; + max-width: 100%; overflow: hidden; } .quiz-header { - padding: 4rem; + padding: 2rem 3rem; +} + +.question-info { + display: flex; + justify-content: space-between; + margin-bottom: 1rem; + font-size: 0.9rem; + color: #666; } h2 { - padding: 1rem; + padding: 1rem 0; text-align: center; margin: 0; + font-size: 1.3rem; } ul { @@ -40,8 +51,8 @@ ul { } ul li { - font-size: 1.2rem; - margin: 1rem 0; + font-size: 1.1rem; + margin: 0.8rem 0; } ul li label { @@ -68,3 +79,97 @@ button:focus { outline: none; background-color: #5e3370; } + +.button-group { + display: flex; + gap: 1px; +} + +.button-group button { + flex: 1; +} + +.rating-section { + margin-top: 1.5rem; + padding-top: 1rem; + border-top: 1px solid #eee; +} + +.rating-section label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; +} + +.stars { + display: inline-block; + margin-right: 1rem; +} + +.star { + font-size: 1.5rem; + color: #ddd; + cursor: pointer; + transition: color 0.2s; +} + +.star:hover, +.star.active { + color: #f39c12; +} + +#current-rating { + font-size: 0.9rem; + color: #666; +} + +.notes-section { + margin-top: 1.5rem; + padding-top: 1rem; + border-top: 1px solid #eee; +} + +.notes-section label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; +} + +.notes-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: 80px; +} + +.save-btn { + margin-top: 0.5rem; + padding: 0.6rem 1.2rem; + font-size: 0.9rem; + width: auto; + border-radius: 5px; + background-color: #27ae60; +} + +.save-btn:hover { + background-color: #219a52; +} + +.final-score { + text-align: center; + padding: 2rem; +} + +.final-score h2 { + margin-bottom: 1rem; +} + +.final-score .best-score { + font-size: 1.1rem; + color: #8e44ad; + margin: 1rem 0; +}