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> \n1) YOU DO NOT GENERATE AT LEAST 15 IDEAS WITH THE CHATBOT AND DO NOT COME UP WITH ONE DESIGN<br>\n2) YOUR DRAWING DOESN’T INCLUDE ALL THE SHAPES THAT YOU HAVE SELECTED<br>\n3) YOU USE ANY SHAPE MORE THAN ONCE <br>\n4) YOU ADD SHAPES BEYOND THE SELECTED ONES<\/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>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’ button to close it. The chatbot cannot see your shapes, but it does know the shapes and their prices, so you will need to tell it, <b>in one line<\/b>, the names of the shapes you are considering or want advice on. Additionally, it <b>cannot generate images<\/b>. Failure to engage with the AI chatbot as required may result in the <b>rejection<\/b> of your submission. <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<\/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>Consult with the Chatbot first then 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\/\/for the chatbot\n var roleVar = 'GPT-4o, your role is to help the user design a toy for children aged 5-11. Help them also in selecting the items to use in their design within the budget of \u20ac5. Remember they are selecting the items, not assigned to them. It is critical that you do not suggest to them adding more items to reach the full budget or to enhance their idea. Respond to this only if they ask you. Once they have selected the shapes instruct them to press the proceed button to move to the drawing canvas. It is critical that you suggest providing helping them in the shapes selection and in the design using the transformational creativity principles as follows: It involves redefining or reimagining the core attributes, purposes, or applications of a toy in accordance with Boden (1998) paper. Once they name or select shapes, do apply this technique and provide at least five ideas that are truely transformational and novel and start with the most novel and original ones. Remind the users they have to generate overall at least 15 ideas with your help. Here are the full 10 items with their prices: 3D bracket (\u20ac0.5), 3D cone (\u20ac0.6), 3D cube (\u20ac0.8), 3D cylinder (\u20ac1.2), 3D half sphere (\u20ac1.4) 3D handle (\u20ac1.5), 3D rectangular block (\u20ac1.6), 3D sphere (\u20ac0.4), 3D u shape (\u20ac1.3), and flat circle\/disk (\u20ac0.3). Here are the full instructions given to participants: 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 DOES NOT 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 DO NOT GENERATE AT LEAST 15 IDEAS DURING THE TASK AS REQUESTED. You 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 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. The <b>minimum time for this task is 10 minutes<\/b> and the <b>maximum time allowed is 50 minutes<\/b>. To submit your drawing, you will have to confirm that your items are within the budget. 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. The chatbot cannot see your shapes, but it does know the shapes and their prices, so you will need to tell it the names of the shapes you are considering or want advice on. Additionally, it <b>cannot generate images<\/b>. Failure to engage with the AI chatbot as required may result in the <b>rejection<\/b> of your submission. To submit your drawing, you will have to confirm that you used all the shapes that you have selected, each only once, without any additional shapes.';\n\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 \/\/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.\");\n\/\/window.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 && hasChattedWithGPT && 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 hasChattedWithGPT = true;\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 (hasChattedWithGPT && 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-AI-Fin\/';\n \n \n });\n });\n <\/script>\n\n <script src=\"https:\/\/beams-experiments.com\/chatbot.js\"><\/script>\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) YOU DO NOT GENERATE AT LEAST 15 IDEAS WITH THE CHATBOT AND DO NOT COME UP WITH ONE DESIGN 2) YOUR […]<\/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-6026","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6026","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=6026"}],"version-history":[{"count":19,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6026\/revisions"}],"predecessor-version":[{"id":6188,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6026\/revisions\/6188"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=6026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6026,"date":"2024-12-26T07:48:06","date_gmt":"2024-12-26T07:48:06","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=6026"},"modified":"2025-02-07T07:59:14","modified_gmt":"2025-02-07T07:59:14","slug":"toy-design-c2-ai-fin-tc","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/toy-design-c2-ai-fin-tc\/","title":{"rendered":"Toy-Design-Financial Constraints & AI & TC"},"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> \n1) YOU DO NOT GENERATE AT LEAST 15 IDEAS WITH THE CHATBOT AND DO NOT COME UP WITH ONE DESIGN<br>\n2) YOUR DRAWING DOESN’T INCLUDE ALL THE SHAPES THAT YOU HAVE SELECTED<br>\n3) YOU USE ANY SHAPE MORE THAN ONCE <br>\n4) YOU ADD SHAPES BEYOND THE SELECTED ONES<\/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>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’ button to close it. The chatbot cannot see your shapes, but it does know the shapes and their prices, so you will need to tell it, <b>in one line<\/b>, the names of the shapes you are considering or want advice on. Additionally, it <b>cannot generate images<\/b>. Failure to engage with the AI chatbot as required may result in the <b>rejection<\/b> of your submission. <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<\/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>Consult with the Chatbot first then 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\/\/for the chatbot\n var roleVar = 'GPT-4o, your role is to help the user design a toy for children aged 5-11. Help them also in selecting the items to use in their design within the budget of \u20ac5. Remember they are selecting the items, not assigned to them. It is critical that you do not suggest to them adding more items to reach the full budget or to enhance their idea. Respond to this only if they ask you. Once they have selected the shapes instruct them to press the proceed button to move to the drawing canvas. It is critical that you suggest providing helping them in the shapes selection and in the design using the transformational creativity principles as follows: It involves redefining or reimagining the core attributes, purposes, or applications of a toy in accordance with Boden (1998) paper. Once they name or select shapes, do apply this technique and provide at least five ideas that are truely transformational and novel and start with the most novel and original ones. Remind the users they have to generate overall at least 15 ideas with your help. Here are the full 10 items with their prices: 3D bracket (\u20ac0.5), 3D cone (\u20ac0.6), 3D cube (\u20ac0.8), 3D cylinder (\u20ac1.2), 3D half sphere (\u20ac1.4) 3D handle (\u20ac1.5), 3D rectangular block (\u20ac1.6), 3D sphere (\u20ac0.4), 3D u shape (\u20ac1.3), and flat circle\/disk (\u20ac0.3). Here are the full instructions given to participants: 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 DOES NOT 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 DO NOT GENERATE AT LEAST 15 IDEAS DURING THE TASK AS REQUESTED. You 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 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. The <b>minimum time for this task is 10 minutes<\/b> and the <b>maximum time allowed is 50 minutes<\/b>. To submit your drawing, you will have to confirm that your items are within the budget. 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. The chatbot cannot see your shapes, but it does know the shapes and their prices, so you will need to tell it the names of the shapes you are considering or want advice on. Additionally, it <b>cannot generate images<\/b>. Failure to engage with the AI chatbot as required may result in the <b>rejection<\/b> of your submission. To submit your drawing, you will have to confirm that you used all the shapes that you have selected, each only once, without any additional shapes.';\n\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 \/\/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.\");\n\/\/window.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 && hasChattedWithGPT && 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 hasChattedWithGPT = true;\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 (hasChattedWithGPT && 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-AI-Fin\/';\n \n \n });\n });\n <\/script>\n\n <script src=\"https:\/\/beams-experiments.com\/chatbot.js\"><\/script>\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) YOU DO NOT GENERATE AT LEAST 15 IDEAS WITH THE CHATBOT AND DO NOT COME UP WITH ONE DESIGN 2) YOUR […]<\/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-6026","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6026","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=6026"}],"version-history":[{"count":19,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6026\/revisions"}],"predecessor-version":[{"id":6188,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6026\/revisions\/6188"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=6026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}