python-turtle-workshop/index.html at main · illinigirl/python-turtle-workshop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Python Workshop 🐢</title>

  <!-- CodeMirror: a friendly code editor with Python syntax colors -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/dracula.min.css" />

  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- Loading screen while Python warms up (Pyodide is ~6MB the first time) -->
  <div id="boot">
    <div class="boot-box">
      <div class="boot-turtle">🐢</div>
      <h1>Warming up Python…</h1>
      <p id="boot-msg">Loading the Python engine. This takes a few seconds the first time.</p>
      <div class="boot-bar"><div id="boot-fill"></div></div>
    </div>
  </div>

  <!-- Who's coding? Pick a profile so progress saves to the right kid. -->
  <div id="picker">
    <div class="picker-box">
      <div class="boot-turtle">🐢</div>
      <h1>Who's coding today?</h1>
      <div id="picker-buttons"></div>
    </div>
  </div>

  <header>
    <div class="brand">🐢 Python Workshop</div>
    <button id="who" class="who-chip" title="Switch coder">👤 <span id="who-name">—</span> <span class="who-swap">⟳</span></button>
    <div id="badges" class="badges" aria-label="Earned unit badges"></div>
    <div class="progress-wrap">
      <div class="progress-bar"><div id="progress-fill"></div></div>
      <span id="progress-text">0 / 0</span>
    </div>
  </header>

  <div id="app">
    <!-- LEFT: list of lessons -->
    <nav id="sidebar">
      <ul id="lesson-list"></ul>
    </nav>

    <!-- RIGHT: the current lesson -->
    <main id="stage">
      <section id="lesson-panel">
        <div class="lesson-head">
          <span id="lesson-unit" class="unit-tag"></span>
          <h2 id="lesson-title"></h2>
        </div>
        <div id="lesson-intro"></div>
        <div id="lesson-task" class="task-box"></div>
        <div id="lesson-levelup" class="levelup-box"></div>
        <div id="lesson-steps" class="steps-box"></div>
      </section>

      <section id="workspace">
        <div id="editor-col">
          <div class="toolbar">
            <button id="run-btn" class="btn btn-run">▶ Run</button>
            <button id="clear-btn" class="btn">Clear screen</button>
            <button id="reset-btn" class="btn btn-ghost">↺ Reset code</button>
            <button id="solution-btn" class="btn btn-ghost">💡 Peek at an answer</button>
            <label class="speed">Turtle speed
              <input id="speed" type="range" min="1" max="11" value="4" />
            </label>
          </div>
          <div id="editor"></div>
          <div class="console-head">
            <span>Output</span>
            <button id="console-clear" class="mini">clear</button>
          </div>
          <pre id="console"></pre>

          <!-- AI helper: hidden unless the server reports a tutor is available -->
          <div id="help" class="hidden">
            <div class="help-head">
              <span>🙋 Stuck? Ask the helper</span>
              <span class="help-actions">
                <button id="explain-lesson" class="btn btn-ghost" type="button">📖 Explain this</button>
                <button id="check-work" class="btn btn-ghost" type="button">🔍 Check my work</button>
              </span>
            </div>
            <div id="help-chat"></div>
            <form id="help-form" autocomplete="off">
              <input id="help-input" type="text" maxlength="500"
                     placeholder="Ask anything… e.g. how do I put a blank line between prints?" />
              <button id="help-send" class="btn btn-run" type="submit">Ask</button>
            </form>
          </div>
        </div>

        <div id="canvas-col">
          <canvas id="turtle-canvas" width="560" height="560"></canvas>
          <div class="canvas-hint">Your turtle draws here 🐢</div>
          <div class="canvas-actions">
            <button id="save-drawing" class="btn btn-ghost" type="button">💾 Save my drawing</button>
            <button id="open-gallery" class="btn btn-ghost" type="button">🖼️ My gallery</button>
          </div>
        </div>
      </section>

      <!-- Saved-drawings gallery (hidden until opened) -->
      <div id="gallery-modal" class="modal hidden">
        <div class="modal-box">
          <div class="modal-head">
            <h2>🖼️ <span id="gallery-who"></span>'s gallery</h2>
            <button id="gallery-close" class="btn btn-ghost" type="button">✕ Close</button>
          </div>
          <div id="gallery-grid"></div>
        </div>
      </div>

      <div class="lesson-nav">
        <button id="prev-btn" class="btn btn-ghost">← Back</button>
        <button id="done-btn" class="btn btn-done">✓ I finished this!</button>
        <button id="next-btn" class="btn">Next →</button>
      </div>
    </main>
  </div>

  <!-- Code editor + Python runtime -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/python/python.min.js"></script>
  <script src="https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js"></script>

  <!-- Lesson content, then the app logic -->
  <script src="lessons.js"></script>
  <script src="workshop.js"></script>
</body>
</html>