Back to interactive PSE

Process

Initially this project was set up to display various models in a static state.

However, the sheer amount of information overwhelmed students with having to study a mass of graphics, which had less of an educational effect.

By creating an interactive application instead, students had a better understanding of the information presented and achieved greater learning results. The interface I developed would adapt at any time during use of the application in all aspects to the selection made.

Interface and functionality

I produced the matrix with a function that allowed students to select elements using hints and indicators regarding layers and group of elements, and individual names.

PSE-Matrix-Anima

Via the search box, students can search for any given element by its name…

Search

Students can switch between various display modes at any time.
Mode-switcher
There are altogether four display modes that visualize various models to enhance the learning experience:

  1. Atomic mode, showing nucleus and electrons
  2. Atomic mode, showing nucleus, electrons, and layers
  3. Classic Bohr model
  4. Diagrammatic mode: the PSE in circular form

The first two modes are simplified in their presentation, despite their complexity.

Atom showing electrons

Atom showing electrons

Bohr model

Bohr model

Atom and electrons on layers

Atom and electrons on layers

Diagrammatic display of PSE

Diagrammatic display of PSE

I further developed a sliding scale system. The scales appear at the bottom of the screen, are interconnected, and represent the number of electrons, protons, and neutrons.

When students use the sliders, they will learn how amounts of one atom correlate to the other two.

Scala