First Steps: Computer Science

Code editors that grade themselves, turtle graphics, SQL against a real database, live HTML, and interactive plugins. Everything below runs in the browser. Try each one. The source is one click away under each example.

A function, graded

Write is_even(n) so that it returns True for even numbers. Press Run, then Check.

Show source

```python editor id="even-odd"
def is_even(n):
    # your code here
    pass
```

```python-check for="even-odd" points="10"
assert is_even(4) == True, "is_even(4) should be True"
assert is_even(7) == False, "is_even(7) should be False"
assert is_even(0) == True, "is_even(0) should be True"
```

The editor block is where students write and run code. The python-check block is invisible to them and runs when they click Check. Each assert is one test, its message is what the student sees. Add exam to the editor and the checks run silently, for a real exam.

Turtle graphics, graded against your solution

Draw a 3-step stairs made of three 30×30 squares with line colors red, yellow, green. Press Run and Check.

Show source

```python editor id="stairs-3"
import turtle
t = turtle.Turtle()
# student code
```

```python-check for="stairs-3"
solution = """
import turtle
t = turtle.Turtle()

for square in ["red", "yellow", "green"]:
    t.color(square)
    for side in range(6):
        t.forward(30)
        t.left(90)
    t.left(180)
"""
assert turtle_solution_matches(solution), "Draw a 3-step stairs of three 30×30 squares."
assert turtle_solution_matches(solution, match_colors=True), "Colors match red, yellow, green."
```

You write the solution in turtle yourself. The check compares the drawn figure, not the code, so a student who starts at a different corner or draws counter-clockwise still passes.

SQL against a real database

Query the top 10 most danceable genres in spotify.db: select name from genres and the average danceability of its tracks as avg_danceability. Press Run.

Show source

```sql editor db="spotify.db" solution="SELECT g.name AS genre, ROUND(AVG(t.danceability), 3) AS avg_danceability FROM genres g JOIN track_genres tg ON g.genre_id = tg.genre_id JOIN tracks t ON tg.track_id = t.track_id GROUP BY g.name ORDER BY avg_danceability DESC LIMIT 10;"
-- Student answer:
SELECT ...
```

Upload a .db file once. Every student gets their own copy in the browser, so DROP TABLE hurts nobody. The schema diagram next to the editor is picked up automatically from a file named spotify-schema.excalidraw.light.svg.

Plots and live data

Python in the browser includes matplotlib and can call public APIs. This plots all earthquakes of magnitude 4 or more from the last 7 days. Click Show code to see and change it.

Show source

```python editor id="quake-7" output-only height="500"
from pyodide.http import pyfetch
import matplotlib.pyplot as plt
...
plt.show()
```

output-only runs the code once on page load and shows just the plot. Students can open the code, change it, and rerun.

Predict the output

Students type what they think the program prints, then press Check answer. The answer is compared line by line, with partial credit and a diff.

for i in range(3):
    print(i * 2)
print("Done!")

Show source

```python
for i in range(3):
    print(i * 2)
print("Done!")
```

<question id="predict-loop" type="text" points="2">
What does this program print?

```expected
0
2
4
Done!
```
</question>

For an exam, put a <next-stage> line between the prediction and a runnable editor. Students must hand in the prediction before the editor appears, so nobody runs the code to get the answer. On exam pages there is no Check button; the diff appears on the returned exam.

HTML with live preview

The page on the right re-renders as you type. Change the color.

Show source

```html editor height="260"
<style>h1 { color: crimson }</style>
<h1>Hello</h1>
<button onclick="alert('Click!')">Click me</button>
```

Plugins

Interactive tools you drop into a page with one line. Below is a Dijkstra shortest-path visualizer. Press Play.

And a tool where students design and encode their own EAN-13 barcode. Press Play demo.

Show source

<plugin src="informatikgarten/dijkstra-visualizer" lang="en" initialnodecount="7" initialspeed="2000" ></plugin>

<plugin src="informatikgarten/barcode-editor" ></plugin>

Need a widget that does not exist yet? Describe it to an AI agent and publish it as a plugin. Both tools above were built that way.

Next

The full reference for editors, checks and scoring is under Code Editors & Scoring. Or look at the other subjects: Mathematics, Chemistry.