<style type="text/css"> .stWord { font-family: Times New Roman; font-size : 14pt; width : 25pt; } .stExp { font-family: Times New Roman; font-size : 14pt; } </style> <table align="center" cellspacing="5" width="500"> <tbody> <tr> <td class="colorborder"> поиск слова "4 букв" - правильно: <span id="ver5countnum">0</span> - предыдущее: <span id="ver5counttext">0</span><hr> <table width="350" align="center"><tr><td> <input class="stWord" id="ver5Wordinput0" type="text" value="" /> <input class="stWord" id="ver5Wordinput1" type="text" value="" /> </td></tr> <tr><td> <input class="stWord" id="ver5Wordinput2" type="text" value="" /> <input class="stWord" id="ver5Wordinput3" type="text" value="" /> </td></tr> </table> <div> <input onclick="ver5startWrd();" type="button" value="старт" /> <input onclick="document.getElementById('ver5hintbutton').value = ver5maska; document.getElementById('ver5svg'+ver5nummas).style.borderColor='blue'; ver5countrun-=2; document.getElementById('ver5countnum').innerHTML = ver5countrun;" type="button" value="подсказка" id="ver5hintbutton"/> </div> </td> </tr> </tbody> </table> <script src="https://sklees.narod.ru/js/findword/dicword.js"></script> <script> function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; } </script> <script> var ver5mas = [ [0,1,3,2], [0,2,3,1], [1,3,2,0], [1,0,2,3], [2,0,1,3], [2,3,1,0], [3,1,0,2], [3,2,0,1] ]; var ver5maska = ""; var ver5nummas = 0; var ver5countrun = 0; function ver5startWrd() { var ver5flagno = true; ver5maska = ""; while ( ver5flagno ) { ver5maska = wrd[getRandomInt(0, wrd.length)].toLowerCase(); if (ver5maska.length === 4) ver5flagno = false; } // ver5nummas = getRandomInt(0, ver5mas.length); document.getElementById('ver5Wordinput'+ver5mas[ver5nummas][0]).value = ver5maska[0]; document.getElementById('ver5Wordinput'+ver5mas[ver5nummas][1]).value = ver5maska[1]; document.getElementById('ver5Wordinput'+ver5mas[ver5nummas][2]).value = ver5maska[2]; document.getElementById('ver5Wordinput'+ver5mas[ver5nummas][3]).value = ver5maska[3]; // document.getElementById('ver5hintbutton').value = "подсказка"; for (var i = 0; i < ver5mas.length; i++) { document.getElementById('ver5svg'+i).style.borderColor="#FFF5D7"; } } </script> <table align="center" cellspacing="5" width="500"> <tbody> <tr> <td class="colorborder"> <script> for (var i = 0; i < ver5mas.length; i++) { document.write('<svg width="64" height="64" style="background:#FFF5D7; cursor:pointer; border: 1px solid #FFF5D7;" id="ver5svg'+i+'" align="left" onclick="ver5runaclick('+i+')"> <rect x="30" y="30" width="50" height="50" fill="#FFF5D7" stroke="#0094FF" stroke-width="2" id="ver5rect0svg'+i+'" rx="10"/> <rect x="40" y="40" width="50" height="50" fill="#FFF5D7" stroke="#0094FF" stroke-width="2" id="ver5rect1svg'+i+'" rx="10"/> <rect x="50" y="50" width="50" height="50" fill="#FFF5D7" stroke="#0094FF" stroke-width="2" id="ver5rect2svg'+i+'" rx="10"/> <rect x="60" y="60" width="50" height="50" fill="#FFF5D7" stroke="#0094FF" stroke-width="2" id="ver5rect3svg'+i+'" rx="10"/> <line x1="0" y1="80" x2="100" y2="20" stroke="red" stroke-width="3" id="ver5line0svg'+i+'"/> <line x1="0" y1="80" x2="100" y2="20" stroke="red" stroke-width="3" id="ver5line1svg'+i+'"/> <line x1="0" y1="80" x2="100" y2="20" stroke="red" stroke-width="3" id="ver5line2svg'+i+'"/> </svg>'); } </script> </td> </tr> </tbody> </table> <script> var ver5widthcell = 8; var ver5coordXR = [ver5widthcell, ver5widthcell*3, ver5widthcell, ver5widthcell*3]; var ver5coordYR = [ver5widthcell, ver5widthcell, ver5widthcell*3, ver5widthcell*3]; for (var i = 0; i < ver5mas.length; i++) { for (var k = 0; k < 4; k++) { document.getElementById('ver5rect'+k+'svg'+i).setAttributeNS(null, 'x', ver5coordXR[k]); document.getElementById('ver5rect'+k+'svg'+i).setAttributeNS(null, 'y', ver5coordYR[k]); document.getElementById('ver5rect'+k+'svg'+i).setAttributeNS(null, 'width', ver5widthcell*2); document.getElementById('ver5rect'+k+'svg'+i).setAttributeNS(null, 'height', ver5widthcell*2); } // for (var k = 0; k < 3; k++) { document.getElementById('ver5line'+k+'svg'+i).setAttributeNS(null, 'x1', ver5widthcell+ver5coordXR[ver5mas[i][k]]); document.getElementById('ver5line'+k+'svg'+i).setAttributeNS(null, 'y1', ver5widthcell+ver5coordYR[ver5mas[i][k]]); document.getElementById('ver5line'+k+'svg'+i).setAttributeNS(null, 'x2', ver5widthcell+ver5coordXR[ver5mas[i][k+1]]); document.getElementById('ver5line'+k+'svg'+i).setAttributeNS(null, 'y2', ver5widthcell+ver5coordYR[ver5mas[i][k+1]]); } // document.getElementById('ver5rect'+ver5mas[i][0]+'svg'+i).setAttributeNS(null, 'fill', '#00FFF6'); } function ver5runaclick(num) { if(num === ver5nummas) { ver5countrun+=5; document.getElementById('ver5counttext').innerHTML = ver5maska; ver5startWrd(); } else { ver5countrun--; document.getElementById('ver5svg'+num).style.borderColor="red"; } document.getElementById('ver5countnum').innerHTML = ver5countrun; } </script>