Записи

<table width="500" height="240" align="center" class="colorborder"><tr><td> 
 <style>
 .variable{
 font-weight: bold;
 }
 .background{
 fill: none;
 stroke: #444;
 stroke-width: 1;
 stroke-dasharray: 5, 5;
 }
 .control_line{
 stroke: #28f;
 stroke-width: 0.5;
 }
 .point1{
 fill: #28A86B;
 }
 .point2{
 fill: #6495ED;
 }
 .point3{
 fill: #FF7878;
 }
 .point4{
 fill: #8D5FD3;
 }
 #ver31idexample_shape{
 fill: none;
 stroke: #111;
 stroke-width: 0.8;
 }
 #ver32idexample_shape{
 fill: none;
 stroke: #111;
 stroke-width: 0.8;
 }
 #ver33idexample_shape{
 fill: none;
 stroke: #111;
 stroke-width: 0.8;
 }
 .control_point{
 fill: #FFF;
 opacity: 0;
 stroke: #888;
 stroke-width: 2;
 cursor: pointer;
 }
 .control_point:hover{
 opacity: 0.5;
 }
 .invisible{
 pointer-events: none;
 }
 #ver3myPoint1:hover{
 fill: blue;
 }
 </style>

<svg 
 width="500" height="500"
 onload="ver3init(evt)"
 onmouseup="ver3deselect()">
 
 <g class="invisible">
 <path id="ver31idexample_shape" d="M20 100 C150 20 180 150 480 100 " />
 <path id="ver32idexample_shape" d="M20 200 C150 20 180 150 480 200 " />
 <path id="ver33idexample_shape" d="M20 300 C150 20 180 150 480 300 " />
 </g>
 
 <g transform="translate(20,100)" >
 <circle class="control_point" cx="0" cy="0" r="15" onmousedown="ver31selectElement(evt, 1)" />
 <circle class="point1 invisible" cx="0" cy="0" r="5" id="idpoint311" />
 </g>

 <g transform="translate(480,100)" >
 <circle class="control_point" cx="0" cy="0" r="15" onmousedown="ver31selectElement(evt, 4)" />
 <circle class="point4 invisible" cx="0" cy="0" r="5" id="idpoint314" />
 </g>
 
 <g transform="translate(20,200)" >
 <circle class="control_point" cx="0" cy="0" r="15" onmousedown="ver32selectElement(evt, 1)" />
 <circle class="point1 invisible" cx="0" cy="0" r="5" id="idpoint321" />
 </g>

 <g transform="translate(480,200)" >
 <circle class="control_point" cx="0" cy="0" r="15" onmousedown="ver32selectElement(evt, 4)" />
 <circle class="point4 invisible" cx="0" cy="0" r="5" id="idpoint324" />
 </g>
 
 <g transform="translate(20,300)" >
 <circle class="control_point" cx="0" cy="0" r="15" onmousedown="ver33selectElement(evt, 1)" />
 <circle class="point1 invisible" cx="0" cy="0" r="5" id="idpoint331" />
 </g>

 <g transform="translate(480,300)" >
 <circle class="control_point" cx="0" cy="0" r="15" onmousedown="ver33selectElement(evt, 4)" />
 <circle class="point4 invisible" cx="0" cy="0" r="5" id="idpoint334" />
 </g>
 
 <text x="200" y="410">
 <tspan id="ver3myPoint2" class="point2 variable" ></tspan>
 </text>
 <text x="200" y="430">
 <tspan id="ver3myPoint1" class="point2 variable" style="cursor:pointer" onclick="ver3clickstart()">start</tspan>
 </text>
 
 </svg>
 
 <script type="text/javascript">
 var ver31selectedPoint = 0;
 var ver32selectedPoint = 0;
 var ver33selectedPoint = 0;
 var ver31dx = 0;
 var ver31dy = 0;
 var ver32dx = 0;
 var ver32dy = 0;
 var ver33dx = 0;
 var ver33dy = 0;
 var ver3ArPlaceLGame = [1,2,3];
 var ver3ArPlaceRGame = [5,5,5];
 
 var ver31example_shape;
 var ver32example_shape;
 var ver33example_shape;
 var ver31coords = [0, 0, 20, 100, 150, 20, 180, 150, 480, 100];
 var ver32coords = [0, 0, 20, 200, 150, 20, 180, 150, 480, 200];
 var ver33coords = [0, 0, 20, 300, 150, 20, 180, 150, 480, 300];
 var ver3ArPlace = [[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,2,1],[3,1,2]];
 
 function ver3getRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min)) + min;
 }
 
 function ver3init(evt) {
 ver31example_shape = document.getElementById('ver31idexample_shape');
 ver32example_shape = document.getElementById('ver32idexample_shape');
 ver33example_shape = document.getElementById('ver33idexample_shape');
 };
 
 function ver31selectElement(evt, point){
 ver31selectedPoint = point;
 control_point = evt.target.parentNode;
 ver31dx = ver31coords[ver31selectedPoint*2] - evt.clientX;
 ver31dy = ver31coords[ver31selectedPoint*2 + 1] - evt.clientY;
 ver3clickpoint();
 };
 
 function ver32selectElement(evt, point){
 ver32selectedPoint = point;
 control_point = evt.target.parentNode;
 ver32dx = ver32coords[ver32selectedPoint*2] - evt.clientX;
 ver32dy = ver32coords[ver32selectedPoint*2 + 1] - evt.clientY;
 ver3clickpoint();
 };
 
 function ver33selectElement(evt, point){
 ver33selectedPoint = point;
 control_point = evt.target.parentNode;
 ver33dx = ver33coords[ver33selectedPoint*2] - evt.clientX;
 ver33dy = ver33coords[ver33selectedPoint*2 + 1] - evt.clientY;
 ver3clickpoint();
 };
 
 function ver3clickstart(){
ver3ArPlaceLGame = ver3ArPlace[ver3getRandomInt(0, 6)];
eval("ver3"+ver3ArPlaceLGame[0]+"coords")[9] = 100;
eval("ver3"+ver3ArPlaceLGame[1]+"coords")[9] = 200;
eval("ver3"+ver3ArPlaceLGame[2]+"coords")[9] = 300;

 var d = "M";
 for (var i=2; i<ver31coords.length; i+=2){
 if (i === 4) { d += "C";
 for (var j=0; j<2; j+=1){
 d += " " + ver3getRandomInt(50, 150);
 d += "," + ver3getRandomInt(50, 450);
 d += " " + ver3getRandomInt(50, 150);
 }
 }
 d += " " + ver31coords[i] + "," + ver31coords[i+1];
 }
 ver31example_shape.setAttributeNS(null, "d", d);
 
 var d = "M";
 for (var i=2; i<ver32coords.length; i+=2){
 if (i === 4) { d += "C";
 for (var j=0; j<2; j+=1){
 d += " " + ver3getRandomInt(50, 150);
 d += "," + ver3getRandomInt(50, 450);
 d += " " + ver3getRandomInt(50, 150);
 }
 }
 d += " " + ver32coords[i] + "," + ver32coords[i+1];
 }
 ver32example_shape.setAttributeNS(null, "d", d);

 var d = "M";
 for (var i=2; i<ver33coords.length; i+=2){
 if (i === 4) { d += "C";
 for (var j=0; j<4; j+=1){
 d += " " + ver3getRandomInt(50, 150);
 d += "," + ver3getRandomInt(50, 450);
 d += " " + ver3getRandomInt(50, 150);
 }
 }
 d += " " + ver33coords[i] + "," + ver33coords[i+1];
 }
 ver33example_shape.setAttributeNS(null, "d", d);
 
 document.getElementById("ver3myPoint1").innerHTML = "поиск пути";
 document.getElementById("ver3myPoint2").innerHTML = "";
};

 function ver3clickpoint(){
 if (ver31selectedPoint === 1)
 if (document.getElementById('idpoint311').style.fill === "red") {
 document.getElementById('idpoint311').style.fill = "gray";
 } else { document.getElementById('idpoint311').style.fill = "red"; }
 if (ver32selectedPoint === 1)
 if (document.getElementById('idpoint321').style.fill === "blue") {
 document.getElementById('idpoint321').style.fill = "gray";
 } else { document.getElementById('idpoint321').style.fill = "blue"; }
 if (ver33selectedPoint === 1)
 if (document.getElementById('idpoint331').style.fill === "yellow") {
 document.getElementById('idpoint331').style.fill = "gray";
 } else { document.getElementById('idpoint331').style.fill = "yellow"; }
 
 if (ver31selectedPoint === 4)
 if (document.getElementById('idpoint314').style.fill === "red") {document.getElementById('idpoint314').style.fill = "blue"; ver3ArPlaceRGame[0] = 2;} else {
 if (document.getElementById('idpoint314').style.fill === "blue") {document.getElementById('idpoint314').style.fill = "yellow"; ver3ArPlaceRGame[0] = 3;} else { 
 if (document.getElementById('idpoint314').style.fill === "yellow") {document.getElementById('idpoint314').style.fill = "gray"; ver3ArPlaceRGame[0] = 4;} else {
 document.getElementById('idpoint314').style.fill = "red"; ver3ArPlaceRGame[0] = 1;}}}
 
 if (ver32selectedPoint === 4)
 if (document.getElementById('idpoint324').style.fill === "red") {document.getElementById('idpoint324').style.fill = "blue"; ver3ArPlaceRGame[1] = 2;} else {
 if (document.getElementById('idpoint324').style.fill === "blue") {document.getElementById('idpoint324').style.fill = "yellow"; ver3ArPlaceRGame[1] = 3;} else { 
 if (document.getElementById('idpoint324').style.fill === "yellow") {document.getElementById('idpoint324').style.fill = "gray"; ver3ArPlaceRGame[1] = 4;} else {
 document.getElementById('idpoint324').style.fill = "red"; ver3ArPlaceRGame[1] = 1;}}}

 if (ver33selectedPoint === 4)
 if (document.getElementById('idpoint334').style.fill === "red") {document.getElementById('idpoint334').style.fill = "blue"; ver3ArPlaceRGame[2] = 2;} else {
 if (document.getElementById('idpoint334').style.fill === "blue") {document.getElementById('idpoint334').style.fill = "yellow"; ver3ArPlaceRGame[2] = 3;} else { 
 if (document.getElementById('idpoint334').style.fill === "yellow") {document.getElementById('idpoint334').style.fill = "gray"; ver3ArPlaceRGame[2] = 4;} else {
 document.getElementById('idpoint334').style.fill = "red"; ver3ArPlaceRGame[2] = 1;}}} 
 

 document.getElementById("ver3myPoint1").innerHTML = "поиск пути";
 document.getElementById("ver3myPoint2").innerHTML = "";
 if (ver3ArPlaceLGame[0] === ver3ArPlaceRGame[0]) 
 if (ver3ArPlaceLGame[1] === ver3ArPlaceRGame[1]) 
 if (ver3ArPlaceLGame[2] === ver3ArPlaceRGame[2]) {
 document.getElementById("ver3myPoint1").innerHTML = "старт";
 document.getElementById("ver3myPoint2").innerHTML = "путь правильный";
 } 
 };
 
 function ver3deselect(){
 ver31selectedPoint = 0;
 ver32selectedPoint = 0;
 ver33selectedPoint = 0;
 }
 
