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.

Devlog 1 - Schematic Design

Since this was my first time creating a PCB, I took a lot of time to learn. Then I placed the following components in the schematic and wired them together:

• 1. XIAO SAMD21
• 1. 3 RGB LEDs
• 1. Joystick module
• 1. OLED screen
• 1. Two tactile buttons

I decided to use connectors for the OLED screen and the joystick module for the wiring in the schematic.

Each RGB LED requires 3 resistors, so I added them to each column of pins (Red, Green, and Blue) and connected them to analog pins 2, 3, and 6.

Note: At this stage in time, I had no clue that I needed to use timelapse.

#Devlog 2 - First PCB Layout

Note from doing: This takes 2hrs for beginners, but watching the KiCad tutorial really helps!

3D visualization of PCB layout

In this session, I laid out all of the components from the schematic and imported them into the PCB editor.

First, I laid out all components onto the PCB in the design I wanted (shown in the picture above)

Next, I added a GND copper pour so I don’t have to route GND pins of every component.

Furthermore, I routed the PCB connections between the XIAO board and each component on the PCB.

Key Learnings

Vias

I learned that “vias” can be used to change the copper paths cut into the PCB from the front of the board to back of the board (2-layer PCBs).

Copper pours

Additionally, I learned that you can add copper pours (GND or 3V3) so that you don’t have to route some pins.

In this case, it was helpful because I did not have to wire the GND pin of every component, which would have added up to at least 7 extra wires.

Devlog #6 - Add OLED screen and joystick CAD models to fullCase design (Fusion360)

In this session, I added the CAD models of the OLED screen and joystick to create a file with the full CAD!

Tasks

Edited the PCB

I had to add the CAD of the OLED and joystick as footprints for the connectors in the PCB. The purpose of this is for the CAD import to fusion for the full CAD with the PCB and case. (This is not needed for the PCB manufacturing as only the connector holes are necessary on the PCB.

Import the PCB into CAD

I added the PCB into the CAD folder by importing it as a new file and inserting a derive. This is where most of the issues arose

Download and push to Git

I downloaded the full cad as a step file and pushed it to git for reviewers to see. I also took images which will be added to the Git Repo README in the next journal.

Issues

Height of case

Originally, the case was to tall and the LED, OLED screen, and buttons were not easy to use. These were the following solutions:

-1) Reduce the height of the
-2) Now the joystick didn’t git, so I made the hole bigger and added the wall (seen in @Joystick issue)

Joystick

-1) There was not a big enough hole for the joystick, so I had to pull out a joystick module and measure it with a caliper. I readjusted the opening on the top of the case to fit this.
-2) I added walls to the side of the joystick opening so the inner module could not be seen - for cleaner appearnce.

Key Learnings

CAD takes time, but it is easier if everything is measured before actually starting. This will reduce the time it takes and prevent errors - but never feel afraid of CAD!