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, used each only once, and did not add additional shapes 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\n\n let hasDrawn = false; \/\/ Tracks whether the user has drawn something\n \n let startTime = Date.now(); \/\/ Store the time at the beginning of the task\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 control group, you are <b>NOT allowed to use any AI in the process<\/b>. <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 <b>all five shapes in your drawing, used each only once, and did not add additional shapes<\/b> in order to submit it and proceed.\";\n\/\/ Add event listener for the custom event\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 = 3000;\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 < 2400) {\n minTime = true; \/\/ Set minTime to true when the timer reaches 10 minutes\n \n\t updateSubmitButtonState();\n \n }\n if (timer == 2700) {\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 && 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 in localStorage\n localStorage.setItem('canvasImage', dataURL);\n \n \n \/\/ Redirect to the next page\n window.location.href = 'https:\/\/beams-experiments.com\/index.php\/post-task-questionnaire-toy\/';\n });\n });\n\n<\/script>\n \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, used each only once, and did not add additional shapes 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-3820","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/3820","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=3820"}],"version-history":[{"count":41,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/3820\/revisions"}],"predecessor-version":[{"id":6183,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/3820\/revisions\/6183"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=3820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3820,"date":"2024-10-09T05:06:28","date_gmt":"2024-10-09T04:06:28","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=3820"},"modified":"2025-02-07T07:30:09","modified_gmt":"2025-02-07T07:30:09","slug":"toy-design-c2","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/toy-design-c2\/","title":{"rendered":"Toy Design-C2"},"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, used each only once, and did not add additional shapes 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\n\n let hasDrawn = false; \/\/ Tracks whether the user has drawn something\n \n let startTime = Date.now(); \/\/ Store the time at the beginning of the task\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 control group, you are <b>NOT allowed to use any AI in the process<\/b>. <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 <b>all five shapes in your drawing, used each only once, and did not add additional shapes<\/b> in order to submit it and proceed.\";\n\/\/ Add event listener for the custom event\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 = 3000;\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 < 2400) {\n minTime = true; \/\/ Set minTime to true when the timer reaches 10 minutes\n \n\t updateSubmitButtonState();\n \n }\n if (timer == 2700) {\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 && 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 in localStorage\n localStorage.setItem('canvasImage', dataURL);\n \n \n \/\/ Redirect to the next page\n window.location.href = 'https:\/\/beams-experiments.com\/index.php\/post-task-questionnaire-toy\/';\n });\n });\n\n<\/script>\n \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, used each only once, and did not add additional shapes 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-3820","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/3820","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=3820"}],"version-history":[{"count":41,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/3820\/revisions"}],"predecessor-version":[{"id":6183,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/3820\/revisions\/6183"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=3820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}