{"id":5779,"date":"2024-12-15T05:27:26","date_gmt":"2024-12-15T05:27:26","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=5779"},"modified":"2025-08-24T09:07:52","modified_gmt":"2025-08-24T08:07:52","slug":"evaluating-toys-designs","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/evaluating-toys-designs\/","title":{"rendered":"Evaluating Toys Designs"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <title>Evaluate Toy Designs<\/title>\n    <style>\n    body, html { height: 100%; margin: 0; }\n    .title { display: none; }\n    .active { display: block; }\n    .buttonContainer { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }\n    button {\n        padding: 10px 20px;\n        border: none;\n        border-radius: 5px;\n        cursor: pointer;\n    }\n    #prevButton, #nextButton {\n        background-color: #007bff;\n        color: white;\n    }\n    #prevButton:disabled, #nextButton:disabled {\n        background-color: #b0c4de; \/* Light gray-blue *\/\n        color: #ffffff; \/* White text *\/\n        cursor: not-allowed; \/* Show \"not-allowed\" cursor *\/\n        opacity: 0.6; \/* Reduce opacity *\/\n    }\n    #submitButton {\n        background-color: #28a745;\n        color: white;\n        opacity: 0.5; \/* Initially semi-transparent *\/\n        cursor: not-allowed; \/* Initially disabled *\/\n    }\n    #submitButton:enabled {\n        opacity: 1; \/* Fully opaque when enabled *\/\n        cursor: pointer; \/* Pointer cursor when enabled *\/\n    }\n    #progressBarContainer {\n        width: 90%;\n        background-color: #e0e0e0;\n        border-radius: 5px;\n        margin: 20px auto;\n    }\n    #progressBar {\n        height: 10px;\n        background-color: #007bff;\n        border-radius: 5px;\n        width: 0%; \/* Updated dynamically *\/\n    }\n    #progressText {\n        text-align: center;\n        margin-top: 5px;\n    }\n<\/style>\n\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<\/head>\n<body>\n\n \n   <p>Your task is to evaluate a series of toy drawings created for children aged 5-11. Each drawing was made by a participant who combined five randomly assigned shapes. Along with each drawing, there is a title that provides additional context; however, your evaluation should focus solely on the drawing itself.<\/p> <p>You will rate each drawing on two measures: <b>novelty and appropriateness<\/b>. Both measures should be rated on a scale of <b>1 to 7<\/b>, where 1 means &#8220;not at all&#8221; and 7 means &#8220;very much.&#8221;<\/p> <p> The total number of drawings is <b><span id=\"totalTitles\">0<\/span><\/b>.<\/p> <p>Please take your time with each drawing and do not rush. Thoughtful and considered judgments are highly valued, and we will take your reliability and consistency into account when assessing your performance. Evaluators who demonstrate high consistency and reliability may continue with us to the next stage where you&#8217;ll evaluate more designs and get paid.<\/p>\n\n\n    <!-- Titles and drawings container -->\n    <form id=\"titlesContainer\" onsubmit=\"submitScores(event);\">\n        <!-- Dynamic content will be injected here -->\n    <\/form>\n\n    <!-- Navigation Buttons -->\n    <div class=\"buttonContainer\">\n        <button id=\"prevButton\" onclick=\"previousTitle()\" disabled>Previous<\/button>\n        <button id=\"nextButton\" onclick=\"nextTitle()\">Next<\/button>\n        <button id=\"submitButton\" onclick=\"submitScores()\" disabled>Submit<\/button>\n    <\/div>\n\n    <!-- Progress Bar -->\n    <div id=\"progressBarContainer\">\n        <div id=\"progressBar\"><\/div>\n    <\/div>\n    <div id=\"progressText\"><\/div>\n\n    <script>\n       document.addEventListener('DOMContentLoaded', () => {\n    alert('Please ensure you score all toy drawings across 2 measures to enable navigation and submission.');\n    fetchTitleAndDrawing();\n});\n\nlet currentTitleIndex = 0; \/\/ Track the current title being displayed\nlet totalTitles = 0; \/\/ Total number of titles\nlet titles = []; \/\/ Store the titles fetched from the API\n\/\/get data from local storage\nconst evaluatorProlificID = localStorage.getItem('prolificID');\nconst age = localStorage.getItem('age');\nconst gender = localStorage.getItem('gender');\nconst education = localStorage.getItem('education');\nconst employment = localStorage.getItem('employment');\nconst experience = localStorage.getItem('experience');\nconst englishProficiency = localStorage.getItem('englishProficiency');\nconst knowledgeToysIndustry = localStorage.getItem('knowledgeToysIndustry');\nconst knowledgeProductDesign = localStorage.getItem('knowledgeProductDesign');\nconst evaluationConfidence= localStorage.getItem('evaluationConfidence');\n\nfunction fetchTitleAndDrawing() {\n    fetch('https:\/\/beams-experiments.com\/toyDesign\/fetchTitleAndDrawing-final.php')\n        .then(response => {\n            if (!response.ok) {\n                throw new Error(`HTTP error! Status: ${response.status}`);\n            }\n            return response.json();\n        })\n        .then(data => {\n            if (Array.isArray(data) && data.length > 0) {\n                displayTitles(data);\n            } else {\n                alert('No data available to fetch titles and drawings.');\n                console.error('Empty or invalid data structure:', data);\n            }\n        })\n        .catch(error => {\n            console.error('Error fetching data:', error);\n            alert('An error occurred while fetching titles and drawings. Please try again later.');\n        });\n}\n\nfunction displayTitles(data) {\n    totalTitles = data.length;\n    titles = data; \/\/ Save the fetched titles globally\n    const container = document.getElementById('titlesContainer');\n    container.innerHTML = '';\n\/\/ inject into the instruction\nconst totalEl = document.getElementById('totalTitles');\nif (totalEl) {\n  totalEl.textContent = totalTitles;\n}\n\n    data.forEach((entry, index) => {\n        const titleDiv = document.createElement('div');\n        titleDiv.classList.add('title');\n        if (index === 0) titleDiv.classList.add('active');\n\n        titleDiv.innerHTML = `\n   <img decoding=\"async\" src=\"${entry.drawingPath}\" alt=\"Toy Drawing\" style=\"width: 90%; max-width: 450px; display: block; margin: 0 auto;\">\n\n    <p style=\"text-align: center;\"><b>${entry.titleInput}<\/b><\/p>\n    <input type=\"hidden\" name=\"userID[]\" value=\"${entry.userID}\">\n    ${generateMeasures(index)}\n`;\n\n        container.appendChild(titleDiv);\n    });\n\n    updateProgress();\n    updateButtonsState();\n}\n\nfunction generateMeasures(index) {\n    const measures = [\n        'Novelty, intended as the originality displayed in combining the items: not at all original \/ very original',\n        'Appropriateness, intended as the adequacy of the design to the purpose of a toy for children aged 5-11: not at all appropriate\/ very appropriate'\n        \n    ];\n\n    return measures.map((measure, i) => `\n        <p><b>${i + 1}. ${measure}<\/b><\/p>\n        ${generateScoringOptions(`measure${i}`, index)}\n    `).join('');\n}\n\nfunction generateScoringOptions(name, index) {\n    return Array.from({ length: 7 }, (_, i) => `\n        <label style=\"margin-right:10px;\">\n            <input type=\"radio\" name=\"${name}${index}\" value=\"${i + 1}\" onchange=\"checkAllMeasures()\"> ${i + 1}\n        <\/label>\n    `).join('');\n}\n\n\nfunction checkAllMeasures() {\n    const currentTitle = document.querySelectorAll('.title')[currentTitleIndex];\n    const allMeasures = currentTitle.querySelectorAll(`input[type=\"radio\"]:checked`);\n    const nextButton = document.getElementById('nextButton');\n    const submitButton = document.getElementById('submitButton');\n\n    \/\/ Enable \"Next\" only when all six measures are rated\n    if (allMeasures.length === 2) {\n        if (currentTitleIndex < totalTitles - 1) {\n            nextButton.disabled = false;\n        } else {\n            nextButton.disabled = true; \/\/ Disable \"Next\" on the last title\n            submitButton.disabled = false; \/\/ Enable \"Submit\" on the last title\n        }\n    } else {\n        nextButton.disabled = true; \/\/ Keep \"Next\" disabled until all measures are rated\n        submitButton.disabled = true; \/\/ Keep \"Submit\" disabled until all measures are rated\n    }\n}\n\nfunction updateButtonsState() {\n    const prevButton = document.getElementById('prevButton');\n    const nextButton = document.getElementById('nextButton');\n    const submitButton = document.getElementById('submitButton');\n\n    \/\/ Enable or disable the \"Previous\" button\n    prevButton.disabled = currentTitleIndex === 0;\n\n    \/\/ Enable or disable the \"Next\" button\n    nextButton.disabled = currentTitleIndex === titles.length - 1;\n\n    \/\/ Disable \"Submit\" for all titles except the last\n    submitButton.disabled = currentTitleIndex !== titles.length - 1;\n}\n\nfunction nextTitle() {\n    const titles = document.querySelectorAll('.title');\n    if (currentTitleIndex < titles.length - 1) {\n        titles[currentTitleIndex].classList.remove('active');\n        titles[++currentTitleIndex].classList.add('active');\n        updateProgress();\n        updateButtonsState();\n    }\n}\n\nfunction previousTitle() {\n    const titles = document.querySelectorAll('.title');\n    if (currentTitleIndex > 0) {\n        titles[currentTitleIndex].classList.remove('active');\n        titles[--currentTitleIndex].classList.add('active');\n        updateProgress();\n        updateButtonsState();\n    }\n}\n\nfunction updateProgress() {\n    const progressPercentage = ((currentTitleIndex + 1) \/ totalTitles) * 100;\n    document.getElementById('progressBar').style.width = `${progressPercentage}%`;\n    document.getElementById('progressText').innerText = `Title ${currentTitleIndex + 1} of ${totalTitles}`;\n}\n\nfunction submitScores() {\n    const evaluatorID = localStorage.getItem('prolificID');\n\n    if (!evaluatorID) {\n        alert('Evaluator ID is missing. Please ensure you are logged in.');\n        return;\n    }\n\n    const scoresData = [];\n    const csvData = []; \/\/to send csv file to downloads \n    titles.forEach((entry, index) => {\n        const currentTitle = document.querySelectorAll('.title')[index];\n        const scores = {};\n\n        currentTitle.querySelectorAll(`input[type=\"radio\"]:checked`).forEach(input => {\n            scores[input.name] = parseInt(input.value);\n        });\n\n        \/\/ Add to the scoresData array\n        scoresData.push({\n            userID: entry.userID,\n            evaluatorID: evaluatorID,\n            novelty: scores[`measure0${index}`], \/\/ novelty\n           appropriateness: scores[`measure1${index}`] \/\/ appropriateness\n            \n        });\n\n        \/\/ Create row for CSV file\n        const row = [\n            entry.userID,\n            evaluatorID,\n            scores[`measure0${index}`], \/\/ novelty\n            scores[`measure1${index}`] \/\/ appropriateness\n            \n        ];\n        csvData.push(row.join(\",\"));\n    });\n\n    \/\/ Create CSV content\n    const csvHeader = \"userID,evaluatorID,novelty,appropriateness\\n\"; \/\/ Column headers\n    const csvContent = csvHeader + csvData.join(\"\\n\");\n\n    \/\/ Create a Blob from CSV content\n    const blob = new Blob([csvContent], { type: 'text\/csv;charset=utf-8;' });\n    const link = document.createElement('a');\n    link.href = URL.createObjectURL(blob);\n    link.download = 'ratings.csv';  \/\/ File name for the CSV\n\n    \/\/ Trigger the download\n    link.click();\n\n    fetch('https:\/\/beams-experiments.com\/toyDesign\/saveScores.php', {\n        method: 'POST',\n        headers: {\n            'Content-Type': 'application\/json',\n        },\n        body: JSON.stringify(scoresData),\n    })\n        .then(response => response.json())\n        .then(data => {\n           \/\/ alert('Scores submitted successfully!');\n\t    saveEvaluatorDetails();\n           window.location.href = 'https:\/\/beams-experiments.com\/index.php\/thank-you-evaluators\/';\n\n        })\n        .catch(error => {\n            console.error('Error submitting scores:', error);\n            alert('An error occurred while submitting your scores. Please try again.');\n        });\n}\nfunction saveEvaluatorDetails() {\n    \/\/ Retrieve evaluator details from local storage\n    const evaluatorData = new URLSearchParams({\n        prolificID: localStorage.getItem('prolificID'),\n        age: localStorage.getItem('age'),\n        gender: localStorage.getItem('gender'),\n        education: localStorage.getItem('education'),\n        employment: localStorage.getItem('employment'),\n        experience: localStorage.getItem('experience'),\n        englishProficiency: localStorage.getItem('englishProficiency'),\n        knowledgeToysIndustry: localStorage.getItem('knowledgeToysIndustry'),\n        knowledgeProductDesign: localStorage.getItem('knowledgeProductDesign'),\n        evaluationConfidence: localStorage.getItem('evaluationConfidence'),\n    });\n\n    fetch('https:\/\/beams-experiments.com\/toyDesign\/saveEvaluatorsDetails.php', {\n        method: 'POST',\n        headers: {\n            'Content-Type': 'application\/x-www-form-urlencoded',\n        },\n        body: evaluatorData.toString(),\n    })\n        .then(response => response.text()) \/\/ Expecting plain text or JSON response\n        .then(data => {\n            console.log('Data submitted successfully:', data);\n            alert('Data submitted successfully!');\n        })\n        .catch(error => {\n            console.error('Error saving evaluator details:', error);\n            alert('An error occurred while saving evaluator details. Please try again.');\n        });\n}\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Evaluate Toy Designs Your task is to evaluate a series of toy drawings created for children aged 5-11. Each drawing was made by a participant who combined five randomly assigned shapes. Along with each drawing, there is a title that provides additional context; however, your evaluation should focus solely on the drawing itself. You will [&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-5779","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/5779","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=5779"}],"version-history":[{"count":22,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/5779\/revisions"}],"predecessor-version":[{"id":6248,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/5779\/revisions\/6248"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=5779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}