Creating Educational Web Applications in HTML and JavaScript with ChatGPT

Cover Image: HTML and Javascript code with highlighted scripts and functions. Script on a computer with source code – screen of a software developer. Photographed by Martin Vorel – https://martinvorel.com CC BY-SA 4.0 July 21, 2016. Source: Wikimedia Comons.

Prof. Maurício Veloso Brant Pinheiro
Departamento de Física, UFMG

Introduction

In my academic career, I have always favored text editors like Word over LaTeX codes for preparing manuscripts for scientific publications due to the speed provided by the ‘What You See Is What You Get‘ (WYSIWYG) system. I confess that, decades ago, I tried using LaTeX and even Word to LaTeX conversion software, but these were very primitive, and the time spent debugging was greater than rewriting the code in LaTeX, compiling it, viewing the result in postscript, and going back to the code to correct it. Mastering LaTeX syntax to submit a well-formatted paper has become a rite of passage for the academic elite… something that, for me, went off on a tangent.

Fast forward to the present, since I created AI-Talks.org and started writing on it, I have always used ‘almost-WYSIWYG‘ editing tools, without worrying about delving deep into HTML, CSS, JavaScript, etc. Just looking at those huge books with thousands of pages on the subject, which become outdated every year, I confess it made me lazy. The decision to use WordPress was the right one, because by subscribing, out of my own pocket, to a more complete plan, I always had all the necessary resources at my disposal. Today, I routinely use a wide variety of widgets, plugins, themes, and other WordPress tools to edit the site. Except for the odd script, like those from Google AdSense and some equations in LaTeX, editing with WordPress is very similar to a text editor, where you insert paragraphs, bullets, lists, images, links, etc., as objects.

With the popularization of large language models (LLMs) such as ChatGPT starting at the end of 2022, I immediately noticed a significant paradigm shift—in other words, “What you ask is what you get (WYAIWYG).” Well, not quite at the beginning, but with the evolution of these LLMs, this is becoming a reality, especially in the field of software development. If you follow my website (don’t forget to subscribe to our newsletter on the main page), you may have noticed that I’ve published several tutorials on the topic and codes created with ChatGPT.

With the help of these LLMs, I am learning Python, PyTorch, Pandas, TensorFlow, Keras, cloud programming (Google Colab, Jupyter, etc.), among other things.

This semester, I was extremely pleased to see my undergraduate and graduate students in the AI course (Special Topics D: AI), some with little or no programming experience, finish my course knowing how to use these tools and creating excellent neural network models for various applications. In short, these LLMs are also excellent teachers, and programming is no longer a daunting task restricted to nerds; it has become as easy as asking Alexa for a Piedmontese Rice recipe. Of course, to evaluate the recipe, you need to prepare it, and that’s another story…

I also teach Basic Experimental Physics. Something that has always bothered me is the data processing software, like Origin, which are paid (with expensive licenses) or outdated, and SciDAVis, the free version of Origin, which works poorly on the lab computers. Many of these computers have operating systems over ten years old, limited by hardware, which only complicates things further. The coordination, the technician, and the monitors do commendable work to keep everything running.

Several attempts have been made to suggest changes to this system to simplify the analyses. In the Basic Experimental Physics course: Mechanics, most of what we do are linear regressions (neither Origin nor SciDAVis is needed), something that in my student days we did with a calculator, and when the graphs were carefully drawn on graph paper (without going into details about another educational paradigm shift).

Among the various strategies, codes were even written in LabVIEW (a scientific automation language completely inappropriate for this, used only because the former lab technician mastered it). More recently, suggestions for mobile apps and third-party web pages to perform these linear regressions have been included. Therefore, it was necessary to write tutorials to teach the use of each of these resources. However, these methods often do not fit the realities of some of our laboratories, which do not even have adequate WiFi and are blind spots for 4G/5G technologies.

