30:T520,description = md`PApTCHA, or: Partially Automated private Turing test to tell Computers and Humans Apart, takes the design elements from Google’s popular reCAPTCHA test (the Completely Automated Public Turing Test to tell Computers and Humans Apart) and turns it into a main-menu-meets-landing page for the collection of language artworks featured in the piece. Specifically, viewers visit these pieces by clicking on the individual squares in the PApTCHA interface. Once inside a page, viewers encounter a term or phrase that is commonly used in digital privacy contexts online. Some of these include: “accept,” “agree,” “allow,” “block,” “continue,” “do not sell,” “do not track,” “I understand,” “your presence on this site,” and “was this information helpful?” The theoretical foundation for PApTCHA begins with a process of decontextualization into re-contextualization. By pairing UI terms with their IRL linguistic counterparts, the project engages in a critique of digital privacy settings. In doing so, PApTCHA aims to expose the ways users opt to forgo a certain level of privacy in order to visit their preferred sites and to have uninterrupted experiences online and to undercut the notion that one has agency or choice when “managing” these settings.`31:Tdce,initListeners = function() { //components transitions let visitHistory = []; const threshold = 8; const animateDiagram = function() { setTimeout(function(){ if (visitHistory.length > 0) { const idx = visitHistory.pop(); $("#captchaIndiagram td[tabIndex=" + idx +"]").addClass("visited"); animateDiagram(); } else { $(".diagramDiv .diagramButton").addClass("visited"); $(".diagramDiv .captchaInstruction").text("Thank you for providing your info. \n You have been verified."); } }, 800); } // initial Stage $('#page1 .button, #page2 .button, #page4 .button, #page5 .button, #page6 .button, #page9 .button, #page10 .button').addClass("deactivated"); $("#captchaHolder").click(function(){ $(this).addClass("recaptcha-checkbox-checked") .removeClass("recaptcha-checkbox-unchecked"); setTimeout(function(){ $("#captchaWrapper").removeClass("current"); $("#game").addClass("current"); }, 1000); $("#debug").text("captcha Clicked"); }); // dynamic click listeners $('#formHolder').on('click','#submitForm',function(){ var valid = true; $('#formHolder').find('input').each (function() { if (this.value === '') { valid = false; } }); if(valid) { $("#captchaHolder").show(); // $("#submitForm").delay(500).hide(0); $('#formHolder').removeClass("review"); } else { $('#formHolder').addClass("review"); } }); $('#game').on('click','.rc-imageselect-tile:not(.visited)',function(){ const idx = this.tabIndex; //all tabindex addclass visited $(".rc-imageselect-tile[tabIndex=" +idx +"]").addClass("visited"); $("#page" + idx).addClass("current"); if (idx == 2) { //console.log("auto play voice"); $("#page" + idx + " #allowQuestionsDisplay").click(); } else if (idx == 9){ $("#page" + idx + " #presence").click(); } else if (idx == 1){ $("#page" + idx + " #understandText").click(); } $("#debug").text("tile Clicked " + idx); if (visitHistory.indexOf(idx) < 0) visitHistory.push(idx); if (visitHistory.length >= 10) $(".verify-button-holder").addClass("active"); }); $('#game').on('click','.verify-button-holder.active #recaptcha-verify-button',function(){ $("#debug").text("end game"); $("#game").removeClass("current"); $("#diagramHolder").addClass("current"); visitHistory.reverse(); animateDiagram(); }); // Button activation // page 10 $('#pages').on('click','#page10 button',function(){ const c = $('#helpfulText').attr("counter"); if(c >= threshold) { $('#page10 .button').removeClass("deactivated"); } }); // page 6 $('#pages').on('click','#page6 ul li',function(){ const checkboxes = $('#page6 input[type=checkbox]:checked').length; if(checkboxes >= threshold) { $('#page6 .button').removeClass("deactivated"); } }); // page 5 $('#pages').on('click','#page5 button',function(){ const c = $('#continueText').attr("counter"); if(c >= threshold) { $('#page5 .button').removeClass("deactivated"); } }); $('#pages').on('input','#page4 input',function(){ $('#page4 .button').removeClass("deactivated"); }); $('#pages').on('click','.button:not(.deactivated)',function(){ $(this).parent().removeClass("current"); $("#debug").text("page button Clicked"); }); }32:Taaf,customStyle = html` `33:[{"id":"99e487dfa87f81f951fa6243a9164cc17dbdd35ae9e01d8d8131147dac0f806dd10c0780ccd4757b36dc9b05e4ceb722988fbd83a663a02f5fe37f91fea88ce2","href":"https://static.observableusercontent.com/files/99e487dfa87f81f951fa6243a9164cc17dbdd35ae9e01d8d8131147dac0f806dd10c0780ccd4757b36dc9b05e4ceb722988fbd83a663a02f5fe37f91fea88ce2","name":"PApTCHA-background-bg.png","type":"image/png","lastModified":1621015980061.466,"size":2372148},{"id":"58772672075988e80125b0a5534a9d6d900932bbd5a69e300b544bdc9149d9d21b4cf96f813d8a19fb33001d1e00446183a6170e3bcb48569f08259021247e82","href":"https://static.observableusercontent.com/files/58772672075988e80125b0a5534a9d6d900932bbd5a69e300b544bdc9149d9d21b4cf96f813d8a19fb33001d1e00446183a6170e3bcb48569f08259021247e82","name":"PApTCHA-background-bg.jpg","type":"image/jpeg","lastModified":1621083460390.485,"size":817327}] 2e:{"title":"PApTCHA","cells":[{"id":0,"value":"html`

PApTCHA

MEREDITH MORRAN & QIANXUN CHEN, MAY 2021

${LAOB} / THE WORK

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"targetCell = html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"init = {\n renderTargetCell(initListeners);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"renderTargetCell = function(callback) {\n // render everything to targetCell\n renderElement(\"#formHolder\", form);\n renderElement(\"#captchaHolder\", notRobot);\n renderElement(\"#game\", game);\n // Note: sometimes visit history doesn't work as expected in cells\n renderPages();\n renderElement(\"#diagramHolder\", diagram);\n callback();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"laob_captchaGameStyle = captchaGameStyle","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"md `## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"html`Debug Console:\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"import { jQuery as $ } from \"@ddspog/useful-libs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { form, notRobot, game, captchaGameStyle, diagram, renderElement, renderPages} from \"@backandforth/components\"; // import from public notebook","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"import { LAOB, laob_notebook_css } from \"@laob/imports\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"laob_notebook_css","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}