31:T60c,

## Todo: The next word button is falling off the bottom of the screen due to the height being huge and the code wants to put it on the last line. Having issues with embedding, I think it's because the waveSurfer isn't working well with the iframe. there are issues with formatting in firefox, which I will ignore for now. --- I need to refactor the code as I could do it using a loop or d3's .data() Long lines of text are truncated, I think there is some svg text attribute to wrap text errors **Kai is twice in the audio sample.** Kai (65) 67 Mania isn't there. ### other thoughts **It might be better to write this using html?** Would like to look at breaking words into their sounds, so the parts of the words show the letters that make the sounds. Look 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. Kaikōrero meaning gives away the answer ### Feature: > **Teina** junior relative, younger brother of a brother, younger sister of a sister People and their groups **taina** junior relative, younger brother of a brother, younger sister of a sister People and their groups These have the same description, so it might be an idea to change one of them. ### To add more words: https://docs.aws.amazon.com/polly/latest/dg/setting-up.html *the list is in order **Tenetene (also tara) vagina Body parts** is not read by the narrator. I guess it's a cultural thing.*
32:T1af9, 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 = rowSize // 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',wordSize[word.word]+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] console.log(r) teReo.start('0.001',r.start, r.length) return Tone.context.resume() }) 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() }33:[{"id":"09420f606167fac2e298a3a86b35820e69b74ec727aa6be8b4cb8864ac2c1a24c6435325660525cabca3eaa441c3ad41b9eaff75bd8d0cccb41868c0bbc2a0b9","href":"https://static.observableusercontent.com/files/09420f606167fac2e298a3a86b35820e69b74ec727aa6be8b4cb8864ac2c1a24c6435325660525cabca3eaa441c3ad41b9eaff75bd8d0cccb41868c0bbc2a0b9","name":"100 Māori words@4.tsv","type":"text/tab-separated-values","lastModified":1632345402433.589,"size":6972},{"id":"1e53c028320f9578a4fe63379ba8d1758d3b6cc48e6d5122c4e13f1df3f9174fbbe24e53d2a38ed4d2ae41a9cec51a0481c91d1721cfd04a7372a441973f7da4","href":"https://static.observableusercontent.com/files/1e53c028320f9578a4fe63379ba8d1758d3b6cc48e6d5122c4e13f1df3f9174fbbe24e53d2a38ed4d2ae41a9cec51a0481c91d1721cfd04a7372a441973f7da4","name":"mania.mp3","type":"audio/mpeg","lastModified":1632345402433.589,"size":25344},{"id":"1c1ebd986371d092d01fa8ca30cba7a730a5850c422f4ba21ddc9f68ec45d53a242aaab1cbc3211d4a6977aa41e6840cfd226de20c9a518550e835d36ba19321","href":"https://static.observableusercontent.com/files/1c1ebd986371d092d01fa8ca30cba7a730a5850c422f4ba21ddc9f68ec45d53a242aaab1cbc3211d4a6977aa41e6840cfd226de20c9a518550e835d36ba19321","name":"words.mp3","type":"audio/mpeg","lastModified":1632345402433.589,"size":3829355},{"id":"ed0c345d5fb6d6948bd5f3ba0a6a733d93510f1db075a667562cc33ffb5fc89afa4275e10ec48ddbe55fb383490886871fc235e41a7d7ab8e950f0abe6a7161d","href":"https://static.observableusercontent.com/files/ed0c345d5fb6d6948bd5f3ba0a6a733d93510f1db075a667562cc33ffb5fc89afa4275e10ec48ddbe55fb383490886871fc235e41a7d7ab8e950f0abe6a7161d","name":"nr.json","type":"application/json","lastModified":1632433069209.832,"size":6803}] 2f:{"title":"100 words of Te Reo Māori (tone.js version)","cells":[{"id":0,"value":"# 100 words of Te Reo Māori (tone.js version)\n### 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\nhttps://www.stuff.co.nz/science/113958987/mori-loanwords-enrich-twitter\n\nChanging to using [Tone.js](https://tonejs.github.io/)\n\nhttps://tonejs.github.io/docs/14.7.77/index.html\n\n\nSo I'm using the [player](https://tonejs.github.io/docs/14.7.77/Player)","pinned":false,"hidden":false,"mode":"md"},{"id":2801,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":1888,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":2826,"value":"I need to wait for the mp3 to be loaded before running other cells.\n

\nTone.loaded().then(() => {\n\tteReo.start();\n});\n

\n\n","pinned":true,"hidden":false,"mode":"md"},{"id":2848,"value":"teReo = new Tone.Player(await FileAttachment(\"words.mp3\").url()).toDestination();","pinned":true,"hidden":false,"mode":"ojs"},{"id":2901,"value":"viewof sample = Inputs.range([0, teRegions.length], {value: 0, step: 1, label: \"Sample\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2915,"value":"reo[sample] // display text realated to current sample","pinned":true,"hidden":false,"mode":"ojs"},{"id":2907,"value":"//teReo.start('0', teRegions[sample].start,teRegions[sample].length) // only works once the mp3 file os loaded","pinned":true,"hidden":false,"mode":"ojs"},{"id":2822,"value":"welcome = {\nTone.loaded().then(() => {\n//\tteReo.start('0.001', teRegions[85].start,teRegions[85].length) // Starts with saying Kia ora when the mp3 is loaded.\n return Tone.context.resume()\n});\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2818,"value":"Tone = require('tone')","pinned":true,"hidden":false,"mode":"ojs"},{"id":2860,"value":"toneform = html`\n

Play all the words in the Mp3

\n \n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2862,"value":"tcontrolButtons = { \n d3.select('#tplayb').on('click',() => teReo.start())\n d3.select('#tpauseb').on('click',() => teReo.pause())\n d3.select('#tstopb').on('click',() => teReo.stop(\"0\")) // stops the source 0 seconds from now) \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1544,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"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":2980,"value":"# todo \n*I should make a new file that includes index number, reo and teRegions *","pinned":false,"hidden":false,"mode":"md"},{"id":2034,"value":"teRegions = FileAttachment('nr.json').json()\n","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":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":2940,"value":"# workout the number of rows we can fit on a screen ","pinned":false,"hidden":false,"mode":"md"},{"id":2564,"value":"row = {\n let r = [];\n let s = (rowSize*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}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2612,"value":"rowSize = (textSize('M').height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2946,"value":"# computer the length of the words in pixels","pinned":false,"hidden":false,"mode":"md"},{"id":2233,"value":"wordSize = {\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).width)\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":2959,"value":"# Pick a word + 4 other meanings","pinned":false,"hidden":false,"mode":"md"},{"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') // next word svg button size","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() function\n\nTodo: \n\n>pass the font-size, font-family and font-weight to textSize() \n\nhttps://developer.mozilla.org/en-US/docs/Web/API/SVGTextContentElement \n

\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

\n## other sizing abilities:\nhttps://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/textLength","pinned":false,"hidden":false,"mode":"md"},{"id":1949,"value":"function textSize(text) {\n let testSize = d3.select('body').append('svg');\n testSize.append('text')\n .style('font-family','sans-serif') // I should pass these into the function\n .style('font-size', '42px')\n .text(text);\n\n let sel = testSize.selectAll('text').node()\n let width = sel.getComputedTextLength()\n let height = sel.getExtentOfChar(0).height\n testSize.remove()\n return {width, height}\n}\n// based on: https://gist.github.com/huytd/327e453c95ca3edadb32d0c867e2561b","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}