2d:null 2e:["$","title",null,{"children":"Survey Question Selector | Observable | Observable"}] 33:T7de,function questionSelector(sheet, { startIndex = 1, filter = null } = {}) { let questions = Object.values(sheet.questions) if(filter) questions = questions.filter(filter) const startValue = questions[startIndex]; const type = (x) => { if(x.type == "choice") return "🔘" if(x.type == "multi") return "✅" if(x.type == "free") return "🖋" return "🔘" } const radio = Inputs.radio(questions, {format: x => html`

${x.question}

${type(x)}

`, value: startValue}); // some custom styling const parent = radio.getElementsByTagName("div")[0]; parent.style = "max-height: 250px; overflow-y: scroll"; const labels = radio.getElementsByTagName("label"); for (let label of labels) { label.style = "display:flex; justify-content:space-between; margin-bottom: 5px; min-height:2em;" } const filterRows = (filterQuery) => { const query = filterQuery.toUpperCase(); const labels = radio.getElementsByTagName("label"); for (let label of labels) { label.textContent.toUpperCase().indexOf(query) > -1 ? label.style.display = "flex" : label.style.display = "none"; } }; const filterer = html` filterRows(e.target.value)} > `; const selector = html` ${filterer}

${radio}

`; selector.value = radio.value; selector.addEventListener("input", e => { selector.value = radio.value; }); return selector; }34:[] 31:{"id":"39a3e371be4daa0c","slug":"survey-question-selector","title":"Survey Question Selector","thumbnail":"de996c18bbb3384ed1e352f487bf93d96f85be400e6a7b3d3bda7f30886a5190","access_level":"public","create_time":"$D2021-02-23T18:05:28.927Z","update_time":"$D2021-05-17T13:29:46.810Z","view_time":null,"first_public_time":"$D2021-05-25T14:40:50.548Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":971,"publish_version":971,"role":null,"authored":false,"authors":[{"type":"individual","id":"7c36f3a53eb6b985","login":"jzhang","name":"Jimmy Zhang","avatar_url":"https://avatars-next.observableusercontent.com/d339fb5ce9b016c6eb835831aa678b41fa731155c55d86b8155d6ef989bd58d6","tier":null}],"members":[{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"35f0e07bd0edcdd8","slug":"templates-components","title":"Template Components","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Survey Question Selector","cells":[{"id":0,"value":"md`# Survey Question Selector`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`This component exposes a simple interface for selecting a survey question to explore.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"viewof question = questionSelector(sheet, {startIndex: 2})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"question","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"md`You can also choose a pair of questions for creating comparisons with \\`compareQuestionSelector(sheet)\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"viewof s = compareQuestionSelector(sheet)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"function compareQuestionSelector(sheet, options = {}) {\n const {index1 = 1, index2 = 2, free2 = false} = options;\n \n let filter = d => d.type !== \"free\"\n \n const selector1 = questionSelector(sheet, {startIndex: index1, filter });\n const selector2 = questionSelector(sheet, {startIndex: index2, filter: free2 ? null : filter});\n \n const selectors = \n html`

Question 1

\n ${selector1}\n

Question 2

\n ${selector2}\n

`;\n\n\n selector1.addEventListener(\"input\", e => {\n selectors.value.q1 = selector1.value;\n selectors.dispatchEvent(new CustomEvent(\"input\", {bubbles: true}));\n });\n\n selector2.addEventListener(\"input\", e => {\n selectors.value.q2 = selector2.value;\n selectors.dispatchEvent(new CustomEvent(\"input\", {bubbles: true}));\n });\n \n selectors.value = {q1: selector1.value, q2: selector2.value};\n \n return selectors;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"prettyType = (type) => {\n if(type == \"free\") return \"Free Response\"\n if(type == \"multi\") return \"Multiple Select\"\n if(type == \"choice\") return \"Multiple Choice\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {sheet} from \"@observablehq/survey-data\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"