2a:null 2b:["$","title",null,{"children":"Scoring Template | John Cayley | Observable"}] 30:[{"id":"4787833041c8dd2b7ef83803d3cb606b42a2c3cca7bfdacabe2b5f5ebd32ce978b8d450d8fa1efd0cb865184e1c231a50975ca5f98d33f021a36acf918d6e51b","href":"https://static.observableusercontent.com/files/4787833041c8dd2b7ef83803d3cb606b42a2c3cca7bfdacabe2b5f5ebd32ce978b8d450d8fa1efd0cb865184e1c231a50975ca5f98d33f021a36acf918d6e51b","name":"NotoSerif-Regular.ttf","type":"font/ttf","lastModified":1721290157189.507,"size":375148},{"id":"1ebc8b374c91dbd324350f9f5f3bfef933c12281979460d40292695d1a79768479c65f7fbaf53710493590b8c517968a7260a88c578faa011a37a7fe511b647f","href":"https://static.observableusercontent.com/files/1ebc8b374c91dbd324350f9f5f3bfef933c12281979460d40292695d1a79768479c65f7fbaf53710493590b8c517968a7260a88c578faa011a37a7fe511b647f","name":"NotoSerif-Regular.woff","type":"font/woff","lastModified":1721290157189.507,"size":239984},{"id":"33ff16ae2e07542fab1aae9aefba8bbc030b7026a56be0b463c467019b755f43e7f00f53957554d0e2a0491df10804f6997b808f813a25409a2b791de7221825","href":"https://static.observableusercontent.com/files/33ff16ae2e07542fab1aae9aefba8bbc030b7026a56be0b463c467019b755f43e7f00f53957554d0e2a0491df10804f6997b808f813a25409a2b791de7221825","name":"NotoSerif-Regular.woff2","type":"font/woff2","lastModified":1721290157189.507,"size":178240},{"id":"dfa636706f6b7a53a8c290218b3c177d6be1d3abbb7577b92f1e6314b3b642c59fb7a6e6dc059d89226ef1e3675b8dccafaa5c432d9599ed288eed19bb8a0ea8","href":"https://static.observableusercontent.com/files/dfa636706f6b7a53a8c290218b3c177d6be1d3abbb7577b92f1e6314b3b642c59fb7a6e6dc059d89226ef1e3675b8dccafaa5c432d9599ed288eed19bb8a0ea8","name":"wf_linear@2.json","type":"application/json","lastModified":1721290157189.507,"size":2214},{"id":"497afa6fbf76ff797eb6fa78d6ae6b1454a5de2de5bc37a5bb0ee1872371c86bbed3db7a230d348b3b548a4d7bc1d40e46b70b1a3694614ee05d3d0b1b5e5532","href":"https://static.observableusercontent.com/files/497afa6fbf76ff797eb6fa78d6ae6b1454a5de2de5bc37a5bb0ee1872371c86bbed3db7a230d348b3b548a4d7bc1d40e46b70b1a3694614ee05d3d0b1b5e5532","name":"wf_parallel@1.json","type":"application/json","lastModified":1721290157189.507,"size":2297},{"id":"7c8014976c70449191ef5223818da2f0b04d7f8c039f4bd0a3f08f4eab69112059f96a7ab8ab7d20b0f4a5dc692937e50f35202f46c8084795465a91f418a63b","href":"https://static.observableusercontent.com/files/7c8014976c70449191ef5223818da2f0b04d7f8c039f4bd0a3f08f4eab69112059f96a7ab8ab7d20b0f4a5dc692937e50f35202f46c8084795465a91f418a63b","name":"wf_path@1.json","type":"application/json","lastModified":1721290157189.507,"size":2233}] 2e:{"id":"ac7be6663ed2303f","slug":"scoring-template","title":"Scoring Template","thumbnail":"fa4f3515a0ff01cc6b43f3ef283eee45d4fd317a929fe1a6b949e45a30c4211f","access_level":"public","create_time":"$D2026-09-30T17:17:51.598Z","update_time":"$D2026-09-30T19:24:00.025Z","view_time":null,"first_public_time":"$D2026-09-30T17:42:05.876Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"8cad4906c41da0ef","login":"shadoof","name":"John Cayley","avatar_url":"https://avatars-next.observableusercontent.com/d4a045c1060f722297a6047ffa90d6cd33806f54fcaa444ac3f1882c0fd4ee4f","tier":"pro_2024"},"version":5942,"publish_version":5942,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c3cbd6193f712f7","login":"shadoof","name":"John Cayley","avatar_url":"https://avatars-next.observableusercontent.com/d4a045c1060f722297a6047ffa90d6cd33806f54fcaa444ac3f1882c0fd4ee4f","tier":null}],"members":[{"type":"team","id":"8cad4906c41da0ef","login":"shadoof","name":"John Cayley","avatar_url":"https://avatars-next.observableusercontent.com/d4a045c1060f722297a6047ffa90d6cd33806f54fcaa444ac3f1882c0fd4ee4f","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d82373961f237124","slug":"scoring-the-spelt-air","title":"Scoring the Spelt Air","owner":{"id":"8cad4906c41da0ef","login":"shadoof","name":"John Cayley"}},"type":"notebook","body":{"titling":"auto","title":"Scoring Template","cells":[{"id":0,"value":"# Scoring Template\n#### Version 1.0.0\n## Scoring the Spelt Air\n*Scoring the Spelt Air* is a gathering of tools and conventions that will allow you to draft and animate pieces of writing for display on screens and the web. It uses the Observable Notebook platform for drafting and configuration. This notebook itself can be copied (more properly, *forked*) so as to allow you to draft and configure your own pieces of writing. Doing so then allows you to produce and download playable specifications for your writing. A separate suite of JavaScript programs will then *play* the animations you have composed and designed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"frame","database":"$undefined"},{"id":5729,"value":"const parasConfig = ({ draft1: [], draft2: [], draft3: [] })\n// Edit and construct this literal with properties that match\n// the names and cell names of paragraphs.\n// Other configuration is done in the config StrictObj:","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3254,"value":"const config = {\n // see notes (in Markdown cells) on Configuration below\n paraNames: Object.keys(parasConfig),\n paraCells: [draft1, draft2, draft3],\n spannedCells: [spanned1, spanned2, spanned3]\n}","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5875,"value":"const paras = Array.from(Object.values(parasConfig)).map((a) => a.map((i) => i.id))","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2861,"value":"const spels = mapParaSpels(config.spannedCells, config.paraNames)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5522,"value":"const spanString = Array.from(spels.values())\n .map((spel) => spel.html)\n .join(\"\")","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"

Cobbett’s View\n broad vista north\nThomas’ Stone\n high downs south\n\nfifty years all that change\nno time not this way

head winds\n kept you home\nlee way\n brings us here\n\nold school where we lived\nnew lives now we learn

hard work\n can not last\ngentle passions\n all that’s left\n\nonce we sang near here\nand now we dance again

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"draft3","database":"$undefined"},{"id":4401,"value":"mapParaSpels = (spannedCells, paraNames) => {\n let spels = new Map();\n for (const [idx, spannedCell] of spannedCells.entries()) {\n parasConfig[paraNames[idx]] = [];\n let spelArray = getSpelArray(spannedCell, spels.size);\n spelArray.forEach((spel) => {\n spels.set(spel.id, {\n string: spel.string,\n leftvw: spel.leftvw,\n topvw: spel.topvw,\n html: spel.html\n });\n // array of spells added to paraName property of parasConfig\n parasConfig[paraNames[idx]].push(spel);\n });\n }\n return spels;\n}","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"getSpelArray = (spannedElem, size = 0) => {\n // builds the spels array of spel objects and returns styled spans for display\n let spelArray = [];\n let verseSpans = Array.from(spannedElem.children);\n verseSpans.forEach((span, idx) => {\n let spel = {};\n spel.id = span.innerText + \"_\" + (idx + size);\n spel.string = span.innerText;\n spel.leftvw = pxToVw(span.offsetLeft);\n spel.topvw = pxToVw(span.offsetTop);\n spel.html = `${span.innerHTML}`;\n spelArray.push(spel);\n });\n return spelArray;\n}","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"addSpansTo = (draftElem) => {\n let newText = ``; // this will hold html for the new draftSpanned cell\n let text = draftElem.innerHTML; // get existing innerHTML from from the pre element of verse cell\n let spelStart = text.search(/\\S/); // find the first spel by finding first nonwhitespace\n while (spelStart != -1) {\n newText += text.substr(0, spelStart); // grab everything up to that point\n text = text.substr(spelStart); // put the rest in text\n let spelEnd = text.search(/\\s/); // find where whitespace starts again\n if (spelEnd == -1) spelEnd = text.length; // text ends with nonwhitespace\n // wrap the spel we've found in span tags\n newText += `` + text.substr(0, spelEnd) + ``; // add this to newText\n text = text.substr(spelEnd); // put the rest in text\n spelStart = text.search(/\\S/); // find the next nonwhitespace (if any)\n }\n return `

${newText}

`; // wrap in pre tags of same class\n}","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2154,"value":"#### *Default linear* `scores` *produced by* `timeToRead()`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5741,"value":"scores = {\n let scores = [];\n let spelIdx = 0;\n let paraCells = config.get(\"paraCells\");\n for (let pIdx = 0; pIdx < paraCells.length; pIdx++) {\n let score = [];\n let paraElem = paraCells[pIdx];\n let paraSpels = parasConfig[config.get(\"paraNames\")[pIdx]];\n let pauses = [],\n pausesIdx = 0;\n let textToProcess = paraElem.innerText,\n s = textToProcess.search(/\\S/);\n while (s != -1) {\n let spaces = textToProcess.substr(0, s);\n textToProcess = textToProcess.substr(s);\n let l = textToProcess.search(/\\s/);\n if (l == -1) l = textToProcess.length;\n let word = textToProcess.substr(0, l);\n pauses.push(timeToRead(word, pausesIdx++, spaces, pauses));\n textToProcess = textToProcess.substr(l);\n s = textToProcess.search(/\\S/);\n }\n pauses.forEach((p, idx) => score.push({ id: paraSpels[idx].id, pause: p }));\n scores.push(score);\n }\n return scores;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5749,"value":"const timeToRead = (word, idx, spaces, pauses, factor = 1) => {\n let hundreths = 30;\n let vowelsOrPunc = word.match(/[aeiouy,:;\\.\\?]/gi);\n if (vowelsOrPunc) hundreths += (vowelsOrPunc.length * 15) / factor;\n if (idx - 1 > -1) {\n pauses[idx - 1] += (spaces.length * 7.5) / factor;\n let crs = spaces.match(/[\\n\\r]/gi);\n if (crs) pauses[idx - 1] += (crs.length * 100) / factor;\n }\n return hundreths;\n}","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5860,"value":"

SAMPLE\n \nCobbett’s View\n broad vista north\nThomas’ Stone\n high vista south

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"

CSS

\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"css","database":"$undefined"},{"id":2088,"value":"#### General utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1051,"value":"// converts pixel measurements to the more flexible vw (viewport width) measurement of css\npxToVw = (px) => px * (100 / vWidth) // document.documentElement.clientWidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5514,"value":"vWidth = Math.max(\n document.documentElement.clientWidth || 0,\n window.innerWidth || 0\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1680,"value":"// shuffles an array\nshuffle = (src) => {\n let a = [...src];\n let i = a.length;\n while (--i > 0) {\n let j = ~~(Math.random() * (i + 1)); // ~~ is a common optimization for Math.floor\n let t = a[j];\n a[j] = a[i];\n a[i] = t;\n }\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3479,"value":"randInt = (maxPlusOne) => (maxPlusOne * Math.random()) | 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3838,"value":"import { StrictObj } from \"@shadoof/utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4309,"value":"---\n### Spanned Drafts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4219,"value":"spanned1 = html`${await addSpansTo(draft1)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4388,"value":"spanned2 = html`${await addSpansTo(draft2)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5858,"value":"spanned3 = html`${await addSpansTo(draft3)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5876,"value":"---\n\n## Documentation Cells\nthat are not required for the actual work of configuration and scoring that you undertake on a specific piece, but you may retain these notes here for reference.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5877,"value":"### Configuration\nThe `config` object is used to represent the configuration of your piece. It describes it in terms of its paratextual and display constituents. Clearly paratextual elements become display elements but they do not necessarily correspond and you may need to configure them separately.\n\n**Paratextual elements**\n\n| Element | Status | Name |\n|-----------|------------|---------|\n| character | parsed | |\n| word | parsed | |\n| line | parsed | |\n| paragraph | configured | para(s) |\n| section | parsed | |\n| chapter | parsed | |\n| work | parsed | |\n\n**Display elements** distinct from those above must all be configured\n\n| Element | Name |\n|---------|---------|\n| spel | spel(s) |\n| column | clmn(s) |\n| screen | scrn(s) |\n\n‘Parsed’ here means, basically, that these elements are represented in your raw text and are then derived automatically from that a number of things.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5878,"value":"4 + 5","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"2"}} 2f:"$2e:body"