Seng Kwang Tan

11 February

Graph Plotting App made with ChatGPT in 15 minutes

Seng Kwang Tan 21 Practical / Planning, AI, Student Learning Space 0 Comments

As evidence of the prowess of generative AI, this graph plotting app was created in about 15 minutes with simple prompts and a text editor. It was tested with an existing set of data and uploaded immediately to the repository.

The user will begin by uploading a set of data from an experiment, with the column header being the labels for the axes, in the form of a CSV file. The app immediately calculates and displays the best-fit straight line using linear regression, providing users with insights into the relationships between the variables in the dataset. This allows for easy analysis of trends, patterns, and relationships within the data. Students can use the app to quickly visualize and analyze data. The screenshot button enables them to save the graph in picture form for submission to their teachers.

It has also been made compatible with the Student Learning Space. The screenshots saved by students can be uploaded as an attachment for a free-response question. This is especially useful when students are doing lab work and the teacher does not want the students to bother too much with configuring the graph. The ZIP file for use in the SLS can be downloaded here.

Prompts used are:

  1. Create a website using html and javascript for users to plot a graph using data from a csv file.
  2. The user can upload a csv file with the first column being the horizontal axis and the second column being the vertical axis.
  3. The column headers, which is the first set of values in the csv file, will form the labels for the axes of the graph.
  4. Plot the points with the data in the csv file and use linear regression to obtain the best-fit straight line of the data.
  5. The best fit line should be a line joining two red dots.
  6. Indicate the gradient and intercept of the best-fit line.
  7. Add a button at the bottom for users to take a screenshot of the graph.
  8. Put all the codes in one html file.
11 February

Dice Simulation to Teach Probability

Seng Kwang Tan AI, Javascript, Simulations 0 Comments

A dice simulation is an excellent tool for teaching probability because it provides a hands-on, visual way for students to understand the concepts of probability through experimentation and observation.

In the simplest demonstration, students should be able to predict and observe that a fair six-sided dice gives equal probability of outcome and hence, almost equal total occurrences given a large-enough sample size.

Students can then be asked to predict the probability distribution if given two dice.

The good thing is that with simulations, students get to compare the experimental probabilities they calculated with the theoretical probabilities and discuss any discrepancies and reasons for them. This allows students to understand the concept of randomness and how experimental results may vary from theoretical expectations due to chance.

Click here to access the simulator and here to download it for SLS.

The prompts used for ChatGPT are as follow:

Provide the code for the following in a single html file:

  1. Create a 6-sided dice simulator where the user can click on the image of a dice, the dice image will change randomly and the final result will be shown on the image.
  2. The dice image will be represented by the file “dice1.png” for the number 1, “dice2.png” for number 2, “dice3.png” for number 3 and so on. The image size is 80 pixels by 80 pixels.
  3. The default setting shows one dice. The initial image shown is “dice1.png”.
  4. Create a button to cast the dice.
  5. Create a bar chart with 6 vertical columns at the bottom that shows the frequency of the numbers obtained by the dice. Adjust the bar chart to show all 6 possible outcomes.
  6. Each time the dice is cast and the result is shown, it is added to a list shown below the chart.
  7. Create a button for an option to toggle between the use of one dice or two die. When this button is clicked, the list of results and the bar chart is cleared. The initial images shown are both “dice1.png”. If two die are used, both die will be shown side by side.
  8. Both die will be cast when clicking on either dice. The bar chart now shows the frequency of the total of the numbers obtained by the die. Adjust the bar chart such that it now has 12 vertical columns show all 12 possible outcomes.
  9. The total number for each toss will be shown in the list.
10 February

Team-based learning app

Seng Kwang Tan AI, Pedagogy 0 Comments


Team-Based Learning (TBL) is a method of small-group learning that encourages student collaboration and engagement.

Prior to the group discussion, students are assigned preparatory readings to ensure they come to class with a foundational understanding of the material. Students then individually complete an Individual Readiness Assurance Test (iRAT) followed by the same test taken with their team, the Team Readiness Assurance Test (tRAT). The tests typically consist of multiple-choice questions.

