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.

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

General Tools

Back to Top
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.
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.
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.
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.

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.

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.

Graphs and Simulations

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 configuring 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.

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.