Matrix Interaction<\/title>\n <style>\n .button-container {\n text-align: center;\n margin-top: 20px; \/* Optional: adds some space above the button *\/\n }\n#solutionBtn {\n display: block;\n background-color: #007bff;\n color: white;\n padding: 10px 20px;\n margin: 20px auto;\n font-size: 16px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n\n table {\n width: 100%; \/* Makes the table width responsive to the screen size *\/\n border-collapse: collapse;\n }\n th, td {\n border: 1px solid black;\n text-align: center;\n padding: 10px;\n }\n input[type=\"text\"] {\n width: 100%; \/* Makes the input fields take up the full cell width *\/\n box-sizing: border-box; \/* Ensures padding and borders are included in the width *\/\n }\n @media (max-width: 600px) {\n \/* For smaller screens, you can adjust styles here *\/\n th, td {\n padding: 5px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <table id=\"matrix\">\n <tr>\n <th>Sequence\/<br>Response<\/th>\n \n <th><\/th><th><\/th><th><\/th><th><\/th><th><\/th><th><\/th><th><\/th><th><\/th>\n <\/tr>\n \n <tr><td>1<\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><\/tr>\n <tr><td>2<\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><\/tr>\n <tr><td>3<\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><\/tr>\n <tr><td>4<\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><\/tr>\n <tr><td>5<\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><\/tr>\n <tr><td>6<\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><\/tr>\n <tr><td>7<\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><\/tr>\n <\/table>\n <div class=\"button-container\">\n <button id=\"solutionBtn\">Solution<\/button>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n initializeMatrix();\n\n });\n\n\n let timestamps = [];\n\n \/\/ Capture the first timestamp when the screen loads\n timestamps.push(new Date().toISOString());\n\n \/\/ Add an event listener to your input fields\n document.querySelectorAll('#matrix input[type=\"text\"]').forEach(input => {\n input.addEventListener('input', () => {\n \/\/ Capture timestamp when a new digit is entered\n timestamps.push(new Date().toISOString());\n });\n });\n\n \/\/ Capture timestamp when the solution button is clicked\n document.getElementById('solutionBtn').addEventListener('click', function() {\n timestamps.push(new Date().toISOString());\n\n \/\/ Send the timestamps array to the server\n fetch('https:\/\/www.beams-experiments.com\/sendTimeStamps.php', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify({ timestamps: timestamps })\n })\n .then(response => response.text())\n .then(data => console.log(data))\n .catch(error => console.error('Error:', error));\n });\n\n function initializeMatrix() {\n let matrix = document.getElementById('matrix');\n matrix.addEventListener('input', function(event) {\n if (event.target.tagName === 'INPUT') {\n \/\/ Ensure only numeric input\n event.target.value = event.target.value.replace(\/[^0-9]\/g, '');\n }\n\n });\n\/\/ Color specific cells\n \t\tcolorCells();\n document.getElementById('solutionBtn').addEventListener('click', function() {\n let cell_7_8_Value = matrix.rows[7].cells[8].querySelector('input').value; \/\/ Cell (7, 8) last cell\n let cell_2_3_Value = matrix.rows[2].cells[3].querySelector('input').value; \/\/ Cell (2, 3)\n\n if (cell_7_8_Value === cell_2_3_Value) {\n alert('The number is correct');\n generateSequence();\n } else {\n alert('The number is wrong');\n }\n});\n\nfunction generateSequence() {\n \/\/ Initialize an 8x8 array\n let array = new Array(8).fill(null).map(() => new Array(8).fill(0));\n\n \/\/ Function to get a random number from the set [1, 4, 9]\n const getRandomNumber = () => {\n const numbers = [1, 4, 9];\n return numbers[Math.floor(Math.random() * numbers.length)];\n };\n\n \/\/ Populate the last three cells of the last row with random numbers\n for (let col = 5; col < 8; col++) {\n array[7][col] = getRandomNumber();\n }\n\n \/\/ Mirroring the last three digits of the last row\n array[7][4] = array[7][5];\n array[7][3] = array[7][6];\n array[7][2] = array[7][7];\n\n\/\/ Print the generated and mirrored digits in the last row\n console.log(\"Last row:\", array[7].join(' '));\n\n \/\/ Copying cells as per the instructions\n for (let counter = 0; counter < 5; counter++) {\n for (let col = 2; col < 7 - counter; col++) {\n array[6 - counter][col] = array[7 - counter][col];\n console.log(`Copying from [${7 - counter}][${col}] to [${6 - counter}][${col}]`);\n }\n }\n\n \/\/ Add random numbers to cells (0,0) and (0,1)\n array[0][0] = getRandomNumber();\n array[0][1] = getRandomNumber();\n\n \/\/ Set cell (1,1)\n if (array[0][0] === array[0][1]) {\n array[1][1] = array[0][0];\n } else {\n array[1][1] = [1, 4, 9].find(num => num !== array[0][0] && num !== array[0][1]);\n }\n\n \/\/ Fill the first row from cell (0,2) onwards\n for (let col = 2; col < 8; col++) {\n if (array[col-1][col-1] === array[col][col]) {\n array[0][col] = array[col-1][col-1];\n } else {\n array[0][col] = [1, 4, 9].find(num => num !== array[col-1][col-1] && num !== array[col][col]);\n }\n }\n \/\/ Now, fill the header row of the table with the first row of the array\n let headerCells = document.querySelectorAll('#matrix tr:first-child th:not(:first-child)');\n headerCells.forEach((cell, index) => {\n if (array[0][index] !== undefined) {\n cell.textContent = array[0][index];\n }\n });\n \/\/ Print the array\n array.forEach(row => console.log(row.join(' ')));\n}\n generateSequence();\nfunction colorCells() {\n let matrix = document.getElementById('matrix');\n \/\/ Color cell (1, 2) - second row, third column\n if (matrix.rows[1] && matrix.rows[1].cells[2]) {\n matrix.rows[1].cells[2].style.backgroundColor = 'yellow';\n }\n\n \/\/ Color cell (7, 8) - ninth row, tenth column\n \/\/ Adjust the indices if your table has fewer rows or columns\n if (matrix.rows[7] && matrix.rows[7].cells[8]) {\n matrix.rows[7].cells[8].style.backgroundColor = 'yellow';\n }\n }\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Matrix Interaction Sequence\/Response 1 2 3 4 5 6 7 Solution<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-431","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/comments?post=431"}],"version-history":[{"count":65,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/431\/revisions"}],"predecessor-version":[{"id":538,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/431\/revisions\/538"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":431,"date":"2023-12-13T10:06:40","date_gmt":"2023-12-13T10:06:40","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=431"},"modified":"2023-12-15T14:51:45","modified_gmt":"2023-12-15T14:51:45","slug":"number-reduction-task","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/number-reduction-task\/","title":{"rendered":"Number Reduction Task"},"content":{"rendered":"\n\n\n\n Matrix Interaction<\/title>\n <style>\n .button-container {\n text-align: center;\n margin-top: 20px; \/* Optional: adds some space above the button *\/\n }\n#solutionBtn {\n display: block;\n background-color: #007bff;\n color: white;\n padding: 10px 20px;\n margin: 20px auto;\n font-size: 16px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n\n table {\n width: 100%; \/* Makes the table width responsive to the screen size *\/\n border-collapse: collapse;\n }\n th, td {\n border: 1px solid black;\n text-align: center;\n padding: 10px;\n }\n input[type=\"text\"] {\n width: 100%; \/* Makes the input fields take up the full cell width *\/\n box-sizing: border-box; \/* Ensures padding and borders are included in the width *\/\n }\n @media (max-width: 600px) {\n \/* For smaller screens, you can adjust styles here *\/\n th, td {\n padding: 5px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <table id=\"matrix\">\n <tr>\n <th>Sequence\/<br>Response<\/th>\n \n <th><\/th><th><\/th><th><\/th><th><\/th><th><\/th><th><\/th><th><\/th><th><\/th>\n <\/tr>\n \n <tr><td>1<\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><\/tr>\n <tr><td>2<\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><\/tr>\n <tr><td>3<\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><\/tr>\n <tr><td>4<\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><\/tr>\n <tr><td>5<\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><\/tr>\n <tr><td>6<\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><\/tr>\n <tr><td>7<\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><td><input type=\"text\" maxlength=\"1\"><\/td><\/tr>\n <\/table>\n <div class=\"button-container\">\n <button id=\"solutionBtn\">Solution<\/button>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n initializeMatrix();\n\n });\n\n\n let timestamps = [];\n\n \/\/ Capture the first timestamp when the screen loads\n timestamps.push(new Date().toISOString());\n\n \/\/ Add an event listener to your input fields\n document.querySelectorAll('#matrix input[type=\"text\"]').forEach(input => {\n input.addEventListener('input', () => {\n \/\/ Capture timestamp when a new digit is entered\n timestamps.push(new Date().toISOString());\n });\n });\n\n \/\/ Capture timestamp when the solution button is clicked\n document.getElementById('solutionBtn').addEventListener('click', function() {\n timestamps.push(new Date().toISOString());\n\n \/\/ Send the timestamps array to the server\n fetch('https:\/\/www.beams-experiments.com\/sendTimeStamps.php', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify({ timestamps: timestamps })\n })\n .then(response => response.text())\n .then(data => console.log(data))\n .catch(error => console.error('Error:', error));\n });\n\n function initializeMatrix() {\n let matrix = document.getElementById('matrix');\n matrix.addEventListener('input', function(event) {\n if (event.target.tagName === 'INPUT') {\n \/\/ Ensure only numeric input\n event.target.value = event.target.value.replace(\/[^0-9]\/g, '');\n }\n\n });\n\/\/ Color specific cells\n \t\tcolorCells();\n document.getElementById('solutionBtn').addEventListener('click', function() {\n let cell_7_8_Value = matrix.rows[7].cells[8].querySelector('input').value; \/\/ Cell (7, 8) last cell\n let cell_2_3_Value = matrix.rows[2].cells[3].querySelector('input').value; \/\/ Cell (2, 3)\n\n if (cell_7_8_Value === cell_2_3_Value) {\n alert('The number is correct');\n generateSequence();\n } else {\n alert('The number is wrong');\n }\n});\n\nfunction generateSequence() {\n \/\/ Initialize an 8x8 array\n let array = new Array(8).fill(null).map(() => new Array(8).fill(0));\n\n \/\/ Function to get a random number from the set [1, 4, 9]\n const getRandomNumber = () => {\n const numbers = [1, 4, 9];\n return numbers[Math.floor(Math.random() * numbers.length)];\n };\n\n \/\/ Populate the last three cells of the last row with random numbers\n for (let col = 5; col < 8; col++) {\n array[7][col] = getRandomNumber();\n }\n\n \/\/ Mirroring the last three digits of the last row\n array[7][4] = array[7][5];\n array[7][3] = array[7][6];\n array[7][2] = array[7][7];\n\n\/\/ Print the generated and mirrored digits in the last row\n console.log(\"Last row:\", array[7].join(' '));\n\n \/\/ Copying cells as per the instructions\n for (let counter = 0; counter < 5; counter++) {\n for (let col = 2; col < 7 - counter; col++) {\n array[6 - counter][col] = array[7 - counter][col];\n console.log(`Copying from [${7 - counter}][${col}] to [${6 - counter}][${col}]`);\n }\n }\n\n \/\/ Add random numbers to cells (0,0) and (0,1)\n array[0][0] = getRandomNumber();\n array[0][1] = getRandomNumber();\n\n \/\/ Set cell (1,1)\n if (array[0][0] === array[0][1]) {\n array[1][1] = array[0][0];\n } else {\n array[1][1] = [1, 4, 9].find(num => num !== array[0][0] && num !== array[0][1]);\n }\n\n \/\/ Fill the first row from cell (0,2) onwards\n for (let col = 2; col < 8; col++) {\n if (array[col-1][col-1] === array[col][col]) {\n array[0][col] = array[col-1][col-1];\n } else {\n array[0][col] = [1, 4, 9].find(num => num !== array[col-1][col-1] && num !== array[col][col]);\n }\n }\n \/\/ Now, fill the header row of the table with the first row of the array\n let headerCells = document.querySelectorAll('#matrix tr:first-child th:not(:first-child)');\n headerCells.forEach((cell, index) => {\n if (array[0][index] !== undefined) {\n cell.textContent = array[0][index];\n }\n });\n \/\/ Print the array\n array.forEach(row => console.log(row.join(' ')));\n}\n generateSequence();\nfunction colorCells() {\n let matrix = document.getElementById('matrix');\n \/\/ Color cell (1, 2) - second row, third column\n if (matrix.rows[1] && matrix.rows[1].cells[2]) {\n matrix.rows[1].cells[2].style.backgroundColor = 'yellow';\n }\n\n \/\/ Color cell (7, 8) - ninth row, tenth column\n \/\/ Adjust the indices if your table has fewer rows or columns\n if (matrix.rows[7] && matrix.rows[7].cells[8]) {\n matrix.rows[7].cells[8].style.backgroundColor = 'yellow';\n }\n }\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Matrix Interaction Sequence\/Response 1 2 3 4 5 6 7 Solution<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-431","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/comments?post=431"}],"version-history":[{"count":65,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/431\/revisions"}],"predecessor-version":[{"id":538,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/431\/revisions\/538"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}