Using GenAI to Create Learning Graphs

Data Structures for Hyper-Personalized Lesson Plans

A screen image of a sample learning graph for teaching computational thinking with MicroPython that was generated by the powerful new OpenAI o1-preview with advanced reasoning cababilities. Image by the author.

I have been playing around with the new OpenAI models that do reasoning (o1-preview and o1-mini). I have been blown away by their ability to perform complex tasks with high precision. First, I have used them to create classroom micro-simulations based on our p5.js templates (thank you, Val Lockhart and Troy Peterson). But in recent weeks, I have also been using it to generate lesson plans and learning curricula. In my latest effort, I instruct these new language models to create complete, detailed learning graphs for high school and college courses.

In this blog, I will introduce you to my methods of using GenAI and reasoning models to create learning graphs and give you links to examples of how reproduce these results for any classroom or training course.

Background on Learning Graphs

A sample if a directed graph that illustrates concept depencies. Image by the author.

Learning graphs store the concepts taught in a course and their dependencies as a graph data structure, where concepts are vertices in a graph and prerequisites for learning one concept are stored as edges to other concepts. Here is an example of a small dependency graph for arithmetic.

Note that Numbers are a foundational concept that needs to be understood before you can master Addition, Subtraction, Multiplication, and Division. Once these four concepts have been learned, you can claim to understand arithmetic.

Learning graphs are essential for building hyper-customized lesson plans. If a student already understands a concept, you can assume they don’t need to relearn this concept in a new lesson. By building chatbots that ask background questions, AI can generate lesson plans that include multiple media, including text, quizzes, equations, diagrams, figures, images, animations, simulations, and interactive stories. My prior work shows that using the proper prompt templates, even large, complex lesson plans can be customized to the needs of students. However, a learning graph is essential for knowing what concepts to include and in what order they should be presented.

I have been working with Sharat Batra at the University of Minnesota and we have created an example of a learning graph for an undergraduate circuits course that illustrates these concepts.

Steps to Generate a Learning Graph

Unfortunately, even the most powerful models like OpenAI o1-preview can’t generate a high-quality learning graph in a single pass. I have created a process that uses the following steps:

1. Concept Enumeration: From a detailed description of the course, generate a list of about 150 concepts within the course.
2. Concept Dependencies: From this list, for each concept, generate a list of the other concepts in the course on which this concept depends.
3. Concept Taxonomy: Once you have this graph, it is valuable to know the types or categories of concepts within the course. We typically generate a high-level taxonomy of seven to ten classifier concepts.

Once we have generated these artifacts, we need to be able to preview them in a tool to perform cleanup. I have tried several tools, such as p5.js, D3.js, vis.js, sigma, and Cytoscape. My favorite tool so far is vis.js since its out-of-the-box behavior is close to what we need to view the learning graphs.

Once we have selected a graph visualization library, o1-preview can generate a web application to view your learning graph. I use four files in a folder for each web application:

1. A JSON or CSV file to store the graph
2. An index.md file that describes the graph and has links to the data and application.
3. An HTML template that stores the UI components
4. A JavaScript file that stores JavaScript code

I have some examples on a our Learning Graphs microsite here:

Learning Graphs

This site also has sample prompts and sample vis.js applications created using large-langauge models.

Tips for Viewing/Editing Learning Graphs

An example of pinning foundational concepts on the left and goals on the right in a learning graph. These nodes use a group code and use a default vis.js group color theme. Image by the author.

I have learned a few things about the tools we need to manage learning graphs.

1. Pin Foundational Concepts On the Left — you can label foundational concepts with a group of “1” and then place this group on the left edge of the graph. Turning off the force-directed graph physics engine only for the horizontal X-dimension is an excellent way to do this. Using x=-400 is one suggestion. I use square boxes to indicate a foundational concept.
2. Put Learning Goals on the Right — you can do the same trick for your goal concepts — which are learning objectives for a course — and place them on the far right site of the graph at x=400.
3. Color and Shapes — I used taxonomies to see patterns. Use a bright pallet and shapes if you are working with staff members who are color-blind. Vis.js will supply default colors for different groups, but you can also hard-code colors and shapes for given concepts.
4. Cleanup Scripts — I use LLM extensively to generate small Python programs that will clean up the data. I use both CSV files and the “native JSON” format for vis.js which the models seem to understand well. For example converting a CSV into JSON is illustrated here.
5. Legends — I have found many trade-offs of placing legends as part of the graph or part of the outer HTML page that encloses the graph canvas. You can see an example of the HTML table legend on the MicroPython for kids site here.

Note that all of the samples here are covered under creative commons licenses. You are free to reuse them in your classrooms but you can’t resell them for profit.

Conclusion

Knowledge representation is the hardest part of any AI system. A directed concept graph is the best data structure for supporting understanding of course concepts and aiding in hyper-personalizing lesson plans to meet each student’s needs.

Although generating learning graphs was possible in the past, the new reasoning models make it necessary to break tasks into small tasks. My experience is that just four of the right prompts will generate a high-quality first draft of a learning map with up to 200 concepts. I have found that these prompts take several minutes to return. Note that the current version of OpenAI o1-preview limits us to 50 prompts per week. So we have to be very careful about when to use this powerful tool.

I am interested in your feedback. What courses would you like to see learning graphs for? Can you generate student-facing suggested course “Journey Maps” from these graphs? How valuable is clustering in collapsing and expanding clusters of concepts? What other visualization tools would you like to see?