[{"data":1,"prerenderedAt":2352},["ShallowReactive",2],{"/news/build-your-own-task-template":3},{"id":4,"title":5,"author":6,"body":7,"created":2331,"description":2332,"extension":2333,"headerImage":2334,"image":2335,"lastUpdated":2331,"meta":2336,"navigation":429,"path":2348,"published":429,"seo":2349,"stem":2350,"__hash__":2351},"news/news/build-your-own-task-template.md","Developer Guide: Build Your Own Task Template on the Effect API","Miguel",{"type":8,"value":9,"toc":2317},"minimark",[10,19,22,36,39,44,47,86,88,92,95,102,105,110,113,186,204,208,211,214,739,750,754,757,810,821,824,1029,1032,1036,1039,1042,1048,1108,1119,1129,1133,1136,1890,1892,1896,1902,1917,1925,1943,1950,1959,1966,1974,1977,1984,1991,1993,1997,2012,2043,2050,2056,2111,2118,2127,2129,2133,2140,2270,2279,2285,2287,2291,2294,2306,2312,2314],[11,12,13,14,18],"p",{},"Every task on Effect is a small web page. A worker opens it, answers one question, and presses submit. That page is a ",[15,16,17],"strong",{},"template",", and with the Effect API you can write your own.",[11,20,21],{},"This guide covers what a template is, walks through a complete example, and shows how to test it and run it as a job. Full docs are on the way. Until then, start here.",[11,23,24,27,28,35],{},[15,25,26],{},"You'll need:"," an API key from the ",[29,30,34],"a",{"href":31,"rel":32},"https://api.effect.ai/",[33],"nofollow","API console"," and some basic HTML.",[37,38],"hr",{},[40,41,43],"h2",{"id":42},"how-it-works","How it works",[11,45,46],{},"A template is a single HTML file. It can use any HTML, CSS and JavaScript you like, including libraries from a CDN.",[48,49,50,62,68,74,80],"ol",{},[51,52,53,56,57,61],"li",{},[15,54,55],{},"You write the page once",", with placeholders like ",[58,59,60],"code",{},"${image_url}"," wherever each task's data should go.",[51,63,64,67],{},[15,65,66],{},"You upload a CSV."," Each column matches a placeholder, and each row becomes a task.",[51,69,70,73],{},[15,71,72],{},"Workers see the page"," with that row's values filled in, and answer.",[51,75,76,79],{},[15,77,78],{},"Your page sends back the answer"," in whatever shape you choose.",[51,81,82,85],{},[15,83,84],{},"You collect the results",", each one paired with the row it came from.",[37,87],{},[40,89,91],{"id":90},"the-example","The example",[11,93,94],{},"We'll build a template that asks workers to classify an image. This is what a worker sees:",[11,96,97],{},[98,99],"img",{"alt":100,"src":101},"The image-subject template as a worker sees it: a photo of a black puppy, four subject options with Animal selected, a blurry-or-broken checkbox and a Submit button","/img/news/template-image-subject.png",[11,103,104],{},"Every template has the same three parts, plus instructions for the worker. Here they are in this one.",[106,107,109],"h3",{"id":108},"_1-the-fields","1. The fields",[11,111,112],{},"Fields are the data that changes from task to task. This template has two: the image to show, and an id so you can match answers back to your data.",[114,115,120],"pre",{"className":116,"code":117,"language":118,"meta":119,"style":119},"language-js shiki shiki-themes github-dark","const imageUrl = \"${image_url}\";\nconst imageId = \"${image_id}\";\ndocument.getElementById(\"photo\").src = imageUrl;\n","js","",[58,121,122,146,161],{"__ignoreMap":119},[123,124,127,131,135,138,142],"span",{"class":125,"line":126},"line",1,[123,128,130],{"class":129},"snl16","const",[123,132,134],{"class":133},"sDLfK"," imageUrl",[123,136,137],{"class":129}," =",[123,139,141],{"class":140},"sU2Wk"," \"${image_url}\"",[123,143,145],{"class":144},"s95oV",";\n",[123,147,149,151,154,156,159],{"class":125,"line":148},2,[123,150,130],{"class":129},[123,152,153],{"class":133}," imageId",[123,155,137],{"class":129},[123,157,158],{"class":140}," \"${image_id}\"",[123,160,145],{"class":144},[123,162,164,167,171,174,177,180,183],{"class":125,"line":163},3,[123,165,166],{"class":144},"document.",[123,168,170],{"class":169},"svObZ","getElementById",[123,172,173],{"class":144},"(",[123,175,176],{"class":140},"\"photo\"",[123,178,179],{"class":144},").src ",[123,181,182],{"class":129},"=",[123,184,185],{"class":144}," imageUrl;\n",[11,187,188,189,192,193,195,196,199,200,203],{},"Each ",[58,190,191],{},"${...}"," becomes a column in your CSV, so the headers must match the placeholders exactly. The console lists a template's fields, and a job with a missing column is rejected. Put placeholders inside double-quoted strings in your script, as above, and use JavaScript to put them on the page. That keeps quotes and symbols in your data from breaking the page. Avoid using ",[58,194,191],{}," for other JavaScript expressions: the template system treats them as placeholders too. For example, write ",[58,197,198],{},"`Score: ` + score"," instead of ",[58,201,202],{},"`Score: ${score}`",".",[106,205,207],{"id":206},"_2-the-task","2. The task",[11,209,210],{},"This part is ordinary HTML: the question, the image and the answer options. Style it however you like. Keep it focused on one decision, since workers move through many tasks quickly.",[11,212,213],{},"Here's the HTML for this example:",[114,215,219],{"className":216,"code":217,"language":218,"meta":119,"style":119},"language-html shiki shiki-themes github-dark","\u003Cstyle>\n  body { font-family: system-ui, sans-serif; max-width: 640px; margin: 2rem auto; padding: 0 1rem; }\n  img { max-width: 100%; border-radius: 8px; }\n  label { display: block; margin: .4rem 0; }\n  button { margin-top: 1rem; }\n  #error { color: #c00; display: none; }\n\u003C/style>\n\n\u003Ch2>What is the main subject of this image?\u003C/h2>\n\u003Cimg id=\"photo\" alt=\"Image to classify\" />\n\n\u003Cdiv class=\"options\">\n  \u003Clabel>\u003Cinput type=\"radio\" name=\"subject\" value=\"person\" /> Person\u003C/label>\n  \u003Clabel>\u003Cinput type=\"radio\" name=\"subject\" value=\"animal\" /> Animal\u003C/label>\n  \u003Clabel>\u003Cinput type=\"radio\" name=\"subject\" value=\"vehicle\" /> Vehicle\u003C/label>\n  \u003Clabel>\u003Cinput type=\"radio\" name=\"subject\" value=\"other\" /> Something else\u003C/label>\n\u003C/div>\n\u003Clabel>\u003Cinput type=\"checkbox\" id=\"unclear\" /> The image is blurry or broken\u003C/label>\n\n\u003Cp id=\"error\">Pick a subject, or mark the image as unclear.\u003C/p>\n\u003Cbutton id=\"submit\">Submit\u003C/button>\n","html",[58,220,221,233,304,335,367,387,414,424,431,445,470,475,493,539,576,613,650,659,691,696,717],{"__ignoreMap":119},[123,222,223,226,230],{"class":125,"line":126},[123,224,225],{"class":144},"\u003C",[123,227,229],{"class":228},"s4JwU","style",[123,231,232],{"class":144},">\n",[123,234,235,238,241,244,247,250,253,256,259,262,264,267,270,272,275,277,280,283,286,288,291,293,296,299,301],{"class":125,"line":148},[123,236,237],{"class":228},"  body",[123,239,240],{"class":144}," { ",[123,242,243],{"class":133},"font-family",[123,245,246],{"class":144},": ",[123,248,249],{"class":133},"system-ui",[123,251,252],{"class":144},", ",[123,254,255],{"class":133},"sans-serif",[123,257,258],{"class":144},"; ",[123,260,261],{"class":133},"max-width",[123,263,246],{"class":144},[123,265,266],{"class":133},"640",[123,268,269],{"class":129},"px",[123,271,258],{"class":144},[123,273,274],{"class":133},"margin",[123,276,246],{"class":144},[123,278,279],{"class":133},"2",[123,281,282],{"class":129},"rem",[123,284,285],{"class":133}," auto",[123,287,258],{"class":144},[123,289,290],{"class":133},"padding",[123,292,246],{"class":144},[123,294,295],{"class":133},"0",[123,297,298],{"class":133}," 1",[123,300,282],{"class":129},[123,302,303],{"class":144},"; }\n",[123,305,306,309,311,313,315,318,321,323,326,328,331,333],{"class":125,"line":163},[123,307,308],{"class":228},"  img",[123,310,240],{"class":144},[123,312,261],{"class":133},[123,314,246],{"class":144},[123,316,317],{"class":133},"100",[123,319,320],{"class":129},"%",[123,322,258],{"class":144},[123,324,325],{"class":133},"border-radius",[123,327,246],{"class":144},[123,329,330],{"class":133},"8",[123,332,269],{"class":129},[123,334,303],{"class":144},[123,336,338,341,343,346,348,351,353,355,357,360,362,365],{"class":125,"line":337},4,[123,339,340],{"class":228},"  label",[123,342,240],{"class":144},[123,344,345],{"class":133},"display",[123,347,246],{"class":144},[123,349,350],{"class":133},"block",[123,352,258],{"class":144},[123,354,274],{"class":133},[123,356,246],{"class":144},[123,358,359],{"class":133},".4",[123,361,282],{"class":129},[123,363,364],{"class":133}," 0",[123,366,303],{"class":144},[123,368,370,373,375,378,380,383,385],{"class":125,"line":369},5,[123,371,372],{"class":228},"  button",[123,374,240],{"class":144},[123,376,377],{"class":133},"margin-top",[123,379,246],{"class":144},[123,381,382],{"class":133},"1",[123,384,282],{"class":129},[123,386,303],{"class":144},[123,388,390,393,395,398,400,403,405,407,409,412],{"class":125,"line":389},6,[123,391,392],{"class":169},"  #error",[123,394,240],{"class":144},[123,396,397],{"class":133},"color",[123,399,246],{"class":144},[123,401,402],{"class":133},"#c00",[123,404,258],{"class":144},[123,406,345],{"class":133},[123,408,246],{"class":144},[123,410,411],{"class":133},"none",[123,413,303],{"class":144},[123,415,417,420,422],{"class":125,"line":416},7,[123,418,419],{"class":144},"\u003C/",[123,421,229],{"class":228},[123,423,232],{"class":144},[123,425,427],{"class":125,"line":426},8,[123,428,430],{"emptyLinePlaceholder":429},true,"\n",[123,432,434,436,438,441,443],{"class":125,"line":433},9,[123,435,225],{"class":144},[123,437,40],{"class":228},[123,439,440],{"class":144},">What is the main subject of this image?\u003C/",[123,442,40],{"class":228},[123,444,232],{"class":144},[123,446,448,450,452,455,457,459,462,464,467],{"class":125,"line":447},10,[123,449,225],{"class":144},[123,451,98],{"class":228},[123,453,454],{"class":169}," id",[123,456,182],{"class":144},[123,458,176],{"class":140},[123,460,461],{"class":169}," alt",[123,463,182],{"class":144},[123,465,466],{"class":140},"\"Image to classify\"",[123,468,469],{"class":144}," />\n",[123,471,473],{"class":125,"line":472},11,[123,474,430],{"emptyLinePlaceholder":429},[123,476,478,480,483,486,488,491],{"class":125,"line":477},12,[123,479,225],{"class":144},[123,481,482],{"class":228},"div",[123,484,485],{"class":169}," class",[123,487,182],{"class":144},[123,489,490],{"class":140},"\"options\"",[123,492,232],{"class":144},[123,494,496,499,502,505,508,511,513,516,519,521,524,527,529,532,535,537],{"class":125,"line":495},13,[123,497,498],{"class":144},"  \u003C",[123,500,501],{"class":228},"label",[123,503,504],{"class":144},">\u003C",[123,506,507],{"class":228},"input",[123,509,510],{"class":169}," type",[123,512,182],{"class":144},[123,514,515],{"class":140},"\"radio\"",[123,517,518],{"class":169}," name",[123,520,182],{"class":144},[123,522,523],{"class":140},"\"subject\"",[123,525,526],{"class":169}," value",[123,528,182],{"class":144},[123,530,531],{"class":140},"\"person\"",[123,533,534],{"class":144}," /> Person\u003C/",[123,536,501],{"class":228},[123,538,232],{"class":144},[123,540,542,544,546,548,550,552,554,556,558,560,562,564,566,569,572,574],{"class":125,"line":541},14,[123,543,498],{"class":144},[123,545,501],{"class":228},[123,547,504],{"class":144},[123,549,507],{"class":228},[123,551,510],{"class":169},[123,553,182],{"class":144},[123,555,515],{"class":140},[123,557,518],{"class":169},[123,559,182],{"class":144},[123,561,523],{"class":140},[123,563,526],{"class":169},[123,565,182],{"class":144},[123,567,568],{"class":140},"\"animal\"",[123,570,571],{"class":144}," /> Animal\u003C/",[123,573,501],{"class":228},[123,575,232],{"class":144},[123,577,579,581,583,585,587,589,591,593,595,597,599,601,603,606,609,611],{"class":125,"line":578},15,[123,580,498],{"class":144},[123,582,501],{"class":228},[123,584,504],{"class":144},[123,586,507],{"class":228},[123,588,510],{"class":169},[123,590,182],{"class":144},[123,592,515],{"class":140},[123,594,518],{"class":169},[123,596,182],{"class":144},[123,598,523],{"class":140},[123,600,526],{"class":169},[123,602,182],{"class":144},[123,604,605],{"class":140},"\"vehicle\"",[123,607,608],{"class":144}," /> Vehicle\u003C/",[123,610,501],{"class":228},[123,612,232],{"class":144},[123,614,616,618,620,622,624,626,628,630,632,634,636,638,640,643,646,648],{"class":125,"line":615},16,[123,617,498],{"class":144},[123,619,501],{"class":228},[123,621,504],{"class":144},[123,623,507],{"class":228},[123,625,510],{"class":169},[123,627,182],{"class":144},[123,629,515],{"class":140},[123,631,518],{"class":169},[123,633,182],{"class":144},[123,635,523],{"class":140},[123,637,526],{"class":169},[123,639,182],{"class":144},[123,641,642],{"class":140},"\"other\"",[123,644,645],{"class":144}," /> Something else\u003C/",[123,647,501],{"class":228},[123,649,232],{"class":144},[123,651,653,655,657],{"class":125,"line":652},17,[123,654,419],{"class":144},[123,656,482],{"class":228},[123,658,232],{"class":144},[123,660,662,664,666,668,670,672,674,677,679,681,684,687,689],{"class":125,"line":661},18,[123,663,225],{"class":144},[123,665,501],{"class":228},[123,667,504],{"class":144},[123,669,507],{"class":228},[123,671,510],{"class":169},[123,673,182],{"class":144},[123,675,676],{"class":140},"\"checkbox\"",[123,678,454],{"class":169},[123,680,182],{"class":144},[123,682,683],{"class":140},"\"unclear\"",[123,685,686],{"class":144}," /> The image is blurry or broken\u003C/",[123,688,501],{"class":228},[123,690,232],{"class":144},[123,692,694],{"class":125,"line":693},19,[123,695,430],{"emptyLinePlaceholder":429},[123,697,699,701,703,705,707,710,713,715],{"class":125,"line":698},20,[123,700,225],{"class":144},[123,702,11],{"class":228},[123,704,454],{"class":169},[123,706,182],{"class":144},[123,708,709],{"class":140},"\"error\"",[123,711,712],{"class":144},">Pick a subject, or mark the image as unclear.\u003C/",[123,714,11],{"class":228},[123,716,232],{"class":144},[123,718,720,722,725,727,729,732,735,737],{"class":125,"line":719},21,[123,721,225],{"class":144},[123,723,724],{"class":228},"button",[123,726,454],{"class":169},[123,728,182],{"class":144},[123,730,731],{"class":140},"\"submit\"",[123,733,734],{"class":144},">Submit\u003C/",[123,736,724],{"class":228},[123,738,232],{"class":144},[11,740,741,742,745,746,749],{},"The ",[58,743,744],{},"\u003Cimg>"," starts out empty, and the script from part 1 fills in its ",[58,747,748],{},"src",". The error message stays hidden until the check in part 3 shows it.",[106,751,753],{"id":752},"_3-the-answer","3. The answer",[11,755,756],{},"When the worker is done, the page sends their answer back:",[114,758,760],{"className":116,"code":759,"language":118,"meta":119,"style":119},"window.parent.postMessage({\n  task: \"submit\",\n  values: { imageId: imageId, subject: \"animal\", unclear: false }\n}, \"*\");\n",[58,761,762,773,783,799],{"__ignoreMap":119},[123,763,764,767,770],{"class":125,"line":126},[123,765,766],{"class":144},"window.parent.",[123,768,769],{"class":169},"postMessage",[123,771,772],{"class":144},"({\n",[123,774,775,778,780],{"class":125,"line":148},[123,776,777],{"class":144},"  task: ",[123,779,731],{"class":140},[123,781,782],{"class":144},",\n",[123,784,785,788,790,793,796],{"class":125,"line":163},[123,786,787],{"class":144},"  values: { imageId: imageId, subject: ",[123,789,568],{"class":140},[123,791,792],{"class":144},", unclear: ",[123,794,795],{"class":133},"false",[123,797,798],{"class":144}," }\n",[123,800,801,804,807],{"class":125,"line":337},[123,802,803],{"class":144},"}, ",[123,805,806],{"class":140},"\"*\"",[123,808,809],{"class":144},");\n",[11,811,812,813,816,817,820],{},"You choose what goes in ",[58,814,815],{},"values",", and your results come back in that same shape. Include an id such as ",[58,818,819],{},"imageId"," so each answer can be matched to its input and understood on its own.",[11,822,823],{},"Always add client-side validation checks to your template. Since workers cannot edit their submissions after sending, attaching validation logic to your template's Submit button prevents empty or missing responses.  In this example, the Submit button runs a check first:",[114,825,827],{"className":116,"code":826,"language":118,"meta":119,"style":119},"document.getElementById(\"submit\").addEventListener(\"click\", () => {\n  const choice = document.querySelector('input[name=\"subject\"]:checked');\n  const unclear = document.getElementById(\"unclear\").checked;\n\n  // Nothing picked yet: show an error and stop, so nothing is sent\n  if (!choice && !unclear) {\n    document.getElementById(\"error\").style.display = \"block\";\n    return;\n  }\n\n  // Only reached once the worker has picked a subject or ticked the box\n  window.parent.postMessage({\n    task: \"submit\",\n    values: { imageId: imageId, subject: choice ? choice.value : null, unclear: unclear }\n  }, \"*\");\n});\n",[58,828,829,859,882,902,906,912,935,956,963,968,972,977,986,995,1015,1024],{"__ignoreMap":119},[123,830,831,833,835,837,839,842,845,847,850,853,856],{"class":125,"line":126},[123,832,166],{"class":144},[123,834,170],{"class":169},[123,836,173],{"class":144},[123,838,731],{"class":140},[123,840,841],{"class":144},").",[123,843,844],{"class":169},"addEventListener",[123,846,173],{"class":144},[123,848,849],{"class":140},"\"click\"",[123,851,852],{"class":144},", () ",[123,854,855],{"class":129},"=>",[123,857,858],{"class":144}," {\n",[123,860,861,864,867,869,872,875,877,880],{"class":125,"line":148},[123,862,863],{"class":129},"  const",[123,865,866],{"class":133}," choice",[123,868,137],{"class":129},[123,870,871],{"class":144}," document.",[123,873,874],{"class":169},"querySelector",[123,876,173],{"class":144},[123,878,879],{"class":140},"'input[name=\"subject\"]:checked'",[123,881,809],{"class":144},[123,883,884,886,889,891,893,895,897,899],{"class":125,"line":163},[123,885,863],{"class":129},[123,887,888],{"class":133}," unclear",[123,890,137],{"class":129},[123,892,871],{"class":144},[123,894,170],{"class":169},[123,896,173],{"class":144},[123,898,683],{"class":140},[123,900,901],{"class":144},").checked;\n",[123,903,904],{"class":125,"line":337},[123,905,430],{"emptyLinePlaceholder":429},[123,907,908],{"class":125,"line":369},[123,909,911],{"class":910},"sAwPA","  // Nothing picked yet: show an error and stop, so nothing is sent\n",[123,913,914,917,920,923,926,929,932],{"class":125,"line":389},[123,915,916],{"class":129},"  if",[123,918,919],{"class":144}," (",[123,921,922],{"class":129},"!",[123,924,925],{"class":144},"choice ",[123,927,928],{"class":129},"&&",[123,930,931],{"class":129}," !",[123,933,934],{"class":144},"unclear) {\n",[123,936,937,940,942,944,946,949,951,954],{"class":125,"line":416},[123,938,939],{"class":144},"    document.",[123,941,170],{"class":169},[123,943,173],{"class":144},[123,945,709],{"class":140},[123,947,948],{"class":144},").style.display ",[123,950,182],{"class":129},[123,952,953],{"class":140}," \"block\"",[123,955,145],{"class":144},[123,957,958,961],{"class":125,"line":426},[123,959,960],{"class":129},"    return",[123,962,145],{"class":144},[123,964,965],{"class":125,"line":433},[123,966,967],{"class":144},"  }\n",[123,969,970],{"class":125,"line":447},[123,971,430],{"emptyLinePlaceholder":429},[123,973,974],{"class":125,"line":472},[123,975,976],{"class":910},"  // Only reached once the worker has picked a subject or ticked the box\n",[123,978,979,982,984],{"class":125,"line":477},[123,980,981],{"class":144},"  window.parent.",[123,983,769],{"class":169},[123,985,772],{"class":144},[123,987,988,991,993],{"class":125,"line":495},[123,989,990],{"class":144},"    task: ",[123,992,731],{"class":140},[123,994,782],{"class":144},[123,996,997,1000,1003,1006,1009,1012],{"class":125,"line":541},[123,998,999],{"class":144},"    values: { imageId: imageId, subject: choice ",[123,1001,1002],{"class":129},"?",[123,1004,1005],{"class":144}," choice.value ",[123,1007,1008],{"class":129},":",[123,1010,1011],{"class":133}," null",[123,1013,1014],{"class":144},", unclear: unclear }\n",[123,1016,1017,1020,1022],{"class":125,"line":578},[123,1018,1019],{"class":144},"  }, ",[123,1021,806],{"class":140},[123,1023,809],{"class":144},[123,1025,1026],{"class":125,"line":615},[123,1027,1028],{"class":144},"});\n",[11,1030,1031],{},"If the worker hasn't picked a subject or ticked the blurry-or-broken box, they see \"Pick a subject, or mark the image as unclear.\" and the task stays open.",[106,1033,1035],{"id":1034},"_4-the-instructions","4. The instructions",[11,1037,1038],{},"Instructions tell workers what a good answer looks like. Workers open them from an info button beside the task, and clear instructions are one of the easiest ways to get better answers. Treat them as part of the template, not an extra. You can use headings, lists, links and images.",[11,1040,1041],{},"There are two ways to add them. Pick one, not both.",[11,1043,1044,1047],{},[15,1045,1046],{},"Option 1: bake them into the template (recommended)."," Add this to your script, with the instructions written as HTML right in the call. It sends them to the worker app when the task loads:",[114,1049,1051],{"className":116,"code":1050,"language":118,"meta":119,"style":119},"window.top.postMessage({\n  type: \"task-instructions\",\n  instructions: `\n    \u003Ch3>How to answer\u003C/h3>\n    \u003Cp>Pick what the photo is mostly about. If two subjects look equally important, pick the larger one.\u003C/p>\n    \u003Cp>Tick \u003Cstrong>blurry or broken\u003C/strong> only if you can't tell what the image shows.\u003C/p>\n  `\n}, \"*\");\n",[58,1052,1053,1062,1072,1080,1085,1090,1095,1100],{"__ignoreMap":119},[123,1054,1055,1058,1060],{"class":125,"line":126},[123,1056,1057],{"class":144},"window.top.",[123,1059,769],{"class":169},[123,1061,772],{"class":144},[123,1063,1064,1067,1070],{"class":125,"line":148},[123,1065,1066],{"class":144},"  type: ",[123,1068,1069],{"class":140},"\"task-instructions\"",[123,1071,782],{"class":144},[123,1073,1074,1077],{"class":125,"line":163},[123,1075,1076],{"class":144},"  instructions: ",[123,1078,1079],{"class":140},"`\n",[123,1081,1082],{"class":125,"line":337},[123,1083,1084],{"class":140},"    \u003Ch3>How to answer\u003C/h3>\n",[123,1086,1087],{"class":125,"line":369},[123,1088,1089],{"class":140},"    \u003Cp>Pick what the photo is mostly about. If two subjects look equally important, pick the larger one.\u003C/p>\n",[123,1091,1092],{"class":125,"line":389},[123,1093,1094],{"class":140},"    \u003Cp>Tick \u003Cstrong>blurry or broken\u003C/strong> only if you can't tell what the image shows.\u003C/p>\n",[123,1096,1097],{"class":125,"line":416},[123,1098,1099],{"class":140},"  `\n",[123,1101,1102,1104,1106],{"class":125,"line":426},[123,1103,803],{"class":144},[123,1105,806],{"class":140},[123,1107,809],{"class":144},[11,1109,1110,1111,1114,1115,1118],{},"Note that instructions go to ",[58,1112,1113],{},"window.top",", while the answer goes to ",[58,1116,1117],{},"window.parent",". With this option, everything lives in one file. The task and its instructions are edited, reviewed and registered together, whether you use the console or the API.",[11,1120,1121,1124,1125,1128],{},[15,1122,1123],{},"Option 2: use the API console."," When you create the template in the console, paste the instruction HTML into the ",[15,1126,1127],{},"Worker instructions"," box. The console adds it to your template when you submit. It's quick, but the instructions then live in the console instead of your file, so registering the same file over the API later leaves them out. The console won't accept a template that already sends its own instructions, so if you chose option 1, leave the box empty.",[106,1130,1132],{"id":1131},"the-full-template","The full template",[11,1134,1135],{},"Here's all of it together. Copy it as a starting point.",[114,1137,1139],{"className":216,"code":1138,"language":218,"meta":119,"style":119},"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; max-width: 640px; margin: 2rem auto; padding: 0 1rem; }\n  img { max-width: 100%; border-radius: 8px; }\n  label { display: block; margin: .4rem 0; }\n  button { margin-top: 1rem; }\n  #error { color: #c00; display: none; }\n\u003C/style>\n\n\u003Ch2>What is the main subject of this image?\u003C/h2>\n\u003Cimg id=\"photo\" alt=\"Image to classify\" />\n\n\u003Cdiv class=\"options\">\n  \u003Clabel>\u003Cinput type=\"radio\" name=\"subject\" value=\"person\" /> Person\u003C/label>\n  \u003Clabel>\u003Cinput type=\"radio\" name=\"subject\" value=\"animal\" /> Animal\u003C/label>\n  \u003Clabel>\u003Cinput type=\"radio\" name=\"subject\" value=\"vehicle\" /> Vehicle\u003C/label>\n  \u003Clabel>\u003Cinput type=\"radio\" name=\"subject\" value=\"other\" /> Something else\u003C/label>\n\u003C/div>\n\u003Clabel>\u003Cinput type=\"checkbox\" id=\"unclear\" /> The image is blurry or broken\u003C/label>\n\n\u003Cp id=\"error\">Pick a subject, or mark the image as unclear.\u003C/p>\n\u003Cbutton id=\"submit\">Submit\u003C/button>\n\n\u003Cscript>\n  // 1. Fields\n  const imageUrl = \"${image_url}\";\n  const imageId = \"${image_id}\";\n  document.getElementById(\"photo\").src = imageUrl;\n\n  // 2. Instructions: send them to the worker app on load\n  window.top.postMessage({\n    type: \"task-instructions\",\n    instructions: `\n      \u003Ch3>How to answer\u003C/h3>\n      \u003Cp>Pick what the photo is mostly about. If two subjects look equally important, pick the larger one.\u003C/p>\n      \u003Cp>Tick \u003Cstrong>blurry or broken\u003C/strong> only if you can't tell what the image shows.\u003C/p>\n    `\n  }, \"*\");\n\n  // 3. Answer: check the input, then submit\n  document.getElementById(\"submit\").addEventListener(\"click\", () => {\n    const choice = document.querySelector('input[name=\"subject\"]:checked');\n    const unclear = document.getElementById(\"unclear\").checked;\n    if (!choice && !unclear) {\n      document.getElementById(\"error\").style.display = \"block\";\n      return;\n    }\n    window.parent.postMessage({\n      task: \"submit\",\n      values: { imageId: imageId, subject: choice ? choice.value : null, unclear: unclear }\n    }, \"*\");\n  });\n\u003C/script>\n",[58,1140,1141,1149,1201,1227,1253,1269,1291,1299,1303,1315,1335,1339,1353,1387,1421,1455,1489,1497,1525,1529,1547,1565,1570,1580,1586,1599,1612,1630,1635,1641,1651,1661,1669,1675,1681,1687,1693,1702,1707,1713,1738,1758,1777,1795,1815,1823,1829,1839,1849,1865,1875,1881],{"__ignoreMap":119},[123,1142,1143,1145,1147],{"class":125,"line":126},[123,1144,225],{"class":144},[123,1146,229],{"class":228},[123,1148,232],{"class":144},[123,1150,1151,1153,1155,1157,1159,1161,1163,1165,1167,1169,1171,1173,1175,1177,1179,1181,1183,1185,1187,1189,1191,1193,1195,1197,1199],{"class":125,"line":148},[123,1152,237],{"class":228},[123,1154,240],{"class":144},[123,1156,243],{"class":133},[123,1158,246],{"class":144},[123,1160,249],{"class":133},[123,1162,252],{"class":144},[123,1164,255],{"class":133},[123,1166,258],{"class":144},[123,1168,261],{"class":133},[123,1170,246],{"class":144},[123,1172,266],{"class":133},[123,1174,269],{"class":129},[123,1176,258],{"class":144},[123,1178,274],{"class":133},[123,1180,246],{"class":144},[123,1182,279],{"class":133},[123,1184,282],{"class":129},[123,1186,285],{"class":133},[123,1188,258],{"class":144},[123,1190,290],{"class":133},[123,1192,246],{"class":144},[123,1194,295],{"class":133},[123,1196,298],{"class":133},[123,1198,282],{"class":129},[123,1200,303],{"class":144},[123,1202,1203,1205,1207,1209,1211,1213,1215,1217,1219,1221,1223,1225],{"class":125,"line":163},[123,1204,308],{"class":228},[123,1206,240],{"class":144},[123,1208,261],{"class":133},[123,1210,246],{"class":144},[123,1212,317],{"class":133},[123,1214,320],{"class":129},[123,1216,258],{"class":144},[123,1218,325],{"class":133},[123,1220,246],{"class":144},[123,1222,330],{"class":133},[123,1224,269],{"class":129},[123,1226,303],{"class":144},[123,1228,1229,1231,1233,1235,1237,1239,1241,1243,1245,1247,1249,1251],{"class":125,"line":337},[123,1230,340],{"class":228},[123,1232,240],{"class":144},[123,1234,345],{"class":133},[123,1236,246],{"class":144},[123,1238,350],{"class":133},[123,1240,258],{"class":144},[123,1242,274],{"class":133},[123,1244,246],{"class":144},[123,1246,359],{"class":133},[123,1248,282],{"class":129},[123,1250,364],{"class":133},[123,1252,303],{"class":144},[123,1254,1255,1257,1259,1261,1263,1265,1267],{"class":125,"line":369},[123,1256,372],{"class":228},[123,1258,240],{"class":144},[123,1260,377],{"class":133},[123,1262,246],{"class":144},[123,1264,382],{"class":133},[123,1266,282],{"class":129},[123,1268,303],{"class":144},[123,1270,1271,1273,1275,1277,1279,1281,1283,1285,1287,1289],{"class":125,"line":389},[123,1272,392],{"class":169},[123,1274,240],{"class":144},[123,1276,397],{"class":133},[123,1278,246],{"class":144},[123,1280,402],{"class":133},[123,1282,258],{"class":144},[123,1284,345],{"class":133},[123,1286,246],{"class":144},[123,1288,411],{"class":133},[123,1290,303],{"class":144},[123,1292,1293,1295,1297],{"class":125,"line":416},[123,1294,419],{"class":144},[123,1296,229],{"class":228},[123,1298,232],{"class":144},[123,1300,1301],{"class":125,"line":426},[123,1302,430],{"emptyLinePlaceholder":429},[123,1304,1305,1307,1309,1311,1313],{"class":125,"line":433},[123,1306,225],{"class":144},[123,1308,40],{"class":228},[123,1310,440],{"class":144},[123,1312,40],{"class":228},[123,1314,232],{"class":144},[123,1316,1317,1319,1321,1323,1325,1327,1329,1331,1333],{"class":125,"line":447},[123,1318,225],{"class":144},[123,1320,98],{"class":228},[123,1322,454],{"class":169},[123,1324,182],{"class":144},[123,1326,176],{"class":140},[123,1328,461],{"class":169},[123,1330,182],{"class":144},[123,1332,466],{"class":140},[123,1334,469],{"class":144},[123,1336,1337],{"class":125,"line":472},[123,1338,430],{"emptyLinePlaceholder":429},[123,1340,1341,1343,1345,1347,1349,1351],{"class":125,"line":477},[123,1342,225],{"class":144},[123,1344,482],{"class":228},[123,1346,485],{"class":169},[123,1348,182],{"class":144},[123,1350,490],{"class":140},[123,1352,232],{"class":144},[123,1354,1355,1357,1359,1361,1363,1365,1367,1369,1371,1373,1375,1377,1379,1381,1383,1385],{"class":125,"line":495},[123,1356,498],{"class":144},[123,1358,501],{"class":228},[123,1360,504],{"class":144},[123,1362,507],{"class":228},[123,1364,510],{"class":169},[123,1366,182],{"class":144},[123,1368,515],{"class":140},[123,1370,518],{"class":169},[123,1372,182],{"class":144},[123,1374,523],{"class":140},[123,1376,526],{"class":169},[123,1378,182],{"class":144},[123,1380,531],{"class":140},[123,1382,534],{"class":144},[123,1384,501],{"class":228},[123,1386,232],{"class":144},[123,1388,1389,1391,1393,1395,1397,1399,1401,1403,1405,1407,1409,1411,1413,1415,1417,1419],{"class":125,"line":541},[123,1390,498],{"class":144},[123,1392,501],{"class":228},[123,1394,504],{"class":144},[123,1396,507],{"class":228},[123,1398,510],{"class":169},[123,1400,182],{"class":144},[123,1402,515],{"class":140},[123,1404,518],{"class":169},[123,1406,182],{"class":144},[123,1408,523],{"class":140},[123,1410,526],{"class":169},[123,1412,182],{"class":144},[123,1414,568],{"class":140},[123,1416,571],{"class":144},[123,1418,501],{"class":228},[123,1420,232],{"class":144},[123,1422,1423,1425,1427,1429,1431,1433,1435,1437,1439,1441,1443,1445,1447,1449,1451,1453],{"class":125,"line":578},[123,1424,498],{"class":144},[123,1426,501],{"class":228},[123,1428,504],{"class":144},[123,1430,507],{"class":228},[123,1432,510],{"class":169},[123,1434,182],{"class":144},[123,1436,515],{"class":140},[123,1438,518],{"class":169},[123,1440,182],{"class":144},[123,1442,523],{"class":140},[123,1444,526],{"class":169},[123,1446,182],{"class":144},[123,1448,605],{"class":140},[123,1450,608],{"class":144},[123,1452,501],{"class":228},[123,1454,232],{"class":144},[123,1456,1457,1459,1461,1463,1465,1467,1469,1471,1473,1475,1477,1479,1481,1483,1485,1487],{"class":125,"line":615},[123,1458,498],{"class":144},[123,1460,501],{"class":228},[123,1462,504],{"class":144},[123,1464,507],{"class":228},[123,1466,510],{"class":169},[123,1468,182],{"class":144},[123,1470,515],{"class":140},[123,1472,518],{"class":169},[123,1474,182],{"class":144},[123,1476,523],{"class":140},[123,1478,526],{"class":169},[123,1480,182],{"class":144},[123,1482,642],{"class":140},[123,1484,645],{"class":144},[123,1486,501],{"class":228},[123,1488,232],{"class":144},[123,1490,1491,1493,1495],{"class":125,"line":652},[123,1492,419],{"class":144},[123,1494,482],{"class":228},[123,1496,232],{"class":144},[123,1498,1499,1501,1503,1505,1507,1509,1511,1513,1515,1517,1519,1521,1523],{"class":125,"line":661},[123,1500,225],{"class":144},[123,1502,501],{"class":228},[123,1504,504],{"class":144},[123,1506,507],{"class":228},[123,1508,510],{"class":169},[123,1510,182],{"class":144},[123,1512,676],{"class":140},[123,1514,454],{"class":169},[123,1516,182],{"class":144},[123,1518,683],{"class":140},[123,1520,686],{"class":144},[123,1522,501],{"class":228},[123,1524,232],{"class":144},[123,1526,1527],{"class":125,"line":693},[123,1528,430],{"emptyLinePlaceholder":429},[123,1530,1531,1533,1535,1537,1539,1541,1543,1545],{"class":125,"line":698},[123,1532,225],{"class":144},[123,1534,11],{"class":228},[123,1536,454],{"class":169},[123,1538,182],{"class":144},[123,1540,709],{"class":140},[123,1542,712],{"class":144},[123,1544,11],{"class":228},[123,1546,232],{"class":144},[123,1548,1549,1551,1553,1555,1557,1559,1561,1563],{"class":125,"line":719},[123,1550,225],{"class":144},[123,1552,724],{"class":228},[123,1554,454],{"class":169},[123,1556,182],{"class":144},[123,1558,731],{"class":140},[123,1560,734],{"class":144},[123,1562,724],{"class":228},[123,1564,232],{"class":144},[123,1566,1568],{"class":125,"line":1567},22,[123,1569,430],{"emptyLinePlaceholder":429},[123,1571,1573,1575,1578],{"class":125,"line":1572},23,[123,1574,225],{"class":144},[123,1576,1577],{"class":228},"script",[123,1579,232],{"class":144},[123,1581,1583],{"class":125,"line":1582},24,[123,1584,1585],{"class":910},"  // 1. Fields\n",[123,1587,1589,1591,1593,1595,1597],{"class":125,"line":1588},25,[123,1590,863],{"class":129},[123,1592,134],{"class":133},[123,1594,137],{"class":129},[123,1596,141],{"class":140},[123,1598,145],{"class":144},[123,1600,1602,1604,1606,1608,1610],{"class":125,"line":1601},26,[123,1603,863],{"class":129},[123,1605,153],{"class":133},[123,1607,137],{"class":129},[123,1609,158],{"class":140},[123,1611,145],{"class":144},[123,1613,1615,1618,1620,1622,1624,1626,1628],{"class":125,"line":1614},27,[123,1616,1617],{"class":144},"  document.",[123,1619,170],{"class":169},[123,1621,173],{"class":144},[123,1623,176],{"class":140},[123,1625,179],{"class":144},[123,1627,182],{"class":129},[123,1629,185],{"class":144},[123,1631,1633],{"class":125,"line":1632},28,[123,1634,430],{"emptyLinePlaceholder":429},[123,1636,1638],{"class":125,"line":1637},29,[123,1639,1640],{"class":910},"  // 2. Instructions: send them to the worker app on load\n",[123,1642,1644,1647,1649],{"class":125,"line":1643},30,[123,1645,1646],{"class":144},"  window.top.",[123,1648,769],{"class":169},[123,1650,772],{"class":144},[123,1652,1654,1657,1659],{"class":125,"line":1653},31,[123,1655,1656],{"class":144},"    type: ",[123,1658,1069],{"class":140},[123,1660,782],{"class":144},[123,1662,1664,1667],{"class":125,"line":1663},32,[123,1665,1666],{"class":144},"    instructions: ",[123,1668,1079],{"class":140},[123,1670,1672],{"class":125,"line":1671},33,[123,1673,1674],{"class":140},"      \u003Ch3>How to answer\u003C/h3>\n",[123,1676,1678],{"class":125,"line":1677},34,[123,1679,1680],{"class":140},"      \u003Cp>Pick what the photo is mostly about. If two subjects look equally important, pick the larger one.\u003C/p>\n",[123,1682,1684],{"class":125,"line":1683},35,[123,1685,1686],{"class":140},"      \u003Cp>Tick \u003Cstrong>blurry or broken\u003C/strong> only if you can't tell what the image shows.\u003C/p>\n",[123,1688,1690],{"class":125,"line":1689},36,[123,1691,1692],{"class":140},"    `\n",[123,1694,1696,1698,1700],{"class":125,"line":1695},37,[123,1697,1019],{"class":144},[123,1699,806],{"class":140},[123,1701,809],{"class":144},[123,1703,1705],{"class":125,"line":1704},38,[123,1706,430],{"emptyLinePlaceholder":429},[123,1708,1710],{"class":125,"line":1709},39,[123,1711,1712],{"class":910},"  // 3. Answer: check the input, then submit\n",[123,1714,1716,1718,1720,1722,1724,1726,1728,1730,1732,1734,1736],{"class":125,"line":1715},40,[123,1717,1617],{"class":144},[123,1719,170],{"class":169},[123,1721,173],{"class":144},[123,1723,731],{"class":140},[123,1725,841],{"class":144},[123,1727,844],{"class":169},[123,1729,173],{"class":144},[123,1731,849],{"class":140},[123,1733,852],{"class":144},[123,1735,855],{"class":129},[123,1737,858],{"class":144},[123,1739,1741,1744,1746,1748,1750,1752,1754,1756],{"class":125,"line":1740},41,[123,1742,1743],{"class":129},"    const",[123,1745,866],{"class":133},[123,1747,137],{"class":129},[123,1749,871],{"class":144},[123,1751,874],{"class":169},[123,1753,173],{"class":144},[123,1755,879],{"class":140},[123,1757,809],{"class":144},[123,1759,1761,1763,1765,1767,1769,1771,1773,1775],{"class":125,"line":1760},42,[123,1762,1743],{"class":129},[123,1764,888],{"class":133},[123,1766,137],{"class":129},[123,1768,871],{"class":144},[123,1770,170],{"class":169},[123,1772,173],{"class":144},[123,1774,683],{"class":140},[123,1776,901],{"class":144},[123,1778,1780,1783,1785,1787,1789,1791,1793],{"class":125,"line":1779},43,[123,1781,1782],{"class":129},"    if",[123,1784,919],{"class":144},[123,1786,922],{"class":129},[123,1788,925],{"class":144},[123,1790,928],{"class":129},[123,1792,931],{"class":129},[123,1794,934],{"class":144},[123,1796,1798,1801,1803,1805,1807,1809,1811,1813],{"class":125,"line":1797},44,[123,1799,1800],{"class":144},"      document.",[123,1802,170],{"class":169},[123,1804,173],{"class":144},[123,1806,709],{"class":140},[123,1808,948],{"class":144},[123,1810,182],{"class":129},[123,1812,953],{"class":140},[123,1814,145],{"class":144},[123,1816,1818,1821],{"class":125,"line":1817},45,[123,1819,1820],{"class":129},"      return",[123,1822,145],{"class":144},[123,1824,1826],{"class":125,"line":1825},46,[123,1827,1828],{"class":144},"    }\n",[123,1830,1832,1835,1837],{"class":125,"line":1831},47,[123,1833,1834],{"class":144},"    window.parent.",[123,1836,769],{"class":169},[123,1838,772],{"class":144},[123,1840,1842,1845,1847],{"class":125,"line":1841},48,[123,1843,1844],{"class":144},"      task: ",[123,1846,731],{"class":140},[123,1848,782],{"class":144},[123,1850,1852,1855,1857,1859,1861,1863],{"class":125,"line":1851},49,[123,1853,1854],{"class":144},"      values: { imageId: imageId, subject: choice ",[123,1856,1002],{"class":129},[123,1858,1005],{"class":144},[123,1860,1008],{"class":129},[123,1862,1011],{"class":133},[123,1864,1014],{"class":144},[123,1866,1868,1871,1873],{"class":125,"line":1867},50,[123,1869,1870],{"class":144},"    }, ",[123,1872,806],{"class":140},[123,1874,809],{"class":144},[123,1876,1878],{"class":125,"line":1877},51,[123,1879,1880],{"class":144},"  });\n",[123,1882,1884,1886,1888],{"class":125,"line":1883},52,[123,1885,419],{"class":144},[123,1887,1577],{"class":228},[123,1889,232],{"class":144},[37,1891],{},[40,1893,1895],{"id":1894},"try-it-in-the-console","Try it in the console",[11,1897,741,1898,1901],{},[29,1899,34],{"href":31,"rel":1900},[33]," is the quickest way to test a template. Sign up there to get an API key, then:",[48,1903,1904,1914],{},[51,1905,1906,1907,1910,1911,203],{},"Open the ",[15,1908,1909],{},"Templates"," tab and press ",[15,1912,1913],{},"+ Create a template",[51,1915,1916],{},"Give it a name and paste in the HTML.",[11,1918,1919],{},[98,1920],{"alt":1921,"src":1922,"className":1923},"The console's Submit custom template form, with the template name filled in and the template HTML pasted into the HTML code box","/img/news/console-create-template.png",[1924],"screenshot",[48,1926,1927,1933],{"start":163},[51,1928,1929,1930,1932],{},"If your instructions aren't baked into the HTML, paste them into ",[15,1931,1127],{}," (option 2 above).",[51,1934,1935,1936,1939,1940,203],{},"Press ",[15,1937,1938],{},"Preview",". Swap the sample values for real ones, such as an actual image URL, and press ",[15,1941,1942],{},"Re-render",[11,1944,1945],{},[98,1946],{"alt":1947,"src":1948,"className":1949},"The console's template preview, with sample values for image_url and image_id filled in above the rendered task","/img/news/console-preview-template.png",[1924],[48,1951,1952],{"start":369},[51,1953,1954,1955,1958],{},"Open the instructions button in the preview header to check how they read. Then answer the task and press ",[15,1956,1957],{},"Submit",". The console shows exactly the result you'd get back from a real job.",[11,1960,1961],{},[98,1962],{"alt":1963,"src":1964,"className":1965},"The console preview after pressing Submit: a confirmation that nothing was posted or charged, the Answer as JSON, and the Result row exactly as the results API returns it","/img/news/console-preview-result.png",[1924],[48,1967,1968],{"start":389},[51,1969,1970,1971,203],{},"When you're happy with it, press ",[15,1972,1973],{},"Submit template",[11,1975,1976],{},"Your template is ready to use right away. Until our team approves it, the console marks it as unapproved:",[11,1978,1979],{},[98,1980],{"alt":1981,"src":1982,"className":1983},"The yellow caution banner the console shows on an unapproved template","/img/news/console-unapproved-banner.png",[1924],[11,1985,1986,1987,1990],{},"Workers see a similar caution note on its tasks. Tick ",[15,1988,1989],{},"Request team approval"," to have us review it. Any later edit counts as a new template and needs approval again, so finish testing first.",[37,1992],{},[40,1994,1996],{"id":1995},"run-a-job","Run a job",[11,1998,1999,2000,2003,2004,2007,2008,2011],{},"On the ",[15,2001,2002],{},"Create Job"," tab, pick your template in the job configuration and set a reward per task. The ",[15,2005,2006],{},"CSV data input"," section then shows the columns that template requires. Use ",[15,2009,2010],{},"Download CSV template"," there to get a CSV with those required columns already in its header row, then add your task data and paste the CSV:",[114,2013,2017],{"className":2014,"code":2015,"language":2016,"meta":119,"style":119},"language-csv shiki shiki-themes github-dark","image_id,image_url\nimg-001,https://example.com/cat.jpg\nimg-002,https://example.com/car.jpg\n","csv",[58,2018,2019,2027,2035],{"__ignoreMap":119},[123,2020,2021,2024],{"class":125,"line":126},[123,2022,2023],{"class":144},"image_id,",[123,2025,2026],{"class":129},"image_url\n",[123,2028,2029,2032],{"class":125,"line":148},[123,2030,2031],{"class":144},"img-001,",[123,2033,2034],{"class":129},"https://example.com/cat.jpg\n",[123,2036,2037,2040],{"class":125,"line":163},[123,2038,2039],{"class":144},"img-002,",[123,2041,2042],{"class":129},"https://example.com/car.jpg\n",[11,2044,2045],{},[98,2046],{"alt":2047,"src":2048,"className":2049},"The console's Create Job tab: job type, job configuration with the template, reward and job name, CSV data input listing the template's required columns, and the cost estimate with the Create job button","/img/news/console-create-job.png",[1924],[11,2051,2052,2053,1008],{},"Then choose a mode under ",[15,2054,2055],{},"Job type",[2057,2058,2059,2074],"table",{},[2060,2061,2062],"thead",{},[2063,2064,2065,2068,2071],"tr",{},[2066,2067],"th",{},[2066,2069,2070],{},"CSV mode",[2066,2072,2073],{},"Survey mode",[2075,2076,2077,2089,2100],"tbody",{},[2063,2078,2079,2083,2086],{},[2080,2081,2082],"td",{},"Each row gets",[2080,2084,2085],{},"1 answer",[2080,2087,2088],{},"Answers from N different workers",[2063,2090,2091,2094,2097],{},[2080,2092,2093],{},"Cost",[2080,2095,2096],{},"reward × rows",[2080,2098,2099],{},"reward × rows × N",[2063,2101,2102,2105,2108],{},[2080,2103,2104],{},"Best for",[2080,2106,2107],{},"Labelling, tagging, transcription: one right answer per item",[2080,2109,2110],{},"Opinions and preferences, or several answers per item to take a majority vote",[11,2112,2113,2114,2117],{},"For surveys, tick ",[15,2115,2116],{},"Restrict each worker to one task"," so that each row's answers really come from different people. Leave it off in CSV mode, where it limits the whole job to 25 rows.",[11,2119,2120,2121,2126],{},"The cost is charged when the job starts. If you cancel, you get back whatever hasn't been completed. New accounts start with no credits, so ask us on ",[29,2122,2125],{"href":2123,"rel":2124},"https://discord.gg/effectai",[33],"Discord"," for a top-up.",[37,2128],{},[40,2130,2132],{"id":2131},"get-your-results","Get your results",[11,2134,2135,2136,2139],{},"Results show up on the ",[15,2137,2138],{},"Jobs"," tab as workers finish, and you can download them as a CSV. Each result pairs the row you sent with the answer your page submitted:",[114,2141,2145],{"className":2142,"code":2143,"language":2144,"meta":119,"style":119},"language-json shiki shiki-themes github-dark","{\n  \"input\": { \"image_id\": \"img-002\", \"image_url\": \"https://example.com/car.jpg\" },\n  \"result\": \"{\\\"task\\\":\\\"submit\\\",\\\"values\\\":{\\\"imageId\\\":\\\"img-002\\\",\\\"subject\\\":\\\"vehicle\\\",\\\"unclear\\\":false}}\"\n}\n","json",[58,2146,2147,2152,2181,2265],{"__ignoreMap":119},[123,2148,2149],{"class":125,"line":126},[123,2150,2151],{"class":144},"{\n",[123,2153,2154,2157,2160,2163,2165,2168,2170,2173,2175,2178],{"class":125,"line":148},[123,2155,2156],{"class":133},"  \"input\"",[123,2158,2159],{"class":144},": { ",[123,2161,2162],{"class":133},"\"image_id\"",[123,2164,246],{"class":144},[123,2166,2167],{"class":140},"\"img-002\"",[123,2169,252],{"class":144},[123,2171,2172],{"class":133},"\"image_url\"",[123,2174,246],{"class":144},[123,2176,2177],{"class":140},"\"https://example.com/car.jpg\"",[123,2179,2180],{"class":144}," },\n",[123,2182,2183,2186,2188,2191,2194,2197,2199,2201,2203,2206,2208,2211,2213,2215,2217,2220,2222,2224,2226,2228,2230,2233,2235,2237,2239,2242,2244,2246,2248,2251,2253,2255,2257,2260,2262],{"class":125,"line":163},[123,2184,2185],{"class":133},"  \"result\"",[123,2187,246],{"class":144},[123,2189,2190],{"class":140},"\"{",[123,2192,2193],{"class":133},"\\\"",[123,2195,2196],{"class":140},"task",[123,2198,2193],{"class":133},[123,2200,1008],{"class":140},[123,2202,2193],{"class":133},[123,2204,2205],{"class":140},"submit",[123,2207,2193],{"class":133},[123,2209,2210],{"class":140},",",[123,2212,2193],{"class":133},[123,2214,815],{"class":140},[123,2216,2193],{"class":133},[123,2218,2219],{"class":140},":{",[123,2221,2193],{"class":133},[123,2223,819],{"class":140},[123,2225,2193],{"class":133},[123,2227,1008],{"class":140},[123,2229,2193],{"class":133},[123,2231,2232],{"class":140},"img-002",[123,2234,2193],{"class":133},[123,2236,2210],{"class":140},[123,2238,2193],{"class":133},[123,2240,2241],{"class":140},"subject",[123,2243,2193],{"class":133},[123,2245,1008],{"class":140},[123,2247,2193],{"class":133},[123,2249,2250],{"class":140},"vehicle",[123,2252,2193],{"class":133},[123,2254,2210],{"class":140},[123,2256,2193],{"class":133},[123,2258,2259],{"class":140},"unclear",[123,2261,2193],{"class":133},[123,2263,2264],{"class":140},":false}}\"\n",[123,2266,2267],{"class":125,"line":337},[123,2268,2269],{"class":144},"}\n",[11,2271,2272,2273,2276,2277,203],{},"The answer is inside ",[58,2274,2275],{},"result",", under ",[58,2278,815],{},[11,2280,2281,2282,841],{},"You can check this shape before posting a job by submitting a task in the console preview (step 5 of ",[29,2283,1895],{"href":2284},"#try-it-in-the-console",[37,2286],{},[40,2288,2290],{"id":2289},"get-involved","Get Involved",[11,2292,2293],{},"Want to join the next phase of Effect AI?",[11,2295,2296,2299,2300,2305],{},[15,2297,2298],{},"Developers & Researchers:"," ",[29,2301,2304],{"href":2302,"rel":2303},"https://tally.so/r/xXgAyr",[33],"Join the API early access"," to get test credits, or collaborate with us to build or validate high-quality datasets for your AI models and research initiatives.",[11,2307,2308,2311],{},[15,2309,2310],{},"Organizations:"," Partner with Effect AI on responsible, mission-aligned data initiatives across a wide range of domains, from AI development to social impact.",[37,2313],{},[229,2315,2316],{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":119,"searchDepth":148,"depth":148,"links":2318},[2319,2320,2327,2328,2329,2330],{"id":42,"depth":148,"text":43},{"id":90,"depth":148,"text":91,"children":2321},[2322,2323,2324,2325,2326],{"id":108,"depth":163,"text":109},{"id":206,"depth":163,"text":207},{"id":752,"depth":163,"text":753},{"id":1034,"depth":163,"text":1035},{"id":1131,"depth":163,"text":1132},{"id":1894,"depth":148,"text":1895},{"id":1995,"depth":148,"text":1996},{"id":2131,"depth":148,"text":2132},{"id":2289,"depth":148,"text":2290},"2026-10-06","How Effect AI task templates work, a worked example you can copy, and how to test it in the API console and run it as a job.","md","/img/news/news-header-task-templates.png",{"src":2334},{"head":2337},{"meta":2338},[2339,2342,2345],{"name":2340,"content":2341},"keywords","Effect AI, Effect API, API console, task templates, HTML templates, microtasks, human in the loop, data labeling, developers, guide",{"name":2343,"content":2344},"author","Miguel - Effect.AI",{"name":2346,"content":2347},"copyright","© 2026 Effect.AI","/news/build-your-own-task-template",{"title":5,"description":2332},"news/build-your-own-task-template","O8_Szg_SF-sQ2CbXJFYD79aL0fRIqd4cwBUII_FZi8s",1791349977783]