</script>

</td></tr> 
</table>
 

<table width="300" height="550" align="center" class="colorborder" cellspacing="10" cellpadding="10"><tr><td> 
<svg version="1.1"
 xmlns:svg="http://www.w3.org/2000/svg"
 xmlns="http://www.w3.org/2000/svg"
 width="300" height="550" style="background:#FFF5D7;"
 onload="v44init(evt)"
 onmousemove="v44drag(evt)"
 onmouseup="v44deselect()">
 
 <style>
 .variable{
 font-weight: bold;
 }
 .background{
 fill: none;
 stroke: #444;
 stroke-width: 1;
 stroke-dasharray: 5, 5;
 }
 .control_line{
 stroke: #28f;
 stroke-width: 0.5;
 }
 .point1{
 fill: #28A86B;
 }
 .point2{
 fill: #6495ED;
 }
 .point3{
 fill: #FF7878;
 }
 .point4{
 fill: #8D5FD3;
 }
 #v44example_shape{
 fill: none;
 stroke: #111;
 stroke-width: 0.8;
 }
 .control_point{
 fill: #FFF;
 opacity: 0;
 stroke: #888;
 stroke-width: 2;
 cursor: pointer;
 }
 .control_point:hover{
 opacity: 0.5;
 }
 .invisible{
 pointer-events: none;
 }
 </style>
 
 <script type="text/ecmascript"><![CDATA[
 var v44svgDoc;
 var v44selectedPoint = 0;
 var v44dx = 0;
 var v44dy = 0;
 
 var v44example_shape;
 var v44text_variables;
 var v44controls_lines;
 var v44coords = [0, 0, 10, 350, 150, 350, 290, 350];
 
 var v44xSh = -20;
 var v44stepxSh = 1.0;
 var v44ySh = 30;
 var v44stepySh = 1.0;
 var v44signxSh = 1;
 var v44signySh = 1;
 var v44parX2 = 150;
 var v44parY2 = 330;
 var v44parX1 = 150;
 var v44parY1 = 350;
 
 var v44leftX = 10;
 var v44leftY = 350;
 var v44rightX = 290;
 var v44rightY = 350;
 
 var v44flagRun = false;
 var v44flagPoint = 0;
 var v44tempnum = 1;
 
 var v44myline1X = 30;
 var v44myline2X = 100;
 var v44myline3X = 170;
 var v44myline4X = 240;
 var v44myline5X = -20;
 
 function v44init(evt) {
 if ( window.v44svgDocument == null ) {
 v44svgDoc = evt.target.ownerDocument;
 } 
 v44example_shape = v44svgDoc.getElementById('v44example_shape');
 v44controls_lines = [v44svgDoc.getElementById('v44control_line1'),
 v44svgDoc.getElementById('v44control_line2')] ;
 v44text_variables = [];
 for (var i=1; i<=3; i++){
 v44text_variables.push(v44svgDoc.getElementById('v44variable'+i));
 }
 };
 
 function v44selectElement(evt, point){
 v44selectedPoint = point;
 control_point = evt.target.parentNode;
 v44dx = v44coords[v44selectedPoint*2] - evt.clientX;
 v44dy = v44coords[v44selectedPoint*2 + 1] - evt.clientY;
 };
 
 function v44drag(evt){
 if (v44selectedPoint === 0) { return; }
 
 var x = evt.clientX + v44dx;
 var y = evt.clientY + v44dy;
 v44coords[v44selectedPoint*2] = x;
 v44coords[v44selectedPoint*2 + 1] = y;
 //
 if (v44selectedPoint === 2) {
 document.getElementById('v44myCircle1').setAttributeNS(null, "cx", x);
 document.getElementById('v44myCircle2').setAttributeNS(null, "cx", x);
 document.getElementById('v44myCircle1').setAttributeNS(null, "cy", y);
 document.getElementById('v44myCircle2').setAttributeNS(null, "cy", y);
 //
 v44parX1 = x;
 v44xSh = x;
 v44parY1 = y;
 v44ySh = y;
 document.getElementById('v44myline11').setAttributeNS(null, "x2", x);
 document.getElementById('v44myline11').setAttributeNS(null, "y2", y);
 }
 if (v44selectedPoint === 1) {
 v44leftX = x;
 v44leftY = y;
 v44parX2 = (v44leftX + v44rightX)/2;
 v44parY2 = (v44leftY + v44rightY)/2;
 document.getElementById('v44myline11').setAttributeNS(null, "x1", v44parX2);
 document.getElementById('v44myline11').setAttributeNS(null, "y1", v44parY2);
 document.getElementById('v44myCircle3').setAttributeNS(null, "cx", v44parX2);
 document.getElementById('v44myCircle3').setAttributeNS(null, "cy", v44parY2);
 }
 if (v44selectedPoint === 3) {
 v44rightX = x;
 v44rightY = y;
 v44parX2 = (v44leftX + v44rightX)/2;
 v44parY2 = (v44leftY + v44rightY)/2;
 document.getElementById('v44myline11').setAttributeNS(null, "x1", v44parX2);
 document.getElementById('v44myline11').setAttributeNS(null, "y1", v44parY2);
 document.getElementById('v44myCircle3').setAttributeNS(null, "cx", v44parX2);
 document.getElementById('v44myCircle3').setAttributeNS(null, "cy", v44parY2);
 }
 //
 if (v44selectedPoint % 2 === 0){
 v44controls_lines[0].setAttributeNS(null, "x2", x);
 v44controls_lines[0].setAttributeNS(null, "y2", y);
 v44controls_lines[1].setAttributeNS(null, "x2", x);
 v44controls_lines[1].setAttributeNS(null, "y2", y);
 } else {
 var n = Math.floor(v44selectedPoint/2);
 v44controls_lines[n].setAttributeNS(null, "x1", x);
 v44controls_lines[n].setAttributeNS(null, "y1", y);
 }
 //
 var d = "M";
 for (var i=2; i<v44coords.length; i+=2){
 if (i === 4) { d += "C"; }
 d += " " + eval(v44coords[i]) + " " + eval(v44coords[i+1]);
 if (i === 4) d += " " + eval(v44coords[i]) + " " + eval(v44coords[i+1]);
 }
 v44example_shape.setAttributeNS(null, "d", d);
 control_point.setAttributeNS(null, "transform", "translate(" + x + "," + y + ")");
 v44text_variables[v44selectedPoint-1].firstChild.data = x + "," + y;
 };
 
 function v44deselect(){
 if (v44selectedPoint === 2) v44flagRun = true;
 v44selectedPoint = 0;
 }
 
 var v44timer = setInterval(fAnimv44, 50);
 
 function fAnimv44() {
 //lefttorigth
 v44myline1X += 1; if (v44myline1X > 300) v44myline1X = -40;
 document.getElementById('v44myline1').setAttributeNS(null, "x1", v44myline1X);
 document.getElementById('v44myline1').setAttributeNS(null, "x2", v44myline1X+40);
 v44myline2X += 1; if (v44myline2X > 300) v44myline2X = -40;
 document.getElementById('v44myline2').setAttributeNS(null, "x1", v44myline2X);
 document.getElementById('v44myline2').setAttributeNS(null, "x2", v44myline2X+40);
 v44myline3X += 1; if (v44myline3X > 300) v44myline3X = -40;
 document.getElementById('v44myline3').setAttributeNS(null, "x1", v44myline3X);
 document.getElementById('v44myline3').setAttributeNS(null, "x2", v44myline3X+40);
 v44myline4X += 1; if (v44myline4X > 300) v44myline4X = -40;
 document.getElementById('v44myline4').setAttributeNS(null, "x1", v44myline4X);
 document.getElementById('v44myline4').setAttributeNS(null, "x2", v44myline4X+40);
 v44myline5X += 1; if (v44myline5X > 300) v44myline5X = -40;
 //ballhome
 if (v44flagRun === false) if (v44selectedPoint === 0) {
 v44xSh += 1; if (v44xSh > 300) v44xSh = -40;
 document.getElementById('v44myCircle1').setAttributeNS(null, "cx", v44xSh);
 document.getElementById('v44myCircle2').setAttributeNS(null, "cx", v44xSh);
 }
 //
 if (v44flagRun) {
 if (v44parX2 < v44parX1) {v44signxSh = -1} else {v44signxSh = 1};
 if (v44signxSh > 0) 
 {v44stepxSh = (v44parX2 - v44parX1)/15.0;}
 else
 {v44stepxSh = (v44parX1 - v44parX2)/15.0;}
// 
 v44xSh = v44xSh + v44stepxSh*v44signxSh;
 if (v44xSh > 300) v44xSh = 0;
 if (v44xSh < 0) v44xSh = 300;
//
 if (v44parY2 < v44parY1) {v44signySh = -1} else {v44signySh = 1};
if (v44signySh > 0) 
{v44stepySh = (v44parY2 - v44parY1)/15.0;}
 else
{v44stepySh = (v44parY1 - v44parY2)/15.0;}
//
 v44ySh = v44ySh + v44stepySh*v44signySh;
 if (v44ySh > 500) v44ySh = 0;
 if (v44ySh < 0) v44ySh = 500;
//
 document.getElementById('v44myCircle1').setAttributeNS(null, "cx", v44xSh);
 document.getElementById('v44myCircle2').setAttributeNS(null, "cx", v44xSh);
 document.getElementById('v44myCircle1').setAttributeNS(null, "cy", v44ySh);
 document.getElementById('v44myCircle2').setAttributeNS(null, "cy", v44ySh);
 //
 if (v44ySh < 20) { v44flagRun = false; v44flagPoint = v44flagPoint - 2}
 //
 if (v44ySh > 25) if (v44ySh < 40) {
 if (v44xSh > v44myline1X) if (v44xSh < (v44myline1X+40)) if (v44tempnum === 1) {v44flagPoint = v44flagPoint + 1; v44flagRun = false; v44colorChage();}
 if (v44xSh > v44myline2X) if (v44xSh < (v44myline2X+40)) if (v44tempnum === 2) {v44flagPoint = v44flagPoint + 2; v44flagRun = false; v44colorChage();}
 if (v44xSh > v44myline3X) if (v44xSh < (v44myline3X+40)) if (v44tempnum === 3) {v44flagPoint = v44flagPoint + 3; v44flagRun = false; v44colorChage();}
 if (v44xSh > v44myline4X) if (v44xSh < (v44myline4X+40)) if (v44tempnum === 4) {v44flagPoint = v44flagPoint + 4; v44flagRun = false; v44colorChage();}
 if (v44xSh > v44myline5X) if (v44xSh < (v44myline5X+10)) {v44flagPoint = v44flagPoint + 5; v44flagRun = false; v44colorChage();}
 }
 document.getElementById("v44myPoint1").innerHTML = v44flagPoint; 
 }
}
 function v44getRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min)) + min;
 }
 function v44colorChage() {
 document.getElementById('v44myline1').style.stroke = "#28f";
 document.getElementById('v44myline1').style.strokeWidth = 0.5;
 document.getElementById('v44myline2').style.stroke = "#28f";
 document.getElementById('v44myline2').style.strokeWidth = 0.5;
 document.getElementById('v44myline3').style.stroke = "#28f";
 document.getElementById('v44myline3').style.strokeWidth = 0.5;
 document.getElementById('v44myline4').style.stroke = "#28f";
 document.getElementById('v44myline4').style.strokeWidth = 0.5;
 v44tempnum = v44getRandomInt(1,5);
 document.getElementById('v44myline'+v44tempnum).style.stroke = "#FF7878";
 document.getElementById('v44myline'+v44tempnum).style.strokeWidth = 2;
} 
 ]]> </script>
 
 <g class="invisible">
 <path id="v44example_shape" d="M10 350 C150 350 150 350 290 350 " />
 <line class="control_line" id="v44control_line1" x1="10" y1="350" x2="150" y2="350" />
 <line class="control_line" id="v44control_line2" x1="290" y1="350" x2="150" y2="350" />
 </g>
 
 <g transform="translate(10,350)" >
 <circle class="control_point" cx="0" cy="0" r="10" onmousedown="v44selectElement(evt, 1)" />
 <circle class="point1 invisible" cx="0" cy="0" r="3" />
 </g>

 <g transform="translate(150,350)" >
 <circle class="control_point" cx="0" cy="0" r="10" onmousedown="v44selectElement(evt, 2)" />
 <circle class="point2 invisible" cx="0" cy="0" r="3" id="v44myCircle0"/>
 </g>

 <g transform="translate(290,350)" >
 <circle class="control_point" cx="0" cy="0" r="10" onmousedown="v44selectElement(evt, 3)" />
 <circle class="point3 invisible" cx="0" cy="0" r="3" />
 </g>
 
 <text x="20" y="530">
 <tspan><path</tspan>
 <tspan>d="</tspan><tspan class="point1 variable">M<tspan id="v44variable1">10,350</tspan></tspan>
 Q<tspan class="point2 variable" id="v44variable2">150,350</tspan>
 <tspan class="point3 variable" id="v44variable4">290,350</tspan>
 <tspan>" /></tspan>
 </text>

 <g transform="translate(0,0)" >
 <circle cx="150" cy="30" r="10" style="fill: #FF7878;" id="v44myCircle1" />
 <circle cx="150" cy="30" r="3" style="fill: #7878FF;" id="v44myCircle2" />
 <circle cx="150" cy="330" r="3" style="fill: #FF7878;" id="v44myCircle3" />
 <line class="control_line" id="v44myline11" x1="150" y1="330" x2="150" y2="350" />
 </g>
 
 <g transform="translate(0,0)" >
 <line class="control_line" x1="30" y1="30" x2="70" y2="30" id="v44myline1" />
 <line class="control_line" x1="100" y1="30" x2="140" y2="30" id="v44myline2" />
 <line class="control_line" x1="170" y1="30" x2="210" y2="30" id="v44myline3" />
 <line class="control_line" x1="240" y1="30" x2="280" y2="30" id="v44myline4" />
 </g>
 
 <text x="20" y="130">
 <tspan>point = </tspan><tspan id="v44myPoint1" class="point2 variable">0</tspan>
 </text>
 