So I decided to learn to create applications in HTML/JavaScript for use in teaching laboratories and in my classrooms. With no prior experience in these languages, I turned to ChatGPT, and the result was excellent. The production was significant, and I confess that I learned the basics of HTML/JavaScript (+CSS) in a few weeks, and also a little but of LaTeX, with MathJax, by inserting equations into these web pages (Ah, revenge is a dish best served cold).

By creating a page with an application for calculating linear regressions and graphs in this format, the modernization of teaching laboratories becomes a potential reality. And, by gradually replacing outdated PCs with inexpensive platforms like the Raspberry Pi, teaching laboratories are already being modernized.

When developing data collection programs using Arduinos, with their wide variety of sensors and actuators (instead of spending a fortune importing expensive systems from Pasco or Phywe), combined with these dedicated HTML pages for simple data analysis, the standardization and modernization of laboratories in an economical (at least three times more economical) and efficient way is truly within our reach. Well, for me, it remained only to learn HTML/JavaScript, and in this article, I will show how I did it, what was done, and what I produced in three weeks since I started.

---

HTML and JavaScript for a Layperson

HTML (HyperText Markup Language) and JavaScript are two fundamental technologies for the creation and functioning of the web. They play distinct but complementary roles in the development of web pages and applications. Next, we will explore what HTML and JavaScript are, how they work, and how they interrelate to create rich and interactive web experiences.

HTML, which stands for HyperText Markup Language, is the standard language used to create and structure content on the web. It is a markup language that defines the basic structure of a web page, organizing content into elements and sections.

HTML uses “tags” to mark different parts of the content. Each tag has a specific purpose and is written between angle brackets. For example:

• <h1> to <h6>: Header tags, used to define titles and subtitles.
• <p>: Paragraph tag, used to define blocks of text.
• <a>: Link tag, used to create hyperlinks.
• <img>: Image tag, used to insert images.

Here is a basic example of an HTML document:

<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is an example paragraph.</p>
    <a href="https://en.wikipedia.org/wiki/HTML">Click here to learn more about what HTML is</a>
    <br>
    <br>
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg" alt="HTML5 Logo" width="100" height="100">
</body>
</html>

In this example, we have:

• <body>: Section that contains the visible content of the page, such as titles, paragraphs, links, and images.
• <!DOCTYPE html>: Document type declaration, informing the browser that this is an HTML5 document.
• <html>: Root tag that encloses all the content of the page.
• <head>: Section that contains meta-information about the document, such as the title.

On the other hand, JavaScript is a powerful scripting language that allows adding interactivity and dynamism to web pages. Unlike HTML, which defines the structure and static content, JavaScript is used to create dynamic content that can respond to user actions and real-time events.

JavaScript is often used in conjunction with HTML and CSS (Cascading Style Sheets). It allows manipulating the DOM (Document Object Model), which is the representation of the HTML structure of the page in the browser. With JavaScript, you can add, remove, or modify page elements, perform calculations, validate forms, create charts and interactive animations, and much, much more.

Here is a simple example of JavaScript that displays an alert when a button is clicked:

<!DOCTYPE html>
<html>
<head>
    <title>Example of JavaScript</title>
    <script>
        function showAlert() {
            alert("Button clicked!");
        }
    </script>
</head>
<body>
    <h1>Interactivity with JavaScript</h1>
    <button onclick="showAlert()">Click me</button>
</body>
</html>

This is what we need to know about HTML and JavaScript to start programming with LLMs. It’s important to note that, while not essential, a HTML/JavaScript visualization tool like Codebeautify is extremely useful. It allows you to view the code and make small corrections quickly and efficiently (in other words, like WYSIWYG). You can even simply include your code in a text file using Notepad, edit it, and save it as HTML. This means you don’t need sophisticated tools to start creating simple web pages. However, for beginners, Codebeautify offers an intuitive interface for testing and editing your code in real-time, making it easier to learn and improve HTML and JavaScript skills. These skills are crucial not only for understanding the basics of web programming but also for exploring the more advanced possibilities offered by large-scale language models.

