31:T1aa1, svg_words = { const svg = d3.create('svg').attr("width", svg_w).attr("height", svg_h).attr('viewBox',`0 0 ${svg_w} ${svg_h}`) let space = wordSizes[word.word].height // should I destructure this, and height seems to be a constant svg.append('rect') .attr('id','wordRect') .attr('x',space/2) // .attr('y',space-(space*0.1)) // y position is off in firefox .attr('y',row[1]) // y position is off in firefox .attr('width',wordSizes[word.word].width+space) .attr('height',space-(space/8)) // maybe I should use rowSize .attr('rx',15) .attr('fill','#85CB33') .attr('stroke-width',1) .attr('stroke','#041B15') .attr('cursor','pointer') .on("click", () => { let r = teRegions[word.word] wavesurfer.play( r.start, r.end) }) svg.append('text') .attr('pointer-events','none') .style('font-family','sans-serif') .style('font-size', '42px') .style('alignment-baseline','hanging') .attr('x',space) .attr('y',row[1]) .attr('id', `word`) .text(reo[word.word].Māori); //----------------------------------------------------------------------- // guesses svg.append('rect') .attr('id','choice0') .attr('x',space/2) // .attr('y',space-(space*0.1)) // y position is off in firefox .attr('y',row[2]) // y position is off in firefox .attr('width',space) .attr('height',rowSize) .attr('rx',15) .attr('fill','#92AD94') .attr('stroke-width',3) .attr('stroke','#061A40') .attr('cursor','pointer') .on("click", () => { if (word.word === word.otherWords[0]) { d3.select('#choice0').attr('fill','red') } else { d3.select('#choice0').attr('fill','blue') } }) svg.append('text') .attr('pointer-events','none') .style('font-family','sans-serif') .style('font-size', '42px') .style('alignment-baseline','hanging') .attr('x',space*2) .attr('y',row[2]) .attr('id', `word`) .text(reo[word.otherWords[0]].meaning); // ----------- svg.append('rect') .attr('id','choice1') .attr('x',space/2) // .attr('y',space-(space*0.1)) // y position is off in firefox .attr('y',row[3]) // y position is off in firefox .attr('width',space) .attr('height',rowSize ) .attr('rx',15) .attr('fill','#92AD94') .attr('stroke-width',3) .attr('stroke','#061A40') .attr('cursor','pointer') .on("click", () => { if (word.word === word.otherWords[1]) { d3.select('#choice1').attr('fill','red') } else { d3.select('#choice1').attr('fill','blue') } }) svg.append('text') .attr('pointer-events','none') .style('font-family','sans-serif') .style('font-size', '42px') .style('alignment-baseline','hanging') .attr('x',space*2) .attr('y',row[3]) .attr('id', `word`) .text(reo[word.otherWords[1]].meaning); // ----------- svg.append('rect') .attr('id','choice2') .attr('x',space/2) // .attr('y',space-(space*0.1)) // y position is off in firefox .attr('y',row[4]) // y position is off in firefox .attr('width',space) .attr('height',rowSize ) .attr('rx',15) .attr('fill','#92AD94') .attr('stroke-width',3) .attr('stroke','#061A40') .attr('cursor','pointer') .on("click", () => { if (word.word === word.otherWords[2]) { d3.select('#choice2').attr('fill','red') } else { d3.select('#choice2').attr('fill','blue') } }) svg.append('text') .attr('pointer-events','none') .style('font-family','sans-serif') .style('font-size', '42px') .style('alignment-baseline','hanging') .attr('x',space*2) .attr('y',row[4]) .attr('id', `word`) .text(reo[word.otherWords[2]].meaning); // ----------- svg.append('rect') .attr('id','choice3') .attr('x',space/2) // .attr('y',space-(space*0.1)) // y position is off in firefox .attr('y',row[5]) // y position is off in firefox .attr('width',space) .attr('height',rowSize ) .attr('rx',15) .attr('fill','#92AD94') .attr('stroke-width',3) .attr('stroke','#061A40') .attr('cursor','pointer') .on("click", () => { if (word.word === word.otherWords[3]) { d3.select('#choice3').attr('fill','red') } else { d3.select('#choice3').attr('fill','blue') } }) svg.append('text') .attr('pointer-events','none') .style('font-family','sans-serif') .style('font-size', '42px') .style('alignment-baseline','hanging') .attr('x',space*2) .attr('y',row[5]) .attr('id', `word`) .text(reo[word.otherWords[3]].meaning); // ----------- svg.append('rect') .attr('id','choice4') .attr('x',space/2) // .attr('y',space-(space*0.1)) // y position is off in firefox .attr('y',row[6]) // y position is off in firefox .attr('width',space) .attr('height',rowSize ) .attr('rx',15) .attr('fill','#92AD94') .attr('stroke-width',3) .attr('stroke','#061A40') .attr('cursor','pointer') .on("click", () => { if (word.word === word.otherWords[4]) { d3.select('#choice4').attr('fill','red') } else { d3.select('#choice4').attr('fill','blue') } }) svg.append('text') .attr('pointer-events','none') .style('font-family','sans-serif') .style('font-size', '42px') .style('alignment-baseline','hanging') .attr('x',space*2) .attr('y',row[6]) .attr('id', `word`) .text(reo[word.otherWords[4]].meaning); // ------------------------------------------------- // next button svg.append('rect') .attr('id','nextRect') .attr('x',space/2) .attr('y',row[row.length-1]) .attr('width',nextWord.width+space) .attr('height',space-(space/4)) .attr('rx',15) .attr('fill','#EF946C') .attr('cursor','pointer') .attr('stroke-width',3) .attr('stroke','#A01A40') .on("click", () => { mutable word = pickWords() // This causes this svg_words cell to redraw. // d3.select('#wordRect') // .attr('x',space/2) // .attr('y',space-(space*0.1)) // y position is off in firefox // .attr('width',wordSizes[word.word].width+space) // .attr('height',space) // d3.select('#word') // .attr('x',svg_w*0.04) // .attr('y',svg_h*0.1) // .text(reo[word.word].Māori); }) svg.append('text') .attr('pointer-events','none') .style('font-family','sans-serif') .style('font-size', '42px') .style('alignment-baseline','hanging') .attr('x',svg_w*0.04) .attr('y',row[row.length-1]) .attr('id', `next`) .text('Next Word'); return svg.node() }32:[{"id":"1c1ebd986371d092d01fa8ca30cba7a730a5850c422f4ba21ddc9f68ec45d53a242aaab1cbc3211d4a6977aa41e6840cfd226de20c9a518550e835d36ba19321","href":"https://static.observableusercontent.com/files/1c1ebd986371d092d01fa8ca30cba7a730a5850c422f4ba21ddc9f68ec45d53a242aaab1cbc3211d4a6977aa41e6840cfd226de20c9a518550e835d36ba19321","name":"words.mp3","type":"audio/mpeg","lastModified":1631721763798.852,"size":3829355},{"id":"d29eaffa65516130c43621acea00b2005d68dc34771a224cea9090a4b2446e4e6220873214716571fc5d6dbf012bfc261af3d5054c22cb0f6b04162d60df661e","href":"https://static.observableusercontent.com/files/d29eaffa65516130c43621acea00b2005d68dc34771a224cea9090a4b2446e4e6220873214716571fc5d6dbf012bfc261af3d5054c22cb0f6b04162d60df661e","name":"regionsJSON (1).json","type":"application/json","lastModified":1631924823055.642,"size":10609},{"id":"33a504b175acc191493b54ae1af9fdd771327013bef00b41c9033bc49a491256f997ee93caf957309d5461c51875b2fc5bee95b97b3caa2d4f52d45c45fb9354","href":"https://static.observableusercontent.com/files/33a504b175acc191493b54ae1af9fdd771327013bef00b41c9033bc49a491256f997ee93caf957309d5461c51875b2fc5bee95b97b3caa2d4f52d45c45fb9354","name":"100 Māori words@3.tsv","type":"text/tab-separated-values","lastModified":1632259027382.621,"size":6972},{"id":"09420f606167fac2e298a3a86b35820e69b74ec727aa6be8b4cb8864ac2c1a24c6435325660525cabca3eaa441c3ad41b9eaff75bd8d0cccb41868c0bbc2a0b9","href":"https://static.observableusercontent.com/files/09420f606167fac2e298a3a86b35820e69b74ec727aa6be8b4cb8864ac2c1a24c6435325660525cabca3eaa441c3ad41b9eaff75bd8d0cccb41868c0bbc2a0b9","name":"100 Māori words@4.tsv","type":"text/tab-separated-values","lastModified":1632259791841.84,"size":6972},{"id":"1e53c028320f9578a4fe63379ba8d1758d3b6cc48e6d5122c4e13f1df3f9174fbbe24e53d2a38ed4d2ae41a9cec51a0481c91d1721cfd04a7372a441973f7da4","href":"https://static.observableusercontent.com/files/1e53c028320f9578a4fe63379ba8d1758d3b6cc48e6d5122c4e13f1df3f9174fbbe24e53d2a38ed4d2ae41a9cec51a0481c91d1721cfd04a7372a441973f7da4","name":"mania.mp3","type":"audio/mpeg","lastModified":1632262451302.272,"size":25344}] 2f:{"title":"100 words of Te Reo Māori: Māku (for me, by me)","cells":[{"id":0,"value":"# 100 words of Te Reo Māori: Māku (for me, by me)\n\nClick on the word to hear the pronunciation. \nClick on the square boxes to pick the words meaning.\n\n \nFrom https://nzhistory.govt.nz/culture/maori-language-week/100-maori-words\n\n[RNZ's Mark Bullen with words of encouragement for those learning te reo Māori](https://www.youtube.com/watch?v=qNtErmd2l4U)\n","pinned":false,"hidden":false,"mode":"md"},{"id":1888,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2801,"value":"

\n## Todo:\n \n*the list is in order **Tenetene\t(also tara) vagina\tBody parts** is not read by the narrator. I guess it's a cultural thing.*\n\n\nHaving issues with embedding, I think it's because the waveSurfer isn't working well with the iframe.\n\nthere are issues with formatting in firefox, which I will ignore for now.\n\n--- \n\n\nI need to refactor the code as I could do it using a loop or d3's .data()\n\nLong lines of text are truncated, I think there is some svg text attribute to wrap text\n\nerrors **Kai is twice in the audio sample.**\n\nKai (65)\n\n67 Mania isn't there. \n\n### other thoughts\n\n**It might be better to write this using html?**\n\nWould like to look at breaking words into their sounds, so the parts of the words show the letters that make the sounds.\n\nLook at making a word cloud based of the 100 words contect. When the words there are clicked they play the sound and also show the english description. \n\n
","pinned":true,"hidden":false,"mode":"md"},{"id":1544,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":430,"value":"waveform = html`WaveForm \n

\n \n

`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1273,"value":"viewof zoom = Object.assign(Inputs.range([0, 500], {value: 45, label: \"Zoom\", step: 1 }), {\n oninput: event => event.isTrusted && event.stopImmediatePropagation(),\n onchange: event => event.currentTarget.dispatchEvent(new Event(\"input\"))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1839,"value":"// the speed change might need to happen as it changes are it bugs out the cursor play position\nviewof playSpeed = Object.assign(Inputs.range([0.9, 1.1], {value: 1, label: \"Play Back Speed\", step: 0.1 }), {\n oninput: event => event.isTrusted && event.stopImmediatePropagation(),\n onchange: event => event.currentTarget.dispatchEvent(new Event(\"input\"))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1861,"value":"regionsJSON = { // for saving region data\n\n let regs = []\n for (let index = 0; index < regies.length; index++) {\n \n regs.push({ \n start: wavesurfer.regions.list[regies[index]].start,\n end: wavesurfer.regions.list[regies[index]].end,\n loop: false,\n drag: false,\n resize: false\n })\n }\n return regs\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1433,"value":"regies = Object.keys(wavesurfer.regions.list) // should not start playing.. I have to stop playing and then return regies to fix bug\n// it plays the first region in the list. I could add an empty region or do the above.","pinned":true,"hidden":false,"mode":"ojs"},{"id":1841,"value":"playSpeed_function = // update volume level\nwavesurfer.setPlaybackRate(playSpeed)","pinned":true,"hidden":false,"mode":"ojs"},{"id":787,"value":"zoom_function = // update zoom level\nwavesurfer.zoom(zoom)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1475,"value":"wavesurfer.on('region-click', function(region, e) {\n e.stopPropagation();\n region.loop = false; // set region to not loop by default\n\n // if ctrl key pressed delete region\n // Play on click and Play_loop on shift click\n e.ctrlKey ? region.remove() : e.shiftKey ? region.playLoop() : region.play();\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":1627,"value":"wavesurfer.on('region-created', function(region, e) {\n region.color = 'rgba(0, 200, 0, 0.1)'\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":1642,"value":"// wavesurfer.un('region-created', function(region, e) { // remove event\n// region.color = 'rgba(0, 200, 0, 0.1)'\n// });","pinned":true,"hidden":false,"mode":"ojs"},{"id":1367,"value":"wavesurfer.regions.list","pinned":true,"hidden":false,"mode":"ojs"},{"id":1468,"value":"wavesurfer.regions.list[regies[0]].play()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1380,"value":"// wavesurfer.clearRegions()\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":571,"value":"controlButtons = { \n d3.select('#playb').on('click',() => wavesurfer.playPause())\n d3.select('#pauseb').on('click',() => wavesurfer.pause())\n d3.select('#stopb').on('click',() => wavesurfer.stop()) \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":680,"value":"wavesurfer = {\n \n d3.select('#wavDiv > wave').remove() // delete the wave displayed in the div to prevent doubleup on reload after changes\n \n let ws = WaveSurfer.create({\n container: '#wavDiv',\n waveColor: '#048BA8',\n progressColor: '#F2CE4C',\n cursorColor: '#A4036F',\n cursorWidth: 1,\n height: 300,\n scrollParent: true,\n plugins: [\n cursor.create({\n showTime: true,\n opacity: 1,\n customShowTimeStyle: {\n 'background-color': '#004', // can't use alpha channel rgba(0, 0, 4, 0.2) as the text doesn't get complely cleared\n color: '#ffa',\n padding: '2px',\n 'font-size': '12px'\n }\n }),\n regions.create({\n regionsMinLength: 0.5,\n regions: teRegions\n // \n ,\n dragSelection: {\n slop: 5\n }\n })\n ]\n});\n \nws.load(audioURL)\n \nreturn ws}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2044,"value":"# load files","pinned":false,"hidden":false,"mode":"md"},{"id":1006,"value":"audioURL = await FileAttachment(\"words.mp3\").url()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2808,"value":"FileAttachment(\"mania.mp3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2034,"value":"teRegions = FileAttachment(\"regionsJSON (1).json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1882,"value":"reo = FileAttachment(\"100 Māori words@4.tsv\").tsv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1884,"value":"viewof table = Inputs.table(reo, {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"WaveSurfer = require(\"https://unpkg.com/wavesurfer.js/dist/wavesurfer.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1017,"value":"regions = require(\"https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.regions.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1027,"value":"cursor = require(\"https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.cursor.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":733,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1889,"value":"svg_w = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":1891,"value":"svg_h = Math.ceil(width/2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2564,"value":"// number of rows we can fit on a screen \n\nrow = {\n let r = [];\n let s = (textSize('M').height*1.5) // font height in pixels + padding\n \n for (let y = 0; y < ~~(svg_h / s); ++y) {\n r.push(~~(y*s))\n }\n return r\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2612,"value":"rowSize = (textSize('M').height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2233,"value":"wordSizes = { // maybe I don't need the height\n svg_w // run if screen size changes\n let ws = []\n for (let i = 0; i < reo.length; ++i) {\n ws.push(textSize(reo[i].Māori,'words'))\n }\n return ws\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2465,"value":"// returns a random word and and array for 5 random words including the test word\nmutable word = pickWords()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2671,"value":"function pickWords()\n{\n\n let w = randomWord() // our random word\n let otherWords = []\n \n otherWords.push(w)\n \n for (let i = 0; i < 4; ++i) {\n otherWords.push(pick(otherWords))\n }\n\n d3.shuffle(otherWords)\n return {word:w, otherWords}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2642,"value":"function pick(numbers){\n let p = randomWord()\n return (numbers.includes(p))? pick(numbers) : p\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2406,"value":"nextWord = textSize('Next Word')","pinned":true,"hidden":false,"mode":"ojs"},{"id":2355,"value":"randomWord = d3.randomInt(0, reo.length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1985,"value":"## textSize()\nTodo: \npass the font-size, font-family and font-weight to textSize() \nThat could be easier to manage with css\n\nhttps://developer.mozilla.org/en-US/docs/Web/API/SVGTextContentElement \n\n### other sizing abilities:\nhttps://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/textLength\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":1949,"value":"// https://developer.mozilla.org/en-US/docs/Web/API/SVGTextContentElement \n// .getRotationOfChar(1)\n// .getExtentOfChar(0) // returns a SVG rect object fo the charaters dimentions { height: ,width: ,x: ,y: }\n// .getSubStringLength(0,4) // get the length of sub string\n// .getEndPositionOfChar(4)\n// .getStartPositionOfChar(4) \n// .getNumberOfChars()\n// .getExtentOfChar(0)\n\nfunction textSize(text) {\n let testIt = d3.select('body').append('svg');\n testIt.append('text')\n .style('font-family','sans-serif')\n .style('font-size', '42px')\n .text(text);\n\n let sel = testIt.selectAll('text').node()\n let width = sel.getComputedTextLength()\n let height = sel.getExtentOfChar(0).height\n testIt.remove()\n return {width, height}\n}\n// based on: https://gist.github.com/huytd/327e453c95ca3edadb32d0c867e2561b","pinned":true,"hidden":false,"mode":"ojs"},{"id":1993,"value":"textSize('Marae','words')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}