The Flame Challenge - Explaining science to an 11-year-old
"We’re asking scientists to answer the question – “What is a flame?” – in a way that an 11-year-old would find intelligible and maybe even fun."
<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/wb/ Sun Apr 01 2012 15:58:47 GMT-0400 (EDT)-->
<XholonWorkbook>
<Notes><![CDATA[
Xholon
------
Title: The Flame Challenge - Explaining science to an 11-year-old
Description: "We’re asking scientists to answer the question – “What is a flame?” – in a way that an 11-year-old would find intelligible and maybe even fun."
Url: http://www.flamechallenge.org/
InternalName:
YoutubeId:
Keywords: Flame
My Notes
--------
How to run the simulation::
Click the Run button above.
Click the Step button in the overlay.
Note the parts of the Lighter and the surrounding Air by hovering the mouse over the image.
Press and release the Spark Generator to create a Flame, and see an answer to the question “What is a flame?”.
This is my entry to the contest::
My entry is more of an interactive process than a specific answer, and it doesn't fit the format categories specified by the contest rules. It's not a text answer, or graphics, or a video. But it does generate an initial text answer, display modifiable graphics, and include the source code to enable further development. The single web page is a self-contained starting point for further exploration.
Please go to:
http://www.primordion.com/Xholon/wb/openwb.php?q=2204836&f=gist.github.com/raw/&s=1
and follow the instructions on "How to run the simulation".
The simulation works best with Firefox (or Chrome, Opera, or Safari), and possibly not at all with Internet Explorer.
**March 26, 2012**
I found this web site today, and it sounds like an interesting challenge. I'll start by collecting and organizing information about flames, which is what a Xholon Workbook is all about. I'll try to sneek up on an answer by working all around it. Since I don't know any 11-year olds, I'll start by trying to understand it myself.
The contest is sponsored by the Center for Communicating Science at Stony Brook University.
The wikipedia article on Flame states::
A flame (from Latin flamma) is the visible (light-emitting), gaseous part of a fire. It is caused by a highly exothermic reaction (for example, combustion, a self-sustaining oxidation reaction) taking place in a thin zone.
If you're at the gas station filling the car with gasoline, you'll often smell a bit of the gasoline in the air even though you can't see it. The smell is just one way of detecting the gasoline. If there's enough gasoline vapor, it could combine with the oxygen that is always in the air, and start a fire. The flame is just the visible part of the fire, sort of like a visible smell.
With this explanation::
fumes are analogous to flame
Warning: Don't try this experiment at home or anywhere else.
A flame is like the air on a hot day. When you look into the distance you might see a mirage. Or you might see distant objects shimmering as pockets of air at different temperatures move around. Moving air pockets also explain why stars twinkle.
We sense the world with our eyes, ears, nose, taste buds, and hands. The air is made up of gasses that we don't usually sense. But if the wind is blowing, we can hear the air whistling and feel it pushing against us. If I wave my hand or a fan in the air on a hot day, I feel the cooling air against my face. Air itself is invisible, but sometimes it produces an effect that we can see. A flame is one of those visible effects. It happens when the air gets very hot and starts to glow.
Maybe flames only seem mysterious because we don't see them very often and they seem to pop out of nowhere. A flame is the only time we directly see the otherwise invisible air.
Anything that gets very hot can start to glow, which means it gives off light. A lightbulb is a good example. If you put your hand near a lightbulb while it's on, you'll feel the heat.
If you place your hand a safe distance above the lighter I have in my hand, you'll feel the heat. We all know that fire produces heat. Well, when the air just above a fire gets really hot, it starts to glow. A flame is just the glowing gases. OK, so what are glowing gases?
A cigarette lighter would be a good prop to have on hand if an 11-year old asks "What's a flame?"::
The little fuel tank, and the spark thingy can both be seen.
It's easy to start it up and see the flame and feel the heat.
The air with its oxygen is, as always, all around. So all the necessaries are there.
A candle might be a good prop, but no one carries these around with them.
A match would work, but the flame is smaller and it doesn't last very long.
Part of the explanation is to talk about the gases that get released when something burns. The flame is the glowing gases.
The whole thing is a self-sustaining process. Heat, in the form of a spark, is required to get the fire going. The fire provides the energy to combine the fuel with oxygen, which produces more heat and releases some gases as part of the fuel/oxygen reaction. The heat from the fire causes the gases to glow. The gases cool off and stop glowing once they're a short distance above the fire. So the flame is only visible just above the hot fire.
Some other good online sources::
http://en.wikipedia.org/wiki/Lighter
http://video.google.com/videoplay?docid=-8592838324889380249 "Lighter Igniting In Slow Motion"
"High speed camera records a cigarette lighter igniting in slow motion."
- I could do something like this in a SVG graphic
The simulation should be simple enough for an 11-year old to modify. There could be different things that could readily be modified, based on the person's level of experience with computers. Possible interactions include::
interactions while the simulation is running, such as clicking or hovering
parameters that can be changed before the simulation runs or reruns
modifications to the JavaScript or other code (this is always possible with a Xholon Workbook)
new behaviors written in JavaScript
modifications to the SVG graphic, or complete replacement with another graphic
coming up with something completely new, something not intended by myself
I want the intended audience to have the option to interact both passively and actively, in multiple ways.
**March 28**
The contest rules require that entries be submitted as text, a bitmap image, or a video. None of these formats really work well for me, because a Xholon Workbook is more of a process than a final product. My simple answer to the "What is a flame" question is only a starting point. It's intended to spark more questions and more exploration, which can be captured in this or other workbooks.
A workbook can be a public place where anyone can modify something.
A trivial change, just to get started and learn that science is a process where you're always building on the work of others, would be to change the colors of objects in the SVG image::
Scroll down to the SVG editor at the end of this page.
Locate the "Fuel (Butane or Naphtha)" title element.
Locate the path element just below the title.
Change the contents of the style attribute. Currently it reads:
style="fill:#98FB98"
where 98FB98 is a six-digit hexadecimal (HEX) number (whatever that is)
OR use your browser's Find capability (Ctrl-F in Firefox) to search for #98FB98
You can use everyday color words, for example try changing it to:
style="fill:red"
You can quickly experiment with colors by changing the color word (or hexadecimal number if you know what those are), and then pressing the Run button at the top of this page (then press Step in the overlay). Repeat this experiment until you find a color you like.
For a list of valid color words (and hexadecimal equivalents), have a look at:
http://www.w3schools.com/cssref/css_colornames.asp
try: Tomato SeaGreen MistyRose DeepSkyBlue
A slightly tougher challenge would be changing the color of the flame. The SVG image uses a linear gradient, which means it combines two colors. Flames can be different colors and color combinations based on the fuel, the content of the air, the temperature of the flame, and so on::
Search for linearGradient and play around with the stop-color
Another simple change would be to modify the text that appears in the textarea at runtime::
Scroll down to the SparkGeneratorbehavior JavaScript editor.
There are two statements that start with "print".
Modify the text between quote marks, and you might come up with the winning explanation for "What is a flame?".
After you change the text, press the Run button at the top of this page (then press Step in the overlay).
Some kids are more tech-savvy and could do a lot more tinkering. For example here's a story from yesterday::
Tech-savvy 8-year-old busts theft ring
http://www.cnn.com/video/?hpt=hp_t3#/video/bestoftv/2012/03/27/kid-uses-app-to-find-stolen-items.wtvf
I spent some time yesterday exploring whether I could make a video as my entry for the contest. I could do it, but because I've never made a video before, it would take me too much time to do it. Here's a first draft of a video script I might use::
11-year-old: What's a flame?
me (noticing a passer-by with a cigarette lighter): Can I borrow your lighter?
me (with the lighter, looking at the 11-year-old):
The air all around us has oxygen in it.
The large colorful part of the lighter has fuel.
The metal part at the top creates a spark if I press on it.
11-year-old: So?
me (pressing on the top of the lighter):
A spark ignites a mixture of fuel and air. The hot gases become visible as a Flame.
me (releasing it):
The hot flame quickly dies when starved of fuel.
Here are a few tools I found that might help make a video (on ubuntu linux)::
Pitivi Video Editor (it's already installed as part of ubuntu)
it assembles and organizes existing video, image, and audio files
RecordMyDesktop (an open-source screen video recorder)
]]></Notes>
<script implName="lang:python:inline:"><![CDATA[
print "What is a flame?"
print "It’s oxidation."
]]></script>
<script implName="lang:javascript:inline:"><![CDATA[
print("What is a flame?\n");
print("It’s the glowing gases when you click on the spark generator.\n");
]]></script>
<_-.XholonClass>
<!-- types of domain objects -->
<PhysicalSystem/>
<Fire/>
<Air/>
<Gas>
<Oxygen/>
</Gas>
<Fuel>
<!-- anything that contains carbon -->
<Gasoline/>
<LighterFluid>
<Butane/>
<Naphtha/>
</LighterFluid>
<Paper/>
<Wood/>
</Fuel>
<Heat> <!-- and/or SourceOfHeat -->
<Spark/> <!-- such as from a lighter -->
</Heat>
<SparkGenerator/> <!-- generates some initial Heat -->
<Flame/> <!-- something in the air that's hot and visible, and located just above a fire -->
<Fume/> <!-- something in the air that smells -->
<Oxidation/> <!-- teacher's answer when Alan Alda asked "what is a flame?" -->
</_-.XholonClass>
<xholonClassDetails>
</xholonClassDetails>
<PhysicalSystem>
<!-- materials required to start and sustain a fire -->
<Air>
<Oxygen/>
</Air>
<Lighter>
<Fuel/>
<SparkGenerator/>
</Lighter>
<!-- the fire itself -->
<Fire>
<Flame/>
</Fire>
</PhysicalSystem>
<Blockbehavior implName="lang:python:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:javascript:inline:"><![CDATA[
]]></Blockbehavior>
<SparkGeneratorbehavior implName="lang:webEditionjs:inline:"><![CDATA[
var svg = $($('div#mySVGDiv > object')[0].contentDocument.getElementsByTagNameNS(svgns, 'svg')[0]);
var sparky = svg.children('g').children('g#SparkGenerator');
var flameSVG = svg.children('g#g3081').children('g').children('path');
sparky.bind( 'mousedown', function() {
print("\nA spark ignites a mixture of fuel and air. The hot gases become visible as a Flame.");
flameSVG.attr('style', 'fill:url(#lg_1)');
});
sparky.bind( 'mouseup', function() {
print("\nThe hot flame quickly dies when starved of fuel.");
flameSVG.attr('style', 'fill:#ffffff');
});
this.detach(); // prevent the behavior from being called more than once
]]></SparkGeneratorbehavior>
<Blockbehavior implName="lang:bsh:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:jruby:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:groovy:inline:"><![CDATA[
]]></Blockbehavior>
<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<!--
The lighter is adapted from a public domain image at:
http://openclipart.org/detail/168937/lighter-yellow-by-eliottnes
The flame is adapted from a public domain image at:
http://www.clker.com/cliparts/8/K/w/h/G/R/flame.svg
-->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="345"
height="487"
id="svg3072"
version="1.1"
inkscape:version="0.48.2 r9819"
sodipodi:docname="flame01.svg">
<metadata
id="metadata3119">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1280"
inkscape:window-height="1000"
id="namedview3117"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="1.6867679"
inkscape:cx="171.94397"
inkscape:cy="243.36484"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="svg3072" />
<defs
id="defs3074">
<linearGradient
y2="389.37335"
x2="562.47888"
y1="18.809023"
x1="191.91457"
id="lg_1"
gradientTransform="scale(0.85223629,1.1733835)"
gradientUnits="userSpaceOnUse">
<stop
stop-color="#ff0000"
offset="0"
id="stop3077" />
<stop
stop-color="#ffff00"
offset="1"
id="stop3079" />
</linearGradient>
</defs>
<g
id="g3088"
transform="matrix(-1,0,0,1,291.5,82.621727)">
<title
id="title3090">Lighter</title>
<g
id="g3092">
<title
id="title3094">Air with Oxygen</title>
<rect
id="Air"
height="480.85141"
width="338.88794"
y="-79.851402"
x="-49.887943"
style="fill:#ffffff;stroke:#ffffff;stroke-width:5" />
</g>
<g
id="svg_1">
<title
id="title3098">Fuel (Butane or Naphtha)</title>
<path
d="m 288.01605,336.12592 c 3.1897,5.80884 1.06619,13.10468 -4.74268,16.2944 l -91.91966,50.47418 c -5.80972,3.19022 -13.10468,1.06619 -16.29439,-4.74268 L 17.90081,111.94709 C 14.7111,106.13823 16.83376,98.8429 22.64349,95.65271 L 114.56315,45.1785 c 5.80887,-3.18972 13.10467,-1.06618 16.29438,4.74268 l 157.15852,286.20474 z"
id="imagebot_6"
inkscape:connector-curvature="0"
style="fill:#98FB98" />
</g>
<g
id="svg_2">
<path
d="m 131.32181,32.15541 c 1.43867,2.61999 0.34917,5.98365 -2.433,7.51137 l -2.12299,1.16576 c -2.78214,1.5277 -6.20461,0.64276 -7.64375,-1.9781 l 0,0 c -1.43867,-2.61999 -0.34917,-5.98367 2.43297,-7.51137 l 2.12299,-1.16576 c 2.78217,-1.5277 6.20464,-0.64276 7.64378,1.9781 l 0,0 z"
id="imagebot_7"
inkscape:connector-curvature="0"
style="fill:#1c0b07" />
</g>
<g
id="svg_3">
<path
d="m 129.07819,46.68281 c 3.54733,6.46012 1.71309,14.28273 -4.09578,17.47245 L 65.59481,96.76571 C 59.78506,99.95592 52.20087,97.30509 48.65354,90.84496 L 27.01287,51.43467 C 23.46553,44.97454 25.2989,37.15242 31.10865,33.96221 L 90.49624,1.35176 c 5.80887,-3.18972 13.39394,-0.53938 16.94128,5.92075 l 21.64067,39.41029 z"
id="imagebot_9"
inkscape:connector-curvature="0"
style="fill:#423b45" />
</g>
<g
id="svg_4">
<path
d="m 136.62106,60.12017 c -0.23497,-0.56917 -0.49268,-1.13613 -0.79782,-1.69184 l -3.6619,-6.66875 c -3.78462,-6.89227 -11.56271,-9.89411 -17.37157,-6.70439 L 22.41782,95.77775 c -5.80973,3.19019 -7.45011,11.36382 -3.66548,18.25609 l 3.66189,6.66875 c 0.30515,0.55573 0.64525,1.07744 0.99941,1.58115 L 136.62105,60.12017 z"
id="imagebot_10"
inkscape:connector-curvature="0" />
</g>
<g
id="svg_5">
<rect
x="403.853"
y="128.30901"
width="21.507"
height="18.556999"
id="imagebot_11"
transform="matrix(0.876544,-0.481321,0.481321,0.876544,-373.675,135.082)"
style="fill:#656366" />
</g>
<g
id="SparkGenerator">
<title
id="title3110">Spark generator (click me)</title>
<g
id="imagebot_3"
transform="matrix(0.876544,-0.481321,0.481321,0.876544,-373.675,135.082)">
<ellipse
cx="403.853"
cy="117.38"
rx="19.250999"
ry="20.207001"
id="imagebot_4"
d="m 423.104,117.38 c 0,11.16002 -8.61897,20.207 -19.251,20.207 -10.63204,0 -19.251,-9.04698 -19.251,-20.207 0,-11.16002 8.61896,-20.207003 19.251,-20.207003 10.63203,0 19.251,9.046983 19.251,20.207003 z"
sodipodi:cx="403.853"
sodipodi:cy="117.38"
sodipodi:rx="19.250999"
sodipodi:ry="20.207001"
style="fill:#b8b7b8" />
<path
d="m 403.854,139.08701 c -1.44202,0 -2.88501,-0.15599 -4.284,-0.463 l -1.466,-0.32199 0.64398,-2.93001 1.46503,0.321 c 1.48898,0.327 3.04898,0.452 4.564,0.369 l 1.49698,-0.082 0.16302,2.996 -1.49802,0.081 c -0.358,0.02 -0.72,0.03 -1.08499,0.03 l 0,0 z m 4.95801,-0.563 -0.961,-2.842 1.42099,-0.48001 c 1.44501,-0.489 2.827,-1.17299 4.10901,-2.034 l 1.245,-0.836 1.673,2.49001 -1.246,0.836 c -1.50201,1.009 -3.12299,1.812 -4.82001,2.38499 l -1.42099,0.481 0,0 z M 395.83899,137.469 394.513,136.768 c -1.578,-0.83299 -3.05301,-1.87801 -4.384,-3.106 l -1.10202,-1.01799 2.03403,-2.205 1.103,1.017 c 1.13998,1.052 2.401,1.946 3.74899,2.659 l 1.327,0.7 -1.401,2.65401 0,0 z m 22.254,-4.22699 -2.246,-1.98801 0.99402,-1.123 c 1.01797,-1.149 1.896,-2.432 2.60898,-3.811 l 0.689,-1.332 2.664,1.379 -0.689,1.332 c -0.827,1.59901 -1.84601,3.08601 -3.02701,4.42001 l -0.99399,1.123 0,0 z m -30.60098,-2.42 -0.81601,-1.258 c -0.97198,-1.49699 -1.76199,-3.115 -2.34698,-4.809 l -0.48901,-1.418 2.83499,-0.979 0.49002,1.418 c 0.50598,1.464 1.18799,2.862 2.026,4.155 l 0.81699,1.258 -2.51599,1.633 0,0 z m 36.138,-6.67901 -2.91699,-0.701 0.35098,-1.458 c 0.358,-1.495 0.54102,-3.044 0.54102,-4.603 -0.001,-1.252 -0.11902,-2.504 -0.35202,-3.71999 l -0.28101,-1.473 2.94702,-0.563 0.28101,1.474 c 0.26797,1.4 0.40298,2.84 0.40399,4.282 0,1.79501 -0.20999,3.58 -0.625,5.305 l -0.349,1.457 0,0 z m -40.28601,-3.118 -0.14099,-1.493 c -0.067,-0.711 -0.10202,-1.436 -0.10202,-2.152 0,-1.068 0.074,-2.14 0.22202,-3.184 l 0.20898,-1.485 2.97101,0.418 -0.20901,1.485 c -0.12799,0.90701 -0.19199,1.837 -0.19199,2.766 0,0.623 0.029,1.251 0.088,1.87 l 0.142,1.493 -2.98801,0.28201 0,0 z m 3.58099,-9.491 -2.78601,-1.10999 0.55502,-1.394 c 0.664,-1.666 1.52899,-3.246 2.57199,-4.695 l 0.87601,-1.218 2.436,1.75201 -0.87601,1.21799 c -0.89999,1.251 -1.647,2.61501 -2.22101,4.054 l -0.556,1.393 0,0 z m 33.547,-0.917 -0.625,-1.364 c -0.646,-1.409 -1.461,-2.731 -2.42401,-3.933 l -0.93799,-1.17 2.341,-1.876 0.93799,1.17 c 1.116,1.393 2.06201,2.927 2.80899,4.559 l 0.625,1.364 -2.72598,1.25 0,0 z m -28.784,-6.946 -1.922,-2.303 1.151,-0.961 c 1.39099,-1.16 2.91699,-2.129 4.53699,-2.88 l 1.36102,-0.631 1.26199,2.72199 -1.36099,0.631 c -1.38303,0.641 -2.68802,1.47 -3.87701,2.462 l -1.151,0.96 0,0 z m 23.62802,-0.657 -1.20099,-0.898 c -1.23901,-0.92699 -2.586,-1.683 -4.00201,-2.245 l -1.39499,-0.554 1.108,-2.788 1.39398,0.554 c 1.66202,0.66 3.24002,1.545 4.69101,2.631 l 1.20099,0.898 -1.79599,2.402 0,0 z m -15.70502,-3.871 -0.487,-2.96 1.48001,-0.243 c 1.763,-0.29 3.603,-0.342 5.38397,-0.152 l 1.492,0.16 -0.319,2.983 -1.491,-0.159 c -1.51599,-0.164 -3.08099,-0.118 -4.57898,0.128 l -1.48001,0.243 0,0 z"
id="imagebot_5"
inkscape:connector-curvature="0"
style="fill:#b8b7b8" />
</g>
<g
id="svg_6">
<path
d="M 24.67726,66.89786 C 22.33228,65.12464 19.18791,64.48855 16.18348,65.47434 L 6.3884,68.68876 c -4.86903,1.59783 -7.52151,6.83965 -5.92367,11.70869 1.59784,4.86903 6.83965,7.52149 11.7087,5.92365 L 15.73162,85.15331 21.76305,96.13727 48.42138,81.49886 36.76042,60.26284 24.67726,66.89785 z"
id="imagebot_8"
inkscape:connector-curvature="0"
style="fill:#2b2230" />
</g>
</g>
</g>
<g
id="g3081"
transform="matrix(-0.2571699,0,0,0.23357553,357.82499,-2.046568)">
<title
id="title3083">Flame</title>
<g
id="g3085">
<path
stroke-miterlimit="4"
id="path4355"
d="M 287.93777,22.070196 C 260.55991,204.20087 173.70967,205.86105 164.18697,300.00857 c -9.56546,94.56974 92.6309,152.9123 109.46476,156.87568 0,0 -48.00865,-52.27384 -43.49475,-96.9014 3.12581,-30.90308 16.63353,-42.08991 42.12991,-75.91034 18.3248,-24.30747 39.01871,-57.66255 54.23188,-106.92571 54.13946,44.63037 77.35602,70.59914 88.17242,124.48961 10.81653,53.89054 -33.84942,150.79209 -33.84942,150.79209 161.55416,-114.66065 120.16674,-289.69742 -92.904,-430.358304 z"
inkscape:connector-curvature="0"
style="fill:#ffffff" />
</g>
</g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>
</XholonWorkbook>