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: 45vh; \/* Reduced height *\/\n overflow-y: auto;\n border: 1px solid #ddd;\n padding: 15px;\n background-color: #f8f8f8;\n margin-top: 20px;\n transition: margin-left 0.3s ease;\n }\n\n #allShapes {\n display: grid;\n grid-template-columns: repeat(5, 1fr); \/* 5 items per row *\/\n gap: 10px;\n max-width: 90%;\n margin-top: 20px;\n transition: margin-left 0.3s ease;\n }\n\n .shape-img {\n width: 100px;\n height: 100px;\n border: 1px solid #000;\n padding: 5px;\n cursor: pointer;\n background-color: white;\n }\n\n .selected {\n outline: 5px solid #007BFF;\n }\n\n #assignedShapes {\n display: flex;\n flex-direction: row;\n gap: 10px;\n margin-top: 10px;\n }\n\n #canvasWrapper {\n width: 80%;\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;\n transition: margin-left 0.3s ease;\n }\n\n #drawingCanvas {\n background-color: white;\n }\n\n .actionButton {\n margin-top: 20px;\n background-color: #007BFF;\n color: white;\n border: none;\n padding: 15px 30px;\n font-size: 18px;\n cursor: pointer;\n border-radius: 5px;\n }\n\n .actionButton:hover {\n background-color: #0056b3;\n }\n\n .actionButton:disabled {\n background-color: #999;\n cursor: not-allowed;\n }\n\n .buttonContainer {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n }\n\n #assignedShapes,\n #canvasWrapper,\n #submitButtonContainer,\n\t#confirmationContainer,\n\t#titleContainer\n {\n display: none;\n }\n\n #submitDrawingButton {\n display: none;\n padding: 10px 20px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: not-allowed;\n opacity: 0.5;\n margin-top: 20px;\n margin-bottom: 10px;\n margin: 10px auto;\n width: fit-content;\n }\n\n #submitDrawingButton:enabled {\n cursor: pointer;\n opacity: 1;\n }\n\n #submitButtonContainer {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\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#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 #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#totalCostDisplay {\n font-size: 1.5em;\n color: red; \/* Change color as needed *\/\n position: absolute;\n top: 90%; \/* Positioned 10% below the timer *\/\n transform: translateY(-60%);\n right: 300px; \/* Keep it aligned with the timer *\/\n}\n <\/style>\n<\/head>\n\n<body>\n <div class=\"flex-container\">\n <div id=\"taskInstructions\">\n <h3>Task Instructions<\/h3>\n <p><strong>You are tasked with designing a toy that can be used by a child aged 5\u201311.<\/strong><br>\n<br>\n<b>BEFORE YOU START, PLEASE NOTE THAT YOUR SUBMISSION WILL BE REJECTED IF:<br> 1) YOUR DRAWING DOESN’T INCLUDE ALL THE SHAPES THAT YOU HAVE SELECTED, 2) YOU USE ANY SHAPE MORE THAN ONCE, 3) YOU ADD SHAPES BEYOND THE SELECTED ONES, 4) YOU SELECT ITEMS ABOVE \u20ac5, OR 5) YOU USE ANY AI TO HELP YOU IN THE PROCESS.<\/b><p>\nYou have a budget of \u20ac5 to spend on items for your design. Below, you\u2019ll find 10 shapes with assigned prices. Select any number of items you want without exceeding the \u20ac5 limit. If your selection goes over, keep track and adjust accordingly. If you have selected a shape and want to deselect it before proceeding, simply click on it again. Once you proceed, you cannot change your selection. You may draw your idea on the provided digital canvas (by holding and dragging your mouse). Each selected item can be used <b>only once<\/b>. Please note that there is no function to drag the shapes or erase your drawing, and refreshing your browser is not allowed, ensuring that your progress is preserved. You can scroll down and use more space if you want. \n<br>\n<br><B>Being part of the control group, you are not allowed to use any AI in this process.<\/b><br>\n<\/p><p>The <b>minimum time for this task is 10 minutes<\/b> and the <b>maximum time allowed is 50 minutes<\/b>. <br>To submit your drawing, you will have to confirm that you <b>used all the shapes that you have selected, each only once, without any additional shapes or lines. The Submit button will be enabled only after 10 minutes.<\/b><\/p>\n\n <\/div>\n\n <div id=\"allShapes\"><\/div>\n\n <div id=\"proceedButtonContainer\" class=\"buttonContainer\">\n <button id=\"proceedButton\" class=\"actionButton\" disabled>Select items to proceed<\/button>\n <\/div>\n\n <div id=\"assignedShapes\"><\/div>\n\n <div id=\"canvasWrapper\">\n <canvas id=\"drawingCanvas\"><\/canvas>\n <\/div>\n <div id=\"timer\">00:00<\/div> \n<div id=\"totalCostDisplay\">\n Total Cost: <span id=\"totalCost\"><\/span>\n<\/div>\n\n <div id=\"confirmationContainer\">\n <label>\n <input type=\"checkbox\" id=\"confirmationCheckbox\">\n Please confirm that you used all the shapes that you have selected, each only once, without any additional shapes or lines.\n <\/label>\n <\/div>\n\n <div id=\"submitButtonContainer\">\n <button id=\"submitDrawingButton\" disabled>Submit Drawing<\/button>\n <\/div>\n\n<div id=\"progressBarContainer\">\n <div id=\"progressBar\"><\/div>\n<\/div>\n<div id=\"progressText\">Page 5 out of 6<\/div>\n <script>\n\n\n let hasDrawn = false; \/\/ Tracks whether the user has drawn something\n let startTime = Date.now(); \/\/ Store the time at the beginning of the task\n \/\/var minTime = false;\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.\");\nwindow.location.href = 'https:\/\/beams-experiments.com\/index.php\/thanks-for-your-participation-toys-discontinued\/';\n}\n \n const shapePrices = [0.5, 0.6, 0.8, 1.2, 1.4, 1.5, 1.6, 0.4, 1.3, 0.3];\n const selectedShapes = [];\n let totalCost = 0;\n let withinBudget = false;\n\n $(document).ready(function() {\n \/\/ Function to enable the submit button only if all conditions are met\n function checkIfCanSubmit() {\n if (hasDrawn && confirmationCheckbox.checked && minTime) {\n document.getElementById(\"submitDrawingButton\").disabled = false;\n } else {\n submitDrawingButton.disabled = true;\n }\n }\n\/\/ Add event listener for the custom event\n window.addEventListener('userChattedWithGPT', function() {\n checkIfCanSubmit(); \/\/ Check if the submit button can be enabled\n\tcheckIfCanProceed();\n });\n\/\/ Function to enable the proceed button only if both drawing and chatting conditions are met\nfunction checkIfCanProceed() {\nconsole.log('total cost is', totalCost);\n \n if (selectedShapes.length > 0 && withinBudget) {\n document.getElementById(\"proceedButton\").disabled = false;\n } else {\n document.getElementById(\"proceedButton\").disabled = true;\n }\n}\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 checkIfCanSubmit();\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 const allShapesContainer = $('#allShapes');\n const proceedButton = $('#proceedButton');\n\n shapePrices.forEach((price, i) => {\n const shapeId = i + 1;\n const shapeItem = `\n <div class=\"shape\" data-shape-id=\"${shapeId}\" data-price=\"${price}\">\n <img decoding=\"async\" src=\"https:\/\/beams-experiments.com\/toyDesign\/drawing images\/${shapeId}.png\" alt=\"Shape ${shapeId}\" class=\"shape-img\">\n <p>Price: \u20ac${price.toFixed(2)}<\/p>\n <\/div>`;\n allShapesContainer.append(shapeItem);\n });\n\n $('.shape').on('click', function() {\n const shapeId = $(this).data('shape-id');\n const price = $(this).data('price');\n if ($(this).hasClass('selected')) {\n $(this).removeClass('selected');\n selectedShapes.splice(selectedShapes.indexOf(shapeId), 1);\n totalCost -= price;\n } else {\n $(this).addClass('selected');\n selectedShapes.push(shapeId);\n totalCost += price;\n }\n\n \/\/ Update localStorage with the current selected shapes\n \t\t localStorage.setItem('selectedShapes', JSON.stringify(selectedShapes));\n localStorage.setItem('totalCost', totalCost);\n localStorage.setItem('totalShapes', selectedShapes.length); \/\/ Save the total number of selected shapes\n\n if (totalCost > 5) {\n alert('Reminder: Your selection exceeds the \u20ac5 budget.');\n withinBudget = false;\n }\n if (totalCost <= 5) {\n withinBudget = true;\n }\n document.getElementById('totalCost').textContent = totalCost.toFixed(2); \/\/ Display it in the span\n\n \/\/proceedButton.prop('disabled', selectedShapes.length === 0);\n checkIfCanProceed();\n });\n\n proceedButton.on('click', function() {\n $('#allShapes').hide();\n $('#proceedButtonContainer').hide();\n $('#assignedShapes').show();\n\t\t $('#confirmationContainer').show();\n\t\t $('#titleContainer').show();\n\n selectedShapes.forEach(id => {\n $('#assignedShapes').append(`\n <img decoding=\"async\" src=\"https:\/\/beams-experiments.com\/toyDesign\/drawing images\/${id}.png\" class=\"shape-img\">\n `);\n });\n\n $('#canvasWrapper').show();\n $('#submitButtonContainer').show();\n $('#submitDrawingButton').show();\n });\n\n \/\/ Drawing functionality\n const canvas = document.getElementById(\"drawingCanvas\");\n const ctx = canvas.getContext(\"2d\");\n let drawing = false;\n\n const desiredWidth = 900;\n const desiredHeight = 1200;\n canvas.width = desiredWidth;\n canvas.height = desiredHeight;\n canvas.style.width = desiredWidth + 'px';\n canvas.style.height = desiredHeight + 'px';\n ctx.fillStyle = 'white';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n ctx.lineWidth = 3;\n ctx.lineCap = 'round';\n\n function getMousePos(event) {\n const rect = canvas.getBoundingClientRect();\n const scaleX = canvas.width \/ rect.width;\n const scaleY = canvas.height \/ rect.height;\n\n return {\n x: (event.clientX - rect.left) * scaleX,\n y: (event.clientY - rect.top) * scaleY\n };\n }\n\n canvas.addEventListener(\"mousedown\", (event) => {\n drawing = true;\n hasDrawn = true;\n localStorage.setItem('hasDrawn', 1);\n checkIfCanSubmit(); \n const pos = getMousePos(event);\n ctx.moveTo(pos.x, pos.y);\n });\n\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 canvas.addEventListener(\"mouseup\", () => {\n drawing = false;\n ctx.beginPath();\n });\n\n canvas.addEventListener(\"contextmenu\", (event) => {\n event.preventDefault();\n });\n \tconst confirmationCheckbox = document.getElementById(\"confirmationCheckbox\");\n confirmationCheckbox.addEventListener('change', checkIfCanSubmit);\n\n\n \/\/ Submit drawing button\n const submitDrawingButton = document.getElementById(\"submitDrawingButton\");\n\n submitDrawingButton.addEventListener('click', () => {\n \/\/ Disable the button to prevent multiple submissions\n submitDrawingButton.disabled = true;\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 \/\/ Get the dataURL of the canvas\n const dataURL = canvas.toDataURL('image\/png');\n \n \n\n \/\/ Save the image data URL & chatLog in localStorage\n localStorage.setItem('canvasImage', dataURL);\n \/\/var chatLog = localStorage.getItem('chatLog', chatLog);\n \/\/ console.log('ChatLog is:', chatLog);\n \/\/ Redirect to the next page\n window.location.href = 'https:\/\/beams-experiments.com\/index.php\/post-task-questionnaire-toy-fin\/';\n \n \n });\n });\n <\/script>\n\n \n <\/div>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Task Instructions Frame Task Instructions You are tasked with designing a toy that can be used by a child aged 5\u201311. BEFORE YOU START, PLEASE NOTE THAT YOUR SUBMISSION WILL BE REJECTED IF: 1) YOUR DRAWING DOESN’T INCLUDE ALL THE SHAPES THAT YOU HAVE SELECTED, 2) YOU USE ANY SHAPE MORE THAN ONCE, 3) YOU […]<\/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-4755","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/4755","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=4755"}],"version-history":[{"count":16,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/4755\/revisions"}],"predecessor-version":[{"id":6187,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/4755\/revisions\/6187"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=4755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4755,"date":"2024-11-01T16:04:21","date_gmt":"2024-11-01T16:04:21","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=4755"},"modified":"2024-12-25T11:09:58","modified_gmt":"2024-12-25T11:09:58","slug":"toy-design-c2-fin","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/toy-design-c2-fin\/","title":{"rendered":"Toy Design-Financial Constraints"},"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: 45vh; \/* Reduced height *\/\n overflow-y: auto;\n border: 1px solid #ddd;\n padding: 15px;\n background-color: #f8f8f8;\n margin-top: 20px;\n transition: margin-left 0.3s ease;\n }\n\n #allShapes {\n display: grid;\n grid-template-columns: repeat(5, 1fr); \/* 5 items per row *\/\n gap: 10px;\n max-width: 90%;\n margin-top: 20px;\n transition: margin-left 0.3s ease;\n }\n\n .shape-img {\n width: 100px;\n height: 100px;\n border: 1px solid #000;\n padding: 5px;\n cursor: pointer;\n background-color: white;\n }\n\n .selected {\n outline: 5px solid #007BFF;\n }\n\n #assignedShapes {\n display: flex;\n flex-direction: row;\n gap: 10px;\n margin-top: 10px;\n }\n\n #canvasWrapper {\n width: 80%;\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;\n transition: margin-left 0.3s ease;\n }\n\n #drawingCanvas {\n background-color: white;\n }\n\n .actionButton {\n margin-top: 20px;\n background-color: #007BFF;\n color: white;\n border: none;\n padding: 15px 30px;\n font-size: 18px;\n cursor: pointer;\n border-radius: 5px;\n }\n\n .actionButton:hover {\n background-color: #0056b3;\n }\n\n .actionButton:disabled {\n background-color: #999;\n cursor: not-allowed;\n }\n\n .buttonContainer {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n }\n\n #assignedShapes,\n #canvasWrapper,\n #submitButtonContainer,\n\t#confirmationContainer,\n\t#titleContainer\n {\n display: none;\n }\n\n #submitDrawingButton {\n display: none;\n padding: 10px 20px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: not-allowed;\n opacity: 0.5;\n margin-top: 20px;\n margin-bottom: 10px;\n margin: 10px auto;\n width: fit-content;\n }\n\n #submitDrawingButton:enabled {\n cursor: pointer;\n opacity: 1;\n }\n\n #submitButtonContainer {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\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#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 #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#totalCostDisplay {\n font-size: 1.5em;\n color: red; \/* Change color as needed *\/\n position: absolute;\n top: 90%; \/* Positioned 10% below the timer *\/\n transform: translateY(-60%);\n right: 300px; \/* Keep it aligned with the timer *\/\n}\n <\/style>\n<\/head>\n\n<body>\n <div class=\"flex-container\">\n <div id=\"taskInstructions\">\n <h3>Task Instructions<\/h3>\n <p><strong>You are tasked with designing a toy that can be used by a child aged 5\u201311.<\/strong><br>\n<br>\n<b>BEFORE YOU START, PLEASE NOTE THAT YOUR SUBMISSION WILL BE REJECTED IF:<br> 1) YOUR DRAWING DOESN’T INCLUDE ALL THE SHAPES THAT YOU HAVE SELECTED, 2) YOU USE ANY SHAPE MORE THAN ONCE, 3) YOU ADD SHAPES BEYOND THE SELECTED ONES, 4) YOU SELECT ITEMS ABOVE \u20ac5, OR 5) YOU USE ANY AI TO HELP YOU IN THE PROCESS.<\/b><p>\nYou have a budget of \u20ac5 to spend on items for your design. Below, you\u2019ll find 10 shapes with assigned prices. Select any number of items you want without exceeding the \u20ac5 limit. If your selection goes over, keep track and adjust accordingly. If you have selected a shape and want to deselect it before proceeding, simply click on it again. Once you proceed, you cannot change your selection. You may draw your idea on the provided digital canvas (by holding and dragging your mouse). Each selected item can be used <b>only once<\/b>. Please note that there is no function to drag the shapes or erase your drawing, and refreshing your browser is not allowed, ensuring that your progress is preserved. You can scroll down and use more space if you want. \n<br>\n<br><B>Being part of the control group, you are not allowed to use any AI in this process.<\/b><br>\n<\/p><p>The <b>minimum time for this task is 10 minutes<\/b> and the <b>maximum time allowed is 50 minutes<\/b>. <br>To submit your drawing, you will have to confirm that you <b>used all the shapes that you have selected, each only once, without any additional shapes or lines. The Submit button will be enabled only after 10 minutes.<\/b><\/p>\n\n <\/div>\n\n <div id=\"allShapes\"><\/div>\n\n <div id=\"proceedButtonContainer\" class=\"buttonContainer\">\n <button id=\"proceedButton\" class=\"actionButton\" disabled>Select items to proceed<\/button>\n <\/div>\n\n <div id=\"assignedShapes\"><\/div>\n\n <div id=\"canvasWrapper\">\n <canvas id=\"drawingCanvas\"><\/canvas>\n <\/div>\n <div id=\"timer\">00:00<\/div> \n<div id=\"totalCostDisplay\">\n Total Cost: <span id=\"totalCost\"><\/span>\n<\/div>\n\n <div id=\"confirmationContainer\">\n <label>\n <input type=\"checkbox\" id=\"confirmationCheckbox\">\n Please confirm that you used all the shapes that you have selected, each only once, without any additional shapes or lines.\n <\/label>\n <\/div>\n\n <div id=\"submitButtonContainer\">\n <button id=\"submitDrawingButton\" disabled>Submit Drawing<\/button>\n <\/div>\n\n<div id=\"progressBarContainer\">\n <div id=\"progressBar\"><\/div>\n<\/div>\n<div id=\"progressText\">Page 5 out of 6<\/div>\n <script>\n\n\n let hasDrawn = false; \/\/ Tracks whether the user has drawn something\n let startTime = Date.now(); \/\/ Store the time at the beginning of the task\n \/\/var minTime = false;\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.\");\nwindow.location.href = 'https:\/\/beams-experiments.com\/index.php\/thanks-for-your-participation-toys-discontinued\/';\n}\n \n const shapePrices = [0.5, 0.6, 0.8, 1.2, 1.4, 1.5, 1.6, 0.4, 1.3, 0.3];\n const selectedShapes = [];\n let totalCost = 0;\n let withinBudget = false;\n\n $(document).ready(function() {\n \/\/ Function to enable the submit button only if all conditions are met\n function checkIfCanSubmit() {\n if (hasDrawn && confirmationCheckbox.checked && minTime) {\n document.getElementById(\"submitDrawingButton\").disabled = false;\n } else {\n submitDrawingButton.disabled = true;\n }\n }\n\/\/ Add event listener for the custom event\n window.addEventListener('userChattedWithGPT', function() {\n checkIfCanSubmit(); \/\/ Check if the submit button can be enabled\n\tcheckIfCanProceed();\n });\n\/\/ Function to enable the proceed button only if both drawing and chatting conditions are met\nfunction checkIfCanProceed() {\nconsole.log('total cost is', totalCost);\n \n if (selectedShapes.length > 0 && withinBudget) {\n document.getElementById(\"proceedButton\").disabled = false;\n } else {\n document.getElementById(\"proceedButton\").disabled = true;\n }\n}\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 checkIfCanSubmit();\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 const allShapesContainer = $('#allShapes');\n const proceedButton = $('#proceedButton');\n\n shapePrices.forEach((price, i) => {\n const shapeId = i + 1;\n const shapeItem = `\n <div class=\"shape\" data-shape-id=\"${shapeId}\" data-price=\"${price}\">\n <img decoding=\"async\" src=\"https:\/\/beams-experiments.com\/toyDesign\/drawing images\/${shapeId}.png\" alt=\"Shape ${shapeId}\" class=\"shape-img\">\n <p>Price: \u20ac${price.toFixed(2)}<\/p>\n <\/div>`;\n allShapesContainer.append(shapeItem);\n });\n\n $('.shape').on('click', function() {\n const shapeId = $(this).data('shape-id');\n const price = $(this).data('price');\n if ($(this).hasClass('selected')) {\n $(this).removeClass('selected');\n selectedShapes.splice(selectedShapes.indexOf(shapeId), 1);\n totalCost -= price;\n } else {\n $(this).addClass('selected');\n selectedShapes.push(shapeId);\n totalCost += price;\n }\n\n \/\/ Update localStorage with the current selected shapes\n \t\t localStorage.setItem('selectedShapes', JSON.stringify(selectedShapes));\n localStorage.setItem('totalCost', totalCost);\n localStorage.setItem('totalShapes', selectedShapes.length); \/\/ Save the total number of selected shapes\n\n if (totalCost > 5) {\n alert('Reminder: Your selection exceeds the \u20ac5 budget.');\n withinBudget = false;\n }\n if (totalCost <= 5) {\n withinBudget = true;\n }\n document.getElementById('totalCost').textContent = totalCost.toFixed(2); \/\/ Display it in the span\n\n \/\/proceedButton.prop('disabled', selectedShapes.length === 0);\n checkIfCanProceed();\n });\n\n proceedButton.on('click', function() {\n $('#allShapes').hide();\n $('#proceedButtonContainer').hide();\n $('#assignedShapes').show();\n\t\t $('#confirmationContainer').show();\n\t\t $('#titleContainer').show();\n\n selectedShapes.forEach(id => {\n $('#assignedShapes').append(`\n <img decoding=\"async\" src=\"https:\/\/beams-experiments.com\/toyDesign\/drawing images\/${id}.png\" class=\"shape-img\">\n `);\n });\n\n $('#canvasWrapper').show();\n $('#submitButtonContainer').show();\n $('#submitDrawingButton').show();\n });\n\n \/\/ Drawing functionality\n const canvas = document.getElementById(\"drawingCanvas\");\n const ctx = canvas.getContext(\"2d\");\n let drawing = false;\n\n const desiredWidth = 900;\n const desiredHeight = 1200;\n canvas.width = desiredWidth;\n canvas.height = desiredHeight;\n canvas.style.width = desiredWidth + 'px';\n canvas.style.height = desiredHeight + 'px';\n ctx.fillStyle = 'white';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n ctx.lineWidth = 3;\n ctx.lineCap = 'round';\n\n function getMousePos(event) {\n const rect = canvas.getBoundingClientRect();\n const scaleX = canvas.width \/ rect.width;\n const scaleY = canvas.height \/ rect.height;\n\n return {\n x: (event.clientX - rect.left) * scaleX,\n y: (event.clientY - rect.top) * scaleY\n };\n }\n\n canvas.addEventListener(\"mousedown\", (event) => {\n drawing = true;\n hasDrawn = true;\n localStorage.setItem('hasDrawn', 1);\n checkIfCanSubmit(); \n const pos = getMousePos(event);\n ctx.moveTo(pos.x, pos.y);\n });\n\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 canvas.addEventListener(\"mouseup\", () => {\n drawing = false;\n ctx.beginPath();\n });\n\n canvas.addEventListener(\"contextmenu\", (event) => {\n event.preventDefault();\n });\n \tconst confirmationCheckbox = document.getElementById(\"confirmationCheckbox\");\n confirmationCheckbox.addEventListener('change', checkIfCanSubmit);\n\n\n \/\/ Submit drawing button\n const submitDrawingButton = document.getElementById(\"submitDrawingButton\");\n\n submitDrawingButton.addEventListener('click', () => {\n \/\/ Disable the button to prevent multiple submissions\n submitDrawingButton.disabled = true;\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 \/\/ Get the dataURL of the canvas\n const dataURL = canvas.toDataURL('image\/png');\n \n \n\n \/\/ Save the image data URL & chatLog in localStorage\n localStorage.setItem('canvasImage', dataURL);\n \/\/var chatLog = localStorage.getItem('chatLog', chatLog);\n \/\/ console.log('ChatLog is:', chatLog);\n \/\/ Redirect to the next page\n window.location.href = 'https:\/\/beams-experiments.com\/index.php\/post-task-questionnaire-toy-fin\/';\n \n \n });\n });\n <\/script>\n\n \n <\/div>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Task Instructions Frame Task Instructions You are tasked with designing a toy that can be used by a child aged 5\u201311. BEFORE YOU START, PLEASE NOTE THAT YOUR SUBMISSION WILL BE REJECTED IF: 1) YOUR DRAWING DOESN’T INCLUDE ALL THE SHAPES THAT YOU HAVE SELECTED, 2) YOU USE ANY SHAPE MORE THAN ONCE, 3) YOU […]<\/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-4755","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/4755","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=4755"}],"version-history":[{"count":16,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/4755\/revisions"}],"predecessor-version":[{"id":6187,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/4755\/revisions\/6187"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=4755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}