[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"quiz-eyedropper-api-native-color-picker":44,"search-suggestions":60,"quiz-article-eyedropper-api-native-color-picker":107},[4,20,32],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Read it. Run it. Prove it.","A post a day on modern web development — most with an editable playground and a quiz that explains every answer. Free, no account needed.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Grammar explained the way good documentation explains an API — one idea at a time, each with a quiz.","amber-400","⌘",[13,15,29],"es",{"courses":18,"paths":18,"articles":17,"exams":18,"flashcards":17,"packages":18,"community":17,"certificates":17,"teams":18,"commerce":18},2,{"id":33,"slug":34,"name":35,"tagline":36,"description":37,"accentFrom":38,"accentTo":39,"icon":40,"defaultLocale":13,"locales":41,"features":42,"position":43},"7b3c16f2-931d-410e-802e-e1fa4edab7de","soft","Soft Skills","The half of the job nobody wrote documentation for.","Weekly, on the parts of working life that decide more than your code does — first weeks, meetings, interviews, promotions, and the people around you. Written from what actually happens, and recorded as a podcast you can listen to on the walk.","emerald-400","teal-300","◉",[13],{"courses":18,"paths":18,"articles":17,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":18},3,{"id":45,"slug":46,"kind":47,"title":48,"description":49,"config":50,"verticalId":5,"vertical":55,"course":52,"_count":56,"access":57,"attempts":59,"questionCount":51},"01a0a4d0-bfe4-77d9-8797-de09bfc566f0","eyedropper-api-native-color-picker","PRACTICE_QUIZ","The EyeDropper API — pick a real screen color","Seven questions on window.EyeDropper: what it actually returns, why it needs a real click to open, how cancellation behaves, and why a plain canvas could never do what it does.",{"questionCount":51,"timeLimitSec":52,"shuffleQuestions":18,"shuffleOptions":17,"negativeMarking":19,"passScorePct":53,"maxAttempts":52,"revealAnswers":54,"allowFlagging":18,"allowBacktracking":17},7,null,70,"AFTER_SUBMIT",{"slug":6,"name":7},{"questions":51},{"allowed":17,"reason":58},"FREE",[],[61,65,69,73,77,81,85,89,93,97,100,104],{"slug":62,"name":63,"articles":64},"webdev","Webdev",103,{"slug":66,"name":67,"articles":68},"javascript","Javascript",87,{"slug":70,"name":71,"articles":72},"frontend","Frontend",71,{"slug":74,"name":75,"articles":76},"css","Css",34,{"slug":78,"name":79,"articles":80},"tutorial","Tutorial",32,{"slug":82,"name":83,"articles":84},"typescript","Typescript",15,{"slug":86,"name":87,"articles":88},"react","React",13,{"slug":90,"name":91,"articles":92},"performance","Performance",12,{"slug":94,"name":95,"articles":96},"browser","Browser",9,{"slug":98,"name":99,"articles":96},"node","Node",{"slug":101,"name":102,"articles":103},"html","Html",6,{"slug":105,"name":106,"articles":103},"grammar","Grammar",{"id":108,"slug":46,"title":109,"subtitle":52,"excerpt":110,"coverUrl":111,"locale":13,"readingMinutes":112,"publishedAt":113,"viewCount":114,"likeCount":19,"commentCount":19,"author":115,"vertical":120,"topic":121,"tags":123,"_count":130,"playground":132,"body":134,"bodyMd":262,"seo":263,"translationGroupId":265,"series":52,"podcastUrl":52,"verticalId":5,"thread":266,"assessments":268,"translations":271,"quiz":273},"01a0a4d0-bf0a-73a8-a83e-7e87ab5df792","Chrome Already Has The Eyedropper You're Building","You're about to build a canvas-based color picker with a magnifier loupe. Chrome shipped a native one years ago — and it can sample pixels your own canvas can't even see.","\u002Fmedia\u002Fcovers\u002Feyedropper-api-native-color-picker.png",5,"2026-09-20T16:25:34.048Z",60,{"id":116,"name":117,"username":118,"avatarUrl":52,"headline":119},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":66,"name":122},"JavaScript",[124,125,126,129],{"slug":66,"name":67,"color":52},{"slug":62,"name":63,"color":52},{"slug":127,"name":128,"color":52},"api","API",{"slug":78,"name":79,"color":52},{"assessments":131},1,{"slug":46,"title":133},"EyeDropper API — pick a real screen color",{"blocks":135,"version":131},[136,140,143,146,150,153,159,162,165,168,171,174,178,181,184,187,190,193,197,200,203,206,209,212,215,219,222,225,228,231,234,237,240,243,246,249,252,255],{"id":137,"html":138,"type":139},"b1","\u003Cp>A designer messages you: "Can we let people pick a color from anywhere on their screen? Like, an eyedropper — click it, then click on my logo, and it grabs that exact blue."\u003C\u002Fp>","paragraph",{"id":141,"html":142,"type":139},"b2","\u003Cp>Sure, you say. You've done color pickers before. How hard can this be.\u003C\u002Fp>",{"id":144,"html":145,"type":139},"b3","\u003Cp>\u003Cstrong>Guess before you scroll: how many lines of code does the real answer take?\u003C\u002Fstrong>\u003C\u002Fp>",{"id":147,"html":148,"text":148,"type":149,"level":31},"b4","The canvas rabbit hole","heading",{"id":151,"html":152,"type":139},"b5","\u003Cp>The obvious plan: capture a snapshot of the page onto a \u003Ccode><canvas>\u003C\u002Fcode>, track the mouse, and read the pixel under the cursor with \u003Ccode>getImageData\u003C\u002Fcode>.\u003C\u002Fp>",{"id":154,"code":155,"type":156,"language":157,"highlight":158},"b6","const ctx = canvas.getContext(\"2d\");\ncanvas.addEventListener(\"mousemove\", (e) => {\n  const { data } = ctx.getImageData(e.offsetX, e.offsetY, 1, 1);\n  const hex = \"#\" + [data[0], data[1], data[2]]\n    .map((c) => c.toString(16).padStart(2, \"0\"))\n    .join(\"\");\n  swatch.style.background = hex;\n});","code","js",[],{"id":160,"html":161,"type":139},"b7","\u003Cp>That much works. Then the designer actually tries it, and moves the cursor off the page — onto their open Figma tab, onto the taskbar, onto the desktop wallpaper behind everything — and nothing happens. Your loupe just shows whatever was already under the cursor the last time it was over your canvas.\u003C\u002Fp>",{"id":163,"html":164,"type":139},"b8","\u003Cp>It's not a bug you can patch. A \u003Ccode><canvas>\u003C\u002Fcode> can only ever paint pixels \u003Cem>you\u003C\u002Fem> drew into it. It has no way to see the rest of the screen — no API reads "whatever is currently under the OS cursor," because that would mean a random web page could screenshot your other tabs and your desktop on a whim. The sandbox that keeps that from happening is also the wall your eyedropper just hit.\u003C\u002Fp>",{"id":166,"html":167,"type":139},"b9","\u003Cp>So now you're looking at \u003Ccode>getDisplayMedia()\u003C\u002Fcode> — the screen-capture API — just to grab a frame of the whole display, decode it into a video element, draw \u003Cem>that\u003C\u002Fem> onto a canvas, and read pixels from the copy. It works, technically. It also means a permission prompt, a capture-in-progress browser banner, and maybe 150 lines of plumbing for something that, on your OS, is a single click in the system color picker.\u003C\u002Fp>",{"id":169,"html":170,"text":170,"type":149,"level":31},"b10","The four lines that replace all of it",{"id":172,"html":173,"type":139},"b11","\u003Cp>Chrome — and Edge, and other Chromium browsers — has shipped a real system color picker as a Web API since late 2021: \u003Ccode>window.EyeDropper\u003C\u002Fcode>. No canvas, no screen capture, no pixel math.\u003C\u002Fp>",{"id":175,"code":176,"type":156,"language":157,"highlight":177},"b12","async function pickColor() {\n  const eyeDropper = new EyeDropper();\n  const { sRGBHex } = await eyeDropper.open();\n  swatch.style.background = sRGBHex;\n}\n\npickButton.addEventListener(\"click\", pickColor);",[],{"id":179,"html":180,"type":139},"b13","\u003Cp>Click the button, the cursor turns into a genuine magnifier loupe, and it works \u003Cem>anywhere on the screen\u003C\u002Fem> — over the page, over another app, over the taskbar. Click a pixel, and \u003Ccode>open()\u003C\u002Fcode> resolves with \u003Ccode>{ sRGBHex: "#3b82f6" }\u003C\u002Fcode>. That's the whole feature. The OS is doing the screen-reading for you, outside the browser's sandbox entirely, because the browser itself asked the OS to hand back one color, not a frame of pixels your JavaScript could keep.\u003C\u002Fp>",{"id":182,"html":183,"type":139},"b14","\u003Cp>That "outside the sandbox" part is worth sitting with for a second: this is the one common case where a web page gets to see something \u003Cem>beyond its own tab\u003C\u002Fem> without a permission prompt, a video stream, or a capture banner — because the API is deliberately narrow. It hands back a single hex string and nothing else. There's no way to get a full-screen screenshot out of it, no way to sample a rectangle, no stream to record. That narrowness is the whole reason it doesn't need the heavyweight ceremony \u003Ccode>getDisplayMedia()\u003C\u002Fcode> does.\u003C\u002Fp>",{"id":185,"html":186,"text":186,"type":149,"level":31},"b15","Two things that will bite you if you skip them",{"id":188,"html":189,"type":139},"b16","\u003Cp>\u003Cstrong>It has to start from a real user gesture.\u003C\u002Fstrong> Call \u003Ccode>eyeDropper.open()\u003C\u002Fcode> from inside a \u003Ccode>setTimeout\u003C\u002Fcode>, a \u003Ccode>fetch().then()\u003C\u002Fcode>, or on page load, and it throws instead of opening — the same "was this really a click" gate that guards \u003Ccode>requestFullscreen()\u003C\u002Fcode> and autoplaying audio. Wire it to a \u003Ccode>click\u003C\u002Fcode> listener directly and you're fine; wire it behind an async chain and you'll see a rejected promise with no obvious cause until you check what actually triggered the call.\u003C\u002Fp>",{"id":191,"html":192,"type":139},"b17","\u003Cp>\u003Cstrong>The reader can bail, and your code has to expect that.\u003C\u002Fstrong> Press Escape while the loupe is active, and \u003Ccode>open()\u003C\u002Fcode> rejects with a \u003Ccode>DOMException\u003C\u002Fcode> named \u003Ccode>AbortError\u003C\u002Fcode> — not a resolved value with \u003Ccode>null\u003C\u002Fcode>, an actual rejection:\u003C\u002Fp>",{"id":194,"code":195,"type":156,"language":157,"highlight":196},"b18","async function pickColor() {\n  try {\n    const eyeDropper = new EyeDropper();\n    const { sRGBHex } = await eyeDropper.open();\n    swatch.style.background = sRGBHex;\n  } catch (err) {\n    if (err.name === \"AbortError\") return; \u002F\u002F user pressed Escape — not a bug\n    console.error(err);\n  }\n}",[],{"id":198,"html":199,"type":139},"b19","\u003Cp>Skip the \u003Ccode>try\u002Fcatch\u003C\u002Fcode> and one Escape key press turns your color picker into an uncaught promise rejection in the console, on the most ordinary possible user action.\u003C\u002Fp>",{"id":201,"html":202,"type":139},"b20","\u003C!-- playground:start -->",{"id":204,"html":205,"text":205,"type":149,"level":31},"b21","🎮 Try it yourself",{"id":207,"html":208,"type":139},"b22","\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Feyedropper-api-native-color-picker\u002Fplayground\">▶️ Open the interactive playground →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":210,"html":211,"type":139},"b23","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":213,"html":214,"type":139},"b24","\u003C!-- playground:end -->",{"id":216,"html":217,"text":218,"type":149,"level":31},"b25","Where it doesn't reach yet","Where it doesn't reach yet",{"id":220,"html":221,"type":139},"b26","\u003Cp>Feature-detect before you use any of this — \u003Ccode>if ("EyeDropper" in window)\u003C\u002Fcode> — because Firefox and Safari don't ship it. There's no polyfill worth using either: the entire point is reading pixels outside the page, and nothing short of the OS itself can do that safely. Fall back to a plain \u003Ccode><input type="color">\u003C\u002Fcode> (which every browser already renders with its own OS color picker, just scoped to that one input) rather than resurrecting the canvas-and-\u003Ccode>getDisplayMedia()\u003C\u002Fcode> approach as a shim — you'd be rebuilding the exact complexity this API exists to delete.\u003C\u002Fp>",{"id":223,"html":224,"type":139},"b27","\u003Cp>It also only ever gives you one thing: a hex string. No alpha channel, no color name, no continuous "drag to preview" stream of values while you move — just the single pixel you clicked on, once. For most "pick a color from my design" features, that's the entire ask anyway.\u003C\u002Fp>",{"id":226,"html":227,"type":139},"b28","\u003Cp>So: the designer's request that sounded like a screen-capture project is four lines and a \u003Ccode>catch\u003C\u002Fcode> block, on the one browser engine that ships it. The canvas loupe isn't wrong, exactly — it's solving a problem the platform already solved for you, just not the way most people go looking for it.\u003C\u002Fp>",{"id":229,"html":230,"type":139},"b29","\u003Cp>What's the last browser API you built a workaround for, before finding out it already existed?\u003C\u002Fp>",{"id":232,"html":233,"type":139},"b30","\u003C!-- quiz:start -->",{"id":235,"html":236,"text":236,"type":149,"level":31},"b31","🧠 Test yourself",{"id":238,"html":239,"type":139},"b32","\u003Cp>Think it clicked? \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Feyedropper-api-native-color-picker\u002Fquiz\">Take the 7-question quiz →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":241,"html":242,"type":139},"b33","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":244,"html":245,"type":139},"b34","\u003C!-- quiz:end -->",{"id":247,"type":248},"b35","divider",{"id":250,"html":251,"type":139},"b36","\u003Cp>🚀 \u003Cstrong>Want more like this?\u003C\u002Fstrong> Every guide, playground, and quiz lives on \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fbestpractic.org\u002F\">bestpractic.org\u003C\u002Fa>\u003C\u002Fstrong> — open it and \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fbestpractic.org\u002F\">sign up free\u003C\u002Fa>\u003C\u002Fstrong> so the next one finds you.\u003C\u002Fp>",{"id":253,"html":254,"type":139},"b37","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":256,"type":257,"items":258,"ordered":18},"b38","list",[259,260,261],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","A designer messages you: \"Can we let people pick a color from anywhere on their screen? Like, an eyedropper — click it, then click on my logo, and it grabs that exact blue.\"\n\nSure, you say. You've done color pickers before. How hard can this be.\n\n**Guess before you scroll: how many lines of code does the real answer take?**\n\n## The canvas rabbit hole\n\nThe obvious plan: capture a snapshot of the page onto a `\u003Ccanvas>`, track the mouse, and read the pixel under the cursor with `getImageData`.\n\n```js\nconst ctx = canvas.getContext(\"2d\");\ncanvas.addEventListener(\"mousemove\", (e) => {\n  const { data } = ctx.getImageData(e.offsetX, e.offsetY, 1, 1);\n  const hex = \"#\" + [data[0], data[1], data[2]]\n    .map((c) => c.toString(16).padStart(2, \"0\"))\n    .join(\"\");\n  swatch.style.background = hex;\n});\n```\n\nThat much works. Then the designer actually tries it, and moves the cursor off the page — onto their open Figma tab, onto the taskbar, onto the desktop wallpaper behind everything — and nothing happens. Your loupe just shows whatever was already under the cursor the last time it was over your canvas.\n\nIt's not a bug you can patch. A `\u003Ccanvas>` can only ever paint pixels *you* drew into it. It has no way to see the rest of the screen — no API reads \"whatever is currently under the OS cursor,\" because that would mean a random web page could screenshot your other tabs and your desktop on a whim. The sandbox that keeps that from happening is also the wall your eyedropper just hit.\n\nSo now you're looking at `getDisplayMedia()` — the screen-capture API — just to grab a frame of the whole display, decode it into a video element, draw *that* onto a canvas, and read pixels from the copy. It works, technically. It also means a permission prompt, a capture-in-progress browser banner, and maybe 150 lines of plumbing for something that, on your OS, is a single click in the system color picker.\n\n## The four lines that replace all of it\n\nChrome — and Edge, and other Chromium browsers — has shipped a real system color picker as a Web API since late 2021: `window.EyeDropper`. No canvas, no screen capture, no pixel math.\n\n```js\nasync function pickColor() {\n  const eyeDropper = new EyeDropper();\n  const { sRGBHex } = await eyeDropper.open();\n  swatch.style.background = sRGBHex;\n}\n\npickButton.addEventListener(\"click\", pickColor);\n```\n\nClick the button, the cursor turns into a genuine magnifier loupe, and it works *anywhere on the screen* — over the page, over another app, over the taskbar. Click a pixel, and `open()` resolves with `{ sRGBHex: \"#3b82f6\" }`. That's the whole feature. The OS is doing the screen-reading for you, outside the browser's sandbox entirely, because the browser itself asked the OS to hand back one color, not a frame of pixels your JavaScript could keep.\n\nThat \"outside the sandbox\" part is worth sitting with for a second: this is the one common case where a web page gets to see something *beyond its own tab* without a permission prompt, a video stream, or a capture banner — because the API is deliberately narrow. It hands back a single hex string and nothing else. There's no way to get a full-screen screenshot out of it, no way to sample a rectangle, no stream to record. That narrowness is the whole reason it doesn't need the heavyweight ceremony `getDisplayMedia()` does.\n\n## Two things that will bite you if you skip them\n\n**It has to start from a real user gesture.** Call `eyeDropper.open()` from inside a `setTimeout`, a `fetch().then()`, or on page load, and it throws instead of opening — the same \"was this really a click\" gate that guards `requestFullscreen()` and autoplaying audio. Wire it to a `click` listener directly and you're fine; wire it behind an async chain and you'll see a rejected promise with no obvious cause until you check what actually triggered the call.\n\n**The reader can bail, and your code has to expect that.** Press Escape while the loupe is active, and `open()` rejects with a `DOMException` named `AbortError` — not a resolved value with `null`, an actual rejection:\n\n```js\nasync function pickColor() {\n  try {\n    const eyeDropper = new EyeDropper();\n    const { sRGBHex } = await eyeDropper.open();\n    swatch.style.background = sRGBHex;\n  } catch (err) {\n    if (err.name === \"AbortError\") return; \u002F\u002F user pressed Escape — not a bug\n    console.error(err);\n  }\n}\n```\n\nSkip the `try\u002Fcatch` and one Escape key press turns your color picker into an uncaught promise rejection in the console, on the most ordinary possible user action.\n\n\u003C!-- playground:start -->\n\n## 🎮 Try it yourself\n\n**[▶️ Open the interactive playground →](https:\u002F\u002Fbestpractic.org\u002Fblog\u002Feyedropper-api-native-color-picker\u002Fplayground)**\n\n_Runs right in your browser — poke at it and watch the concept react live._\n\n\u003C!-- playground:end -->\n\n## Where it doesn't reach yet\n\nFeature-detect before you use any of this — `if (\"EyeDropper\" in window)` — because Firefox and Safari don't ship it. There's no polyfill worth using either: the entire point is reading pixels outside the page, and nothing short of the OS itself can do that safely. Fall back to a plain `\u003Cinput type=\"color\">` (which every browser already renders with its own OS color picker, just scoped to that one input) rather than resurrecting the canvas-and-`getDisplayMedia()` approach as a shim — you'd be rebuilding the exact complexity this API exists to delete.\n\nIt also only ever gives you one thing: a hex string. No alpha channel, no color name, no continuous \"drag to preview\" stream of values while you move — just the single pixel you clicked on, once. For most \"pick a color from my design\" features, that's the entire ask anyway.\n\nSo: the designer's request that sounded like a screen-capture project is four lines and a `catch` block, on the one browser engine that ships it. The canvas loupe isn't wrong, exactly — it's solving a problem the platform already solved for you, just not the way most people go looking for it.\n\nWhat's the last browser API you built a workaround for, before finding out it already existed?\n\n\u003C!-- quiz:start -->\n\n## 🧠 Test yourself\n\nThink it clicked? **[Take the 7-question quiz →](https:\u002F\u002Fbestpractic.org\u002Fblog\u002Feyedropper-api-native-color-picker\u002Fquiz)**\n\n_Instant feedback, a hint on every question, and an explanation for each answer — right or wrong._\n\n\u003C!-- quiz:end -->\n\n---\n\n🚀 **Want more like this?** Every guide, playground, and quiz lives on **[bestpractic.org](https:\u002F\u002Fbestpractic.org\u002F)** — open it and **[sign up free](https:\u002F\u002Fbestpractic.org\u002F)** so the next one finds you.\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)",{"title":109,"canonical":264,"description":110},"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Feyedropper-api-native-color-picker","01a0a4d0-bf0a-73a8-a83e-80944f8d18d8",{"id":267,"locked":18},"01a0a4d0-bfcb-74eb-8580-c41181ff90f1",[269],{"id":45,"slug":46,"title":48,"_count":270},{"questions":51},[272],{"locale":13,"slug":46},{"id":45,"slug":46,"title":48,"_count":274,"questionCount":51},{"questions":51}]