{"id":1748,"date":"2024-02-29T08:42:13","date_gmt":"2024-02-29T08:42:13","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=1748"},"modified":"2024-09-22T17:28:17","modified_gmt":"2024-09-22T16:28:17","slug":"decision-making-strategic-hai","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/decision-making-strategic-hai\/","title":{"rendered":"Task-DMS-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>\ntable {\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; \/* Adjusted for better readability without being too large *\/\n        text-align: center;\n        font-weight: bold; \/* Ensures the text is bold *\/\n        margin-bottom: 8px; \/* Adequate spacing before the range input *\/\n    }\n p {\n        font-size: 18px; \/* Adjusted for better readability without being too large *\/\n        margin-bottom: 8px; \/* Adequate spacing before the range input *\/\n    }\n\n    input[type=range] {\n        -webkit-appearance: none; \/* Remove default appearance for WebKit browsers *\/\n        width: 100%; \/* Maintain full width for better usability *\/\n        height: 5px; \/* Adjusted thickness of the slider *\/\n        background: #ddd; \/* Subtle background color *\/\n        outline: none; \/* Remove the outline *\/\n        opacity: 0.8; \/* Slightly transparent for a lighter feel *\/\n        transition: opacity .2s; \/* Smooth transition for hover effect *\/\n    }\n\n    input[type=range]:hover {\n        opacity: 1; \/* Full opacity on hover for better interaction feedback *\/\n    }\n\n  .slider-container {\n            width: 100%;\n            margin: 20px 0;\n        }\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\n        .slider:hover {\n            opacity: 1;\n        }\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\n        .slider::-moz-range-thumb {\n            width: 20px;\n            height: 20px;\n            background: #4CAF50;\n            cursor: pointer;\n        }\n\n        .slider-labels {\n            display: flex;\n            justify-content: space-between;\n            padding: 0 10px;\n        }\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; \/* Reduces font size for the table, including headers and cells *\/\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; \/* Adjust as needed *\/\n       }\n       #chatContainer, #chatInputArea {\n            max-width: 90%;\n            margin: 10px auto; \/* Centered *\/\n        }\n        \n        #chatContainer {\n           height: 40vh;\n           border: 1px solid #000;\n           padding: 10px;\n           overflow-y: auto;\n           position: relative; \/* Make this a positioned ancestor for the timer *\/\n           margin-top: 50px; \/* Add space for the timer *\/\n        }\n        #chatInputArea {\n            height: 5vh;\n            border: 1px solid #000;\n            padding: 10px;\n            display: flex; \/* Flex container for input and button *\/\n            justify-content: space-between; \/* Align items *\/\n        }\n        #chatInputArea input[type=\"text\"] {\n            width: calc(100% - 40px); \/* Adjust width to accommodate button *\/\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; \/* Hidden by default *\/\n            position: fixed; \/* So it doesn't disrupt your layout *\/\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; \/* Light red background for error message *\/\n    color: #d8000c; \/* Dark red text color for error message *\/\n}\n.gpt-label {\n    font-weight: bold;\n    margin-right: 5px;\n}\n        #nextButton {\n    display: block; \/* Ensures the button is a block-level element *\/\n    padding: 10px 20px;\n    background-color: #007bff;\n    color: white;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer; \/* Default cursor style *\/\n    margin: 10px auto; \/* Auto margins for horizontal centering *\/\n    width: fit-content; \/* Adjusts width to fit the content *\/\n    position: relative; \/* Needed for positioning the timer *\/\n}\n\n#nextButton:disabled {\n    cursor: not-allowed; \/* Cursor style when disabled *\/\n    opacity: 0.5; \/* Opacity when disabled *\/\n}\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; \/* 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    margin: 20px auto; \/* Center the spinner *\/\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@keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n#waitNote {\n    color: red; \/* Red font color *\/\n    text-align: center; \/* Center align the text *\/\n    font-weight: bold; \/* Make the font bold *\/\n    margin-top: 10px; \/* Add some space above the note *\/\n}\n\n    <\/style>\n<script>\n\/\/ Global variables\nlet chatLog = \"\";\nlet confidenceMoved = false;\nlet userHasChatted = false;\/\/not usedinstead we require min 1000 chars which is basically the task length only;\nlet nextButton;\nlet inputs;\nlet confidenceSlider;\nlet radioGroups;\nlet startTime = Date.now();\n\n\/\/ Function to check if all required form inputs are completed\nfunction checkFormCompletion() {\n    const allRadiosChecked = radioGroups.every(name => {\n        return document.querySelector(`input[name=\"${name}\"]:checked`);\n    });\n      nextButton.disabled = !(allRadiosChecked && confidenceMoved && chatLog.trim().length > 1000);\n}\n\n\/\/ Show an initial alert immediately\n$('#loadingSpinnerPage').show();\n\nalert(\"Please wait for the full page to load before interacting with it. This may depend on your internet speed.\");\n\ndocument.addEventListener('DOMContentLoaded', function() {\n    nextButton = document.getElementById('nextButton'); \/\/ Ensure this matches your button's ID\n    inputs = document.querySelectorAll('input[type=radio]');\n    confidenceSlider = document.getElementById('confidence');\n    radioGroups = [...new Set(Array.from(inputs).map(input => input.name))];\n\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    \/\/ 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:  \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('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 change event listeners to all radio inputs to trigger the form completion check\n    inputs.forEach(input => {\n        input.addEventListener('change', checkFormCompletion);\n    });\n\n    \/\/ Attach input event listener to the confidence slider\n    confidenceSlider.addEventListener('input', function() {\n        confidenceMoved = true;\n        checkFormCompletion();\n    });\n\n    \/\/ Setup exclusive ranking for radio buttons\n    function setupExclusiveRanking() {\n        inputs.forEach(radio => {\n            radio.addEventListener('change', () => {\n                \/\/ Uncheck the same rank in other rows, ensuring exclusive selection\n                if (radio.type === 'radio') {\n                    inputs.forEach(otherRadio => {\n                        if (otherRadio !== radio && otherRadio.name !== radio.name && otherRadio.value === radio.value) {\n                            otherRadio.checked = false;\n                        }\n                    });\n                }\n                \/\/ Re-check form completion after any change\n                checkFormCompletion();\n            });\n        });\n    }\n    setupExclusiveRanking();\n\n    \/\/ Attach submit event listener to the form\n    document.getElementById('decisionForm').addEventListener('submit', function(event) {\n        event.preventDefault(); \/\/ Prevent the default form submission\n        calculateScoreAndSave();\n        localStorage.setItem('chatLogStrategic', chatLog); \/\/ Save the final chatLog to localStorage\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 strategicTaskTime = durationMillis \/ 1000;\n        localStorage.setItem('strategicTaskTime', strategicTaskTime);\n        console.log('strategicTaskTime is ', strategicTaskTime);\n\n        goToNextTask();\n    });\n\n    \/\/ Function to calculate score based on form input and save results\n    function calculateScoreAndSave() {\n        let strategicScore = 0;\n        try {\n            const correctAnswers = [5, 1, 3, 2, 4]; \/\/ Assuming these are the correct answers\n            correctAnswers.forEach((correctAnswer, index) => {\n                const userAnswer = parseInt(document.querySelector(`input[name=\"rank${index + 1}\"]:checked`)?.value);\n                const deviation = Math.abs(correctAnswer - userAnswer);\n                strategicScore += deviation * 12; \/\/ Calculate score based on deviation\n            });\n\n            \/\/ Log and store the score\n            console.log(`Strategic Score: ${strategicScore}`);\n            localStorage.setItem('strategicScore', strategicScore);\n\n            \/\/ Capture and store the confidence\n            const strategicConfidence = document.getElementById('confidence').value;\n            console.log(`Confidence: ${strategicConfidence}`);\n            localStorage.setItem('strategicConfidence', strategicConfidence);\n        } catch (error) {\n            console.error('Error calculating score:', error);\n        }\n    }\n});\n<\/script>\n<\/head>\n\n<body>\n\n    <form id=\"decisionForm\">\n        <p>SkyConnect Ventures is a regional airline owned by Mr. Marshall, offering services to underserved communities and charter flights to secluded locations. Over the past 5 years, Mr. Marshall has expanded the fleet to 20 aircraft, employing 40 pilots and 10 support staff. Due to an economic downturn starting a year ago, the airline&#8217;s financial reserves have been significantly depleted. Despite this, Mr. Marshall is committed to keeping the airline operational until the market recovers within the next year. He must now secure short-term financing and strategize for long-term stability to prevent future financial strain.<\/p>\n        <p>What should Mr. Marshall do? (rank 1-5)<\/p>\n        <table class=\"small-font-table\">\n            <tr>\n                <th>Action<\/th>\n                <th>1 (Most Important)<\/th>\n                <th>2<\/th>\n                <th>3<\/th>\n                <th>4<\/th>\n                <th>5 (Least Important)<\/th>\n            <\/tr>\n            <tr>\n                <td>1. Reduce his inventory of planes.<\/td>\n                <td><input type=\"radio\" name=\"rank1\" value=\"1\"><\/td>\n                <td><input type=\"radio\" name=\"rank1\" value=\"2\"><\/td>\n                <td><input type=\"radio\" name=\"rank1\" value=\"3\"><\/td>\n                <td><input type=\"radio\" name=\"rank1\" value=\"4\"><\/td>\n                <td><input type=\"radio\" name=\"rank1\" value=\"5\"><\/td>\n            <\/tr>\n            <tr>\n                <td>2. Study downsizing possibilities to streamline operations and still offer the best possible service.<\/td>\n                <td><input type=\"radio\" name=\"rank2\" value=\"1\"><\/td>\n                <td><input type=\"radio\" name=\"rank2\" value=\"2\"><\/td>\n                <td><input type=\"radio\" name=\"rank2\" value=\"3\"><\/td>\n                <td><input type=\"radio\" name=\"rank2\" value=\"4\"><\/td>\n                <td><input type=\"radio\" name=\"rank2\" value=\"5\"><\/td>\n            <\/tr>\n            <tr>\n                <td>3. Look for a possible link-up with a major carrier.<\/td>\n                <td><input type=\"radio\" name=\"rank3\" value=\"1\"><\/td>\n                <td><input type=\"radio\" name=\"rank3\" value=\"2\"><\/td>\n                <td><input type=\"radio\" name=\"rank3\" value=\"3\"><\/td>\n                <td><input type=\"radio\" name=\"rank3\" value=\"4\"><\/td>\n                <td><input type=\"radio\" name=\"rank3\" value=\"5\"><\/td>\n            <\/tr>\n            <tr>\n                <td>4. Seek the opinions of his employees.<\/td>\n                <td><input type=\"radio\" name=\"rank4\" value=\"1\"><\/td>\n                <td><input type=\"radio\" name=\"rank4\" value=\"2\"><\/td>\n                <td><input type=\"radio\" name=\"rank4\" value=\"3\"><\/td>\n                <td><input type=\"radio\" name=\"rank4\" value=\"4\"><\/td>\n                <td><input type=\"radio\" name=\"rank4\" value=\"5\"><\/td>\n            <\/tr>\n            <tr>\n                <td>5. Pare down service to serve only the most profitable while maintaining high-quality service.<\/td>\n                <td><input type=\"radio\" name=\"rank5\" value=\"1\"><\/td>\n                <td><input type=\"radio\" name=\"rank5\" value=\"2\"><\/td>\n                <td><input type=\"radio\" name=\"rank5\" value=\"3\"><\/td>\n                <td><input type=\"radio\" name=\"rank5\" value=\"4\"><\/td>\n                <td><input type=\"radio\" name=\"rank5\" value=\"5\"><\/td>\n            <\/tr>\n        <\/table>\n\n        <p>How confident are you in your ranking order?<\/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>\n                <span>1<\/span>\n                <span>2<\/span>\n                <span>3<\/span>\n                <span>4<\/span>\n                <span>5<\/span>\n                <span>6<\/span>\n                <span>7<\/span>\n                <span>8<\/span>\n                <span>9<\/span>\n                <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\" 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\">&#10148;<\/button>\n    <\/div>\n\n    <div id=\"progressBarContainer\">\n        <div id=\"progressBar\"><\/div>\n    <\/div>\n    <div id=\"loadingSpinnerPage\">\n        <div id=\"loadingSpinnerPage\"><\/div>\n    <\/div>\n    <div id=\"progressText\">Page 1 out of 10<\/div>\n\n    <script>\n    $('#sendButton').click(function() {\n        $('#userMessage').trigger(jQuery.Event('keypress', { which: 13 }));\n    });\n    $('#loadingSpinnerPage').show();\n\n    $(document).ready(function() {\n        $('#loadingSpinnerPage').hide();\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\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<\/body>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>SkyConnect Ventures is a regional airline owned by Mr. Marshall, offering services to underserved communities and charter flights to secluded locations. Over the past 5 years, Mr. Marshall has expanded the fleet to 20 aircraft, employing 40 pilots and 10 support staff. Due to an economic downturn starting a year ago, the airline&#8217;s financial reserves [&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-1748","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/1748","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=1748"}],"version-history":[{"count":82,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/1748\/revisions"}],"predecessor-version":[{"id":3712,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/1748\/revisions\/3712"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=1748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}