{% load static %}
<div class="form-group">
	<div style="white-space: pre-wrap" id="question_{{ form_name }}" data-toggle="collapse" data-target="#periodic_{{ form_name }}" {% if collapsible %}style="cursor: pointer" onclick="toggle_details(this)"{% endif %}>{% if collapsible %}<span class="glyphicon glyphicon-chevron-{% if collapsed %}right{% else %}down{% endif %} pull-left chevron"></span>{% endif %} {{ question_title|safe }}{{ required_span|safe }}</div>
	<div id="periodic_{{ form_name }}" class="collapse {% if not collapsed %}in{% endif %}">
		{# Add a invisible checkbox to control when this is required #}
		<input aria-label="hidden field used for required answer" id="required_{{ form_name }}" type="checkbox" value="" style="display: none" {% if required_span %}required{% endif %}/>
		{% with required_onclick=required_span|yesno:"check_required()," %}
			<table class="periodic-table">
				<tr>
					<td class="element non-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="H">H</label></td>
					<td colspan="17"></td>
					<td class="element noble-gas"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="He">He</label></td>
				</tr>
				<tr>
					<td class="element alkali-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Li">Li</label></td>
					<td class="element alkaline-earth-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Be">Be</label></td>
					<td colspan="11"></td>
					<td class="element metalloid"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="B">B</label></td>
					<td class="element non-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="C">C</label></td>
					<td class="element non-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="N">N</label></td>
					<td class="element non-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="O">O</label></td>
					<td class="element non-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="F">F</label></td>
					<td class="element noble-gas"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ne">Ne</label></td>
				</tr>
				<tr>
					<td class="element alkali-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Na">Na</label></td>
					<td class="element alkaline-earth-metal"><label><input type="checkbox" name="{{ form_name }}"onclick="{{ required_onclick }}" value="Mg">Mg</label></td>
					<td colspan="11"></td>
					<td class="element post-transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Al">Al</label></td>
					<td class="element metalloid"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Si">Si</label></td>
					<td class="element non-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="P">P</label></td>
					<td class="element non-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="S">S</label></td>
					<td class="element non-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Cl">Cl</label></td>
					<td class="element noble-gas"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ar">Ar</label></td>
				</tr>
				<tr>
					<td class="element alkali-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="K">K</label></td>
					<td class="element alkaline-earth-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ca">Ca</label></td>
					<td></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Sc">Sc</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ti">Ti</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="V">V</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Cr">Cr</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Mn">Mn</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Fe">Fe</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Co">Co</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ni">Ni</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Cu">Cu</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Zn">Zn</label></td>
					<td class="element post-transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ga">Ga</label></td>
					<td class="element metalloid"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ge">Ge</label></td>
					<td class="element metalloid"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="As">As</label></td>
					<td class="element non-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Se">Se</label></td>
					<td class="element non-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Br">Br</label></td>
					<td class="element noble-gas"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Kr">Kr</label></td>
				</tr>
				<tr>
					<td class="element alkali-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Rb">Rb</label></td>
					<td class="element alkaline-earth-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Sr">Sr</label></td>
					<td style="width: 7px"></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Y">Y</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Zr">Zr</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Nb">Nb</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Mo">Mo</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Tc">Tc</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ru">Ru</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Rh">Rh</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Pd">Pd</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ag">Ag</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Cd">Cd</label></td>
					<td class="element post-transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="In">In</label></td>
					<td class="element post-transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Sn">Sn</label></td>
					<td class="element metalloid"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Sb">Sb</label></td>
					<td class="element metalloid"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Te">Te</label></td>
					<td class="element non-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="I">I</label></td>
					<td class="element noble-gas"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Xe">Xe</label></td>
				</tr>
				<tr>
					<td class="element alkali-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Cs">Cs</label></td>
					<td class="element alkaline-earth-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ba">Ba</label></td>
					<td></td>
					<td class="element lanthanide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Lu">Lu</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Hf">Hf</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ta">Ta</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="W">W</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Re">Re</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Os">Os</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ir">Ir</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Pt">Pt</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Au">Au</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Hg">Hg</label></td>
					<td class="element post-transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Tl">Tl</label></td>
					<td class="element post-transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Pb">Pb</label></td>
					<td class="element post-transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Bi">Bi</label></td>
					<td class="element post-transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Po">Po</label></td>
					<td class="element post-transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="At">At</label></td>
					<td class="element noble-gas"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Rn">Rn</label></td>
				</tr>
				<tr>
					<td class="element alkali-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Fr">Fr</label></td>
					<td class="element alkaline-earth-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ra">Ra</label></td>
					<td></td>
					<td class="element actinide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Lr">Lr</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Rf">Rf</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Db">Db</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Sg">Sg</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Bh">Bh</label></td>
					<td class="element transition-metal"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Hs">Hs</label></td>
					<td class="element unknown"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Mt">Mt</label></td>
					<td class="element unknown"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ds">Ds</label></td>
					<td class="element unknown"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Rg">Rg</label></td>
					<td class="element unknown"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Cn">Cn</label></td>
					<td class="element unknown"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Nh">Nh</label></td>
					<td class="element unknown"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Fl">Fl</label></td>
					<td class="element unknown"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Mc">Mc</label></td>
					<td class="element unknown"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Lv">Lv</label></td>
					<td class="element unknown"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ts">Ts</label></td>
					<td class="element unknown"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Og">Og</label></td>
				</tr>
				<tr>
					<td colspan="18" style="height: 7px"></td>
				</tr>
				<tr>
					<td colspan="3"></td>
					<td class="element lanthanide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="La">La</label></td>
					<td class="element lanthanide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ce">Ce</label></td>
					<td class="element lanthanide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Pr">Pr</label></td>
					<td class="element lanthanide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Nd">Nd</label></td>
					<td class="element lanthanide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Pm">Pm</label></td>
					<td class="element lanthanide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Sm">Sm</label></td>
					<td class="element lanthanide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Eu">Eu</label></td>
					<td class="element lanthanide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Gd">Gd</label></td>
					<td class="element lanthanide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Tb">Tb</label></td>
					<td class="element lanthanide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Dy">Dy</label></td>
					<td class="element lanthanide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ho">Ho</label></td>
					<td class="element lanthanide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Er">Er</label></td>
					<td class="element lanthanide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Tm">Tm</label></td>
					<td class="element lanthanide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Yb">Yb</label></td>
					<td colspan="2"></td>
				</tr>
				<tr>
					<td colspan="3"></td>
					<td class="element actinide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Ac">Ac</label></td>
					<td class="element actinide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Th">Th</label></td>
					<td class="element actinide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Pa">Pa</label></td>
					<td class="element actinide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="U">U</label></td>
					<td class="element actinide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Np">Np</label></td>
					<td class="element actinide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Pu">Pu</label></td>
					<td class="element actinide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Am">Am</label></td>
					<td class="element actinide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Cm">Cm</label></td>
					<td class="element actinide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Bk">Bk</label></td>
					<td class="element actinide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Cf">Cf</label></td>
					<td class="element actinide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Es">Es</label></td>
					<td class="element actinide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Fm">Fm</label></td>
					<td class="element actinide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="Md">Md</label></td>
					<td class="element actinide"><label><input type="checkbox" name="{{ form_name }}" onclick="{{ required_onclick }}" value="No">No</label></td>
					<td colspan="2"></td>
				</tr>
			</table>
		{% endwith %}
		{% if help %}<div style="font-size:smaller;color:#999;max-width: 600px;">{{ help }}</div>{% endif %}
	</div>
</div>
<script>
	if (!$) { $ = django.jQuery; }
    if (!$('link[href="{% static "NEMO_periodic_table_question/periodic_table.css" %}"]').length)
    {
        $('<link href="{% static "NEMO_periodic_table_question/periodic_table.css" %}" rel="stylesheet">').appendTo("head");
    }
    $(".periodic-table input[type=checkbox]").on("change", function()
	{
		$(this).closest("td").toggleClass("checked", this.checked);
	});
    function check_required()
    {
        if ($("input[name={{ form_name }}]:checkbox:checked").length > 0)
        {
            $("#required_{{ form_name }}").prop("checked", true).change();
		}
        else
        {
            $("#required_{{ form_name }}").prop("checked", false).change();
		}
	}
</script>