</svg>
</td></tr> 
</table>
<script>
v44colorChage();
</script>
 

<table width="500" cellspacing="10" cellpadding="10" align="center" class="colorborder">
 <tr><td>
<svg width="480" height="480" style="background:#FFF5D7;" onmousedown="v12mouseclick()">
 <circle cx="240" cy="240" r="12" stroke="#FF6A0077" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="24" stroke="#FF6A0077" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="36" stroke="#00FF6A77" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="48" stroke="#FF6A0077" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="60" stroke="#FF6A0077" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="72" stroke="#00FF6A77" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="84" stroke="#FF6A0077" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="96" stroke="#FF6A0077" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="108" stroke="#00FF6A77" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="120" stroke="#FF6A0077" stroke-width="3" fill="#FFFFFF12" />

 <text x="231" y="245"><tspan fill="#0000FF">10</tspan></text>
 <text x="220" y="50"><tspan fill="#0000FF">all point = </tspan><tspan id="v12myPoint1">0</tspan></text>
 <text x="220" y="70"><tspan fill="#00FF00">point = </tspan><tspan id="v12myPoint2">0</tspan></text>
 
 <line id="v12myline1" x1="10" y1="10" x2="10" y2="470" stroke="#006AFF77" stroke-width="2" />
 <line id="v12myline2" x1="10" y1="10" x2="470" y2="10" stroke="#006AFF77" stroke-width="2" />
 
