31:T4c2,// Special arg suffixes like _json, _md, _html are converted to real objects function reifyAttributes(args) { const reifyAttribute = ([k, v]) => { k = k.trim() if (k.endsWith("_json")) { return [k.replace(/_json$/, ''), Array.isArray(v) ? v.map(v => reifyAttributes(JSON.parse("(" + v + ")"))) : reifyAttributes(JSON.parse("(" + v + ")"))] } if (k.endsWith("_eval")) { return [k.replace(/_eval$/, ''), Array.isArray(v) ? v.map(v => reifyAttributes(eval("(" + v + ")"))) : reifyAttributes(eval("(" + v + ")"))] } if (k.endsWith("_js")) { return [k.replace(/_js$/, ''), Array.isArray(v) ? v.map(v => reifyAttributes(eval("(" + v + ")"))) : reifyAttributes(eval("(" + v + ")"))] } if (k.endsWith("_md")) { return [k.replace(/_md$/, ''), md([v])] } return [k, v] } if (Array.isArray(args)) return args.map(arg => reifyAttributes(arg)); else if (typeof args === 'object') return Object.fromEntries(Object.entries(args).map(reifyAttribute)) else return args } 32:T654,createQuestion = (q, index, options) => { const args = reifyAttributes(q); function createControl() { try { if (Object.keys(args).length == 0 || (Object.keys(args).length == 1 && args[""] == "")) { return htl.html` ` } if (args.content || args.md) { return md`${args.content || args.md}` } if (args.type === 'checkbox') { return checkbox({ options: [args.title], ...args }) } if (args.type === 'textarea') { return textarea({ ...args }) } if (args.type === 'radio') { return radio({ ...args }) } if (args.type === 'number') { return number({ ...args }) } if (args.type === 'table') { return table({ ...args }) } if (args.type === 'file_attachment') { return file_attachment({ ...args, putFile: options.putFile, getFile: options.getFile, }) } if (args.type === 'summary') { return summary({ ...args }) } if (args.type === 'aggregate') { return aggregateSummary({ ...args }) } } catch (err) { console.log("Error creating question for ", q, index, options) console.log(err) } return htl.html`

${index}. ${JSON.stringify(q)}

` } const control = createControl(); const logic = questionWrapper({ control }); logic.args = args; return logic }33:Tf08,function table({ value = {}, title = undefined, user_rows = false, columns = [], rows = [], grandTotalLabel = "units", grandTotal, caption = undefined } = {}) { const total = textNodeView() const subtotals = columns.reduce((acc, c) => { acc[c.key] = textNodeView() return acc; }, {}); const rowBuilder = (row) => { const labelInput = Inputs.text({value: row.label, placeholder: row.placeholder}); const removeRow = (key) => { console.log("DELETE ROW", table.value) table.value = Object.fromEntries(Object.entries(table.value) .filter(([id, row]) => row.label !== key)); table.dispatchEvent(new Event('input', {bubbles: true})); } const deleteBtn = Inputs.button('Delete', { reduce: () => removeRow(labelInput.value), disabled: !labelInput.value }); const deleteBtnEl = deleteBtn.querySelector('button'); deleteBtnEl.classList.add('secondary-button'); if (row.onEnterPressed) { labelInput.addEventListener('keyup', (evt) => { if (evt.keyCode === 13) { row.onEnterPressed(evt); } }); } // if (user_rows) { // If user editable rows // labelInput.addEventListener('keyup', (evt) => { // // BACKSPACE // if (evt.keyCode === 8 && labelInput.value.length == 0) { // removeRow(labelInput.value) // } // }); // } return view` ${user_rows ? ['label', labelInput] : md`${row.label}`} ${['...', Object.fromEntries(columns.map( column => [column.key, view`${['...', htl.html``]}`]))]} ${user_rows ? view`${deleteBtn}` : ''} ` } const newRow = cautious((done) => { return rowBuilder({ placeholder: "add a new row", onEnterPressed: (evt) => { table.value = { ...table.value, [id()]: newRow.value } newRow.value.label = "" table.dispatchEvent(new Event('input', {bubbles: true})) done(evt); } }); }, {nospan: true}); let table = view`

${title}

${columns.map(column => view``)} ${['...', {}, rowBuilder]} ${user_rows ? newRow : ''} ${columns[0].total ? view` ${columns.map(c => view``)} ` : null} ${grandTotal ? view`` : null}

	${column.label}
Sub-Totals:	${subtotals[c.key]} ${c.total}
${grandTotal}	${total} ${grandTotalLabel}

${caption}

