Skip to content

Open Source Tools

Prompt

Please assist me by conducting research on the availability of tools for creating consistent, interactive infographics that teachers can use within intelligent textbooks.

Our goal is to develop a streamlined approach to creating detailed, interactive infographics for textbooks that do not require advanced programming skills. We hope to utilize generative AI to make creating infographics more accessible for all teachers. Our infographics need to have clickable or hover regions that we can monitor to gauge whether students are using and learning from them. The current best practice is to use tools like D3.js and p5.js to create infographics. However, these JavaScript libraries are too complex for many teachers with no programming background.

We also need these infographics to follow simple rules to make them consistent with the other infographics on the websites. They should all have a consistent background color and logging of what the students are clicking on

Please analyze the free tools that can make the process of creating consistent interactive infographics easier for teachers. Return a report of these tools and how they can be used to make low-code/no-code infographics. We are interested in mostly free and open-source tools.

Initial Response

To ensure I provide the most useful recommendations, could you please clarify the following:

  1. Do you need the tools to support embedding in existing platforms like Moodle, Google Classroom, or custom LMSs?
  2. Is there a specific data format or structure the teachers will be using (e.g., spreadsheets, CSVs, JSON)?
  3. Should the tools support exporting the infographics as standalone HTML/JS files or integrate directly with an AI workflow?
  4. Are there any specific accessibility or device compatibility requirements (e.g., mobile-friendly, screen reader support)?

This will help me tailor the research to fit your goals more closely.

You said:

  1. The tools are not required to work with any existing LMS system like Moodle, although support of xAPI is a bonus.
  2. . There is no specific data format that the teachers will be using; however, standards like JSON are nice
  3. Our hope is that the tools can generate standalone HTML/JS but allow hooks to support user logging and event logs
  4. There are no accessibility or device requirements - any web browser might be used

ChatGPT said:

Thanks for the clarification. I’ll research free and open-source tools that enable teachers to create consistent, interactive infographics with low-code or no-code approaches. These tools will support hover and click interactions, event logging capabilities, and optionally export standalone HTML/JS for integration into intelligent textbooks. I’ll also look for tools that allow customization for visual consistency and offer hooks for tracking student interactions.

I’ll get back to you with a report summarizing the best tools, how they work, and how they can meet your specific goals.

Results

Thanks for the clarification. I’ll research free and open-source tools that enable teachers to create consistent, interactive infographics with low-code or no-code approaches. These tools will support hover and click interactions, event logging capabilities, and optionally export standalone HTML/JS for integration into intelligent textbooks. I’ll also look for tools that allow customization for visual consistency and offer hooks for tracking student interactions.

I’ll get back to you with a report summarizing the best tools, how they work, and how they can meet your specific goals.

Interactive Infographic Creation Tools for Teachers

Creating consistent, interactive infographics for digital textbooks can be made much easier with a variety of free or open-source tools. Many of these solutions allow teachers with little or no programming background to design engaging visuals that include clickable or hoverable regions for student interaction. Below we outline several tools and approaches (primarily low-code or no-code) that can help educators develop interactive infographics, with an emphasis on consistency (e.g. common styles like background colors) and support for logging student interactions (e.g. via xAPI or similar).

H5P – Open-Source Interactive Content Creation

Example: A laboratory safety infographic enhanced with interactive hotspots (red “plus” icons) that reveal additional information when clicked. Tools like H5P allow teachers to overlay such clickable hotspots on images without coding, turning static diagrams into interactive learning experiences. This ensures students engage with the visual and can access deeper explanations by clicking on points of interest. In H5P, each hotspot can display text, images, or video in a popup, and authors can configure properties like hotspot color to maintain a consistent look across infographics.

