custom block palettes?

[ba...@code.org]

Hi David,

Long time listener, first time caller :)

I see that you have done a little housekeeping on the block palettes (I don't know what you call them - the set of blocks available in the left sidebar when in block programming mode) which leads me to one request, and one question.

The request is: could you move the block to define your own function into the "control" section instead of the math section (or maybe just make another copy of it there). We're very interested in teaching procedural abstraction as a means for better expression of algorithmic ideas in code, and initially as a way to get "control" (if you will) of more complex turtle moves, functions calling functions, etc.

The question is: as a teacher I'm interested in doing a "slow reveal" on language features so that students are not overwhelmed in the environment at first, and we can focus on solving problems with a more limited set of commands, and at the same time I'm trying to build into lessons a block-to-text transition for students, where we use the blocks for initial exploration, then start typing once dragging the blocks becomes cumbersome, but always having the blocks there for self-checking and I guess kind of like online documentation in a way.

So, is there a way that I could make (or that you could build in a way to make) a custom palette of blocks? I feel like this is sort of the path you are on with some of the activities in the gym. In other words, I'm trying to say this might be a useful feature for some of your activity sequences in the gym where you want students to get a little experience using only a few blocks at first that you then expand on :) To be clear, I'm not suggesting limiting the behavior of the language at all - you could always just type whatever code you want. I only want to present a more limited set of blocks in the left side-bar for lesson- or activity-specific problem solving reasons.

The idea is that we start with a very few commands, and as the course progresses we keep adding to the palette on the side. Also, to help aid the block-to-text transition, I imagine that maybe we'd actually want to take blocks away that we're comfortable typing and don't need the crutch of presenting the block anymore.

So this question has gotten long as I explain my rationale :) But to recap:
1. can the "define your own function" block be listed in the "Control" group of blocks instead of or in addition to Math?
2. Is there a future in which I can create my own custom palettes of blocks?

[ba...@code.org]

Sorry...didn't realize or want to be anonymous. Question above came from Baker at Code.org. We're beginning to design lessons for a our CSP curriculum using Pencil Code now :). So I might be asking a lot of questions.

[David Bau]

(+ google group)

Exchanged a little email with Baker.

Here is a summary of how you can embed your own curriculum inside Pencil Code.

(1) You can write a curriculum page on any normal webpage that you can host on your own website (or of course, on pencilcode too).

A simple sample I posted on my personal blog, unrelated to the pencilcode site - http://davidbau.com/pcg/sample.html

(2) Then you make a link that loads pencilcode on to a file with the lesson website attached to it:

http://pencilcode.net/edit/first#guide=http://davidbau.com/pcg/sample.html

(3) For most curriculum designers, that's it.  But for something awesome, you would end up writing script on your webpage that interacts with the PencilCodeGuide object to do things like simplify the palette or detect what the student is doing.

The above works now, but there aren't many things you can do from embedded pages yet.  Because Baker is interested in trying to use them, I'm going to shoot to add the ability to modify block-palettes from within these hosted curriculum pages by the new year.

David

[jgr...@googlemail.com]

I'm eagerly looking forward to seeing what Baker (and others) do with this flexibility. We are documenting our own 5th grade class here: http://3jlearneng.blogspot.com/search/label/coding

Any comments (including criticism) will be especially welcome!

Somewhat surprisingly, we've found that we have to do more "tell" teaching than expected, but pencilcode remains a great environment for them to explore and experiment.

[benda...@gmail.com]

Hi David, do you have any documentation on how one might do what you mentioned in #3 (eg, with the PencilCodeGuide object)? I'd like to be able to have a simplified pallete with custom simplified blocks for first-time learners.

[aol...@gmail.com]

I know this is an ancient thread, but I had the same question so thought I'd post the answer in case it helps someone. Use David's example, but add a script block in the header with your custom palette. Example:

<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>

[pet...@gmail.com]

I had trouble getting mine to work but eventually realized I needed to use https in the references rather than http as shown in David's example:  

await readstr "Enter your pencilcode account login", defer studentAcct

activity = "01-DotArt/Donut"

#This will create a new file in the student's directory if it doesn't 

# already exists (perhaps would be good to verify first that studentAcct is a valid acct)

studentURL = "https://#{studentAcct}.pencilcode.net/edit/#{activity}"

#this is the source file for the activity instructions

guideURL = "https://petusky.net/pencilcode/Activities/#{activity}.html"

guideWithCustomPaletteURL = "https://petusky.net/pencilcode/Activities/#{activity}WithPalette.html"

write "<h1><a href=\"#{studentURL}#guide=#{guideURL}\" >Example <strong>Dot Art!</strong> Activity, Donut</a></h1>"

write "<h1><a href=\"#{studentURL}WithPalette#guide=#{guideWithCustomPaletteURL}\" >Example <strong>Dot Art!</strong> Activity,  But with a modified Coding Blocks palette</a></h1>"

On Wednesday, November 26, 2014 at 6:10:07 PM UTC-6, David Bau wrote: