AI-Generated Apps for Student Learning Space

This is a series of apps that were produced using codes given by ChatGPT 3.5 (the free version). You can do so with other GAI like Microsoft Copilot too. The apps are usable directly from here or can be downloaded and included into an SLS package.

The prompts given to ChatGPT are provided for your reference. However, you may still have to refine the prompts as the output may not always be consistent. While it is possible to generate a working app without any changes to the code, you can customise the app much faster if you know a bit of html or javascript. You may even ask ChatGPT to teach you how to do so!

Check out the step-by-step guide to produce and deploy your app. This html file generator helps you to save the code into a html file and test it out.

How to: Generate your own apps | Upload to SLS as Media Objects

Visualisation

Back to Top
Kinematics Graphs

Kinematics Graphs

The user gets to explore the changes in the shape of a displacement or velocity graph by changing the values of initial velocity and acceleration.

Test it out Download for SLS

Prompts

  1. Create a graph using chart.js with vertical axis being "displacement / m" and horizontal axis being "time / s".
  2. There should be a slider for the initial velocity value ranging from 0 to 2 m/s, a slider for the acceleration value ranging from -2 m/s^2 to 2 m/s^2.
  3. The displacement will start from zero and will follow a function dependent on the initial velocity and acceleration values from the slider.
  4. Draw the line of the displacement on the graph. Update the graph whenever the sliders are moved. Draw the function of the displacement graph with a smooth curve instead of connecting the dots.
  5. Show the values of the velocity and acceleration, along with the units
  6. Use A drop-down list to change the vertical axis to velocity or acceleration, updating the axis each time and the curve as well.
Formation of Stationary Waves

Formation of Stationary Waves

Meant for A-level Physics, students can observe how two waves moving in opposite directions can come together to produce a stationary wave.

A second page allows students to explore what happens when the conditions (wavelength, period, amplitude) of both waves are not identical.

Note: The plotly.js file must remain in the same folder as the html files if uploading as a zip file into SLS.

Test it out Download for SLS

Prompts

For the index page:

  1. Create a graph using plotly.js with a vertical axis for displacement of wave particles and a horizontal axis for distance moved by a wave. .
  2. Draw the curve of an infinitely long transverse wave moving along the horizontal axis.
  3. Create another infinitely long transverse wave of the same wavelength moving in the opposite direction along the same horizontal axis. Represent them in different colours.
  4. Use a slider to change the period of oscillation of both waves and another slider to change the wavelength of the waves.
  5. Each wave should have the same wavelength.
  6. Revised prompt: Keep the vertical axis fixed in height, equal to the maximum possible amplitude of the third wave.
  7. Revised prompt: Keeep the legend of the chart to the bottom so that the horizontal axis length is fixed at 640 pixels

For the second page:

  1. Have separate sliders for the amplitudes, periods and wavelengths of wave 1 and wave 2.
  2. Display the values of the sliders next to them.
Electric Potential of Two Charges

Electric Potential of Two Charges

Meant for A-level Physics, the variation of electric potential due to two charge particles can be observed.

Sliders allow user to change the magnitude and signs of the charges and the distance apart.

Note: The plotly.js file must remain in the same folder as the html files if uploading as a zip file into SLS.

Test it out Download for SLS

Prompts

  1. Create a web app to represent the electric potential of two charged particles.
  2. The two particles should be represented as dots along a straight line, with the midpoint being x=0.
  3. The electric potential for each particle should be drawn using plotly.js. The vertical axis of the graph should be that of electric potential. The horizontal axis is the distance from the centre of the first particle.
  4. The sum of the two electric potentials should be represented on the same axes as well.
  5. Show all the codes in one html file.
  6. Make the curve smooth.
  7. Use sliders to change the charge of each particle separately (both negative and positive values)
  8. Use a sliider to change the distance between the two particles.
  9. Update the curves with the sliders.
  10. Keep the range of values in the axes fixed.
  11. Use a checkbox to toggle the visibility of the total potential graph.
Earth-Moon System

Earth-Moon System

This animation is intended to show the rate of rotation of the Moon being equal to the rate of its revolution around the Earth.

The result is that half of the Moon is always not visible from Earth.

Test it out Download for SLS

Prompts

  1. Create a 2D animation of the revolution of the Moon around the Earth.
  2. The Earth is drawn as a green circle at the center of the canvas.
  3. Show the rotation of the moon about its own axis with the same time as it takes to move one round around the earth.
  4. Use two coloured hemispheres to represent the Moon, with the darker hemisphere facing away from the Earth.
Projectile Simulator

Projectile Simulator

This simulation is used for JC physics students to visualise the independence of horizontal and vertical components of velocity in a projectile launched vertically from a cart moving at constant velocity.

Test it out Download for SLS

Prompts

  1. Create a simulation to demonstrate the independence of the horizontal and vertical velocities of a projectile and visually represent the cart and projectile movements.
  2. When the launch button is pressed, a projectile will be shot upward from a cart that is moving from left to right on wheels.
  3. The horizontal velocity of the projectile will remain constant while the vertical velocity will change with time according to gravitational acceleration.
  4. In the end, the projectile will land on the same spot relative to the moving cart.
  5. Use a slider to change the horizontal velocity of the cart. Use a button to start the cart and another button to launch the projectile.
  6. Use a slider to change the initial vertical launch velocity of the projectile. Before the launch button is pressed, the vertical velocity of the projectile is zero.
  7. Add two wheels below the cart's rectangle.
  8. Add a button to reset everything.
  9. Use time = zero at the time when the launch button is pressed.
  10. Trace the path of the ball after the launch in the canvas with a dotted curve line.
  11. Create a variable to store the initial horizontal position of the projectile as the launch button is pressed. Use it to determine the starting point of the trace.
Wave Motion Animation

Wave Motion Interactive Animation

This animation can be used to demonstrate the effect of changes in period on wavelength of a wave. It also highlights a particular particle to show the perpendicular motion to the direction of wave propagation.

Test it out Download for SLS

Prompts

Create a simulation of particles moving vertically with simple harmonic motion. The simulation should display 25 particles arranged horizontally, each oscillating vertically 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 5 seconds. The particles should be confined within a container with a fixed width of 640 pixels and a height of 480 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. One of the particles near the middle should be red in colour.

Bohr's Model of the Atom

Bohr's Model of the Atom

This interactive app will show the number of electrons in the shells of an atom based on the Bohr's model.

Test it out Download for SLS

Prompts

  1. Create a website with a HTML5 canvas to show the bohr model of atoms of elements from 1 to 20 in the periodic table. Put all the codes in one page.
  2. There should be a drop-down menu to choose the element. The image shown will update upon change in the drop-down menu.
  3. The nucleus should be a dark yellow circle showing the chemical symbol and name of the element, as well as number of protons and neutrons, e.g. 1p; 1n for hydrogen.
  4. There should be up to 4 concentric circles of different radii to represent the shells of the atom.
  5. The electrons should be shown as coloured dots along the circumference of the circles representing the shells.
  6. The first two dots of each shell shall be blue while the others will be red.
  7. Display the dots on the lines of the circles of the shell.
  8. The number of electrons shown should be the same as the number of protons for each element.
Dice Simulator

Dice Simulator

This can be used to teach the math concept of probability. User can choose between the use of one or two dice. The results will be charted.

Note: External scripts cannot be referenced when uploaded into SLS's so the javascript from https://cdn.jsdelivr.net/npm/chart.js had to be saved as a separate file in the folder and the path was changed to directly refer to it.

Test it out Download for SLS

Prompts

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.
Interactive Graph

Interactive Graph

The user can use sliders to manipulate variables that affect a graph.

A screenshot of the graph will be taken with a button and saved into the computer. This can then be uploaded later in a free-response question in SLS for checking.

Note: External scripts cannot be referenced when uploaded into SLS's so the javascript from https://cdn.jsdelivr.net/npm/chart.js had to be saved as a separate file in the folder and the path was changed to directly refer to it.

Test it out Download for SLS

Prompts

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

  1. Create a html webpage that has a graph with a vertical axis labelled "velocity" and horizontal axis labelled "time". The range of values for the vertical axis is from zero to 10 m/s while the range of values for the horizontal axis is 0 to 8 seconds.
  2. A red line representing a change in velocity from zero to 10 m/s in 8 seconds is shown.
  3. A blue horizontal line is at a height that is variable, adjustable using a slider to change the variable.
  4. There should be a button for a screenshot of the graph to be taken and downloaded.
Graph Plotter

Graph Plotter

User can upload a csv file consisting of data from an experiment, with the column header being the labels of the axes. The first column of the data will be the horizontal axis while the second column will be the vertical axis. A best-fit straight line will be plotted, along with the equation of the line being shown.

This is especially useful for when students are doing lab work and the teacher does not want the students to bother too much with configure the graph. If done on SLS, the screenshot can be uploaded as the submission for a free-response question.

