A collection of online, interactive labs that utilize a block-based program to enhance learning across many subjects.
Try it out here! blocklessons.com
This code could be improved a ton in a bunch of ways, but some of my top priorities right now are:
- Adding more cool labs!
- Finding a better way to access the
<canvas></canvas>
in the DOM without using Vue prototypes. - Fix the file structure and compartmentalize assets.
- Figure out subdomain redirects so that links to specific labs don't just redirect to the main page.
Are you a programmer? Contribute code by:
- Cloning the project
- Making a new branch with a name that makes sense
- Make bugfixes or even add a new lab!
- Make a pull request and email me @ tristrumtuttle at gmail (I sometimes miss GitHub notifications)
Anyone can help!
- Fill out this google form to suggest new labs: https://forms.gle/tC97pvWrfGy9L4zbA
This project uses Vue JS and npm. Some important files:
main.js
: AP Block is a SPA and the routes, plugins, etc are all set here. To add a new lab, make a component and import it / add the route to the list of routes here.App.vue
: This component renders the sub-components and holds the navbar, after adding a lab you can also add a link to it in the navbar.BlocklyComponent.vue
: This reusable component is imported into each lab and renders the blockly workspace. Any changes here will affect all labs, so beware!instructions/LabTab.vue
: This reusable component makes it easy to add lab instructions, look at the other labs for example usage. All images must be added to theassets/images
folder.
More tips:
- Each lab has a vue component file that holds the UI and a js file that holds the block definitions for the blockly workspace.
- Blockly workspace code for each lab should be run using the JS Interpreter - look at other labs for examples and read the documentation here: https://neil.fraser.name/software/JS-Interpreter/docs.html
- Use Vuex to get data into and out of the JS Interpreter so that it can render dynamically in the vue component.
- I've been setting up the
waitForSeconds
block differently from the other imported blocks, since it is used in every lab. Specifically, I define it directly in the vue component instead of in each lab's js file.
Useful links:
- Use this Blockly site to make blocks super easily: https://blockly-demo.appspot.com/static/demos/blockfactory/index.html
- The JS Interpreter is a tricky thing: https://neil.fraser.name/software/JS-Interpreter/docs.html
- The Blockly Vue example is also useful: https://github.com/google/blockly-samples/tree/master/examples/blockly-vue
- I use Vuex pretty extensively: https://vuex.vuejs.org/
Use npm to install dependencies:
npm install
Then run the app with hot-reloads for development:
npm run serve
npm run lint