The Elements Revealed: An Interactive Periodic Table
This is a clickable periodic table, by Davide Castelvecchi at Scientific American (SA).
<?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>