Periodic Table Tool

Periodic Table Tool#

Tags: educator how-to

You can create an interactive periodic table of the elements to help your students learn about various elements’ properties. In the table below, detailed information about each element appears as the student moves the mouse over the element.

Image of the interactive periodic table

Create the Periodic Table Tool#

To create a periodic table, you need the following files:

  • Periodic-Table.js

  • Periodic-Table.css

  • Periodic-Table-Colors.css

  • PeriodicTableHTML.txt

To download all of these files in a .zip archive, go to http://files.edx.org/PeriodicTableFiles.zip.

To create the periodic table, you need a Text component.

  1. Upload all of the files listed above except PeriodicTable.txt to the Files & Uploads page in your course.

  2. In the unit where you want to create the problem, click Text under Add New Component, and then click Text.

  3. In the component that appears, click Edit.

  4. In the component editor, switch to the HTML tab.

  5. Open the PeriodicTable.txt file in any text editor.

  6. Copy all of the text in the PeriodicTable.txt file, and paste it into the Text component editor. (Note that the PeriodicTableHTML.txt file contains over 6000 lines of code. Paste all of this code into the component editor.)

  7. Click Save.