Tag: programming

Posted on

The Biology of Oxygen: Simulate Oxygen in the Body

Screenshot of the Biology of Oxygen interface showing the oxygen circulation simulator settings and output graphs

In this Click & Learn, you can follow the journey of oxygen from the air we breathe to every cell in our body, where it is vital for producing energy and maintaining the delicate balance of life-sustaining processes.

A3MG developed this interactive working with content producers and designers at HHMI BioInteractive. A3MG programmed the UI/UX, simulator, interactive graphs, and accessibility elements. This project has been designed to comply with the WCAG 2.1 AA accessibility guidelines.

Client: Howard Hughes Medical Institute

Posted on

Accessibility Remediation

Screenshot of the Model Builder app interface

A3MG was hired to remediate an existing product produced by another company. From color contrast failures to improper semantic markup and element labeling, we were able to fix and greatly improve the accessibility of this product to meet WCAG 2.1 AA guidelines.

Client: Howard Hughes Medical Institute

Posted on

How Can We Measure Elephant Populations?

Screenshot of the Elephant Census interactive showing the Count Elephants tool tab.

In this interactive, students use tools to simulate how scientists collected and used sample data to estimate elephant population sizes.

Elephant Census

A3MG developed this interactive working with content producers and designers at HHMI BioInteractive. A3MG designed the UI/UX, programmed the “Measure Area” and “Count Elephants” tools, and accessibility elements. The data students collect with the tools is compiled into the printable “Data Tables” tab where students can analyze further.

This project has been designed to comply with the WCAG 2.1 AA accessibility guidelines.

Client: Howard Hughes Medical Institute

Posted on

Modeling Disease Spread

Modeling Disease Spread Outbreak Simulator Screenshot showing simulator board, data table, and interactive graph.

This interactive features a disease spread simulator, including a step-by-step tutorial mode. An advanced epidemic simulator allows users to input variables and graph the results automatically.

Modeling Disease Spread

A3MG developed this interactive working with content producers and designers at HHMI BioInteractive. A3MG programmed the UI/UX, simulators, interactive graphs, and accessibility elements.

This project has been designed to comply with the WCAG 2.1 AA accessibility guidelines.

Client: Howard Hughes Medical Institute

Posted on

Energy Flow through Ecosystems

Energy Flow Screen Shot 1
Energy Flow Screen Shot 2

This Click & Learn traces the flow of energy from the Sun all the way to cells within organisms. The embedded questions and calculations guide students’ understanding of how energy is distributed through a variety of ecosystems.

View the interactive

A3MG worked with content producers at HHMI BioInteractive and provided UI/UX design and programming.

This project has been designed to comply with the WCAG 2.1 AA accessibility guidelines.

Client: Howard Hughes Medical Institute

Posted on

Bacterial ID Virtual Lab

Bacterial ID Virtual Lab screenshot

In this lab, students prepare and analyze virtual bacterial DNA samples. In the process, they learn about several common molecular biology methods, including DNA extraction, PCR, and DNA sequencing and analysis. These methods are applicable in a wide variety of settings, including scientific research and forensic labs.

Bacterial ID Virtual Lab

Originally developed by A3MG in 1999, the virtual lab was modernized in 2023 to work on phone-sized devices and improve its accessibility.

Client: Howard Hughes Medical Institute

Posted on

Interactive Exploration of Coral Bleaching

Coral Bleaching interactive screenshot 1
Video player interface with timeline markers indicating additional information
Coral Bleaching interactive screenshot 2
Additional information opened below the video player

This interactive animation about coral bleaching provides stop points at which students can further explore the material through additional text and illustrations, videos, questions, and simple interactive widgets.

Interactive Exploration of Coral Bleaching

Working with content producers at HHMI Biointeractive, A3MG designed and programmed this customized video player and content pages.

This project has been designed to comply with the WCAG 2.1 AA accessibility guidelines and includes video subtitles and an audio description (AD) version of the animation.

Client: Howard Hughes Medical Institute

Posted on

Niche Partitioning and DNA Metabarcoding

Niche Partitioning screenshot 1
Niche Partitioning screenshot 2
Example of an interactive drag and drop activity

This interactive explores niche partitioning, a mechanism that enables similar species of animals to coexist. It features drag and drop activities, quizzes and freeform responses, a printable progress page, and the ability to save progress to the cloud using Google Sign In.

View the interactive

A3MG worked with content producers at HHMI BioInteractive and provided UI/UX design and programming.

This project has been redesigned to comply with the WCAG 2.1 AA accessibility guidelines.

Client: Howard Hughes Medical Institute

Posted on

Interactive Video with Quiz

Screenshot of the Interactive Video interface with video title: The effects of fungicides on bumble bee colonies.
Screenshot of the Interactive Video quiz panel titled: What do you think?

A3MG designed and programmed this customized video player that features interactive quizzes for HHMI BioInteractive short films.

Interactive Case Study for The Effects of Fungicides on Bumble Bee Colonies

Embedded quiz modules test students’ understanding as they watch the video exploring whether fungicides play a role in the decline of bee populations. 

This project has been redesigned to comply with the WCAG 2.1 AA guidelines and includes screenreader accessibility, subtitles, and an audio description (AD) version of the film.

Client: Howard Hughes Medical Institute

Posted on

Interactive Exploration of How We Get Our Skin Color

Screenshot 1 showing the video player interface
Video player interface with timeline markers indicating additional information
Screenshot 2 showing a content page with interactive widget
Additional information opened below the video player

This interactive animation about the biology of skin color provides stop points at which students can further explore the material through additional text and illustrations, videos, questions, and simple interactive widgets.

Interactive Exploration of How We Get Our Skin Color

Narrated by the world’s leading authority on the evolution of human skin color, Dr. Nina Jablonski, this animation describes how and where melanin is produced in our cells and what factors affect our skin color.

Working with content producers at HHMI Biointeractive, A3MG designed and programmed this customized video player and content pages.

This project has been designed to comply with the WCAG 2.1 AA accessibility guidelines and includes video subtitles and an audio description (AD) version of the animation.

Client: Howard Hughes Medical Institute