{"id":2390,"date":"2024-08-08T18:01:50","date_gmt":"2024-08-08T17:01:50","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=2390"},"modified":"2024-09-06T07:57:56","modified_gmt":"2024-09-06T06:57:56","slug":"ethical-dilemma-task-human","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/ethical-dilemma-task-human\/","title":{"rendered":"Task-ED-H"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\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.5;\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.5;\n            transition: opacity .2s;\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#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\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 #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        #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    <\/style>\n<\/head>\n<body>\n    <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\n   <script>\n        \/\/ Show an initial alert immediately\n        alert(\"Please wait for the full page to load before interacting with it. This may depend on your internet speed.\");\n$('#loadingSpinnerPage').show();\n\n        document.addEventListener('DOMContentLoaded', function() {\n$('#loadingSpinnerPage').hide();\n\/\/check if user already did this section\nif (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;\nwindow.location.href = 'https:\/\/beams-experiments.com\/index.php\/interim-task-questionnaire-h\/?taskIndex=' + taskIndex;\n  }\n\/\/tracking time screen not attended\nlet timePageNotVisibleStart = 0;\nlet totalTimeNotVisible = 0; \/\/ initialize totalTimeNotVisible\n\nfunction 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\ndocument.addEventListener('visibilitychange', () => {\n    \/\/console.log('Visibility changed to:', document.visibilityState);\n    if (document.visibilityState === 'visible') {\n        if (timePageNotVisibleStart !== 0) {\n            const notVisibleDuration = Date.now() - timePageNotVisibleStart;\n           \/\/ console.log('Not visible duration (ms):', notVisibleDuration);\n            totalTimeNotVisible += Math.round(notVisibleDuration \/ 1000); \/\/ Convert ms to seconds and accumulate\n            \/\/console.log('Total time not visible (s):', totalTimeNotVisible);\n            timePageNotVisibleStart = 0; \/\/ Reset the start time\n        }\n    } else {\n        timePageNotVisibleStart = Date.now();\n    }\n});\n            \/\/ Elements and Variables\n            const nextButton = document.getElementById('nextButton');\n            const options = document.getElementsByName('decision');\n            const confidenceSlider = document.getElementById('confidence');\n            let optionSelected = false;\n            let confidenceMoved = false;\n            var startTime = Date.now();\n            localStorage.setItem('startTime', startTime);\n\n            \/\/ Retrieve task sequence and group ID from local storage\n            const taskSequence = JSON.parse(localStorage.getItem('taskSequence')) || [];\n            const groupID = localStorage.getItem('groupID') || null;\n            const urlParams = new URLSearchParams(window.location.search);\n            let taskIndex = parseInt(urlParams.get('taskIndex')) || 0;\n\n            \/\/ Update progress bar on page load\n            updateProgressBar(taskIndex, taskSequence.length);\n\n            \/\/ Function to handle slider movement and update opacity\n            confidenceSlider.addEventListener('input', function() {\n                confidenceSlider.style.opacity = 1;\n                confidenceMoved = true;\n                checkFormCompletion();\n            });\n\n            \/\/ Function to handle option selection and enable\/disable the next button\n            function checkFormCompletion() {\n                optionSelected = Array.from(options).some(option => option.checked);\n                nextButton.disabled = !(optionSelected && confidenceMoved);\n            }\n\n            options.forEach(option => {\n                option.addEventListener('change', checkFormCompletion);\n            });\n\n            \/\/ Submit event listener\n            document.getElementById('decisionForm').addEventListener('submit', function(event) {\n                event.preventDefault();\n\n                \/\/ Save the 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\n                const ethicalConfidence = document.getElementById('confidence').value;\n\n                localStorage.setItem('ethicalScore', ethicalScore);\n                localStorage.setItem('ethicalConfidence', ethicalConfidence);\n                console.log('ethicalScore is', ethicalScore);\n                console.log('ethicalConfidence is', ethicalConfidence);\n\n                \/\/ Calculate task time \n                var endTime = Date.now();\n                var durationMillis = endTime - startTime;\n                var ethicalTaskTime = durationMillis \/ 1000;\n                localStorage.setItem('ethicalTaskTime', ethicalTaskTime );\n                console.log('ethicalTaskTime is ', ethicalTaskTime);\n                localStorage.setItem('finalTotalTimeNotVisible', totalTimeNotVisible.toString());\n                goToNextTask();\n            });\n\n            \/\/ Function to navigate to the next task or post-task questionnaire\n            function goToNextTask() {\n                \/\/ Update the progress bar and text\n                updateProgressBar(taskIndex, taskSequence.length);\n\n               window.location.href = 'https:\/\/beams-experiments.com\/index.php\/interim-task-questionnaire-h\/?taskIndex=' + taskIndex;\n          \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 + 1 post-task + 3 extra pages\n    const currentPage = taskIndex*2 + 5; \/\/ +5 to account for previous pages; *2 to account for each task and its interim questionnaire\n\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    <\/script>\n\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    <!-- Progress Bar -->\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<\/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-2390","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2390","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=2390"}],"version-history":[{"count":41,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2390\/revisions"}],"predecessor-version":[{"id":3501,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/2390\/revisions\/3501"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=2390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}