## Interactive Graph with Javascript

I was experimenting with using generative AI to create an interactive graph that could be used to amend the animation of a moving particle, for the topic of kinematics. Students are able to move the four points on the velocity time graph to manipulate the movement. I kept the graph to straight lines between each point to keep things simple.

The vertical axis toggles between displacement and velocity. This will be yet another way for students to learn about how the velocity-time graph affects motion. I have found that many students are confused between displacement and velocity. The app’s ability for them to vary the velocity graph and then make predictions of the resulting displacement graph and the movement should be worth the effort.

## Custom AI Bots using OpenAI’s Assistant API hosted on Streamlit

I have done a basic version of this Streamlit app earlier in April with the IP3s. As I am preparing for yet another professional sharing, this time with my school’s teachers, this app is revived with a bit of refinement.

During the testing, the dialogue went like this, with the user prompt / input emphasised:

Two balls of different masses but equal volume rest at the back of a truck with a smooth floor. The truck, initially moving at a constant speed, abruptly comes to a stop. Describe how both balls will react.

wHAT IS LIFE (trying to throw the AI off by making irrelevant comments)

Let’s start by identifying the relevant concepts for the problem at hand. The scenario involves two balls of different masses but equal volume in a truck that abruptly stops.

1. Newton’s First Law of Motion: This law states that an object will remain at rest or in uniform motion in a straight line unless acted upon by an external force.
2. Inertia: This is the property of an object to resist changes in its state of motion. It is directly related to the mass of the object.
3. Friction: The problem specifies that the floor is smooth, implying negligible friction.

Let’s consider the implications of these concepts:

• What happens to objects inside the truck when it abruptly stops, considering Newton’s First Law?
• How does the smooth floor (negligible friction) affect the motion of the balls?
• Since the balls have different masses but equal volumes, how does their mass affect their motion?

Can you identify how these concepts apply to the problem?

The metal ball will move faster

1. Newton’s First Law: What does it say about the motion of the balls when the truck stops abruptly?
2. Smooth Floor: If the floor is smooth and there’s no friction, how does this affect the balls’ motion?
3. Initial Speed: If both balls were moving at the same speed as the truck, what happens to their speed immediately after the truck stops?

the metal ball will move faster as it is heavier

Let’s focus on Newton’s First Law of Motion again. It states that an object in motion will stay in motion unless acted upon by an external force.

1. Initial Speed: Both balls were moving at the same speed as the truck. When the truck stops, what happens to the balls’ motion?
2. Smooth Floor: With no friction, will the mass of the balls affect their speed immediately after the truck stops?

Think about these points and tell me how the balls will move when the truck stops.

both balls will move forward

Great! You’ve recognized that both balls will move forward due to their inertia.

Now, considering the smooth floor and the fact that both balls were initially moving at the same speed:

1. Smooth Floor: With no friction, will the balls’ masses affect their speeds immediately after the truck stops?
2. Equal Volume: Does the volume of the balls have any effect on their motion in this scenario?

What can you conclude about the speeds of the two balls immediately after the truck stops?

they will be the same!

Excellent! You’ve got it.

1. Newton’s First Law: Both balls will continue moving forward due to their inertia.
2. Smooth Floor: With no friction, the balls’ masses do not affect their speeds.
3. Initial Speed: Both balls will continue at the same speed they had when the truck was moving.

Well done! If you have any more questions or need further clarification, feel free to ask.

This is the end of the conversation with the AI bot. I thought the AI managed to keep to the system prompts given.

To prepare for this scaffolding conversation, I gave the AI a knowledge base consisting of the syllabus learning outcomes so that it does not engage at a level beyond the requirements.

The prompts I gave the system were:

You will play the role of a Socratic tutor who will engage the user in a discussion of a specific physics problem:
"Two balls of different masses but equal volume rest at the back of a truck with a smooth floor. The truck, initially moving at a constant speed, abruptly comes to a stop. Describe will both balls will react."

Do not answer the question directly. Referring to the syllabus document, point out the relevant topic and concepts before asking the user if he or she needs further help.

The success criteria are three-fold:
1. The user must recognise that the floor is smooth so there is no friction.
2. The user must be able to tell that both balls will move forward after the truck stops because of their inertia, according to Newton's First Law.
3. Since the floor is smooth and the two balls were initially moving at the same speed, they will also continue with the same speed immediately after the truck stops.

Guide the user toward the success criteria with questions only and never answer for them.

Encourage the user when he/she gives a good response. However, if the user repeatedly gives the wrong answer, give more direct assistance.