A sample data set can be downloaded here for testing.

Note: External scripts cannot be referenced when uploaded into SLS's so the javascript from https://cdn.jsdelivr.net/npm/chart.js and https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js had to be saved as separate files in the folder and the path was changed to directly refer to them.

Test it out Download for SLS

Prompts

  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.
Brownian Motion

Brownian Motion

The random motion of a particle can be observed as being the result of multiple collisions with surrounding particles. The effect of mass of particle can also be made obvious.

Test it out Download for SLS

Prompts

  1. Create an interactive animation to demonstrate how air molecules move using HTML5 and javascript, putting the codes in one page.
  2. There are about 500 grey monoatomic particles moving randomly and continuously in a vacuum in the canvas. The canvas has a width of 600 px and height of 400 px.
  3. The grey particles that are in constant motion in straight lines with the same initial speed and directions until they collide against the wall of the container or against each other.
  4. 1 red monoatomic particles of mass that is 100 times that of a grey particle will originate from the centre of the box and interact with the grey particles through collisions.
  5. After each collision, they will bounce off in another direction, obeying the conservation of momentum and conservation of kinetic energy.
  6. There should be a slider to increase the initial speeds of the particles.
  7. There should be a checkbox to change the grey particles to white while the red particle remains visible.
Relative Velocity

Relative Velocity

The velocity of a boat relative to the ground is equal to the velocity of the boat relative to the water plus the velocity of the water relative to the ground. This simulation allows users to observe the effect of the addition of velocities to obtain the resultant velocity of the boat.

Test it out Download for SLS

Prompts

  1. Create a javascript simulation in a single html file that demonstrates the addition of two velocity vectors to give a resultant velocity.
  2. The velocity of a boat travelling in still water moving across a river is shown as vertically upward.
  3. A slider will change the speed and direction of the water flow.
  4. The velocity of the river water is also shown.
  5. Finally, show the addition of the two vectors to give a third vector: the resultant velocity. Create a button for animating the boat's movement.
  6. Use two horizontal lines to show the shores of the river, also the starting and ending point of the boat's journey.
  7. The boat should be represented with a pencil-like shape, moving upward from one horizontal line to another. The boat should be moving in the direction of the resultant velocity.
  8. The vectors should be represented with arrows.
  9. Draw some light blue wavy curves between the two horizontal lines that are stationary when the river speed is zero but move at the river velocity otherwise.
Radioactive Decay

Radioactive Decay

This simulation allows users to visualise the random nature of radioactive decay and the effect of varying half-life. A decay curve is plotted and the data can be downloaded for further analysis.

Test it out Download for SLS

Prompts

  1. Make a javascript simulation showing the decay of radioactive particles. Put all the codes in one file.
  2. The half-life of the particles will range between 1 second to 200 seconds and controlled with a slider.
  3. There should be two canvases. In the first canvas, create an array of 60 by 60 undecayed particles represented by circles that are grey in colour. Upon decay, they shall be red in colour. The particles shall appear as circles. Update the canvas very second.
  4. In the second canvas, there should be a decay chart using plotly.js. The horizontal axis is time and vertical axis is the remaining undecayed nuclei. Update the chart every second as well.
  5. Initialise the graph such that the time axis starts at zero and the vertical axis shows 3600 at first.
  6. Add a button to download the data values in csv format.
Thermal Processes

Thermal Processes

This simulation shows the variation of temperature based on the heat capacities of two objects in thermal contact.

Test it out Download for SLS

Prompts

  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./li>
  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.
Bouncing Ball

Bouncing Ball

This simulation is displayed with the velocity and displaement graphs of a bouncing ball with energy loss.

Test it out Download for SLS

Prompts

  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.
  8. Limit the entire page to a size of max width 580px and max height: 460px by putting the canvas and graph side by side
Geiger-Muller Counter

Geiger-Muller Counter

This simulation allows students to explore the random nature of radiation and the significance of accounting for background radiation in experiments.

Test it out Download for SLS

Prompts

  1. Putting all the codes in one page, create a html and javascript simulation of a geiger muller counter.
  2. Display a graph using plotly that updates the total counts after each sampling
  3. A start and stop button should begin recording the counts. Show a timer as well.
  4. Create a drop-down menu to display one of 3 graphs: the line for the cumulative background count, the sample count for each second and the count per minute.
  5. Create a drop-down menu to select 3 different radioactive sources: background radiation, a banana and another real-life example of a sample used in physics labs that has more counts per minute than a banana.
  6. Upon changing the sample, reset all the graphs.
  7. Keep the entire page to within 560 px width and 480 px height.
