kareli lmarena 1
# Karel Programming Web Page Project
I'll create a complete HTML page similar to Stanford's Karel reader with an integrated code editor and execution environment.
## Project Structure
```
karel-project/
│
├── index.html
├── css/
│ └── styles.css
├── js/
│ ├── ace/
│ │ ├── ace.js
│ │ ├── mode-python.js
│ │ └── theme-monokai.js
│ ├── karel.js
│ └── main.js
└── README.md
```
## Complete Files
### 1. index.html
```html
Karel Programming - Interactive Lesson
```
### 2. css/styles.css
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
}
.container {
display: flex;
max-width: 1400px;
margin: 0 auto;
background-color: white;
min-height: 100vh;
}
/* Content Section */
.content-section {
flex: 1;
padding: 40px;
overflow-y: auto;
border-right: 1px solid #e0e0e0;
}
.content-section h1 {
color: #8C1515;
margin-bottom: 30px;
font-size: 2.5em;
border-bottom: 3px solid #8C1515;
padding-bottom: 10px;
}
.content-section h2 {
color: #2C5530;
margin-top: 30px;
margin-bottom: 15px;
font-size: 1.8em;
}
.content-section h3 {
color: #555;
margin-top: 25px;
margin-bottom: 12px;
font-size: 1.4em;
}
.lesson-content p {
margin-bottom: 15px;
font-size: 1.05em;
color: #444;
}
.lesson-content code {
background-color: #f4f4f4;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
color: #c7254e;
font-size: 0.95em;
}
.code-example {
background-color: #282c34;
border-radius: 5px;
padding: 20px;
margin: 20px 0;
overflow-x: auto;
}
.code-example pre {
margin: 0;
}
.code-example code {
color: #abb2bf;
background: none;
padding: 0;
font-size: 1em;
line-height: 1.5;
}
/* Interactive Section */
.interactive-section {
flex: 1;
display: flex;
flex-direction: column;
padding: 20px;
background-color: #fafafa;
}
.editor-container {
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin-bottom: 20px;
overflow: hidden;
}
.editor-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background-color: #8C1515;
color: white;
}
.editor-header h3 {
margin: 0;
font-size: 1.2em;
}
.editor-controls {
display: flex;
gap: 10px;
}
#editor {
height: 300px;
font-size: 14px;
}
/* Karel World */
.karel-world-container {
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin-bottom: 20px;
overflow: hidden;
}
.world-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background-color: #2C5530;
color: white;
}
.world-header h3 {
margin: 0;
font-size: 1.2em;
}
.world-info {
display: flex;
gap: 20px;
font-size: 0.95em;
}
#karelCanvas {
display: block;
margin: 0 auto;
background-color: white;
border-bottom: 1px solid #e0e0e0;
}
.world-controls {
padding: 15px 20px;
display: flex;
align-items: center;
gap: 10px;
background-color: #f9f9f9;
}
.world-controls label {
font-weight: 600;
}
.world-controls select {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1em;
cursor: pointer;
}
/* Console */
.console-container {
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
flex: 1;
display: flex;
flex-direction: column;
min-height: 150px;
}
.console-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background-color: #333;
color: white;
border-radius: 8px 8px 0 0;
}
.console-header h3 {
margin: 0;
font-size: 1.2em;
}
#console {
flex: 1;
padding: 15px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
overflow-y: auto;
background-color: #1e1e1e;
color: #d4d4d4;
}
#console .log {
margin-bottom: 5px;
color: #4ec9b0;
}
#console .error {
margin-bottom: 5px;
color: #f48771;
}
#console .success {
margin-bottom: 5px;
color: #6a9955;
}
/* Buttons */
.btn {
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 1em;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-run {
background-color: #4CAF50;
color: white;
}
.btn-run:hover {
background-color: #45a049;
}
.btn-run:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.btn-reset {
background-color: #ff9800;
color: white;
}
.btn-reset:hover {
background-color: #e68900;
}
.btn-step {
background-color: #2196F3;
color: white;
}
.btn-step:hover {
background-color: #0b7dda;
}
.btn-small {
padding: 5px 10px;
background-color: #555;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 0.85em;
}
.btn-small:hover {
background-color: #777;
}
/* Responsive Design */
@media (max-width: 1200px) {
.container {
flex-direction: column;
}
.content-section {
border-right: none;
border-bottom: 1px solid #e0e0e0;
}
}
@media (max-width: 768px) {
.content-section {
padding: 20px;
}
.content-section h1 {
font-size: 2em;
}
.editor-controls {
flex-wrap: wrap;
}
#karelCanvas {
width: 100%;
height: auto;
}
}
```
### 3. js/karel.js
```javascript
// Karel Engine - Simulates Karel the Robot
class Karel {
constructor(canvas) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.reset();
this.worlds = this.createWorlds();
this.animationSpeed = 300;
}
reset() {
this.x = 1;
this.y = 1;
this.direction = 0; // 0: East, 1: North, 2: West, 3: South
this.beepers = 0;
this.running = false;
this.grid = null;
this.currentWorld = 'simple';
this.loadWorld('simple');
}
createWorlds() {
return {
simple: {
width: 10,
height: 10,
walls: [],
beepers: [[5, 1, 1], [7, 1, 1], [9, 1, 1]],
karelStart: [1, 1, 0]
},
beepers: {
width: 10,
height: 10,
walls: [],
beepers: [[2, 2, 2], [4, 4, 3], [6, 3, 1], [8, 5, 2]],
karelStart: [1, 1, 0]
},
maze: {
width: 10,
height: 10,
walls: [
{x: 3, y: 1, side: 'north'},
{x: 3, y: 2,
Chapter 5: Karel Control Flow
Introduction to Control Flow
Control flow is how we make Karel make decisions and repeat actions.
In this chapter, we'll learn about if statements and while loops,
which are fundamental programming concepts.
The While Loop
A while loop allows Karel to repeat actions as long as a condition is true.
This is useful when you don't know exactly how many times Karel needs to do something.
while front_is_clear():
move()This code tells Karel to keep moving forward as long as there's no wall in front of him.
The If Statement
An if statement allows Karel to make decisions. Karel will only execute
the code inside the if statement if the condition is true.
if beepers_present():
pick_beeper()This code tells Karel to pick up a beeper only if there's one at the current location.
Combining Control Structures
We can combine while loops and if statements to create
more complex behaviors:
while front_is_clear():
move()
if beepers_present():
pick_beeper()Try It Yourself!
Below is an interactive Karel environment. Try modifying the code to make Karel navigate the world and collect beepers. Use the control flow concepts you've learned!
Code Editor
def main():
"""
Karel should move forward and pick up
all beepers in a row.
"""
while front_is_clear():
move()
if beepers_present():
pick_beeper()
if __name__ == "__main__":
main()
Karel's World
Ready
Beepers: 0
Comments
Post a Comment