` // Set rows from static settings table.value = Object.fromEntries(rows.map(row => [row.key, row])) // Also set rows from dynamic value if (Object.keys(value).length > 0 && user_rows) { table.value = value } function recomputeTotals() { let totalSum = 0; Object.keys(subtotals).forEach(k => { let sum = 0; Object.keys(table.value).forEach(key => { sum += Number.parseInt(table.value[key][k]) }) subtotals[k].value = sum totalSum += sum }) total.value = totalSum; } table.addEventListener('input', () => { recomputeTotals() }) recomputeTotals() return table }34:T4da,viewof exampleTable = table({ value: { board: { w: 10, m:1, unknown: 3, } }, title: "Workforce Gender Data", columns: [ {key: "w", label:"Women", total: "women"}, {key: "m", label:"Men", total: "male"}, {key: "unknown", label: "No Data", total: "no data"} ], rows: [ {key: "board", label: "Board"}, {key: "management", label: "Management"}, {key: "tech", label: "Technical / Engineering Staff"}, {key: "staff", label: "Non-Technical Staff"}, {key: "admin", label: "Administrative / Support Staff"}, {key: "customerservice", label: "Customer Service Staff"}, {key: "other", label: "Other Staff"}, {key: "day", label: "Non-Contractual/Informal Day Workers
(e.g., for food preparation, laundry, cleaners)"} ], grandTotal: "Total Workforce:", grandTotalLabel: htl.html`
people`, caption: md`_Please enumerate the sex distribution and number of persons with disabilities in your workforce—ensuring to avoid double counting. If you find that this format does not adequately reflect your organization, please submit your data separately to ADB. If you have information for multiple years, please also submit separately. ._` })35:T67c,file_attachment = (options) => { const row = file => view`

${['name', textNodeView(file.name)]} ${download(async () => { return new Blob( [await options.getFile(file.name)], {type: "*/*"} ) }, file.name, "Retrieve")}` let ui = view`

Existing files

