AI-Generated Apps for Student Learning Space

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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