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 YOU DON\u2019T COLLABORATE WITH THE CHATBOT.<br><BR> ONLY ONE FINAL DRAWING IS NEEDED!<\/b><p>\nBelow, you\u2019ll find 10 shapes with assigned prices. You may select any number of items you like, with NO BUDGET LIMITATIONS. 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). 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. To discard part or all of your drawing, simply mark it with an X.\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 the names of the shapes you are considering or want advice on. Additionally, it <b>cannot generate images<\/b>. \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>have collaborated with the chatbot<\/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 have collaborated with the chatbot.\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 noting that there is not budget limits. Remember they are selecting the items, not assigned to them. Do not suggest to them adding more items. 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 and ask if they need help in the design. It is critical that you generate the toy ideas by transforming a standard toy by fundamentally reimagining its core attributes\u2014like turning a simple block set into shape-shifting, sensory-engaging building pieces, or a plush toy into an interactive companion that monitors real-world environments. Think about each defining feature of the toy (e.g., safety, educational value, interactivity, reusability) and drastically alter it to produce truly novel concepts, following Boden\u2019s (1998) principle of transformational creativity. Do not suggest to users to refresh their page as it is not allowed. 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: BEFORE YOU START, PLEASE NOTE THAT YOUR SUBMISSION WILL BE REJECTED IF YOU DO NOT COLLABORATE WITH THE CHATBOT. Below, you will find 10 shapes with assigned prices. You may select any number of items you like, with NO BUDGET LIMITATIONS. 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 only once. No additional shapes are allowed. 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. To discard part or all of your drawing, simply mark it with an X. 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 the names of the shapes you are considering or want advice on. Additionally, it <b>cannot generate images<\/b>. 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 you have collaborated with the chatbot.';\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.\");\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\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 ) {\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 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-nofin\/';\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 YOU DON\u2019T COLLABORATE WITH THE CHATBOT. ONLY ONE FINAL DRAWING IS NEEDED! Below, you\u2019ll find 10 shapes with assigned prices. You may […]<\/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-6107","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6107","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=6107"}],"version-history":[{"count":21,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6107\/revisions"}],"predecessor-version":[{"id":6160,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6107\/revisions\/6160"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=6107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6107,"date":"2025-01-14T07:53:41","date_gmt":"2025-01-14T07:53:41","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=6107"},"modified":"2025-01-24T17:41:20","modified_gmt":"2025-01-24T17:41:20","slug":"toys-no-fin-constraints-ai-tc","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/toys-no-fin-constraints-ai-tc\/","title":{"rendered":"Toys-No-Fin-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 YOU DON\u2019T COLLABORATE WITH THE CHATBOT.<br><BR> ONLY ONE FINAL DRAWING IS NEEDED!<\/b><p>\nBelow, you\u2019ll find 10 shapes with assigned prices. You may select any number of items you like, with NO BUDGET LIMITATIONS. 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). 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. To discard part or all of your drawing, simply mark it with an X.\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 the names of the shapes you are considering or want advice on. Additionally, it <b>cannot generate images<\/b>. \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>have collaborated with the chatbot<\/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 have collaborated with the chatbot.\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 noting that there is not budget limits. Remember they are selecting the items, not assigned to them. Do not suggest to them adding more items. 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 and ask if they need help in the design. It is critical that you generate the toy ideas by transforming a standard toy by fundamentally reimagining its core attributes\u2014like turning a simple block set into shape-shifting, sensory-engaging building pieces, or a plush toy into an interactive companion that monitors real-world environments. Think about each defining feature of the toy (e.g., safety, educational value, interactivity, reusability) and drastically alter it to produce truly novel concepts, following Boden\u2019s (1998) principle of transformational creativity. Do not suggest to users to refresh their page as it is not allowed. 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: BEFORE YOU START, PLEASE NOTE THAT YOUR SUBMISSION WILL BE REJECTED IF YOU DO NOT COLLABORATE WITH THE CHATBOT. Below, you will find 10 shapes with assigned prices. You may select any number of items you like, with NO BUDGET LIMITATIONS. 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 only once. No additional shapes are allowed. 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. To discard part or all of your drawing, simply mark it with an X. 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 the names of the shapes you are considering or want advice on. Additionally, it <b>cannot generate images<\/b>. 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 you have collaborated with the chatbot.';\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.\");\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\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 ) {\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 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-nofin\/';\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 YOU DON\u2019T COLLABORATE WITH THE CHATBOT. ONLY ONE FINAL DRAWING IS NEEDED! Below, you\u2019ll find 10 shapes with assigned prices. You may […]<\/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-6107","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6107","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=6107"}],"version-history":[{"count":21,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6107\/revisions"}],"predecessor-version":[{"id":6160,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6107\/revisions\/6160"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=6107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}