The Elements Revealed: An Interactive Periodic Table

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/wb/ (C) Ken Webb Thu Mar 15 2012 15:13:56 GMT-0400 (EDT)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: The Elements Revealed: An Interactive Periodic Table
Description: This is a clickable periodic table, by Davide Castelvecchi at Scientific American (SA).
Url: http://www.scientificamerican.com/article.cfm?id=chemistry-the-elements-revealed-interactive-periodic-table
InternalName: 
YoutubeId: 
Keywords: 

My Notes
--------
March 15, 2012
This is a well-done interactive periodical table.
It should be possible to use it with Xholon in some way.

On the technical level::
  It uses HTML tables, where Xholon uses HTML div (table vs tree).
  When you click on a chemical element, it shows an overlay.
    All overlays already exist as divs. They use display:none and display:block to hide and show.
  It uses jQuery.

Some possibilities::
  Use the SA page as a keyboard for creating molecules. It looks like a keyboard.
  Explore the rules of molecular composition, using SA page as a keyboard for elements, and Xholon as a composition engine.

A Workbook page, based on a Khan Academy video, discussed the structure of molecules. That workbook also mentions the SMILES notation for molecules::
  http://www.primordion.com/Xholon/wb/openwb.php?q=rstrucorgmol&t=orgchem
It would be nice to use the SA "chemical keyboard" to create molecules in SMILES notation, that could then be visualised at this site::
  http://www.daylight.com/daycgi/depict
For example, typing "Na" + "Cl" could generate the SMILES string "[Na][Cl]", which www.dylight.com would display as a simple graphic.
Wikipedia uses the SMILES notation a lot::
  http://en.wikipedia.org/wiki/SMILES

The SA interactive periodic table is in its own frame. To display it by itself on a separate page, right-click on the periodic table, and select "This Frame" > "Open Frame in New Tab" (Firefox 10).
]]></Notes>

<script implName="lang:python:inline:"><![CDATA[
#print "height = 12.34 m"
]]></script>

<script implName="lang:javascript:inline:"><![CDATA[
//print("height = 56.78 meters\n");
]]></script>

<_-.XholonClass>

  <!-- domain objects -->
  <PhysicalSystem/>
  <Block/>
  
  <!-- quantities -->
  <Height superClass="Length"/>
  
</_-.XholonClass>

<xholonClassDetails>
  <Block>
    <port name="height" connector="#xpointer(Height)"/>
  </Block>
</xholonClassDetails>

<PhysicalSystem>
  <Block>
    <Height>0.1 m</Height>
  </Block>
</PhysicalSystem>

<Blockbehavior implName="lang:python:inline:"><![CDATA[
# This works if pasted in as a last child of Block.
height.incVal(0.02)
print("Python wants something to do. Height:" + str(height))
]]></Blockbehavior>

<Blockbehavior implName="lang:javascript:inline:"><![CDATA[
// This works if pasted in as a last child of Block.
height.incVal(0.02);
print("JavaScript wants something to do. Height:" + height + "\n");
]]></Blockbehavior>

<Blockbehavior implName="lang:webEditionjs:inline:"><![CDATA[
this.bindPorts(this.parent());
this.height.incVal(0.02);
print("JavaScript wants something to do. Height:" + this.height.attr('val') + "\n");
]]></Blockbehavior>

<Blockbehavior implName="lang:bsh:inline:"><![CDATA[
// This works if pasted in as a last child of Block.
height.incVal(0.02);
System.out.print("Java/Beanshell wants something to do. Height:" + height + "\n");
]]></Blockbehavior>

<Blockbehavior implName="lang:jruby:inline:"><![CDATA[
require 'java'
# This works if pasted in as a last child of Block.
$height.incVal(0.02)
puts "Ruby wants something to do. Height: #{$height}"
]]></Blockbehavior>

<Blockbehavior implName="lang:groovy:inline:"><![CDATA[
// This works if pasted in as a last child of Block.
height.incVal(0.02);
System.out.print("Groovy wants something to do. Height:" + height + "\n");
]]></Blockbehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Block</title>
    <rect id="PhysicalSystem/Block" fill="#98FB98" height="50" width="50" x="25" y="0"/>
    <g>
      <title>Height</title>
      <rect id="PhysicalSystem/Block/Height" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
    </g>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>