Week 10 - Zoe & Kelly #86
Conversation
Add a star
Added a nice welcome screen
questionsHeader
Added the first question
confirmation HTML
color contrast - accessibility
Question 2 - restructure
QuestionThree
change color
Progress bar bug
responsiveness
Media Queries
There was a problem hiding this comment.
Great job with this project!
You've met all requirements, and more.
It looks like you have worked together in branches in a good and strcutrued way based on your commits and git logs.
Feedback:
Code Organization: The addition of new components is well-structured, enhancing the modularity and maintainability of the codebase.
State Management: Effective use of state hooks (useState) to manage quiz flow and scoring.
Styling: The introduction of separate CSS files for each component ensures that styles are scoped and maintainable.
Functionality: The implementation of handleStartQuiz, handleNextQuestion, and handleScoreChange functions provides a clear and logical flow for the quiz application.
Your code base is well structured and easy to understand.
I like the extra things you have added like the cute animal images, the drag and drop functionality and the progress bar to name a few.
UX wise it felt a little bit confusing with the different styles of how to answer the questions but for kids I guess that adds to the excitement.
to add even more extra sparkle you could try out some animations our sound effects when you pick the correct answer :)
Stay golden!
⭐️
There was a problem hiding this comment.
The outcome of your work is impressive, especially given the short timeframe. Excellent teamwork, and as Jennie highlighted, the code and component structure are clean, with high-quality visuals. Adding a "start over" button could allow users to retake the test for a better score. The drag-and-drop feature enhances interactivity, and incorporating sound effects for correct and incorrect answers would add a fun touch.
| } | ||
|
|
||
| /* Media queries for smaller screens */ | ||
| @media (max-width: 768px) { |
There was a problem hiding this comment.
Consider mobile first design maybe it is good to do oppisite by setting min-width?
| if (answer === "Berries") { | ||
| setIsCorrect(true); | ||
| setTimeout(() => { | ||
| onScoreChange(wrongAttempts * 5); | ||
| onNext(); | ||
| }, 1000); | ||
| } else { | ||
| setIsCorrect(false); | ||
| setWrongAttempts(wrongAttempts + 1); | ||
| } | ||
| }; |
There was a problem hiding this comment.
Interesting setting for score, maybe it is fun to introduce the score system to the user in a simple way at the beginning which could encourage people to select more carefully :)
| .correct { | ||
| background-color: #4caf50 !important; | ||
| } | ||
|
|
||
| .incorrect { | ||
| background-color: #f44336 !important; | ||
| } |
| }; | ||
|
|
||
| return ( | ||
| <div className="quiz-container-five"> | ||
| <img src={logo} alt="Paw Pop Logo" className="quiz-logo" /> | ||
|
|
||
| <div |
There was a problem hiding this comment.
cool application thus the user could see which questions it is and how many questions left! Love it!
| <div | ||
| className="progress-bar" | ||
| role="progressbar" | ||
| aria-valuenow="2" |
There was a problem hiding this comment.
maybe ths valuenow needs to update based on the number of question?
| if (score < 40) { | ||
| title = "Good Effort!"; | ||
| subtitle = "Maybe next time is the charm!"; | ||
| } else if (score >= 40 && score < 80) { | ||
| title = "Nice job!"; | ||
| subtitle = "Good to have an animal lover among us!"; | ||
| } else if (score >= 80 && score < 120) { | ||
| title = "Good job!"; | ||
| subtitle = "Almost a perfect score, what an expert!"; | ||
| } else { | ||
| title = "Perfect Scorer!"; | ||
| subtitle = "Your flawless quiz performance sets a new standard of excellence!"; | ||
| } |
There was a problem hiding this comment.
Cool! I'm curious about what the full score is. 👍
| <button className="search-button" aria-label="Search"> | ||
| <img src={searchIcon} alt="" className="search-icon" /> |
There was a problem hiding this comment.
It seems that the search function is not active. Would like to see how it works!
https://pawsome-quiz.netlify.app/