H5P is a popular open-source platform for creating interactive learning content through a web-based editor (no coding required). Originally developed for e-learning, H5P provides many content templates that can serve as interactive infographics or diagrams. Key features and benefits of H5P include:

  • No-Code Authoring: Teachers create content using a user-friendly editor in a web browser or via the Lumi desktop app (which allows offline H5P content editing). No advanced programming is needed – interactive elements are added through form inputs and uploads.
  • Image Hotspots and Other Content Types: H5P’s Image Hotspots content type lets you upload an image (e.g. a diagram or map) and place clickable hotspots on it. When students click these hotspots, a pop-up can show explanatory text, images, or even videos. This is ideal for turning a static infographic into an interactive one with additional information on demand. For example, a teacher can create an infographic and use hotspots to explain different parts of a diagram or highlight data points. (H5P also offers other interactive content types that might be useful, such as interactive timelines, quizzes, charts, etc.)
  • Consistency in Design: H5P content types come with a modern, clean design out of the box. Authors can ensure consistency by using the same content type and configuring the same color scheme or icon set for all infographics. For instance, the Image Hotspots tool allows choosing hotspot icon shapes and colors, so all infographics on a site can use a matching style. Additional custom styling (via CSS) is possible if you host H5P on your own website or LMS, enabling consistent background colors or fonts across all infographics.
  • Embedding and Standalone Use: H5P content can be embedded in any webpage or integrated into learning platforms. You can host H5P on platforms like WordPress, Moodle, or Drupal via plugins, or use the H5P.com service for hosting. In all cases, the result is standalone HTML5 content (JavaScript + HTML) that can be viewed in a browser, which fits the requirement of generating standalone HTML/JS for an intelligent textbook.
  • Logging and xAPI Support: H5P content is built with an xAPI (Experience API) under the hood. That means as students interact (e.g. answer a quiz, finish watching a video, or even click on certain interactive elements), H5P can emit xAPI statements that record these events. When H5P is integrated into an LMS like Moodle or other platforms, instructors can track student engagement and responses. For example, if a hotspot activity is structured as a quiz or exploration, you could capture which hotspots the student clicked. (In practice, some H5P content types have more detailed xAPI tracking than others – quiz-type activities report scores, while simple hotspot clicks might require custom handling – but the infrastructure for capturing interactions is there.) Additionally, third-party plugins (e.g. H5P xAPI connectors or LRS integrations) exist to collect detailed interaction logs for H5P content. This makes it feasible to monitor whether students are engaging with the infographic and what they click on, satisfying the requirement for usage tracking.

Overall, H5P provides an easy entry point for educators to create rich interactive infographics. It is free and open-source, and it has an active community sharing content types. By using H5P, a teacher can maintain consistency (using the same templates and style choices for all infographics) and integrate student interaction logging with minimal setup.

Xerte – Flexible Toolkit for Interactive Learning

Like H5P, Xerte is an open-source authoring tool that enables teachers to create interactive learning materials without needing programming skills. Xerte (often referred to as Xerte Online Toolkits) is a browser-based suite that allows assembling content pages with text, media, and interactive components. It’s a bit more of an all-in-one authoring environment for building interactive lessons or modules, but it includes features that work well for infographics:

  • No-Code, Template-Based Authoring: Xerte provides a range of page templates for different interactive activities. For example, there is an “Annotated Diagram” page type specifically designed for images with clickable regions. Using this template, a teacher can upload an image (diagram, infographic, etc.) and define multiple hotspots or zones on the image. Each hotspot can be associated with a label and descriptive text that appears when the student clicks that region. This is very similar in outcome to H5P’s image hotspots: the learner clicks on parts of the image to reveal additional information.
  • Consistent Styling and Layout: Xerte emphasizes consistency by using a template approach. All pages of a given type have a uniform look, and global design settings can be applied. For instance, authors can choose a background color or theme for their Xerte project, ensuring all pages (and thus all infographics within that project) share the same background and font style. Even within an interactive image, Xerte allows configuring the highlight style (e.g. choosing the highlight color or shape for the hotspot indicator) – the documentation suggests making a list of preferred color codes to reuse for consistency across projects. This way, a set of infographics created in Xerte can all adhere to a common visual style.
  • Accessibility and Device Compatibility: Xerte has strong built-in support for accessibility (e.g. high-contrast mode, alt text for images, keyboard navigation). This means infographics created with Xerte’s templates can be more accessible to all learners by default. The content is web-based HTML5, so it will work on modern web browsers without additional plugins.
  • Tracking Student Interactions: Xerte projects can be deployed in various ways (as a standalone web link or embedded object). It supports integration standards like SCORM for LMS tracking, and newer versions have options for xAPI (via an LRS) in some cases. According to instructional designers’ experiences, Xerte allows authors to track learner engagement and even build in quiz questions or decision paths to monitor progress. For a simple interactive infographic (like an annotated image), Xerte could record which hotspots were clicked if set up as a graded interaction. In scenarios where it’s not a formal quiz, teachers could still infer engagement (e.g. Xerte might report that the page was viewed or completed). Each Xerte project also generates a unique URL, making it easy to share and possibly wrap in an LMS or an LRS for capturing analytics.
  • Advanced Interactivity and Logic: Xerte is quite powerful in that beyond simple hotspots, it supports branching scenarios, quizzes, and even gamified elements (timers, scores) if needed. This might be beyond the basic infographic, but it means a teacher could create an interactive infographic that includes quiz questions or an exploratory path. For instance, an infographic could have hotspot questions that ask students to identify certain parts – Xerte’s flexibility would allow building that with no coding. This tool might have a slightly higher learning curve than H5P for some, but it also offers more customization if needed (including the ability to add custom HTML or scripts for further tailoring, though that requires some tech skill).

