{"id":6257,"date":"2025-08-24T05:12:18","date_gmt":"2025-08-24T04:12:18","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=6257"},"modified":"2025-09-13T20:38:21","modified_gmt":"2025-09-13T19:38:21","slug":"evaluating-toys-designs-surveymethod","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/evaluating-toys-designs-surveymethod\/","title":{"rendered":"Evaluating Toys Designs-SurveyMethod"},"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 { background-color: #007bff; color: white; }\n        #prevButton:disabled, #nextButton:disabled {\n            background-color: #b0c4de; color: #ffffff; cursor: not-allowed; opacity: 0.6;\n        }\n        #submitButton { background-color: #28a745; color: white; opacity: 0.5; cursor: not-allowed; }\n        #submitButton:enabled { opacity: 1; cursor: pointer; }\n        #progressBarContainer { width: 90%; background-color: #e0e0e0; border-radius: 5px; margin: 20px auto; }\n        #progressBar { height: 10px; background-color: #007bff; border-radius: 5px; width: 0%; }\n        #progressText { text-align: center; margin-top: 5px; }\n    <\/style>\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<\/head>\n<body>\n\n<p>Your task is to evaluate a series of toy drawings created for children aged 5\u201311. 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>\n<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 \u201cnot at all\u201d and 7 means \u201cvery much\u201d. The total number of drawings is <b><span id=\"totalTitles\">0<\/span><\/b>.<\/p>\n<p>Please take your time with each drawing and do not rush. Thoughtful and considered judgements are highly valued, and we will take your reliability and consistency into account when assessing your performance. Please don&#8217;t refresh this page!<\/p>\n\n<form id=\"titlesContainer\" onsubmit=\"submitScores(event);\"><\/form>\n\n<div class=\"buttonContainer\">\n    <button id=\"prevButton\" onclick=\"previousTitle()\" disabled>Previous<\/button>\n    <button id=\"nextButton\" onclick=\"nextTitle()\" disabled>Next<\/button>\n    <button id=\"submitButton\" onclick=\"submitScores()\" disabled>Submit<\/button>\n<\/div>\n\n<div id=\"progressBarContainer\"><div id=\"progressBar\"><\/div><\/div>\n<div id=\"progressText\"><\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    alert('Please ensure you score all toy drawings across 2 measures to enable navigation and submission.');\n    fetchBatchAndItems();\n});\n\n\/\/ ---- config for image URLs (public URL, not filesystem path) ----\nconst drawingsBaseURL = 'https:\/\/beams-experiments.com\/toyDesign\/users-drawings-ALL\/';\n\n\/\/ state\nlet allocatedBatchID = null;\nlet items = [];           \/\/ [{serialNumber, titleInput, (optional) userID}]\nlet currentTitleIndex = 0;\n\n\/\/ evaluator meta from localStorage\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\n\/\/ fetch a batch and its items: { batchID, ideas: [{serialNumber, titleInput, (optional) userID}] }\nfunction fetchBatchAndItems() {\n    fetch('https:\/\/beams-experiments.com\/toyDesign\/fetchBatchID2.php')\n        .then(r => r.json())\n        .then(payload => {\n            if (payload && payload.batchID && Array.isArray(payload.ideas) && payload.ideas.length > 0) {\n                allocatedBatchID = payload.batchID;\n                items = payload.ideas.map(obj => ({\n                    serialNumber: obj.serialNumber,\n                    titleInput:   obj.titleInput,\n                    userID:       obj.userID ?? '' \/\/ keep if your PHP starts returning it\n                }));\n                displayTitles(items);\n            } else {\n                console.error('Unexpected payload:', payload);\n                alert('No available batches to allocate at the moment. Please try again later.');\n            }\n        })\n        .catch(err => {\n            console.error('Error allocating batch:', err);\n            alert('An error occurred while allocating a batch. Please try again later.');\n        });\n}\n\nfunction displayTitles(data) {\n    const total = data.length;\n    document.getElementById('totalTitles').textContent = total.toString();\n\n    const container = document.getElementById('titlesContainer');\n    container.innerHTML = '';\n\n    data.forEach((entry, index) => {\n        const imgURL = drawingsBaseURL + String(entry.serialNumber).trim() + '.png';\n\n        const wrapper = document.createElement('div');\n        wrapper.classList.add('title');\n        if (index === 0) wrapper.classList.add('active');\n\n        wrapper.innerHTML = `\n            <img decoding=\"async\" src=\"${imgURL}\" alt=\"Toy Drawing ${entry.serialNumber}\" style=\"width: 90%; max-width: 450px; display: block; margin: 0 auto;\">\n            <p style=\"text-align: center;\"><b>${escapeHtml(entry.titleInput || '')}<\/b><\/p>\n\n            <input type=\"hidden\" name=\"serialNumber[]\" value=\"${entry.serialNumber}\">\n            <input type=\"hidden\" name=\"userID[]\" value=\"${entry.userID || ''}\">\n            <input type=\"hidden\" name=\"batchID\" value=\"${allocatedBatchID}\">\n\n            ${generateMeasures(index)}\n        `;\n        container.appendChild(wrapper);\n    });\n\n    currentTitleIndex = 0;\n    updateProgress();\n    updateButtonsState();\n}\n\n\/\/ rating blocks\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\u201311: not at all appropriate \/ very appropriate'\n    ];\n    return measures.map((measure, i) => `\n        <p><b>${i + 1}. ${measure}<\/b><\/p>\n        ${generateScoringOptions(`measure${i}`, index)}\n    `).join('');\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\/\/ enforce completion per item\nfunction checkAllMeasures() {\n    const currentEl = document.querySelectorAll('.title')[currentTitleIndex];\n    const checked = currentEl.querySelectorAll('input[type=\"radio\"]:checked');\n    const nextBtn = document.getElementById('nextButton');\n    const submitBtn = document.getElementById('submitButton');\n\n    if (checked.length === 2) {\n        if (currentTitleIndex < items.length - 1) {\n            nextBtn.disabled = false;\n            submitBtn.disabled = true;\n        } else {\n            nextBtn.disabled = true;\n            submitBtn.disabled = false;\n        }\n    } else {\n        nextBtn.disabled = true;\n        submitBtn.disabled = true;\n    }\n}\n\n\/\/ nav + progress\nfunction updateButtonsState() {\n    const prevBtn = document.getElementById('prevButton');\n    const nextBtn = document.getElementById('nextButton');\n    const submitBtn = document.getElementById('submitButton');\n\n    prevBtn.disabled = (currentTitleIndex === 0);\n\n    \/\/ honour rating completion when deciding next\/submit\n    const currentEl = document.querySelectorAll('.title')[currentTitleIndex];\n    const checked = currentEl ? currentEl.querySelectorAll('input[type=\"radio\"]:checked').length : 0;\n    if (currentTitleIndex === items.length - 1) {\n        nextBtn.disabled = true;\n        submitBtn.disabled = (checked !== 2);\n    } else {\n        nextBtn.disabled = (checked !== 2);\n        submitBtn.disabled = true;\n    }\n}\nfunction nextTitle() {\n    const els = document.querySelectorAll('.title');\n    if (currentTitleIndex < els.length - 1) {\n        els[currentTitleIndex].classList.remove('active');\n        els[++currentTitleIndex].classList.add('active');\n        updateProgress();\n        updateButtonsState();\n    }\n}\nfunction previousTitle() {\n    const els = document.querySelectorAll('.title');\n    if (currentTitleIndex > 0) {\n        els[currentTitleIndex].classList.remove('active');\n        els[--currentTitleIndex].classList.add('active');\n        updateProgress();\n        updateButtonsState();\n    }\n}\nfunction updateProgress() {\n    const pct = ((currentTitleIndex + 1) \/ items.length) * 100;\n    document.getElementById('progressBar').style.width = `${pct}%`;\n    document.getElementById('progressText').innerText = `Title ${currentTitleIndex + 1} of ${items.length} (Batch ${allocatedBatchID ?? '?'})`;\n}\n\n\/\/ submit\nfunction submitScores(evt) {\n    if (evt) evt.preventDefault();\n\n    const evaluatorID = localStorage.getItem('prolificID');\n    if (!evaluatorID) {\n        alert('Evaluator ID is missing. Please ensure you are logged in.');\n        return;\n    }\n    if (!allocatedBatchID) {\n        alert('No batch is currently allocated.');\n        return;\n    }\n\n    const scoresData = [];\n    const csvRows = [];\n    items.forEach((entry, index) => {\n        const currentEl = document.querySelectorAll('.title')[index];\n        const sel = {};\n        currentEl.querySelectorAll('input[type=\"radio\"]:checked').forEach(input => sel[input.name] = parseInt(input.value));\n\n        const payload = {\n            serialNumber: entry.serialNumber,\n            batchID: allocatedBatchID,\n            evaluatorID: evaluatorID,\n            novelty: sel[`measure0${index}`],\n            appropriateness: sel[`measure1${index}`],\n            userID: entry.userID || '' \/\/ included for backward compatibility if your API expects it\n        };\n        scoresData.push(payload);\n\n        csvRows.push([\n            entry.serialNumber,\n            allocatedBatchID,\n            evaluatorID,\n            sel[`measure0${index}`],\n            sel[`measure1${index}`]\n        ].join(','));\n    });\n\n    \/\/ downloadable CSV for the evaluator\n    const csvHeader = 'serialNumber,batchID,evaluatorID,novelty,appropriateness\\n';\n    const csvContent = csvHeader + csvRows.join('\\n');\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_batch_${allocatedBatchID}.csv`;\n    link.click();\n\n    \/\/ send to server\n    fetch('https:\/\/beams-experiments.com\/toyDesign\/saveScores2.php', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application\/json' },\n        body: JSON.stringify(scoresData)\n    })\n    .then(r => r.json())\n    .then(() => {\n        saveEvaluatorDetails(); \/\/ keep your existing logging\n        window.location.href = 'https:\/\/beams-experiments.com\/index.php\/thank-you-evaluators\/';\n    })\n    .catch(err => {\n        console.error('Error submitting scores:', err);\n        alert('An error occurred while submitting your scores. Please try again.');\n    });\n}\n\n\/\/ evaluator meta submit (unchanged)\nfunction saveEvaluatorDetails() {\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    fetch('https:\/\/beams-experiments.com\/toyDesign\/saveEvaluatorsDetails2.php', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\n        body: evaluatorData.toString()\n    })\n    .then(r => r.text())\n    .then(txt => { console.log('Meta saved:', txt); })\n    .catch(err => { console.error('Error saving evaluator details:', err); });\n}\n\n\/\/ small helper to avoid HTML injection in titles\nfunction escapeHtml(s) {\n    return String(s).replace(\/[&<>\"']\/g, c => ({\n        '&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'\n    }[c]));\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 created for children aged 5\u201311. 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-6257","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6257","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=6257"}],"version-history":[{"count":8,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6257\/revisions"}],"predecessor-version":[{"id":6305,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/6257\/revisions\/6305"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=6257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}