In your response, do not use more than 40 words for each point you are trying to make. Keep it succinct.

The advantage of such an AI bot is that I can guide it to provide scaffold without taking away the students’ need to think for themselves. If it were a generic bot, it might simply give the answer right away.

While testing out the prompts, I notice that if I specify the success criteria for the AI, it is able to know when to stop the conversation. This ensures that the student is able to fulfill with all the requirements of the question before putting an end to the conversation.

If anyone is keen to set up such a bot so that students need not sign in to access it, you can fork the codes from my python file: https://github.com/physicstjc/askme/blob/main/assistant.py and edit the display test and images from there. The system prompts are to be edited at https://platform.openai.com/assistants/. Do note that you will need to pay for the use of the API with an OpenAI developer account (different from the ChatGPT plus subscription account). If you are not sure what Assistants are, feel free to try them out at https://platform.openai.com/playground.

After that, you can create a Streamlit account and connecting it to your github account. Create an app there by deploying the python file. Copy the OpenAI API key and the Assistant ID into the app settings in Streamlit, under the “Secrets” section:

OPENAI_API_KEY= "{insert key here}"
assistant_id = "{insert assistant id here}"

If you want to consider no-code approaches to creating your own AI bots, try out Poe.com, SchoolAI.com, Mizou.com or even ChatGPT Plus. Here is a table comparing their costs and pros and cons.

## Slides for ST-LT Networking Session 16 Jul 2024

I am grateful for the opportunity to share about my recent experience with AI from an education practitioner’s point of view as well as a breakout session about how to use GAI to create simple web applications. The above are the slides.

Photos were taken by Lawrence (see his site: Open Source Physics @ SG here) but I cropped them a little so as not to show others’ faces without their permission.

## Heat capacity and an AI-generated simulation on thermal transfer

This Javascript app will be used in the coming weeks for my IP4 class to demonstrate the effect of heat capacity on the equilibrium temperature of two bodies in thermal contact. When two objects with different temperatures come into contact, heat flows from the hotter object to the cooler one until thermal equilibrium is reached. The heat capacity, which is the amount of heat required to change the temperature of an object per unit change in temperature, plays a crucial role in determining the final equilibrium temperature. Objects with higher heat capacities can absorb more heat without a significant change in temperature, while those with lower heat capacities experience larger temperature changes for the same amount of heat absorbed or released. Thus, the final equilibrium temperature is closer to the initial temperature of the object with the higher heat capacity.

For example, consider a small piece of metal and a large body of water initially at different temperatures. When placed in thermal contact, the metal, with its lower heat capacity, will quickly change temperature as it transfers heat to or absorbs heat from the water. Meanwhile, the water, with its much higher heat capacity, will undergo a relatively smaller temperature change. As a result, the equilibrium temperature will be much closer to the initial temperature of the water.

Prompts given to ChatGPT 4o to create this simulation:

1. Make a javascript simulation showing transfer of heat energy from one body to another. Put all the codes in one file.
2. Show it in a canvas with a height of 100 px and width of 580 px. The first body is hot at first, represented by a red colour body. The second body is cold, represented by blue. The colour of the body should be a function of the temperature. If the temperatures of the two bodies are the same, they should have the same temperature.
3. Use a bold arrow to show the direction of heat transfer.
4. Using plotly.js, create a graph below the canvas that shows the variation of temperature for each body (using red and blue lines) with time.
5. Initialise the graph such that the time axis starts at zero and ends at 5 seconds.
6. Create sliders that can change the heat capacity of each object with a range from 20 to 200 J per degree celsius.

## Random displacement and velocity simulation

Oftentimes, the kinematics graphs that students see in their textbooks are very clean and simple. In nature, movement is often haphazard and to simulate such movement in one dimension, I generated this (https://physicstjc.github.io/sls/random-displacement/index.html) using ChatGPT 4o.

There is a drop-down menu that allows users to toggle between displacement and velocity graphs.

In a displacement-time graph, the displacement is plotted on the y-axis and time on the x-axis. A positive displacement represents a position to the right of the origin while a negative displacement is to its left. The slope of this graph represents the object’s velocity; a steeper slope indicates a higher velocity. A positive slope means the object is moving forward, a negative slope indicates it is moving backward, and a zero slope shows the object is at rest. For example, in uniform motion, the displacement-time graph is a straight line with a constant slope, reflecting constant velocity.

Conversely, in a velocity-time graph, velocity is on the y-axis and time on the x-axis. The area under the velocity-time graph represents the object’s displacement. Areas above the time axis denote positive displacement, while areas below indicate negative displacement.