Записи

<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>