AI-Generated Apps for Student Learning Space

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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

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.

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.

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.

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.

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.

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.