Quiz on Waves

Quiz on Waves

This app auto-generates a graph and a question related to the graph on the concepts of amplitude, wavelength, frequency, period and the relationship speed = wavelength/period = frequency x wavelength.

Test it out Download for SLS

Prompts

  1. Putting all the codes in one page, create a quiz on the topic of general properties of waves, where the app will generate either a displacement-distance graph or a displacement-time graph using plotly.js and then ask the user questions to find amplitude, wavelength, period, frequency, speed of wave, etc.
  2. Include questions such as finding frequency from a displacement-time graph and finding period or frequency given the speed of the wave and a displacement-distance graph.
  3. If the information needed to solve a problem is not in the graph, you must provide additional information such as the speed of the wave. For instance, for graphs with time axis that require the user to find wavelength, speed is needed.
  4. Generate a new question and graph after each question is done.
  5. Randomise the values to find and the answers. Use a MCQ format for each question.
  6. Add units to the graphs and to the questions and options.
  7. The score is shown as a fraction of correct answers over attempts.
  8. After each quiz of 10 questions is completed, if the final score is less than 5, encourage the user to try harder or try again in a positive language. If between 5-7, the user is almost there. From 8-9, very good. 10 is perfect. Display these messages in a pop-up UI element on the screen. Create a start-over button as well.
  9. Limit the entire page to a size of max width 580px and max height: 460px

Sensors

Back to Top
Sound Level Meter

Sound Level Meter

Use this sound level meter to measure the noise level in your class. The slider allows you to change the sensitivity of the meter. The sensitivity value ranges from -20 dB to 20 dB.

Test it out Download for SLS

Prompts

  1. Create a html and javascript page that senses the sound from the computer's microphone and indicates the loudness on a needle to simulate a sound level meter.
  2. Use the slider to change the sensitivity of the sound level meter.
  3. Centralise everything horizontally.
Sound Frequency Analyser

Sound Frequency Analyser

This sound frequency analyser is able to pick up the dominant frequency from the microphone. Students can use it to investigate the effect on the frequency of sound by factors such as length or tension of a guitar string.

For higher level Physics students, they can observe the frequencies of higher harmonics.

Test it out Download for SLS

Prompts

  1. Process the data from the microphone to determine the dominant frequency or frequency spectrum of the sound signal.
  2. Display the value for the dominant frequency.
Sound Generator

Sound Generator

The sound generator can be used to demonstrate the effect of frequency on the pitch of a sound. It can also be used to determine the audible frequency range of an individual.

Test it out Download for SLS

Prompts

  1. Create a website that generates sound at the highest possible volume with a frequency control slider from 10 Hz to 40000 Hz.
  2. Use a play and stop button.
  3. Add an input box too for the frequency to work together with the slider.
Metronome

Metronome

This digital metronome can be used to keep timing using audio cues.

The frequency of oscillation is adjustable.

Test it out Download for SLS

Prompts

  1. Make a metronome website with javascript with adjustable frequency.
  2. Produce a midi sound of 440 Hz every half an oscillation.
  3. Represent it like an inverted pendulum with one end of the pendulum fixed at the bottom of the canvas.
  4. Have a start and stop button for the ticking.
Camera Brightness Recorder

Camera Brightness Recorder

This can be used as a datalogger of the brightness detected by a camera.

Note that the camera needs to be enabled for your browser. This app will probably not work with iOS devices due to their privacy policies.

The brightness value calculated is not based on a specific unit such as lux or candela per square meter, which are commonly used units for measuring brightness in physical light measurements. It is a result of averaging the intensity values of the red, green, and blue color channels of each pixel in the captured frame.

It's important to note that the value is relative and may vary depending on factors such as ambient light conditions, camera settings, and image processing algorithms. Therefore, it should be interpreted as a relative measure of brightness rather than an absolute physical measurement.

Test it out Download for SLS

Prompts

  1. Create a webpage with html and javascript that obtains information from the computer's sensors such as brightness.
  2. Display the brightness information.
  3. Use a start and stop button to being and end the sampling.
  4. Use a slider to control the sampling rate.
  5. Record the brightness data in a list at the bottom with the timestamp.
  6. Create a button to download the data in csv format.
Acoustic Stopwatch

Acoustic Stopwatch

Instead of using buttons to start and stop a timer, hands can be freed by using loud sounds to trigger the starting and stopping.

