{"id":5433,"date":"2024-12-04T07:22:30","date_gmt":"2024-12-04T07:22:30","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=5433"},"modified":"2025-09-11T17:27:36","modified_gmt":"2025-09-11T16:27:36","slug":"evaluating-toys-designs-original","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/evaluating-toys-designs-original\/","title":{"rendered":"Evaluating Toys Designs-Original"},"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 designed for children aged 5-11. Each drawing is accompanied by a title that provides context; however, your evaluation should focus solely on the drawing itself. You will rate each drawing across six measures (originality, innovation, creativity, practicality, effectiveness, and usefulness) on a scale of <b>1 to 7<\/b>, where 1 means &#8220;not at all&#8221; and 7 means &#8220;very much.&#8221;\nGiven the large number of drawings (<b>50 in total<\/b>), we recommend that you take a <b>short break after every 30 drawings<\/b> to prevent fatigue and maintain focus.\nPlease take your time and do not rush through the evaluations. We value thoughtful, considered judgments, and we will take this into account when assessing your reliability and consistency. Evaluators who achieve high consistency and reliability may be eligible for a <b>bonus payment<\/b>.<\/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 6 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\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        'Originality: not at all original \/ very original',\n        'Innovation: not at all innovative \/ very innovative',\n        'Creativity: not at all creative \/ very creative',\n        'Practicality: not at all practical \/ very practical',\n        'Effectiveness: not at all effective \/ very effective',\n        'Usefulness: not at all useful \/ very useful'\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 === 6) {\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            originality: scores[`measure0${index}`], \/\/ Originality\n            innovation: scores[`measure1${index}`], \/\/ Innovation\n            creativity: scores[`measure2${index}`], \/\/ Creativity\n            practicality: scores[`measure3${index}`], \/\/ Practicality\n            effectiveness: scores[`measure4${index}`], \/\/ Effectiveness\n            usefulness: scores[`measure5${index}`]  \/\/ Usefulness\n        });\n\n        \/\/ Create row for CSV file\n        const row = [\n            entry.userID,\n            evaluatorID,\n            scores[`measure0${index}`], \/\/ Originality\n            scores[`measure1${index}`], \/\/ Innovation\n            scores[`measure2${index}`], \/\/ Creativity\n            scores[`measure3${index}`], \/\/ Practicality\n            scores[`measure4${index}`], \/\/ Effectiveness\n            scores[`measure5${index}`]  \/\/ Usefulness\n        ];\n        csvData.push(row.join(\",\"));\n    });\n\n    \/\/ Create CSV content\n    const csvHeader = \"userID,evaluatorID,originality,innovation,creativity,practicality,effectiveness,usefulness\\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","protected":false},"excerpt":{"rendered":"<p>Evaluate Toy Designs Your task is to evaluate a series of toy drawings designed for children aged 5-11. Each drawing is accompanied by a title that provides context; however, your evaluation should focus solely on the drawing itself. You will rate each drawing across six measures (originality, innovation, creativity, practicality, effectiveness, and usefulness) on a [&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-5433","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/5433","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=5433"}],"version-history":[{"count":39,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/5433\/revisions"}],"predecessor-version":[{"id":6303,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/5433\/revisions\/6303"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=5433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}