</svg>
</td></tr>
</table>

<script>
var v12timer = setInterval(v12Anim, 10);
var v12timertag = 0;
var v12clicktag = 0;
var v12clickpoint = 0;
var v12allpoint = 0;
var v12timerbool = true;
var pointX = 0;
var pointY = 0;
function v12Anim() {
 if (v12timerbool) {
 v12timertag ++; if (v12timertag > 180) {v12timerbool=false; v12timertag = 180;}
 } else {
 v12timertag --; if (v12timertag < 0) {v12timerbool=true; v12timertag = 0;}
 }
if (v12clicktag == 0) document.getElementById('v12myline1').setAttributeNS(null, "x1", 30);
if (v12clicktag == 0) document.getElementById('v12myline1').setAttributeNS(null, "x2", 30);
if (v12clicktag == 0) document.getElementById('v12myline2').setAttributeNS(null, "y1", 30);
if (v12clicktag == 0) document.getElementById('v12myline2').setAttributeNS(null, "y2", 30);
if (v12clicktag == 1) document.getElementById('v12myline1').setAttributeNS(null, "x1", 30+420* Math.sin( (v12timertag*3.1415926535)/180));
if (v12clicktag == 1) document.getElementById('v12myline1').setAttributeNS(null, "x2", 30+420* Math.sin( (v12timertag*3.1415926535)/180));
if (v12clicktag == 1) pointX = 30+420* Math.sin( (v12timertag*3.1415926535)/180);
if (v12clicktag == 2) document.getElementById('v12myline2').setAttributeNS(null, "y1", 30+420* Math.sin( (v12timertag*3.1415926535)/180));
if (v12clicktag == 2) document.getElementById('v12myline2').setAttributeNS(null, "y2", 30+420* Math.sin( (v12timertag*3.1415926535)/180));
if (v12clicktag == 2) pointY = 30+420* Math.sin( (v12timertag*3.1415926535)/180);
}
function v12mouseclick() {
v12clicktag ++; if (v12clicktag > 3) {v12clicktag = 0;}
v12timertag = 0;
if (v12clicktag == 3) {
 var X = 240 - pointX;
 var Y = 240 - pointY;
 var vector = Math.sqrt(X*X + Y*Y);
 v12clickpoint = 296 - Math.floor(vector);
 v12clickpoint = Math.floor((v12clickpoint / 296)*100);
 v12allpoint = v12allpoint + v12clickpoint;
 document.getElementById("v12myPoint1").innerHTML = v12allpoint; 
 document.getElementById("v12myPoint2").innerHTML = v12clickpoint; 
}
}
</script>
 

