examples/traverse-mode-up-down/traverse-mode-up-down.html

<!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":1598797322064,"collapsed":false,"xcor":6.0938441085645e-13,"ycor":-5.684341886080801e-13,"heading":359.9999999999999,"color":50,"shade":60,"pensize":5,"grey":200}],853,131,[null,25,null]],[1,"settimbre",867,204,[25,2,23,3]],[2,["voicename",{"value":"guitar"}],1018,204,[1]],[3,"hidden",867,330,[1,null]],[4,["newnote",{"collapsed":false}],1622,131,[21,5,8,12]],[5,"divide",1724,131,[4,6,7]],[6,["number",{"value":1}],1810,131,[5]],[7,["number",{"value":4}],1810,163,[5]],[8,"vspace",1636,163,[4,9]],[9,"pitch",1636,195,[8,10,11,26]],[10,["solfege",{"value":"do"}],1710,195,[9]],[11,["number",{"value":5}],1710,227,[9]],[12,"hidden",1622,320,[4,28]],[13,["newnote",{"collapsed":false}],1636,480,[39,14,17,18]],[14,"divide",1738,480,[13,15,16]],[15,["number",{"value":1}],1824,480,[14]],[16,["number",{"value":4}],1824,512,[14]],[17,"vspace",1650,512,[13,40]],[18,"hidden",1636,858,[13,54]],[19,["action",{"collapsed":false}],1608,90,[null,20,21,null]],[20,["text",{"value":"action"}],1740,99,[19]],[21,"hidden",1622,131,[19,4]],[22,["nameddo",{"value":"action"}],881,268,[23,null]],[23,"setcolor",881,236,[1,24,22]],[24,["number",{"value":50}],966,236,[23]],[25,"clear",867,172,[0,1]],[26,"print",1636,258,[9,27,null]],[27,["mynotevalue",{"value":0.25}],1710,258,[26]],[28,["storein2",{"value":"box1"}],1622,320,[12,29,30]],[29,["number",{"value":0}],1728,320,[28]],[30,["storein2",{"value":"box2"}],1622,352,[28,31,33]],[31,"divide",1728,352,[30,32,34]],[32,["number",{"value":360}],1814,352,[31]],[33,"vspace",1622,384,[30,35]],[34,["modelength",{"value":7}],1814,384,[31]],[35,"repeat",1622,416,[33,36,39,null]],[36,"multiply",1724,416,[35,38,37]],[37,["number",{"value":2}],1810,448,[36]],[38,["modelength",{"value":7}],1810,416,[36]],[39,"vspace",1636,448,[35,13]],[40,"ifthenelse",1650,544,[17,41,44,46,52]],[41,["less",{"value":false}],1745,544,[40,42,43]],[42,["namedbox",{"value":"box1"}],1810,544,[41]],[43,["modelength",{"value":7}],1810,576,[41]],[44,"steppitch",1664,607,[40,45,48]],[45,["number",{"value":1}],1800,607,[44]],[46,"steppitch",1664,702,[40,47,50]],[47,["number",{"value":-1}],1800,702,[46]],[48,"right",1664,639,[44,49,null]],[49,["namedbox",{"value":"box2"}],1738,639,[48]],[50,"left",1664,734,[46,51,null]],[51,["namedbox",{"value":"box2"}],1738,734,[50]],[52,"forward",1650,796,[40,53,null]],[53,["number",{"value":100}],1729,796,[52]],[54,"incrementOne",1636,858,[18,55,null]],[55,["namedbox",{"value":"box1"}],1719,858,[54]]]</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>