Clickable picture is working, but validator is finding issues (submit isn't working)

49 Views Asked by At

So I made a clickable image, with 44 areas, when user clicks on an "Area" - a set of questions pops up. The questions are the same for all areas. User is supposed to be able to click on as many areas as they want. And answer the questions for as many areas as they want. I put my code in "Validator" program, and it says "Error: Element area is missing required attribute href." I don't want to ruin the whole code I built, Does anyone know how to fix the code?

I tried putting snippets...

<map name="image-map"> <area title="1" style="cursor:pointer;" alt="Area 1" data-target="questions1" coords="159,165,20" shape="circle"> <area title="2" style="cursor:pointer;" alt="Area 2" data-target="questions2" coords="208,164,20" shape="circle"> <area title="3" style="cursor:pointer;" alt="Area 3" data-target="question3" coords="117,193,20" shape="circle"> <area title="4" style="cursor:pointer;" alt="Area 4" data-target="questions4" coords="248,193,20" shape="circle"> <area title="6" style="cursor:pointer;" alt="Area 6" data-target="questions6" coords="256,291,20" shape="circle"> <area title="5" style="cursor:pointer;" alt="Area 5" data-target="questions5" coords="110,289,20" shape="circle"> <area title="7" style="cursor:pointer;" alt="Area 7" data-target="questions7" coords="157,217,20" shape="circle"> <area title="8" style="cursor:pointer;" alt="Area 8" data-target="questions8" coords="209,214,20" shape="circle"> <area title="9" style="cursor:pointer;" alt="Area 9" data-target="questions9" coords="160,262,20" shape="circle"> <area title="10" style="cursor:pointer;" alt="Area 10" data-target="questions10" coords="209,262,20" shape="circle"> <area title="11" style="cursor:pointer;" alt="Area 11" data-target="questions11" coords="153,307,20" shape="circle"> <area title="12" style="cursor:pointer;" alt="Area 12" data-target="questions12" coords="212,309,20" shape="circle"> <area title="13" style="cursor:pointer;" alt="Area 13" data-target="questions13" coords="143,354,20" shape="circle"> <area title="14a" style="cursor:pointer;" alt="Area 14a" data-target="questions14a" coords="181,333,20" shape="circle"> <area title="14b" style="cursor:pointer;" alt="Area 14b" data-target="questions14b" coords="182,368,20" shape="circle"> <area title="15" style="cursor:pointer;" alt="Area 15" data-target="questions15" coords="223,354,20" shape="circle"> <area title="16" style="cursor:pointer;" alt="Area 16" data-target="questions16" coords="150,427,20" shape="circle"> <area title="17" style="cursor:pointer;" alt="Area 17" data-target="questions17" coords="220,429,20" shape="circle"> <area title="18" style="cursor:pointer;" alt="Area 18" data-target="questions18" coords="153,530,20" shape="circle"> <area title="19" style="cursor:pointer;" alt="Area 19" data-target="questions19" coords="213,530,20" shape="circle"> <area title="20" style="cursor:pointer;" alt="Area 20" data-target="questions20" coords="153,621,20" shape="circle"> <area title="21" style="cursor:pointer;" alt="Area 21" data-target="questions21" coords="210,621,20" shape="circle"> <area title="22" style="cursor:pointer;" alt="Area 22" data-target="questions22" coords="430,163,20" shape="circle"> <area title="23" style="cursor:pointer;" alt="Area 23" data-target="questions23" coords="478,164,20" shape="circle"> <area title="24" style="cursor:pointer;" alt="Area 24" data-target="questions24" coords="388,191,20" shape="circle"> <area title="25" style="cursor:pointer;" alt="Area 25" data-target="questions25" coords="519,192,20" shape="circle"> <area title="26" style="cursor:pointer;" alt="Area 26" data-target="questions26" coords="381,290,20" shape="circle"> <area title="27" style="cursor:pointer;" alt="Area 27" data-target="questions27" coords="527,287,20" shape="circle"> <area title="28" style="cursor:pointer;" alt="Area 28" data-target="questions28" coords="427,213,20" shape="circle"> <area title="29" style="cursor:pointer;" alt="Area 29" data-target="questions29" coords="479,213,20" shape="circle"> <area title="30" style="cursor:pointer;" alt="Area 30" data-target="questions30" coords="429,259,20" shape="circle"> <area title="31" style="cursor:pointer;" alt="Area 31" data-target="questions31" coords="479,259,20" shape="circle"> <area title="32" style="cursor:pointer;" alt="Area 32" data-target="questions32" coords="425,306,20" shape="circle"> <area title="33" style="cursor:pointer;" alt="Area 33" data-target="questions33" coords="483,306,20" shape="circle"> <area title="34" style="cursor:pointer;" alt="Area 34" data-target="questions34" coords="413,352,20" shape="circle"> <area title="35a" style="cursor:pointer;" alt="Area 35a" data-target="questions35a" coords="454,332,20" shape="circle"> <area title="35b" style="cursor:pointer;" alt="Area 35b" data-target="questions35b" coords="455,369,20" shape="circle"> <area title="36" style="cursor:pointer;" alt="Area 36" data-target="questions36" coords="493,352,20" shape="circle"> <area title="37" style="cursor:pointer;" alt="Area 37" data-target="questions37" coords="418,427,20" shape="circle"> <area title="38" style="cursor:pointer;" alt="Area 38" data-target="questions38" coords="485,426,20" shape="circle"> <area title="39" style="cursor:pointer;" alt="Area 39" data-target="questions39" coords="423,528,20" shape="circle"> <area title="40" style="cursor:pointer;" alt="Area 40" data-target="questions40" coords="484,528,20" shape="circle"> <area title="41" style="cursor:pointer;" alt="Area 41" data-target="questions41" coords="426,619,20" shape="circle"> <area title="42" style="cursor:pointer;" alt="Area 42" data-target="questions42" coords="485,620,20" shape="circle"> </map>

<div id="hidden-question" style="display: none;"> <div id="question-item-{NMB}" class="questions"> <form id="close"> <path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z" /> </svg> </div>

'<h2>Area {NMB}</h2> <div class="Qr7Oae" role="listitem"> <input type="text" value="Area {NMB}" style="display: none;"> <div jsmodel="CP1oW" data-params="%.@.[1631360647,&quot;On average, how intense is the chronic pain&quot;,null,5,[[142468032,[[&quot;0&quot;],[&quot;1&quot;],[&quot;2&quot;],[&quot;3&quot;],[&quot;4&quot;],[&quot;5&quot;],[&quot;6&quot;],[&quot;7&quot;],[&quot;8&quot;],[&quot;9&quot;],[&quot;10&quot;]],true,[&quot;No pain&quot;,&quot;Severe pain&quot;],[],null,null,null,null,null,[null,[]]]],null,null,null,[],null,null,[null,&quot;On average, how <u>intense</u> is the pre-menstrual pain (pain before periods)?'

'&quot;]],&quot;i23&quot;,&quot;i24{NMB}&quot;,&quot;i25{NMB}&quot;,false]"> <div class="M4DNQ"> <div id="q1a1{NMB}" class="HoXoMd D1wxyf RjsPE" role="heading" aria-level="3" aria-describedby="i26{NMB}"> <span class="M7eMe">On average, how <b><u>intense</u></b> is the chronic pain&nbsp;</span> <span class="vnumgf" id="q1a1{NMB}" aria-label="Required question"> *</span> </div> <div class="gubaDc OIC90c RjsPE" id="i24{NMB}"></div> </div> <div class="lLfZXe fnxRtf BpKDyb" jscontroller="wPRNsd" jsshadow="" jsaction="keydown: I481le;JIbuQc:JIbuQc;rcuQ6b:rcuQ6b" jsname="cnAzRb" aria-labelledby="q1a1{NMB}" aria-describedby="i24{NMB} i25{NMB}" aria-required="true" role="radiogroup"> <br> <label class="T5pZmf"> <input type="radio" name="answer15{NMB}" value="0" required> <span class="Zki2Ve" dir="auto">0 (No pain)</span> </label> <label class="T5pZmf"> <input type="radio" name="answer15{NMB}" value="1"> <span class="Zki2Ve" dir="auto">1</span> </label> <label class="T5pZmf"> <input type="radio" name="answer15{NMB}" value="2"> <span class="Zki2Ve" '

'dir="auto">2</span> </label> <label class="T5pZmf"> <input type="radio" name="answer15{NMB}" value="3"> <span class="Zki2Ve" dir="auto">3</span> </label> <label class="T5pZmf"> <input type="radio" name="answer15{NMB}" value="4"> <span class="Zki2Ve" dir="auto">4</span> </label> <label class="T5pZmf"> <input type="radio" name="answer15{NMB}" value="5"> <span class="Zki2Ve" dir="auto">5</span> </label> <label class="T5pZmf"> <input type="radio" name="answer15{NMB}" value="6"> <span class="Zki2Ve" dir="auto">6</span> </label> <label class="T5pZmf"> <input type="radio" name="answer15{NMB}" value="7"> <span class="Zki2Ve" dir="auto">7</span> </label> <label class="T5pZmf"> <input type="radio" name="answer15{NMB}" value="8"> <span class="Zki2Ve" dir="auto">8</span> </label> <label class="T5pZmf"> <input type="radio" name="answer15{NMB}" value="9"> <span class="Zki2Ve" dir="auto">9</span> </label> <label class="T5pZmf"> <input type="radio" name="answer15{NMB}" value="10"> <span class="Zki2Ve" dir="auto">10 (Severe pain)</span> </label> </div> <div jsname="Rfh2Tc" class="SL4Sz" id="q1a1{NMB}" role="alert"></div> </div> </div> <div id="Area {NMB}"></div> <br> <br> <br> <div class="Qr7Oae" role="listitem">'

'<div jsmodel="CP1oW" data-params="%.@.[1631360647,&quot;On average, what is the duration of the chronic pain?&quot;,null,5,[[142468032,[[&quot;0&quot;],[&quot;1&quot;],[&quot;2&quot;],[&quot;3&quot;],[&quot;4&quot;],[&quot;5&quot;],[&quot;6&quot;],[&quot;7&quot;],[&quot;8&quot;],[&quot;9&quot;],[&quot;10&quot;]],true,[&quot;No pain&quot;,&quot;Severe pain&quot;],[],null,null,null,null,null,[null,[]]]],null,null,null,[],null,null,[null,&quot;On average,what is the duration of the chronic pain?&quot;]],&quot;q1a1{NMB}&quot;,&quot;i24{NMB}&quot;,&quot;i25{NMB}&quot;,false]">'

'<div class="M4DNQ"> <div id="q1a1{NMB}" class="HoXoMd D1wxyf RjsPE" role="heading" aria-level="3" aria-describedby="i26{NMB}"> <span class="M7eMe">On average, what is the <b><u>duration</u></b> of the chronic pain &nbsp;</span> <span class="vnumgf" id="i26{NMB}" aria-label="Required question"> *</span> </div> <div class="gubaDc OIC90c RjsPE" id="i24{NMB}"></div> </div> <div class="lLfZXe fnxRtf BpKDyb" jscontroller="wPRNsd" jsshadow="" jsaction="keydown: I481le;JIbuQc:JIbuQc;rcuQ6b:rcuQ6b" jsname="cnAzRb" aria-labelledby="q1a1{NMB}" aria-describedby="i24{NMB} i25{NMB}" aria-required="true" role="radiogroup"> <br> <label class="T5pZmf"> <input type="radio" name="answer16{NMB}" value="1" required> <span class="Zki2Ve" dir="auto">3-4 months</span> </label> <label class="T5pZmf"> <input type="radio" name="answer16{NMB}" value="2"> <span class="Zki2Ve" dir="auto">5-6 months</span> </label> <label class="T5pZmf"> <input type="radio" name="answer16{NMB}" value="3"> <span class="Zki2Ve" dir="auto">7-8 months</span> </label> <label class="T5pZmf"> <input type="radio" name="answer16{NMB}" value="4"> <span class="Zki2Ve" dir="auto">9-10 months</span> </label> <label class="T5pZmf"> <input type="radio" name="answer16{NMB}" value="5"> <span class="Zki2Ve" dir="auto">11-12 months</span> </label> <label class="T5pZmf"> <input type="radio" name="answer16{NMB}" value="6"> <span class="Zki2Ve" dir="auto">More than a year</span> </label> </div> <div jsname="Rfh2Tc" class="SL4Sz" id="i25{NMB}" role="alert"></div> </div> </div> <div id="Area {NMB}"></div> <br> <br> <br> <div class="Qr7Oae" role="listitem"> <div jsmodel="CP1oW" data-params="%.@.[1631360647,&quot;Do you take pain killers for the pain?&quot;,null,5,[[142468032,[[&quot;0&quot;],[&quot;1&quot;],[&quot;2&quot;],[&quot;3&quot;],[&quot;4&quot;],[&quot;5&quot;],[&quot;6&quot;],[&quot;7&quot;],[&quot;8&quot;],[&quot;9&quot;],[&quot;10&quot;]],true,[&quot;No pain&quot;,&quot;Severe pain&quot;],[],null,null,null,null,null,[null,[]]]],null,null,null,[],null,null,[null,&quot;Do you take pain killers for the pain&quot;]],&quot;q1a2&quot;,&quot;i24{NMB}&quot;,&quot;i25{NMB}&quot;,false]">'

'`` <div class="M4DNQ"> <div id="q2a1" class="HoXoMd D1wxyf RjsPE" role="heading" aria-level="3" aria-describedby="i26{NMB}"> <span class="M7eMe">Do you take <b><u>pain killers</u></b> for the pain&nbsp;</span> <span class="vnumgf" id="i26{NMB}" aria-label="Required question"> *</span> </div> <div class="gubaDc OIC90c RjsPE" id="i24{NMB}"></div> </div> <div class="lLfZXe fnxRtf BpKDyb" jscontroller="wPRNsd" jsshadow="" jsaction="keydown: I481le;JIbuQc:JIbuQc;rcuQ6b:rcuQ6b" jsname="cnAzRb" aria-labelledby="q2a1" aria-describedby="i24{NMB} i25{NMB}" aria-required="true" role="radiogroup"> <br> <label class="T5pZmf"> <input type="radio" name="answer17{NMB}" value="1" required> <span class="Zki2Ve" dir="auto">Yes</span> </label> <label class="T5pZmf"> <input type="radio" name="answer17{NMB}" value="2"> <span class="Zki2Ve" dir="auto">No</span> </label> </div> <div jsname="Rfh2Tc" class="SL4Sz" id="i25{NMB}" role="alert"></div> </div> </div> <div id="Area {NMB}"></div> <br> <br> <br> <div class="Qr7Oae" role="listitem"> <div jsmodel="CP1oW" data-params="%.@.[1631360647,&quot;If yes, do they help?&quot;,null,5,[[142468032,[[&quot;0&quot;],[&quot;1&quot;],[&quot;2&quot;],[&quot;3&quot;],[&quot;4&quot;],[&quot;5&quot;],[&quot;6&quot;],[&quot;7&quot;],[&quot;8&quot;],[&quot;9&quot;],[&quot;10&quot;]],true,[&quot;No pain&quot;,&quot;Severe pain&quot;],[],null,null,null,null,null,[null,[]]]],null,null,null,[],null,null,[null,&quot;If yes, do they help?&quot;]],&quot;q2a1&quot;,&quot;i24{NMB}&quot;,&quot;i25{NMB}&quot;,false]"> <div class="M4DNQ"> <div id="q3a1" class="HoXoMd D1wxyf RjsPE" role="heading" aria-level="3" aria-describedby="i26{NMB}"> <span class="M7eMe"><b><u>If yes</u></b>, do they help?</span> <span class="vnumgf" id="i26{NMB}" aria-label="Required question"> *</span> </div> <div class="gubaDc OIC90c RjsPE" id="i24{NMB}"></div> </div> <div class="lLfZXe fnxRtf BpKDyb" jscontroller="wPRNsd" jsshadow="" jsaction="keydown: I481le;JIbuQc:JIbuQc;rcuQ6b:rcuQ6b" jsname="cnAzRb" aria-labelledby="q3a1" aria-describedby="i24{NMB} i25{NMB}" aria-required="true" role="radiogroup"> <br> <label class="T5pZmf"> <input type="radio" name="answer18{NMB}" value="0"> <span class="Zki2Ve" dir="auto">Do not take painkillers</span> </label> <label class="T5pZmf"> <input type="radio" name="answer18{NMB}" value="1"> <span class="Zki2Ve" dir="auto">They don't help</span> </label> <label class="T5pZmf"> <input type="radio" name="answer18{NMB}" value="2"> <span class="Zki2Ve" dir="auto">Help rarely</span> </label> <label class="T5pZmf"> <input type="radio" name="answer18{NMB}" value="3"> <span class="Zki2Ve" dir="auto">Help sometimes</span> </label> <label class="T5pZmf"> <input type="radio" name="answer18{NMB}" value="4"> <span class="Zki2Ve" dir="auto">Help most of the times</span> </label> <label class="T5pZmf"> <input type="radio" name="answer18{NMB}" value="5"> <span class="Zki2Ve" dir="auto">Always help</span> </label> </div> <div jsname="Rfh2Tc" class="SL4Sz" id="i25{NMB}" role="alert"></div> </div> </div> <div id="Area {NMB}"></div> </form> </div>'

0

There are 0 best solutions below