In summary, Xerte is another excellent free, open-source option for low-code interactive content creation. It’s well-suited for building consistent, self-contained interactive textbook elements. Teachers can use its templates (like the annotated image hotspot) to quickly turn images into interactive infographics, with the added benefits of accessibility features and potential tracking of student interactions. Xerte and H5P have overlapping capabilities, and in practice many educators use them complementarily – H5P for quick embeds and Xerte for more elaborate interactive lessons. For the specific use-case of interactive infographics, both are viable: H5P might be a bit simpler to get started, whereas Xerte offers deeper customization and control over the learning experience.

Charticulator – Custom Charts and Infographics Without Coding

While H5P and Xerte focus on broader e-learning content, Charticulator is a specialized tool for designing custom data visualizations (charts) in a no-code manner. Developed by Microsoft Research, Charticulator is free and open-source software that runs in the browser. Its primary use is to let users create bespoke charts or graphical representations from data without writing D3 or JavaScript code.

  • Drag-and-Drop Chart Design: In Charticulator, you load a dataset (e.g. from a spreadsheet or CSV) and then visually drag and position graphical elements to represent the data. It differs from conventional chart tools by not limiting you to predefined chart types. You can design unique infographic-style charts (like custom maps, pictograms, multi-layered visuals) using its graphical interface. This is useful for teachers who want a specific visual to illustrate a concept but don’t have the coding expertise to craft it in D3/p5. For example, a teacher could create an interactive bar chart where each bar is an icon, or a custom timeline with unique markers – all without coding, by using Charticulator’s constraints-based design system.
  • Interactive Outputs: Charticulator allows exporting the created visualization as standalone HTML/JavaScript (or as an SVG image). The HTML export uses D3.js under the hood to render the chart, meaning the result can include interactive behaviors like tooltips, hover highlights, or basic click interactions. For instance, if you design a chart with Charticulator, by default it might support hovering to show data values or clicking legend items to filter – this depends on how it’s set up. While it’s not as full-featured as a hand-coded D3 graphic, it does produce a self-contained interactive infographic piece that can be embedded in a webpage or intelligent textbook. Teachers can therefore create a data-driven infographic and drop the HTML/JS output into their site.
  • Reusable Templates for Consistency: Charticulator designs can be saved and reused. If an educator or design team creates a particular style (color scheme, font, layout) for charts, they can replicate that style across multiple charts by reusing the Charticulator template or starting from a previous design. This helps ensure all infographics in the textbook have a consistent visual identity. Since you have fine control over design in Charticulator, you can match the background color, typography, and other style elements to whatever theme your textbook uses.
  • No Programming Skill Needed: The major advantage is democratizing what traditionally required coding. Charticulator was explicitly created to “enable the creation of bespoke interactive chart designs without the need for coding”. It sits between template-driven chart tools and full programming, giving a lot of flexibility through a visual interface. Teachers can achieve near D3-level custom visuals with far less effort. That said, mastering Charticulator does require learning its interface and concepts (like “glyphs” and “constraints”), but there are tutorials and a gallery of examples to draw inspiration from.
  • Integration and Logging: By itself, Charticulator does not provide learning analytics or xAPI logging – it’s primarily a visualization designer. If you embed a Charticulator-produced chart into a page, tracking clicks or hovers would require adding custom JavaScript listeners to the embedded chart code. This is possible (since the output is HTML/JS, a developer could instrument it), but it isn’t a built-in feature. Charticulator is best used in combination with other frameworks: for example, you might embed a Charticulator chart inside an H5P “Interactive Book” or within a Xerte page. The surrounding framework (H5P, Xerte, or your website code) could then handle capturing events. If detailed student interaction logging on the chart is crucial (e.g. which parts of the chart they clicked), some custom coding would be needed. However, if the main goal is an interactive visualization (with tooltips, etc.) that looks consistent and is easy for a teacher to create, Charticulator is a powerful option.

In essence, Charticulator expands the range of infographics educators can create by enabling custom data visualizations without coding. It complements the likes of H5P and Xerte: those tools might cover interactive text/image content, while Charticulator covers data-heavy infographics (charts, graphs) in a teacher-friendly way. Using Charticulator, one can maintain stylistic consistency and embed the resulting charts into broader interactive content. The learning curve is a bit higher than point-and-click quiz tools, but it remains far easier than coding from scratch in D3 or p5.

Generative AI for Infographic Design (Emerging Tools)

