Canvas with Chat and Shapes<\/title><\/p>\n<style>\n body {\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: #f0f0f0;\n }<\/p>\n<p> #taskInstructions {\n width: 90%;\n max-width: 90%;\n height: 20vh;\n overflow-y: auto;\n border: 1px solid #ddd;\n padding: 15px;\n background-color: #f8f8f8;\n }<\/p>\n<p> #assignedShapes {\n display: flex;\n flex-direction: row;\n gap: 10px;\n margin-top: 10px;\n }<\/p>\n<p> .shape-img {\n width: 120px; \/* Increased size *\/\n height: 120px; \/* Increased size *\/\n border: 1px solid #000;\n padding: 5px;\n }<\/p>\n<p> #canvasWrapper {\n width: 70vw; \/* Reduced width to prevent overlap with chat *\/\n height: 70vh;\n overflow-y: scroll;\n border: 1px solid black;\n margin-top: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: 25%; \/* Move the canvas to the right *\/\n }<\/p>\n<p> #drawingCanvas {\n background-color: white; \/* White background for drawing *\/\n width: 100%;\n height: 100%;\n }<\/p>\n<p> #submitDrawingButton {\n margin-top: 20px;\n background-color: #007BFF; \/* Blue color *\/\n color: white;\n border: none;\n padding: 15px 30px;\n font-size: 18px;\n cursor: pointer;\n border-radius: 5px;\n }<\/p>\n<p> #submitDrawingButton:hover {\n background-color: #0056b3;\n }<\/p>\n<p> #submitButtonContainer {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n }<\/p>\n<p> #chatContainer {\n height: 35vh;\n width: 20%;\n position: fixed;\n bottom: 5%;\n left: 2%;\n border: 0px solid #ddd;\n border-bottom: none;\n border-radius: 10px 10px 0 0;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n background-color: #ffffff;\n padding: 15px;\n overflow-y: auto;\n }<\/p>\n<p> #chatInputArea {\n height: 5vh;\n width: 20%;\n position: fixed;\n bottom: 0;\n left: 2%;\n border: 0px solid #ddd;\n border-top: none;\n border-radius: 0 0 10px 10px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n background-color: #ffffff;\n padding: 10px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }<\/p>\n<p> #chatInputArea input[type=\"text\"] {\n width: calc(100% - 60px);\n padding: 5px;\n border-radius: 5px;\n border: 1px solid #ccc;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);\n font-size: 1em;\n outline: none;\n }<\/p>\n<p> #chatContainer::before {\n content: \"GPT-4o: Chat messages will appear here. Please scroll down to chat.\";\n }<\/p>\n<p> .chat-message {\n margin-bottom: 10px;\n padding: 5px;\n border-radius: 5px;\n }<\/p>\n<p> .user-message {\n background-color: #f0f0f0;\n }<\/p>\n<p> .gpt-response {\n background-color: #d1e8ff;\n }<\/p>\n<p> .error-message {\n background-color: #ffbaba;\n color: #d8000c;\n }<\/p>\n<p> .gpt-label {\n font-weight: bold;\n margin-right: 5px;\n }<\/p>\n<p> #waitNote {\n color: red;\n text-align: center;\n font-weight: bold;\n margin-top: 10px;\n }<\/p>\n<p> #progressBar {\n height: 10px;\n background-color: #007bff;\n border-radius: 5px;\n width: 88%;\n }<\/p>\n<p> #progressText {\n text-align: center;\n margin-top: 5px;\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div id=\"taskInstructions\">\n<h2>Task Instructions<\/h2>\n<p>You are tasked with designing a toy that can be used by a child aged 5-11. Five shapes have been randomly selected for you from a set of 20 available shapes. You may use as many or as few of the selected five shapes as you wish to create your toy design. You may arrange and draw your idea on the provided digital canvas. Please note that there is no function to erase your drawing, so your progress is preserved. You can scroll down and use more space if you want.<\/p>\n<\/p><\/div>\n<div id=\"assignedShapes\">\n \n <\/div>\n<div id=\"canvasWrapper\">\n <canvas id=\"drawingCanvas\"><\/canvas>\n <\/div>\n<p> <\/p>\n<div id=\"submitButtonContainer\">\n <button id=\"submitDrawingButton\" disabled>Submit Drawing<\/button>\n <\/div>\n<p> <\/p>\n<div id=\"chatContainer\">\n \n <\/div>\n<p> <\/p>\n<div id=\"chatInputArea\">\n <input type=\"text\" id=\"userMessage\" placeholder=\"Type your message here...\"><br \/>\n <button id=\"sendButton\">➤<\/button> \n <\/div>\n<div id=\"waitNote\">\n Gathering thoughts…\n <\/div>\n<div id=\"progressBarContainer\">\n<div id=\"progressBar\"><\/div>\n<\/p><\/div>\n<div id=\"progressText\">Page 5 out of 6<\/div>\n<p> <script>\n \/\/ Store the time when the page is loaded\n const startTime = Date.now();\n alert(\"Please read the instructions first. Please allow time (up to 30 seconds) for GPT-4 responses.\");<\/p>\n<p> \/\/ Chat functionality\n let chatLog = \"\"; \/\/ Accumulate chat messages\n let messageQueue = [];\n let isProcessingMessage = false;<\/p>\n<p> function appendMessageToChatContainer(sender, message, className) {\n let paragraphs = message.split('\\n').map(p => `<\/p>\n<p>${p}<\/p>\n<p>`).join('');\n document.getElementById('chatContainer').innerHTML += `<\/p>\n<div class=\"chat-message ${className}\"><span class=\"chat-label\">${sender}:<\/span> ${paragraphs}<\/div>\n<p>`;\n scrollToBottom();\n }<\/p>\n<p> function scrollToBottom() {\n let chatContainer = document.getElementById('chatContainer');\n chatContainer.scrollTop = chatContainer.scrollHeight;\n }<\/p>\n<p> function processNextMessage() {\n if (messageQueue.length === 0) {\n isProcessingMessage = false;\n document.getElementById('waitNote').style.display = 'none';\n document.getElementById('userMessage').disabled = false;\n return;\n }<\/p>\n<p> isProcessingMessage = true;\n let userMessage = messageQueue.shift();\n document.getElementById('waitNote').style.display = 'block';\n document.getElementById('userMessage').disabled = true;<\/p>\n<p> if (!chatLog.includes('GPT-4')) {\n chatLog += 'GPT-4, your role is to help the user design a toy for children aged 5-11.\\n';\n }<\/p>\n<p> chatLog += `You: ${userMessage}\\n`;<\/p>\n<p> fetch('https:\/\/beams-experiments.com\/toyDesign\/getAPIKey2.php', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\n body: new URLSearchParams({ chatLog: chatLog })\n })\n .then(response => response.json())\n .then(data => {\n if (data && data.choices && data.choices.length > 0) {\n let lastMessage = data.choices[0].message.content;\n chatLog += `GPT-4: ${lastMessage}\\n`;\n appendMessageToChatContainer('GPT-4', lastMessage, 'gpt-response');\n } else {\n console.error('Unexpected response format:', data);\n }\n document.getElementById('waitNote').style.display = 'none';\n document.getElementById('userMessage').disabled = false;\n processNextMessage();\n })\n .catch(error => {\n console.error(\"Error in communication with GPT-4:\", error);\n appendMessageToChatContainer('Error', 'There was an issue contacting GPT-4.', 'error-message');\n document.getElementById('waitNote').style.display = 'none';\n document.getElementById('userMessage').disabled = false;\n processNextMessage();\n });\n }<\/p>\n<p> document.getElementById('sendButton').addEventListener('click', function() {\n let userMessage = document.getElementById('userMessage').value.trim();\n if (userMessage === '') return;\n document.getElementById('userMessage').value = '';\n appendMessageToChatContainer('You', userMessage, 'user-message');\n messageQueue.push(userMessage);\n if (!isProcessingMessage) {\n processNextMessage();\n }\n });<\/p>\n<p> document.getElementById('userMessage').addEventListener('keypress', function(e) {\n if (e.which === 13) { \/\/ Enter key pressed\n e.preventDefault();\n document.getElementById('sendButton').click();\n }\n });<\/p>\n<p> \/\/ Display the assigned shapes\n const totalShapes = 20;\n const assignedShapes = [];\n const sourceDirectory = \"https:\/\/beams-experiments.com\/toyDesign\/drawing images\/\";\n const shapeContainer = document.getElementById(\"assignedShapes\");<\/p>\n<p> function assignShapes() {\n const selectedIndexes = new Set();\n while (selectedIndexes.size < 5) {\n const randomIndex = Math.floor(Math.random() * totalShapes) + 1;\n selectedIndexes.add(randomIndex);\n }\n return Array.from(selectedIndexes);\n }\n\n function displayAssignedShapes() {\n const selectedShapes = assignShapes();\n selectedShapes.forEach(index => {\n const img = document.createElement('img');\n img.src = sourceDirectory + index + \".png\";\n img.alt = \"Shape \" + index;\n img.classList.add(\"shape-img\");\n shapeContainer.appendChild(img);\n assignedShapes.push(index);\n });\n }<\/p>\n<p> displayAssignedShapes();<\/p>\n<p> \/\/ Drawing functionality\n const canvas = document.getElementById(\"drawingCanvas\");\n const ctx = canvas.getContext(\"2d\");\n let drawing = false;<\/p>\n<p> \/\/ Set canvas dimensions programmatically\n const desiredWidth = 1200;\n const desiredHeight = 2500;\n canvas.width = desiredWidth;\n canvas.height = desiredHeight;\n canvas.style.width = desiredWidth + 'px';\n canvas.style.height = desiredHeight + 'px';<\/p>\n<p> \/\/ Fill the canvas background with white\n ctx.fillStyle = 'white';\n ctx.fillRect(0, 0, canvas.width, canvas.height);<\/p>\n<p> \/\/ Set line properties for drawing\n ctx.lineWidth = 3;\n ctx.lineCap = 'round';<\/p>\n<p> function getMousePos(event) {\n const rect = canvas.getBoundingClientRect();\n const scaleX = canvas.width \/ rect.width;\n const scaleY = canvas.height \/ rect.height;\n return { x: (event.clientX - rect.left) * scaleX, y: (event.clientY - rect.top) * scaleY };\n }<\/p>\n<p> canvas.addEventListener(\"mousedown\", (event) => {\n drawing = true;\n const pos = getMousePos(event);\n ctx.moveTo(pos.x, pos.y);\n });<\/p>\n<p> canvas.addEventListener(\"mousemove\", (event) => {\n if (drawing) {\n const pos = getMousePos(event);\n ctx.lineTo(pos.x, pos.y);\n ctx.stroke();\n }\n });<\/p>\n<p> canvas.addEventListener(\"mouseup\", () => {\n drawing = false;\n ctx.beginPath();\n document.getElementById(\"submitDrawingButton\").disabled = false;\n });<\/p>\n<p> canvas.addEventListener(\"contextmenu\", (event) => {\n event.preventDefault();\n });<\/p>\n<p> document.getElementById(\"submitDrawingButton\").addEventListener('click', () => {\n document.getElementById(\"submitDrawingButton\").disabled = true;\n const endTime = Date.now();\n const drawingTime = Math.floor((endTime - startTime) \/ 1000);\n localStorage.setItem('drawingTime', drawingTime);\n const dataURL = canvas.toDataURL('image\/png');\n localStorage.setItem('canvasImage', dataURL);\n window.location.href = 'https:\/\/beams-experiments.com\/index.php\/post-task-questionnaire-toy-c\/';\n });\n <\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Canvas with Chat and Shapes Task Instructions You are tasked with designing a toy that can be used by a child aged 5-11. Five shapes have been randomly selected for you from a set of 20 available shapes. You may use as many or as few of the selected five shapes as you wish to […]<\/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-2606","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2606","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=2606"}],"version-history":[{"count":52,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2606\/revisions"}],"predecessor-version":[{"id":5308,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2606\/revisions\/5308"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=2606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2606,"date":"2024-08-13T21:07:03","date_gmt":"2024-08-13T20:07:03","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=2606"},"modified":"2024-11-20T19:32:25","modified_gmt":"2024-11-20T19:32:25","slug":"post-tasks-questionnaire-co-efficacy-hai","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/post-tasks-questionnaire-co-efficacy-hai\/","title":{"rendered":"Post-Tasks Questionnaire Co-Efficacy HAI"},"content":{"rendered":"

\n
\n
\n
\n
\n Canvas with Chat and Shapes<\/title><\/p>\n<style>\n body {\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: #f0f0f0;\n }<\/p>\n<p> #taskInstructions {\n width: 90%;\n max-width: 90%;\n height: 20vh;\n overflow-y: auto;\n border: 1px solid #ddd;\n padding: 15px;\n background-color: #f8f8f8;\n }<\/p>\n<p> #assignedShapes {\n display: flex;\n flex-direction: row;\n gap: 10px;\n margin-top: 10px;\n }<\/p>\n<p> .shape-img {\n width: 120px; \/* Increased size *\/\n height: 120px; \/* Increased size *\/\n border: 1px solid #000;\n padding: 5px;\n }<\/p>\n<p> #canvasWrapper {\n width: 70vw; \/* Reduced width to prevent overlap with chat *\/\n height: 70vh;\n overflow-y: scroll;\n border: 1px solid black;\n margin-top: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: 25%; \/* Move the canvas to the right *\/\n }<\/p>\n<p> #drawingCanvas {\n background-color: white; \/* White background for drawing *\/\n width: 100%;\n height: 100%;\n }<\/p>\n<p> #submitDrawingButton {\n margin-top: 20px;\n background-color: #007BFF; \/* Blue color *\/\n color: white;\n border: none;\n padding: 15px 30px;\n font-size: 18px;\n cursor: pointer;\n border-radius: 5px;\n }<\/p>\n<p> #submitDrawingButton:hover {\n background-color: #0056b3;\n }<\/p>\n<p> #submitButtonContainer {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n }<\/p>\n<p> #chatContainer {\n height: 35vh;\n width: 20%;\n position: fixed;\n bottom: 5%;\n left: 2%;\n border: 0px solid #ddd;\n border-bottom: none;\n border-radius: 10px 10px 0 0;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n background-color: #ffffff;\n padding: 15px;\n overflow-y: auto;\n }<\/p>\n<p> #chatInputArea {\n height: 5vh;\n width: 20%;\n position: fixed;\n bottom: 0;\n left: 2%;\n border: 0px solid #ddd;\n border-top: none;\n border-radius: 0 0 10px 10px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n background-color: #ffffff;\n padding: 10px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }<\/p>\n<p> #chatInputArea input[type=\"text\"] {\n width: calc(100% - 60px);\n padding: 5px;\n border-radius: 5px;\n border: 1px solid #ccc;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);\n font-size: 1em;\n outline: none;\n }<\/p>\n<p> #chatContainer::before {\n content: \"GPT-4o: Chat messages will appear here. Please scroll down to chat.\";\n }<\/p>\n<p> .chat-message {\n margin-bottom: 10px;\n padding: 5px;\n border-radius: 5px;\n }<\/p>\n<p> .user-message {\n background-color: #f0f0f0;\n }<\/p>\n<p> .gpt-response {\n background-color: #d1e8ff;\n }<\/p>\n<p> .error-message {\n background-color: #ffbaba;\n color: #d8000c;\n }<\/p>\n<p> .gpt-label {\n font-weight: bold;\n margin-right: 5px;\n }<\/p>\n<p> #waitNote {\n color: red;\n text-align: center;\n font-weight: bold;\n margin-top: 10px;\n }<\/p>\n<p> #progressBar {\n height: 10px;\n background-color: #007bff;\n border-radius: 5px;\n width: 88%;\n }<\/p>\n<p> #progressText {\n text-align: center;\n margin-top: 5px;\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div id=\"taskInstructions\">\n<h2>Task Instructions<\/h2>\n<p>You are tasked with designing a toy that can be used by a child aged 5-11. Five shapes have been randomly selected for you from a set of 20 available shapes. You may use as many or as few of the selected five shapes as you wish to create your toy design. You may arrange and draw your idea on the provided digital canvas. Please note that there is no function to erase your drawing, so your progress is preserved. You can scroll down and use more space if you want.<\/p>\n<\/p><\/div>\n<div id=\"assignedShapes\">\n \n <\/div>\n<div id=\"canvasWrapper\">\n <canvas id=\"drawingCanvas\"><\/canvas>\n <\/div>\n<p> <\/p>\n<div id=\"submitButtonContainer\">\n <button id=\"submitDrawingButton\" disabled>Submit Drawing<\/button>\n <\/div>\n<p> <\/p>\n<div id=\"chatContainer\">\n \n <\/div>\n<p> <\/p>\n<div id=\"chatInputArea\">\n <input type=\"text\" id=\"userMessage\" placeholder=\"Type your message here...\"><br \/>\n <button id=\"sendButton\">➤<\/button> \n <\/div>\n<div id=\"waitNote\">\n Gathering thoughts…\n <\/div>\n<div id=\"progressBarContainer\">\n<div id=\"progressBar\"><\/div>\n<\/p><\/div>\n<div id=\"progressText\">Page 5 out of 6<\/div>\n<p> <script>\n \/\/ Store the time when the page is loaded\n const startTime = Date.now();\n alert(\"Please read the instructions first. Please allow time (up to 30 seconds) for GPT-4 responses.\");<\/p>\n<p> \/\/ Chat functionality\n let chatLog = \"\"; \/\/ Accumulate chat messages\n let messageQueue = [];\n let isProcessingMessage = false;<\/p>\n<p> function appendMessageToChatContainer(sender, message, className) {\n let paragraphs = message.split('\\n').map(p => `<\/p>\n<p>${p}<\/p>\n<p>`).join('');\n document.getElementById('chatContainer').innerHTML += `<\/p>\n<div class=\"chat-message ${className}\"><span class=\"chat-label\">${sender}:<\/span> ${paragraphs}<\/div>\n<p>`;\n scrollToBottom();\n }<\/p>\n<p> function scrollToBottom() {\n let chatContainer = document.getElementById('chatContainer');\n chatContainer.scrollTop = chatContainer.scrollHeight;\n }<\/p>\n<p> function processNextMessage() {\n if (messageQueue.length === 0) {\n isProcessingMessage = false;\n document.getElementById('waitNote').style.display = 'none';\n document.getElementById('userMessage').disabled = false;\n return;\n }<\/p>\n<p> isProcessingMessage = true;\n let userMessage = messageQueue.shift();\n document.getElementById('waitNote').style.display = 'block';\n document.getElementById('userMessage').disabled = true;<\/p>\n<p> if (!chatLog.includes('GPT-4')) {\n chatLog += 'GPT-4, your role is to help the user design a toy for children aged 5-11.\\n';\n }<\/p>\n<p> chatLog += `You: ${userMessage}\\n`;<\/p>\n<p> fetch('https:\/\/beams-experiments.com\/toyDesign\/getAPIKey2.php', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\n body: new URLSearchParams({ chatLog: chatLog })\n })\n .then(response => response.json())\n .then(data => {\n if (data && data.choices && data.choices.length > 0) {\n let lastMessage = data.choices[0].message.content;\n chatLog += `GPT-4: ${lastMessage}\\n`;\n appendMessageToChatContainer('GPT-4', lastMessage, 'gpt-response');\n } else {\n console.error('Unexpected response format:', data);\n }\n document.getElementById('waitNote').style.display = 'none';\n document.getElementById('userMessage').disabled = false;\n processNextMessage();\n })\n .catch(error => {\n console.error(\"Error in communication with GPT-4:\", error);\n appendMessageToChatContainer('Error', 'There was an issue contacting GPT-4.', 'error-message');\n document.getElementById('waitNote').style.display = 'none';\n document.getElementById('userMessage').disabled = false;\n processNextMessage();\n });\n }<\/p>\n<p> document.getElementById('sendButton').addEventListener('click', function() {\n let userMessage = document.getElementById('userMessage').value.trim();\n if (userMessage === '') return;\n document.getElementById('userMessage').value = '';\n appendMessageToChatContainer('You', userMessage, 'user-message');\n messageQueue.push(userMessage);\n if (!isProcessingMessage) {\n processNextMessage();\n }\n });<\/p>\n<p> document.getElementById('userMessage').addEventListener('keypress', function(e) {\n if (e.which === 13) { \/\/ Enter key pressed\n e.preventDefault();\n document.getElementById('sendButton').click();\n }\n });<\/p>\n<p> \/\/ Display the assigned shapes\n const totalShapes = 20;\n const assignedShapes = [];\n const sourceDirectory = \"https:\/\/beams-experiments.com\/toyDesign\/drawing images\/\";\n const shapeContainer = document.getElementById(\"assignedShapes\");<\/p>\n<p> function assignShapes() {\n const selectedIndexes = new Set();\n while (selectedIndexes.size < 5) {\n const randomIndex = Math.floor(Math.random() * totalShapes) + 1;\n selectedIndexes.add(randomIndex);\n }\n return Array.from(selectedIndexes);\n }\n\n function displayAssignedShapes() {\n const selectedShapes = assignShapes();\n selectedShapes.forEach(index => {\n const img = document.createElement('img');\n img.src = sourceDirectory + index + \".png\";\n img.alt = \"Shape \" + index;\n img.classList.add(\"shape-img\");\n shapeContainer.appendChild(img);\n assignedShapes.push(index);\n });\n }<\/p>\n<p> displayAssignedShapes();<\/p>\n<p> \/\/ Drawing functionality\n const canvas = document.getElementById(\"drawingCanvas\");\n const ctx = canvas.getContext(\"2d\");\n let drawing = false;<\/p>\n<p> \/\/ Set canvas dimensions programmatically\n const desiredWidth = 1200;\n const desiredHeight = 2500;\n canvas.width = desiredWidth;\n canvas.height = desiredHeight;\n canvas.style.width = desiredWidth + 'px';\n canvas.style.height = desiredHeight + 'px';<\/p>\n<p> \/\/ Fill the canvas background with white\n ctx.fillStyle = 'white';\n ctx.fillRect(0, 0, canvas.width, canvas.height);<\/p>\n<p> \/\/ Set line properties for drawing\n ctx.lineWidth = 3;\n ctx.lineCap = 'round';<\/p>\n<p> function getMousePos(event) {\n const rect = canvas.getBoundingClientRect();\n const scaleX = canvas.width \/ rect.width;\n const scaleY = canvas.height \/ rect.height;\n return { x: (event.clientX - rect.left) * scaleX, y: (event.clientY - rect.top) * scaleY };\n }<\/p>\n<p> canvas.addEventListener(\"mousedown\", (event) => {\n drawing = true;\n const pos = getMousePos(event);\n ctx.moveTo(pos.x, pos.y);\n });<\/p>\n<p> canvas.addEventListener(\"mousemove\", (event) => {\n if (drawing) {\n const pos = getMousePos(event);\n ctx.lineTo(pos.x, pos.y);\n ctx.stroke();\n }\n });<\/p>\n<p> canvas.addEventListener(\"mouseup\", () => {\n drawing = false;\n ctx.beginPath();\n document.getElementById(\"submitDrawingButton\").disabled = false;\n });<\/p>\n<p> canvas.addEventListener(\"contextmenu\", (event) => {\n event.preventDefault();\n });<\/p>\n<p> document.getElementById(\"submitDrawingButton\").addEventListener('click', () => {\n document.getElementById(\"submitDrawingButton\").disabled = true;\n const endTime = Date.now();\n const drawingTime = Math.floor((endTime - startTime) \/ 1000);\n localStorage.setItem('drawingTime', drawingTime);\n const dataURL = canvas.toDataURL('image\/png');\n localStorage.setItem('canvasImage', dataURL);\n window.location.href = 'https:\/\/beams-experiments.com\/index.php\/post-task-questionnaire-toy-c\/';\n });\n <\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Canvas with Chat and Shapes Task Instructions You are tasked with designing a toy that can be used by a child aged 5-11. Five shapes have been randomly selected for you from a set of 20 available shapes. You may use as many or as few of the selected five shapes as you wish to […]<\/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-2606","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2606","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=2606"}],"version-history":[{"count":52,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2606\/revisions"}],"predecessor-version":[{"id":5308,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2606\/revisions\/5308"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=2606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}