31:T663,blockModule = { const blockText = "Do not block the box. Do not block driveway. Do not block intersection. Do not block door, keep this area clear at all times. Do not block your therapist’s number. Do not block your ex on IG. Do not block fire extinguisher, especially while you sleep. Do not block gate. Do not block area in front of electrical panel. Do not block emergency exit. Do not block the man who keeps calling you on WhatsApp everyday. Do not block island. Do not block chain. Do not block nerve. Do not block coronary artery. Do not block webpage. Do not block the drain in the sink. Do not block address. Do not block third-party cookies. Do not block third-party cookies in Incognito mode. Do not block all cookies (not recommended)" const blockSentences = blockText.split(". "); //create canvas let canvas = document.createElement("canvas"); //console.log(target.clientWidth); canvas.width = 1000; canvas.height = 650; const ctx = canvas.getContext("2d"); for(let i = 0; i { console.log("Voices changed", voices); } } }) .then(data => { console.log("Speech is ready", data); }) .catch(e => { console.error("An error occured while initializing : ", e); }); display.addEventListener("click", function(){ if(!isSpeaking) { automatedVoices(speech, sentences); isSpeaking = true; } }); return wrapper; }34:T47e,automatedVoices = function(speech, sentences) { const text = speech.hasBrowserSupport() ? "Hurray, your browser supports speech synthesis" : "Your browser does NOT support speech synthesis. Try using Chrome of Safari instead !"; console.log(text); try { speech.setVoice("Oliver"); } catch(error) { // Not everyone support Oliver } let s = sentences.pop() + "?"; const tts = async (s) => { //display document.getElementById("allowQuestionsDisplay").innerHTML = s; speech.speak({ text: s, listeners: { onend: () => { //https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance //console.log("End utterance") } } }).then(() => { if(sentences.length > 0) { s = sentences.pop() + "?"; tts(s); } else { document.getElementById("allowQuestionsDisplay").innerHTML = onAScale.innerHTML; document.querySelector("#page2 .button").classList.remove("deactivated"); } }).catch(e => { console.error("An error occurred :", e) }) } tts(s); }35:T739,acceptModule = { const text = "Give her a little time to accept the idea.Sometimes we have to accept change, if we want to move forward.Snuggling close, she lifted her face to accept his kiss.You must accept to visit our site. If you do accept we will only use one tiny cookie.They did not want to accept the mail-in ballots.You were ready to accept that fact already.It was still hard to accept what they had done.She did not accept the award.They did not accept the advertising.Please tell me if they ever accept me.He was not prepared to accept the burden.It's okay, Dusty, I'll accept that fate." const sentences = text.split("."); const left = document.createElement("div"); const right = document.createElement("div"); const middle = document.createElement("div"); left.id = "left"; left.setAttribute("style", "top:10px;position:absolute;text-align:right;right:54%;color:#333;"); middle.id = "middle"; middle.setAttribute("style", "font-weight:600;top:10px;position:absolute;left: 50%;transform: translate(-50%);"); right.id = "right"; right.setAttribute("style", "top:10px;position:absolute;left:54%;color:#333;"); for (let i = 0; i < sentences.length; i++) { const s = sentences[i]; if (s == "") continue; let parts = s.split("accept"); left.innerHTML += "
" + parts[0]; middle.innerHTML += "
accept"; right.innerHTML += "
" + parts[1]+ "."; } const w = document.createElement("div"); w.append(left); w.append(middle); w.append(right); w.id = "AcceptWrapper"; w.setAttribute("style", "position:relative;width:800px;height:400px; border: 2px solid black; border-radius: 10px; background-color:rgba(255,255,255,0.4); padding: 20px;"); // TODO: every one sec select one accept to turn red // setInterval(function(){ // }, 1000) return w; }36:Tc08,presenceModule = { let start = false; const wrapper = document.createElement("div"); const div = document.createElement("div"); div.id = "presence"; div.setAttribute("style","position:relative;border: 2px solid black; border-radius: 10px; background-color:rgba(255,255,255,0.4); padding: 20px; min-height:200px; width: 600px;font-size:16px; font-family: 'Source Serif Pro', serif;"); const mainText = document.createElement("div"); mainText.id = "mainText"; mainText.innerHTML = ""; mainText.setAttribute("style",""); div.append(mainText); const typingText = document.createElement("span"); typingText.id = "typingText"; typingText.innerHTML = ""; typingText.setAttribute("style","display:inline-block;"); div.append(typingText); const script = [ { "type": "typing", "text": "This site wants to know if you are present.", "delay": 7 }, { "type": "main", "text": "Your presence would be much appreciated.
Your presence would mean a lot to me.
Your presence would be an honor for us.
Your presence is requested for dinner and dancing.
Your presence is soothing.", "delay": 10 }, { "type": "typing", "text": "Your presence is requested here.", "delay": 7 },{ "type": "main", "text": "We request the presence of god.
We request the presence of meaning.
We request the presence of barbs.
We request the pleasure of your company.
We request the presence of the unforeseen.", "delay": 10 },{ "type": "typing", "text": "This site would like to request your presence at next Thursday’s staff meeting.", "delay": 9 },{ "type": "main", "text": "Ask when a site wants to know when you’re present.
Request assistance with online presence management.
Request assistance with online presence for small business.
Request overview of online presence importance.", "delay": 10 },{ "type": "typing", "text": "Click to view online presence checker." }, ] const update = function(idx) { const current = script[idx]; if(current.type === "typing") { document.getElementById("mainText").style.display = "none"; document.getElementById("typingText").style.display = "block"; typing(current.text); } else { document.getElementById("mainText").style.display = "block"; document.getElementById("typingText").style.display = "none"; const ele = document.getElementById(current.type + "Text"); ele.innerHTML = current.text; } if (idx < script.length-1) { //next setTimeout(function(){ update(++idx); }, current.delay*1000); } else { document.querySelector("#page9 .button").classList.remove("deactivated"); } } div.addEventListener("click", function(){ // onclick if(!start) { setTimeout(function(){ update(0); },1000); start = true; } }); wrapper.append(div); return wrapper; }37:[] 2f:{"title":"Modules","cells":[{"id":0,"value":"md`# Modules`","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"md`## Module Summary`","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"// TODO: replace with corresponding cell & button text\nmodules = [{\n cell: understandModule,\n button: \"I understand\"\n},{\n cell: allowModule,\n button: \"Allow\"\n},{\n cell: blockModule,\n button: \"Block\"\n},{\n cell: donottrackModule,\n button: \"Do not track\"\n},{\n cell: continueModule2,\n button: \"Continue\"\n},{\n cell: agreeModule,\n button: \"Agree\"\n},{\n cell: acceptModule,\n button: \"Accept\"\n},{\n cell: donotsellModule, \n button: \"Do not sell\"\n},{\n cell: presenceModule,\n button: \"Presence\"\n},{\n cell: wasthishelpfulModule2,\n button: \"Was this helpful?\"\n}];","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"md`## Block`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"md`## Understand`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"understandModule = {\n\n const generate = function() {\n return RiTa.grammar(understandRules).expand();\n }\n \n const poem = generate();\n let start = false;\n const wrapper = document.createElement(\"div\");\n let text = document.createElement(\"div\");\n let c = 1;\n text.setAttribute(\"counter\", c);\n text.id = \"understandText\";\n text.setAttribute(\"style\", \"color: #black; border: 2px solid black; border-radius: 10px; background-color:rgba(255,255,255,0.4); padding: 20px; width: 400px; height:200px;\");\n text.innerHTML = poem;\n \n \n let s = 3;\n \n const update = function() {\n setTimeout(function(){\n text.innerHTML = generate();\n s = text.innerHTML.length/40;\n if (c > 5) document.querySelector(\"#page1 .button\").classList.remove(\"deactivated\");\n update();\n text.setAttribute(\"counter\", ++c);\n }, s* 2000)\n }\n \n text.addEventListener(\"click\", function(){\n if(!start) {\n update();\n start = true;\n }\n });\n \n wrapper.append(text);\n return wrapper;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"md`## Allow`","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"onAScale = html`

On a scale of 1-10, how well would you say that this site knows you?
\nOn a scale of 1-10, how kind would you rate this site?
\nOn a scale of 1-10, how much do you like this site?
\nOn a scale of 1-10, how user-friendly is this site?
\nOn a scale of 1-10, how forward is this site?
\nOn a scale of 1-10, how invasive is this site?
\nOn a scale of 1-10, how overbearing is this site?
\nOn a scale of 1-10, how demanding is this site?
\nOn a scale of 1-10, how often do you access this site?
\nOn a scale of 1-10, how likely are you to recommend this site to your friends?
\nOn a scale of 1-10, how much would you say that you rely on this site?
\nOn a scale of 1-10, how accessible are the features on this site?
\nOn a scale of 1-10, how would you rate the design of this site?\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`## Accept`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"md`## Presence`","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"md`### Camera`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"video = html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"canvas = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":293,"value":"mutable capabilities = \"Waiting...\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"checkMediaDevices = {\n if (navigator.mediaDevices.getUserMedia) { \n navigator.mediaDevices.getUserMedia({video: true})\n .then(function(stream) {\n video.srcObject = stream;\n mutable capabilities = stream.getVideoTracks()[0].getCapabilities();\n })\n .catch(function(err0r) {\n mutable capabilities = \"No Video Camera\";\n });\n return \"OK\"\n }\n return \"navigator does not support mediaDevices\"\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"{\n // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas\n // TODO\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"md `## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"import {agreeModule, continueModule2, donotsellModule, donottrackModule, wasthishelpfulModule2} from \"@backandforth/modules-mm\"; ","pinned":true,"hidden":false,"mode":"ojs"},{"id":595,"value":"typing = string => {\n // based on https://observablehq.com/@efrymire/typing-animation\n d3.select(\"#typingText\")\n .selectAll(\".letter\")\n .data(Array.from(string))\n .join('span.letter')\n .attr('class', 'letter')\n .style('display', 'none')\n .text(d => d)\n .transition()\n .style('display', 'inline')\n .delay((d, i) => delay(i));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"delay = index => {\n const variability = 0.2;\n const speed = 0.95;\n const noise = Math.random() * variability * 1000;\n const standardDelay = index * (1 - speed) * 1000;\n return standardDelay + noise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"RiTa = require('rita');","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"md`### helper functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"getRandomInt = function(max) {\n return Math.floor(Math.random() * max);\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"function _init() {\n //tts example from https://observablehq.com/@khron/tts\n const speech = new Speech.default();\n speech\n .init({\n volume: 0.5,\n lang: \"en-GB\",\n rate: 1,\n pitch: 1,\n voice:'Alice',\n //'splitSentences': false,\n listeners: {\n onvoiceschanged: voices => {\n console.log(\"Voices changed\", voices);\n }\n }\n })\n .then(data => {\n console.log(\"Speech is ready\", data);\n //_addVoicesList(data.voices);\n //_prepareSpeakButton(speech);\n })\n .catch(e => {\n console.error(\"An error occured while initializing : \", e);\n });\n const text = speech.hasBrowserSupport()\n ? \"Hurray, your browser supports speech synthesis\"\n : \"Your browser does NOT support speech synthesis. Try using Chrome of Safari instead !\";\n //document.getElementById(\"support\").innerHTML = text;\n console.log(text)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"//https://www.npmjs.com/package/speak-tts\nSpeech = require('https://bundle.run/speak-tts@2.0.5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"placeHolder = html`

This is a place holder for module

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"md`\nNotes:\nrender functions should be defined as async function and called in another cell to avoid target is null issue.\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}