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>