VisualPLC / learn-code-blockly

Practice coding with Blockly in the browser

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

blockly-js

Learn coding by draggin blocks instead of typing. Intended for use during first programming courses. Give students simple assignments, which they can run from the web browser console; or copy into an editor and run using Node.js.

This project uses Vanilla JavaScript and the following npm packages:

  • blockly - place and drag code blocks
  • driver.js - app tour
  • highlight - syntax highlighting for produced JS code
  • toastify-js - show popups
  • gh-pages - publish

Installation

  1. Fire up your console of choice in a suitable location
  2. git clone <repo git link>
  3. cd learn-code-blockly
  4. npm install
  5. npm run dev
  6. Open in your web browser and get coding

Challenges

If you're learning to code, here are some basic exercises for you in Swedish.

  1. Skriv ett program som skriver ut "Hello world" med hjälp av console.log.
  2. Skriv ett program med en variabel "x". Tilldela x värdet 11. Räkna ut vad x * 4 är och skriv ut resultatet.
  3. Skriv ett program med en variabel "y". Tilldela y värdet 10. Lägg in ett om-block. Om variabelns värde är mindre än 11 ska programmet skriva ut "Mindre än 11". Annars ska det skriva ut "Större än 10". När du kör programmet, kontrollera att det fungerar korrekt genom att ge y andra värden.
  4. Skriv ett program med en variabel "i". Variabeln ska ha värdet 1. Gör en loop med blocket "upprepa" som skriver ut värdet på variabeln, så länge det är mindre än 4. Dessutom ska variabelns värde ökas med 1 inuti loopen.

About

Practice coding with Blockly in the browser


Languages

Language:JavaScript 71.4%Language:CSS 22.4%Language:HTML 6.2%