Programming HTML/JavaScript with ChatGPT

ChatGPT can be an incredibly useful tool for quickly generating complete HTML and JavaScript code (and incidentally, for learning how these languages work). In a matter of seconds, you can get customized templates and code snippets based on simple prompts. It can even provide line-by-line code explanations if needed. This significantly accelerates the development process because you don’t have to start from scratch or search for suitable examples on the web.

When you need to create a web page or application with specific features, such as interactive forms, dynamic graphics, or even simple games, ChatGPT can provide the initial code you need. For example, you can ask ChatGPT to generate a contact form that validates user inputs in real-time with just a single prompt.

Prompt: "Generate HTML and JavaScript code for a contact form that validates the user's email."

And as we’ve seen, the response indeed comes in seconds. Visualizing the result on Codebeautify, we have:

Now that we have mastered the use of tools like ChatGPT and Codebeautify, we have everything we need to develop HTML/JavaScript codes as complex as we desire. The key is knowing exactly what we want and how to translate that into a prompt for ChatGPT. This way, we are programming through the concept of ‘What you ask is what you get and see,’ learning the languages while asking ChatGPT to explain the code, make changes, correct syntax errors, perform debugging, among other tasks, and viewing the results in a visualizer.

This approach not only accelerates the development process but also facilitates continuous learning and the improvement of web programming skills. With the help of ChatGPT and tools like Codebeautify, we can explore and experiment freely, creating robust and interactive solutions for various web projects.

---

Example: Uniformly Accelerated Rectilinear Motion (UARM)

Defining the Problem

One of the experiments in the Basic Experimental Physics course, conducted in the teaching laboratory, addresses Uniformly Accelerated Rectilinear Motion (UARM). In this experiment, an object (cart) slides on a frictionless track, supported by a layer of air generated by a compressor. The object accelerates due to the gravitational force exerted by a weight attached to it via an inextensible string and a pulley. This setup allows for the study of the relationship between the applied force and the resulting acceleration, as described by Newton’s second law. Moreover, the experiment provides a practical understanding of the laws of motion and the opportunity to analyze the behavior of bodies in nearly ideal systems, minimizing the effects of unwanted external forces such as friction.

The objective of this experiment is to experimentally determine the constant acceleration of an object on a track. The acceleration is determined by the position of the cart as a function of time and compared with the theoretical acceleration, which depends on the masses of the objects involved and the angle of the track relative to the horizontal.

The cart moves along the track, accelerated by the fall of a weight under the action of gravity. The linear position of the cart is determined by an angular sensor on the pulley, connected to the computer via an interface with A/D conversion. The sensor measures the angular position. On the computer, the angular position of the pulley as a function of time is converted by the data acquisition software DataStudio. The software transforms these data into the position, velocity, and linear acceleration of the cart, plots the three graphs, and performs the necessary curve fittings (quadratic for position and linear for velocity and acceleration). The data analysis involves these three simultaneous fittings and is done with a few clicks in the DataStudio program.

Initially, we will develop a simple application in HTML/JavaScript that reads a .TXT table file containing six columns: three for time and the other three for position, velocity, and linear acceleration, performs the three fittings simultaneously, and calculates based on the physical parameters (masses, angle, and acceleration due to gravity)

This application can be a cheaper and more uniform alternative for teaching laboratories, instead of using expensive and inflexible imported interfaces, with outdated data acquisition software that is difficult for students to understand. The data collection program, with a few lines of code, can be loaded onto an Arduino, which generates the table to be analyzed in our HTML/JavaScript application, recorded on a Raspberry Pi. Our goal here is to create this analysis application. For this, we will use a dataset in the appropriate format.

The app generated by ChatGPT

Initially, we will create an app just for viewing the graphs with a simple prompt on ChatGPT.