<table width="250" height="333" border="0" align="center" class="colorborder" >
 <tr>
 <td colspan="3" id="v21idpoint" align="center">баллов: 0</td>
 </tr>
<tr>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas0" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(9,0)"></canvas></td>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas1" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(10,1)"></canvas></td>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas2" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(11,2)"></canvas></td>
</tr><tr>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas3" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(9,3)"></canvas></td>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas4" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(10,4)"></canvas></td>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas5" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(11,5)"></canvas></td>
</tr><tr>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas6" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(9,6)"></canvas></td>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas7" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(10,7)"></canvas></td>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas8" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(11,8)"></canvas></td>
</tr><tr>
<td colspan="3" align="center"><input type="button" onclick="v21SortClick()" value="старт" /></td>
</tr><tr>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas9" width="76" height="76"></canvas></td>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas10" width="76" height="76"></canvas></td>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas11" width="76" height="76"></canvas></td>
</tr><tr>
<td colspan="3" align="center"><input type="button" onclick="v21NextClick()" value="далее" /></td>
</tr>
</table>

 <script>
 var v21canvas0 = document.querySelector("#v21myCanvas0");
 var v21canvas1 = document.querySelector("#v21myCanvas1");
 var v21canvas2 = document.querySelector("#v21myCanvas2");
 var v21canvas3 = document.querySelector("#v21myCanvas3");
 var v21canvas4 = document.querySelector("#v21myCanvas4");
 var v21canvas5 = document.querySelector("#v21myCanvas5");
 var v21canvas6 = document.querySelector("#v21myCanvas6");
 var v21canvas7 = document.querySelector("#v21myCanvas7");
 var v21canvas8 = document.querySelector("#v21myCanvas8");
 var v21canvas9 = document.querySelector("#v21myCanvas9");
 var v21canvas10 = document.querySelector("#v21myCanvas10");
 var v21canvas11 = document.querySelector("#v21myCanvas11");
 var v21context0 = v21canvas0.getContext("2d");
 var v21context1 = v21canvas1.getContext("2d");
 var v21context2 = v21canvas2.getContext("2d");
 var v21context3 = v21canvas3.getContext("2d");
 var v21context4 = v21canvas4.getContext("2d");
 var v21context5 = v21canvas5.getContext("2d");
 var v21context6 = v21canvas6.getContext("2d");
 var v21context7 = v21canvas7.getContext("2d");
 var v21context8 = v21canvas8.getContext("2d");
 var v21context9 = v21canvas9.getContext("2d");
 var v21context10 = v21canvas10.getContext("2d");
 var v21context11 = v21canvas11.getContext("2d");
 
 var v21ColorFon = ['#F1F3F4','#A080FF','#4080FF','#80FFA0','#80FF40','#60A060', '#408040','#90F090','#62646F','#60F060'];
 var v21ColorNum = ['#62646F','#62646F','#60F060','#FF8040','#FF80A0','#FF80A0','#FF8040','#A080FF','#F1F3F4','#A080FF'];

 var v21Size = '43';
 var v21Left = '53';
 var v21Top = '18';
 var v21Number = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
 var v21level = 0;
 var v21colpoint = 0;
 var v21Array9 = [];
 var v21Array10 = [];
 var v21Array11 = [];
 </script> 
 <script> 
 function v21getRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min)) + min;
 }
 function v21getRandomIntNoRepid(min, max) {
 var tmpValue = v21getRandomInt(min, max);
 var tmpFlagRepid = false;
 for (i=0; i<9; i=i+1) if (v21Number[i] === tmpValue) tmpFlagRepid = true;
 while (tmpFlagRepid === true) {
 tmpValue = v21getRandomInt(min, max);
 tmpFlagRepid = false;
 for (i=0; i<9; i=i+1) if (v21Number[i] === tmpValue) tmpFlagRepid = true;
 }
 return tmpValue; 
 }
 function v21NoArray(num) {
 var tmpnoar = true;
 for (j=0; j<10; j=j+1) {
 if (v21Array9[j] === num) tmpnoar = false;
 if (v21Array10[j] === num) tmpnoar = false;
 if (v21Array11[j] === num) tmpnoar = false;
 }
 return tmpnoar; 
 }
 function v21getRandomIntNoRepid2(num, min, max) {
 var tmpCountWhile = 0;
 var tmpValue = v21getRandomInt(min, max);
 var tmpFlagRepid = v21NoArray(tmpValue);
 while ((tmpFlagRepid === true)&&(tmpCountWhile < 150)) {
 tmpCountWhile ++;
 tmpValue = v21getRandomInt(min, max);
 tmpFlagRepid = v21NoArray(tmpValue);
 }
 return tmpValue; 
 }
 function v21SortClick() {
 for (j=0; j<9; j=j+3) { v21Number[j] = v21getRandomIntNoRepid(1, 10); }
 for (j=1; j<9; j=j+3) { v21Number[j] = v21getRandomIntNoRepid(11, 20); }
 for (j=2; j<9; j=j+3) { v21Number[j] = v21getRandomIntNoRepid(21, 30); }
 //
 for (i=1; i<10; i++) {
 v21Array9[i] = i;
 v21Array10[i] = i+10;
 v21Array11[i] = i+20;
 }
 //
 v21colpoint = 0;
 v21level = 0;
 document.getElementById('v21idpoint').innerHTML = 'баллов = ' + v21colpoint;
 v21NextClick();
 v21Sort();
 }
 function v21Sort() {
 var tmpsort = 0;
 for (m=0; m<5; m=m+1) 
 for (i=m; i<9; i=i+3) 
 for (j=i+3; j<9; j=j+3) 
 if (v21Number[j] < v21Number[i]) {
 tmpsort = v21Number[j];
 v21Number[j] = v21Number[i];
 v21Number[i] = tmpsort;
 }
 }
 function v21NextClick() {
 v21Number[9] = v21getRandomIntNoRepid2(9, 1, 10); 
 v21Number[10] = v21getRandomIntNoRepid2(10, 11, 20); 
 v21Number[11] = v21getRandomIntNoRepid2(11, 21, 30); 
 //
 for (j=1; j<10; j++) {
 if (v21Array9[j] === v21Number[9]) v21Array9[j] = 0;
 if (v21Array10[j] === v21Number[10]) v21Array10[j] = 0;
 if (v21Array11[j] === v21Number[11]) v21Array11[j] = 0;
 }
 //
 v21level ++;
 //
 var tmpArisEmpty = true;
 for (j=1; j<10; j++) if (v21Array9[j] != 0) tmpArisEmpty = false;
 if (tmpArisEmpty === true) for (j=1; j<10; j++) v21Array9[j] = j;
 tmpArisEmpty = true;
 for (j=1; j<10; j++) if (v21Array10[j] != 0) tmpArisEmpty = false;
 if (tmpArisEmpty === true) for (j=1; j<10; j++) v21Array10[j] = j+10;
 tmpArisEmpty = true;
 for (j=1; j<10; j++) if (v21Array11[j] != 0) tmpArisEmpty = false;
 if (tmpArisEmpty === true) for (j=1; j<10; j++) v21Array11[j] = j+20;
 }
 function v21ButtonClick(num1, num2) { 
 if (v21Number[num2] != 0) {
 if (v21Number[num1] === v21Number[num2]) {
 v21colpoint = v21colpoint + v21Number[num2];
 document.getElementById('v21idpoint').innerHTML = 'баллов = ' + v21colpoint;
 //
 v21Number[num2] = 0; 
 }
 //
 var tmpFieldClear = true;
 for (j=0; j<9; j=j+1) 
 if (v21Number[j] != 0) 
 tmpFieldClear = false;
 if (tmpFieldClear === true) 
 document.getElementById('v21idpoint').innerHTML += ' игровое поле очищено за ' + v21level + ' ходов';
}
}
 function v21update() {
 for (i=0; i<12; i++) {
 var elm = eval("v21context" + i);
 elm.clearRect(0, 0, 76, 76);
 elm.beginPath();
 elm.rect(4, 4, 67, 67);
 elm.fillStyle = v21ColorFon[Math.floor(v21Number[i]*10/30)];
 elm.fill();
 elm.closePath();

 elm.beginPath();
 elm.rect(1, 1, 72, 72);
 elm.strokeStyle = "#FFFF00";
 elm.stroke();
 elm.closePath();

 elm.beginPath();
 elm.font = v21Size + "px serif";
 elm.fillStyle = v21ColorNum[Math.floor(v21Number[i]*10/30)];
 if (v21Number[i] > 0) 
 elm.fillText(v21Number[i], v21Top, v21Left);
 elm.fill();
 elm.closePath();
 }
 requestAnimationFrame(v21update);
 }
 v21update();
 </script>
 

