{"id":3864,"date":"2024-10-10T15:14:14","date_gmt":"2024-10-10T14:14:14","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=3864"},"modified":"2024-11-01T16:15:08","modified_gmt":"2024-11-01T16:15:08","slug":"toy-design-c1-ai","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/toy-design-c1-ai\/","title":{"rendered":"Toy Design-C1 &#038; AI-NOT USED"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Task Instructions Frame<\/title>\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">\n\n<style>\n        body {\n            margin: 0;\n            padding: 0;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            background-color: #f0f0f0;\n        }\n\n        #taskInstructions {\n            width: 100%;\n            max-width: 100%;\n            height: 50vh;\n            overflow-y: auto;\n            border: 1px solid #ddd;\n            padding: 15px;\n            margin-top: 20px;\n            margin-left: 0;\n            background-color: #f8f8f8;\n        }\n\n        #assignedShapes {\n            display: flex;\n            flex-direction: row;\n            gap: 10px;\n            margin-top: 10px;\n            margin-left: 0;\n        }\n\n        .shape-img {\n            width: 120px;  \/* Increased size *\/\n            height: 120px; \/* Increased size *\/\n            border: 1px solid #000;\n            padding: 5px;\n        }\n\n        #canvasWrapper {\n            width: 90%;\n            height: 70vh;\n            overflow-y: scroll;\n            border: 1px solid black;\n            margin-top: 20px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            margin-left: 0; \/* Shift canvas to the left by 20px *\/\n        }\n\n        #drawingCanvas {\n            background-color: white; \/* White background for drawing *\/\n        }\n\n    \/* Submit Drawing Button styling *\/\n#submitDrawingButton {\n    display: block;\n    padding: 10px 20px;\n    background-color: #007bff; \/* Blue color *\/\n    color: white;\n    border: none;\n    border-radius: 5px;\n    cursor: not-allowed; \/* Disabled state cursor *\/\n    opacity: 0.5; \/* Faded appearance when disabled *\/\n    margin-top: 20px;\n    margin-bottom: 10px;\n    margin: 10px auto;\n    width: fit-content;\n}\n\n\/* Enabled state for the button *\/\n#submitDrawingButton:enabled {\n    cursor: pointer; \/* Enable pointer cursor *\/\n    opacity: 1; \/* Full opacity when enabled *\/\n}\n\n        \/* Center the submit button *\/\n        #submitButtonContainer {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: 100%;\n        }\n\n        \n#progressBarContainer {\n        width: 90%;\n        background-color: #e0e0e0;\n        border-radius: 5px;\n        margin-top: 10px;\n    }\n\n    #progressBar {\n        height: 10px;\n        background-color: #007bff;\n        border-radius: 5px;\n        width: 88%;\n    }\n\n    #progressText {\n        text-align: center;\n        margin-top: 5px;\n    }\n\n\n\n    <\/style>\n\n\n<\/head>\n\n<body>\n    <!-- New title element -->\n\n<div class=\"flex-container\">\n    <!-- Task Instructions -->\n    <div id=\"taskInstructions\">\n        <h3>Task Instructions<\/h3>\n        <div id=\"instructionsText\">Loading instructions&#8230;<\/div>\n    <\/div>\n\n    <div id=\"assignedShapes\">\n        <!-- The assigned shapes will be displayed here -->\n    <\/div>\n\n    <div id=\"canvasWrapper\">\n        <canvas id=\"drawingCanvas\"><\/canvas>\n    <\/div>\n\n    <!-- Submit button container to center the button -->\n    <div id=\"submitButtonContainer\">\n        <button id=\"submitDrawingButton\" disabled>Submit Drawing<\/button>\n    <\/div>\n     \n<!-- Progress Bar -->\n<div id=\"progressBarContainer\">\n    <div id=\"progressBar\"><\/div>\n<\/div>\n<div id=\"progressText\">Page 5 out of 6<\/div>\n\n    \n    <script>\n var roleVar = 'GPT-4o, your role is to help the user design a toy for children aged 5-11. Provide concise answers.';\n        var apiURL = 'https:\/\/beams-experiments.com\/toyDesign\/getAPIKey2.php';\n\n    let hasDrawn = false;  \/\/ Tracks whether the user has drawn something\n    let hasChattedWithGPT = false;  \/\/ Tracks whether the user has interacted with GPT-4\n    let startTime = Date.now();  \/\/ Store the time at the beginning of the task\nvar reDo = localStorage.getItem('hasDrawn');\nif (reDo == 1) {\nalert('You are not allowed to redo your task. Your participation will be discontinued');\n\/\/window.location.href = 'https:\/\/beams-experiments.com\/index.php\/thanks-for-your-participation-toys-discontinued\/';\n}\n    \/\/ Function to enable the submit button only if both conditions are met\n    function checkIfCanSubmit() {\n        if (hasDrawn && hasChattedWithGPT) {\n            document.getElementById(\"submitDrawingButton\").disabled = false;\n        }\n    }\n\n   \n\/\/ Add event listener for the custom event\n    window.addEventListener('userChattedWithGPT', function() {\n        hasChattedWithGPT = true;\n        checkIfCanSubmit();  \/\/ Check if the submit button can be enabled\n    });\n    $(document).ready(function() {\n\n        \/\/ Display task instructions\n        const taskInstructions = \"You are tasked with designing a toy that can be used by a child aged 5-11. Five shapes have been randomly selected for you from a set of 20 available shapes. You may use <b>as many or as few<\/b> of the selected five shapes as you wish to create your toy design, but each shape can be used <b>only once<\/B>. You may arrange and draw your idea on the provided digital canvas. Please note that there is no function to erase your drawing, and <b>refreshing your browser is not allowed<\/b>, ensuring that your progress is preserved. You can scroll down and use more space if you want. You are <b>required<\/B> to interact <b>meaningfully<\/b> with GPT-4o on your left, although it is up to you to decide how to incorporate its input. There\u2019s <b>no minimum time limit<\/b>, but we expect you to engage <b>meaningfully<\/b> with the task. Please note, the <b>maximum time<\/b> allowed is <b>50 minutes<\/b>.\";\n\n        if (taskInstructions) {\n            $('#instructionsText').html(taskInstructions.replace(\/\\n\/g, '<br>'));\n        } else {\n            $('#instructionsText').html('Task instructions not found.');\n        }\n\n       \nconst totalShapes = 20; \/\/ We have 20 images\n    const assignedShapes = []; \/\/ To hold the 5 randomly selected shapes\n    const sourceDirectory = \"https:\/\/beams-experiments.com\/toyDesign\/drawing images\/\"; \/\/ Path to the folder where images are stored\n    const shapeContainer = document.getElementById(\"assignedShapes\");\n\n   \/\/ Randomly assign 5 shapes from the available 20 and store in local storage\nfunction assignShapes() {\n    const selectedIndexes = new Set();\n    while (selectedIndexes.size < 5) {\n        const randomIndex = Math.floor(Math.random() * totalShapes) + 1;\n        selectedIndexes.add(randomIndex);\n    }\n    \n    \/\/ Convert the set to an array\n    const selectedArray = Array.from(selectedIndexes);\n    \n    \/\/ Convert the array to a comma-separated string\n    const selectedShapesString = selectedArray.join(',');\n    \n    \/\/ Store the selected shape indexes as a string in local storage\n    localStorage.setItem('selectedShapes', selectedShapesString);\nconsole.log('selected shapes are', selectedShapesString);\n    \n    return selectedArray;\n}\n\n    \/\/ Display the assigned shapes\n    function displayAssignedShapes() {\n        const selectedShapes = assignShapes();\n        selectedShapes.forEach(index => {\n            const img = document.createElement('img');\n            img.src = sourceDirectory + index + \".png\";\n            img.alt = \"Shape \" + index;\n            img.classList.add(\"shape-img\");\n            shapeContainer.appendChild(img);\n            assignedShapes.push(index);\n        });\n    }\n\n    \/\/ Call function to display assigned shapes\n    displayAssignedShapes();\n\n        \/\/ Canvas drawing functionality\n        const canvas = document.getElementById(\"drawingCanvas\");\n        const ctx = canvas.getContext(\"2d\");\n        let drawing = false;\n\n        \/\/ Set canvas dimensions programmatically\n        const desiredWidth = 1200; \/\/ Adjust this value as needed\n        const desiredHeight = 2500; \/\/ Adjust this value as needed\n\n        canvas.width = desiredWidth;\n        canvas.height = desiredHeight;\n\n        \/\/ Fill the canvas background with white\n        ctx.fillStyle = 'white';\n        ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n        \/\/ Set line properties for drawing\n        ctx.lineWidth = 3;\n        ctx.lineCap = 'round';\n\n        \/\/ Function to get mouse position relative to the canvas, accounting for scaling\n        function getMousePos(event) {\n            const rect = canvas.getBoundingClientRect();\n            const scaleX = canvas.width \/ rect.width;    \/\/ Scale factor in the X direction\n            const scaleY = canvas.height \/ rect.height;  \/\/ Scale factor in the Y direction\n\n            return {\n                x: (event.clientX - rect.left) * scaleX,\n                y: (event.clientY - rect.top) * scaleY\n            };\n        }\n\n        \/\/ Start drawing when the mouse is clicked\n        canvas.addEventListener(\"mousedown\", (event) => {\n            drawing = true;\n            const pos = getMousePos(event);\n            ctx.moveTo(pos.x, pos.y);\n        });\n\n        \/\/ Draw while the mouse is moving\n        canvas.addEventListener(\"mousemove\", (event) => {\n            if (drawing) {\n                const pos = getMousePos(event);\n                ctx.lineTo(pos.x, pos.y);\n                ctx.stroke();\n            }\n        });\n\n        \/\/ Stop drawing when the mouse is released\n        canvas.addEventListener(\"mouseup\", () => {\n            drawing = false;\n            ctx.beginPath();\n            hasDrawn = true;  \/\/ User has drawn on the canvas\n            localStorage.setItem('hasDrawn', 1);\n            \n            checkIfCanSubmit();  \/\/ Check if the submit button can be enabled\n        });\n\n        \/\/ Prevent default behavior of right-click (if needed)\n        canvas.addEventListener(\"contextmenu\", (event) => {\n            event.preventDefault();\n        });\n\n        \/\/ Submit drawing button\n        const submitDrawingButton = document.getElementById(\"submitDrawingButton\");\n        submitDrawingButton.disabled = true;  \/\/ Initially disable the submit button\n\n        submitDrawingButton.addEventListener('click', () => {\n            \/\/ Disable the button to prevent multiple submissions\n            submitDrawingButton.disabled = true;\n\n            \/\/ Calculate the time spent on the drawing task as a whole in seconds\n            const endTime = Date.now();\n            const drawingTime = Math.floor((endTime - startTime) \/ 1000); \/\/ Time in seconds\n\n            \/\/ Save the drawing time to localStorage\n            localStorage.setItem('drawingTime', drawingTime);\n\n            \/\/ Get the dataURL of the canvas\n            const dataURL = canvas.toDataURL('image\/png');\n\n            \/\/ Save the image data URL & chatLog in localStorage\n            localStorage.setItem('canvasImage', dataURL);\n            var chatLog = localStorage.getItem('chatLog');\n            \/\/console.log('ChatLog is:', chatLog);\n    \n            \/\/ Redirect to the next page\n            window.location.href = 'https:\/\/beams-experiments.com\/index.php\/post-task-questionnaire-toy-ai\/';\n        });\n    });\n\n<\/script>\n <!-- Load the chatbot script -->\n    <script src=\"https:\/\/beams-experiments.com\/chatbot.js\"><\/script>\n\n<\/body>\n<\/html>\n ","protected":false},"excerpt":{"rendered":"<p>Task Instructions Frame Task Instructions Loading instructions&#8230; Submit Drawing Page 5 out of 6<\/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-3864","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/3864","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=3864"}],"version-history":[{"count":131,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/3864\/revisions"}],"predecessor-version":[{"id":4762,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/3864\/revisions\/4762"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=3864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}