Almost Complete!

Summary

In the last 3 days, I finished the projectile motion simulator and added sliders, created a boss battle at the end of the unit, and created a home screen with lessons in a parabola galaxy

The projectile motion simulator has two sliders — angle and speed — which a user can use to change the motion of a projectile. This was moved to lesson 1.5, the lesson about motion in 2-Dimensions, and allows users to learn through experimentation

The boss battle uses questions from all the lessons. Once a user answers a question correctly, they get a chance to use the same projectile motion simulator to hit the boss. If they are within 25px of the boss, the boss loses 1hp. If the user answers a question incorrectly, they lose a life. At the end, the user either completes Unit 1 or has to try again. I plan to add several units in the future, following the AP Physics 1 layout, where defeating a boss will create a new unit

Throughout the project, I also had to write several CSS classes myself! You can read the DEVLOG for more info on the project!

Key Learnings:

Oct 22, 2026

1. When you use a for each loop to create elements, if you set any characteristics of one singular element, then it will only save the characteristics of the last time it was set to different values
2. Spelling mistakes are common. A way to avoid this is to use autocomplete by pressing tab on the computer. This will autocomplete a variable name without any misspellings
3. Functions should do basic tasks. The home button should just set up the screen. The event handlers are created for changing things ONLY after a lesson has been selected. At first, I merged everything into the home function, so it would display the second lesson and overwrite the first lesson. This means that the user is forced into the second lesson without a choice. (Second lesson was the last lesson currently developed)

Oct 23, 2026

1. I forgot to use appendChild() to add all elements to the app. This is a reminder to use replaceChildren to empty a screen and appendChild() to add an element to the screen
2. If you use two different variables to refer to the same button or element, and add an event listener to the different variables, there are multiple event listeners happening at once. This means that there should be only one event listener for every button, and you don’t call an event listener because it is a function that automatically runs when there is a “click” (the chosen input)
3. Buttons should be set in a specific state when entering a screen, not at the top of a file where they are constantly enabled or disabled. This will make buttons not function properly

Oct 24, 2026

1. I needed both the simulator.js and main.js files to check the same app element. I learned that we can use getElementById separately in both files to get and change the same element
2. I practiced using export and import between the simulator.js and main.js files. I exported drawScene() and hitCount and imported them into main.js so that main.js can call the simulator
3. Since main.js can’t change the hitCount in simulator.js but only see it, I used what a car odometer uses as well. I first find the number of hits the player has made and subtract it from the 10hp the boss starts with to display the boss’s health throughout the boss battle
4. To check if an element has a class, you can use classList.contains()
5. I had originally made the question list a local variable in showBossQuestion(). This was a problem because every single time the user presses the nextQuestionButton, a new question should be displayed. To fix this, I made the questions list a global variable

AI usage: used AI to help me understand concepts when I got stuck for over 5 minutes on a topic and test my code. I used AI to teach me the concept, then I coded everything by myself and asked for feedback on the code to improve it. AI was used to test the app and write lessons 1.3-1.5