The no-tech version of tRAT involves having students use a “scratch-off” sheet to self-score their group test, facilitating immediate feedback and discussion among team members. An appeal can be made by teams to challenge questions they answered incorrectly. The process promotes critical thinking and deeper understanding of the material.

To conclude, teachers then focuses on concepts that students found challenging during the assessments.

Since I had been experimenting with the use of ChatGPT to make simple educational apps, I came up with an online tRAT quiz that replaces the “scratch-off” sheet. To modify the quiz options, use this. The teacher will have to edit the csv file with the correct option for each question. The html and csv files can then be uploaded onto a web host such as Amazon S3 or, for the case of Singapore teachers, the Student Learning Space.

For those who are keen to experiment with the use of ChatGPT 3.5 to generate codes, these are the prompts I used. Do note that your results may differ and some customisation or refinement of the prompts might be needed.

Provide the code for the following in a single html file:

  1. Create a website for users to key in their answers to a tRAT quiz for checking.
  2. The answers will be referenced from a csv file containing the question number in the first column and the answer to the multiple choice question (A, B, C or D) in the second column.
  3. The quiz will display the question number and 4 options: A, B, C and D. The user will choose the answer from the 4 options.
  4. If the first option is the correct answer, the letter will become light green and 4 marks will be added to the overall score. If it is the wrong answer, the letter will become dark grey and no marks will be added.
  5. The user will get to try a second time for the same question. If the second option is the correct answer, the letter will become light green and 2 marks will be added to the overall score. If it is the wrong answer, the letter will become dark grey and no marks will be added.
  6. The user will get to try a third time for the same question. If the third option is the correct answer, the letter will become light green and 1 mark will be added to the overall score. If it is the wrong answer, the letter will become dark grey and no marks will be added. There will not be a fourth time for the same question.
  7. Getting it correct on the second try should only get 2 marks added. On the third try, only 1 mark will be added if correct.
  8. The total score will be shown at the bottom of the page.
  9. There will be two other buttons to move to the next question or back to the previous question. Don’t jump to the next question automatically.

Edit: I have also generated a simple webpage for the iRAT assessment tool.

04 February

Creating Learning Apps Using ChatGPT

Seng Kwang Tan AI, Simulations 0 Comments

Simulating an Oscillation

Despite learning some time ago that ChatGPT can help with coding, I had not had the chance to test it out. Since I had a pocket of time available to explore last week, I keyed in the following prompt:

“Create a simulation of an oscillating particle moving from left to right with simple harmonic motion with a slider to control the period of oscillation using javascript, html and css.”

I then cut and pasted the code in its entirety into a html file and this is the output:

https://physicslens.github.io/shm/

This is what it looks like, in case you do not want to click into the link above.

Of course, more work needs to be done to improve the usability but I believe some of that can be done using ChatGPT as well. A basic knowledge of the programming language will certainly help to refine the user interface or add new functions.

Extending the oscillation to include 100 particles each with a constant phase difference, we can simulate a wave :

https://physicslens.github.io/shm/oscillator3.html

Simluation of oscillation with variable period

For the second simulation, I used the following prompt:

“Create a simulation of particles moving horizontally with simple harmonic motion. The simulation should display 100 particles arranged vertically, each oscillating horizontally at a different phase. The horizontal motion of the particles should simulate simple harmonic motion, with their positions following a sine wave pattern. The amplitude of oscillation should be set to 100 pixels, and the period of oscillation should be controlled by a slider input with a range from 0.1 to 2 seconds. The particles should be confined within a container with a fixed width of 600 pixels and a height of 400 pixels. The slider input should be positioned at the bottom of the container. The simulation should update the positions of the particles at regular intervals to create the illusion of continuous motion.”

Flashcards

Next, I tried creating an webpage that allows students to practise recalling definitions of specific terms that are obtained from a csv file. This is the prompt I gave:

“Create a revision webpage using html, javascript and css that references a csv file in the same folder with three columns: “topic”, “term” and “definition”. There should be a filter for the “topic” field. Each term in the “term” field will be displayed in turn using a left and right button. Another button labelled “Definition” will be used to show or hide the corresponding “definition” field at the bottom. Put all the script and style codes in the html file.”

