Micro:bit Inchworm Workshop Guide

An interactive, bilingual (English/Norwegian) step-by-step assembly guide for building a micro:bit inchworm robot. Designed for young learners aged 13-19. Generated with Claude Sonnet 4.5

Features

• Step-by-step navigation - One step per page with next/previous buttons
• Bilingual support - Toggle between English and Norwegian
• Keyboard navigation - Use arrow keys to navigate between steps
• Responsive design - Works on phones, tablets, and desktops
• Offline capable - Works without internet after initial load
• Zero dependencies - No build process, no npm, just HTML/CSS/JS
• Kantega Design System - Styled using an early experimental version of the Kantega design system

Design System

This project uses an early experimental working version of the Kantega design system located in the design-system/ folder. The design system provides:

• Kantega color palette, typography, and spacing tokens
• Design elements (logo, Kantega-streken, flytsone patterns)
• CSS custom properties for consistent styling
• Font Awesome 6 Free icons

Note: This is a work-in-progress design system used to apply the Kantega visual identity to the workshop. It demonstrates how the design tokens and guidelines can be implemented in a real project. The system may evolve as patterns and components are refined.

Quick Start

View Locally

1. Open index.html in any modern web browser (Chrome, Firefox, Safari, Edge)
2. Navigate using the Next/Previous buttons or arrow keys
3. Toggle language using the button in the top-right corner

Serve with a Local Server (Optional)

# Using Python 3
python3 -m http.server 8000

# Using Python 2
python -m SimpleHTTPServer 8000

# Then visit: http://localhost:8000

Editing Content

Adding or Editing Steps

All content is in the <script> section of index.html. Look for the content object:

const content = {
    en: {
        title: "Micro:bit Inchworm Assembly Guide",
        steps: [
            {
                title: "Step Title Here",
                description: "Step description here...",
                image: "images/step-01.jpg",
                alt: "Alt text for accessibility"
            },
            // Add more steps here
        ]
    },
    no: {
        // Norwegian translations
    }
};

To Add a New Step:

1. Add a new object to both en.steps and no.steps arrays
2. Fill in the title, description, image, and alt fields
3. Add the corresponding image to the images/ folder
4. Save and refresh the browser

To Edit a Step:

1. Find the step in the content object
2. Modify the text fields
3. Save and refresh

To Remove a Step:

1. Delete the step object from both language arrays
2. Renumber remaining steps if needed
3. Save and refresh

Adding Images

1. Take clear photos of each assembly step
2. Name them following the pattern: step-01.jpg, step-02.jpg, etc.
3. Place them in the images/ directory
4. Reference them in the content object: "image": "images/step-01.jpg"

Image Guidelines:

• Recommended size: 1200px wide
• Format: JPG, PNG, or WebP
• Keep file size under 500KB for fast loading
• Use consistent lighting and angles

Missing images: The page shows a gray placeholder with the filename when an image is missing.

Deployment to GitHub Pages

This will automatically deploy to the GitHub pages whenever you push any changes to the main branch.