Task Instructions Frame<\/title>\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">\n\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 }\n\n #taskInstructions {\n width: 100%;\n max-width: 100%;\n height: 50vh;\n overflow-y: auto;\n border: 1px solid #ddd;\n padding: 15px;\n margin-top: 20px;\n margin-left: 0;\n background-color: #f8f8f8;\n }\n\n #assignedShapes {\n display: flex;\n flex-direction: row;\n gap: 10px;\n margin-top: 10px;\n margin-left: 0;\n }\n\n .shape-img {\n width: 120px; \/* Increased size *\/\n height: 120px; \/* Increased size *\/\n border: 1px solid #000;\n padding: 5px;\n }\n\n #canvasWrapper {\n width: 90%;\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: 0; \/* Shift canvas to the left by 20px *\/\n }\n\n #drawingCanvas {\n background-color: white; \/* White background for drawing *\/\n }\n\n \/* Submit Drawing Button styling *\/\n#submitDrawingButton {\n display: block;\n padding: 10px 20px;\n background-color: #007bff; \/* Blue color *\/\n color: white;\n border: none;\n border-radius: 5px;\n cursor: not-allowed; \/* Disabled state cursor *\/\n opacity: 0.5; \/* Faded appearance when disabled *\/\n margin-top: 20px;\n margin-bottom: 10px;\n margin: 10px auto;\n width: fit-content;\n}\n\n\/* Enabled state for the button *\/\n#submitDrawingButton:enabled {\n cursor: pointer; \/* Enable pointer cursor *\/\n opacity: 1; \/* Full opacity when enabled *\/\n}\n\n \/* Center the submit button *\/\n #submitButtonContainer {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n }\n\n \n#progressBarContainer {\n width: 90%;\n background-color: #e0e0e0;\n border-radius: 5px;\n margin-top: 10px;\n }\n\n #progressBar {\n height: 10px;\n background-color: #007bff;\n border-radius: 5px;\n width: 88%;\n }\n\n #progressText {\n text-align: center;\n margin-top: 5px;\n }\n \/* Confirmation checkbox styling *\/\n #confirmationContainer {\n margin-top: 20px;\n font-size: 16px;\n }\n\n #confirmationContainer input {\n margin-right: 10px;\n }\n #timer {\n font-size: 2em;\n color: red;\n position: absolute;\n top: 80%;\n transform: translateY(-60%);\n right: 300px; \/* Initially positioned *\/\n}\n\n <\/style>\n\n\n<\/head>\n\n<body>\n \n\n<div class=\"flex-container\">\n \n <div id=\"taskInstructions\">\n <h3>Task Instructions<\/h3>\n <div id=\"instructionsText\">Loading instructions…<\/div>\n <\/div>\n\n <div id=\"assignedShapes\">\n \n <\/div>\n\n <div id=\"canvasWrapper\">\n <canvas id=\"drawingCanvas\"><\/canvas>\n <\/div>\n <div id=\"timer\">00:00<\/div> \n \n\n <div id=\"confirmationContainer\">\n <label>\n <input type=\"checkbox\" id=\"confirmationCheckbox\">\n Please confirm that you have incorporated all five shapes into your drawing before proceeding.\n <\/label>\n <\/div>\n\n \n <div id=\"submitButtonContainer\">\n <button id=\"submitDrawingButton\" disabled>Submit Drawing<\/button>\n <\/div>\n \n\n<div id=\"progressBarContainer\">\n <div id=\"progressBar\"><\/div>\n<\/div>\n<div id=\"progressText\">Page 5 out of 6<\/div>\n\n \n <script>\n\/\/for the chatbot\n var roleVar = 'GPT-4o, your role is to help the user design a toy for children aged 5-11. Provide concise answers.';\n var apiURL = 'https:\/\/beams-experiments.com\/toyDesign\/getAPIKey2.php';\n\n let hasDrawn = false; \/\/ Tracks whether the user has drawn something\n let hasChattedWithGPT = false; \/\/ Tracks whether the user has interacted with GPT-4\n let startTime = Date.now(); \/\/ Store the time at the beginning of the task\n let finalTotalTimeNotVisible = 5;\n\nvar reDo = localStorage.getItem('hasDrawn');\nif (reDo == 1) {\nalert(\"You have refreshed your browser or attempted to redo your task. Your participation has been discontinued.\");\n\/\/window.location.href = 'https:\/\/beams-experiments.com\/index.php\/thanks-for-your-participation-toys-discontinued\/';\n}\n \nconst taskInstructions = \"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 must use <b>ALL five<\/b> of the selected shapes in your toy design, but each shape can only be used <b>once<\/b> (using other shapes is <b>not<\/b> allowed). You may draw your idea on the provided digital canvas. Please note: <b>dragging shapes or erasing your drawing is not allowed<\/b>, and <b>refreshing your browser is prohibited<\/b> to ensure your progress is saved. You can scroll down to use more space if needed. <br>Being part of the experimental group, which explores how AI can influence creative thinking, you are <b>required to co-design your toy with the help of the AI chatbot on your left<\/b>. To interact with the chatbot, click the chatbot icon on the left to open the chat interface. When finished, click the 'X' to close it. Failure to engage with the AI chatbot as required may result in the <b>rejection<\/b> of your submission. <br>The <b>minimum time for this task is 10 minutes<\/b> and the <b>maximum time<\/b> allowed is <b>50 minutes<\/b>. Once you have completed your design, and the minimum 10 minutes has passed (notice the timer on your right), please confirm below that you have used all five shapes in your drawing in order to submit it and proceed.\";\n\/\/ Add event listener for the custom event\n window.addEventListener('userChattedWithGPT', function() {\n hasChattedWithGPT = true;\n updateSubmitButtonState(); \/\/ Check if the submit button can be enabled\n });\n $(document).ready(function() {\n \/\/track time screen not attended by user\n\n \/\/ Track time screen not attended by user\n let timePageNotVisibleStart = 0;\n let totalTimeNotVisible = 0; \/\/ Initialize totalTimeNotVisible\n\n function updateTotalTimeNotVisible() {\n if (document.visibilityState === 'hidden' && timePageNotVisibleStart !== 0) {\n \/\/ Calculate time page was not visible and reset start time\n const notVisibleDuration = Date.now() - timePageNotVisibleStart;\n totalTimeNotVisible += Math.round(notVisibleDuration \/ 1000);\n timePageNotVisibleStart = 0;\n }\n \/\/ Optionally log the updated total time here for debugging\n }\n\n document.addEventListener('visibilitychange', () => {\n if (document.visibilityState === 'visible') {\n if (timePageNotVisibleStart !== 0) {\n const notVisibleDuration = Date.now() - timePageNotVisibleStart;\n totalTimeNotVisible += Math.round(notVisibleDuration \/ 1000); \/\/ Convert ms to seconds and accumulate\n timePageNotVisibleStart = 0; \/\/ Reset the start time\n }\n } else {\n timePageNotVisibleStart = Date.now();\n }\n });\n\n\n \n\/\/ start of timer code\nvar timerDuration = 30;\nvar minTime = false;\n\n\nstartTimer(timerDuration);\n\n\n\/\/ Start the timer\nfunction startTimer(duration) {\n var timer = duration, minutes, seconds;\n\n if (typeof window.timerInterval !== 'undefined') {\n clearInterval(window.timerInterval); \/\/ Clear previous interval if it exists\n }\n\n window.timerInterval = setInterval(function() {\n minutes = parseInt(timer \/ 60, 10);\n seconds = parseInt(timer % 60, 10);\n\n minutes = minutes < 10 ? \"0\" + minutes : minutes;\n seconds = seconds < 10 ? \"0\" + seconds : seconds;\n\n \/\/ Update UI with time\n if (timer >= 0) {\n $('#timer').text(minutes + \":\" + seconds);\n }\n\n if (timer < 27) {\n minTime = true; \/\/ Set minTime to true when the timer reaches 10 minutes\n \n\t updateSubmitButtonState();\n \n }\n if (timer == 24) {\n \/\/alert('Please make sure you are interacting with the AI');\n} \n if (timer < 0) {\n \n $('#drawingCanvas').hide();\n\t $('#timer').text(\"00:00\"); \/\/ Ensure timer text is set to 00:00\n clearInterval(window.timerInterval); \/\/ Stop the timer once it's done\n }\n\n --timer; \/\/ Decrement timer\n }, 1000);\n}\n\/\/ end of timer code\n\n \/\/ Display task instructions\n\n\n if (taskInstructions) {\n $('#instructionsText').html(taskInstructions.replace(\/\\n\/g, '<br>'));\n } else {\n $('#instructionsText').html('Task instructions not found.');\n }\n\n \nconst totalShapes = 20; \/\/ We have 20 images\n const assignedShapes = []; \/\/ To hold the 5 randomly selected shapes\n const sourceDirectory = \"https:\/\/beams-experiments.com\/toyDesign\/drawing images\/\"; \/\/ Path to the folder where images are stored\n const shapeContainer = document.getElementById(\"assignedShapes\");\n\n \/\/ Randomly assign 5 shapes from the available 20 and store in local storage\nfunction 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 \n \/\/ Convert the set to an array\n const selectedArray = Array.from(selectedIndexes);\n \n \/\/ Convert the array to a comma-separated string\n const selectedShapesString = selectedArray.join(',');\n \n \/\/ Store the selected shape indexes as a string in local storage\n localStorage.setItem('selectedShapes', selectedShapesString);\nconsole.log('selected shapes are', selectedShapesString);\n \n return selectedArray;\n}\n\n \/\/ Display the assigned shapes\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 }\n\n \/\/ Call function to display assigned shapes\n displayAssignedShapes();\n\n \/\/ Canvas drawing functionality\n const canvas = document.getElementById(\"drawingCanvas\");\n const ctx = canvas.getContext(\"2d\");\n let drawing = false;\n\n \/\/ Set canvas dimensions programmatically\n const desiredWidth = 900; \/\/ Adjust this value as needed\n const desiredHeight = 1200; \/\/ Adjust this value as needed\n\n canvas.width = desiredWidth;\n canvas.height = desiredHeight;\n\n \/\/ Fill the canvas background with white\n ctx.fillStyle = 'white';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n \/\/ Set line properties for drawing\n ctx.lineWidth = 3;\n ctx.lineCap = 'round';\n\n \/\/ Function to get mouse position relative to the canvas, accounting for scaling\n function getMousePos(event) {\n const rect = canvas.getBoundingClientRect();\n const scaleX = canvas.width \/ rect.width; \/\/ Scale factor in the X direction\n const scaleY = canvas.height \/ rect.height; \/\/ Scale factor in the Y direction\n\n return {\n x: (event.clientX - rect.left) * scaleX,\n y: (event.clientY - rect.top) * scaleY\n };\n }\n\n \/\/ Start drawing when the mouse is clicked\n canvas.addEventListener(\"mousedown\", (event) => {\n drawing = true;\n const pos = getMousePos(event);\n ctx.moveTo(pos.x, pos.y);\n });\n\n \/\/ Draw while the mouse is moving\n canvas.addEventListener(\"mousemove\", (event) => {\n if (drawing) {\n const pos = getMousePos(event);\n ctx.lineTo(pos.x, pos.y);\n ctx.stroke();\n }\n });\n\n \/\/ Stop drawing when the mouse is released\n canvas.addEventListener(\"mouseup\", () => {\n drawing = false;\n ctx.beginPath();\n hasDrawn = true; \/\/ User has drawn on the canvas\n localStorage.setItem('hasDrawn', 1);\n \n updateSubmitButtonState(); \/\/ Check if the submit button can be enabled\n });\n\n \/\/ Prevent default behavior of right-click (if needed)\n canvas.addEventListener(\"contextmenu\", (event) => {\n event.preventDefault();\n });\n\/\/ Update submit button state based on drawing and confirmation checkbox\n const confirmationCheckbox = document.getElementById(\"confirmationCheckbox\");\n confirmationCheckbox.addEventListener('change', updateSubmitButtonState);\n\n \n function updateSubmitButtonState() {\n \n\n if (hasDrawn && hasChattedWithGPT && confirmationCheckbox.checked && minTime) {\n \n submitDrawingButton.disabled = false;\n } else {\n submitDrawingButton.disabled = true;\n }\n }\n \/\/ Submit drawing button\n const submitDrawingButton = document.getElementById(\"submitDrawingButton\");\n submitDrawingButton.disabled = true; \/\/ Initially disable the submit button\n\n submitDrawingButton.addEventListener('click', () => {\n \/\/ Disable the button to prevent multiple submissions\n submitDrawingButton.disabled = true;\n\n \/\/ Calculate the time spent on the drawing task as a whole in seconds\n const endTime = Date.now();\n const drawingTime = Math.floor((endTime - startTime) \/ 1000); \/\/ Time in seconds\n\n \/\/ Save the drawing time to localStorage\n localStorage.setItem('drawingTime', drawingTime);\n\n \/\/ Get the dataURL of the canvas\n const dataURL = canvas.toDataURL('image\/png');\n \n localStorage.setItem('finalTotalTimeNotVisible', totalTimeNotVisible.toString());\n console.log(`Final total time not visible saved: ${totalTimeNotVisible} seconds.`);\n\n\n \/\/ Save the image data URL & chatLog in localStorage\n localStorage.setItem('canvasImage', dataURL);\n var chatLog = localStorage.getItem('chatLog');\n \/\/console.log('ChatLog is:', chatLog);\n \n \/\/ Redirect to the next page\n \/\/window.location.href = 'https:\/\/beams-experiments.com\/index.php\/post-task-questionnaire-toy-ai\/';\n });\n });\n\n<\/script>\n \n <script src=\"https:\/\/beams-experiments.com\/chatbot.js\"><\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Task Instructions Frame Task Instructions Loading instructions… 00:00 Please confirm that you have incorporated all five shapes into your drawing before proceeding. Submit Drawing Page 5 out of 6<\/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-35","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/35","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=35"}],"version-history":[{"count":355,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":6390,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions\/6390"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":35,"date":"2023-12-06T16:35:48","date_gmt":"2023-12-06T16:35:48","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=35"},"modified":"2026-02-28T07:37:01","modified_gmt":"2026-02-28T07:37:01","slug":"experiment","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/experiment\/","title":{"rendered":"Ideation with GPT-4-Toys"},"content":{"rendered":"\n\n\n\n \n Task Instructions Frame<\/title>\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">\n\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 }\n\n #taskInstructions {\n width: 100%;\n max-width: 100%;\n height: 50vh;\n overflow-y: auto;\n border: 1px solid #ddd;\n padding: 15px;\n margin-top: 20px;\n margin-left: 0;\n background-color: #f8f8f8;\n }\n\n #assignedShapes {\n display: flex;\n flex-direction: row;\n gap: 10px;\n margin-top: 10px;\n margin-left: 0;\n }\n\n .shape-img {\n width: 120px; \/* Increased size *\/\n height: 120px; \/* Increased size *\/\n border: 1px solid #000;\n padding: 5px;\n }\n\n #canvasWrapper {\n width: 90%;\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: 0; \/* Shift canvas to the left by 20px *\/\n }\n\n #drawingCanvas {\n background-color: white; \/* White background for drawing *\/\n }\n\n \/* Submit Drawing Button styling *\/\n#submitDrawingButton {\n display: block;\n padding: 10px 20px;\n background-color: #007bff; \/* Blue color *\/\n color: white;\n border: none;\n border-radius: 5px;\n cursor: not-allowed; \/* Disabled state cursor *\/\n opacity: 0.5; \/* Faded appearance when disabled *\/\n margin-top: 20px;\n margin-bottom: 10px;\n margin: 10px auto;\n width: fit-content;\n}\n\n\/* Enabled state for the button *\/\n#submitDrawingButton:enabled {\n cursor: pointer; \/* Enable pointer cursor *\/\n opacity: 1; \/* Full opacity when enabled *\/\n}\n\n \/* Center the submit button *\/\n #submitButtonContainer {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n }\n\n \n#progressBarContainer {\n width: 90%;\n background-color: #e0e0e0;\n border-radius: 5px;\n margin-top: 10px;\n }\n\n #progressBar {\n height: 10px;\n background-color: #007bff;\n border-radius: 5px;\n width: 88%;\n }\n\n #progressText {\n text-align: center;\n margin-top: 5px;\n }\n \/* Confirmation checkbox styling *\/\n #confirmationContainer {\n margin-top: 20px;\n font-size: 16px;\n }\n\n #confirmationContainer input {\n margin-right: 10px;\n }\n #timer {\n font-size: 2em;\n color: red;\n position: absolute;\n top: 80%;\n transform: translateY(-60%);\n right: 300px; \/* Initially positioned *\/\n}\n\n <\/style>\n\n\n<\/head>\n\n<body>\n \n\n<div class=\"flex-container\">\n \n <div id=\"taskInstructions\">\n <h3>Task Instructions<\/h3>\n <div id=\"instructionsText\">Loading instructions…<\/div>\n <\/div>\n\n <div id=\"assignedShapes\">\n \n <\/div>\n\n <div id=\"canvasWrapper\">\n <canvas id=\"drawingCanvas\"><\/canvas>\n <\/div>\n <div id=\"timer\">00:00<\/div> \n \n\n <div id=\"confirmationContainer\">\n <label>\n <input type=\"checkbox\" id=\"confirmationCheckbox\">\n Please confirm that you have incorporated all five shapes into your drawing before proceeding.\n <\/label>\n <\/div>\n\n \n <div id=\"submitButtonContainer\">\n <button id=\"submitDrawingButton\" disabled>Submit Drawing<\/button>\n <\/div>\n \n\n<div id=\"progressBarContainer\">\n <div id=\"progressBar\"><\/div>\n<\/div>\n<div id=\"progressText\">Page 5 out of 6<\/div>\n\n \n <script>\n\/\/for the chatbot\n var roleVar = 'GPT-4o, your role is to help the user design a toy for children aged 5-11. Provide concise answers.';\n var apiURL = 'https:\/\/beams-experiments.com\/toyDesign\/getAPIKey2.php';\n\n let hasDrawn = false; \/\/ Tracks whether the user has drawn something\n let hasChattedWithGPT = false; \/\/ Tracks whether the user has interacted with GPT-4\n let startTime = Date.now(); \/\/ Store the time at the beginning of the task\n let finalTotalTimeNotVisible = 5;\n\nvar reDo = localStorage.getItem('hasDrawn');\nif (reDo == 1) {\nalert(\"You have refreshed your browser or attempted to redo your task. Your participation has been discontinued.\");\n\/\/window.location.href = 'https:\/\/beams-experiments.com\/index.php\/thanks-for-your-participation-toys-discontinued\/';\n}\n \nconst taskInstructions = \"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 must use <b>ALL five<\/b> of the selected shapes in your toy design, but each shape can only be used <b>once<\/b> (using other shapes is <b>not<\/b> allowed). You may draw your idea on the provided digital canvas. Please note: <b>dragging shapes or erasing your drawing is not allowed<\/b>, and <b>refreshing your browser is prohibited<\/b> to ensure your progress is saved. You can scroll down to use more space if needed. <br>Being part of the experimental group, which explores how AI can influence creative thinking, you are <b>required to co-design your toy with the help of the AI chatbot on your left<\/b>. To interact with the chatbot, click the chatbot icon on the left to open the chat interface. When finished, click the 'X' to close it. Failure to engage with the AI chatbot as required may result in the <b>rejection<\/b> of your submission. <br>The <b>minimum time for this task is 10 minutes<\/b> and the <b>maximum time<\/b> allowed is <b>50 minutes<\/b>. Once you have completed your design, and the minimum 10 minutes has passed (notice the timer on your right), please confirm below that you have used all five shapes in your drawing in order to submit it and proceed.\";\n\/\/ Add event listener for the custom event\n window.addEventListener('userChattedWithGPT', function() {\n hasChattedWithGPT = true;\n updateSubmitButtonState(); \/\/ Check if the submit button can be enabled\n });\n $(document).ready(function() {\n \/\/track time screen not attended by user\n\n \/\/ Track time screen not attended by user\n let timePageNotVisibleStart = 0;\n let totalTimeNotVisible = 0; \/\/ Initialize totalTimeNotVisible\n\n function updateTotalTimeNotVisible() {\n if (document.visibilityState === 'hidden' && timePageNotVisibleStart !== 0) {\n \/\/ Calculate time page was not visible and reset start time\n const notVisibleDuration = Date.now() - timePageNotVisibleStart;\n totalTimeNotVisible += Math.round(notVisibleDuration \/ 1000);\n timePageNotVisibleStart = 0;\n }\n \/\/ Optionally log the updated total time here for debugging\n }\n\n document.addEventListener('visibilitychange', () => {\n if (document.visibilityState === 'visible') {\n if (timePageNotVisibleStart !== 0) {\n const notVisibleDuration = Date.now() - timePageNotVisibleStart;\n totalTimeNotVisible += Math.round(notVisibleDuration \/ 1000); \/\/ Convert ms to seconds and accumulate\n timePageNotVisibleStart = 0; \/\/ Reset the start time\n }\n } else {\n timePageNotVisibleStart = Date.now();\n }\n });\n\n\n \n\/\/ start of timer code\nvar timerDuration = 30;\nvar minTime = false;\n\n\nstartTimer(timerDuration);\n\n\n\/\/ Start the timer\nfunction startTimer(duration) {\n var timer = duration, minutes, seconds;\n\n if (typeof window.timerInterval !== 'undefined') {\n clearInterval(window.timerInterval); \/\/ Clear previous interval if it exists\n }\n\n window.timerInterval = setInterval(function() {\n minutes = parseInt(timer \/ 60, 10);\n seconds = parseInt(timer % 60, 10);\n\n minutes = minutes < 10 ? \"0\" + minutes : minutes;\n seconds = seconds < 10 ? \"0\" + seconds : seconds;\n\n \/\/ Update UI with time\n if (timer >= 0) {\n $('#timer').text(minutes + \":\" + seconds);\n }\n\n if (timer < 27) {\n minTime = true; \/\/ Set minTime to true when the timer reaches 10 minutes\n \n\t updateSubmitButtonState();\n \n }\n if (timer == 24) {\n \/\/alert('Please make sure you are interacting with the AI');\n} \n if (timer < 0) {\n \n $('#drawingCanvas').hide();\n\t $('#timer').text(\"00:00\"); \/\/ Ensure timer text is set to 00:00\n clearInterval(window.timerInterval); \/\/ Stop the timer once it's done\n }\n\n --timer; \/\/ Decrement timer\n }, 1000);\n}\n\/\/ end of timer code\n\n \/\/ Display task instructions\n\n\n if (taskInstructions) {\n $('#instructionsText').html(taskInstructions.replace(\/\\n\/g, '<br>'));\n } else {\n $('#instructionsText').html('Task instructions not found.');\n }\n\n \nconst totalShapes = 20; \/\/ We have 20 images\n const assignedShapes = []; \/\/ To hold the 5 randomly selected shapes\n const sourceDirectory = \"https:\/\/beams-experiments.com\/toyDesign\/drawing images\/\"; \/\/ Path to the folder where images are stored\n const shapeContainer = document.getElementById(\"assignedShapes\");\n\n \/\/ Randomly assign 5 shapes from the available 20 and store in local storage\nfunction 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 \n \/\/ Convert the set to an array\n const selectedArray = Array.from(selectedIndexes);\n \n \/\/ Convert the array to a comma-separated string\n const selectedShapesString = selectedArray.join(',');\n \n \/\/ Store the selected shape indexes as a string in local storage\n localStorage.setItem('selectedShapes', selectedShapesString);\nconsole.log('selected shapes are', selectedShapesString);\n \n return selectedArray;\n}\n\n \/\/ Display the assigned shapes\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 }\n\n \/\/ Call function to display assigned shapes\n displayAssignedShapes();\n\n \/\/ Canvas drawing functionality\n const canvas = document.getElementById(\"drawingCanvas\");\n const ctx = canvas.getContext(\"2d\");\n let drawing = false;\n\n \/\/ Set canvas dimensions programmatically\n const desiredWidth = 900; \/\/ Adjust this value as needed\n const desiredHeight = 1200; \/\/ Adjust this value as needed\n\n canvas.width = desiredWidth;\n canvas.height = desiredHeight;\n\n \/\/ Fill the canvas background with white\n ctx.fillStyle = 'white';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n \/\/ Set line properties for drawing\n ctx.lineWidth = 3;\n ctx.lineCap = 'round';\n\n \/\/ Function to get mouse position relative to the canvas, accounting for scaling\n function getMousePos(event) {\n const rect = canvas.getBoundingClientRect();\n const scaleX = canvas.width \/ rect.width; \/\/ Scale factor in the X direction\n const scaleY = canvas.height \/ rect.height; \/\/ Scale factor in the Y direction\n\n return {\n x: (event.clientX - rect.left) * scaleX,\n y: (event.clientY - rect.top) * scaleY\n };\n }\n\n \/\/ Start drawing when the mouse is clicked\n canvas.addEventListener(\"mousedown\", (event) => {\n drawing = true;\n const pos = getMousePos(event);\n ctx.moveTo(pos.x, pos.y);\n });\n\n \/\/ Draw while the mouse is moving\n canvas.addEventListener(\"mousemove\", (event) => {\n if (drawing) {\n const pos = getMousePos(event);\n ctx.lineTo(pos.x, pos.y);\n ctx.stroke();\n }\n });\n\n \/\/ Stop drawing when the mouse is released\n canvas.addEventListener(\"mouseup\", () => {\n drawing = false;\n ctx.beginPath();\n hasDrawn = true; \/\/ User has drawn on the canvas\n localStorage.setItem('hasDrawn', 1);\n \n updateSubmitButtonState(); \/\/ Check if the submit button can be enabled\n });\n\n \/\/ Prevent default behavior of right-click (if needed)\n canvas.addEventListener(\"contextmenu\", (event) => {\n event.preventDefault();\n });\n\/\/ Update submit button state based on drawing and confirmation checkbox\n const confirmationCheckbox = document.getElementById(\"confirmationCheckbox\");\n confirmationCheckbox.addEventListener('change', updateSubmitButtonState);\n\n \n function updateSubmitButtonState() {\n \n\n if (hasDrawn && hasChattedWithGPT && confirmationCheckbox.checked && minTime) {\n \n submitDrawingButton.disabled = false;\n } else {\n submitDrawingButton.disabled = true;\n }\n }\n \/\/ Submit drawing button\n const submitDrawingButton = document.getElementById(\"submitDrawingButton\");\n submitDrawingButton.disabled = true; \/\/ Initially disable the submit button\n\n submitDrawingButton.addEventListener('click', () => {\n \/\/ Disable the button to prevent multiple submissions\n submitDrawingButton.disabled = true;\n\n \/\/ Calculate the time spent on the drawing task as a whole in seconds\n const endTime = Date.now();\n const drawingTime = Math.floor((endTime - startTime) \/ 1000); \/\/ Time in seconds\n\n \/\/ Save the drawing time to localStorage\n localStorage.setItem('drawingTime', drawingTime);\n\n \/\/ Get the dataURL of the canvas\n const dataURL = canvas.toDataURL('image\/png');\n \n localStorage.setItem('finalTotalTimeNotVisible', totalTimeNotVisible.toString());\n console.log(`Final total time not visible saved: ${totalTimeNotVisible} seconds.`);\n\n\n \/\/ Save the image data URL & chatLog in localStorage\n localStorage.setItem('canvasImage', dataURL);\n var chatLog = localStorage.getItem('chatLog');\n \/\/console.log('ChatLog is:', chatLog);\n \n \/\/ Redirect to the next page\n \/\/window.location.href = 'https:\/\/beams-experiments.com\/index.php\/post-task-questionnaire-toy-ai\/';\n });\n });\n\n<\/script>\n \n <script src=\"https:\/\/beams-experiments.com\/chatbot.js\"><\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Task Instructions Frame Task Instructions Loading instructions… 00:00 Please confirm that you have incorporated all five shapes into your drawing before proceeding. Submit Drawing Page 5 out of 6<\/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-35","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/35","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=35"}],"version-history":[{"count":355,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":6390,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/35\/revisions\/6390"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}