At first, the button to display the definitions did not appear as ChatGPT misunderstood my instructions.

After making some adjustments, this is the link to the functioning site:

https://physicslens.github.io/definitions/

and this is the refined html file:

FlashcardDownload

All you have to do is to update the csv file with the topics, terms and definitions and ensure the index file is in the same folder as the data.csv file.

The best part for Singaporean teachers is, the zip file can be uploaded as a file into SLS and students can use it to test their recall of key terms.

Conclusion

The rise of generative AI is indeed creating new opportunities for learning, even for teachers. What used to require long hours of learning can now be condensed into a session with ChatGPT. We will still need to give very specific instructions which require some basic understanding of the product. At the same time, we need to be able to make tweaks here and there, but that should be easier since we have the basic structure of the product already.

13 January

Trial of AI Feedback Assistant in SLS for Physics

Seng Kwang Tan AI, Student Learning Space 0 Comments

The Singapore Student Learning Space introduced a Short-Answer Feedback Assistant recently and this is my first attempt at testing it out with a simulated student account. The purpose of the Feedback Assistant is to provide auto-generated constructive feedback on short-form written responses based on a set of answers provided by the setter. The system works on natural language processing (NLP) algorithms that analyze the structure, semantics, and context of the mark-scheme and user response to understand the meaning behind the user’s response. It then generates feedback based on the analysis. I am still in the process figuring out how the mark-scheme should be written to help the AI give the most accurate response.

As a testing question, I used the following:

The mark scheme was written in point form for easy reading and the mark to be awarded for each point written in square brackets.

The student response was as follow:

The feedback assistant then graded and proposed a feedback to the student which is found here. The NLP engine seems to be working well with the format of the mark scheme given (in point form and with marks indicated in brackets). I am still going to experiment with more questions but the results look promising for now.

However, the teacher will still likely have to keep an eye on the responses and edit it for a more accurate feedback. Unfortunately, I am not teaching for the next few months as I am on a course and will not be able to test this out with actual students but I look forward to doing so.

I also wonder if the auto-generated comments could also be trained to provide suggestions on follow-up learning activities.

12 November

Testing out Microsoft Bing Image Creator for drawing diagrams for exam papers

Seng Kwang Tan AI, Technology 0 Comments

I was wondering if we could use generative AI to simplify the diagram drawing process while setting exam questions. Then I came across Microsoft’s Bing Image Creator, which is powered by Dall.E 3, which is in turn, built on ChatGPT. After signing up for an account, I was given 100 free credits to test it out.

I used the diagram on the left as a target and the diagram on the right was generated using the following prompt:

A minimalist line drawn diagram with clean lines of about 1 mm thick, in the style of the exam papers. Show a measuring cylinder with markings up to 50 cm^3 containing 30 cm^3 of a liquid that is grey in colour. The measuring cylinder is on a weighing balance with a curved display for the analogue scale. A needle points slightly to the right within that scale.

This was a decent output. I could give the diagrams on the top left or bottom left boxes a little touchup and they will be good for use in a test paper.

In fact, the attempt above was the second one. The first attempt got me this set of pictures, which were more 3-dimensional and had more unwanted components such as retort stands and a protractor.

The prompt used was this:

A line drawn diagram with lines of about 1 mm thick, in the style of the Cambridge Physics exam papers. Show a measuring cylinder with markings up to 50 cm^3 containing 30 cm^3 of a liquid that is grey in colour. The measuring cylinder is on a weighing balance with a curved display for the analogue scale. A needle points slightly to the right within that scale.

While I could further refine the diagram to make it as close to the desired picture as possible, I did not want to waste anymore free credits. I feel that, with a monthly subscription fee of USD20, it will be worth it only if I use Dall.E on a daily basis, which is unlikely. However, for content creators such as textbook writers or curriculum resource developers, this might be of use.

Crafting the right prompts for the image creator takes skill. Being specific is key to obtaining the image that you have in mind. I first tested it out using a prompt that was too brief:

free body diagram with real life object and physical 3D vector arrows showing a box sliding down a rough slope

This was the disastrous outcome:

Do let me know if you are also trying ways to use AI to make the exam-setting process more efficient and share your tips!