<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" class="colorborder">
 <tbody>
 <tr><td align="center">

 поиск слова из слова - правильно: <span id="ver5countnum">0</span><hr>

 </td></tr>
 <tr><td align="center">
 
 <input onclick="ver5startWrd();" type="button" value="старт" />

 </td></tr>
 <tr><td align="center">
 
 <table width="400" align="center"><tr><td>
 <input class="stWord" id="ver5Wordinput0" type="text" value="" onclick="ver5runaclick(0)" style="cursor: pointer;"/>
 <input class="stWord" id="ver5Wordinput1" type="text" value="" onclick="ver5runaclick(1)" style="cursor: pointer;" />
 <input class="stWord" id="ver5Wordinput2" type="text" value="" onclick="ver5runaclick(2)" style="cursor: pointer;" />
 <input class="stWord" id="ver5Wordinput3" type="text" value="" onclick="ver5runaclick(3)" style="cursor: pointer;" />
 <input class="stWord" id="ver5Wordinput4" type="text" value="" onclick="ver5runaclick(4)" style="cursor: pointer;" />
 <input class="stWord" id="ver5Wordinput5" type="text" value="" onclick="ver5runaclick(5)" style="cursor: pointer;" />
 <input class="stWord" id="ver5Wordinput6" type="text" value="" onclick="ver5runaclick(6)" style="cursor: pointer;" />
 <input class="stWord" id="ver5Wordinput7" type="text" value="" onclick="ver5runaclick(7)" style="cursor: pointer;" />
 <input class="stWord" id="ver5Wordinput8" type="text" value="" onclick="ver5runaclick(8)" style="cursor: pointer;" />
 <input class="stWord" id="ver5Wordinput9" type="text" value="" onclick="ver5runaclick(9)" style="cursor: pointer;" />
 </td></tr>
 </table>

 </td></tr>
 <tr><td align="center">
 <table width="90%" height="80"><tr><td id="ver5tablelist"></td></tr></table>
 </td></tr>
 <tr><td align="center">
 
 <table width="400" align="center"><tr><td>
 <input class="stWord" id="ver5Wordoutput0" type="text" value="" />
 <input class="stWord" id="ver5Wordoutput1" type="text" value="" />
 <input class="stWord" id="ver5Wordoutput2" type="text" value="" />
 <input class="stWord" id="ver5Wordoutput3" type="text" value="" />
 <input class="stWord" id="ver5Wordoutput4" type="text" value="" />
 <input class="stWord" id="ver5Wordoutput5" type="text" value="" />
 <input class="stWord" id="ver5Wordoutput6" type="text" value="" />
 <input class="stWord" id="ver5Wordoutput7" type="text" value="" />
 <input class="stWord" id="ver5Wordoutput8" type="text" value="" />
 <input class="stWord" id="ver5Wordoutput9" type="text" value="" />
 </td></tr>
 </table>

 </td></tr>
 <tr><td align="center">

 <input onclick="ver5goWrd();" type="button" value="слово" />

 </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 ver5numout = 0;
