วิวัฒนาการ-จัดการ
แก้ไขไฟล์: siatka.php
<?php //var_dump($_POST); if(($_POST["rzedy"]=='') || !is_numeric($_POST["rzedy"])) { $_POST["rzedy"] = 7; } if($_POST["generuj"]==1) { ?> <html> <head> <title>Siatka koncentracji</title> <script language="javascript"> <!-- function generujSiatke() { var rzedy = <?=$_POST["rzedy"]?>; var kolumny = <?=$_POST["rzedy"]?>; var nCells = (rzedy * kolumny); var nMax = (nCells - 1); var nBreak = (kolumny - 1); var theNumbers = new Array(nCells); for (var i = 0; i <= nMax; i++) { theNumbers[i] = i; } for (var j = 0; j <= nMax; j++) { var tempInteger var newPosition tempInteger = theNumbers[j] newPosition = Math.floor(Math.random() * nMax) theNumbers[j] = theNumbers[newPosition] theNumbers[newPosition] = tempInteger } var siatkaKoncentracji = "<html><head><style>body {font-family:arial} table { width: 400px; margin: 0 auto 1em; border-collapse: collapse;} td { width: 20%; text-transform: uppercase; color: #232c88; cursor: pointer; } table td { border: 2px solid #fff; padding: 5px 10px; text-align: center; background: #ddd; transition: all .2s ease-in-out; &:hover { background: #fff; color: darken(#232c88, 5%); border: 2px solid #232c88; } } .table-2 td div { padding: 5px 0; width: 100%; border: 2px solid #fff; transition: color .2s ease-in-out, background .2s ease-in-out, border .2s ease-in-out; text-align: center; background: #ddd; margin: -1px 2px -4px -1px; z-index: 1; position: relative; &:hover { background: #fff; color: darken(#232c88, 5%); border: 2px solid #232c88; z-index: 2; } } p { margin-bottom: 5px; } .light { color: #666; font-size: .8em; margin-top: 5px; } } .siatkaKontener3,.siatkaKontener4,.siatkaKontener5 { width: 400px;} .siatkaKontener6,.siatkaKontener7,.siatkaKontener8,.siatkaKontener9,.siatkaKontener10{ width: 800px;} @media only screen and (max-width: 600px) {.siatkaKontener,.siatkaKontener3,.siatkaKontener4,.siatkaKontener5,.siatkaKontener6,.siatkaKontener7,.siatkaKontener8,.siatkaKontener9,.siatkaKontener10 { width: 300px;} table {width:90% !important}}</style></head><body text=\"black\"><script language=\"javascript\">" var siatkaKoncentracji = "<script language=\"javascript\">" siatkaKoncentracji += "var currNum = 0;" siatkaKoncentracji += "start = new Date();" siatkaKoncentracji += "var startTime = start.getTime();" siatkaKoncentracji += "function evalClick(x)" siatkaKoncentracji += "{" siatkaKoncentracji += "theCell = document.getElementById(x);" siatkaKoncentracji += "if (x == currNum) " siatkaKoncentracji += "{" siatkaKoncentracji += "theCell.bgColor = \"#c9ab81\";" siatkaKoncentracji += "currNum++;" siatkaKoncentracji += "}" siatkaKoncentracji += "else if (x < currNum) " siatkaKoncentracji += "{" siatkaKoncentracji += "theCell.bgColor = \"#c9ab81\";" siatkaKoncentracji += "}" siatkaKoncentracji += "else" siatkaKoncentracji += "{" siatkaKoncentracji += "theCell.bgColor = \"red\";" siatkaKoncentracji += "setTimeout('theCell.bgColor=\"\"\',100);" siatkaKoncentracji += "}" siatkaKoncentracji += "if (currNum == " + nCells + ") " siatkaKoncentracji += "{" siatkaKoncentracji += "end = new Date();" siatkaKoncentracji += "var endTime = end.getTime();" siatkaKoncentracji += "var elapsedTime = ((endTime - startTime)/1000);" siatkaKoncentracji += "var totMin = Math.floor(elapsedTime/60);" siatkaKoncentracji += "var totSec = Math.floor(elapsedTime % 60);" //siatkaKoncentracji += "alert(\"Twój czas to \" + totMin + \" minut, \" + totSec + \" sekund.\");" //siatkaKoncentracji += "window.location = \"twoj-wynik.php?t1=\" + totMin + \"&t2=\" + totSec + \"";" siatkaKoncentracji += "parent.location = \"twoj-wynik.php?t1=\"+elapsedTime+\"&siatka=<?=$_POST["rzedy"]?>#wyniki \";" siatkaKoncentracji += "}" siatkaKoncentracji += "}" siatkaKoncentracji += "</script><center><h2 style=\"font-family:\'Alegreya Sans\'\">Zacznij od kliknięcia w <b>\"00\"</b><br />" siatkaKoncentracji += "Czas leci!</h2><style>td {padding:12px} .siatkaKontener{ width: 400px;} @media only screen and (max-width: 600px) {.siatkaKontener{ width: 300px;} table {width:90% !important} td {padding:5px;font-size:11px}}.siatkaKontener3,.siatkaKontener4,.siatkaKontener5 { width: 400px;} .siatkaKontener6,.siatkaKontener7,.siatkaKontener8,.siatkaKontener9,.siatkaKontener10{ width: 800px;} @media only screen and (max-width: 600px) {.siatkaKontener,.siatkaKontener3,.siatkaKontener4,.siatkaKontener5,.siatkaKontener6,.siatkaKontener7,.siatkaKontener8,.siatkaKontener9,.siatkaKontener10 { width: 300px;} table {width:90% !important}}</style><div class=\"siatkaKontener"+rzedy+" \"><table class=\"table-1\" style=\" width: 100%; margin: 0 auto 1em; border-collapse: collapse;border:1px;font-size:18px;font-weight:300;font-family:open sans,arial;border-radius:5px;\">" for (var k = 0; k <= nMax; k++) { var cellNumber; if ((k % kolumny) == 0) siatkaKoncentracji += "<tr>" cellNumber = theNumbers[k]; if(cellNumber < 10) { siatkaKoncentracji += "<td style=\"text-align:center\" id =\"" + cellNumber + "\" onClick=\"evalClick(" + cellNumber + ")\">0" + cellNumber + "</td>" } else { siatkaKoncentracji += "<td style=\"text-align:center\" id =\"" + cellNumber + "\" onClick=\"evalClick(" + cellNumber + ")\">" + cellNumber + "</td>" } if ((k % kolumny) == nBreak) siatkaKoncentracji += "</tr>" } siatkaKoncentracji += "</table></div>" siatkaKoncentracji += "<a style=\"padding:8px 16px;background-color:#c9ab81;color:#fff;font-family: 'Open sans',arial;font-weight:300;text-decoration:none;border-radius:5px;\" href=\"index.php?n=scroll\" target=\"_parent\">" siatkaKoncentracji += "Zacznij od nowa ></a>" //siatkaKoncentracji += "</center></body></html>" document.write(siatkaKoncentracji) document.close() } --> </script> </head> <body onload="generujSiatke()"> </body> </html> <?php } else { ?><html> <head> <link rel='stylesheet' id='musea-select-google-fonts-css' href='http://fonts.googleapis.com/css?family=Cinzel%3A100.200%2C300%2C300i%2C400%2C400i%2C500%2C600%2C700%2C800%2C900%7CEB+Garamond%3A100.200%2C300%2C300i%2C400%2C400i%2C500%2C600%2C700%2C800%2C900%7CAlegreya+Sans%3A100.200%2C300%2C300i%2C400%2C400i%2C500%2C600%2C700%2C800%2C900%7COpen+Sans%3A100.200%2C300%2C300i%2C400%2C400i%2C500%2C600%2C700%2C800%2C900&subset=latin-ext&ver=1.0.0' type='text/css' media='all' /> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <style> body { font-family: "Alegreya Sans"; font-size: 17px; font-weight: 400; line-height: 1.58em; letter-spacing: 0; color: #5f5f5f; background-color: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden!important; } .slidecontainer { width: 100%; } .slider { -webkit-appearance: none; width: 100%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #c9ab81; cursor: pointer; } .slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #c9ab81; cursor: pointer; } </style> </head> <body> <form action="siatka.php" name="formDisplay" method="post" target="graPlansza"> <div class="container"> <div class="row" style="width:100%"> <div class="" style="width:25%;float:left"> </div> <div class="" style="width:50%;text-align:center;float:left"> Wybierz rozmiar siatki:<br/><br/> <div class="slidecontainer"> <input type="range" min="3" max="10" value="7" class="slider" id="siatka"> <p>Rozmiar: <span id="w1"></span> x <span id="w2"></span></p> </div><br/><br/> <input type="submit" name="start" value="Zacznij test..." style="padding:8px 16px;background-color:#c9ab81;color:#fff;font-family: 'Open sans',arial;font-weight:300;text-decoration:none;border-radius:5px;border:0px;cursor:pointer"> </div> <div class="" style="width:25%;float:left"> </div> </div> </div> <input type="hidden" name="rzedy" id="rzedy"> <input type="hidden" name="generuj" value="1"> </form> <script> var slider = document.getElementById("siatka"); var output = document.getElementById("w1"); var outputTwo = document.getElementById("w2"); var outputThree = document.getElementById("rzedy"); output.innerHTML = slider.value; // Display the default slider value outputTwo.innerHTML = slider.value; // Update the current slider value (each time you drag the slider handle) slider.oninput = function() { output.innerHTML = this.value; outputTwo.innerHTML = this.value; outputThree.innerHTML = this.value; document.getElementById("rzedy").value = slider.value; } </script> </body> </html> <?php } ?>