Acoustic stopwatches can be used in various scientific experiments where precise timing is required, such as in physics experiments involving the measurement of sound propagation or timing of a student completing a lap using a clap as start and stop triggers.

A slider can be used to adjust the threshold of the sound used to trigger the stopwatch. A default value to use is 150 (This is a relative unit and not a physical unit). The timing is displayed up to 1 millisecond.

Test it out Download for SLS

Prompts

  1. Create a webpage with javascript and html that serves as an acoustic stopwatch.
  2. A start button will be used to begin listening for the first loud sound in order to start the timing.
  3. The timer will start only when a sound louder than a predetermined threshold is detected by the microphone of the device after pressing the start button.
  4. It will stop when a second sound that is louder than the same threshold is detected.
  5. Use a slider to vary the threshold of sound.
  6. Use another slider to adjust the minimum delay before the timer will stop with the second sound.
  7. Display the time in seconds and milliseconds.

General Tools

Back to Top
HTML File Generator

HTML File Generator

This serves as a web-based code editor. Users can cut and paste html, js and css code into the input box and convert them into a downloadable index.html file straightaway.

Test it out Download for SLS

Prompts

  1. Create a website with a large input box with adjustable dimensions. The aim of this site is to convert codes written into the box into html.
  2. Whatever the user keys in, when a button is clicked, save the content as plain text and download it as an "index.html" file.
  3. Create another button for the codes to run in another browser tab as a html file without downloading.
Delight

Pomodoro Timer

Students can use this timer as a focusing strategy. For the first 25 minutes, the timer will be shown in a green box. During the 5-minute break, it will turn light blue.

A random piece of accompanying music will be played if needed.

The user can also key in a task to focus on during the 25 minutes.

Test it out Download for SLS

Prompts

  1. Create a pomodoro timer webpage. A timer for 25 minutes will begin with a start button. There is a pause button that will pause or resume the timer. After 25 minutes, there will be a 5 minute break.
  2. The "Pause" button should toggle to "Resume" when pressed and vice versa.
  3. The "Start" button will restart the timer every time it is pressed.
  4. The style of the first 25 minutes should be very different from that of the last 5 minutes.
  5. Also, there should be another button to turn on the music. There are 5 mp3 files to randomly choose from and play one after another. The file names are "music1.mp3", "music2.mp3", and so on.
  6. The play music button should toggle to become a mute button and vice versa.
  7. There should be an input box for a line of text. The placeholder in the input box should read: "Focus: ".
  8. When it's break time, please indicate using an image "break-image.png".
Countdown Timer Screenshot

Countdown Timer

For use in class. Set a duration and start the timer. When the time is up, an alarm will sound.

For use in SLS, provided the student does not go from one page to another, a timer can be set up to help student manage the time on an activity.

Replace the alarm with something more soothing if you like.

Test it out Download for SLS

Prompts

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

  1. Create a webpage: This is a basic instruction to start building a webpage.
  2. Add a countdown timer: We want to include a timer that counts down from a specified time.
  3. Allow setting hours, minutes, and seconds: Users should be able to input the duration of the countdown by setting the hours, minutes, and seconds individually.
  4. Include buttons for adjustment: Add buttons labeled with "+H", "-H", "+M", "-M", "+S", and "-S" for users to increase or decrease the hours, minutes, and seconds as they desire.
  5. Styling the webpage: Use CSS to style the webpage for a visually appealing appearance. This includes setting fonts, colors, and layout.
  6. Add functionality for starting, pausing, and resetting the timer: Implement JavaScript functions for starting, pausing, and resetting the countdown timer. These functions should be triggered by clicking corresponding buttons.
  7. Incorporate sound: When the timer reaches zero, play a sound from an audio file (alarm.mp3).
  8. Include a mute button: After the sound starts playing, display a button labeled "Mute" that allows users to mute or unmute the sound.
Random Name Generator Screenshot

Random Name Generator

For use in class. Either enter the names with semi-colons as separators or upload a classlist (consisting only of names, not index number, etc) in csv form.

If you want to remove the displayed name from the list, you can click the "Remove Name" button below the displayed name. The list of names drawn will appear in a list below.

Test it out Download for SLS

