31: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; }32:[] 2f:{"title":"Survey Question Selector","cells":[{"id":0,"value":"md`# Survey Question Selector`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`This component exposes a simple interface for selecting a survey question to explore.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"viewof question = questionSelector(sheet, {startIndex: 2})","pinned":true,"hidden":false,"mode":"ojs"},{"id":886,"value":"question","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":713,"value":"viewof s = compareQuestionSelector(sheet)","pinned":true,"hidden":false,"mode":"ojs"},{"id":880,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":6,"value":"import {sheet} from \"@observablehq/survey-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}