Teaching Resources

Physics teaching resources

05 August

East Zone Physics EdTech Workshop 6 Aug 2024

Seng Kwang Tan AI, Simulations 0 Comments

The hands-on workshop for Physics teachers will focus on the use of generative AI to create physics simulations without the user having to write code. The collection of the apps made using AI can be accessed here and the github repository here. This deck of slides is made available here for the participants’ reference. The sample prompts that we will be using can be found at the bottom of this page.

2024 EZ Physics Chapter EdTech Workshop AI-Generated Physics SimulationsDownload

The sample app that we hope the participants can produce will look something like this:

For your convenience, you may refer to the steps below.

STEP 1:

Open ChatGPT or any other GAI (e.g. Claude, CoPilot, Gemini)

STEP 2:

Copy these instructions and paste them into the AI.

  1. Put all the codes in one page.
  2. Create a canvas showing a ball dropped from rest from a height and bouncing off the ground using javascript.
  3. Using the plotly library, plot the graph of velocity versus time for the ball. The time of contact with the ground is negligible.​
  4. Create an input box that allows the user to key in the initial height in metres.​
  5. Create a slider that changes the percentage energy loss after every collision with the ground.
  6. Create a dropdown menu that changes the vertical axis to velocity or displacement.
  7. Initialise the animation and graph upon loading. Use a button to start and stop the animation.

STEP 3:

Copy the generated code using the button provided.

STEP 4:

Paste into editor here:


“Run in New Tab” to view and test the app. Download the html file once you are happy with it, or if you would like to add media objects such as images and audio.

STEP 5:

Be prepared to generate 10 or more versions! Repeat STEPS 3-4.

Debugging Options:

  1. Change the code manually yourself.
  2. Describe any unexpected behaviour / missing component to AI.
  3. Ask AI to try a new approach (usually after a few failed iterations).
  4. To save time, just ask AI to generate the codes that need to be changed. It will tell you where to update.

STEP 6:

Make the app look pretty!

  1. Optimise for SLS by asking AI to “limit the entire page to a size of max width 580px and max height: 460px”
  2. Ask AI to beautify the app with styling.
  3. Ask AI to add image / video / audio files into the code, giving it the filenames, e.g. replace the moving ball with an image of named “ball.png”. This is an example of such an image. You can right-click and “Save as” to save this image file into the same directory as the index.html file.

STEP 7:

To embed into SLS, you will need to copy the code libraries that are used (if any) in a new .js file. The code library is a collection of pre-written code that you can use to perform specific tasks, e.g.

  • plotly.js for continously changing graphs 
  • chart.js for static charts
  • papaparse.js for processing csv data

To make a copy of the file,

  1. Paste the link to the script on browser e.g. https://cdn.plot.ly/plotly-latest.min.js
  2. Save the page using the “Save as” option in the browser and place the file in the same directory as the html file.
  3. Rename the path to the file in this way:

STEP 8:

Download as HTML.
Save file as index.html. This is important for SLS packages as it will automatically load the index.html file by default.

STEP 9:

Zip all the files and upload the zip file into SLS component. Follow the user guide on how to do so: https://www.learning.moe.edu.sg/teacher-user-guide/author/html5-content-development/#uploading-a-html5-zip-file-in-sls

04 August

Interactive Graph with Javascript

Seng Kwang Tan 02 Kinematics, AI, IP3 02 Kinematics 0 Comments

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.

13 July

Heat capacity and an AI-generated simulation on thermal transfer

Seng Kwang Tan IP4 18 Thermal Properties of Matter 0 Comments

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.
02 July

Random displacement and velocity simulation

Seng Kwang Tan 02 Kinematics, IP3 02 Kinematics 0 Comments

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.

08 June

AI prompts to generate web-based quizzes

Seng Kwang Tan 02 Kinematics, AI, IP3 02 Kinematics, Quiz 0 Comments

With a set of questions on the equations of rectilinear motion as an example, the following quiz was generated using javascript by ChatGPT. This type of quiz is not linked to a database unless such integration is done, so the scores are not stored. However, they make for good self-assessment for students at the end of each topic.

The quizzes are easily generated using a set of prompts that are shown below, and hosted on any static page such as github pages or uploaded as a zip file into the Student Learning Space.

The URL for this sample quiz is at https://physicstjc.github.io/sls/kinematics-quiz. In fact, this quiz can be used as a template for quantitative quizzes for other topics as well. All the user has to do is to edit the five fields in each question: the question, correct answer, unit, equation and explanation within the index.html file (right-click to save and edit with plain text editor).

The format of the questions is written in this way:

const problems = [
      {
        question: "A car starts from rest and accelerates uniformly at 2.0 m/s² for 10 seconds. What is the final velocity of the car?",
        correctAnswer: 20,
        unit: "m/s",
        equation: "v = u + at",
        explanation: "Using v = u + at, where u = 0 (starts from rest), a = 2.0 m/s², and t = 10 s, we get v = 0 + 2.0*10 = 20 m/s."
      },
      {
        question: "A car traveling at 15 m/s accelerates uniformly at 3.0 m/s² for 5.0 seconds. What is the final velocity of the car?",
        correctAnswer: 30,
        unit: "m/s",
        equation: "v = u + at",
        explanation: "Using v = u + at, where u = 15 m/s, a = 3.0 m/s², and t = 5.0 s, we get v = 15 + 3.0*5.0 = 30 m/s."
      }]

The initial prompts given to ChatGPT were:

  • Create a javascript app to explain problems involving equations of motion, v = u + at, v^2 = u^2 + 2as, s = (u + v)*t /2 and s = ut + 0.5 at^2.
  • Give a word problem based on any one of these equations.
  • Use an input box for the user to key in their answer.
  • Indicate the required unit next to the input box.
  • If the answer is wrong, explain to the user why it is wrong.
  • If the user is correct, add 1 to the score and proceed to another problem.
  • Indicate the scores over the total number of questions attempted.

The follow-up or refinement prompts were:

  • Add 10 different problems to the list.
  • Use “Previous” and “Next” buttons to navigate.
  • When the user returns to a question that was attempted previously, he should not be able to attempt that question again.
  • Add some css styling to make it appealing.
  • Randomise the appearance of the questions and do not repeat questions.
  • Represent the values in 2 significant figures.

The workflow for converting the generated codes to a web app can be found here.