Evaluate Ideas<\/title>\n <style>\n body, html { height: 100%; margin: 0; }\n .idea { display: none; }\n .active { display: block; }\n .buttonContainer { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }\n button { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }\n #prevButton, #nextButton { background-color: #007bff; color: white; }\n #submitButton { background-color: #28a745; color: white; opacity: 0.5; cursor: not-allowed; }\n #progressBarContainer { width: 90%; background-color: #e0e0e0; border-radius: 5px; margin: 20px auto; }\n #progressBar { height: 10px; background-color: #007bff; border-radius: 5px; width: 0%; }\n #progressText { text-align: center; margin-top: 5px; }\n #nextButton, #prevButton {\n display: block;\n background-color: #007bff;\n color: white;\n padding: 10px 20px;\n margin: 20px auto;\n font-size: 16px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n opacity: 1;\n }\n #submitButton {\n display: block;\n background-color: #28a745; \/* Green background *\/\n color: white;\n padding: 10px 20px; \/* Maintain padding *\/\n margin: 20px auto; \/* Maintain margins *\/\n font-size: 16px; \/* Font size *\/\n border: none;\n border-radius: 5px;\n cursor: not-allowed; \/* Disabled cursor *\/\n opacity: 0.5; \/* Make it visually clear that it's disabled *\/\n}\n\n#submitButton:enabled {\n opacity: 1; \/* Make fully visible when enabled *\/\n cursor: pointer; \/* Change cursor when enabled *\/\n}\n\n #nextButton:disabled, #prevButton:disabled {\n opacity: 0.5;\n cursor: default;\n }\n #responseTitle {\n width: 100%;\n text-align: center;\n font-size: 1.2em;\n color: #333;\n margin-bottom: 20px;\n }\n #chatContainer {\n max-width: 90%;\n height: 40vh;\n border: 1px solid #000;\n padding: 10px;\n overflow-y: auto;\n position: relative;\n margin-top: 20px;\n background-color: #f9f9f9;\n }\n #chatInputArea {\n max-width: 90%;\n height: 8vh;\n border: 1px solid #000;\n padding: 10px;\n display: flex;\n justify-content: space-between;\n margin: 10px auto;\n background-color: #f9f9f9;\n margin-bottom: 20px; \/* Add space below the chat input area *\/\n }\n #chatInputArea input[type=\"text\"] {\n width: calc(100% - 40px);\n padding: 10px;\n box-sizing: border-box;\n font-size: 16px;\n }\n #sendButton {\n cursor: pointer;\n background: transparent;\n border: none;\n font-size: 16px;\n }\n .chat-message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 5px;\n }\n .user-message {\n background-color: #f0f0f0;\n }\n .gpt-response {\n background-color: #d1e8ff;\n }\n .error-message {\n background-color: #ffbaba;\n color: #d8000c;\n }\n .gpt-label {\n font-weight: bold;\n margin-right: 5px;\n }\n #loadingSpinner {\n display: none;\n border: 5px solid #f3f3f3;\n border-top: 5px solid #3498db;\n border-radius: 50%;\n width: 60px;\n height: 60px;\n animation: spin 2s linear infinite;\n margin: 20px auto;\n }\n#loadingSpinnerPage {\n border: 5px solid #f3f3f3; \/* Light grey border *\/\n border-top: 5px solid #3498db; \/* Blue border for the top *\/\n border-radius: 50%;\n width: 60px;\n height: 60px;\n animation: spin 2s linear infinite;\n position: fixed; \/* Position it relative to the viewport *\/\n top: 50%; \/* Move it down 50% of the viewport height *\/\n left: 50%; \/* Move it right 50% of the viewport width *\/\n transform: translate(-50%, -50%); \/* Offset the spinner by half its width\/height to center it *\/\n z-index: 9999; \/* Ensure it is above other content *\/\n}\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n #waitNote {\n color: red;\n text-align: center;\n font-weight: bold;\n margin-top: 10px;\n }\n #ideaProgressBarContainer, #pageProgressBarContainer {\n width: 90%;\n background-color: #e0e0e0;\n border-radius: 5px;\n margin: 20px auto;\n }\n #ideaProgressBar, #pageProgressBar {\n height: 10px;\n background-color: #007bff;\n border-radius: 5px;\n width: 0%;\n }\n #ideaProgressText, #pageProgressText {\n text-align: center;\n margin-top: 5px;\n }\n <\/style>\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<\/head>\n<body>\n <script>\n\/\/ Show an initial alert immediately\nalert(\"Please wait for the full page to load before interacting with it. This may depend on your internet speed.\");\n$('#loadingSpinnerPage').show();\n\n\/\/ Global variables\nlet currentIdeaIndex = 0;\nlet totalIdeas = 0;\nlet ideas = [];\nlet currentBatchID = null;\nlet chatLog = \"\"; \/\/ Ensure chatLog is global\nlet userHasChatted = false; \/\/ To track if the user has sent at least one message\nlet totalTimeNotVisible = 0; \/\/ Initialize totalTimeNotVisible\n\n\/\/ Retrieve task sequence and group ID from local storage\nconst taskSequence = JSON.parse(localStorage.getItem('taskSequence')) || [];\nconst groupID = localStorage.getItem('groupID') || null;\n\n\/\/ Get the current task index from the URL or set to 0 if not present\nconst urlParams = new URLSearchParams(window.location.search);\nlet taskIndex = parseInt(urlParams.get('taskIndex')) || 0;\n\n\/\/ Ensure taskIndex is within the valid range\nif (taskIndex < 0 || taskIndex >= taskSequence.length) {\n console.error('Task index is out of range.');\n}\n\n\/\/ Total number of pages:\nconst totalPages = 15;\n\n\/\/ Function to update the progress bar and progress text\nfunction updateProgressBar(taskIndex) {\n \/\/ Current page:\n const currentPage = taskIndex * 2 + 5; \/\/ +5 to account for previous pages; *2 to account for each task and its interim questionnaire\n\n \/\/ Calculate the progress percentage\n const progressPercentage = (currentPage \/ totalPages) * 100;\n\n \/\/ Update the progress bar width\n document.getElementById('pageProgressBar').style.width = `${progressPercentage}%`;\n\n \/\/ Update the progress text\n document.getElementById('pageProgressText').innerText = `Page ${currentPage} out of ${totalPages}`;\n}\n\ndocument.addEventListener('DOMContentLoaded', function() {\n $('#loadingSpinnerPage').hide();\n\n \/\/ Check if user already did this section\n if (localStorage.getItem('noveltyScore')) {\n \/\/ If 'noveltyScore' already exists, make alert\n alert('You already did this section. Moving you back!');\n \/\/ Get the current task index from the URL or set to 0 if not present\n const urlParams = new URLSearchParams(window.location.search);\n let taskIndex = parseInt(urlParams.get('taskIndex')) || 0;\n window.location.href = 'https:\/\/beams-experiments.com\/index.php\/interim-task-questionnaire-h\/?taskIndex=' + taskIndex;\n }\n\n \/\/ Tracking time screen not attended\n let timePageNotVisibleStart = 0;\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 \/\/ DOM is fully loaded\n var startTime = Date.now();\n localStorage.setItem('startTime', startTime);\n\n \/\/ Call updateProgressBar with the current taskIndex on page load\n updateProgressBar(taskIndex);\n\n updateButtonsState();\n allocateAndFetchBatch();\n});\n\nfunction allocateAndFetchBatch() {\n fetch('https:\/\/beams-experiments.com\/coEfficacy\/fetchBatchIDCoEfficacy.php')\n .then(response => response.json())\n .then(data => {\n if (data.ideas && data.batchID) {\n console.log('Allocated batch ID:', data.batchID);\n localStorage.setItem('batchID', data.batchID);\n currentBatchID = data.batchID;\n ideas = data.ideas;\n displayIdeas(data.ideas);\n } else if (data.error) {\n console.error(data.error);\n }\n })\n .catch(error => console.error('Error fetching batch and ideas:', error));\n}\n\nfunction displayIdeas(ideas) {\n totalIdeas = ideas.length;\n const container = document.getElementById('ideasContainer');\n container.innerHTML = '';\n\n ideas.forEach((idea, index) => {\n const ideaDiv = document.createElement('div');\n ideaDiv.classList.add('idea');\n if (index === 0) {\n ideaDiv.classList.add('active');\n }\n\n ideaDiv.innerHTML = `\n <p><b>${idea.finalIdea}<\/b><\/p>\n <input type=\"hidden\" name=\"ideaID[]\" value=\"${idea.ideaID}\">\n <p><b>1. Novelty: How different is it from existing solutions? (1 = Lowest, 5 = Highest):<\/b><\/p>\n ${generateScoringOptions('noveltyScore', index)}\n <p><b>2. Utility\/Usefulness: How useful is the idea to the user? (1 = Lowest, 5 = Highest):<\/b><\/p>\n ${generateScoringOptions('utilityScore', index)}\n <p><b>3. Feasibility: How feasible is the idea for implementation? (1 = Lowest, 5 = Highest):<\/b><\/p>\n ${generateScoringOptions('feasibilityScore', index)}\n <p><b>4. Specificity: How well is the idea \u201cthought out\u201d? (1 = Lowest, 5 = Highest):<\/b><\/p>\n ${generateScoringOptions('specificityScore', index)}\n <p><b>5. Sustainability: How environmentally friendly is the idea? (1 = Lowest, 5 = Highest):<\/b><\/p>\n ${generateScoringOptions('sustainabilityScore', index)}\n <p><b>6. Aesthetic Value: What is the aesthetic value of the idea? (1 = Lowest, 5 = Highest):<\/b><\/p>\n ${generateScoringOptions('aestheticScore', index)}\n `;\n container.appendChild(ideaDiv);\n });\n\n updateProgress();\n}\n\nfunction generateScoringOptions(name, index) {\n let optionsHtml = '';\n for (let i = 1; i <= 5; i++) {\n \/\/ Add an event listener to the radio buttons to check form completion\n optionsHtml += `<label style=\"margin-right:10px;\">\n <input type=\"radio\" name=\"${name}${index}\" value=\"${i}\" onchange=\"checkFormCompletion()\"> ${i}<\/label>`;\n }\n return optionsHtml;\n}\n\nfunction updateButtonsState() {\n const nextButton = document.getElementById('nextButton');\n const prevButton = document.getElementById('prevButton');\n const ideas = document.querySelectorAll('.idea');\n\n prevButton.disabled = currentIdeaIndex === 0;\n nextButton.disabled = currentIdeaIndex === ideas.length - 1;\n}\n\nfunction checkFormCompletion() {\n let allScored = true;\n ideas.forEach((idea, index) => {\n const measures = ['noveltyScore', 'utilityScore', 'feasibilityScore', 'specificityScore', 'sustainabilityScore', 'aestheticScore'];\n\n measures.forEach(measure => {\n const selectedOption = document.querySelector(`input[name=\"${measure}${index}\"]:checked`);\n if (!selectedOption) {\n allScored = false;\n }\n });\n });\n\n \/\/ Enable or disable the submit button based on whether all ideas are fully scored and user has chatted\n document.getElementById('submitButton').disabled = !(allScored && chatLog.trim().length > 4000);\n}\n\nfunction nextIdea() {\n const ideas = document.querySelectorAll('.idea');\n if (currentIdeaIndex < ideas.length - 1) {\n ideas[currentIdeaIndex].classList.remove('active');\n ideas[++currentIdeaIndex].classList.add('active');\n updateProgress();\n updateButtonsState();\n }\n}\n\nfunction previousIdea() {\n const ideas = document.querySelectorAll('.idea');\n if (currentIdeaIndex > 0) {\n ideas[currentIdeaIndex].classList.remove('active');\n ideas[--currentIdeaIndex].classList.add('active');\n updateProgress();\n updateButtonsState();\n }\n}\n\nfunction updateProgress() {\n const progressPercentage = ((currentIdeaIndex + 1) \/ totalIdeas) * 100;\n document.getElementById('ideaProgressBar').style.width = `${progressPercentage}%`;\n document.getElementById('ideaProgressText').innerText = `Idea ${currentIdeaIndex + 1} out of ${totalIdeas}`;\n}\n\nfunction submitScores() {\n let allScored = true;\n\n const userID = localStorage.getItem('userID');\n const groupID = localStorage.getItem('groupID');\n const prolificID = localStorage.getItem('prolificID');\n\n const scoresData = {\n batchID: currentBatchID,\n scores: [],\n userID: userID,\n groupID: groupID,\n prolificID: prolificID,\n chatLog: chatLog \/\/ Include chatLog in the data sent to the server\n };\n\n let incompleteIdeasIndices = [];\n\n ideas.forEach((idea, index) => {\n const measures = ['noveltyScore', 'utilityScore', 'feasibilityScore', 'specificityScore', 'sustainabilityScore', 'aestheticScore'];\n const ideaScores = { ideaID: idea.ideaID, scores: {} };\n let ideaFullyScored = true;\n\n measures.forEach(measure => {\n const selectedOption = document.querySelector(`input[name=\"${measure}${index}\"]:checked`);\n if (!selectedOption) {\n allScored = false;\n ideaFullyScored = false;\n } else {\n ideaScores.scores[measure] = parseInt(selectedOption.value);\n }\n });\n\n if (ideaFullyScored) {\n scoresData.scores.push(ideaScores);\n } else {\n incompleteIdeasIndices.push(index + 1);\n }\n });\n\n if (allScored) {\n submitScoresToServer(scoresData);\n } else {\n alert('Not all ideas have been fully scored. Please complete the scoring for idea(s): ' + incompleteIdeasIndices.join(', ') + '.');\n }\n}\n\n\/\/ Example function for server submission (to be implemented according to your backend API)\nfunction submitScoresToServer(scoresData) {\n fetch('https:\/\/beams-experiments.com\/coEfficacy\/sendScoresToEvaluationsTable.php', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify(scoresData),\n })\n .then(response => response.json())\n .then(data => {\n console.log('Submission successful', data);\n \/\/ Handle successful submission, e.g., showing a success message or redirecting\n if (data.success) {\n \/\/ Calculate task time\n var endTime = Date.now();\n var startTime = localStorage.getItem('startTime');\n \/\/ Calculate the duration in milliseconds\n var durationMillis = endTime - startTime;\n \/\/ Convert duration to seconds\n var evaluationTaskTime = durationMillis \/ 1000;\n localStorage.setItem('evaluationTaskTime', evaluationTaskTime);\n console.log('evaluation task Time is ', evaluationTaskTime);\n localStorage.setItem('finalTotalTimeNotVisible', totalTimeNotVisible.toString());\n\n goToNextTask(); \/\/ Redirect to the next task after successful submission\n } else {\n alert('Submission failed: ' + data.error);\n }\n })\n .catch(error => {\n console.error('Submission error', error);\n \/\/ Handle errors, e.g., showing an error message\n });\n}\n\nfunction goToNextTask() {\n window.location.href = 'https:\/\/beams-experiments.com\/index.php\/interim-task-questionnaire-hai\/?taskIndex=' + taskIndex;\n}\n\n$(document).ready(function() {\nalert(\"Please engage actively with GPT-4o before answering the questions. Ensure that your interaction is substantial and meaningful. To start chatting, type in the box that says: 'Type your message here.' To send your message, simply click Enter or the Send button. It's entirely up to you how to incorporate its advice into your answers. Allow up to 30 seconds for GPT-4o to respond. Once you have completed the conversation and answered all the questions, you'll be able to click 'Next Page'.\");\n\n \/\/ GPT-4 Chat Functionality\n $('#sendButton').click(function() {\n $('#userMessage').trigger(jQuery.Event('keypress', { which: 13 }));\n });\n\n var messageQueue = [];\n var isProcessingMessage = false;\n\n function appendMessageToChatContainer(sender, message, className) {\n var paragraphs = message.split('\\n').map(function(p) { return '<p>' + p + '<\/p>'; }).join('');\n $('#chatContainer').append('<div class=\"chat-message ' + className + '\"><span class=\"chat-label\">' + sender + ':<\/span>' + paragraphs + '<\/div>');\n scrollToBottom();\n }\n\n function scrollToBottom() {\n var chatContainer = $('#chatContainer');\n chatContainer.scrollTop(chatContainer.prop('scrollHeight'));\n }\n\n function processNextMessage() {\n if (messageQueue.length === 0) {\n isProcessingMessage = false;\n $('#loadingSpinner').hide();\n $('#waitNote').hide();\n $('#chatInputArea input').prop('disabled', false);\n return;\n }\n\n isProcessingMessage = true;\n var userMessage = messageQueue.shift();\n\n $('#loadingSpinner').show();\n $('#waitNote').show();\n $('#chatInputArea input').prop('disabled', true);\n\n $.post('https:\/\/beams-experiments.com\/coEfficacy\/getAPIKey2.php', { chatLog: chatLog })\n .done(function(responseText) {\n var response = JSON.parse(responseText);\n\n if (response && response.choices && response.choices.length > 0 && response.choices[0].message) {\n var lastMessage = response.choices[0].message.content;\n chatLog += 'GPT-4o: ' + lastMessage + '\\n';\n appendMessageToChatContainer('GPT-4o', lastMessage, 'gpt-response');\n } else {\n console.error('Unexpected response format:', response);\n }\n\n $('#loadingSpinner').hide();\n $('#waitNote').hide();\n $('#chatInputArea input').prop('disabled', false);\n processNextMessage();\n })\n .fail(function(jqXHR, textStatus, errorThrown) {\n console.error(\"Error in communication with GPT-4:\", textStatus, errorThrown);\n $('#chatContainer').append('<div class=\"chat-message error-message\"><p>Error in communication with GPT-4.<\/p><\/div>');\n $('#loadingSpinner').hide();\n $('#waitNote').hide();\n $('#chatInputArea input').prop('disabled', false);\n\n processNextMessage();\n });\n }\n\n $('#userMessage').on('keypress', function(e) {\n if (e.which === 13) {\n e.preventDefault();\n var userMessage = $(this).val().trim();\n if (userMessage === '') return;\n\n $(this).val('');\n chatLog += 'You: ' + userMessage + '\\n';\n appendMessageToChatContainer('You', userMessage, 'user-message');\n\n userHasChatted = true; \/\/ we don't use this; we rather require min 4000 chars knowing that 3 ideas with gpt answers could be above 6600 (each question and answer is around 2,200)\n checkFormCompletion(); \/\/ Check if form can be completed\n\n messageQueue.push(userMessage);\n if (!isProcessingMessage) {\n processNextMessage();\n }\n }\n });\n});\n<\/script>\n\n<\/head>\n<body>\n <p><b>Your task is to score the following ideas for a new sports shoe for a leading footwear company on a scale of 1-5 where 1 represents ‘not at all’ and 5 represents ‘the highest’:<\/b><\/p>\n <form id=\"ideasContainer\" onsubmit=\"submitScores(event);\">\n \n <\/form>\n <div class=\"buttonContainer\">\n <button id=\"prevButton\" onclick=\"previousIdea()\">Previous Idea<\/button>\n <button id=\"nextButton\" onclick=\"nextIdea()\">Next Idea<\/button>\n <button id=\"submitButton\" disabled onclick=\"submitScores()\">Done<\/button>\n \n <\/div>\n\n \n <div id=\"ideaProgressBarContainer\">\n <div id=\"ideaProgressBar\"><\/div>\n <\/div>\n <div id=\"ideaProgressText\"><\/div>\n\n <div id=\"responseTitle\">Please allow time (up to 30 seconds) for GPT-4o responses.<\/div>\n <div id=\"chatContainer\"><\/div>\n\n \n <div id=\"loadingSpinner\" style=\"display:none;\"><\/div>\n <div id=\"waitNote\" style=\"display:none; color: red; text-align: center; font-weight: bold;\">\n Please wait for the response before sending a new message.<br> This delay depends on the OpenAI API, not on us.\n <\/div>\n\n <div id=\"chatInputArea\" style=\"margin-bottom: 20px;\">\n <input type=\"text\" id=\"userMessage\" placeholder=\"Type your message here and then press Enter or Send...\">\n <button id=\"sendButton\">➤<\/button>\n <\/div>\n\n \n <div id=\"pageProgressBarContainer\">\n <div id=\"pageProgressBar\"><\/div>\n <\/div>\n <div id=\"pageProgressText\">Page 1 out of 10<\/div>\n <div id=\"loadingSpinnerPage\"><\/div>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Evaluate Ideas Your task is to score the following ideas for a new sports shoe for a leading footwear company on a scale of 1-5 where 1 represents ‘not at all’ and 5 represents ‘the highest’: Previous Idea Next Idea Done Please allow time (up to 30 seconds) for GPT-4o responses. Please wait for the […]<\/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-2402","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2402","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=2402"}],"version-history":[{"count":72,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2402\/revisions"}],"predecessor-version":[{"id":3709,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2402\/revisions\/3709"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=2402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2402,"date":"2024-08-08T18:50:48","date_gmt":"2024-08-08T17:50:48","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=2402"},"modified":"2024-09-22T13:32:29","modified_gmt":"2024-09-22T12:32:29","slug":"evaluation-scoring-task-co-efficacy-human-ai","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/evaluation-scoring-task-co-efficacy-human-ai\/","title":{"rendered":"Task-EI-HAI"},"content":{"rendered":"\n\n\n\n \n Evaluate Ideas<\/title>\n <style>\n body, html { height: 100%; margin: 0; }\n .idea { display: none; }\n .active { display: block; }\n .buttonContainer { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }\n button { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }\n #prevButton, #nextButton { background-color: #007bff; color: white; }\n #submitButton { background-color: #28a745; color: white; opacity: 0.5; cursor: not-allowed; }\n #progressBarContainer { width: 90%; background-color: #e0e0e0; border-radius: 5px; margin: 20px auto; }\n #progressBar { height: 10px; background-color: #007bff; border-radius: 5px; width: 0%; }\n #progressText { text-align: center; margin-top: 5px; }\n #nextButton, #prevButton {\n display: block;\n background-color: #007bff;\n color: white;\n padding: 10px 20px;\n margin: 20px auto;\n font-size: 16px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n opacity: 1;\n }\n #submitButton {\n display: block;\n background-color: #28a745; \/* Green background *\/\n color: white;\n padding: 10px 20px; \/* Maintain padding *\/\n margin: 20px auto; \/* Maintain margins *\/\n font-size: 16px; \/* Font size *\/\n border: none;\n border-radius: 5px;\n cursor: not-allowed; \/* Disabled cursor *\/\n opacity: 0.5; \/* Make it visually clear that it's disabled *\/\n}\n\n#submitButton:enabled {\n opacity: 1; \/* Make fully visible when enabled *\/\n cursor: pointer; \/* Change cursor when enabled *\/\n}\n\n #nextButton:disabled, #prevButton:disabled {\n opacity: 0.5;\n cursor: default;\n }\n #responseTitle {\n width: 100%;\n text-align: center;\n font-size: 1.2em;\n color: #333;\n margin-bottom: 20px;\n }\n #chatContainer {\n max-width: 90%;\n height: 40vh;\n border: 1px solid #000;\n padding: 10px;\n overflow-y: auto;\n position: relative;\n margin-top: 20px;\n background-color: #f9f9f9;\n }\n #chatInputArea {\n max-width: 90%;\n height: 8vh;\n border: 1px solid #000;\n padding: 10px;\n display: flex;\n justify-content: space-between;\n margin: 10px auto;\n background-color: #f9f9f9;\n margin-bottom: 20px; \/* Add space below the chat input area *\/\n }\n #chatInputArea input[type=\"text\"] {\n width: calc(100% - 40px);\n padding: 10px;\n box-sizing: border-box;\n font-size: 16px;\n }\n #sendButton {\n cursor: pointer;\n background: transparent;\n border: none;\n font-size: 16px;\n }\n .chat-message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 5px;\n }\n .user-message {\n background-color: #f0f0f0;\n }\n .gpt-response {\n background-color: #d1e8ff;\n }\n .error-message {\n background-color: #ffbaba;\n color: #d8000c;\n }\n .gpt-label {\n font-weight: bold;\n margin-right: 5px;\n }\n #loadingSpinner {\n display: none;\n border: 5px solid #f3f3f3;\n border-top: 5px solid #3498db;\n border-radius: 50%;\n width: 60px;\n height: 60px;\n animation: spin 2s linear infinite;\n margin: 20px auto;\n }\n#loadingSpinnerPage {\n border: 5px solid #f3f3f3; \/* Light grey border *\/\n border-top: 5px solid #3498db; \/* Blue border for the top *\/\n border-radius: 50%;\n width: 60px;\n height: 60px;\n animation: spin 2s linear infinite;\n position: fixed; \/* Position it relative to the viewport *\/\n top: 50%; \/* Move it down 50% of the viewport height *\/\n left: 50%; \/* Move it right 50% of the viewport width *\/\n transform: translate(-50%, -50%); \/* Offset the spinner by half its width\/height to center it *\/\n z-index: 9999; \/* Ensure it is above other content *\/\n}\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n #waitNote {\n color: red;\n text-align: center;\n font-weight: bold;\n margin-top: 10px;\n }\n #ideaProgressBarContainer, #pageProgressBarContainer {\n width: 90%;\n background-color: #e0e0e0;\n border-radius: 5px;\n margin: 20px auto;\n }\n #ideaProgressBar, #pageProgressBar {\n height: 10px;\n background-color: #007bff;\n border-radius: 5px;\n width: 0%;\n }\n #ideaProgressText, #pageProgressText {\n text-align: center;\n margin-top: 5px;\n }\n <\/style>\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<\/head>\n<body>\n <script>\n\/\/ Show an initial alert immediately\nalert(\"Please wait for the full page to load before interacting with it. This may depend on your internet speed.\");\n$('#loadingSpinnerPage').show();\n\n\/\/ Global variables\nlet currentIdeaIndex = 0;\nlet totalIdeas = 0;\nlet ideas = [];\nlet currentBatchID = null;\nlet chatLog = \"\"; \/\/ Ensure chatLog is global\nlet userHasChatted = false; \/\/ To track if the user has sent at least one message\nlet totalTimeNotVisible = 0; \/\/ Initialize totalTimeNotVisible\n\n\/\/ Retrieve task sequence and group ID from local storage\nconst taskSequence = JSON.parse(localStorage.getItem('taskSequence')) || [];\nconst groupID = localStorage.getItem('groupID') || null;\n\n\/\/ Get the current task index from the URL or set to 0 if not present\nconst urlParams = new URLSearchParams(window.location.search);\nlet taskIndex = parseInt(urlParams.get('taskIndex')) || 0;\n\n\/\/ Ensure taskIndex is within the valid range\nif (taskIndex < 0 || taskIndex >= taskSequence.length) {\n console.error('Task index is out of range.');\n}\n\n\/\/ Total number of pages:\nconst totalPages = 15;\n\n\/\/ Function to update the progress bar and progress text\nfunction updateProgressBar(taskIndex) {\n \/\/ Current page:\n const currentPage = taskIndex * 2 + 5; \/\/ +5 to account for previous pages; *2 to account for each task and its interim questionnaire\n\n \/\/ Calculate the progress percentage\n const progressPercentage = (currentPage \/ totalPages) * 100;\n\n \/\/ Update the progress bar width\n document.getElementById('pageProgressBar').style.width = `${progressPercentage}%`;\n\n \/\/ Update the progress text\n document.getElementById('pageProgressText').innerText = `Page ${currentPage} out of ${totalPages}`;\n}\n\ndocument.addEventListener('DOMContentLoaded', function() {\n $('#loadingSpinnerPage').hide();\n\n \/\/ Check if user already did this section\n if (localStorage.getItem('noveltyScore')) {\n \/\/ If 'noveltyScore' already exists, make alert\n alert('You already did this section. Moving you back!');\n \/\/ Get the current task index from the URL or set to 0 if not present\n const urlParams = new URLSearchParams(window.location.search);\n let taskIndex = parseInt(urlParams.get('taskIndex')) || 0;\n window.location.href = 'https:\/\/beams-experiments.com\/index.php\/interim-task-questionnaire-h\/?taskIndex=' + taskIndex;\n }\n\n \/\/ Tracking time screen not attended\n let timePageNotVisibleStart = 0;\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 \/\/ DOM is fully loaded\n var startTime = Date.now();\n localStorage.setItem('startTime', startTime);\n\n \/\/ Call updateProgressBar with the current taskIndex on page load\n updateProgressBar(taskIndex);\n\n updateButtonsState();\n allocateAndFetchBatch();\n});\n\nfunction allocateAndFetchBatch() {\n fetch('https:\/\/beams-experiments.com\/coEfficacy\/fetchBatchIDCoEfficacy.php')\n .then(response => response.json())\n .then(data => {\n if (data.ideas && data.batchID) {\n console.log('Allocated batch ID:', data.batchID);\n localStorage.setItem('batchID', data.batchID);\n currentBatchID = data.batchID;\n ideas = data.ideas;\n displayIdeas(data.ideas);\n } else if (data.error) {\n console.error(data.error);\n }\n })\n .catch(error => console.error('Error fetching batch and ideas:', error));\n}\n\nfunction displayIdeas(ideas) {\n totalIdeas = ideas.length;\n const container = document.getElementById('ideasContainer');\n container.innerHTML = '';\n\n ideas.forEach((idea, index) => {\n const ideaDiv = document.createElement('div');\n ideaDiv.classList.add('idea');\n if (index === 0) {\n ideaDiv.classList.add('active');\n }\n\n ideaDiv.innerHTML = `\n <p><b>${idea.finalIdea}<\/b><\/p>\n <input type=\"hidden\" name=\"ideaID[]\" value=\"${idea.ideaID}\">\n <p><b>1. Novelty: How different is it from existing solutions? (1 = Lowest, 5 = Highest):<\/b><\/p>\n ${generateScoringOptions('noveltyScore', index)}\n <p><b>2. Utility\/Usefulness: How useful is the idea to the user? (1 = Lowest, 5 = Highest):<\/b><\/p>\n ${generateScoringOptions('utilityScore', index)}\n <p><b>3. Feasibility: How feasible is the idea for implementation? (1 = Lowest, 5 = Highest):<\/b><\/p>\n ${generateScoringOptions('feasibilityScore', index)}\n <p><b>4. Specificity: How well is the idea \u201cthought out\u201d? (1 = Lowest, 5 = Highest):<\/b><\/p>\n ${generateScoringOptions('specificityScore', index)}\n <p><b>5. Sustainability: How environmentally friendly is the idea? (1 = Lowest, 5 = Highest):<\/b><\/p>\n ${generateScoringOptions('sustainabilityScore', index)}\n <p><b>6. Aesthetic Value: What is the aesthetic value of the idea? (1 = Lowest, 5 = Highest):<\/b><\/p>\n ${generateScoringOptions('aestheticScore', index)}\n `;\n container.appendChild(ideaDiv);\n });\n\n updateProgress();\n}\n\nfunction generateScoringOptions(name, index) {\n let optionsHtml = '';\n for (let i = 1; i <= 5; i++) {\n \/\/ Add an event listener to the radio buttons to check form completion\n optionsHtml += `<label style=\"margin-right:10px;\">\n <input type=\"radio\" name=\"${name}${index}\" value=\"${i}\" onchange=\"checkFormCompletion()\"> ${i}<\/label>`;\n }\n return optionsHtml;\n}\n\nfunction updateButtonsState() {\n const nextButton = document.getElementById('nextButton');\n const prevButton = document.getElementById('prevButton');\n const ideas = document.querySelectorAll('.idea');\n\n prevButton.disabled = currentIdeaIndex === 0;\n nextButton.disabled = currentIdeaIndex === ideas.length - 1;\n}\n\nfunction checkFormCompletion() {\n let allScored = true;\n ideas.forEach((idea, index) => {\n const measures = ['noveltyScore', 'utilityScore', 'feasibilityScore', 'specificityScore', 'sustainabilityScore', 'aestheticScore'];\n\n measures.forEach(measure => {\n const selectedOption = document.querySelector(`input[name=\"${measure}${index}\"]:checked`);\n if (!selectedOption) {\n allScored = false;\n }\n });\n });\n\n \/\/ Enable or disable the submit button based on whether all ideas are fully scored and user has chatted\n document.getElementById('submitButton').disabled = !(allScored && chatLog.trim().length > 4000);\n}\n\nfunction nextIdea() {\n const ideas = document.querySelectorAll('.idea');\n if (currentIdeaIndex < ideas.length - 1) {\n ideas[currentIdeaIndex].classList.remove('active');\n ideas[++currentIdeaIndex].classList.add('active');\n updateProgress();\n updateButtonsState();\n }\n}\n\nfunction previousIdea() {\n const ideas = document.querySelectorAll('.idea');\n if (currentIdeaIndex > 0) {\n ideas[currentIdeaIndex].classList.remove('active');\n ideas[--currentIdeaIndex].classList.add('active');\n updateProgress();\n updateButtonsState();\n }\n}\n\nfunction updateProgress() {\n const progressPercentage = ((currentIdeaIndex + 1) \/ totalIdeas) * 100;\n document.getElementById('ideaProgressBar').style.width = `${progressPercentage}%`;\n document.getElementById('ideaProgressText').innerText = `Idea ${currentIdeaIndex + 1} out of ${totalIdeas}`;\n}\n\nfunction submitScores() {\n let allScored = true;\n\n const userID = localStorage.getItem('userID');\n const groupID = localStorage.getItem('groupID');\n const prolificID = localStorage.getItem('prolificID');\n\n const scoresData = {\n batchID: currentBatchID,\n scores: [],\n userID: userID,\n groupID: groupID,\n prolificID: prolificID,\n chatLog: chatLog \/\/ Include chatLog in the data sent to the server\n };\n\n let incompleteIdeasIndices = [];\n\n ideas.forEach((idea, index) => {\n const measures = ['noveltyScore', 'utilityScore', 'feasibilityScore', 'specificityScore', 'sustainabilityScore', 'aestheticScore'];\n const ideaScores = { ideaID: idea.ideaID, scores: {} };\n let ideaFullyScored = true;\n\n measures.forEach(measure => {\n const selectedOption = document.querySelector(`input[name=\"${measure}${index}\"]:checked`);\n if (!selectedOption) {\n allScored = false;\n ideaFullyScored = false;\n } else {\n ideaScores.scores[measure] = parseInt(selectedOption.value);\n }\n });\n\n if (ideaFullyScored) {\n scoresData.scores.push(ideaScores);\n } else {\n incompleteIdeasIndices.push(index + 1);\n }\n });\n\n if (allScored) {\n submitScoresToServer(scoresData);\n } else {\n alert('Not all ideas have been fully scored. Please complete the scoring for idea(s): ' + incompleteIdeasIndices.join(', ') + '.');\n }\n}\n\n\/\/ Example function for server submission (to be implemented according to your backend API)\nfunction submitScoresToServer(scoresData) {\n fetch('https:\/\/beams-experiments.com\/coEfficacy\/sendScoresToEvaluationsTable.php', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify(scoresData),\n })\n .then(response => response.json())\n .then(data => {\n console.log('Submission successful', data);\n \/\/ Handle successful submission, e.g., showing a success message or redirecting\n if (data.success) {\n \/\/ Calculate task time\n var endTime = Date.now();\n var startTime = localStorage.getItem('startTime');\n \/\/ Calculate the duration in milliseconds\n var durationMillis = endTime - startTime;\n \/\/ Convert duration to seconds\n var evaluationTaskTime = durationMillis \/ 1000;\n localStorage.setItem('evaluationTaskTime', evaluationTaskTime);\n console.log('evaluation task Time is ', evaluationTaskTime);\n localStorage.setItem('finalTotalTimeNotVisible', totalTimeNotVisible.toString());\n\n goToNextTask(); \/\/ Redirect to the next task after successful submission\n } else {\n alert('Submission failed: ' + data.error);\n }\n })\n .catch(error => {\n console.error('Submission error', error);\n \/\/ Handle errors, e.g., showing an error message\n });\n}\n\nfunction goToNextTask() {\n window.location.href = 'https:\/\/beams-experiments.com\/index.php\/interim-task-questionnaire-hai\/?taskIndex=' + taskIndex;\n}\n\n$(document).ready(function() {\nalert(\"Please engage actively with GPT-4o before answering the questions. Ensure that your interaction is substantial and meaningful. To start chatting, type in the box that says: 'Type your message here.' To send your message, simply click Enter or the Send button. It's entirely up to you how to incorporate its advice into your answers. Allow up to 30 seconds for GPT-4o to respond. Once you have completed the conversation and answered all the questions, you'll be able to click 'Next Page'.\");\n\n \/\/ GPT-4 Chat Functionality\n $('#sendButton').click(function() {\n $('#userMessage').trigger(jQuery.Event('keypress', { which: 13 }));\n });\n\n var messageQueue = [];\n var isProcessingMessage = false;\n\n function appendMessageToChatContainer(sender, message, className) {\n var paragraphs = message.split('\\n').map(function(p) { return '<p>' + p + '<\/p>'; }).join('');\n $('#chatContainer').append('<div class=\"chat-message ' + className + '\"><span class=\"chat-label\">' + sender + ':<\/span>' + paragraphs + '<\/div>');\n scrollToBottom();\n }\n\n function scrollToBottom() {\n var chatContainer = $('#chatContainer');\n chatContainer.scrollTop(chatContainer.prop('scrollHeight'));\n }\n\n function processNextMessage() {\n if (messageQueue.length === 0) {\n isProcessingMessage = false;\n $('#loadingSpinner').hide();\n $('#waitNote').hide();\n $('#chatInputArea input').prop('disabled', false);\n return;\n }\n\n isProcessingMessage = true;\n var userMessage = messageQueue.shift();\n\n $('#loadingSpinner').show();\n $('#waitNote').show();\n $('#chatInputArea input').prop('disabled', true);\n\n $.post('https:\/\/beams-experiments.com\/coEfficacy\/getAPIKey2.php', { chatLog: chatLog })\n .done(function(responseText) {\n var response = JSON.parse(responseText);\n\n if (response && response.choices && response.choices.length > 0 && response.choices[0].message) {\n var lastMessage = response.choices[0].message.content;\n chatLog += 'GPT-4o: ' + lastMessage + '\\n';\n appendMessageToChatContainer('GPT-4o', lastMessage, 'gpt-response');\n } else {\n console.error('Unexpected response format:', response);\n }\n\n $('#loadingSpinner').hide();\n $('#waitNote').hide();\n $('#chatInputArea input').prop('disabled', false);\n processNextMessage();\n })\n .fail(function(jqXHR, textStatus, errorThrown) {\n console.error(\"Error in communication with GPT-4:\", textStatus, errorThrown);\n $('#chatContainer').append('<div class=\"chat-message error-message\"><p>Error in communication with GPT-4.<\/p><\/div>');\n $('#loadingSpinner').hide();\n $('#waitNote').hide();\n $('#chatInputArea input').prop('disabled', false);\n\n processNextMessage();\n });\n }\n\n $('#userMessage').on('keypress', function(e) {\n if (e.which === 13) {\n e.preventDefault();\n var userMessage = $(this).val().trim();\n if (userMessage === '') return;\n\n $(this).val('');\n chatLog += 'You: ' + userMessage + '\\n';\n appendMessageToChatContainer('You', userMessage, 'user-message');\n\n userHasChatted = true; \/\/ we don't use this; we rather require min 4000 chars knowing that 3 ideas with gpt answers could be above 6600 (each question and answer is around 2,200)\n checkFormCompletion(); \/\/ Check if form can be completed\n\n messageQueue.push(userMessage);\n if (!isProcessingMessage) {\n processNextMessage();\n }\n }\n });\n});\n<\/script>\n\n<\/head>\n<body>\n <p><b>Your task is to score the following ideas for a new sports shoe for a leading footwear company on a scale of 1-5 where 1 represents ‘not at all’ and 5 represents ‘the highest’:<\/b><\/p>\n <form id=\"ideasContainer\" onsubmit=\"submitScores(event);\">\n \n <\/form>\n <div class=\"buttonContainer\">\n <button id=\"prevButton\" onclick=\"previousIdea()\">Previous Idea<\/button>\n <button id=\"nextButton\" onclick=\"nextIdea()\">Next Idea<\/button>\n <button id=\"submitButton\" disabled onclick=\"submitScores()\">Done<\/button>\n \n <\/div>\n\n \n <div id=\"ideaProgressBarContainer\">\n <div id=\"ideaProgressBar\"><\/div>\n <\/div>\n <div id=\"ideaProgressText\"><\/div>\n\n <div id=\"responseTitle\">Please allow time (up to 30 seconds) for GPT-4o responses.<\/div>\n <div id=\"chatContainer\"><\/div>\n\n \n <div id=\"loadingSpinner\" style=\"display:none;\"><\/div>\n <div id=\"waitNote\" style=\"display:none; color: red; text-align: center; font-weight: bold;\">\n Please wait for the response before sending a new message.<br> This delay depends on the OpenAI API, not on us.\n <\/div>\n\n <div id=\"chatInputArea\" style=\"margin-bottom: 20px;\">\n <input type=\"text\" id=\"userMessage\" placeholder=\"Type your message here and then press Enter or Send...\">\n <button id=\"sendButton\">➤<\/button>\n <\/div>\n\n \n <div id=\"pageProgressBarContainer\">\n <div id=\"pageProgressBar\"><\/div>\n <\/div>\n <div id=\"pageProgressText\">Page 1 out of 10<\/div>\n <div id=\"loadingSpinnerPage\"><\/div>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Evaluate Ideas Your task is to score the following ideas for a new sports shoe for a leading footwear company on a scale of 1-5 where 1 represents ‘not at all’ and 5 represents ‘the highest’: Previous Idea Next Idea Done Please allow time (up to 30 seconds) for GPT-4o responses. Please wait for the […]<\/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-2402","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2402","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=2402"}],"version-history":[{"count":72,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2402\/revisions"}],"predecessor-version":[{"id":3709,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2402\/revisions\/3709"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=2402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}