{"id":2395,"date":"2024-08-08T18:10:25","date_gmt":"2024-08-08T17:10:25","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=2395"},"modified":"2024-09-22T17:29:43","modified_gmt":"2024-09-22T16:29:43","slug":"ethical-dilemma-task-human-ai","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/ethical-dilemma-task-human-ai\/","title":{"rendered":"Task-ED-HAI"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\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        #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        #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: 50px;\n        }\n        #chatInputArea {\n            max-width: 90%;\n            height: 5vh;\n            border: 1px solid #000;\n            padding: 10px;\n            display: flex;\n            justify-content: space-between;\n            margin: 10px auto;\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        .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        #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   <body>\n    <form id=\"decisionForm\">\n        <p><strong>Scenario Description:<\/strong><\/p>\n        <p>Company A is facing a severe financial downturn. As the CEO, you are presented with two options to save the company. Each option involves making difficult decisions regarding employee layoffs and the company&#8217;s survival.<\/p>\n        <p><strong>Option A:<\/strong><\/p>\n        <ul>\n            <li>Option A involves laying off 50% of the workforce. This drastic measure increases the company&#8217;s chances of survival to 80%.<\/li>\n            <li>The remaining employees will face increased workloads and stress, but the company is likely to stabilize and eventually recover.<\/li>\n        <\/ul>\n        <p><strong>Option B:<\/strong><\/p>\n        <ul>\n            <li>Option B involves laying off 20% of the workforce. This measure decreases the company&#8217;s chances of survival to 60%.<\/li>\n            <li>The remaining employees will retain their jobs, but the company may continue to struggle.<\/li>\n        <\/ul>\n        <p><strong>Which option do you choose to implement?<\/strong><\/p>\n        <table class=\"small-font-table\">\n            <tr>\n                <td><input type=\"radio\" name=\"decision\" value=\"a\"> Option A<\/td>\n            <\/tr>\n            <tr>\n                <td><input type=\"radio\" name=\"decision\" value=\"b\"> Option B<\/td>\n            <\/tr>\n        <\/table>\n        <p><strong>How confident are you in your decision?<\/strong><\/p>\n        <div class=\"slider-container\">\n            <input type=\"range\" id=\"confidence\" name=\"confidence\" 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        <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    <!-- Spinner and Wait Note -->\n    <div id=\"loadingSpinner\"><\/div>\n    <div id=\"waitNote\" style=\"display:none;\">\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\">&#10148;<\/button>\n    <\/div>\n <div id=\"progressBarContainer\">\n    <div id=\"progressBar\"><\/div>\n<\/div>\n<div id=\"progressText\">Page 1 out of 15<\/div>\n    <div id=\"loadingSpinnerPage\"><\/div>\n    <script>\n\/\/ Global variables\nlet chatLog = \"\";\nlet userHasChatted = false;\/\/we don't use it; we rathr ask for min 700 chars which is the task alone;\nlet optionSelected = false;\nlet confidenceMoved = false;\nlet nextButton;\nlet options;\nlet confidenceSlider;\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    optionSelected = Array.from(options).some(option => option.checked);\n    nextButton.disabled = !(optionSelected && confidenceMoved && chatLog.trim().length > 700);\n}\n\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\ndocument.addEventListener('DOMContentLoaded', function() {\n    $('#loadingSpinnerPage').hide();\n    \/\/ Check if user already did this section\n    if (localStorage.getItem('ethicalScore')) {\n        \/\/ If 'ethicalScore' 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    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    nextButton = document.getElementById('nextButton');\n    options = document.getElementsByName('decision');\n    confidenceSlider = document.getElementById('confidence');\n    startTime = Date.now();\n    localStorage.setItem('startTime', startTime);\n\n    const taskSequence = JSON.parse(localStorage.getItem('taskSequence')) || [];\n    const groupID = localStorage.getItem('groupID') || null;\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    \/\/ Update the progress bar and text\n    updateProgressBar(taskIndex, taskSequence.length);\n\n    options.forEach(option => {\n        option.addEventListener('change', checkFormCompletion);\n    });\n\n    confidenceSlider.addEventListener('input', function() {\n        confidenceMoved = true;\n        checkFormCompletion();\n    });\n\n    document.getElementById('decisionForm').addEventListener('submit', function(event) {\n        event.preventDefault();\n\n        \/\/ Save the ethical score (decision) and confidence to localStorage\n        const selectedDecision = document.querySelector('input[name=\"decision\"]:checked').value;\n        const ethicalScore = selectedDecision === 'a' ? 1 : 2; \/\/ Example scoring logic; 1=a, 2=b\n        const ethicalConfidence = document.getElementById('confidence').value;\n\n        localStorage.setItem('ethicalScore', ethicalScore);\n        localStorage.setItem('ethicalConfidence', ethicalConfidence);\n        localStorage.setItem('chatLogEthical', chatLog);\n\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 or minutes as needed\n        var ethicalTaskTime = durationMillis \/ 1000;\n        localStorage.setItem('ethicalTaskTime', ethicalTaskTime);\n        console.log('ethicalTaskTime is ', ethicalTaskTime);\n        localStorage.setItem('finalTotalTimeNotVisible', totalTimeNotVisible.toString());\n        \/\/ Redirect or handle form submission here\n        goToNextTask();\n    });\n\n    \/\/ Function to navigate to the next task or 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    \/\/ Function to update the progress bar and text\n    function updateProgressBar(currentIndex, totalTasks) {\n        const totalPages = totalTasks + 10; \/\/ 5 tasks + 1 pre-task + 3 welcome + 1 post-task\n        const currentPage = taskIndex * 2 + 5; \/\/ +5 to account for previous pages; *2 to account for each task and its interim questionnaire\n        const progressPercentage = (currentPage \/ totalPages) * 100;\n        document.getElementById('progressBar').style.width = `${progressPercentage}%`;\n        document.getElementById('progressText').innerText = `Page ${currentPage} out of ${totalPages}`;\n    }\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; \/\/ 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<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Scenario Description: Company A is facing a severe financial downturn. As the CEO, you are presented with two options to save the company. Each option involves making difficult decisions regarding employee layoffs and the company&#8217;s survival. Option A: Option A involves laying off 50% of the workforce. This drastic measure increases the company&#8217;s chances of [&hellip;]<\/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-2395","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2395","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=2395"}],"version-history":[{"count":41,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2395\/revisions"}],"predecessor-version":[{"id":3713,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2395\/revisions\/3713"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=2395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}