Prompts

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

  1. This web page lets you generate random names from a list of names you provide.
  2. There's a section labeled "Enter names separated by semicolons."
  3. You can type or paste a list of names into a box provided. Each name should be separated by a semicolon.
  4. Alternatively, you can upload a file containing a list of names in CSV format using the "Or upload a CSV file" option.
  5. Once you've entered the names or uploaded the file, click the "Submit" button.
  6. After submitting, the page will display another section.
  7. In this new section, there's a button labeled "Generate Random Name."
  8. When you click this button, a random name from the list you provided will appear on the page.
  9. Below the "Generate Random Name" button, there's a paragraph displaying the randomly generated name.
  10. If the user wants to remove the displayed name from the list, you can click the "Remove Name" button below the displayed name.
  11. Any names that you've generated will be listed below the "Generated Names" section.
  12. Each generated name will appear on a separate line.
Audio Transcription

Audio Transcription

This app transcribes speech to text, including the option of including timestamps. It can be used for students' self-assessment of their oral presentation or for quick generation of text.

English Download for SLS
Chinese Download for SLS
Malay Download for SLS
Tamil Download for SLS

Prompts

  1. Create a webpage to transcribe an audio recording using javascript and html.
  2. Use a stop button to pause the recording.
  3. When the start button is clicked again, the recording resumes. Keep the entire text that is being transcribed.
  4. Use a button to allow the user to copy the whole text.
  5. Start each segment in a new line please.
  6. Stylise the buttons and text.
  7. Use a checkbox to show and hide the timestamp of the recorded segments.
Interactive Video Screenshot

Interactive Video

Engage students with questions at chosen timing during the playing of a video. The teacher can edit the timing and questions using the html code.

Change the video name in the line that says 'source src="pizza.mp4" type="video/mp4'

Test it out Download for SLS

Prompts

  1. Make a webpage using html, javascript and css and put a video player on it. Also, create a space where questions can appear later.
  2. Make the webpage look nice by adding styles to arrange the video and question areas.
  3. Add some special instructions for the webpage to make it interactive:
    • Keep track of the video and where it's paused or playing.
    • Plan out when the questions should pop up during the video.
    • Keep track of which question is currently being asked.
    • Set up rules for when to show the questions and what happens when you answer them.
    • Make sure the video pauses when a question appears, so you can't watch until you answer.
    • Update the webpage to include the question boxes with options to choose from and a button to submit your answer.
Interactive Story

Interactive Story

A story line is decided by the user based on the branches designed by the teacher. ChatGPT can help to create the story too. AI image generators like Dall-E can be used to create images for the story.

However, quite a bit of work is needed to insert the pictures in the right sections and to indicate the path to be taken by each button.

Test it out Download for SLS

Prompts

  1. Create a single html page where an interactive story with multiple story arcs can be presented. Users can choose to go to one page or another.
  2. Add a button for the function to read out the text in the story.
  3. Create a sample story.
Definitions Flashcards Screenshot

Digital Flashcards

For use online. Teacher can include a csv file of key terms and their corresponding definitions into the same folder as the index file. Students can filter by topic and use this to test their recall of definitions of selected key terms.

Test it out Download for SLS

Prompts

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.

Student Flashcards

Student Flashcards

This is the second flashcard app in this collection. The main difference is that students get to upload their own terms and definitions in the form of a csv file.

Keyboard entries are taken as alternative input method.

Test it out Download for SLS

Prompts

  1. Create a revision webpage using html, javascript and css that references a csv file in the same folder with two columns: "term" and "definition".
  2. The csv file is to be uploaded by the user.
  3. 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.
Random Quote Generator Screenshot

Random Quote Generator

Can be used to automatically show a different inspirational quote each time a student visits a site. These quotes will be random and therefore, different for each student. The list of quotes is coded into the html. You can change it from there.

Test it out Download for SLS

Prompts

Create a html webpage with a randomly generated quote with the attributed source each time it loads. The quotes should be aimed at inspiring students to put in their best effort in their exam preparations. The quote will be chosen from a list of twenty quotes.

LaTeX Renderer

LaTeX Renderer

Generate Math equations using LaTeX. The image rendered can be downloaded as a scalable vector graphics (SVG) file for inserting into presentation slides or for display of working in SLS.

Note: If uploading into SLS, the javascript files must be at the same level as the index.html file in the zip folder.

Test it out Download for SLS

Prompts

  1. Create a website with a large input box to input latex and render it as a SVG file
  2. Add a button to download the rendered SVG image with transparent background.
  3. Add a button to convert the SVG image into png with a transparent background for download.
  4. Suggest a file name for the downloaded image based on the first 20 characters of the input.
To-Do List

To-Do List

Maintains a to-do list. However, as this application uses a database that is stored only on the browser from which it is loaded, you will not be able to see the to-do list in another browser.

Test it out Download for SLS

