Mini-quiz completion and Stars!

Summary

Today, I finished the mini-quiz in the first lesson. I have included colors to indicate wrong and write answers (that comes from the css) and I created 4 buttons that are clickable and display the answer choices.

Additionally, I added stars to the lesson to act as the lesson score. This depends on their score on the lesson quiz.

Key Learnings:

1. When I gave the buttons the choice–correct or choice–wrong class, they now had a class and a property of disabled. The property for disabled buttons in CSS is button:disabled, which is more specific than just the .choice-correct class. This makes the CSS default to the rules in the button:disabled property, which dims the opacity. To fix this, I hand-coded a third class that works with both properties to keep the buttons fully highlighted in a color to indicate wrong and right.
2. You can use the “”.repeat(n) function to repeat any string in the quotation marks n times in a row.
3. Remember: It is easy to get confused with spelling. The property is .disabled (past tense). This should also be used in correct ways. It is important to think about when something should or shouldn’t be disabled (common mistake today).

Next Steps:

Now that I have developed one whole lesson, I will use the same code to develop a total of 5 lessons to cover Unit 1: Kinematics of the AP Physics 1 curriculum. Then, I will create a home screen. If I have time, I will make the first-ever deployment to Vercel and see the app in action!

AI usage (if your interested)

AI usage: I used AI to help me understand concepts when I got stuck for over 5 minutes on a topic. I always try to write code myself, but I learn the concept I am struggling with after using AI.