Task-4: Risk & Uncertainty Task<\/title>\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n <style>\n table {\n width: 100%;\n border-collapse: collapse;\n }\n table, th, td {\n border: 1px solid black;\n }\n th, td {\n padding: 10px;\n text-align: left;\n }\n th {\n background-color: #f2f2f2;\n }\n h1 {\n font-size: 18px;\n text-align: center;\n font-weight: bold;\n margin-bottom: 8px;\n }\n p {\n font-size: 18px;\n margin-bottom: 8px;\n }\n input[type=range] {\n -webkit-appearance: none;\n width: 100%;\n height: 5px;\n background: #ddd;\n outline: none;\n opacity: 0.8;\n transition: opacity .2s;\n }\n input[type=range]:hover {\n opacity: 1;\n }\n .slider-container {\n width: 100%;\n margin: 20px 0;\n }\n .slider {\n -webkit-appearance: none;\n width: 100%;\n height: 5px;\n background: #ddd;\n outline: none;\n opacity: 0.7;\n transition: opacity .2s;\n }\n .slider:hover {\n opacity: 1;\n }\n .slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n background: #4CAF50;\n cursor: pointer;\n }\n .slider::-moz-range-thumb {\n width: 20px;\n height: 20px;\n background: #4CAF50;\n cursor: pointer;\n }\n .slider-labels {\n display: flex;\n justify-content: space-between;\n padding: 0 10px;\n }\n .slider-labels span {\n position: relative;\n text-align: center;\n width: 1px;\n background: #ddd;\n height: 10px;\n line-height: 20px;\n font-size: 14px;\n }\n .small-font-table, .small-font-table th, .small-font-table td {\n font-size: 13px;\n }\n body {\n margin: 0;\n padding: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n box-sizing: border-box;\n }\n #responseTitle {\n width: 100%;\n text-align: center;\n font-size: 1.2em;\n color: #333;\n margin-bottom: 20px;\n }\n #taskInstructions, #chatContainer, #chatInputArea {\n max-width: 90%;\n margin: 10px auto;\n }\n #taskInstructions {\n height: 30vh;\n overflow-y: auto;\n border: 1px solid #000;\n padding: 10px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n #chatContainer {\n height: 40vh;\n border: 1px solid #000;\n padding: 10px;\n overflow-y: auto;\n position: relative;\n margin-top: 50px;\n }\n #chatInputArea {\n height: 5vh;\n border: 1px solid #000;\n padding: 10px;\n display: flex;\n justify-content: space-between;\n }\n #chatInputArea input[type=\"text\"] {\n width: calc(100% - 40px);\n padding: 5px;\n box-sizing: border-box;\n }\n #sendButton {\n cursor: pointer;\n background: transparent;\n border: none;\n font-size: 16px;\n }\n #skipButton {\n display: none;\n position: fixed;\n bottom: 10px;\n right: 10px;\n }\n .chat-message {\n margin-bottom: 10px;\n padding: 5px;\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 #nextButton {\n display: block;\n padding: 10px 20px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n margin: 10px auto;\n width: fit-content;\n position: relative;\n }\n #nextButton:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n #progressBarContainer {\n width: 90%;\n background-color: #e0e0e0;\n border-radius: 5px;\n margin-top: 10px;\n }\n #progressBar {\n height: 10px;\n background-color: #007bff;\n border-radius: 5px;\n width: 88%;\n }\n #progressText {\n text-align: center;\n margin-top: 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 <\/style>\n <script>\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 chatLog = \"\"; \nlet userHasChatted = false; \/\/ we don't use this; rather we require min 1000 chars which is the 4 questions with gpt4 answers roughly\nlet nextButton;\nlet questions;\nlet confidenceMoved;\nlet startTime;\nlet timePageNotVisibleStart = 0;\nlet totalTimeNotVisible = 0; \/\/ Initialize totalTimeNotVisible\n\n\/\/ Function to check if all required form inputs are completed\nfunction checkFormCompletion() {\n const allQuestionsAnswered = questions.every((question, index) => {\n return Array.from(question.choices).some(choice => choice.checked) && confidenceMoved[index];\n });\n nextButton.disabled = !(allQuestionsAnswered && chatLog.trim().length > 1000);\n}\n\ndocument.addEventListener('DOMContentLoaded', function() {\n $('#loadingSpinnerPage').hide();\n\n \/\/ Check if user already did this section\n if (localStorage.getItem('decisionHPG')) {\n \/\/ If 'decisionHPG' 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 when the page is not visible\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 }\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 startTime = Date.now();\n\n nextButton = document.getElementById('nextButton');\n questions = [\n { choices: document.getElementsByName('question1'), confidence: document.getElementById('confidence1') },\n { choices: document.getElementsByName('question2'), confidence: document.getElementById('confidence2') },\n { choices: document.getElementsByName('question3'), confidence: document.getElementById('confidence3') },\n { choices: document.getElementsByName('question4'), confidence: document.getElementById('confidence4') },\n ];\n\n confidenceMoved = [false, false, false, false];\n const taskSequence = JSON.parse(localStorage.getItem('taskSequence'));\n const groupID = localStorage.getItem('groupID'); \/\/ Retrieve groupID from local storage\n\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\n \/\/ Total number of pages: 15\n const totalPages = 15;\n\n \/\/ Function to update the progress bar and progress text\n function updateProgressBar(taskIndex) {\n \/\/ Current page calculation\n const currentPage = taskIndex * 2 + 5; \/\/ +5 to account for previous pages; *2 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('progressBar').style.width = `${progressPercentage}%`;\n\n \/\/ Update the progress text\n document.getElementById('progressText').innerText = `Page ${currentPage} out of ${totalPages}`;\n }\n\n \/\/ Call updateProgressBar with the current taskIndex on page load\n updateProgressBar(taskIndex);\n\n \/\/ Function to go to the next task or the post-task questionnaire\n function goToNextTask() {\n window.location.href = 'https:\/\/beams-experiments.com\/index.php\/interim-task-questionnaire-hai\/?taskIndex=' + taskIndex;\n }\n\n \/\/ Attach event listeners to check form completion\n questions.forEach((question, index) => {\n question.choices.forEach(choice => {\n choice.addEventListener('change', checkFormCompletion);\n });\n question.confidence.addEventListener('input', function() {\n confidenceMoved[index] = true;\n checkFormCompletion();\n });\n });\n\n document.getElementById('decisionForm').addEventListener('submit', function(event) {\n event.preventDefault();\n\n \/\/ Save the decisions and confidence levels to localStorage\n const decisions = ['decisionHPG', 'decisionLPG', 'decisionHPL', 'decisionLPL'];\n const confidences = ['confidenceHPG', 'confidenceLPG', 'confidenceHPL', 'confidenceLPL'];\n\n questions.forEach((question, index) => {\n const selectedDecision = document.querySelector(`input[name=\"question${index + 1}\"]:checked`).value;\n \/\/ Convert 'a' to 1 and 'b' to 2\n const decisionNumeric = selectedDecision === 'a' ? 1 : 2;\n console.log(`Selected decision for question ${index + 1}:`, decisionNumeric);\n\n \/\/ Retrieve the confidence value for each question\n const confidenceValue = question.confidence.value;\n console.log(`Confidence value for question ${index + 1}:`, confidenceValue);\n\n localStorage.setItem(decisions[index], decisionNumeric);\n localStorage.setItem(confidences[index], confidenceValue);\n });\n\n localStorage.setItem('chatLogRisk', chatLog);\n \/\/ Calculate task time \n var endTime = Date.now();\n \/\/ Calculate the duration in milliseconds\n var durationMillis = endTime - startTime;\n \/\/ Convert duration to seconds\n var riskTaskTime = durationMillis \/ 1000;\n localStorage.setItem('riskTaskTime', riskTaskTime);\n console.log('riskTaskTime is', riskTaskTime);\n localStorage.setItem('finalTotalTimeNotVisible', totalTimeNotVisible.toString());\n goToNextTask();\n });\n});\n\n$(document).ready(function() {\n alert(\"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; \/\/ Set to true when user sends a message\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 <form id=\"decisionForm\">\n<p><b>In this task, we would like to understand how you make choices. Consider the following:<\/b><\/p>\n\n <p><strong>1. Please select your choice of preference:<\/strong><\/p>\n <table class=\"small-font-table\">\n <tr>\n <td><input type=\"radio\" name=\"question1\" value=\"a\"> a. 95% chance to win $10,000<\/td>\n <\/tr>\n <tr>\n <td><input type=\"radio\" name=\"question1\" value=\"b\"> b. 100% chance to obtain $9,499<\/td>\n <\/tr>\n <\/table>\n <p><strong>How confident are you in your choice?<\/strong><\/p>\n <div class=\"slider-container\">\n <input type=\"range\" id=\"confidence1\" name=\"confidence1\" min=\"0\" max=\"10\" step=\"1\" class=\"slider\">\n <div class=\"slider-labels\">\n <span>0<\/span><span>1<\/span><span>2<\/span><span>3<\/span><span>4<\/span><span>5<\/span><span>6<\/span><span>7<\/span><span>8<\/span><span>9<\/span><span>10<\/span>\n <\/div>\n <\/div>\n\n <p><strong>2. Please select your choice of preference:<\/strong><\/p>\n <table class=\"small-font-table\">\n <tr>\n <td><input type=\"radio\" name=\"question2\" value=\"a\"> a. 5% chance to win $10,000<\/td>\n <\/tr>\n <tr>\n <td><input type=\"radio\" name=\"question2\" value=\"b\"> b. 100% chance to obtain $501<\/td>\n <\/tr>\n <\/table>\n <p><strong>How confident are you in your choice?<\/strong><\/p>\n <div class=\"slider-container\">\n <input type=\"range\" id=\"confidence2\" name=\"confidence2\" min=\"0\" max=\"10\" step=\"1\" class=\"slider\">\n <div class=\"slider-labels\">\n <span>0<\/span><span>1<\/span><span>2<\/span><span>3<\/span><span>4<\/span><span>5<\/span><span>6<\/span><span>7<\/span><span>8<\/span><span>9<\/span><span>10<\/span>\n <\/div>\n <\/div>\n\n <p><strong>3. Please select your choice of preference:<\/strong><\/p>\n <table class=\"small-font-table\">\n <tr>\n <td><input type=\"radio\" name=\"question3\" value=\"a\"> a. 95% chance to lose $10,000<\/td>\n <\/tr>\n <tr>\n <td><input type=\"radio\" name=\"question3\" value=\"b\"> b. 100% chance to lose $9,499<\/td>\n <\/tr>\n <\/table>\n <p><strong>How confident are you in your choice?<\/strong><\/p>\n <div class=\"slider-container\">\n <input type=\"range\" id=\"confidence3\" name=\"confidence3\" min=\"0\" max=\"10\" step=\"1\" class=\"slider\">\n <div class=\"slider-labels\">\n <span>0<\/span><span>1<\/span><span>2<\/span><span>3<\/span><span>4<\/span><span>5<\/span><span>6<\/span><span>7<\/span><span>8<\/span><span>9<\/span><span>10<\/span>\n <\/div>\n <\/div>\n\n <p><strong>4. Please select your choice of preference:<\/strong><\/p>\n <table class=\"small-font-table\">\n <tr>\n <td><input type=\"radio\" name=\"question4\" value=\"a\"> a. 5% chance to lose $10,000<\/td>\n <\/tr>\n <tr>\n <td><input type=\"radio\" name=\"question4\" value=\"b\"> b. 100% chance to lose $501<\/td>\n <\/tr>\n <\/table>\n <p><strong>How confident are you in your choice?<\/strong><\/p>\n <div class=\"slider-container\">\n <input type=\"range\" id=\"confidence4\" name=\"confidence4\" min=\"0\" max=\"10\" step=\"1\" class=\"slider\">\n <div class=\"slider-labels\">\n <span>0<\/span><span>1<\/span><span>2<\/span><span>3<\/span><span>4<\/span><span>5<\/span><span>6<\/span><span>7<\/span><span>8<\/span><span>9<\/span><span>10<\/span>\n <\/div>\n <\/div>\n\n <button type=\"submit\" id=\"nextButton\" disabled>Next<\/button>\n <\/form>\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\">\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 <div id=\"progressBarContainer\">\n <div id=\"progressBar\"><\/div>\n<\/div>\n<div id=\"progressText\">Page 1 out of 7<\/div>\n <div id=\"loadingSpinnerPage\"><\/div>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Task-4: Risk & Uncertainty Task In this task, we would like to understand how you make choices. Consider the following: 1. Please select your choice of preference: a. 95% chance to win $10,000 b. 100% chance to obtain $9,499 How confident are you in your choice? 012345678910 2. Please select your choice of preference: a. […]<\/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-2386","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2386","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=2386"}],"version-history":[{"count":28,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2386\/revisions"}],"predecessor-version":[{"id":3683,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2386\/revisions\/3683"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=2386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2386,"date":"2024-08-08T17:24:56","date_gmt":"2024-08-08T16:24:56","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=2386"},"modified":"2024-09-15T19:08:09","modified_gmt":"2024-09-15T18:08:09","slug":"risk-uncertainty-task-human-ai","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/risk-uncertainty-task-human-ai\/","title":{"rendered":"Task-RU-HAI"},"content":{"rendered":"\n\n\n\n \n Task-4: Risk & Uncertainty Task<\/title>\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n <style>\n table {\n width: 100%;\n border-collapse: collapse;\n }\n table, th, td {\n border: 1px solid black;\n }\n th, td {\n padding: 10px;\n text-align: left;\n }\n th {\n background-color: #f2f2f2;\n }\n h1 {\n font-size: 18px;\n text-align: center;\n font-weight: bold;\n margin-bottom: 8px;\n }\n p {\n font-size: 18px;\n margin-bottom: 8px;\n }\n input[type=range] {\n -webkit-appearance: none;\n width: 100%;\n height: 5px;\n background: #ddd;\n outline: none;\n opacity: 0.8;\n transition: opacity .2s;\n }\n input[type=range]:hover {\n opacity: 1;\n }\n .slider-container {\n width: 100%;\n margin: 20px 0;\n }\n .slider {\n -webkit-appearance: none;\n width: 100%;\n height: 5px;\n background: #ddd;\n outline: none;\n opacity: 0.7;\n transition: opacity .2s;\n }\n .slider:hover {\n opacity: 1;\n }\n .slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n background: #4CAF50;\n cursor: pointer;\n }\n .slider::-moz-range-thumb {\n width: 20px;\n height: 20px;\n background: #4CAF50;\n cursor: pointer;\n }\n .slider-labels {\n display: flex;\n justify-content: space-between;\n padding: 0 10px;\n }\n .slider-labels span {\n position: relative;\n text-align: center;\n width: 1px;\n background: #ddd;\n height: 10px;\n line-height: 20px;\n font-size: 14px;\n }\n .small-font-table, .small-font-table th, .small-font-table td {\n font-size: 13px;\n }\n body {\n margin: 0;\n padding: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n box-sizing: border-box;\n }\n #responseTitle {\n width: 100%;\n text-align: center;\n font-size: 1.2em;\n color: #333;\n margin-bottom: 20px;\n }\n #taskInstructions, #chatContainer, #chatInputArea {\n max-width: 90%;\n margin: 10px auto;\n }\n #taskInstructions {\n height: 30vh;\n overflow-y: auto;\n border: 1px solid #000;\n padding: 10px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n #chatContainer {\n height: 40vh;\n border: 1px solid #000;\n padding: 10px;\n overflow-y: auto;\n position: relative;\n margin-top: 50px;\n }\n #chatInputArea {\n height: 5vh;\n border: 1px solid #000;\n padding: 10px;\n display: flex;\n justify-content: space-between;\n }\n #chatInputArea input[type=\"text\"] {\n width: calc(100% - 40px);\n padding: 5px;\n box-sizing: border-box;\n }\n #sendButton {\n cursor: pointer;\n background: transparent;\n border: none;\n font-size: 16px;\n }\n #skipButton {\n display: none;\n position: fixed;\n bottom: 10px;\n right: 10px;\n }\n .chat-message {\n margin-bottom: 10px;\n padding: 5px;\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 #nextButton {\n display: block;\n padding: 10px 20px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n margin: 10px auto;\n width: fit-content;\n position: relative;\n }\n #nextButton:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n #progressBarContainer {\n width: 90%;\n background-color: #e0e0e0;\n border-radius: 5px;\n margin-top: 10px;\n }\n #progressBar {\n height: 10px;\n background-color: #007bff;\n border-radius: 5px;\n width: 88%;\n }\n #progressText {\n text-align: center;\n margin-top: 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 <\/style>\n <script>\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 chatLog = \"\"; \nlet userHasChatted = false; \/\/ we don't use this; rather we require min 1000 chars which is the 4 questions with gpt4 answers roughly\nlet nextButton;\nlet questions;\nlet confidenceMoved;\nlet startTime;\nlet timePageNotVisibleStart = 0;\nlet totalTimeNotVisible = 0; \/\/ Initialize totalTimeNotVisible\n\n\/\/ Function to check if all required form inputs are completed\nfunction checkFormCompletion() {\n const allQuestionsAnswered = questions.every((question, index) => {\n return Array.from(question.choices).some(choice => choice.checked) && confidenceMoved[index];\n });\n nextButton.disabled = !(allQuestionsAnswered && chatLog.trim().length > 1000);\n}\n\ndocument.addEventListener('DOMContentLoaded', function() {\n $('#loadingSpinnerPage').hide();\n\n \/\/ Check if user already did this section\n if (localStorage.getItem('decisionHPG')) {\n \/\/ If 'decisionHPG' 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 when the page is not visible\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 }\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 startTime = Date.now();\n\n nextButton = document.getElementById('nextButton');\n questions = [\n { choices: document.getElementsByName('question1'), confidence: document.getElementById('confidence1') },\n { choices: document.getElementsByName('question2'), confidence: document.getElementById('confidence2') },\n { choices: document.getElementsByName('question3'), confidence: document.getElementById('confidence3') },\n { choices: document.getElementsByName('question4'), confidence: document.getElementById('confidence4') },\n ];\n\n confidenceMoved = [false, false, false, false];\n const taskSequence = JSON.parse(localStorage.getItem('taskSequence'));\n const groupID = localStorage.getItem('groupID'); \/\/ Retrieve groupID from local storage\n\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\n \/\/ Total number of pages: 15\n const totalPages = 15;\n\n \/\/ Function to update the progress bar and progress text\n function updateProgressBar(taskIndex) {\n \/\/ Current page calculation\n const currentPage = taskIndex * 2 + 5; \/\/ +5 to account for previous pages; *2 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('progressBar').style.width = `${progressPercentage}%`;\n\n \/\/ Update the progress text\n document.getElementById('progressText').innerText = `Page ${currentPage} out of ${totalPages}`;\n }\n\n \/\/ Call updateProgressBar with the current taskIndex on page load\n updateProgressBar(taskIndex);\n\n \/\/ Function to go to the next task or the post-task questionnaire\n function goToNextTask() {\n window.location.href = 'https:\/\/beams-experiments.com\/index.php\/interim-task-questionnaire-hai\/?taskIndex=' + taskIndex;\n }\n\n \/\/ Attach event listeners to check form completion\n questions.forEach((question, index) => {\n question.choices.forEach(choice => {\n choice.addEventListener('change', checkFormCompletion);\n });\n question.confidence.addEventListener('input', function() {\n confidenceMoved[index] = true;\n checkFormCompletion();\n });\n });\n\n document.getElementById('decisionForm').addEventListener('submit', function(event) {\n event.preventDefault();\n\n \/\/ Save the decisions and confidence levels to localStorage\n const decisions = ['decisionHPG', 'decisionLPG', 'decisionHPL', 'decisionLPL'];\n const confidences = ['confidenceHPG', 'confidenceLPG', 'confidenceHPL', 'confidenceLPL'];\n\n questions.forEach((question, index) => {\n const selectedDecision = document.querySelector(`input[name=\"question${index + 1}\"]:checked`).value;\n \/\/ Convert 'a' to 1 and 'b' to 2\n const decisionNumeric = selectedDecision === 'a' ? 1 : 2;\n console.log(`Selected decision for question ${index + 1}:`, decisionNumeric);\n\n \/\/ Retrieve the confidence value for each question\n const confidenceValue = question.confidence.value;\n console.log(`Confidence value for question ${index + 1}:`, confidenceValue);\n\n localStorage.setItem(decisions[index], decisionNumeric);\n localStorage.setItem(confidences[index], confidenceValue);\n });\n\n localStorage.setItem('chatLogRisk', chatLog);\n \/\/ Calculate task time \n var endTime = Date.now();\n \/\/ Calculate the duration in milliseconds\n var durationMillis = endTime - startTime;\n \/\/ Convert duration to seconds\n var riskTaskTime = durationMillis \/ 1000;\n localStorage.setItem('riskTaskTime', riskTaskTime);\n console.log('riskTaskTime is', riskTaskTime);\n localStorage.setItem('finalTotalTimeNotVisible', totalTimeNotVisible.toString());\n goToNextTask();\n });\n});\n\n$(document).ready(function() {\n alert(\"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; \/\/ Set to true when user sends a message\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 <form id=\"decisionForm\">\n<p><b>In this task, we would like to understand how you make choices. Consider the following:<\/b><\/p>\n\n <p><strong>1. Please select your choice of preference:<\/strong><\/p>\n <table class=\"small-font-table\">\n <tr>\n <td><input type=\"radio\" name=\"question1\" value=\"a\"> a. 95% chance to win $10,000<\/td>\n <\/tr>\n <tr>\n <td><input type=\"radio\" name=\"question1\" value=\"b\"> b. 100% chance to obtain $9,499<\/td>\n <\/tr>\n <\/table>\n <p><strong>How confident are you in your choice?<\/strong><\/p>\n <div class=\"slider-container\">\n <input type=\"range\" id=\"confidence1\" name=\"confidence1\" min=\"0\" max=\"10\" step=\"1\" class=\"slider\">\n <div class=\"slider-labels\">\n <span>0<\/span><span>1<\/span><span>2<\/span><span>3<\/span><span>4<\/span><span>5<\/span><span>6<\/span><span>7<\/span><span>8<\/span><span>9<\/span><span>10<\/span>\n <\/div>\n <\/div>\n\n <p><strong>2. Please select your choice of preference:<\/strong><\/p>\n <table class=\"small-font-table\">\n <tr>\n <td><input type=\"radio\" name=\"question2\" value=\"a\"> a. 5% chance to win $10,000<\/td>\n <\/tr>\n <tr>\n <td><input type=\"radio\" name=\"question2\" value=\"b\"> b. 100% chance to obtain $501<\/td>\n <\/tr>\n <\/table>\n <p><strong>How confident are you in your choice?<\/strong><\/p>\n <div class=\"slider-container\">\n <input type=\"range\" id=\"confidence2\" name=\"confidence2\" min=\"0\" max=\"10\" step=\"1\" class=\"slider\">\n <div class=\"slider-labels\">\n <span>0<\/span><span>1<\/span><span>2<\/span><span>3<\/span><span>4<\/span><span>5<\/span><span>6<\/span><span>7<\/span><span>8<\/span><span>9<\/span><span>10<\/span>\n <\/div>\n <\/div>\n\n <p><strong>3. Please select your choice of preference:<\/strong><\/p>\n <table class=\"small-font-table\">\n <tr>\n <td><input type=\"radio\" name=\"question3\" value=\"a\"> a. 95% chance to lose $10,000<\/td>\n <\/tr>\n <tr>\n <td><input type=\"radio\" name=\"question3\" value=\"b\"> b. 100% chance to lose $9,499<\/td>\n <\/tr>\n <\/table>\n <p><strong>How confident are you in your choice?<\/strong><\/p>\n <div class=\"slider-container\">\n <input type=\"range\" id=\"confidence3\" name=\"confidence3\" min=\"0\" max=\"10\" step=\"1\" class=\"slider\">\n <div class=\"slider-labels\">\n <span>0<\/span><span>1<\/span><span>2<\/span><span>3<\/span><span>4<\/span><span>5<\/span><span>6<\/span><span>7<\/span><span>8<\/span><span>9<\/span><span>10<\/span>\n <\/div>\n <\/div>\n\n <p><strong>4. Please select your choice of preference:<\/strong><\/p>\n <table class=\"small-font-table\">\n <tr>\n <td><input type=\"radio\" name=\"question4\" value=\"a\"> a. 5% chance to lose $10,000<\/td>\n <\/tr>\n <tr>\n <td><input type=\"radio\" name=\"question4\" value=\"b\"> b. 100% chance to lose $501<\/td>\n <\/tr>\n <\/table>\n <p><strong>How confident are you in your choice?<\/strong><\/p>\n <div class=\"slider-container\">\n <input type=\"range\" id=\"confidence4\" name=\"confidence4\" min=\"0\" max=\"10\" step=\"1\" class=\"slider\">\n <div class=\"slider-labels\">\n <span>0<\/span><span>1<\/span><span>2<\/span><span>3<\/span><span>4<\/span><span>5<\/span><span>6<\/span><span>7<\/span><span>8<\/span><span>9<\/span><span>10<\/span>\n <\/div>\n <\/div>\n\n <button type=\"submit\" id=\"nextButton\" disabled>Next<\/button>\n <\/form>\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\">\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 <div id=\"progressBarContainer\">\n <div id=\"progressBar\"><\/div>\n<\/div>\n<div id=\"progressText\">Page 1 out of 7<\/div>\n <div id=\"loadingSpinnerPage\"><\/div>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Task-4: Risk & Uncertainty Task In this task, we would like to understand how you make choices. Consider the following: 1. Please select your choice of preference: a. 95% chance to win $10,000 b. 100% chance to obtain $9,499 How confident are you in your choice? 012345678910 2. Please select your choice of preference: a. […]<\/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-2386","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2386","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=2386"}],"version-history":[{"count":28,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2386\/revisions"}],"predecessor-version":[{"id":3683,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2386\/revisions\/3683"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=2386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}