Message Boards Message Boards

[WSS19] Wolfram Language using Scratch Blocks

Main image


Introduction

Scratch is an Open Source Project that has as the main objective to teach children about programming from a very early age, its design paradigm comes from the idea of kids playing with Lego blocks, in the same way, that a specific LEGO® set may come with its instructions to let the children build its own toy, the kid can then disassemble and turn everything into something else. This is translated into this platform as having tutorials that help the kids realize what every code block does, so they can build something more complicated by their own.

The goal of this project was to create a web application to teach programming using Wolfram Language and Scratch Blocks as an interface. Among the main objectives of the project were:

  • Create a useful design experience for the kids, so that it's intuitive and interesting enough for them.

  • The ability for them to use their previous outputs to evaluate them using other functions, just like in a regular Mathematica Notebook.

  • Create a persistence layer, so that the web application maintains its state and can communicate correctly with the WL server.


Features:

Friendly Interface

  • Visual outputs, Functions focusing on visual stuff.

Tutorials

  • Ability to create tutorials so the kids can follow along

Tutorials Demo

Challenges

  • Ability to import challenges and check them on the backend

  • Challenges include blocks and instructions to be solved.

Challenges Demo

Reusable Outputs

  • Just like a regular Mathematica notebook, you can apply further transformations to the last output

  • You can also put the id of the output you want to use

Reusable outputs demo

Scalable

  • It is possible to add new Blocks, Tutorials and challenges easily

    // This code adds an additional Block for the ReverseSort Function.
            {
             opcode: 'reverseSort',
             blockType: BlockType.REPORTER,
             text: "ReverseSort?[LIST]?",
             arguments: {
              LIST: {
               type: ArgumentType.STRING
              }
             }
           }
     //...
    
    reverseSort(args,util) {
        return `ReverseSort[${args.LIST}]`;
    }
    

 (* This code adds additional challenges and has the ability to check them in the back end*)
CheckAnswer[resp_, problem_] :=
    With[{answers = <|
        ButterflyString :>
            SameQ[resp,"Pneumonou..."],
        MostCommonLetters :>
            SameQ[Sort[resp], {"d", "e", "g", "s", "y"}]
        (* ... *)
        |>},
      If[answers[problem], Style["Correct!", Green, 20],
        Style["Wrong!", Red, 20]]];

Conclusion

This Project was a great opportunity to showcase the abilities of the Wolfram Web Engine, and additionally learn to use some functions interactively to have an idea of the potential that this platform can offer to teach Children about the Wolfram Language, that's also the main reason why I tried to focus on activities that could only be done using it. I have always been amazed by how you can make awesome demonstrations and graphics with it writing very little code, having such potential accessible for children especially at a young age makes them spark an interest in pursuing STEM fields, and there is nothing like the feeling that has in them to build something functional and see it working for the first time. And with the infinite capabilities of the Wolfram Language, I can't wait to see what they will create.

Future Work

  • A method to have the blocks look less cluttered horizontally is still needed.

  • There is a potential for anyone to add additional WL functions and definitions, and they should work just as well, the same thing with additional tutorials and challenges. there is also the possibility to have everything in the cloud, so the user just needs to log in to get their project anywhere.

  • There is also the possibility to package everything as a standalone app for Desktop or Tablets.


Download

You can download the full code here, it is self contained (however you must have some kind of Wolfram Language Engine installed, like Mathematica Wolfram Desktop, etc.)

https://github.com/Mackaber/BlockyWL

References

11 Replies
Posted 4 years ago

Has anybody been able to get this to successfully installed and working with Mathematica on a Mac? And if so, exactly how?

POSTED BY: Updating Name

enter image description here - Congratulations! This post is now featured in our Staff Pick column as distinguished by a badge on your profile of a Featured Contributor! Thank you, keep it coming!

POSTED BY: Moderation Team

Ooops...I forgot to run npm install in the BlockyWL directory. I now did that, and I think it's stuck in an infinite loop: been running about 10 minutes, keep seeing "Installing Scratch VM dependencies".

POSTED BY: Murray Eisenberg

That's precisely what happens for me, yes.

POSTED BY: Arben Kalziqi
Posted 5 years ago

I think git clone is required so that the submodules are also cloned. On Mac OS.

eval "$(ssh-agent -s)"
ssh-add -K ~/.ssh/id_rsa
git clone --recurse-submodules git@github.com:Mackaber/BlockyWL.git
cd BlockyWL
npm install

No infinite loop, but fails with

No matching distribution found for wolframwebengine

Expected because I have not installed

https://pypi.org/project/wolframwebengine/

POSTED BY: Rohit Namjoshi

Your method of obtaining and running your Scratch with WL just does not work for me.

First, I made sure I had a github ssh key, was logged in at github, and had ssh-agent running. Still, the git-clone command failed. So finally I just did a direct download using the "Clone button" on your project page, then unzipped (and removed the "-master" appendage to the name of the resulting folder.

But now, npm start generate errors:

> blockywl@0.0.1 start /Users/murray/Downloads/BlockyWL
> concurrently 'npm:wl-*'

sh: concurrently: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! blockywl@0.0.1 start: `concurrently 'npm:wl-*'`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the blockywl@0.0.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
...
POSTED BY: Murray Eisenberg
Posted 5 years ago

Murray,

Did npm install succeed?

POSTED BY: Rohit Namjoshi

This is really cool, and I'd love to play with it—I've downloaded the source from github, but I can't get working (and neither can a few others I've spoken to). Would it be possible to get some guidance here on a fix, possibly with the help of @Kyle Keane ?

Thanks!

Arben

POSTED BY: Arben Kalziqi

Hi Arben, I just put the project in a separate directory and make sure it works as a new installation. Also, I included instructions on how to add new Functions/Challenges/Tutorials.

You can check it here: https://github.com/Mackaber/BlockyWL

Hey Miguel—thanks! I'm woefully unfamiliar with git, but I think you to set the permissions for the project to public? I get a permissions error when trying to use git clone via terminal. Failing that, I downloaded the zip, and I get the same problem as previously when trying to run npm install from the BlockyWL folder...

POSTED BY: Arben Kalziqi

Sorry for the inconvenience, This project makes use of submodules (separate projects to keep the code organized) you may need to generate an ssh key and upload it to Github, you can follow this guide: https://help.github.com/en/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent Alternatively you can download https://github.com/Mackaber/scratch-gui/ and https://github.com/Mackaber/scratch-vm/ separately and put both of them into the "client" directory.

Hope this solves the issue.

Reply to this discussion
Community posts can be styled and formatted using the Markdown syntax.
Reply Preview
Attachments
Remove
or Discard

Group Abstract Group Abstract