Prompt: "Generate an HTML and JavaScript App that reads a local file containing a six-column txt table with position, velocity, and acceleration, and plots these three graphs."

The response from ChatGPT includes the HTML code, JavaScript script, and didactic explanations of the project. The original code requires some adjustments and three additional prompts for correcting minor errors.

Prompt: "Give me the complete, functional code without explanations."

Prompt: "Rewrite this code so that the table with the six columns has the corresponding data: 'Time (s) Position (m) Time (s) Velocity (m/s) Time (s) Acceleration (m/s²)'. In the graphs, do not connect the points. The decimal separator for the txt file data is a period."

Prompt: "Add axes and gridlines to all graphs, also include axis titles with their respective units."

The final result can be executed on Codebeautify, and the graphs can be exported with one click.

Without manually changing the code, we then move on to the second step. Include the simultaneous curve fitting routine in the script.

Prompt: "In the following code, include in the JavaScript script a routine that performs simultaneous least squares fitting of position (quadratic function) and velocity (v=A*t) (linear functions). For the acceleration graph, calculate the average of the points. Display the best-fit functions on the graphs in red lines (use a straight line for the average acceleration value). After the graphs, present the fitting results: the acceleration 'a' for each of the graphs. Calculate the average acceleration of the fitting results, its standard deviation, and write the final result as a = (numerical value +/- standard deviation) m/s²."

The generated code wasn’t functional. I didn’t bother to look at it; I just copied and pasted it into Codebeautify and saw that it didn’t run. So I asked ChatGPT to debug it.

Prompt: "This code is not functional, find the errors and correct them."

And it worked! The results of the adjustments are:

• Position Fit: a_x = 0.9331 m/s²
• Velocity Fit: a_v = 0.9926 m/s²
• Acceleration Fit: a_a = 0.9328 m/s²
• Mean Acceleration: a = (0.95 ± 0.03) m/s²

And the graphs are:

Now just save the code to a text file using Notepad, with the HTML extension, to have an application for analyzing data from this specific experiment that will run on any browser and any computer, including a budget-friendly Raspberry Pi.

This app was generated by ChatGPT in just half an hour and a handful of prompts. Of course, we can refine the code by editing directly in the HTML viewer or using ChatGPT for that.

Upon completion, ChatGPT itself can comment on the code, explain step by step what it does (helping you learn about HTML and JavaScript), write a tutorial for the user, and even provide suggestions for frontend and backend improvements. In summary…

> This is a simple application for analyzing experiment data, created using HTML and JavaScript. Let's understand how it works:
> 
> **Step-by-Step Data Analysis**
> 
> **File Loading:**
> 
> - You select a text file with experiment data.
> - The application reads this file and extracts the data for position, velocity, and acceleration.
> 
> **Data Fitting:**
> 
> - **Position vs Time:** Computes a quadratic curve fit for position using least squares (X = X0 + V0t + At²/2).
> - **Velocity vs Time:** Fits a straight line to the velocity data (v = A*t).
> - **Average Acceleration:** Calculates the mean of the provided acceleration values.
> 
> **Graphical Visualization:**
> 
> - **Position vs Time Graph:** Displays position data points as markers and the fitted curve in red.
> - **Velocity vs Time Graph:** Shows velocity points and the fitted line in red.
> - **Acceleration vs Time Graph:** Presents acceleration points and a horizontal line representing the average acceleration.
> 
> **Results and Conclusions:**
> 
> - At the end, it presents the values of A (calculated acceleration) for the fits. The average calculated acceleration and its standard deviation are displayed for analysis.
> 
> **Future Improvements and Edits**
> 
> - **This application can be expanded and improved in several ways:**
>   - **Backend Enhancements:** Refine fitting algorithms to handle different data types or add support for more regressions.
>   - **Frontend Improvements:** Enhance user interface with more customization options in graphs or additional interactivity.
>   - **Direct Editing in HTML Viewer:** You can directly edit the HTML and JavaScript code in this file to adjust the application's behavior.
>   - **Use of ChatGPT:** Continue using ChatGPT to explore and learn more about HTML, JavaScript, and how to enhance this application.
> 
> **Conclusion**
> 
> This application demonstrates how you can quickly create a data analysis tool using simple web technologies. ChatGPT can help understand each part of the code and how it interacts to perform basic statistical analyses. Feel free to edit and expand this application to meet your specific needs for experiment data analysis.

