jcross Esempio di cruciverba (crossword) in javascript 1 0 True True 0 0 iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAP///6XZn90AAAAJcEhZcwAACwwAAAsMAT9AIsgAAAAHdElNRQfYDAsWGgpoG5LlAAAAHXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBUaGUgR0lNUO9kJW4AAAAXSURBVBjTYwCCggQoAoLyBCiCizMwAAB5OQaW0graMAAAAABJRU5ErkJggg== h = 0; function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); ev.dataTrasnfer.effectAllowed='copy'; } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.dataTransfer.dropEffect='copy'; ev.target.appendChild(document.getElementById(data).cloneNode(true)); checkAnswers(); } function checkAnswers() { var numOfRows = 9; var numOfCols = 6; var row,col,cellNum; var cell,line,jigsaw = ""; var chr; for (row = 0; row <numOfRows; row++) { line = ''; for (col = 1; col<=numOfCols; col++) { cellNum = row * numOfCols + col; cell = document.getElementById('div'+cellNum).innerHTML; var n = cell.indexOf("<img id="); if (n != -1) { var id_str = cell.substring(n+10,n+12); var id = parseInt(id_str); chr = String.fromCharCode(65 + id - 1); } else { chr = '#'; } line += chr; } jigsaw += line; } document.domanda.custom_%NAME%_%NUM%.value = 0; if (jigsaw == "##N#S##G#I###L##IL#O###E##RD#A##EE###IJACK##OP###NT###") { document.domanda.custom_%NAME%_%NUM%.value = 1; } } <div id="page"> <p id="heading">Hilariously Simple Crossword Puzzle</p> <div id="content_left"> <p style="background-color:#FF0000;color:#FFFFFF;width:130px;padding:5px;text-align:center;font-size:large;border-radius:5px;">Alphabet</p> <p style="font-size:small;color:#0000FF"><strong>Drag and drop</strong> letters into the <em>puzzle</em> from here.</p> <img id="i1" src="media/a.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i2" src="media/b.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i3" src="media/c.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i4" src="media/d.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /><br /> <img id="i5" src="media/e.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i6" src="media/f.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i7" src="media/g.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i8" src="media/h.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /><br /> <img id="i9" src="media/i.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i10" src="media/j.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i11" src="media/k.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i12" src="media/l.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /><br /> <img id="i13" src="media/m.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i14" src="media/n.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i15" src="media/o.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i16" src="media/p.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /><br /> <img id="i17" src="media/q.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i18" src="media/r.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i19" src="media/s.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i20" src="media/t.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /><br /> <img id="i21" src="media/u.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i22" src="media/v.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i23" src="media/w.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i24" src="media/x.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /><br /> <img id="i25" src="media/y.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <img id="i26" src="media/z.jpg" width="30" height="30" draggable="true" ondragstart="drag(event)" /> <p style="font-size:small;color:#0000FF">Made a <strong>mistake</strong> ? <strong>Just click</strong> the <em>sqaure</em> containing the letter once, to clear it up.</p> </div> <div id="content_middle"> <!---1st row----> <div id="puzzle"> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" > <img src="media/1r.jpg" id="img1" width="30" height="30" alt="letterR" /> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" > <img src="media/2i.jpg" id="img1" width="30" height="30" alt="letterI" /> </div> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''"> </div> <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)" > <img src="media/3g.jpg" id="img1" width="30" height="30" alt="letterG" /> </div> <div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div style="clear:both;"></div> <!---2nd row----> <div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > <!--img src="media/../images/dollar.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="50" height="50"--> </div> <div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div12" ondrop="drop(event)" ondragover="allowDrop(event)" > <img src="media/5f.jpg" id="img5" width="30" height="30" alt="letterF" /> </div> <div style="clear:both;"></div> <!----3rd row----> <div id="div13" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div14" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div15" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div16" ondrop="drop(event)" ondragover="allowDrop(event)" > <img src="media/6n.jpg" id="img5" width="30" height="30" alt="letter" /> </div> <div id="div17" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div18" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div style="clear:both;"></div> <!----4th row----> <div id="div19" ondrop="drop(event)" ondragover="allowDrop(event)" > </div> <div id="div20" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div21" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div22" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div23" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div24" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div style="clear:both;"></div> <!----5th row----> <div id="div25" ondrop="drop(event)" ondragover="allowDrop(event)" > <img src="media/7w.jpg" id="img1" width="30" height="30" alt="letterW" /> </div> <div id="div26" ondrop="drop(event)" ondragover="allowDrop(event)" > <img src="media/8o.jpg" id="img8" width="30" height="30" alt="letterO" /> </div> <div id="div27" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div28" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div29" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div30" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div style="clear:both;"></div> <!---6th row----> <div id="div31" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div32" ondrop="drop(event)" ondragover="allowDrop(event)" > <img src="media/9n.jpg" id="img9" width="30" height="30" alt="letterN" /> </div> <div id="div33" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div34" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div35" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div36" ondrop="drop(event)" ondragover="allowDrop(event)" > </div> <div style="clear:both;"></div> <!---7th row----> <div id="div37" ondrop="drop(event)" ondragover="allowDrop(event)" > <img src="media/10h.jpg" id="img10" width="30" height="30" alt="letterH" /> </div> <div id="div38" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div39" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div40" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > <!--img src="media/../images/dollar.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="50" height="50"--> </div> <div id="div41" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div42" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div style="clear:both;"></div> <!----8th row----> <div id="div43" ondrop="drop(event)" ondragover="allowDrop(event)" > </div> <div id="div44" ondrop="drop(event)" ondragover="allowDrop(event)" > <img src="media/11o.jpg" id="img11" width="30" height="30" alt="letterO" /> </div> <div id="div45" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div46" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div47" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div48" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div style="clear:both;"></div> <!----9th row----> <div id="div49" ondrop="drop(event)" ondragover="allowDrop(event)" > <img src="media/aa.jpg" id="img11" width="30" height="30" alt="letterA" /> </div> <div id="div50" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div51" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''"> </div> <div id="div52" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div53" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> <div id="div54" ondrop="drop(event)" ondragover="allowDrop(event)" onclick="this.innerHTML=''" > </div> </div> </div> <div id="content_right"> <p style="background-color:#FF0000;color:#FFFFFF;width:100px;padding:5px;border-radius:5px;text-align:center;">Clues</p> <p><strong>Across</strong></p> <table> <tr><td>1.</td><td>Evidence that Saturn committed polygamy.</td></tr> <tr><td>6.</td><td>A mathematician says: "Divide 1 by the opposite of finite to get this."</td></tr> <tr><td>7.</td><td> When Microsoft says it will be on top of Windows-8, we have to believe its ....</td></tr> <tr><td>9.</td><td>Formerly Known As</td></tr> <tr><td>10.</td><td> Jack never gets greetings from well-wishers at the airport for this fear.</td></tr> <tr><td>11.</td><td>Sounded death knell for procedural programming.</td></tr> </table> <p><strong>Down</strong></p> <table> <tr><td>2.</td><td>Not a home to invest your money in, for summer.</td></tr> <tr><td>3.</td><td>Noble spirits lives in this.</td></tr> <tr><td>5.</td><td>Buy one stray dog and get one ....</td></tr> <tr><td>8.</td><td>Opinion - 3.142.</td></tr> </table> </div> </div> <div style="clear:both;"></div>