CodeSwitch Documentation

Web Architect makes it easy to build professional websites using a visual interface. Add elements by dragging and dropping blocks from the toolbox.

Basic Workflow:

1. Drag blocks from the toolbox to your workspace
2. Customize block properties in the right panel
3. Preview your changes in real-time
4. Save or export your finished website

You can start with a blank canvas or choose from example templates to jumpstart your project.

Web Architect provides a variety of blocks to build your website, including:

• Document Block: The foundation of your page that sets up title and theme
• Navigation Elements: Headers, menus, and navigation links
• Content Blocks: Text, images, cards, and other content elements
• Forms: Interactive forms with various input fields
• Dynamic Content: Gallery, accordion, and other interactive elements

You can customize each block's properties using the panel on the right side of the editor.

Pro tip: Double-click on any block to collapse or expand it, making it easier to manage complex layouts and focus on specific sections.

Web Architect provides multiple ways to save and export your work:

Saving Projects:

• Page Naming: Save pages with specific filenames (e.g., "about" for about.html)
• Multi-page Projects: Create multiple HTML pages that work together
• Page Switching: Navigate between your created pages during editing

Exporting Options:

• Export HTML Project: Download a zip file containing all HTML files
• JSON Structure: View and edit the underlying JSON structure

Turtle Studio provides a simple way to learn programming by controlling a virtual turtle that can draw on a canvas.

Interface Overview:

• Code Editor: Write JavaScript or Python code
• Canvas: See your turtle drawings in real-time
• Playback Controls: Run, pause, and control execution speed
• Language Tabs: Switch between JavaScript and Python

You can select from pre-built lessons or create your own code from scratch.

Pro tip: When running your code, the currently executing line will be highlighted in the code editor, making it easier to follow the program flow.

Control the turtle with these basic commands:

Movement Commands:

• forward(distance): Move the turtle forward
• backward(distance): Move the turtle backward
• right(degrees): Turn right by specified degrees
• left(degrees): Turn left by specified degrees
• goto(x, y): Move directly to coordinates
• setHeading(angle): Set the turtle's direction

Pen Controls:

• penUp(): Stop drawing when moving
• penDown(): Start drawing when moving
• penColor(color): Change pen color
• penSize(width): Change pen thickness
• hide() / show(): Control turtle visibility

Fill Commands:

• beginFill(): Start filling shape
• endFill(): Complete shape and fill it
• fillColor(color): Set fill color

Language Limitations:

Turtle Studio supports basic programming constructs but has some limitations:

• Supported: Variables, loops (for/while), if/else statements, arrays, basic operators
• Not Supported: Ternary operators, switch/case statements, dictionaries/objects, function definitions, classes, try/catch blocks
• Language Conversion: When switching between JavaScript and Python, only supported features will be converted correctly
• Execution Environment: Only JavaScript code can be executed directly in the browser. Python code can be written and translated, but must be exported and run in a Python environment elsewhere

Turtle Studio provides several options for saving and sharing your code:

Saving Options:

• Copy Code: Copy your JavaScript or Python code to clipboard
• Download Code: Save your code as a JavaScript or Python file
• Import Code: Upload existing code files

Working with Lessons:

• Select Lessons: Choose from pre-built examples
• Programming Languages: Switch between JavaScript and Python