PencilCode / pencilcode

An online IDE for kids: pencilcode.net.
http://dev.pencilcode.net/
MIT License
167 stars 100 forks source link

Custom palette using guide requires user be logged in, making link sharing difficult #250

Open aolney opened 5 years ago

aolney commented 5 years ago

Accidentally posted against the wrong project initially. Reposting

Using David's custom block suggestion, with a guide, I find that I can load a guide with a custom blocks palette but only if the user is logged in, e.g.:

http://eleventy.pencilcode.net/edit/first#guide=https://umdrive.memphis.edu/aolney/public/pencilcode/1-functions-maps.html

If I use a bare domain, e.g.:

http://pencilcode.net/edit/first#guide=https://umdrive.memphis.edu/aolney/public/pencilcode/1-functions-maps.html

The guide will load, but I get a popup error "Cannot Load" for the rest. I assume there is some kind of authentication or session management that needs to happen.

Ideally I'd like to send students a link that works for them. Right now, I'm asking them to log in and then copy/paste the guide portion of the url onto their url.

To set up my custom palette, I'm calling this script on the guide page:

<script>
//required for palette
function filterblocks(a) {
  // Show 'say' block only on browsers that support speech synthesis.
  if (!window.SpeechSynthesisUtterance || !window.speechSynthesis) {
    a = a.filter(function(b) { return !/^@?say\b/.test(b.block); });
  }
  // Show 'listen' blocks only on browsers that support speech recognition.
  if (!window.webkitSpeechRecognition || window.SpeechRecognition) {
    a = a.filter(function(b) { return !/\blisten\b/.test(b.block); });
  }
  return a.map(function(e) {
    if (!e.id) {
      // As the id (for logging), use the first (non-puncutation) word
      e.id = e.block.replace(/^\W*/, '').
             replace(/^new /, '').replace(/\W.*$/, '');
      // If that doesn't turn into anything, use the whole block text.
      if (!e.id) { e.id = e.block; }
    }
    return e;
  });
}

//  This is where we customize the blocks palette 
PencilCodeGuide.session(
    {
        palette : [
            {
                name: 'Snippets',
                color: 'deeporange',
                blocks: filterblocks([
                    {
                        block: "encode = (x)->\n  map = new Map\n  map.set('a','.-')\n  map.get( x )",
                        title: 'Define an encoding using a map',
                        id: "encode-definition"
                    },
                    {
                        block: "write encode('a')",
                        title: 'Encode a letter using the encode function and write it out',
                        id: "encode"
                    }
                    ])
            }
        ]
    }
);
</script>