sugarlabs · asmit990 · May 11, 2025
diff --git a/cache.appcache b/cache.appcache
diff --git a/documentation/index.html b/documentation/index.html
@@ -54,7 +54,6 @@ <h2 id="getting-started">Getting Started</h2>
 <p>When you first launch Music Blocks in your browser, you&#39;ll see a stack
 of blocks representing three notes: <code>Sol 4</code>, <code>Mi 4</code>, and <code>Sol 2</code>. The
 first two notes are <code>1/4</code> notes; the third note is a <code>1/2</code> note.</p>
-<p><img src="../header-icons/play-button.svg" alt="play-button.svg" title="play button"></p>
 <p>Try clicking on the <em>Start</em> block or click on the <em>Play</em> button. You should hear the notes play in succession: <code>Sol</code> <code>Mi</code> <code>Sol</code>.</p>
 <p>To write your own programs, drag blocks from their respective palettes
 on the left side of the screen. Use multiple blocks in stack(s) to

diff --git a/documentation/index.html.bak b/documentation/index.html.bak
diff --git a/examples/12-Keys-Circles-and-Nth.html.bak b/examples/12-Keys-Circles-and-Nth.html.bak
@@ -0,0 +1 @@
+<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content="No description provided"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <title>My Project</title> <meta property="og:site_name" content="Music Blocks"/> <meta property="og:type" content="website"/> <meta property="og:title" content="Music Blocks Project - My Project"/> <meta property="og:description" content="No description provided"/> <style>body{background-color: #dbf0fb;}#main{background-color: white; padding: 5%; position: fixed; width: 80vw; height: max-content; margin: auto; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; color: #424242; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); font-family: "Roboto", "Helvetica","Arial",sans-serif;}h3{font-weight: 400; font-size: 36px; margin-top: 10px;}hr{border-top: 0px solid #ccc; margin: 1em;}.btn{border: solid; border-color: #96D3F3; padding: 5px 10px; line-height: 50px; color: #0a3e58;}.btn:hover{transition: 0.4s; -webkit-transition: 0.3s; -moz-transition: 0.3s; background-color: #96D3F3;}.code{word-break: break-all; height: 15vh; background: #f6f8fa; color: #494949; text-align: justify; margin-right: 10vw; margin-left: 10vw; padding: 16px; overflow: auto; line-height: 1.45; background-color: #f6f8fa; border-radius: 3px; font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;}.image{border-radius: 2px 2px 0 0; position: relative; background-color: #96D3F3;}.image-div{margin-bottom: 10px;}.moreinfo-div{margin-top: 20px;}h4{font-weight: 500; font-size: 1.4em; margin-top: 10px; margin-bottom: 10px;}.tbcode{margin-bottom: 10px;}</style></head><body> <div id="main"> <div class="image-div"><img class="image" id="project-image" src=""></div><h3 id="title">Music Blocks Project - My Project</h3> <p>No description provided</p><hr> <div> <div style="color: #9E9E9E"><p>This project was created in Music Blocks (<a href="https://musicblocks.sugarlabs.org" target="_blank">https://musicblocks.sugarlabs.org</a>). Music Blocks is a collection of tools for exploring fundamental musical concepts in a fun way. Music Blocks is a Free/Libre Software application. The source code can be accessed at <a href="https://github.com/sugarlabs/musicblocks" target="_blank">https://github.com/sugarlabs/musicblocks</a>. For more information, please consult the <a href="https://github.com/sugarlabs/musicblocks/tree/master/guide/README.md" target="_blank">Music Blocks Guide</a>.</p><p>To run this project, open Music Blocks in a web browser and drag and drop this file into the browser window. Alternatively, open the file in Music Blocks using the Load project button.</p></div><div class="moreinfo-div"> <div class="tbcode"><h4>Project Code</h4>This code stores data about the blocks in a project. <a href="javascript:toggle();" id="showhide">Show</a></div> <div class="code">[[0,["start",{"id":1708218272964,"collapsed":false,"xcor":-173.2050807568885,"ycor":99.99999999999977,"heading":90,"color":0,"shade":60,"pensize":5,"grey":85.71428571428571}],258,55,[null,28,null]],[1,"settimbre",272,192,[39,2,48,3]],[2,["voicename",{"value":"violin"}],423,192,[1]],[3,"hidden",272,948,[1,null]],[4,"arc",1185,265,[63,7,5,null]],[5,["number",{"value":100}],1259,360,[4]],[6,["deltapitch",{"value":1}],1431,265,[32]],[7,"multiply",1259,265,[4,32,8]],[8,["number",{"value":360}],1345,328,[7]],[9,["newnote",{"collapsed":false}],314,543,[37,10,13,16]],[10,"divide",416,543,[9,11,12]],[11,["number",{"value":1}],502,543,[10]],[12,["number",{"value":16}],502,575,[10]],[13,"vspace",328,575,[9,14]],[14,"scaledegree",328,607,[13,22,15,null]],[15,["number",{"value":4}],458,639,[14]],[16,"hidden",314,701,[9,30]],[17,["storein2",{"value":"box"}],300,256,[48,18,20]],[18,["number",{"value":0}],406,256,[17]],[19,"repeat",300,479,[62,35,37,42]],[20,"setkey2",300,288,[17,38,21,50]],[21,["modename",{"value":"major"}],376,320,[20]],[22,["namedbox",{"value":"box"}],458,607,[14]],[23,"everybeatdo",272,128,[28,24,39]],[24,["text",{"value":"action"}],412,128,[23]],[25,["action",{"collapsed":false}],1171,192,[null,26,27,null]],[26,["text",{"value":"action"}],1303,201,[25]],[27,"hidden",1185,233,[25,63]],[28,"setheading",272,96,[0,29,23]],[29,["number",{"value":90}],378,96,[28]],[30,"incrementOne",314,701,[16,31,null]],[31,["namedbox",{"value":"box"}],397,701,[30]],[32,"divide",1345,265,[7,6,33]],[33,["number",{"value":12}],1431,297,[32]],[34,["modelength",{"value":7}],488,479,[35]],[35,"plus",402,479,[19,34,36]],[36,["number",{"value":1}],488,511,[35]],[37,"vspace",314,511,[19,9]],[38,"number2pitch",376,288,[20,41]],[39,["storein2",{"value":"box2"}],272,160,[23,40,1]],[40,["number",{"value":0}],378,160,[39]],[41,["namedbox",{"value":"box2"}],520,288,[38]],[42,"storein",300,763,[19,43,66,68]],[43,["text",{"value":"box2"}],378,763,[42]],[44,["namedbox",{"value":"box2"}],550,795,[45]],[45,"plus",464,795,[66,44,46]],[46,["number",{"value":7}],550,827,[45]],[47,"vspace",300,858,[68,null]],[48,"repeat",286,224,[1,49,17,null]],[49,["number",{"value":13}],388,224,[48]],[50,"print",300,351,[20,52,60]],[51,["key",{"value":"C"}],460,351,[52]],[52,"plus",374,351,[50,51,53]],[53,"plus",460,383,[52,54,55]],[54,["text",{"value":" "}],546,383,[53]],[55,"plus",546,415,[53,59,56]],[56,"plus",632,447,[55,57,58]],[57,["text",{"value":" : "}],718,447,[56]],[58,["namedbox",{"value":"box2"}],718,479,[56]],[59,["currentmode",{"value":"major"}],632,415,[55]],[60,"vspace",300,383,[50,61]],[61,"vspace",300,415,[60,62]],[62,"vspace",300,447,[61,19]],[63,"setcolor",1185,233,[27,64,4]],[64,["outputtools",{"value":"pitch to color"}],1270,233,[63,65]],[65,["currentpitch",{"value":"C5"}],1484,233,[64]],[66,"mod",378,795,[42,45,67]],[67,["number",{"value":12}],464,858,[66]],[68,"vspace",300,826,[42,47]]]</div></div></div></div><script type="text/javascript">function toggle(){if (document.getElementsByClassName("code")[0].style.display=="none"){document.getElementsByClassName("code")[0].style.display="flex";document.getElementById("showhide").textContent = "Hide";} else {document.getElementsByClassName("code")[0].style.display="none";document.getElementById("showhide").textContent = "Show";}} var name=decodeURIComponent(window.location.pathname.split("/").pop().slice(0, -5)); var prefix="Music Blocks Project - "; var title=prefix+name; document.querySelector('meta[property="og:title"]').content=title; document.title=name; document.getElementById("title").textContent=title; document.getElementsByClassName("code")[0].style.display = "none";</script></body></html>
diff --git a/examples/12-bar-blues.html.bak b/examples/12-bar-blues.html.bak
diff --git a/examples/2-spelling-systems-for-Scale-Degree.html.bak b/examples/2-spelling-systems-for-Scale-Degree.html.bak
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content="No description provided"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <title>My Project</title> <meta property="og:site_name" content="Music Blocks"/> <meta property="og:type" content="website"/> <meta property="og:title" content="Music Blocks Project - My Project"/> <meta property="og:description" content="No description provided"/> <style>body{background-color: #dbf0fb;}#main{background-color: white; padding: 5%; position: fixed; width: 80vw; height: max-content; margin: auto; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; color: #424242; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); font-family: "Roboto", "Helvetica","Arial",sans-serif;}h3{font-weight: 400; font-size: 36px; margin-top: 10px;}hr{border-top: 0px solid #ccc; margin: 1em;}.btn{border: solid; border-color: #96D3F3; padding: 5px 10px; line-height: 50px; color: #0a3e58;}.btn:hover{transition: 0.4s; -webkit-transition: 0.3s; -moz-transition: 0.3s; background-color: #96D3F3;}.code{word-break: break-all; height: 15vh; background: #f6f8fa; color: #494949; text-align: justify; margin-right: 10vw; margin-left: 10vw; padding: 16px; overflow: auto; line-height: 1.45; background-color: #f6f8fa; border-radius: 3px; font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;}.image{border-radius: 2px 2px 0 0; position: relative; background-color: #96D3F3;}.image-div{margin-bottom: 10px;}.moreinfo-div{margin-top: 20px;}h4{font-weight: 500; font-size: 1.4em; margin-top: 10px; margin-bottom: 10px;}.tbcode{margin-bottom: 10px;}</style></head><body> <div id="main"> <div class="image-div"><img class="image" id="project-image" src=""></div><h3 id="title">Music Blocks Project - My Project</h3> <p>No description provided</p><hr> <div> <div style="color: #9E9E9E"><p>This project was created in Music Blocks (<a href="https://musicblocks.sugarlabs.org" target="_blank">https://musicblocks.sugarlabs.org</a>). Music Blocks is a collection of tools for exploring fundamental musical concepts in a fun way. Music Blocks is a Free/Libre Software application. The source code can be accessed at <a href="https://github.com/sugarlabs/musicblocks" target="_blank">https://github.com/sugarlabs/musicblocks</a>. For more information, please consult the <a href="https://github.com/sugarlabs/musicblocks/tree/master/guide/README.md" target="_blank">Music Blocks Guide</a>.</p><p>To run this project, open Music Blocks in a web browser and drag and drop this file into the browser window. Alternatively, open the file in Music Blocks using the Load project button.</p></div><div class="moreinfo-div"> <div class="tbcode"><h4>Project Code</h4>This code stores data about the blocks in a project. <a href="javascript:toggle();" id="showhide">Show</a></div> <div class="code">[[0,["start",{"id":1708218272964,"collapsed":false,"xcor":-173.2050807568885,"ycor":99.99999999999977,"heading":90,"color":0,"shade":60,"pensize":5,"grey":85.71428571428571}],258,55,[null,28,null]],[1,"settimbre",272,192,[39,2,48,3]],[2,["voicename",{"value":"violin"}],423,192,[1]],[3,"hidden",272,948,[1,null]],[4,"arc",1185,265,[63,7,5,null]],[5,["number",{"value":100}],1259,360,[4]],[6,["deltapitch",{"value":1}],1431,265,[32]],[7,"multiply",1259,265,[4,32,8]],[8,["number",{"value":360}],1345,328,[7]],[9,["newnote",{"collapsed":false}],314,543,[37,10,13,16]],[10,"divide",416,543,[9,11,12]],[11,["number",{"value":1}],502,543,[10]],[12,["number",{"value":16}],502,575,[10]],[13,"vspace",328,575,[9,14]],[14,"scaledegree",328,607,[13,22,15,null]],[15,["number",{"value":4}],458,639,[14]],[16,"hidden",314,701,[9,30]],[17,["storein2",{"value":"box"}],300,256,[48,18,20]],[18,["number",{"value":0}],406,256,[17]],[19,"repeat",300,479,[62,35,37,42]],[20,"setkey2",300,288,[17,38,21,50]],[21,["modename",{"value":"major"}],376,320,[20]],[22,["namedbox",{"value":"box"}],458,607,[14]],[23,"everybeatdo",272,128,[28,24,39]],[24,["text",{"value":"action"}],412,128,[23]],[25,["action",{"collapsed":false}],1171,192,[null,26,27,null]],[26,["text",{"value":"action"}],1303,201,[25]],[27,"hidden",1185,233,[25,63]],[28,"setheading",272,96,[0,29,23]],[29,["number",{"value":90}],378,96,[28]],[30,"incrementOne",314,701,[16,31,null]],[31,["namedbox",{"value":"box"}],397,701,[30]],[32,"divide",1345,265,[7,6,33]],[33,["number",{"value":12}],1431,297,[32]],[34,["modelength",{"value":7}],488,479,[35]],[35,"plus",402,479,[19,34,36]],[36,["number",{"value":1}],488,511,[35]],[37,"vspace",314,511,[19,9]],[38,"number2pitch",376,288,[20,41]],[39,["storein2",{"value":"box2"}],272,160,[23,40,1]],[40,["number",{"value":0}],378,160,[39]],[41,["namedbox",{"value":"box2"}],520,288,[38]],[42,"storein",300,763,[19,43,66,68]],[43,["text",{"value":"box2"}],378,763,[42]],[44,["namedbox",{"value":"box2"}],550,795,[45]],[45,"plus",464,795,[66,44,46]],[46,["number",{"value":7}],550,827,[45]],[47,"vspace",300,858,[68,null]],[48,"repeat",286,224,[1,49,17,null]],[49,["number",{"value":13}],388,224,[48]],[50,"print",300,351,[20,52,60]],[51,["key",{"value":"C"}],460,351,[52]],[52,"plus",374,351,[50,51,53]],[53,"plus",460,383,[52,54,55]],[54,["text",{"value":" "}],546,383,[53]],[55,"plus",546,415,[53,59,56]],[56,"plus",632,447,[55,57,58]],[57,["text",{"value":" : "}],718,447,[56]],[58,["namedbox",{"value":"box2"}],718,479,[56]],[59,["currentmode",{"value":"major"}],632,415,[55]],[60,"vspace",300,383,[50,61]],[61,"vspace",300,415,[60,62]],[62,"vspace",300,447,[61,19]],[63,"setcolor",1185,233,[27,64,4]],[64,["outputtools",{"value":"pitch to color"}],1270,233,[63,65]],[65,["currentpitch",{"value":"C5"}],1484,233,[64]],[66,"mod",378,795,[42,45,67]],[67,["number",{"value":12}],464,858,[66]],[68,"vspace",300,826,[42,47]]]</div></div></div></div><script type="text/javascript">function toggle(){if (document.getElementsByClassName("code")[0].style.display=="none"){document.getElementsByClassName("code")[0].style.display="flex";document.getElementById("showhide").textContent = "Hide";} else {document.getElementsByClassName("code")[0].style.display="none";document.getElementById("showhide").textContent = "Show";}} var name=decodeURIComponent(window.location.pathname.split("/").pop().slice(0, -5)); var prefix="Music Blocks Project - "; var title=prefix+name; document.querySelector('meta[property="og:title"]').content=title; document.title=name; document.getElementById("title").textContent=title; document.getElementsByClassName("code")[0].style.display = "none";</script></body></html>