Prompts

  1. Create a website with a to-do list using indexedDB and javascript.
  2. Put all the codes in one page. Put all the codes in one page.
  3. Use css to give it a pleasant look.
Basic Calculator

Basic Calculator

The basic calculator functions can be found in this app. The priority of multiplication and division over addition and subtraction applies.

Keyboard entries are taken as alternative input method.

Test it out Download for SLS

Prompts

  1. Create a webpage with a basic calculator, with the digits and operators in square buttons arranged in a usual calculator arrangement.
  2. Allow keyboard entries as alternative input method.
Video Recorder

Video Recorder

With a video recorder embedded into SLS, users will not have to use an external app to make video recordings for submission. However, the user will still have to download the video first (in mp4 format) before submitting as a file attachment into a free-response question. (SLS currently has a audio-response question type but not yet a video-response question type.)

In some devices, the recorder only works when opened in full screen mode.

Note that different web browsers may impose their own limitations on video recording. For example, some browsers may limit the duration of a video recording to prevent excessive resource usage or to ensure a good user experience.

Some browsers may prompt the user for permission to access the device's camera and microphone, and users may have the option to deny or limit access. Additionally, browser security settings or extensions may impose additional restrictions on video recording.

Test it out Download for SLS

Prompts

  1. Create a website that could record video and audio from the device camera and microphone.
  2. Show a preview of the video in the browser. Do not show the video in fullscreen mode even in mobile devices so that the controls can remain visible.
  3. Use a download button for the user to download the recorded video in mp4 format.
  4. After the recording, replace the video preview with the video that has been recorded. Include playback functions.
PDF Viewer

PDF Viewer

This allows a pdf file to be embedded seamlessly into SLS. Currently, SLS only allows for pdf files to be uploaded as a downloadable attachment but does not load it.

For saving into SLS, please change the file name in the index.html file to that of the pdf file.

Ensure that the pdf file is in the same level as the index.html file within the zip folder.

NEW! If you are not confident in doing the above, you may use the automatic zipping function in here. (This is also built with ChatGPT)

Test it out Download for SLS Upload PDF and Zip for SLS

Prompts

  1. Prompt for the index file: Create a website that embeds a PDF file.
  2. Prompts for the zip folder creator: Create a website that allows users to upload a pdf file, then create a index.html file that points to that pdf file using the code above to embed to pdf. The output will be a zip file with both the index.html file and the uploaded pdf file. Use only javascript, css and html.
Zip Directory Generator

Zipped Directory Generator

This page helps teachers to auto-generate an index file that lists down all the files in the root directory of a zipped folder. It then creates a new zipped folder with all the files and the index file.

When uploaded into SLS, the package shows as a directory of all the files in the folder and students can download the files one by one or altogether as a zipped folder.

Test it out

Prompts

  1. Create a website using javascript that allows users to upload a zipped folder into the browser and then creates an index.html file that lists all the files within in in the form of links.
  2. Use a button for the user to download a new zipped file with the original files and the index.html file.
  3. Create an input box to enter a title for the zip folder and the index.html file.

Games

Back to Top
Delight

Delight - A Turn-Based Board Game on Electricity

Players will take turns to connect their own bulbs to the terminals while trying to sabotage their opponent's bulbs.

At lower levels, students can compete to see who has the most lit bulbs. However, they will need to be able to identify which light bulbs are lit.

Do watch out for short-circuits.

At higher levels, students can compete to see whose light bulbs has the most total electrical power, with some calculations involved.

Test it out Download for SLS

Prompts

  1. Create a game board using 16 squares in a 4-by-4 grid with html and javascript. In each square, there is a space of 100 pixels by 100 pixels where an image can be placed. The squares will be the placeholders for the images.
  2. On the top left corner, the image file "positive.png" is shown. On the bottom right corner, the image file "negative.png" is shown.
  3. Below the 4 by 4 grid, there is a line if images two users can take turns to choose from: "cross-wires.png", "r-wires-0.png", "t-wires-0.png", "straight-wire-0.png", "yellow-light-0.png" and "red-light-0.png".
  4. Change the css such that when an image is chosen, it will grey out slightly
  5. Upon clicking an image that had been placed in the grids, the image will rotate by 90 degrees clockwise.
  6. Include an undo button to reverse the last step.
Hangman Game

Hangman

Can be used in-class, online or even as part of a virtual escape room. Open the HTML file in a web browser to play the game. The game will present physics keywords for the user to guess one word at a time. Teachers can edit the html to add new words into the list.

Test it out Download for SLS

