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

Projectile motion simulator + lesson template

Summary:

Over the course of the last 3-4 days, I created a projectile motion simulation where the user can control speed and angle of the projectile. The code uses real kinematic equations to solve for the new position of the projectile given time. This then maps to a mapCanvas(t) function that allows the equations to give the coordinates for a working website and canvas HTML element. Finally, I created a drawFrame() function to actually paint the simulation so that it looks like the projectile is consistently moving to human eyes.

Intro to Challenges:

There were many bugs along the way. This included learning curves such as learning the requestAnimationFrame() function, making sliders, and even writing some part of CSS !

Oct 18, 2026 - Day 13,

  1. One important concept is that the canvas starts (0,0) from the top left corner of the grid, so subtracting y actually makes an object/line move upward.

  2. I learned to use the function beginPath() to create a new drawing object. Without using beginPath(), an drawing connects a the previous drawing to the new drawing with a line. Additionally, the fill() function needs to be used to actually draw a point.

  3. I learned that css uses different punctuation for different rules:
  selector (plain word) - looks for elements with tag
  .selector - looks for elements whose classes list contains the word
  #selector - looks for the element with the ID
  :selector - does the css action only while it is in the state
  4. You can test with console.log. To open it on a website/app screen, you can use CMD+OPT+J

Oct 19, 2026 - Day 14,

1. In javaScript, when a function is called with parentheses: drawFrame(), it runs immediately. When a function is just called by its name, it runs when another function tells it to: requestAnimationFrame(drawFrame) (no parentheses)!
   2. I forgot to use the fill() function again. fill() is important because it actually “paints” the drawing.

Oct 20, 2026 - Day 15,

1. I got confused that y increases to make a drawing go downwards. This caused me to write the falling logic incorrectly. I switched the case where falling = true with falling = false.
2. After making the falling variable, I wasn’t using it in any way. The falling variable also needed to be used in the eventHandler for the launch button to make sure that multiple cycles of drawFrame() weren’t running at the same time:
   a. When drawFrame() is run several times, it causes the speed to increase by n times as much if n represents the number of times you click the launch button
   To fix this, I used the falling variable in the EventHandler. I decided that it is easier to just not do anything if the button is in mid-flight and the user wants to re-launch the ball/projectile.

Oct 21, 2026 - Day 16,

1. Sliders are There are two events possible to use in an event listener (of a slider):
   a. “input” - a live update. The event triggers continously while a slider is being dragged
   b. “change” - only triggers and runs the event listener when you let go of the element (slider). This prevents changing while you are holding the slider
2. Sliders don’t have a closing tag. They don’t have . This means that textContent can’t be used on sliders because they are not containers. Therfore, there has to be a new variable to act as the label for the slider element (or any input element for that matter)
3. Span is inline, div begins on the next line
4. Inner workings of requestAnimationFrame() - when this function is called, it let’s the function end and immediately return to where it was called. It then continues until it reaches the end of the code in the file. The requestAnimationFrame() just tells the compiler to call the function again AFTER everything ran. This was important because it was the reason the disabling of the sliders was not working.

Creating an answerCheck function and progress.js file to save lesson stars

Summary:

Today, I first deployed the app on vercel! Then, I created progress.js; This file has a function to loadProgress() and saveStars(). Finally, I added function calls to main.js to use the functions in the functionality of the app.

AI usage:

used AI to help me understand concepts when I got stuck for over 5 minutes on a topic and test my code. In this specific session, I had a lot of obstacles, especially with learning new javascript functions and syntax. There were 6 attempts just to solve the progress.js page, and AI helped me understand javascript better, as shown in the key learnings below.

Key Learnings:

  1. You need to use the "export" keyword so that a function in one page can be used by other files
  2. In javaScript, you don't have to manually create tables/lists like how you use the "new" keyword in java. If you say scores["math"] = 60 and math does not exist, then it will create a new row called "math" in the table and assign the value of 60 to the key.
  3. Through 6 attempts, I learned a lot of Java Script syntax features:
     a. A dot is used to get an attribute in javascript, something that belongs to an object. However, tables in javascript use brackets just like lists: table[]; 
     b. You can save a whole table using .setItem(key, value). Remember that the value has to be a string. We can use .stringify(obj) for this.
     c. Javascript has two error words: null and undefined. Null happens from an intentionally missing object. For example, when an object has been declared but is empty. Undefined, by contrast, is used when the object has never been created and their is no instance of it.
     d. Extra JavaScript functions are as follows:
        i. stringify --> turn an object into a string
        ii. parse --> turn a string back into an object
        iii. setItem --> changes the item in a table
        iv. getItem --> gets the item currently in a table
  4. If you need to import multiple things from the same page/file, you can use a comma in the import instead of using multiple lines.

Next Steps:

I am going to create an interactive projectile simulator!

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.

Day 9 - Creating the first lesson + quiz

Today, I created the official first lesson of parallax. The first lesson follows the AP Physics 1 college curriculum. This starts with the Kinematics Unit. The first topic covered in the unit is Scalars and Vectors.
Learned:
1. Today I learned that we use the === operator to check if both the datatype and value of two variables being compared is the exact same.
2. I also learned that when creating elements in a .js file, you can name elements anything, such as questionText instead of “p”. It is important to do this so that the compiler/program does not crash because only one const element can have the same name.
3. I learned that there is a hidden property that works on elements such as div. This is just like how disabled works on buttons!
4. I learned the syntax of a forEach loop: element.forEach((element, index) => {});
AI usage: After writing my first draft of the lesson code and checking the mini-quiz inside the first lesson, I had multiple errors. I used AI to explain the errors, which are documented in the key learning above. Additionally, I used AI to verify the code and test the app itself with its capabilities.

Make the App look good!

Today, I added a stylesheet (made by AI) to make my app look more modern and appealing. Since I am coding the structure of the app, this is ok. Along the way, I learned how to incorporate CSS as classes in both HTML and JavaScript. I also learned that JavaScript uses the classListadd method to add classes, while HTML is just a direct type-in. I am hoping to learn more CSS in the process. My next step is to add new components such as a sidebar and more interactive features.

Home screen + Learning React/HTML

For the first few hours of the project, I spent directing AI on how to create an amazing AI tutor. However, I decided to restart from scratch to create an app that is self-coded. I worked on the new app from scratch for 2 hours, and I was able to create one lesson. I focused on the lesson structure and added a start, next, and back button. I am planning to focus on the structure of the app before appealing to aesthetics.