2d:null 2e:["$","title",null,{"children":"Flash Cards: Atomic Element Symbols | Christian Wilcox | Observable"}] 33:T51f,css = html` `34:[] 31:{"id":"1740a162dbad57c1","slug":"flash-cards-atomic-element-symbols","title":"Flash Cards: Atomic Element Symbols","thumbnail":"d4babdb88edfd98f81b46ec2448b24baa1480d924fadcf9c32e24016bbcf1e83","access_level":"public","create_time":"$D2018-11-02T11:03:44.663Z","update_time":"$D2018-11-02T15:42:23.673Z","view_time":null,"first_public_time":"$D2018-11-02T19:00:59.657Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"735c6ab969f7c460","login":"cw","name":"Christian Wilcox","avatar_url":"https://avatars-next.observableusercontent.com/368b113ade86a6e356457fa1261dbc0a8f5385612c10809be6aa5d0f98fb0643","tier":"starter_2024"},"version":157,"publish_version":157,"role":null,"authored":false,"authors":[{"type":"individual","id":"d860027f59f6cb70","login":"cw","name":"Christian Wilcox","avatar_url":"https://avatars-next.observableusercontent.com/368b113ade86a6e356457fa1261dbc0a8f5385612c10809be6aa5d0f98fb0643","tier":null}],"members":[{"type":"individual","id":"d860027f59f6cb70","login":"cw","name":"Christian Wilcox","avatar_url":"https://avatars-next.observableusercontent.com/368b113ade86a6e356457fa1261dbc0a8f5385612c10809be6aa5d0f98fb0643","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Flash Cards: Atomic Element Symbols","cells":[{"id":0,"value":"md`# Flash Cards: Atomic Element Symbols\n\nRough prototype to help my 6th grader memorize some of the symbols.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"card = {\n let symbol = elements[cardIndex][0],\n name = elements[cardIndex][1];\n //console.log(visible);\n let elem = html`

${visible == 0 ? name : symbol}

${visible == 0 ? symbol : name}

`;\n return elem;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"viewof visible = radio({\n options: [{ label: \"Symbols\", value: 0 }, { label: \"Names\", value: 1 }],\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"viewof cardIndex = {\n let elem = html``;\n return elem;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"{\n const form = html``;\n form.inc.onclick = () => {\n ++viewof cardIndex.value;\n viewof cardIndex.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.dec.onclick = () => {\n --viewof cardIndex.value;\n viewof cardIndex.dispatchEvent(new CustomEvent(\"input\"));\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"elements = [\n [\"Al\", \"Aluminum\"],\n [\"Ni\", \"Nitrogen\"],\n [\"C\", \"Carbon\"],\n [\"Pb\", \"Lead\"],\n [\"Ag\", \"Silver\"],\n [\"O\", \"Oxygen\"],\n [\"Fe\", \"Iron\"],\n [\"U\", \"Uranium\"],\n [\"Ar\", \"Argon\"],\n [\"Br\", \"Bromine\"],\n [\"Cl\", \"Chlorine\"],\n [\"S\", \"Sulfur\"],\n [\"P\", \"Phosphorus\"],\n [\"Ca\", \"Calcium\"],\n [\"Hg\", \"Mercury\"],\n [\"Au\", \"Gold\"],\n [\"Cu\", \"Copper\"],\n [\"Zn\", \"Zinc\"],\n [\"Fr\", \"Francium\"],\n [\"Li\", \"Lithium\"],\n [\"F\", \"Flourine\"],\n [\"He\", \"Helium\"],\n [\"Mn\", \"Manganese\"],\n [\"Na\", \"Sodium\"],\n [\"I\", \"Iodine\"],\n [\"H\", \"Hydrogen\"],\n [\"Si\", \"Silicon\"],\n [\"Mg\", \"Magnesium\"],\n [\"K\", \"Potassium\"],\n [\"Ni\", \"Nickel\"],\n [\"W\", \"Tungsten\"],\n [\"As\", \"Arsenic\"],\n [\"Pt\", \"Plutonium\"],\n [\"Ti\", \"Titanium\"],\n [\"Pt\", \"Platinum\"],\n [\"Sn\", \"Tin\"],\n [\"Ne\", \"Neon\"],\n [\"Rn\", \"Radon\"],\n [\"Ba\", \"Barium\"],\n [\"Cr\", \"Chromium\"]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"{\n // TODO set up keyboard navigation across the card stack\n document.addEventListener(\"keydown\", function(event) {\n if (event.keyCode == 37) {\n console.log(\"Left was pressed\");\n } else if (event.keyCode == 39) {\n console.log(\"Right was pressed\");\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"