Incrementing the Code

In this section, we demonstrate how, using a single prompt that includes loading a figure (created manually in an editor like CorelDRAW and exported as JPG), we can correctly deduce the equation of the cart’s acceleration in terms of masses, angle, and gravitational acceleration. This is done based on Newton’s second law, and the entire deduction is presented on the HTML page using LaTeX.

Prompt: "In the code below <previous code>, add the LaTeX equations that demonstrate the acceleration equation of the block with mass m1 in the figure, as a function of m2, g, and theta as shown in the figure."

The response from ChatGPT comes again in seconds:

To add the LaTeX equations that demonstrate the acceleration equation of the body with mass m1 in terms of m2, g, and θ, we can modify the HTML code as follows. I will include a LaTeX section within the HTML body to show the formula derivation, using MathJax for rendering.

Here is the modified HTML code: 

<new code>

This modified HTML code includes a new section titled "Deduction of Acceleration Equation" that uses MathJax to render the equations in LaTeX. These equations explain the derivation of the formula for the acceleration of the body with mass m1 in terms of m2, g, and θ. You can open this HTML file in a browser to view the rendered equations and interact with uploading and plotting of data.

And voilà.

The test dataset and the above code are all available on our GitHub: Data & URAM.

Expanding the Spectrum

As the codes above are generated in less than an hour, with just a few prompts, the results in terms of quality and quantity are fascinating. Every day, I come up with new ideas for innovative applications, from online calculators tailored for specific courses like Linear Algebra to virtual labs for experiments in Experimental Physics, such as AC RLC circuits, and educational environments for teaching Neural Networks, among many other valuable resources for education and research (some of which can be viewed, downloaded, and run via the link below; all you need is a web browser).

APPs

I intend to continue developing these tools and others, including various Natural Language Models (NLMs), to meet the needs of students, educators, and researchers. I will share (for free) all these applications and tools with you here on AI-Talks.org.

---

Conclusion

This article detailed my journey of adaptation and learning essential technologies for developing web applications and data analysis tools, highlighting the importance of WYSIWYG editors and modern artificial intelligence tools like ChatGPT. The adoption of HTML and JavaScript, supported by ChatGPT, proved to be an effective strategy for modernizing teaching laboratories, providing an accessible and robust solution for experimental data analysis. The development of an application for curve fitting and graph visualization in HTML/JavaScript exemplifies how technology can be used to solve practical problems and enhance student learning experiences. Furthermore, the integration of LaTeX for deduction and presentation of mathematical formulas, along with the detailed explanation of the code generated by ChatGPT, has shown how these tools can facilitate continuous learning and autonomy in web development. The use of modern and accessible tools like Raspberry Pi and Arduino, combined with web applications collaboratively developed with AI assistants, has proven to be a viable approach to modernizing laboratories, making them more efficient and economically feasible.

In summary, this article demonstrates that with the right tools and approaches, it is possible to transform technological challenges into opportunities for learning and innovation, promoting inclusion and the development of essential skills in programming and data analysis. The knowledge gained and the solutions developed have the potential to positively impact education and research, providing more efficient and accessible resources for everyone.

---

#AI, #Applications, #ArtificialIntelligence, #Chatbot, #CodingWithChatGPT, #Education, #HTML, #Javascript, #LaTeX, #LLM, #UARM, #WhatYouAskIsWhatYouGet, #WhatYouSeeIsWhatYouGet, #WYAIWYG, #WYSIWYG

---

Copyright 2025 AI-Talks.org