var ver5CountWin = 0;

function ver5startWrd() {
var ver5rndWord = wrd[getRandomInt(0, wrd.length)];
while ((ver5rndWord.length < 7)||(ver5rndWord.length > 10)) ver5rndWord = wrd[getRandomInt(0, wrd.length)];
for (var i = 0; i < 10; i++) document.getElementById('ver5Wordinput'+i).value = "";
for (var i = 0; i < ver5rndWord.length; i++) document.getElementById('ver5Wordinput'+i).value = ver5rndWord[i];
for (var i = 0; i < 10; i++) document.getElementById('ver5Wordoutput'+i).value = "";
ver5numout = 0;
ver5CountWin = 0;
document.getElementById('ver5countnum').innerHTML = ver5CountWin;
document.getElementById('ver5tablelist').innerHTML = "";
}

function ver5runaclick(num) {
 if (!(document.getElementById('ver5Wordinput'+num).value === "")) {
 document.getElementById('ver5Wordoutput'+ver5numout).value = document.getElementById('ver5Wordinput'+num).value;
 ver5numout++; if( ver5numout > 9 ) ver5numout = 9;
 }
}

function ver5goWrd() {
var ver5tmpwdr = "";
for (var i = 0; i < 10; i++) ver5tmpwdr += document.getElementById('ver5Wordoutput'+i).value;
for (var i = 0; i < wrd.length; i++) if (ver5tmpwdr === wrd[i]) {
 document.getElementById('ver5tablelist').innerHTML += ver5tmpwdr;
 document.getElementById('ver5tablelist').innerHTML += " ";
 ver5CountWin += 1;
 document.getElementById('ver5countnum').innerHTML = ver5CountWin;
 }
 for (var i = 0; i < 10; i++) document.getElementById('ver5Wordoutput'+i).value = "";
 ver5numout = 0;
}
</script>
 

<style type="text/css">
.v51stWord {
 font-family: Times New Roman;
 font-size : 20pt;
}
</style>

