2b:null 2c:["$","title",null,{"children":"Survey Slate | Styling | categori.se | Observable"}] 31:T5ef,pageMenu = (sections, config, { hashPrefix = '' } = {}) => { // organize const tree = organizeSections(sections); const menuDOM = html`

${[...tree.keys()].map(code => { if (code === 'hidden') return ''; // if the menu has children const link = `#${hashPrefix}${tree.get(code).length > 0 ? `${code}/${tree.get(code)[0]}` : `${code}`}` const label = config.menuSegmentLabels?.[code] || code; return htl.html.fragment`${label}` } )}

${[...tree.keys()].map(parent => { return htl.html.fragment`${ tree.get(parent).map(code => { const link = `#${hashPrefix}${`${parent}/${code}`}`; const label = config.menuSegmentLabels?.[code] || code; const topLayerNav = link.split("/")[0]; return html`${label}`; })}`; }) }

` updateMenu(menuDOM); return menuDOM; }32:T6c2,updateMenu = (dom = document) => { if (!dom.querySelectorAll) dom = document; // The top layer of the menu is always visible, but only one tab is highlighted [...dom.querySelectorAll(".nav-1")].forEach(nav => { const navHash = "#" + nav.href.split("#")[1].split("/")[0] if (window.location.hash.startsWith(navHash)) { nav.classList.add(...navActiveClasses); } else { nav.classList.remove(...navActiveClasses) } }); // The 2nd layer of menu only has the options relevant to the top layer // And then the specific section within that layer is highlighted [...dom.querySelectorAll(".nav-2")].forEach(nav => { const navHash = nav.href.split("#")?.[1] const topLayerNav = navHash.split("/")?.[0]; if (window.location.hash.length < 1) return; const topLayerWindow = window.location.hash.split('#')[1].split("/")[0]; console.log(topLayerNav, topLayerWindow) const nav2ActiveClasses = [...navActiveClasses, "text-on-brand"]; if (topLayerNav !== topLayerWindow) { nav.classList.add("hide") } else { nav.classList.remove("hide") if ("#" + navHash === window.location.hash) { nav.classList.add(...nav2ActiveClasses) } else { nav.classList.remove(...nav2ActiveClasses) } } }); // Due to Observablehq framing, the CSS :target selector for show/hide sections based on hash does not // work properly. So we manually toggle it. [...dom.querySelectorAll("[data-survey-section]")].forEach(section => { if (`#${section.id}` === window.location.hash) { section.style.display = "block"; } else { section.style.display = "none"; } }); if (isSurveyStandalone()) { scrollToTop(); } }33:T586,sectionsView = (questions, layout, config, sections, answers = new Map(), { hashPrefix = '', putFile, getFile } = {}) => { const cells = new Map([...questions.entries()].map(([id, q], index) => [id, createQuestion({ ...q, value: answers.get(id) }, index, { putFile, getFile })])); bindLogic(cells, layout) // We inject the views as just pure presentation const sectionViews = [...sections.keys()].map(sectionKey => sectionView(config, cells, sections, sectionKey, { hashPrefix })) // But we also want the questions inside the sections bound as a single flat list of questions. // It should be flat as we don't want layout information leaking into data access model, e.g. we don't want // moving a question to a different section to invalide persisted answers. let questionViews = sectionViews.reduce( (questions, section) => { // Copy over section propties (which are views of questions) into growing mega object of views) return Object.assign(questions, section) }, {} ) // Some questions are undefined if they cannot be looked up, we need to filter those out questionViews = Object.fromEntries(Object.entries(questionViews).filter(([k , v]) => v)); const container = view`

${sectionViews} ${/* put our questions as hidden view*/ ['_...', questionViews]}

` return container; }34:T723,sectionView = (config, cells, sections, sectionKey, { hashPrefix = '' } = {}) => { const suffix = sectionKey.split("/").pop(); const subtitle = config.menuSegmentLabels?.[suffix] || suffix; const orderedQuestions = sections.get(sectionKey).map(layoutRow => { let cell = cells.get(layoutRow.id) if (cell === undefined) { cell = md`Error question not-found for ${layoutRow.id}` } cell.id = layoutRow.id return cell; }); const pageKeys = paginationKeys(sections, sectionKey); const paginationEl = pagination({...pageKeys, hashPrefix}); // background-position-x is set to 4rem, which is approximate height of the header return view`

${['...', orderedQuestions.reduce((acc, q) => Object.defineProperty(acc, q.id, {value: q, enumerable: true}), {})]}

${paginationEl}

` }35:[{"id":"33cebc3bcc6c8598494ca08a90b80e7a2526ad85db05c3a269bf70fe037780dce7b5be9b4bc01074fd658daf96acc41879befe5f54936d31b34cd1e84b8b0915","href":"https://static.observableusercontent.com/files/33cebc3bcc6c8598494ca08a90b80e7a2526ad85db05c3a269bf70fe037780dce7b5be9b4bc01074fd658daf96acc41879befe5f54936d31b34cd1e84b8b0915","name":"core_intro@1.jpg","type":"image/jpeg","lastModified":1631608923190.16,"size":327188},{"id":"390c5d7c0d71733d1e63aa9c38d3ee3c68369f8ce17e265675ec13fd9b202001b3c38436a05c670719db7f7d592d18d1c8c43ab474256ba4196b918c9357e9d4","href":"https://static.observableusercontent.com/files/390c5d7c0d71733d1e63aa9c38d3ee3c68369f8ce17e265675ec13fd9b202001b3c38436a05c670719db7f7d592d18d1c8c43ab474256ba4196b918c9357e9d4","name":"core_mainstream@1.jpg","type":"image/jpeg","lastModified":1631608923248.405,"size":272119},{"id":"ee654aa3599162a8e97b92e233bf315e692d20e36de269fc814ec1e973b8f9f630a588b6a41955ec7b97635ec992ccdc87b607c235535a8b0ec8647cba36d482","href":"https://static.observableusercontent.com/files/ee654aa3599162a8e97b92e233bf315e692d20e36de269fc814ec1e973b8f9f630a588b6a41955ec7b97635ec992ccdc87b607c235535a8b0ec8647cba36d482","name":"core_operation@1.jpg","type":"image/jpeg","lastModified":1631608922919.553,"size":301698},{"id":"4a26433a3f2093cc51c4fbb4e58654accad20264701f61a42e69aa0ff5641cfded0676e595f3817a9160aea0be3775003ade6acb8a52e802172292df1bfb5def","href":"https://static.observableusercontent.com/files/4a26433a3f2093cc51c4fbb4e58654accad20264701f61a42e69aa0ff5641cfded0676e595f3817a9160aea0be3775003ade6acb8a52e802172292df1bfb5def","name":"intro@3.jpg","type":"image/jpeg","lastModified":1631609037489.013,"size":389722}] 2f:{"id":"0169646fe703ec69","slug":"surveyslate-styling","title":"Survey Slate | Styling","thumbnail":"04098dda8e49c092d30616afc817883c2ec115a9b71f807c8be08d402e45c198","access_level":"public","create_time":"$D2021-01-19T21:45:07.693Z","update_time":"$D2025-11-26T20:29:43.305Z","view_time":null,"first_public_time":"$D2022-02-12T04:00:59.550Z","fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"9cb66d8571abb7bd","login":"categorise","name":"categori.se","avatar_url":"https://avatars-next.observableusercontent.com/a9c86cf777f4c09b5a0d50256359bd05d36e722508e94fa8dd994861910470f0","tier":"starter_2024"},"version":1888,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null},{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null},{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"},{"type":"team","id":"9cb66d8571abb7bd","login":"categorise","name":"categori.se","avatar_url":"https://avatars-next.observableusercontent.com/a9c86cf777f4c09b5a0d50256359bd05d36e722508e94fa8dd994861910470f0","tier":"starter_2024","role":"editor"}],"comments":[{"id":"1460a135736a040e","reply_to_id":null,"content":"viewof exampleSurvey = Error: Problem updating calculation 'undefined', reason: Cannot read properties of undefined (reading 'control')","create_time":"$D2021-10-31T21:07:48.320Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"76254719ce1eea56","reply_to_id":"1460a135736a040e","content":"casualty of the model refactor, should be ok now, though it does fail until the data is properly loaded.","create_time":"$D2021-11-01T10:33:05.595Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"edf6d9fde48553ee","reply_to_id":null,"content":"It's a bit cumbersome to try to trace through these various embedded style definitions. Is there any way we can abstract these or gather some basic setting or places where we're adding custom classes into a 'style sheet' page--particularly for our 'demo survey' / template? Also, I can't figure out how to set the colors for the non-active links. I see in Tom's current generated survey they're visible as white; here's there's grey and hard to see.","create_time":"$D2021-11-05T12:28:34.248Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"73db92806632ad64","reply_to_id":"edf6d9fde48553ee","content":"Styling and layout is specified programmatically. You can't really \"template it out\" beyond choosing some colors. The idea that we would have a few different style notebooks. This one is specifically for the GESI usecase.","create_time":"$D2021-11-05T13:22:14.553Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"0cb6c9aec21d7cc4","reply_to_id":null,"content":"Can we link the values here like 'mainstreaming' and 'operation' to their corresponding identifiers elsewhere?","create_time":"$D2021-11-05T13:41:46.202Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"15a4bf0f1d2e2cad","reply_to_id":null,"content":"The images aren't working very well with the centered text content: it's not possible to see the scene. Also, the 'background-size: cover' setting extends into the menu area, so that the tops of image are clippped. Would be good to re-think use and placement of images so that they add interest and value. My porotype sought to ensure that images were completely visible for most viewports... though things broke down for larger browsers where the questions felt 'too small' and view area was dominated the the image.","create_time":"$D2021-11-05T13:48:48.271Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"e5981eae421dd3b2","reply_to_id":"edf6d9fde48553ee","content":"It seems more manual than programmatic? That is, you're manually hard-coding in style values here, yet the purpose of this function is a to generate the page menu. Even for the specific 'GESI' template, we should be able to abstract these definitions and allow a 'configuration' space.","create_time":"$D2021-11-05T13:53:28.534Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"9772fce7fb18426a","reply_to_id":null,"content":"This one won't work when I attempt to use it below.","create_time":"$D2021-11-05T14:03:19.068Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"0ef240eee83d6f3f","reply_to_id":"edf6d9fde48553ee","content":"When you say 'configurable', what is the extend you like to configure? Is it only colors, like:\n- brand-primary\n- brand-accent\n- text\n- ... similarly a fixed set of things (like variables)\netc?\n\nOr, are you looking to do Tachyon classes based like you have done above?","create_time":"$D2021-11-05T16:32:44.594Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}},{"id":"f01a75942443a3dc","reply_to_id":"9772fce7fb18426a","content":"You missed a couple of quotes ;)","create_time":"$D2021-11-05T16:55:47.335Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}},{"id":"8e45cf20cd4c588f","reply_to_id":"9772fce7fb18426a","content":"Should work now.","create_time":"$D2021-11-05T16:55:57.738Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}},{"id":"66af1555732fdd8d","reply_to_id":"9772fce7fb18426a","content":"Thank you!","create_time":"$D2021-11-05T19:47:36.268Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"0e5b7c7e2ff6f6d0","reply_to_id":"edf6d9fde48553ee","content":"Since we already have all these amazing preview options, I guess my idea is to expose a few 'parameters' that would affect the look and feel of a template. While lots of this is trivial, I find that myself and others are far more excited for a tool when aesthetic aspects can be manipulated. If we offer the 'default template' and 'gesi style sheet' both as examples with our 'application launch', and where users can make minor but visual adjustments to the 'default' and save (maybe even re-import) their style config, I bet it would really help more people to want to play around. I realize I'm imagining that people even find and read this :P I am still trying to figure out how to get ADB to take over some marketing responsibilities...","create_time":"$D2021-11-05T19:51:45.980Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"f63d8306e629139c","reply_to_id":"15a4bf0f1d2e2cad","content":"Thinking about this further - the alignment is just a choice, and right, center, or left is an easy choice to expose to people. Perhaps images should similarly just be a choice, and alignment also exposed to the user.","create_time":"$D2021-11-05T21:11:36.212Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"37706c1c678ca023","reply_to_id":null,"content":"'bg-white' is tachyons specific. maybe it would be interesting to provide a dropdown select list of 'official' options? https://tachyons.io/docs/themes/skins/","create_time":"$D2021-11-05T21:17:08.438Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"e9c044a60fede545","reply_to_id":"9772fce7fb18426a","content":"Wait - still doesn't work? When I try to swap the configuration option with the input value, the menu turns white/blank.","create_time":"$D2021-11-05T21:18:30.039Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"d5195527951df2bf","reply_to_id":"edf6d9fde48553ee","content":"Sorry - maybe a more direct answer: I was thinking of just Inputs.color(). It's great that ADB has branding, and great we're using that for GESI template :)","create_time":"$D2021-11-05T21:20:00.430Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"bc80726245efc743","reply_to_id":null,"content":"The Square brackets (`[]`) you see within classes are only to group related classnames. A downside of using Tachyons or TailwindCSS is that it becomes harder to read style. Just to pacify that problem a bit I tend to group classes with square brackets. In this notebook, you'll see color related classes as a group, spacing (padding and margin) as another group,...","create_time":"$D2021-11-10T06:12:41.405Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}},{"id":"c212fcd77ea597e2","reply_to_id":null,"content":"This loads Tachyons together with some of our own extensions, like brand color classes, and extra utility classes.","create_time":"$D2021-11-10T06:16:34.660Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}},{"id":"14441d26579e8cf2","reply_to_id":null,"content":"Different combination of the above 'brand', 'accent', and 'text-on-brand' should give some variation on color schemes.","create_time":"$D2021-11-10T06:18:56.851Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}},{"id":"9c60e3f725d7d952","reply_to_id":null,"content":"@aaronkyle I have tweaked our survey filler main content alignment to the right, so that we can expose more image on the right like in the above screenshot. Also, minor fixes to avoid cropping on the top part of the images. It's not perfect. But it is good enough, I think.","create_time":"$D2021-11-10T11:39:18.902Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}},{"id":"853202f975c00a59","reply_to_id":null,"content":"These look fine here, but they're coming through very pixelated and weird in the preview under 'Survey Filler' and generally we've changed the survey layout from the prototype version such that these pictures no longer fit the presentation context.","create_time":"$D2021-11-22T22:31:36.135Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"4212f311ea649242","reply_to_id":"9c60e3f725d7d952","content":"Thanks. I just caught this note, but haven't discovered the function yet.","create_time":"$D2021-11-22T22:32:48.919Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"4d3d69f9991cad91","reply_to_id":"0cb6c9aec21d7cc4","content":"Where are we getting 'section'? Looks like it's from `sections = d3.group(layout, d => d['menu'])` - so we're staying here that if we have a section from our layout that includes this tag, append this image to it. I suppose the question is - to make this easy if people have a survey, and have images, and wish to link the images to their survey, can we expose a list of available section IDs that they can select to link images (if we're not giving up on support for images)","create_time":"$D2021-11-22T22:38:40.875Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"0cbef84277da1bca","reply_to_id":"14441d26579e8cf2","content":"Is this the place where we would add overrides to Tachyons? E.g. to change the default line height to:\n```\n.lh-copy {\n line-height: 1.1;\n}\n```","create_time":"$D2021-11-23T10:54:02.975Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"68d3299dd2bcd500","reply_to_id":null,"content":"Apologies - looks like it's here","create_time":"$D2021-11-23T10:55:44.581Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"db65667dc951275a","reply_to_id":"68d3299dd2bcd500","content":"Let's see whether or not I messed up ;) attempting to override Tachyon's line height defaults to allow a more 'compressed' look.","create_time":"$D2021-11-23T10:57:57.323Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"6fecd710c40ab744","reply_to_id":"68d3299dd2bcd500","content":"How about a tad more, 1.4? ;)","create_time":"$D2021-11-23T13:28:38.525Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}},{"id":"9745eef96bbca5b7","reply_to_id":"68d3299dd2bcd500","content":"Don't do this, your link and style elements will be wrapped in a span.\n\nInstead use @import and @media in a single style element. Also, the media attribute serves no purpose here, unless your intend was to explicitely exclude \"speech\".","create_time":"$D2021-12-16T12:12:58.660Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"3eac431abaee7c44","reply_to_id":"bc80726245efc743","content":"@saneef Have you considered using line breaks instead? Both [ and ] are valid class names, and if someone forgets the surrounding whitespace they accidentally end up with a different class name (one including the bracket in its name).\n\nI'd imagine that this sort of thing is a perfect use case for a helper, e.g.:\n\nfunction g(...args) { return args.map(s => `[ ${s} ]`).join(''); }\n\n\n\nThat way you can change the style of separation at any point (and also remove it), without having to change your existing class assignments.","create_time":"$D2021-12-16T12:28:42.066Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"c68a181f18128c63","reply_to_id":"68d3299dd2bcd500","content":"Thanks Fabian. Fixed them.","create_time":"$D2021-12-16T20:35:17.189Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}},{"id":"e60bebd56199bb8a","reply_to_id":null,"content":"Is this error expected?","create_time":"$D2022-06-21T08:51:02.059Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"71ded783583e630a","reply_to_id":"853202f975c00a59","content":"Dont' use multiple awaits, they will cause your code to run synchronously. Instead use a helper like the following:\n\nasync function resolveObject(obj) {\n return Object.fromEntries(await Promise.all(\n Object.entries(obj).map(async ([k, v]) => [k, await v])\n ));\n}\n\nThen do:\n\nimages = resolveObject({\n \"mainstream\": FileAttachment(\"core_mainstream@1.jpg\").url(),\n \"operation\": FileAttachment(\"core_operation@1.jpg\").url(),\n \"intro\": FileAttachment(\"intro@3.jpg\").url(),\n \"default\": FileAttachment(\"core_intro@1.jpg\").url(),\n})","create_time":"$D2022-06-21T08:57:47.215Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"759eb8e527c6711c","reply_to_id":"853202f975c00a59","content":"Thank you! Changes applied. As a bit of an aside, I'd be interested to delve deeper into use of background images in the application. I imagine that there are lots of avenues for improvement, like creating 'image stacks' that would serve out images based on device screen size/resolution. Also our original concept was for images to be randomly generated on clicking the navigation menu. All suggestions welcome :)","create_time":"$D2022-06-22T14:44:16.676Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"ac07c302533c2c64","reply_to_id":"e60bebd56199bb8a","content":"I would need to check on this, but in our various notebooks the initial views will often show errors prior to the use authenticating. Generally speaking, you're correct to point out that we can do better in flagging this and helping better orient those wishing to engage with the application and its code.","create_time":"$D2022-06-22T14:46:05.428Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"6ec5d329c63dbd4d","reply_to_id":null,"content":"The most up to date version of this notebook is hosted at https://observablehq.com/@adb/survey-slate-styling","create_time":"$D2022-08-09T07:03:50.458Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"36e2962efee1365c","reply_to_id":"e60bebd56199bb8a","content":"Yes, the error is expected - it will resolve after entering credentials.","create_time":"$D2025-11-26T11:42:31.393Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"b757164e8af2c523","reply_to_id":null,"content":"Do the errors here affected the functioning of the survey?","create_time":"$D2025-11-26T11:44:41.835Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"b922af6eb4e36307","reply_to_id":"b757164e8af2c523","content":"If the error is on `layout`, yes it will affect the functioning of the survey. Most likely it caused when the questions layout is missing. See https://observablehq.com/@categorise/surveyslate-designer-tools","create_time":"$D2025-11-26T18:19:16.004Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}},{"id":"3ab904b3b61962a1","reply_to_id":"b757164e8af2c523","content":"Hi Saneef! Thanks for responding! I'm using my credentials and toggling both the dev and production versions of the gesi-self-assessment, as well as our various test projects and the error here persists -- here at least. The flagged bit is the `sectionView` function where we use .map. In the example code above, `surveyConig' is valid, as are both `new Map([...questions.entries()].map(([id, q]) => [id, createQuestion(q)]))` and `d3.group(layout.data, d => d['menu'])`, so the error isn't with the inputs but rather with this function (also not working in the adb-specific version referenced in Tom's comment above). I've made a lot of progress porting this application to Framework. I'll push some updates soon and will share a link once I do. Looking forward to deploying a few new surveys! :)","create_time":"$D2025-11-26T20:10:26.996Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"0aaef84ea8e27398","reply_to_id":"b757164e8af2c523","content":"Ok, I got it: For the purposes of this example, we just needed to change the hard-coded `sectionKey` to \"nolayout\" and the example renders correctly. Thanks for pointing me in the right direction!","create_time":"$D2025-11-26T20:30:55.860Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":8,"collection":{"id":"d65eaa19216f4bf8","slug":"survey-slate","title":"Survey Slate","owner":{"id":"9cb66d8571abb7bd","login":"categorise","name":"categori.se"}},"type":"notebook","body":{"title":"Survey Slate | Styling","cells":[{"id":0,"value":"md`# Survey Slate | Styling\n\n_Exposing a method to take survey information and wrap it in HTML for display._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1866,"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","author":"$undefined","summary":"$undefined"},{"id":310,"value":"md`test credentials for demoEditor\n~~~js\n{\n \"accessKeyId\": \"AKIAQO7DBPIFDAUBK4SL\",\n \"secretAccessKey\": \"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\"\n}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"viewof manualCredentials","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":321,"value":"saveCreds","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":344,"value":"md`### Choose Survey Source for demo data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":288,"value":"viewof survey","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":304,"value":"import {viewof manualCredentials, viewof survey, saveCreds, questions, layout, viewof surveyConfig, initialQuestionLoader, initialLayoutLoader, load_config, createQuestion, bindLogic} from '@categorise/surveyslate-designer-tools'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1126,"value":"import {styles as componentStyles, pagination} from '@categorise/survey-components'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":335,"value":"loaders = initialQuestionLoader, initialLayoutLoader, load_config","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1635,"value":"## Brand","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1742,"value":"viewof brand = Inputs.color({label: \"Brand Color\", value: mainColors[900]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1749,"value":"viewof accent = Inputs.color({label: \"Accent Color\", value: accentColors[900]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1760,"value":"viewof font = Inputs.textarea({label: \"Font Stack\", value: '\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1634,"value":"// This config needs to be part of account or survey config\nbrandConfig = ({\n colors: {\n brand: brand, // or, provide and color hex code\n accent: accent, // 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\": font\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":387,"value":"md`### Config`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1079,"value":"script = ({\n hashPrefix = ''\n} = {}) => html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1339,"value":"### Enable Javascript Snippet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1346,"value":"enableJavascriptContent = md`⚠️ Javascript is required to run this application. Please enable Javascript on your browser to continue.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1343,"value":"enableJavasscriptSnippet = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":940,"value":"md`## Survey View`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":943,"value":"surveyView = (questions, layout, config, answers, options) => {\n const sections = d3.group(layout, d => d['menu'])\n const survey = view`\n ${custom_css()}\n ${header(sections, config, options)}\n

\n ${['...', sectionsView(questions, layout, config, sections, answers, options)]}\n

\n ${pageFooter()}\n `\n return survey;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":949,"value":"viewof exampleSurvey = surveyView(questions, layout.data, surveyConfig, new Map(), {\n hashPrefix: 'foo|'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":954,"value":"exampleSurvey","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":190,"value":"md`#### Custom CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"custom_css = () => html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1611,"value":"navActiveClasses = [\"bg-accent\", \"active\"] // 'active' not used for styling. It's retained just in case it is used JS","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":714,"value":"md`## Body Header`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":720,"value":"header(d3.group(layout.data, d => d['menu']), surveyConfig, {\n layout: 'relative',\n hashPrefix: \"foo|\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":716,"value":"header = (sections, config, {\n hashPrefix = '',\n layout = \"sticky-top\"\n} = {}) => html`

\n${pageHeader([config.pageTitle])}\n\n${pageMenu(sections, config, {\n hashPrefix\n})}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":630,"value":"md`## Menu`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":460,"value":"pageMenu(d3.group(layout.data, d => d['menu']), surveyConfig)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1800,"value":"organizeSections = (sections) => d3.rollup([...sections.keys()].map(path => path.split(\"/\")), (children) => children.map(child => child[1]).filter(_ => _), d => d[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":580,"value":"addMenuBehaviour = {\n window.addEventListener('hashchange', updateMenu);\n invalidation.then(() => window.removeEventListener('hashchange', updateMenu));\n updateMenu()\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":549,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1843,"value":"isSurveyStandalone = () => document.body.dataset.standaloneSurvey === \"true\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1811,"value":"scrollToTop = () => window.scrollTo(0,0);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":893,"value":"[...d3.group(layout.data, d => d['menu']).keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1232,"value":"## Images","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1872,"value":"async function resolveObject(obj) {\n return Object.fromEntries(await Promise.all(\n Object.entries(obj).map(async ([k, v]) => [k, await v])\n ));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1272,"value":"images = resolveObject({\n \"mainstream\": FileAttachment(\"core_mainstream@1.jpg\").url(),\n \"operation\": FileAttachment(\"core_operation@1.jpg\").url(),\n \"intro\": FileAttachment(\"intro@3.jpg\").url(),\n \"default\": FileAttachment(\"core_intro@1.jpg\").url(),\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1237,"value":"function imageFor(section) {\n if (section.includes(\"mainstream\")) {\n return images.mainstream;\n } else if (section.includes(\"operation\")) {\n return images.operation;\n } else if (section.includes(\"intro\")) {\n return images.intro;\n } else {\n return images['default']\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":627,"value":"md`## Content\n\nNote you need a menu option selected for the example below to render\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":701,"value":"viewof sectionViewExample = sectionsView(questions, layout.data, surveyConfig, d3.group(layout.data, d => d['menu']))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":906,"value":"sectionViewExample","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":911,"value":"viewof exampleSectionView = sectionView(surveyConfig, \n new Map([...questions.entries()].map(([id, q]) => [id, createQuestion(q)])), \n d3.group(layout.data, d => d['menu']),\n \"nolayout\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":916,"value":"exampleSectionView","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":637,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1793,"value":"paginationKeys = (sections, key) => {\n const tree = organizeSections(sections);\n const keys = [...tree.keys()].reduce((acc, parent) => {\n const subsections = tree.get(parent);\n if (subsections.length > 0) {\n return [\n ...acc,\n ...(subsections.map(sb => `${parent}/${sb}`))\n ]\n }\n return [...acc, parent];\n }, []);\n\n let previous;\n let next;\n\n const currentIndex = keys.findIndex(k => k === key);\n if (currentIndex > 0) {\n previous = keys[currentIndex - 1];\n }\n\n if (currentIndex < (keys.length - 1)) {\n next = keys[currentIndex + 1];\n }\n\n return {\n previous, next,\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":820,"value":"questions","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1694,"value":"{\n // Initialising styles for demos to work on this notebook\n initializeStyles()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1627,"value":"initializeStyles = () => tachyonsExt(brandConfig)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1816,"value":"## Styles for the demos in this notebook\n\nThese styles are to negate Observable styles overriding the component styles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1786,"value":"stylesForNotebooks = html`