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;\n overflow-y: auto;\n border: 1px solid #ddd;\n padding: 15px;\n margin-top: 20px;\n margin-left: 0;\n background-color: #f8f8f8;\n }\n\n #assignedShapes {\n display: flex;\n flex-direction: row;\n gap: 10px;\n margin-top: 10px;\n margin-left: 0;\n }\n\n .shape-img {\n width: 120px; \/* Increased size *\/\n height: 120px; \/* Increased size *\/\n border: 1px solid #000;\n padding: 5px;\n }\n\n #canvasWrapper {\n width: 90%;\n height: 70vh;\n overflow-y: scroll;\n border: 1px solid black;\n margin-top: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: 0; \/* Shift canvas to the left by 20px *\/\n }\n\n #drawingCanvas {\n background-color: white; \/* White background for drawing *\/\n }\n\n \/* Submit Drawing Button styling *\/\n#proceedButton {\n display: block;\n padding: 10px 20px;\n background-color: #007bff; \/* Blue color *\/\n color: white;\n border: none;\n border-radius: 5px;\n cursor: not-allowed; \/* Disabled state cursor *\/\n opacity: 0.5; \/* Faded appearance when disabled *\/\n margin-top: 20px;\n margin-bottom: 10px;\n margin: 10px auto;\n width: fit-content;\n}\n\n\/* Enabled state for the button *\/\n#proceedButton:enabled {\n cursor: pointer; \/* Enable pointer cursor *\/\n opacity: 1; \/* Full opacity when enabled *\/\n}\n\n \/* Center the submit button *\/\n #submitButtonContainer {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n }\n\n \n#progressBarContainer {\n width: 90%;\n background-color: #e0e0e0;\n border-radius: 5px;\n margin-top: 10px;\n }\n\n #progressBar {\n height: 10px;\n background-color: #007bff;\n border-radius: 5px;\n width: 88%;\n }\n\n #progressText {\n text-align: center;\n margin-top: 5px;\n }\n \/* Confirmation checkbox styling *\/\n #confirmationContainer {\n margin-top: 20px;\n font-size: 16px;\n }\n\n #confirmationContainer input {\n margin-right: 10px;\n }\n #timer {\n font-size: 2em;\n color: red;\n position: absolute;\n top: 80%;\n transform: translateY(-60%);\n right: 300px; \/* Initially positioned *\/\n}\n\n <\/style>\n\n\n<\/head>\n\n<body>\n \n\n<div class=\"flex-container\">\n \n <div id=\"taskInstructions\">\n <h3>Task Instructions<\/h3>\n <div id=\"instructionsText\">Loading instructions…<\/div>\n <\/div>\n\n<div id=\"timer\">00:00<\/div> \n\n \n\n \n <div id=\"submitButtonContainer\">\n <button id=\"proceedButton\" disabled>Proceed<\/button>\n <\/div>\n <div id=\"responseOutput\"><\/div>\n \n <script>\n var roleVar = 'GPT-4o, your role is to help the user generate 10 unique ideas for a new shoe. Provide concise answers.';\n var apiURL = 'https:\/\/beams-experiments.com\/toyDesign\/getAPIKey2.php';\n\n let hasChattedWithGPT = false;\n let startTime = Date.now();\n const taskInstructions = \"You are employed by a footwear company's product development unit. Your supervisor has tasked you with presenting 10 unique ideas for a new shoe at the upcoming management meeting. Develop a range of innovative ideas for a shoe aimed at a specific, underserved market or sport. Exercise creativity to offer at least 10 distinct concepts for a new shoe within the designated time, as shown by your on-screen timer. Please feel free to use the AI chatbot on your left<\/b>. To interact with it, click the icon on the left to open the chat interface. When finished, click the 'X' to close it. You have <B>three minutes<\/b> to complete the task. When you are finished press proceed.\";\n \n window.addEventListener('userChattedWithGPT', function() {\n hasChattedWithGPT = true;\n updateSubmitButtonState();\n });\n\n $(document).ready(function() {\n var timerDuration = 180;\n var minTime = false;\n function updateSubmitButtonState() {\n if (minTime) {\n proceedButton.disabled = false;\n } else {\n proceedButton.disabled = true;\n }\n }\n function startTimer(duration) {\n var timer = duration, minutes, seconds;\n if (typeof window.timerInterval !== 'undefined') {\n clearInterval(window.timerInterval);\n }\n window.timerInterval = setInterval(function() {\n minutes = parseInt(timer \/ 60, 10);\n seconds = parseInt(timer % 60, 10);\n minutes = minutes < 10 ? \"0\" + minutes : minutes;\n seconds = seconds < 10 ? \"0\" + seconds : seconds;\n if (timer >= 0) {\n $('#timer').text(minutes + \":\" + seconds);\n }\n if (timer < 30) {\n minTime = true;\n updateSubmitButtonState();\n }\n if (timer == 24) {\n \/\/ alert('Please make sure you are interacting with the AI');\n } \n if (timer < 0) {\n minTime = true;\n $('#drawingCanvas').hide();\n $('#timer').text(\"00:00\");\n clearInterval(window.timerInterval);\n }\n --timer;\n }, 1000);\n }\n\n if (taskInstructions) {\n $('#instructionsText').html(taskInstructions.replace(\/\\n\/g, '<br>'));\n } else {\n $('#instructionsText').html('Task instructions not found.');\n }\n\n \n\n const proceedButton = document.getElementById(\"proceedButton\");\n const outputDiv = document.getElementById(\"responseOutput\");\n proceedButton.disabled = true;\n\n proceedButton.addEventListener(\"click\", () => {\n proceedButton.disabled = true;\n const chatLog = localStorage.getItem(\"chatLog\");\n if (!chatLog) {\n alert(\"No chat log found.\");\n proceedButton.disabled = false;\n return;\n }\n\n \/\/ Use the new PHP endpoint for novelty scoring\n const xhr = new XMLHttpRequest();\n xhr.open(\"POST\", \"https:\/\/beams-experiments.com\/toyDesign\/getAPIKeyShoes.php\", true);\n xhr.setRequestHeader(\"Content-Type\", \"application\/x-www-form-urlencoded\");\n\n xhr.onload = function() {\n if (xhr.status === 200) {\n try {\n const response = JSON.parse(xhr.responseText);\n if (response && response.noveltyAnalysis) {\n outputDiv.textContent = `The novelty score of the ideas is: ${response.noveltyAnalysis}`;\n } else {\n outputDiv.textContent = \"Unexpected response format.\";\n }\n } catch (error) {\n outputDiv.textContent = `Error parsing response: ${error.message}`;\n }\n } else {\n outputDiv.textContent = \"Error fetching novelty analysis.\";\n }\n proceedButton.disabled = false;\n };\n\n xhr.onerror = function() {\n outputDiv.textContent = \"Request failed. Please try again.\";\n proceedButton.disabled = false;\n };\n\n xhr.send(`chatLog=${encodeURIComponent(chatLog)}`);\n});\n\n\/\/ Initialize or continue the timer\nstartTimer(timerDuration);\n\n });\n<\/script>\n \n <script src=\"https:\/\/beams-experiments.com\/chatbot.js\"><\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Task Instructions Frame Task Instructions Loading instructions… 00:00 Proceed<\/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-6133","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6133","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=6133"}],"version-history":[{"count":11,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6133\/revisions"}],"predecessor-version":[{"id":6391,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6133\/revisions\/6391"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=6133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6133,"date":"2025-01-19T08:00:44","date_gmt":"2025-01-19T08:00:44","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=6133"},"modified":"2025-01-21T05:21:51","modified_gmt":"2025-01-21T05:21:51","slug":"ideation-with-chatbot-shoes","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/ideation-with-chatbot-shoes\/","title":{"rendered":"Ideation with chatbot-shoes"},"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;\n overflow-y: auto;\n border: 1px solid #ddd;\n padding: 15px;\n margin-top: 20px;\n margin-left: 0;\n background-color: #f8f8f8;\n }\n\n #assignedShapes {\n display: flex;\n flex-direction: row;\n gap: 10px;\n margin-top: 10px;\n margin-left: 0;\n }\n\n .shape-img {\n width: 120px; \/* Increased size *\/\n height: 120px; \/* Increased size *\/\n border: 1px solid #000;\n padding: 5px;\n }\n\n #canvasWrapper {\n width: 90%;\n height: 70vh;\n overflow-y: scroll;\n border: 1px solid black;\n margin-top: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: 0; \/* Shift canvas to the left by 20px *\/\n }\n\n #drawingCanvas {\n background-color: white; \/* White background for drawing *\/\n }\n\n \/* Submit Drawing Button styling *\/\n#proceedButton {\n display: block;\n padding: 10px 20px;\n background-color: #007bff; \/* Blue color *\/\n color: white;\n border: none;\n border-radius: 5px;\n cursor: not-allowed; \/* Disabled state cursor *\/\n opacity: 0.5; \/* Faded appearance when disabled *\/\n margin-top: 20px;\n margin-bottom: 10px;\n margin: 10px auto;\n width: fit-content;\n}\n\n\/* Enabled state for the button *\/\n#proceedButton:enabled {\n cursor: pointer; \/* Enable pointer cursor *\/\n opacity: 1; \/* Full opacity when enabled *\/\n}\n\n \/* Center the submit button *\/\n #submitButtonContainer {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n }\n\n \n#progressBarContainer {\n width: 90%;\n background-color: #e0e0e0;\n border-radius: 5px;\n margin-top: 10px;\n }\n\n #progressBar {\n height: 10px;\n background-color: #007bff;\n border-radius: 5px;\n width: 88%;\n }\n\n #progressText {\n text-align: center;\n margin-top: 5px;\n }\n \/* Confirmation checkbox styling *\/\n #confirmationContainer {\n margin-top: 20px;\n font-size: 16px;\n }\n\n #confirmationContainer input {\n margin-right: 10px;\n }\n #timer {\n font-size: 2em;\n color: red;\n position: absolute;\n top: 80%;\n transform: translateY(-60%);\n right: 300px; \/* Initially positioned *\/\n}\n\n <\/style>\n\n\n<\/head>\n\n<body>\n \n\n<div class=\"flex-container\">\n \n <div id=\"taskInstructions\">\n <h3>Task Instructions<\/h3>\n <div id=\"instructionsText\">Loading instructions…<\/div>\n <\/div>\n\n<div id=\"timer\">00:00<\/div> \n\n \n\n \n <div id=\"submitButtonContainer\">\n <button id=\"proceedButton\" disabled>Proceed<\/button>\n <\/div>\n <div id=\"responseOutput\"><\/div>\n \n <script>\n var roleVar = 'GPT-4o, your role is to help the user generate 10 unique ideas for a new shoe. Provide concise answers.';\n var apiURL = 'https:\/\/beams-experiments.com\/toyDesign\/getAPIKey2.php';\n\n let hasChattedWithGPT = false;\n let startTime = Date.now();\n const taskInstructions = \"You are employed by a footwear company's product development unit. Your supervisor has tasked you with presenting 10 unique ideas for a new shoe at the upcoming management meeting. Develop a range of innovative ideas for a shoe aimed at a specific, underserved market or sport. Exercise creativity to offer at least 10 distinct concepts for a new shoe within the designated time, as shown by your on-screen timer. Please feel free to use the AI chatbot on your left<\/b>. To interact with it, click the icon on the left to open the chat interface. When finished, click the 'X' to close it. You have <B>three minutes<\/b> to complete the task. When you are finished press proceed.\";\n \n window.addEventListener('userChattedWithGPT', function() {\n hasChattedWithGPT = true;\n updateSubmitButtonState();\n });\n\n $(document).ready(function() {\n var timerDuration = 180;\n var minTime = false;\n function updateSubmitButtonState() {\n if (minTime) {\n proceedButton.disabled = false;\n } else {\n proceedButton.disabled = true;\n }\n }\n function startTimer(duration) {\n var timer = duration, minutes, seconds;\n if (typeof window.timerInterval !== 'undefined') {\n clearInterval(window.timerInterval);\n }\n window.timerInterval = setInterval(function() {\n minutes = parseInt(timer \/ 60, 10);\n seconds = parseInt(timer % 60, 10);\n minutes = minutes < 10 ? \"0\" + minutes : minutes;\n seconds = seconds < 10 ? \"0\" + seconds : seconds;\n if (timer >= 0) {\n $('#timer').text(minutes + \":\" + seconds);\n }\n if (timer < 30) {\n minTime = true;\n updateSubmitButtonState();\n }\n if (timer == 24) {\n \/\/ alert('Please make sure you are interacting with the AI');\n } \n if (timer < 0) {\n minTime = true;\n $('#drawingCanvas').hide();\n $('#timer').text(\"00:00\");\n clearInterval(window.timerInterval);\n }\n --timer;\n }, 1000);\n }\n\n if (taskInstructions) {\n $('#instructionsText').html(taskInstructions.replace(\/\\n\/g, '<br>'));\n } else {\n $('#instructionsText').html('Task instructions not found.');\n }\n\n \n\n const proceedButton = document.getElementById(\"proceedButton\");\n const outputDiv = document.getElementById(\"responseOutput\");\n proceedButton.disabled = true;\n\n proceedButton.addEventListener(\"click\", () => {\n proceedButton.disabled = true;\n const chatLog = localStorage.getItem(\"chatLog\");\n if (!chatLog) {\n alert(\"No chat log found.\");\n proceedButton.disabled = false;\n return;\n }\n\n \/\/ Use the new PHP endpoint for novelty scoring\n const xhr = new XMLHttpRequest();\n xhr.open(\"POST\", \"https:\/\/beams-experiments.com\/toyDesign\/getAPIKeyShoes.php\", true);\n xhr.setRequestHeader(\"Content-Type\", \"application\/x-www-form-urlencoded\");\n\n xhr.onload = function() {\n if (xhr.status === 200) {\n try {\n const response = JSON.parse(xhr.responseText);\n if (response && response.noveltyAnalysis) {\n outputDiv.textContent = `The novelty score of the ideas is: ${response.noveltyAnalysis}`;\n } else {\n outputDiv.textContent = \"Unexpected response format.\";\n }\n } catch (error) {\n outputDiv.textContent = `Error parsing response: ${error.message}`;\n }\n } else {\n outputDiv.textContent = \"Error fetching novelty analysis.\";\n }\n proceedButton.disabled = false;\n };\n\n xhr.onerror = function() {\n outputDiv.textContent = \"Request failed. Please try again.\";\n proceedButton.disabled = false;\n };\n\n xhr.send(`chatLog=${encodeURIComponent(chatLog)}`);\n});\n\n\/\/ Initialize or continue the timer\nstartTimer(timerDuration);\n\n });\n<\/script>\n \n <script src=\"https:\/\/beams-experiments.com\/chatbot.js\"><\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Task Instructions Frame Task Instructions Loading instructions… 00:00 Proceed<\/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-6133","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6133","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=6133"}],"version-history":[{"count":11,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6133\/revisions"}],"predecessor-version":[{"id":6391,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6133\/revisions\/6391"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=6133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}