Building Better AI Assistants

Using MicroSims to Build User-friendly and Educational Tools

Dan McCreary
7 min readJan 20, 2024
Using AI to build an LED resistor calculator: before and after. Figure by the author.

I have been using GPT-4 to build MicroSims for Education for several months now. I want to share a fun experience I had recently building an LED resistor calculator. The key finding is that using generative AI can turn simple math formula calculations into small interactive training applications with just a little more effort by leveraging the power of MicroSims. We use our computational thinking skills to decompose the problem and let generative AI guide us.

After walking through the steps of how I did this project, we will discuss how these tools will strategically impact education and learning.

Some Background on MicroSims and the LED Resistor Calculator

An LED circuit and the equation used to calculate the correct resistor value. Figure from Wikipedia and the author.

I have used generative AI to create educational content for almost four years. My first post on this topic goes back to May 2020. I have learned much about structuring prompts to get the most out of these incredible tools.

Working with Valerie Lockhart at Code Savvy this summer, I learned how to use p5.js (an animation framework) to generate MicroSims. This little trick caused a massive jump in the quality of the tools I generated. I started to integrate MicroSims into our new Robot Day site and am now creating a new Beginning Electronics site to support these events.

A simple LED circuit is one of the first circuits we teach in class. It is tempting for our students to wire an LED right up to the ground and power rails on a breadboard, which will burn out the LED. This is because too much current flows through the LED. We must add a resistor to limit current flow and prevent LED burnouts. The question arises: what resistor value should we choose to limit the current flow to a reasonable value?

To solve this, we need to do just a little math. We calculate the difference between the source voltage and the voltage drop over an LED and then divide it by the current we want. This is a pretty simple calculation, and there are plenty of LED resistor calculator tools on the web to do this for you if you don’t recall the formula or don’t want to do the math. But these calculators are pretty primitive, and they assume some prior knowledge.

Using Generative AI to Build an HTML/JavaScript Calculator

Because the basic calculation is very simple, we can easily generate a simple HTML page with a few lines of JavaScript to do this calculation. Here is the prompt that I used:

Create an HTML form to calculate the LED resistance in a circuit. Title the form: “LED Resistor Calculator” with three input text fields.

1. “Source Voltage”

2. “LED Voltage Drop”

3. “Current”

Add a green button with the label “Calculate Resistance”. When the user clicks the button, calculate the correct resistance and display the text on the web page.

Most generative AI tools always created the correct HTML/Javascript program in my tests. You can see this code running here.

Here is the user interface it created:

A basic HTML/Javascript web form for calculating the correct resistance value of an LED circuit. Image by the author.

What we learned about doing this is that we don’t even need to give GPT-4 the formula. It knows enough about this common process to figure out the formula. We need to be precise about what the inputs are and what the result of the button press should be. This should motivate everyone to give GPT-4 a try to build simple calculators. But wait…there is more!

Using GPT-4 to Generate a MicroSim for LED Resistor Calculations

A MicroSim version of the LED resistor calculator. Note that sliders replace the text values, and the nearest resistor values are shown along with the colors of the resistor—image by the author.

What if instead of a boring HTML form, we used a little more “bling” to make this process more fun and educational? Here are some ideas:

  1. We can replace the text input forms with sliders.
  2. The sliders can show reasonable ranges for the values of our classroom.
  3. The sliders can be labeled with values corresponding to the concepts we want to teach.
  4. We can show the raw result of resistance and the nearest value of common resistors.
  5. We can also draw the resistor and include an explanation of how the colors of the bands will match the value we need.

You can see the result of that MicroSim here. Try out this MicroSim and compare your user experience with the first form. What did you learn? What are the typical voltage drop values for different colors of LEDs? How much current should we limit an LED to before we burn it out?

Why Computational Thinking Is Still Critical

Images from some of the smaller supporting experiments I did to create the calculator. Image by the author.

The actual code to generate this calculator is not trivial. It was about 130 lines long. I find that GPT-4 stops working well after about 50 lines. I couldn’t just generate this entire MicroSim on a single pass. I first had to generate two supporting functions, such as the function to draw the resistor's image and find the closest resistor to a given resistance value.

GPT-4 is also not good at layout. I had to manually adjust the position of the sliders and the labels and values. But what is wonderful about this example is that GPT-4 did generate most of the code. My job was to describe the components precisely in a step-by-step process and do some cleanup at the very end. This is something that most people could do with a few hours of practice.

The one critical skill was to decompose the problem into a set of smaller pieces and give GPT-4 specific tasks to create and test the individual functions. Decomposition is really at the heart of computational thinking. You can use MicroSims as a way to learn and hone your decomposition skills. Except for tweaking the layout positioning, GPT-4 really does the boring stuff, and you do the fun parts!

The Strategic Impact Of MicroSims on Education

What if the number of MicroSims doubles every year? Assuming there were only 100 at the end of 2023, we still have tens of millions by 2040. The growth rate may be significantly higher—image by the author.

Although I will admit that I had fun building this little MicroSim, I don’t want to minimize the strategic impact this will have on education and learning. I want to emphasize that I didn’t need to be an HTML/JavaScript or animation expert to build this application. I just needed to be patient, work with GPT-4, and understand X and Y positioning to clean up the layout. Any teacher who loves their students will be motivated to learn these skills.

The conclusion is that the number of people who can build these tools will skyrocket. Once we build a foundation library, the productivity of new tool developers will continue to increase. The number of MicroSims will follow exponential trend lines, doubling every few months. This will work just like Moore’s Law. That means that even a conservative doubling yearly will give us tens of millions of MicroSims by 2040. I think that, in reality, we will reach the million MicroSim level in under five years. Does anyone want to share your prediction? Remember that tools like GPT-4 will only become more powerful over time.

Note that in the chart above, the vertical axis is a log scale. That means that a straight line shows exponential growth.

If you are still skeptical, remember that today’s LMS systems are horribly primitive. They still use tabular data representations of knowledge and don’t have the power to store embeddings of ten million MicroSims to suggest your next simulation lesson. But just a $100M investment in a knowledge graph of MicroSims could change all this. The future is knowledge graphs for education predicting what MicroSim you should run next. And every one of your last 1,000 MicroSims can be used to drive that suggestion. It will even be able to suggest new MicroSims that are missing from a great learning experience.

Your Next Step: Keep Learning

If you would like to learn more about the incredible impact of MicroSims on education, please watch this video on YouTube below or read the blog, where I summarize my interview with Valerie Lockhart. She has deep insights into how MicroSims will influence learning in our society. She also strongly understands the areas we must work on to make MicroSims have a fair and equitable impact on our students.

Let me know if you have suggestions by contacting me via my LinkedIn.

Have fun everyone!

--

--

Dan McCreary
Dan McCreary

Written by Dan McCreary

Distinguished Engineer that loves knowledge graphs, AI, and Systems Thinking. Fan of STEM, microcontrollers, robotics, PKGs, and the AI Racing League.

Responses (1)