JSXGraph Use in Doenet
David Flenner
College of Charleston, Department of Mathematics, 66 George St, Charleston SC 29424
Abstract
This discussion will introduce the audience to a product called Doenet. Doenet is a resource instructors can use to create interactive assignment webpages for their students, featuring a variety of components. A particularly attractive aspect of these webpages is that they are created in an accessible manner, ensuring that any content is compatible with screen reader software and permitting equitable access to assignments for all students.
When creating a Doenet interactive page, the author can insert nicely formatted mathematical formulae using MathJax. It is also possible to include questions for the student to answer in various formats, such as open-ended, multiple-choice, essay-style, and others. The page can also be configured to grade the student’s answers to these questions and, where desired, provide feedback on incorrect responses. Another component that can be included in Doenet pages is interactive graphs that students can manipulate and learn from visually. It is also possible to grade these graphical questions as well.
After being introduced to this platform recently at a math conference, what stood out to me was that Doenet’s interactive graphs use JSXGraph as their backend. As someone with experience in both projects, I find it important to introduce users in both communities, as current JSXGraph creators will find it especially easy to create these interactives within Doenet. In my discussion, I will demonstrate how to get started with Doenet, what you can do with it for you and your students, and how the interactive JSXGraph components are created.
In particular, I will walk the audience through creating a basic Doenet webpage and demonstrate how to build it using basic components. Together, we will create a simple page that asks the user a question, grades the question, and provides helpful feedback on incorrect responses. We will then add a graph to our page, which will be the focal point, as these graphs will be of greatest interest to the JSX community. I will demonstrate how to create the graph, while highlighting the similarities between the Doenet XML syntax and the JSXGraph JavaScript syntax. Graph components are created in Doenet using XML tags, rather than calls to board.create(). There are limitations, then, on what you can create with Doenet, but you will find that building a basic Doenet page is very similar to standard HTML programming.
These interactive webpages create an engaging way for students to interact with their lessons. Online homework systems are often limited by the existing questions and typically request only a single answer for each question. A well-structured Doenet interactive webpage often requires students to walk through individual steps toward a solution, insisting that they answer many small questions in succession that lead up to the answer, forcing them to think about the process they are learning rather than jumping to a solution. This design can make students’ choice to use AI tools to answer their homework less attractive.
At the conclusion of the presentation, you should leave with the confidence and ability to create your own Doenet interactive webpages for use in your own classes.