Click the Numbers Game<\/title>\n <style>\n canvas {\n border: 1px solid #000;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Memory test game\n <\/h1>\n <p>Click the numbers in order. You can study them as long as you\n like, but they cover with boxes when you click the first one.<\/p>\n <p>No screenshots!.<\/p>\n <p>Refresh the page to start a new game.<\/p>\n <p>How do you compare to\n a <a href=\"https:\/\/www.youtube.com\/watch?v=aAIGVT3N7B0\" style=\"color: #0000ff;\">chimp<\/a>?<\/p>\n\n<canvas id=\"number_canvas\" width=\"600\" height=\"400\"><\/canvas>\n\n<script>\n \/\/ distance between two points\n function distance(pointA, pointB) {\n const dx = pointA.x - pointB.x;\n const dy = pointA.y - pointB.y;\n return Math.sqrt(dx * dx + dy * dy);\n }\n\n\n \n function generate_random_points(rectangle, count, min_distance) {\n const points = [];\n\n \/\/ Helper function to check if a point is at least a minimum distance away from other points\n function point_valid(point, otherPoints) {\n\t for (const otherPoint of otherPoints) {\n\t if (distance(point, otherPoint) < min_distance) {\n\t\t return false;\n\t }\n\t }\n\t return true;\n }\n\n \/\/ Generate random points until reaching the desired count\n while (points.length < count) {\n\t const x = Math.floor(rectangle.x + Math.random() * rectangle.width);\n\t const y = Math.floor(rectangle.y + Math.random() * rectangle.height);\n\t const point = { x, y };\n\n\t if (point_valid(point, points)) {\n\t points.push(point);\n\t }\n }\n\n return points;\n }\n\n \/\/ Function to draw numbers on the canvas\n function draw_numbers() {\n ctx.fillStyle = \"blue\";\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n ctx.font = '30px Arial';\n ctx.fillStyle = 'white';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n for (let i = 0; i < num_pts; i++) {\n\t ctx.fillText(i+1, num_locs[i].x, num_locs[i].y);\n }\n }\n\n\n function cover_number(i, color) {\n ctx.fillStyle = color;\n const x = num_locs[i].x;\n const y = num_locs[i].y;\n ctx.fillRect(x-15, y-15, 30, 30);\n }\n \n function start() {\n num_locs = generate_random_points({ x: border, y: border, width: canvas.width-border,\n\t\t\t\t\t height: canvas.height-border},\n\t\t\t\t\tnum_pts, 20);\n current_num = 0;\n playing = true;\n draw_numbers();\n }\n\n\n\n function end() {\n draw_numbers();\n\n ctx.font = '30px Arial';\n ctx.fillStyle = 'red';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n\n ctx.fillText(\"Final score\", canvas.width\/2, canvas.height\/2 - 20);\n ctx.fillText(current_num, canvas.width\/2, canvas.height\/2 + 20);\n\n }\n\n \/\/ Initialize canvas and context\n const canvas = document.getElementById('number_canvas');\n const ctx = canvas.getContext('2d');\n\n \/\/ Array of numbers to be displayed\n const num_pts = 9;\n const border = 30;\n\n var playing = false;\n var num_locs = generate_random_points({ x: border, y: border, width: canvas.width-border,\n\t\t\t\t\t height: canvas.height-border},\n\t\t\t\t\tnum_pts, 30);\n\n var current_num = 0;\n\n\n start();\n\n \n \/\/ Add click event listener to canvas\n canvas.addEventListener('click', function (e) {\n const x = e.clientX - canvas.getBoundingClientRect().left;\n const y = e.clientY - canvas.getBoundingClientRect().top;\n console.log(\"Clicked at\", x, y);\n \n const point = { x, y };\n \/\/ did we click on the next number?\n if (distance(point, num_locs[current_num]) < 20 && playing) {\n\t console.log(\"success\", current_num);\n\n\t \/\/ is it the first number? \n\t if (current_num == 0) {\n\t \/\/ cover all the numbers\n\t for (let i = 0; i < num_pts; i++) {\n\t\t cover_number(i, \"white\");\n\t }\n\t }\n\n\t \/\/ erase the correct number\n\t cover_number(current_num, \"blue\");\n\n\t current_num += 1;\n }\n else {\n\t end();\n }\n\n })\n \n\t\t\t \n<\/script>\n\n<\/body>\n<\/html>\n\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Click the Numbers Game Memory test game Click the numbers in order. You can study them as long as you like, but they cover with boxes when you click the first one. No screenshots!. Refresh the page to start a new game. How do you compare to a chimp?<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":4438,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4440","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages\/4440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/comments?post=4440"}],"version-history":[{"count":19,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages\/4440\/revisions"}],"predecessor-version":[{"id":4476,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages\/4440\/revisions\/4476"}],"up":[{"embeddable":true,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages\/4438"}],"wp:attachment":[{"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/media?parent=4440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\n\n\n \n \n Click the Numbers Game<\/title>\n <style>\n canvas {\n border: 1px solid #000;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Memory test game\n <\/h1>\n <p>Click the numbers in order. You can study them as long as you\n like, but they cover with boxes when you click the first one.<\/p>\n <p>No screenshots!.<\/p>\n <p>Refresh the page to start a new game.<\/p>\n <p>How do you compare to\n a <a href=\"https:\/\/www.youtube.com\/watch?v=aAIGVT3N7B0\" style=\"color: #0000ff;\">chimp<\/a>?<\/p>\n\n<canvas id=\"number_canvas\" width=\"600\" height=\"400\"><\/canvas>\n\n<script>\n \/\/ distance between two points\n function distance(pointA, pointB) {\n const dx = pointA.x - pointB.x;\n const dy = pointA.y - pointB.y;\n return Math.sqrt(dx * dx + dy * dy);\n }\n\n\n \n function generate_random_points(rectangle, count, min_distance) {\n const points = [];\n\n \/\/ Helper function to check if a point is at least a minimum distance away from other points\n function point_valid(point, otherPoints) {\n\t for (const otherPoint of otherPoints) {\n\t if (distance(point, otherPoint) < min_distance) {\n\t\t return false;\n\t }\n\t }\n\t return true;\n }\n\n \/\/ Generate random points until reaching the desired count\n while (points.length < count) {\n\t const x = Math.floor(rectangle.x + Math.random() * rectangle.width);\n\t const y = Math.floor(rectangle.y + Math.random() * rectangle.height);\n\t const point = { x, y };\n\n\t if (point_valid(point, points)) {\n\t points.push(point);\n\t }\n }\n\n return points;\n }\n\n \/\/ Function to draw numbers on the canvas\n function draw_numbers() {\n ctx.fillStyle = \"blue\";\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n ctx.font = '30px Arial';\n ctx.fillStyle = 'white';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n for (let i = 0; i < num_pts; i++) {\n\t ctx.fillText(i+1, num_locs[i].x, num_locs[i].y);\n }\n }\n\n\n function cover_number(i, color) {\n ctx.fillStyle = color;\n const x = num_locs[i].x;\n const y = num_locs[i].y;\n ctx.fillRect(x-15, y-15, 30, 30);\n }\n \n function start() {\n num_locs = generate_random_points({ x: border, y: border, width: canvas.width-border,\n\t\t\t\t\t height: canvas.height-border},\n\t\t\t\t\tnum_pts, 20);\n current_num = 0;\n playing = true;\n draw_numbers();\n }\n\n\n\n function end() {\n draw_numbers();\n\n ctx.font = '30px Arial';\n ctx.fillStyle = 'red';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n\n ctx.fillText(\"Final score\", canvas.width\/2, canvas.height\/2 - 20);\n ctx.fillText(current_num, canvas.width\/2, canvas.height\/2 + 20);\n\n }\n\n \/\/ Initialize canvas and context\n const canvas = document.getElementById('number_canvas');\n const ctx = canvas.getContext('2d');\n\n \/\/ Array of numbers to be displayed\n const num_pts = 9;\n const border = 30;\n\n var playing = false;\n var num_locs = generate_random_points({ x: border, y: border, width: canvas.width-border,\n\t\t\t\t\t height: canvas.height-border},\n\t\t\t\t\tnum_pts, 30);\n\n var current_num = 0;\n\n\n start();\n\n \n \/\/ Add click event listener to canvas\n canvas.addEventListener('click', function (e) {\n const x = e.clientX - canvas.getBoundingClientRect().left;\n const y = e.clientY - canvas.getBoundingClientRect().top;\n console.log(\"Clicked at\", x, y);\n \n const point = { x, y };\n \/\/ did we click on the next number?\n if (distance(point, num_locs[current_num]) < 20 && playing) {\n\t console.log(\"success\", current_num);\n\n\t \/\/ is it the first number? \n\t if (current_num == 0) {\n\t \/\/ cover all the numbers\n\t for (let i = 0; i < num_pts; i++) {\n\t\t cover_number(i, \"white\");\n\t }\n\t }\n\n\t \/\/ erase the correct number\n\t cover_number(current_num, \"blue\");\n\n\t current_num += 1;\n }\n else {\n\t end();\n }\n\n })\n \n\t\t\t \n<\/script>\n\n<\/body>\n<\/html>\n\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Click the Numbers Game Memory test game Click the numbers in order. You can study them as long as you like, but they cover with boxes when you click the first one. No screenshots!. Refresh the page to start a new game. How do you compare to a chimp?<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":4438,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4440","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages\/4440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/comments?post=4440"}],"version-history":[{"count":19,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages\/4440\/revisions"}],"predecessor-version":[{"id":4476,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages\/4440\/revisions\/4476"}],"up":[{"embeddable":true,"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/pages\/4438"}],"wp:attachment":[{"href":"https:\/\/faculty.fiu.edu\/~theobald\/wp-json\/wp\/v2\/media?parent=4440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}