<table align="center" width="500" class="colorborder">
<tr><td align="center">клавиатурный тренажер<hr /></td></tr>
<tr><td align="center"><input id="KTSelect1" type="radio" name="navKT" checked="checked" onclick="KTSecClick()">RU <input id="KTSelect2" type="radio" name="navKT" onclick="KTSecClick()">EN</td></tr>
<tr><td align="center">верно:<input value="0" id="v51test1" style="width: 50px;" class="flat" readonly>ложь:<input value="0" id="v51test2" style="width: 50px;" class="flat" readonly>результат:<input value="0%" id="v51test3" style="width: 50px;" class="flat" readonly></td></tr>
<tr><td align="center"><table width="100%" height="300" align="center" id="textareaKT" border="0" style="text-align: left;" class="v51stWord"><tr><td></td></tr></table></td></tr>
<tr><td align="center"><input value="Следущая" onclick="v51ClickNext()" type="button"></td></tr>
</table>

<script>
function getRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min)) + min;
}
window.addEventListener("keydown", v51log);
var v51tmpkeyEn = "a";
var v51tmpkeyRu = "а";
var v51tmpRandKeyRu = "а";
var v51tmpRandKeyEn = "a";
var v51tmpcount = 1;
var v51arkeysEn = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "a", "s", "d", "f", "g", "h", "j", "k", "l", "z", "x", "c", "v", "b", "n", "m"];
var v51arkeysRu = ["й", "ц", "у", "к", "е", "н", "г", "ш", "щ", "з", "х", "ф", "ы", "в", "а", "п", "р", "о", "л", "д", "ж", "э", "я", "ч", "с", "м", "и", "т", "ь", "б", "ю"];
function KTSecClick() {
if (document.getElementById('KTSelect1').checked) {
v51tmpRandKeyRu = v51arkeysRu[getRandomInt(0, 31)];
document.getElementById('textareaKT').innerHTML = "<span id='v51bukva" + v51tmpcount + "'>" + v51tmpRandKeyRu + "</span><span> </span>";
v51tmpkeyRu = v51tmpRandKeyRu;
} else {
v51tmpRandKeyEn = v51arkeysEn[getRandomInt(0, 26)];
document.getElementById('textareaKT').innerHTML = "<span id='v51bukva" + v51tmpcount + "'>" + v51tmpRandKeyEn + "</span><span> </span>";
v51tmpkeyEn = v51tmpRandKeyEn;
}
}
KTSecClick();
function v51log(event){
if (document.getElementById('KTSelect1').checked) {
 if (event.key === v51tmpkeyRu) {
 document.getElementById('v51bukva' + v51tmpcount).style.color = '#0000FF';
 document.getElementById('v51test1').value ++;
 } else {
 document.getElementById('v51bukva' + v51tmpcount).style.color = '#FF0000';
 document.getElementById('v51test2').value ++;
 }
 v51tmpcount = v51tmpcount + 1;
 if (v51tmpcount > 100) {v51tmpcount = 1; document.getElementById('textareaKT').innerHTML = ""; document.location.href = "#openModalKlava";};
 v51tmpRandKeyRu = v51arkeysRu[getRandomInt(0, 31)];
 document.getElementById('textareaKT').innerHTML = document.getElementById('textareaKT').innerHTML + "<span id='v51bukva" + v51tmpcount + "'>" + v51tmpRandKeyRu + "</span><span> </span>";
 v51tmpkeyRu = v51tmpRandKeyRu;
} else {
 if (event.key === v51tmpkeyEn) {
 document.getElementById('v51bukva' + v51tmpcount).style.color = '#0000FF';
 document.getElementById('v51test1').value ++;
 } else {
 document.getElementById('v51bukva' + v51tmpcount).style.color = '#FF0000';
 document.getElementById('v51test2').value ++;
 }
 v51tmpcount = v51tmpcount + 1;
 if (v51tmpcount > 100) {v51tmpcount = 1; document.getElementById('textareaKT').innerHTML = ""; document.location.href = "#openModalKlava";};
 v51tmpRandKeyEn = v51arkeysEn[getRandomInt(0, 26)];
 document.getElementById('textareaKT').innerHTML = document.getElementById('textareaKT').innerHTML + "<span id='v51bukva" + v51tmpcount + "'>" + v51tmpRandKeyEn + "</span><span> </span>";
 v51tmpkeyEn = v51tmpRandKeyEn;
 }
 var v51tmpall = 0;
 v51tmpall = eval(document.getElementById('v51test1').value) + eval(document.getElementById('v51test2').value);
 if (v51tmpall > 0) {
 document.getElementById('v51test3').value = roundNumber(eval(100*document.getElementById('v51test1').value/v51tmpall), 0) + "%";
 document.getElementById('v51test4').innerHTML = roundNumber(eval(100*document.getElementById('v51test1').value/v51tmpall), 0) + "%";
 }
}

function v51ClickNext(){
if (document.getElementById('KTSelect1').checked) {
 v51tmpcount = v51tmpcount + 1;
 if (v51tmpcount > 100) {v51tmpcount = 1; document.getElementById('textareaKT').innerHTML = ""; document.location.href = "#openModalKlava";};
 v51tmpRandKeyRu = v51arkeysRu[getRandomInt(0, 31)];
 document.getElementById('textareaKT').innerHTML = document.getElementById('textareaKT').innerHTML + "<span id='v51bukva" + v51tmpcount + "'>" + v51tmpRandKeyRu + "</span><span> </span>";
 v51tmpkeyRu = v51tmpRandKeyRu;
} else {
 v51tmpcount = v51tmpcount + 1;
 if (v51tmpcount > 100) {v51tmpcount = 1; document.getElementById('textareaKT').innerHTML = ""; document.location.href = "#openModalKlava";};
 v51tmpRandKeyEn = v51arkeysEn[getRandomInt(0, 26)];
 document.getElementById('textareaKT').innerHTML = document.getElementById('textareaKT').innerHTML + "<span id='v51bukva" + v51tmpcount + "'>" + v51tmpRandKeyEn + "</span><span> </span>";
 v51tmpkeyEn = v51tmpRandKeyEn;
}
}

function roundNumber(number, digits) {
 var multiple = Math.pow(10, digits);
 var rndedNum = Math.round(number * multiple) / multiple;
 return rndedNum;
 }
</script>