Because the question specifically mentions leveraging generative AI to simplify infographic creation, it’s worth noting some recent developments in this space. Generative AI can assist teachers by automating parts of the design or coding process for interactive infographics:

  • AI-Powered Infographic Generators: Some commercial tools have introduced AI features that generate infographics from a prompt or dataset. For example, Infogram (a popular online infographic and chart maker) has an AI Infographic Maker that can suggest layouts and create visuals based on a short description or data input. This AI helps users with little design experience quickly produce a professional-looking infographic, which can then be tweaked manually. Similarly, other services like Piktochart have announced AI features to create draft infographics from text. These platforms often support interactivity (Infogram, for instance, allows charts and maps that are interactive, and you can embed links or hover tooltips in the infographic). However, such services are typically freemium (not fully open-source), and the AI features are relatively new. They are worth watching as they evolve, because they point toward a future where a teacher could simply describe the infographic they need (“an interactive timeline of World War II events” or “a clickable diagram of the water cycle”) and let AI draft it.
  • Using LLMs to Generate Code or JSON: Another way generative AI can help is by producing the underlying code or configuration for interactive visuals. For tech-savvy teachers, large language models (like ChatGPT) can be prompted to generate D3.js or p5.js code for a given visualization. For instance, a teacher might ask an AI to “create an HTML/JS code for an interactive bar chart with tooltips showing these data points…”. The model can output a starter code which the teacher (or a developer collaborator) could then refine. This still requires some coding ability to implement, but it lowers the barrier by providing a template that the teacher didn’t have to write from scratch. In the context of our low-code tools: one could imagine an AI that generates a configuration file for H5P or Xerte. While not available yet, it’s conceivable to have a system where a teacher says “I have an image of the human heart, label the chambers with hotspots that give definitions,” and an AI could configure an H5P Image Hotspot content automatically (filling in the texts). In short, AI can act as a smart assistant in setting up the infographic.
  • AI for Image Generation and Enhancement: Generative AI (like DALL-E or Midjourney) can also create illustrations or icons to use in your infographic. While this is slightly aside from interactive functionality, a teacher could quickly generate custom graphics (e.g. an original illustration of a historical scene or a scientific diagram) using AI image generators, and then use the above tools (H5P, Xerte, etc.) to make them interactive. This reduces the need for artistic skills or finding stock images, making the whole creation process more accessible.
  • Considerations: When using AI-based tools, keep in mind issues of accuracy and editorial control. AI might accelerate the mechanical steps of creation, but a human expert (the teacher) should review and adjust the content to ensure it meets learning objectives and is factually correct. Also, not all AI-generated solutions will seamlessly integrate with tracking – a generated infographic might still need to be placed inside a platform that logs clicks (or the AI tool itself might offer analytics, as Infogram does with its engagement analytics feature).

Currently, the most teacher-friendly approach is to use the likes of H5P or Xerte for the interactivity and consider AI as a helper to reduce design effort. For example, a workflow might be: use an AI tool to draft a base infographic or gather data, then import that into H5P to add interactive hotspots and ensure the piece follows your site’s style and tracking requirements.

Conclusion

In summary, there are several free or open-source tools available to help educators create interactive infographics with minimal coding:

  • H5P and Xerte stand out as educator-oriented tools that provide templated interactivity (like image hotspots, timelines, quizzes) via graphical interfaces. They enable consistency in design and offer pathways for tracking student interactions (through LMS integration or xAPI). These would allow teachers to enrich textbook visuals with interactive pop-ups, all while keeping a uniform style across the course.
  • Charticulator addresses the need for custom charts and data visuals without coding, letting teachers design unique infographics and export them as standalone interactive graphics. It requires a bit more design effort but opens up possibilities for data-driven content that matches the textbook’s look.
  • Generative AI is an emerging aid – it can streamline the creation process by producing design suggestions or even code, though it’s largely available in commercial tools at present. As AI integration improves, we can expect even more accessible “natural language to infographic” workflows, which could further lower the barrier for teachers.

Using these tools, a teacher can create interactive infographic content that has a consistent appearance (common backgrounds, colors, fonts) and includes the necessary hooks to monitor student engagement (clicks, hovers, quiz answers, etc.). Best of all, the solutions listed prioritize ease of use and are either free or open-source, making them practical for wide adoption in educational settings. By combining such tools with thoughtful design (and perhaps a touch of AI assistance), intelligent textbooks can offer rich, interactive infographics that enhance learning without demanding advanced programming knowledge from every teacher.

Sources:

  • Mendi Benigni, “Using Lumi and H5P to create Easy Images with Hotspots…” – TLT Blog (2022)
  • H5P Documentation – “Image Hotspots” (open-source interactive content type)
  • University of Bath TEL Team – “Exploring Interactive Learning: Xerte and H5P…” (2025)
  • Xerte Community Wiki – “Annotated Diagram page type” (2025)
  • Ajit Jaokar, DataScienceCentral – “Charticulator: Creating Interactive Charts Without Code” (2021)
  • Infogram – “Create Interactive Infographics with AI Generator” (feature page, 2023)
  • H5P Developer Docs – Forum/QA on xAPI and tracking user interactions (demonstrating H5P emits xAPI statements for actions)