Prompts

  1. Create a hangman game based on keywords in physics such as "impulse", "momentum" and "inelastic" for the user to guess one word at a time.
  2. The number of blanks that are shown is the number of letters in the selected word.
  3. Leave a space between each blank.
  4. The guessing is done letter by letter.
  5. For each correct guess, add one point to the score
  6. For each incorrect guess, deduct one point. Keep score until all the words are completed.
  7. Display the score. Put all the codes in one html file. Celebrate the completion of each word.
Chinese Word Game

Chinese Word Game

The user will answer questions to a quiz in the form of a game.

Teacher can edit the quiz questions in the html file.

Test it out Download for SLS

Prompts

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

  1. I'd like to create a webpage with a game to help people learn Chinese 成语 (Chengyu), which are interesting idiomatic expressions in Chinese. /li>
  2. Each 成语 will consist of 4 words, but one word will be replaced by a blank or line.
  3. The missing word is the one that the player needs to guess.
  4. The game screen will show 4 options for the missing word.
  5. Options will be displayed as bubbles floating around the screen.
  6. The bubbles should move slowly and randomly across the screen and bounce off the walls. They must remain within the box.
  7. The player needs to click on the correct bubble corresponding to the missing word.
  8. Once the correct bubble is clicked, the completed 成语 will be shown on the screen.
  9. One point will be added to the player's score for each correct guess.
  10. After the player answers one question, the next question will be displayed automatically.
Guess the Prime Number Game

"Guess the Prime Number" Game

The player will guess a prime number between 1 to 1000 that was randomly selected by the computer.

The computer will prompt the player if the number is non-prime, or if it is too big or too small.

Test it out Download for SLS

Prompts

  1. Create a website with a game that allows users to guess a prime number between 1 to 1000.
  2. When the user guesses correctly, there will be a congratulatory message.
  3. When the user guesses wrongly, there will be a message telling the user if the number entered is not a prime number, or if the number entered is too small or too big.
  4. A input box will be used to enter the number.
  5. There will be a log of the guesses made as well as whether the guess is non-prime, or too big or too small.
  6. Refinement 1: Put all these in a single file.
  7. Refinement 2: The correct number must be randomly selected from a list of prime numbers from 1 to 1000. Inform the user whether the guess is too small or too big.
  8. Refinement 3: Reject the entry if it is not a prime number. Inform the user if it is not a prime number.
  9. Refinement 4: The randomly generated prime number should remain the same until the user guesses it correctly.
  10. Create a button to restart the game and reset all the values.
  11. Redesign the website to make it more aesthetically pleasing. For the list of guesses, make it such that each guess appears in a new row.

Assessment

Back to Top
Coin Addition Practice Screenshot

Coin Addition

For self-practice or in class learning. Users will be shown a number of Singapore coins. They will need to key in the total value for checking.

Test it out Download for SLS

Prompts

  1. Create a quiz website on how to add values of coins.
  2. Use a button to generate a new problem with a random number of coins of varying values such as 5 cents (represented by image file "TS5c.jpg"), 10 cents (represented by image file "TS10c.jpg"), 20 cents (represented by image file "TS20c.jpg"), 50 cents (represented by image file "TS50c.jpg") and 1 dollar (represented by image file "TS1d.jpg").
  3. Display the number of coins as required by duplicating the images.
  4. Use an input box with a submit button to check the value of coins added in terms of dollars.
  5. Put a dollar sign in front of the input box.
  6. Centralise all the messages and elements.
  7. Use a button to generate a new question.
Interactive Video Screenshot

Individual Readiness Assurance Test (iRAT)

A series of multiple-choice options that do not automark but upon completion, student will download a csv file of their responses to be used for the next step of team-based learning, which is the tRAT.

Test it out Download for SLS

Prompts

  1. Create a webpage where students can enter their options for a series of 10 multiple-choice questions with 4 options. Display 10 rows of four options A, B, C and D. Each option exists as a button. Each question should be part of an ordered list.
  2. There is no need to check the answer but when an option is chosen, the lightgrey buttons should turn lightblue in colour.
  3. If a button is selected, when i click on it again, it should become unselected.
  4. Include a button that triggers the export of a csv file with every question and its corresponding chosen option.
Team-based learning

tRAT Assessment Tool

For use in class for team-based learning. Students will work in groups to come up with a consensus to answer questions. They will get multiple tries in each multiple-choice question, with decreasing rewards for retries.

Teacher will have to edit the csv file with the answers. Do not change the relative position of the csv file.

Test it out Download for SLS

Prompts

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.