{"id":3828,"date":"2024-10-09T06:00:21","date_gmt":"2024-10-09T05:00:21","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=3828"},"modified":"2024-11-01T16:15:40","modified_gmt":"2024-11-01T16:15:40","slug":"toy-design-c4","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/toy-design-c4\/","title":{"rendered":"Toy Design-C4-NOT USED"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>E1 Task &#8211; We Choose, Use All<\/title>\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n    <style>\n        body {\n            margin: 0;\n            padding: 0;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            background-color: #f0f0f0;\n        }\n\n        #taskInstructions {\n            width: 90%;\n            max-width: 90%;\n            height: 50vh;\n            overflow-y: auto;\n            border: 1px solid #ddd;\n            padding: 15px;\n            background-color: #f8f8f8;\n            margin-top: 20px;\n        }\n\n        #allShapes {\n            display: grid;\n            grid-template-columns: repeat(5, 1fr);\n            gap: 10px;\n            max-width: 90%;\n            margin-top: 20px;\n        }\n\n        .shape-img {\n            width: 120px;\n            height: 120px;\n            border: 1px solid #000;\n            padding: 5px;\n            cursor: pointer;\n            background-color: white;\n        }\n\n        .selected {\n            outline: 5px solid #007BFF;\n        }\n\n        #assignedShapes {\n            display: flex;\n            flex-direction: row;\n            gap: 10px;\n            margin-top: 20px;\n        }\n\n        #canvasWrapper {\n            width: 90vw;\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        }\n\n        #drawingCanvas {\n            background-color: white;\n        }\n\n        \/* Proceed and Submit button styling *\/\n        .actionButton {\n            margin-top: 20px;\n            background-color: #007BFF;\n            color: white;\n            border: none;\n            padding: 15px 30px;\n            font-size: 18px;\n            cursor: pointer;\n            border-radius: 5px;\n        }\n\n        .actionButton:hover {\n            background-color: #0056b3;\n        }\n\n        .actionButton:disabled {\n            background-color: #999;\n            cursor: not-allowed;\n        }\n\n        \/* Center the buttons *\/\n        .buttonContainer {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            width: 100%;\n        }\n\n        \/* Hide elements initially *\/\n        #assignedShapes,\n        #canvasWrapper,\n        #submitButtonContainer {\n            display: none;\n        }\n\n        \/* Confirmation checkbox styling *\/\n        #confirmationContainer {\n            margin-top: 20px;\n            font-size: 16px;\n        }\n\n        #confirmationContainer input {\n            margin-right: 10px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div id=\"taskInstructions\">\n        <h3>Task Instructions<\/h3>\n        <p>You are tasked with designing a toy that can be used by a child aged 5\u201311. You will see 20 shapes, from which you will select five components to use in your toy design. You are required to use <strong>all<\/strong> five of the selected shapes in 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. 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>.<\/p>\n    <\/div>\n\n    <!-- Display all shapes for selection -->\n    <div id=\"allShapes\">\n        <!-- All 20 shapes will be displayed here -->\n    <\/div>\n\n    <!-- Proceed button container -->\n    <div id=\"proceedButtonContainer\" class=\"buttonContainer\">\n        <button id=\"proceedButton\" class=\"actionButton\" disabled>Select 5 Shapes to Proceed<\/button>\n    <\/div>\n\n    <!-- Assigned shapes (selected shapes) -->\n    <div id=\"assignedShapes\">\n        <!-- The assigned shapes will be displayed here -->\n    <\/div>\n\n    <!-- Canvas wrapper -->\n    <div id=\"canvasWrapper\">\n        <canvas id=\"drawingCanvas\"><\/canvas>\n    <\/div>\n\n    <!-- Confirmation checkbox -->\n    <div id=\"confirmationContainer\" style=\"display: none;\">\n        <label>\n            <input type=\"checkbox\" id=\"confirmationCheckbox\">\n            Please confirm that you have used all the five shapes in your drawing in order to proceed.\n        <\/label>\n    <\/div>\n\n    <!-- Submit button container -->\n    <div id=\"submitButtonContainer\" class=\"buttonContainer\">\n        <button id=\"submitDrawingButton\" class=\"actionButton\" disabled>Submit Drawing<\/button>\n    <\/div>\n\n    <script>\n        \/\/ Show alert on page load\n        alert(\"Please read the task instructions before you start.\");\n\n        const totalShapes = 20; \/\/ Total number of shapes\n        const selectedShapes = []; \/\/ To hold the user's selected shapes\n        const sourceDirectory = \"https:\/\/beams-experiments.com\/toyDesign\/drawing images\/\"; \/\/ Path to the images\n        const allShapesContainer = document.getElementById(\"allShapes\");\n        const assignedShapesContainer = document.getElementById(\"assignedShapes\");\n        const proceedButton = document.getElementById(\"proceedButton\");\n        const proceedButtonContainer = document.getElementById(\"proceedButtonContainer\");\n        const startTime = Date.now();\n        \/\/ Display all shapes for selection\n        function displayAllShapes() {\n            for (let i = 1; i <= totalShapes; i++) {\n                const img = document.createElement('img');\n                img.src = sourceDirectory + i + \".png\";\n                img.alt = \"Shape \" + i;\n                img.classList.add(\"shape-img\");\n                img.dataset.shapeId = i;\n                img.addEventListener('click', selectShape);\n                allShapesContainer.appendChild(img);\n            }\n        }\n\n        \/\/ Function to handle shape selection and deselection\n        function selectShape(event) {\n            const img = event.target;\n            const shapeId = img.dataset.shapeId;\n\n            \/\/ Check if the shape is already selected\n            if (img.classList.contains('selected')) {\n                \/\/ Deselect the shape\n                img.classList.remove('selected');\n                \/\/ Remove from selectedShapes array\n                const index = selectedShapes.indexOf(shapeId);\n                if (index > -1) {\n                    selectedShapes.splice(index, 1);\n                }\n            } else {\n                \/\/ Allow selection only if less than 5 shapes are selected\n                if (selectedShapes.length < 5) {\n                    \/\/ Select the shape\n                    img.classList.add('selected');\n                    selectedShapes.push(shapeId);\n                }\n            }\n\n            \/\/ Enable or disable the proceed button based on selection count\n            if (selectedShapes.length === 5) {\n                proceedButton.disabled = false;\n            } else {\n                proceedButton.disabled = true;\n            }\n        }\n\n        \/\/ Function to proceed to canvas after selection\n        function proceedToCanvas() {\n            \/\/ Hide the allShapesContainer and proceed button\n            allShapesContainer.style.display = 'none';\n            proceedButtonContainer.style.display = 'none';\n\n            \/\/ Display assigned shapes (selected shapes)\n            assignedShapesContainer.style.display = 'flex';\n            selectedShapes.forEach(shapeId => {\n                const img = document.createElement('img');\n                img.src = sourceDirectory + shapeId + \".png\";\n                img.alt = \"Shape \" + shapeId;\n                img.classList.add(\"shape-img\");\n                assignedShapesContainer.appendChild(img);\n            });\n\n            \/\/ Display the canvas, confirmation checkbox, and submit button\n            document.getElementById(\"canvasWrapper\").style.display = 'flex';\n            document.getElementById(\"confirmationContainer\").style.display = 'block';\n            document.getElementById(\"submitButtonContainer\").style.display = 'flex';\n        }\n\n        \/\/ Event listener for the proceed button\n        proceedButton.addEventListener('click', proceedToCanvas);\n\n        \/\/ Call function to display all shapes\n        displayAllShapes();\n\n        \/\/ Drawing functionality\n        const canvas = document.getElementById(\"drawingCanvas\");\n        const ctx = canvas.getContext(\"2d\");\n        let drawing = false;\n        let hasDrawn = 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        \/\/ Ensure the canvas displays at its actual size\n        canvas.style.width = desiredWidth + 'px';\n        canvas.style.height = desiredHeight + 'px';\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 mouse is clicked\n        canvas.addEventListener(\"mousedown\", (event) => {\n            drawing = true;\n            hasDrawn = true;\n            updateSubmitButtonState();\n            const pos = getMousePos(event);\n            ctx.moveTo(pos.x, pos.y);\n        });\n\n        \/\/ Draw while 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 mouse is released\n        canvas.addEventListener(\"mouseup\", () => {\n            drawing = false;\n            ctx.beginPath();\n        });\n\n        \/\/ Prevent default behavior of right-click (if needed)\n        canvas.addEventListener(\"contextmenu\", (event) => {\n            event.preventDefault();\n        });\n\n        \/\/ Update submit button state based on drawing and confirmation checkbox\n        const confirmationCheckbox = document.getElementById(\"confirmationCheckbox\");\n        confirmationCheckbox.addEventListener('change', updateSubmitButtonState);\n\n        function updateSubmitButtonState() {\n            if (hasDrawn && confirmationCheckbox.checked) {\n                submitDrawingButton.disabled = false;\n            } else {\n                submitDrawingButton.disabled = true;\n            }\n        }\n\n        \/\/ Submit drawing button\n        const submitDrawingButton = document.getElementById(\"submitDrawingButton\");\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 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 in localStorage\n        localStorage.setItem('canvasImage', dataURL);\n                     \n        window.location.href = 'https:\/\/beams-experiments.com\/index.php\/post-task-questionnaire-toy-c\/';\n        });\n    <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>E1 Task &#8211; We Choose, Use All Task Instructions You are tasked with designing a toy that can be used by a child aged 5\u201311. You will see 20 shapes, from which you will select five components to use in your toy design. You are required to use all five of the selected shapes in [&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-3828","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/3828","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=3828"}],"version-history":[{"count":17,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/3828\/revisions"}],"predecessor-version":[{"id":4765,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/3828\/revisions\/4765"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=3828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}