Communication Cite This: J. Chem. Educ. XXXX, XXX, XXX−XXX
pubs.acs.org/jchemeduc
A Digital Periodic Table That Instructors Can Use in the Classroom To Highlight Elements and Illustrate Periodic Trends Matthew E. Lopper* Department of Chemistry, University of Dayton, Dayton, Ohio 45469, United States
Downloaded via EASTERN KENTUCKY UNIV on February 4, 2019 at 00:36:47 (UTC). See https://pubs.acs.org/sharingguidelines for options on how to legitimately share published articles.
S Supporting Information *
ABSTRACT: This paper describes a responsive, digital periodic table that has been specifically designed as a visual aid for high school or college chemistry classrooms and lecture halls. The periodic table runs in a web browser and can therefore be used in any classroom that has a digital projector and screen. It features click-to-highlight table cells that an instructor can use to draw students’ attention to specific elements and style schemes that can be used to color groups of elements and illustrate periodic trends. The periodic table is written in HTML, CSS, and JavaScript, which gives users flexibility to customize its appearance; its size can be adjusted to fit the screen in the classroom in which it is used. Users can also add additional atomic data to expand the periodic table’s capabilities if desired. KEYWORDS: High School/Introductory Chemistry, First-Year Undergraduate/General, Second-Year Undergraduate, Upper-Division Undergraduate, Textbooks/Reference Books, Atomic Properties/Structure, Periodicity/Periodic Table, Inorganic Chemistry, Organic Chemistry, Physical Chemistry
■
INTRODUCTION The periodic table is an indispensable visual aid for teaching chemistry. While many science classrooms and lecture halls have a permanently mounted periodic table, paper- or cardboard-based posters have limited functionality and mechanical-based periodic tables can be costly and are not easily reconfigured once they have been created and installed. The latter also requires additional electrical infrastructure if the table incorporates lights that allow instructors to highlight elements of interest, such as the periodic table constructed at Michigan State College in the early 1950s and described in this Journal.1 Some classrooms lack a permanently mounted periodic table altogether, leading instructors to pursue other options for bringing a periodic table into their chemistry classrooms. Many high-quality digital periodic tables have been created and are available online (for example, see the Dynamic Periodic Table, the Periodic Table Live!, and the Periodic Table by the Royal Society of Chemistry).2−4 These periodic tables are both dynamic and information-rich, and while they are excellent resources for chemists working from offices and laboratories, they tend to be crowded with information and use small font sizes that would make visibility a problem if the tables were projected in a large classroom as a visual aid for students. Furthermore, many lack certain features that can be useful when presenting chemistry topics to students in a classroom, such as the ability to highlight elements or groups of elements and display periodic trends. © XXXX American Chemical Society and Division of Chemical Education, Inc.
For instructors who teach in a classroom without a suitable periodic table, or for those who would like to make greater use of digital technology and the advantages that it affords, I have created a digital periodic table that runs in a web browser and can be projected onto a screen. It was designed to have a clean appearance that is free of clutter and to be clearly visible even from the back of a large lecture hall. The table is responsive and has been designed to help facilitate classroom instruction by allowing an instructor to draw students’ attention to elements or groups of elements and choose stylistic representations of table cells that can help illustrate periodic trends and explain chemical reactivity.
■
PERIODIC TABLE FEATURES AND FUNCTIONALITY The periodic table is written in HTML, CSS, and JavaScript and runs in a web browser (see the Supporting Information). Each element’s cell in the table contains three pieces of information in the default view: (i) the atomic number is at the top of the element’s cell; (ii) the atomic symbol is in the middle; and (iii) the atomic weight is at the bottom.5 The main menu lies at the top edge of the periodic table, and it controls many of the table’s functions. It is expanded by hovering the mouse over the menu icon or by touching the Received: July 30, 2018 Revised: January 10, 2019
A
DOI: 10.1021/acs.jchemed.8b00616 J. Chem. Educ. XXXX, XXX, XXX−XXX
Journal of Chemical Education
Communication
Figure 1. Screenshot of the periodic table showing elements styled according to their Pauling electronegativity value.
tional atomic data that can be toggled from the main menu return to the atomic weights when clicked a second time. Periodic trends can also be shown using style schemes that are accessed from the main menu. The “Toggle Pauling electronegativities” option replaces the text at the bottom of each cell with the Pauling electronegativity value,7 colors the cell, and pops the cell outward to create a three-dimensional effect (Figure 1). These stylistic transformations are algorithmic and use each element’s electronegativity value to determine the degree of coloring and the degree to which the cell pops out. The algorithm that controls this behavior is annotated within the periodic table html file so a user can customize the coloring and three-dimensional effect. The “Toggle first ionization energies” option replaces the text at the bottom of each cell with the first ionization energy in units of kJ/mol.7 This option uses a style scheme that is also algorithmic. Each cell is colored and popped out to a degree that depends on the value of the element’s first ionization energy. The algorithm that controls this behavior is annotated within the periodic table html file and can be customized by the user. The “Toggle covalent atomic radii” option replaces the text at the bottom of each cell with the covalent atomic radius in units of picometers.7 This option uses a style scheme that generates a circular depiction of each atom in the background of its cell that is sized according to the atom’s covalent atomic radius. The algorithm that controls this behavior is annotated within the periodic table html file and can be customized by the user. All selectable table content and style schemes can be shown in any order and from any state of the periodic table. In other words, the table does not need to be reset to select new style schemes. Each new scheme that is selected replaces the one that was selected before it. Furthermore, the click-to-highlight table cell function is preserved in all style schemes. If an element is highlighted and a new style scheme is selected,
menu icon if using a touchscreen display. The periodic table includes labels for groups and rows, as well as labels for the transition elements and the lanthanides and actinides. Users can select either the IUPAC-recommended 1−18 group notation or the A (main group elements) and B (transition elements) group notation using the main menu. The core feature of the periodic table is its click-to-highlight table cell function. Clicking an element turns its cell yellow. Clicking the element again restores the cell’s original color. Highlighting can also be toggled for entire groups of elements by clicking the group labels, the row labels, or the labels for the transition elements, the lanthanides, or the actinides. Highlighting can be toggled for all the main group elements at once using the main menu. There is no restriction on the number of cells that can be highlighted at any given time, and all highlighting can be removed at once using the “Remove all highlighting” function found on the main menu. An alternate color scheme can be selected from the main menu that colors metals gray, nonmetals brown, and metalloids blue. The clickto-highlight table cell function is preserved in that color mode as well. The code that controls the cell coloring is annotated within the periodic table html file so users can change the colors to suit their individual preferences by editing the html file in a simple text editor. Additional atomic data can be shown in the table cells. When selected from the main menu, the additional data is displayed at the bottom of the cell and replaces the text that had been displayed at that location (which would be the atomic weights in the default view). The “Toggle partial electron configurations” option shows the outermost occupied atomic orbitals for each element.6 The electron configurations are abbreviated by necessity so they will fit within the table cells and be large enough to ensure good visibility in a large classroom. The partial electron configurations and all addiB
DOI: 10.1021/acs.jchemed.8b00616 J. Chem. Educ. XXXX, XXX, XXX−XXX
Journal of Chemical Education
Communication
elements on the periodic table to help direct their students’ attention, and an instructor can make use of the built-in style schemes to help explain chemical reactivity and illustrate periodic trends. The html file is annotated to help users customize the code to suit their individual needs and preferences.
clicking the element to remove the highlight from that cell will result in a cell color that is appropriate to the new style scheme, not the one that had been in place when the element was first selected for highlighting. For example, upon first opening the periodic table all of the table cells are white. Clicking on the cell for carbon will turn that cell yellow. If the user then toggles the Pauling electronegativity values on, the table cells will be colored purple and popped out to show the periodic trends in electronegativity, but carbon will remain highlighted in yellow. If the user then clicks on carbon to remove the yellow highlight, the cell for carbon will become purple to a degree that is appropriate for its electronegativity, even though the cell had been white when it was first clicked to apply highlighting. The highlight function works in this way for all of the style schemes. Last, atomic emission spectra for hydrogen and helium can be shown using the “Show spectra” option on the main menu. These digitally produced spectra open in a modal window and approximate a continuous electromagnetic radiation spectrum, a hydrogen line spectrum, and a helium line spectrum. Clicking on the “X” in the upper-right corner of the modal window or anywhere outside of the modal window will close it. Note that these spectra are digital approximations and are intended to be used solely for illustrative purposes in the classroom.
■
■
ASSOCIATED CONTENT
S Supporting Information *
The Supporting Information is available on the ACS Publications website at DOI: 10.1021/acs.jchemed.8b00616. Periodic table for classroom use (ZIP)
■
AUTHOR INFORMATION
Corresponding Author
*E-mail:
[email protected]. ORCID
Matthew E. Lopper: 0000-0001-7211-1437 Notes
The author declares no competing financial interest.
■
REFERENCES
(1) Dutton, F. B. A Lecture Room Periodic Table. J. Chem. Educ. 1951, 28 (2), 110. (2) Dayah, M. Ptable: The Interactive Periodic Table. https:// ptable.com (accessed Jan 2019). (3) JCE Staff. The New Periodic Table Live! J. Chem. Educ. 2008, 85 (1), 22. (4) Royal Society of Chemistry. Periodic Table. http://www.rsc.org/ periodic-table (accessed Jan 2019). (5) Los Alamos National Laboratory. Periodic Table of the Elements: LANL. http://periodic.lanl.gov (accessed Jan 2019). (6) Zumdahl, S. S.; Zumdahl, S. A.; DeCoste, D. J. Chemistry, 10th ed.; Cengage Learning: Boston, MA, 2016; p 282. (7) Rumble, J. R. CRC Handbook of Chemistry and Physics, 99th ed.; CRC Press: Boca Raton, FL, 2018. http://hbcponline.com (accessed Jan 2019).
USING THE PERIODIC TABLE
Instructors who wish to use the periodic table can save the Periodic_Table.html file (see the Supporting Information) on their classroom computer or on a removable storage device that can be brought to the classroom, open it using a web browser (Chrome or Firefox is recommended), and project it onto a screen using a standard digital projector. Displaying the table using the browser’s full screen mode is recommended in order to maximize its visibility. The code is entirely selfcontained within the html file and requires no external images, data, or library files to function. An Internet connection is not required to use the periodic table in a classroom because the html file is meant to be run directly from a classroom computer or laptop. Various aspects of the periodic table, such as the cell height, font sizes, and row spacing can be modified using a simple text editor to allow the entire periodic table to fit to any particular combination of digital projector and screen, and the main menu and JavaScript controls are flexible so users can add their own customized style schemes or add additional atomic data to the table if desired. The HTML, CSS, and JavaScript have been annotated in the file to help users customize any aspect of the table that they wish to modify. I have used the periodic table with undergraduate students in both a small classroom setting and in a large lecture hall. Students report that the table fonts are easy to see even from the back of the room and the colors provide enough contrast to clearly see the periodic trends when the style schemes are selected.
■
CONCLUSIONS In this paper, I have described a responsive, digital periodic table for use in a high school or college chemistry classroom that otherwise lacks a suitable periodic table. The periodic table is entirely self-contained in a small, highly portable html file (see the Supporting Information) that can be stored on a classroom computer or portable storage device, run through a web browser, and projected onto a screen. Its key features allow an instructor to highlight specific elements or groups of C
DOI: 10.1021/acs.jchemed.8b00616 J. Chem. Educ. XXXX, XXX, XXX−XXX
