Add Molecular and Spectrum Representations in Moodle

Moodle's editor gives users the ability to add 2D and 3D molecular representations, as well as spectral representations. The chemical drawing tool is location on a hidden second row of your Tiny MCE toolbar icons. To find and use the tool, follow the steps below.

  1. Click on [...] (more) option at the end of the first row of the editor toolbar icons.
    Illustration showing where to find the "more" option on the first row of theTinyMCE editor toolbar.
  2. Click on the chemical substance icon on the second row of icons on the TinyMCE toolbar.
    Illustration showing where to find the chemical substance icon on the TinyMCE toolbar, once the second icon row is visible.
  3. A new toolbar will appear with icons for creating your molecular structure. Once you have created your structure, click the button to Insert image in your text and media area.
    Illustration of the TinyMCE molecule drawing tool in action.
     

And alt text for accessibility

Once you have your molecular structure, there is one more step. You need to make the image accessible who cannot view the image for some reason (i.e. vision impairment, connection issues, etc.).

  1. Select the molecular structure you just created. A new toolbar will appear. Select the image option from that toolbar.
    Illustration showing where to select the image option after selecting an image in the TinyMCE editor.
  2. You will see the text, "Chemdoodle PNG" in the box to describe the image for someone who cannot see it. Add a more descriptive description of the drawing you just made.
    Illustration showing where to add the alt tag
  3. If desired, adjust the image size or alignment.
  4. Save image.
Print Article