${['uploads', [], row]} ${viewroutine(async function*() { while (true) { const filesView = file({ ...options, multiple: true }); yield* ask(filesView); // A bug with file means files have to be collected from a nested value, rather than the result of ask. const toUpload = filesView.input.files; let uploaded = false; const uploads = [...toUpload].map(async file => { await options.putFile(file.name, await file.arrayBuffer()) console.log("push", file.name) ui.value.uploads = _.uniqBy(ui.value.uploads.concat({name: file.name}), 'name'); ui.dispatchEvent(new Event('input', {bubbles: true})) return; }) Promise.all(uploads).then(() => uploaded = true); while (!uploaded) { yield md`uploading .` await new Promise(resolve => setTimeout(resolve, 100)); yield md`uploading ..` await new Promise(resolve => setTimeout(resolve, 100)); yield md`uploading ...` await new Promise(resolve => setTimeout(resolve, 100)); } } }) }

`; // Initial list contents ui.value.uploads = options?.value?.uploads || []; return ui; }36:T515,radio = (args) => { const base = radioBase(args || {}); const radios = base.querySelectorAll('input[type=radio]'); const buttonClass = "[ secondary-button ][ m2 ]"; const buttonInactiveClass = "dn"; const button = html``; base.dataset.formType = "clearable-radio"; const clearHandler = (e) => { // Hide clear button button.classList.add(buttonInactiveClass); Array.from(radios).forEach(r => { r.checked = false }) base.value = undefined; base.dispatchEvent(new Event('input', {bubbles: true})) } const inputChangeHandler = (e) => { if (base.value !== undefined) { // Show clear button button.classList.remove(buttonInactiveClass); } } button.addEventListener('click', clearHandler); base.addEventListener('input', inputChangeHandler); invalidation.then(() => { base.removeEventListener('input', inputChangeHandler); button.removeEventListener('click',clearHandler) }); const labels = base.querySelectorAll('label'); const lastLabel = Array.from(labels)[labels.length - 1]; if (lastLabel && lastLabel.parentNode) { lastLabel.parentNode.insertBefore(button, lastLabel.nextSibling); } return base; }37:T1078,checkbox = (options) => { const allValues = options.options.map(o => o.value) if (options.includeNoneOption) { options.options.unshift({ value: "NONE", label: options.includeNoneOption.label || (typeof options.includeNoneOption === 'string' ? options.includeNoneOption : "None of the below."), score: options.includeNoneOption.score }) } if (options.includeAllOption) { options.options.push({ value: "ALL", label: options.includeAllOption.label || (typeof options.includeAllOption === 'string' ? options.includeAllOption : "All of the above."), score: options.includeAllOption.score}) } const base = checkboxBase(options); const ui = view`

${['...', base]}

` const form = ui.querySelector("form") base.dataset.formType = "checkbox-plus-plus"; let allSelected = (options.value || []).includes("ALL"); let noneSelected = (options.value || []).includes("NONE"); base.addEventListener('input', evt => { console.log(evt, evt.target.elements, allValues) // If all the values are selected ALL should be too if (evt.target.value.includes('ALL') && !allSelected) { console.log("A") // User ticks ALL allSelected = true allValues.forEach(v => { const input = form.querySelector(`input[value='${v}']`) input.checked = true }) form.querySelector(`input[value=NONE]`).checked = false; form.dispatchEvent(new Event('change', {bubbles:true})) evt.stopPropagation() } else if (!evt.target.value.includes('ALL') && allSelected) { console.log("B") // User unticks ALL allSelected = false allValues.forEach(v => { const input = form.querySelector(`input[value='${v}']`) input.checked = false }) form.dispatchEvent(new Event('change', {bubbles:true})) evt.stopPropagation() } else if (evt.target.value.includes('ALL') && allSelected && !allValues.every(v => evt.target.value.includes(v))) { console.log("C") // An unticked option exists while ALL was ticked (so ALL should untick) allSelected = false const input = form.querySelector(`input[value=ALL]`) input.checked = false input.dispatchEvent(new Event('change', {bubbles:true})) evt.stopPropagation() } else if (!evt.target.value.includes('ALL') && !allSelected && allValues.every(v => evt.target.value.includes(v))) { console.log("D") // All options are ticked while ALL was unticked (so ALL should tick) allSelected = true const input = form.querySelector(`input[value=ALL]`) input.checked = true input.dispatchEvent(new Event('change', {bubbles:true})) evt.stopPropagation() } else if (evt.target.value.includes('NONE') && !noneSelected) { console.log("E") // User ticks NONE (=> all options should untick) noneSelected = true allValues.forEach(v => { const input = form.querySelector(`input[value='${v}']`) input.checked = false }) form.querySelector(`input[value=ALL]`).checked = false form.dispatchEvent(new Event('change', {bubbles:true})) evt.stopPropagation() } else if (!evt.target.value.includes('NONE') && noneSelected) { console.log("F") // User unticks NONE noneSelected = false } else if (evt.target.value.includes('NONE') && noneSelected && allValues.some(v => evt.target.value.includes(v))) { console.log("G") // An option exists while NONE was ticked (so NONE should untick) noneSelected = false const input = form.querySelector(`input[value=NONE]`) input.checked = false input.dispatchEvent(new Event('change', {bubbles:true})) evt.stopPropagation() } else if (!evt.target.value.includes('NONE') && !noneSelected && allValues.every(v => !evt.target.value.includes(v))) { console.log("H") // Nothing is ticked and NONE is unticked (so NONE should tick) noneSelected = true const input = form.querySelector(`input[value=NONE]`) input.checked = true input.dispatchEvent(new Event('change', {bubbles:true})) evt.stopPropagation() } }) return ui }38:T650,summary = ({ label, score, counter_group, counter_value = undefined } = {}) => { counter_value = counter_value && Number.parseInt(counter_value) const counterName = `yiwkmotksl-${counter_group}`; if (!window[counterName]) { // Initialize counter if its not been started window[counterName] = counter_value || 1; } counter_value = counter_value || window[counterName]; // Ensure we have a counter value window[counterName] = counter_value + 1; // Increment counter now we used it const colorVar = variable(scoreColor(score)); const textColorVar = variable(contrastTextColor(colorVar)) const ui = view`

${['numbering', textNodeView((counter_group || '') + (counter_value + ''))]}

${['label', textNodeView(label)]}

${['score', textNodeView(score)]}

` ui.calculate = (scores) => { ui.value.score = d3.sum(scores); ui.score.dispatchEvent(new Event('input', {bubbles: true})) } bindOneWay(colorVar, ui.score, { transform: () => { return scoreColor(ui.value.score); } }) colorVar.addEventListener('assign', () => { ui.querySelector(".color-box").style['background-color'] = colorVar.value; ui.querySelector(".color-box").style['color'] = contrastTextColor(colorVar.value); }) return ui; }39:T59a,aggregateSummary = ({ label, score = 0, prependScoreLevel = "L" } = {}) => { const scoreLevel = (score) => Math.ceil(score); const colorVar = variable(scoreColor(score)); const textColorVar = variable(contrastTextColor(colorVar)) const ui = view`

${['label', textNodeView(label)]}

${['score', textNodeView(+score.toFixed(2))]}

${['prependScoreLevel', textNodeView(prependScoreLevel)]}${['level', textNodeView(scoreLevel(score))]}

` ui.calculate = (scores) => { ui.value.score = +d3.mean(scores).toFixed(2); ui.value.level = scoreLevel(ui.value.score); ui.score.dispatchEvent(new Event('input', {bubbles: true})) } bindOneWay(colorVar, ui.score, { transform: () => { return scoreColor(ui.value.score); } }); colorVar.addEventListener('assign', () => { ui.querySelector(".color-box--lg").style['background-color'] = colorVar.value; ui.querySelector(".color-box").style['color'] = contrastTextColor(colorVar.value); }) return ui; }3a:T8ce,formInputStyles = html``3b:Te7d,function bindLogic(controlsById, layouts) { const cellOrder = layouts.reduce((acc, layout, index) => { acc[layout.id] = index return acc; }, {}) const layoutByCodeByType = d3.group(expandSets(layouts), d => d['set'], d => d['role']); [...layoutByCodeByType.keys()].forEach(code => { const layoutByType = layoutByCodeByType.get(code); let conditionQuestion = undefined; let answer = undefined; if (layoutByType.has("yes")) { if (layoutByType.get("yes").length > 1) throw new Error("Only one yes per set code") const id = layoutByType.get("yes")[0].id; conditionQuestion = controlsById.get(id); answer = (v) => v ? "yes" : "no" } // detect conditionals questions if (layoutByType.has("yesno")) { if (conditionQuestion) throw new Error("Only one condition question per set code") const id = layoutByType.get("yes")[0].id; conditionQuestion = controlsById.get(id); answer = (v) => { if (/^yes/i.exec(v)) return "yes"; if (/^no/i.exec(v)) return "no"; return "maybe" } } if (layoutByType.has("yesnomaybe")) { if (conditionQuestion) throw new Error("Only one condition question per set code") const id = layoutByType.get("yesnomaybe")[0].id; conditionQuestion = controlsById.get(id); answer = (v) => { if (/^yes/i.exec(v)) return "yes"; if (/^no/i.exec(v)) return "no"; return "maybe" } } // conditionals if (conditionQuestion) { if (layoutByType.has("ifyes")) { layoutByType.get("ifyes").forEach(layout => { const question = controlsById.get(layout.id) if (question) bindOneWay(question.hidden, conditionQuestion.control, { transform: (v) => !(answer(v) === "yes") }); }) } if (layoutByType.has("ifno")) { layoutByType.get("ifno").forEach(layout => { const question = controlsById.get(layout.id) if (question) bindOneWay(question.hidden, conditionQuestion.control, { transform: (v) => !(answer(v) === "no") }); }) } } // wire up calculations (layoutByType.get("calculation") || []).forEach(calculationLayout => { const calculationQuestion = controlsById.get(calculationLayout.id); const scoredQuestions = [...layoutByType.entries()] .filter(([type, layouts]) => type !== "calculation") .flatMap(([type, layouts]) => layouts.map(l => { const q = controlsById.get(l.id) q.args.id = l.id return q; })); const calculate = () => { const scores = scoredQuestions.map(q => scoreQuestion(q)); calculationQuestion.control.calculate(scores); }; try { calculate(); } catch (err) { console.error(`Problem updating calculation '${calculationLayout.id}', reason: ${err.message}`) throw err } // If the calculation is numbered, back write numbering to the inputs if (calculationQuestion.control.numbering) { try { const firstIndex = Math.min(...scoredQuestions.map(q => cellOrder[q.args.id])); const firstId = layouts[firstIndex].id; const question = controlsById.get(firstId); question.numbering.value = calculationQuestion.control.numbering.value; } catch (err) { debugger; } } scoredQuestions.forEach(q => { q.control.addEventListener('input', calculate); invalidation.then(() => q.control.removeEventListener('input', calculate)) }) }) }) }3c:[{"id":"7a3035b2a05fc30a5acc43ea8c44b1712b02fa76b9094db3758d9c893ec6fc2f0c6c644550951d5b08fd0c8cff4b133e345703c22e02a5ea0cbb36d38a3675fd","href":"https://static.observableusercontent.com/files/7a3035b2a05fc30a5acc43ea8c44b1712b02fa76b9094db3758d9c893ec6fc2f0c6c644550951d5b08fd0c8cff4b133e345703c22e02a5ea0cbb36d38a3675fd","name":"image@1.png","type":"image/png","lastModified":1629363377572.109,"size":53911}] 2f:{"title":"Survey Slate | Survey Components","cells":[{"id":0,"value":"md`# Survey Slate | Survey Components\n\n_Reusable code components for survey development._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2736,"value":"md`\n

👋 Welcome! This notebook is about **Survey Slate**—an [assemblage of Observable web-based notebooks](https://observablehq.com/collection/@categorise/survey-slate) allowing organizations to host custom surveys for end users on their own AWS infrastructure. Check out the [Technical Overview](https://observablehq.com/@categorise/surveyslate-docs) to get started! ✨

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"md`## Config`","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"config = ({\n // All artifacts in the PUBLIC bucket are on the internet\n PUBLIC_BUCKET: \"public-publicwrfxcsvqwpcgcrpx\",\n // The private bucket requires credentials to access, should be for system wide things like user lists\n PRIVATE_BUCKET: \"private-mjgvubdpwmdipjsn\",\n // The confidential bucket is for customer data, it is encypted and access shoudl be minimized.\n CONFIDENTIAL_BUCKET: \"confidential-bspqugxjstgxwjnt\",\n // The URL to redirect users to\n FILLER_APP_URL: \"https://www.surveyslate.org/survey/index.html\",\n // Cloud Front distribution ID\n CLOUD_FRONT_DISTRIBUTION_ID: 'EG13QGKCG6LI9',\n // URL that hosts appplications\n CLOUD_FRONT_URL: 'https://www.surveyslate.org',\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`## Questions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2425,"value":"Every cell is wrapped so we can apply cross-cutting features like visibility and numbering to all controls","pinned":false,"hidden":false,"mode":"md"},{"id":2375,"value":"function questionWrapper({\n control,\n hidden = false,\n numbering = \"\"\n } = {}) {\n const hiddenVariable = variable(undefined, {name: 'hidden'})\n const wrapper = view`

\n ${['hidden', hiddenVariable]}\n

${['numbering', textNodeView()]}

\n ${['control', control]}\n

`\n hiddenVariable.addEventListener('assign', () => {\n if (hiddenVariable.value === true) {\n wrapper.style.display = 'none'\n } else if (hiddenVariable.value === false) {\n wrapper.style.display = 'block'\n } else {\n debugger;\n throw new Error(\"Unrecognised value for hidden\")\n }\n })\n return wrapper;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"viewof example_q = {\n return createQuestion(JSON.parse(`{\"id\":\"viewof borrower_GESI_support_equal_pay\",\"type\":\"radio\",\"title\":\"Do you provide equal pay for work of equal value of women and men?\",\"options\":[{\"value\":\"No\",\"label\":\"No\"},{\"value\":\"Yes\",\"label\":\"Yes\"}],\"value\":\"savedFormData.borrower_GESI_support_equal_pay\"}`))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2385,"value":"example_q.numbering = \"34.\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":764,"value":"viewof example_q","pinned":true,"hidden":false,"mode":"ojs"},{"id":1104,"value":"scoreQuestion = (q) => {\n if (!q) return 0;\n if (q.hidden.value === true) return 0;\n if (q.args.type === 'checkbox') {\n // Max score function\n return q.control.value.reduce((max, value) => {\n // find option with higest score\n const option = q.args.options.find(option => option.value === value)\n return Math.max(option.score, max);\n }, 0)\n }\n if (q.args.type === 'radio') {\n const option = q.args.options.find(option => option.value === q.control.value)\n if (option) return option.score;\n };\n \n if (q.args.type === 'summary') {\n return q.control.score.value;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2348,"value":"### TextNodeView\n\nMoved to [Common Components](https://observablehq.com/@categorise/common-components?collection=@categorise/gesi-survey#cell-212)","pinned":false,"hidden":false,"mode":"md"},{"id":300,"value":"md`### Table`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1692,"value":"id = () => Math.random().toString(36).substr(2, 9); // https://gist.github.com/gordonbrander/2230317","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":841,"value":"exampleTable","pinned":true,"hidden":false,"mode":"ojs"},{"id":2022,"value":"tableStyles = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"exampleTable","pinned":true,"hidden":false,"mode":"ojs"},{"id":1639,"value":"viewof userEditableTableExample = createQuestion({\n type: 'table',\n value: {\n \"indigenous\": {label: \"Indigenous Peoples\", w: 3, m: 12, unknown: 5, other: 4}\n },\n columns_eval: `[{key: \"w\", label:\"Women / Female\", total: \"women\"}, {key: \"m\", label:\"Men / Male\", total: \"men\"}, {key: \"other\", label: \"Third Gender\", total: \"third gender\"}, {key: \"unknown\", label: \"No Data\", total: \"no data\"}]`,\n rows_eval: `[{key: \"indigenous\", label:\"Indigenous Peoples\"}, {key: \"disabled\", label:\"Workers with Disabilities (under Indian law)\"},{key: \"userdefined1\", label:\"TODO user editable\"}]`,\n user_rows: true,\n table_total_label: '
people',\n caption_md: `_**Excluded and Vulnerable Groups** ...._`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1759,"value":"userEditableTableExample","pinned":true,"hidden":false,"mode":"ojs"},{"id":1705,"value":"viewof basicTable = table({\n \n value: {\n \"cool\": {label:\"very cool\", c1: \"27\"}\n },\n columns: [{key: \"c1\", label: \"c1\"}], rows: [{key: \"r1\", label: \"r1\"}], user_rows: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1741,"value":"basicTable","pinned":true,"hidden":false,"mode":"ojs"},{"id":1744,"value":"Inputs.button(\"backwrite\", {\n reduce: () => {\n viewof basicTable.value = {\"r1\": {label: \"r1\", \"c1\": \"3\"}, \"r2\": {label: \"r1\", \"c1\": \"2\"}};\n viewof basicTable.dispatchEvent(new Event('input', {bubbles: true}))\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"md`### File attachment`","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"viewof exampleFileAttachment = {\n return createQuestion({\n \"id\":\"GESI_national_law_files\",\n \"type\":\"file_attachment\",\n \"title\":\"File Attachments\",\n \"placeholder\":\"No file chosen.\",\n \"description\":\"If you would like to share your policy, please upload it here.\",\n \"value\":{\"uploads\":[{\"name\":\"IMG_20210801_095401.jpg\"}]}\n }, \n 0, {\n putFile: () => {},\n getFile: () => {},\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1458,"value":"exampleFileAttachment","pinned":true,"hidden":false,"mode":"ojs"},{"id":1585,"value":"md`### Clearable Radio\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2096,"value":"viewof radioExamples2 = radio({\n title: \"A very long non sensical question to check the wrapping and layout of this component? A very long non sensical question.\",\n options: [ \n \"cool\",\n \"Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring\"\n ],\n value: \"cool\",\n description: \"A slightly long and meaningless description to go with the options\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1590,"value":"viewof radioExample = radio({\n options: [\"cool\", \"not cool\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2085,"value":"radioExample","pinned":true,"hidden":false,"mode":"ojs"},{"id":1827,"value":"viewof radioExample","pinned":true,"hidden":false,"mode":"ojs"},{"id":1601,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":2126,"value":"### textarea","pinned":false,"hidden":false,"mode":"md"},{"id":2129,"value":"viewof exampleTextarea = textarea({\n title: \"title\",\n description: \"description\",\n placeholder: \"placeholder\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"md`### Checkbox++\n\nIncludes a scoring function that has to be accessed through the view\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":379,"value":"viewof exampleCheckboxPlus = checkbox({\n includeNoneOption: {label: \"none of the below\", score: 0},\n includeAllOption: {label: \"all of the above\", score: 4},\n options: [\n { \n value: 'a',\n label: \"option A\", \n score: 1},\n {value: 'b', label: \"option B\", score: 2}\n ], \n value: ['a', 'ALL', 'b']\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2083,"value":"exampleCheckboxPlus","pinned":true,"hidden":false,"mode":"ojs"},{"id":1778,"value":"viewof exampleCheckboxWithSpaces = checkbox({\n includeNoneOption: {label: \"\", score: 0},\n includeAllOption: {label: \"YES ALL\", score: 4},\n options: [\n {value: 'a b', label: \"A\", score: 1},\n {value: 'b', label: \"B\", score: 2}\n ], \n value: ['a b'],\n description: \"A slightly long and meaningless description to go with the options\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2082,"value":"exampleCheckboxWithSpaces","pinned":true,"hidden":false,"mode":"ojs"},{"id":2464,"value":"viewof checkboxTests = createSuite({\n name: \"checkbox tests\",\n timeout_ms: 1000\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2500,"value":"viewof testCheckboxAll = checkbox({\n includeAllOption: {label: \"ALL\"},\n options: [\n {value: 'a', label: \"A\"},\n {value: 'b', label: \"B\"}\n ],\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2543,"value":"function check(checkbox, value, checked = true) {\n const option = checkbox.querySelector(`input[value=${value}]`);\n if (!option) throw new Error(\"Could not find \" + value + \" in options\");\n option.checked = checked\n option.dispatchEvent(new Event('change', {bubbles: true}))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2498,"value":"checkboxTests.test(\"Tick ALL cascades\", () => {\n check(viewof testCheckboxAll, \"a\", false)\n check(viewof testCheckboxAll, \"b\", false)\n check(viewof testCheckboxAll, \"ALL\", true)\n expect(viewof testCheckboxAll.value).toEqual([\"a\", \"b\", \"ALL\"])\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2595,"value":"checkboxTests.test(\"Tick a and b cascades to ALL\", () => {\n check(viewof testCheckboxAll, \"ALL\", false)\n check(viewof testCheckboxAll, \"a\", true)\n check(viewof testCheckboxAll, \"b\", true)\n expect(viewof testCheckboxAll.value).toEqual([\"a\", \"b\", \"ALL\"])\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2598,"value":"checkboxTests.test(\"Untick ALL cascades\", () => {\n check(viewof testCheckboxAll, \"a\", true)\n check(viewof testCheckboxAll, \"b\", true)\n check(viewof testCheckboxAll, \"ALL\", true)\n expect(viewof testCheckboxAll.value).toEqual([\"a\", \"b\", \"ALL\"])\n check(viewof testCheckboxAll, \"ALL\", false)\n expect(viewof testCheckboxAll.value).toEqual([])\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2604,"value":"checkboxTests.test(\"Untick a cascades to ALL\", () => {\n check(viewof testCheckboxAll, \"a\", true)\n check(viewof testCheckboxAll, \"b\", true)\n check(viewof testCheckboxAll, \"ALL\", true)\n expect(viewof testCheckboxAll.value).toEqual([\"a\", \"b\", \"ALL\"])\n check(viewof testCheckboxAll, \"a\", false)\n expect(viewof testCheckboxAll.value).toEqual([\"b\"])\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2512,"value":"viewof testCheckboxAll.querySelector(\"form\").dispatchEvent(new Event('input', {bubbles: true}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2568,"value":"viewof testCheckboxAll.querySelector(\"input[value=ALL]\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":926,"value":"md`### Summary`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1319,"value":"colorBoxStyle = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":929,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":1295,"value":"exampleSummary","pinned":true,"hidden":false,"mode":"ojs"},{"id":934,"value":"viewof exampleSummary = summary({\n color: 'red',\n label: `Accomodate needs for PWQ`,\n score: 2,\n counter_value: 2,\n counter_group: 'AE',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1232,"value":"Inputs.bind(Inputs.range([0, 5], {label: 'score', step: 0.1}), viewof exampleSummary.score)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1856,"value":"viewof exampleSummaryNext = summary({\n color: 'red',\n label: `Accomodate needs for PWQ and some more very long text to stress test the component`,\n score: 2,\n counter_group: 'AE',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1206,"value":"scoreColor(3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2619,"value":"contrastTextColor = (color) => d3.lab(color).l < 70 ? \"#fff\" : \"#000\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2621,"value":"contrastTextColor(\"#eeeeee\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2623,"value":"contrastTextColor(\"#006837\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1203,"value":"scoreColor = (score) => d3.scaleLinear()\n .domain([0, 0.1, 1, 2, 3, 4, 5])\n // Earlier 0 -> '#EEEEEE', '#0000EA','#7F17D9','#CF2B92','#E577B8','#F6BECB' <- 5\n // Color scale from https://colorbrewer2.org/#type=sequential&scheme=YlGn&n=5\n .range([\n '#0000ff', // '#EEEEEE', // 0\n '#4800ff', // '#ffffcc', // 0.1\n '#5d00ff', // '#ffffcc', // 1\n '#8900e1', // '#c2e699', // 2\n '#e00095', // '#78c679', // 3\n '#f66fbb', // '#31a354', // 4\n '#ffbccb', // '#006837' // 5\n]).clamp(true)(score);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1304,"value":"md`### Aggregate Summary`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1305,"value":"FileAttachment(\"image@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1329,"value":"viewof exampleAggregateSummary = aggregateSummary({\n label: 'Organizational Policies',\n score: 3.08423423423422,\n set: 'org'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1901,"value":"Inputs.bind(Inputs.range([0, 5], {label: 'score', step: 0.1}), viewof exampleAggregateSummary.score)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1787,"value":"aggregateSummary({\n label: 'Organizational Policies and a very long label to stress test this component',\n set: 'org'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1323,"value":"aggregateSummaryStyle = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1327,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":2199,"value":"### Pagination","pinned":false,"hidden":false,"mode":"md"},{"id":2211,"value":"viewof samplePagination1 = pagination({\n previous: 'prev',\n next: 'next',\n hashPrefix: \"foo\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2215,"value":"viewof samplePagination2 = pagination({\n previous: 'prev',\n previousLabel: \"Previous\",\n hashPrefix: \"foo\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2218,"value":"viewof samplePagination3 = pagination({\n next: 'next',\n nextLabel: 'Next',\n hashPrefix: \"foo\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2281,"value":"viewof samplePagination4 = {\n const p = pagination({\n previous: 'prev',\n next: 'next',\n hashPrefix: \"foo\"\n});\n\n return html`

\n ${p}\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2202,"value":"pagination = ({previous, next, hashPrefix = \"\", previousLabel = \"← Go back\", nextLabel =\"Proceed →\"} = {}) => {\n const prevLink = previous ? html`${previousLabel}` : \"\";\n const nextLink = next ? html`${nextLabel}` : \"\";\n\n return html``\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2016,"value":"md`## Component Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2042,"value":"ns = Inputs.text().classList[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":938,"value":"styles = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":2053,"value":"### Inputs","pinned":false,"hidden":false,"mode":"md"},{"id":2046,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"md`## Logic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"md`### Bind logic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":837,"value":"setTypes = [\"\", \"yes\", \"yesnomaybe\", \"ifyes\", \"ifno\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1265,"value":"expandSets = (layout) => layout.reduce((acc, row, index) => {\n const sets = row.set.split(\",\")\n const roles = row.role.split(\",\")\n if (sets.length != roles.length) throw new Error(`${row.cell_name} is mismatched in sets and roles: ${JSON.stringify(row)}`)\n sets.forEach((set, i) => acc.push({\n ...row,\n index,\n set: set.trim(),\n role: roles[i].trim()\n }))\n return acc;\n}, [])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2107,"value":" d3.group(expandSets(example_multi_set_layout), d => d['set'], d => d['role']);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2110,"value":"example_multi_set_layout","pinned":true,"hidden":false,"mode":"ojs"},{"id":2439,"value":"example_aggregate_scores_layout","pinned":true,"hidden":false,"mode":"ojs"},{"id":2112,"value":"example_multi_set_questions","pinned":true,"hidden":false,"mode":"ojs"},{"id":2442,"value":"example_aggregate_scores_layout","pinned":true,"hidden":false,"mode":"ojs"},{"id":510,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"function exampleLogic(questions, layout) {\n const controlsById = new Map(questions.map(q => [q.id, createQuestion(q)]))\n bindLogic(controlsById, layout)\n return view`

\n ${['questions', [...controlsById.values()]]}\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"md`### Example 1: yes, ifyes, ifno`","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"example_yes_ifyes_layout = [{\n id: \"open\",\n role: \"yes\",\n set: \"a\",\n}, {\n id: \"expand1\",\n role: \"ifyes\",\n set: \"a\",\n}, {\n id: \"expand2\",\n role: \"ifno\",\n set: \"a\",\n}] ","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"example_yes_ifyes_questions = [{\n id: \"open\",\n type: \"checkbox\",\n options: [\"Electricity Generation\"]\n}, {\n id: \"expand1\",\n type: \"textarea\",\n placeholder: \"Specifiy type(s) of generation project.\",\n rows: 1,\n}, {\n id: \"expand2\",\n type: \"textarea\",\n placeholder: \"Explain why not\",\n rows: 1,\n}] ","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"exampleLogic(example_yes_ifyes_questions, example_yes_ifyes_layout)","pinned":true,"hidden":false,"mode":"ojs"},{"id":808,"value":"md`### Example 2: yesnomaybe, ifyes, ifno`","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"example_yesnomaybe_ifyes_layout = [{\n id: \"open\",\n role: \"yesnomaybe\",\n set: \"a\",\n}, {\n id: \"expand1\",\n role: \"ifyes\",\n set: \"a\",\n}, {\n id: \"expand2\",\n role: \"ifno\",\n set: \"a\",\n}] ","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"example_yesnomaybe_ifyes_questions = [{\n id: \"open\",\n type: \"radio\",\n options: [\"Yes.\", \"no\", \"dunno\"]\n}, {\n id: \"expand1\",\n type: \"textarea\",\n placeholder: \"Specifiy type(s) of generation project.\",\n rows: 1,\n}, {\n id: \"expand2\",\n type: \"textarea\",\n placeholder: \"Explain why not\",\n rows: 1,\n}] ","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"exampleLogic(example_yesnomaybe_ifyes_questions, example_yesnomaybe_ifyes_layout)","pinned":true,"hidden":false,"mode":"ojs"},{"id":901,"value":"md`### Example 3: score`","pinned":false,"hidden":false,"mode":"ojs"},{"id":917,"value":"example_score_layout = [{\n id: \"score\",\n role: \"scored\",\n set: \"A0.\",\n}, {\n id: \"output\",\n role: \"calculation\",\n set: \"A0.\",\n}] ","pinned":true,"hidden":false,"mode":"ojs"},{"id":914,"value":"example_score_questions = [\n JSON.parse(`{\"id\":\"score\",\"type\":\"radio\",\"title\":\"If yes:\",\"options_eval\":[\"{value:\\\\\"a\\\\\",score: \\\\\"3\\\\\", label: \\\\\"We have a technical skills training program for our officials and staff.\\\\\"}\",\"{value:\\\\\"b\\\\\",score: \\\\\"4\\\\\", value:\\\\\"b\\\\\",label: \\\\\"We implement a technical skills training program, still less than 60%.\\\\\"}\",\"{value:\\\\\"c\\\\\",score: \\\\\"5\\\\\", label: \\\\\"We implement a technical skills training program for our officials and staff, 60% or more have been trained.\\\\\"}\"],\"description\":\"Please select the statement that best describes your organization.\"}`),\n {\n id: \"output\",\n type: \"summary\",\n counter_group: \"A\",\n counter_value: 0,\n label: \"this is the sum of the scores: \",\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1021,"value":"viewof exampleScoreGroup = exampleLogic(example_score_questions, example_score_layout)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1790,"value":"md`### Example 3b: scored conditional`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1795,"value":"example_scored_conditional_questions = [{\n id: \"open\",\n type: \"radio\",\n options: [\"Yes.\", \"no\", \"dunno\"]\n}, {\n id: \"expand1\",\n type: \"radio\",\n options: [\n {score: \"5\", label: \"5\", value: 'yes'}, \n {score: \"4\", label: \"4\", value: 'no'},\n {score: 3, label: \"3\", value: 'unknown'}]\n\n}, {\n id: \"expand2\",\n type: \"radio\",\n options: [\n {score: \"5.1\", label: \"5.1\", value: 'yes'}, \n {score: \"4.1\", label: \"4.1\", value: 'no'},\n {score: 3.1, label: \"3.1\", value: 'unknown'}]\n\n},\n {\n id: \"output\",\n counter_group: \"count\",\n type: \"summary\",\n label: \"this is the sum of the scores: \",\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1793,"value":"example_scored_conditional_layout = [{\n id: \"open\",\n role: \"yesnomaybe\",\n set: \"a\",\n}, {\n id: \"expand1\",\n role: \"ifyes\",\n set: \"a\",\n}, {\n id: \"expand2\",\n role: \"ifno\",\n set: \"a\",\n}, {\n id: \"output\",\n role: \"calculation\",\n set: \"a\",\n}] ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1799,"value":"viewof exampleScoredConditionalGroup = exampleLogic(example_scored_conditional_questions, example_scored_conditional_layout)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1248,"value":"md`### Example 4: multiple sets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"example_multi_set_layout = [{\n id: \"open\",\n role: \"yesnomaybe, scored\",\n set: \"a, A1.\",\n}, {\n id: \"expand1\",\n role: \"ifyes,scored\",\n set: \"a, A1.\",\n}, {\n id: \"expand2\",\n role: \"ifno,scored\",\n set: \"a, A1.\",\n}, {\n id: \"score\",\n role: \"calculation\",\n set: \"A1.\",\n}] ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1254,"value":"example_multi_set_questions = [{\n id: \"open\",\n type: \"radio\",\n options: [\n {score: \"5\", label: \"Yes.\", value: 'yes'}, \n {score: \"4\", label: \"Nope\", value: 'no'},\n {score: 3, label: \"Don't know.\", value: 'unknown'}]\n}, {\n id: \"expand1\",\n type: \"textarea\",\n placeholder: \"Specifiy type(s) of generation project.\",\n rows: 1,\n}, {\n id: \"expand2\",\n type: \"textarea\",\n placeholder: \"Explain why not\",\n rows: 1,\n}, {\n id: \"score\",\n type: \"summary\",\n label: \"overall score: \",\n}] ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"viewof exampleMultiSetGroup = exampleLogic(example_multi_set_questions, example_multi_set_layout)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1408,"value":"md`### Example 5: aggregate scores`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1413,"value":"example_aggregate_scores_layout = [{\n id: \"q1\",\n role: \"scored\",\n set: \"1\",\n}, {\n id: \"q2\",\n role: \"scored,scored\",\n set: \"2,aggregate\",\n}, {\n id: \"s1\",\n role: \"calculation,scored\",\n set: \"1,aggregate\",\n}, {\n id: \"s2\",\n role: \"calculation\",\n set: \"2\",\n}, {\n id: \"aggregate\",\n role: \"calculation\",\n set: \"aggregate\",\n}] ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1416,"value":"example_aggregate_scores_questions = [{\n id: \"q1\",\n type: \"radio\",\n options: [\n {score: \"5\", label: \"Yes.\", value: 'yes'}, \n {score: \"4\", label: \"Nope\", value: 'no'},\n {score: 3, label: \"Don't know.\", value: 'unknown'}]\n}, {\n id: \"q2\",\n type: \"radio\",\n options: [\n {score: \"5\", label: \"Yes.\", value: 'yes'}, \n {score: \"4\", label: \"Nope\", value: 'no'},\n {score: 3, label: \"Don't know.\", value: 'unknown'}]\n},{\n id: \"s1\",\n type: \"summary\",\n label: \"score 1: \",\n},{\n id: \"s2\",\n type: \"summary\",\n label: \"score 2: \",\n},{\n id: \"aggregate\",\n type: \"aggregate\",\n label: \"aggregate of 1 & 2: \",\n}] ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1420,"value":"viewof exampleAggregateScoreGroup = {\n debugger;\n exampleLogic(example_aggregate_scores_questions, example_aggregate_scores_layout)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1895,"value":"md`## Styles for demo\n\nIncluding Tachyons for the demo here`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2231,"value":"// This config needs to be part of account or survey config\nbrandConfig = ({\n colors: {\n brand: mainColors[900], // or, provide and color hex code\n accent: accentColors[900], // or, provide and color hex code\n // The color of text which are usually displayed on top of the brand or accent colors.\n \"text-on-brand\": \"#ffffff\",\n },\n fonts: {\n \"brand-font\": `\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"`\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2241,"value":"initializeStyles = () => tachyonsExt(brandConfig)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2249,"value":"initializeStyles()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2257,"value":"stylesForNotebooks = html`

${title}

${grandTotal}

${total} ${grandTotalLabel}