Challenges & Lessons

Tutor IDE offers a comprehensive challenge system with three types of tasks: step-by-step lessons, CSS Battle, and interactive lessons. Teachers assign challenges to students individually, to groups, or as entire learning paths. Students solve tasks in the editor, earn experience points, and track their progress.

---

Lessons (standard challenges)

Lessons are programming tasks with a ready-made code template and instructions. The student opens a lesson, reads the assignment, and writes the solution in the editor.

How does it work?

1. Teacher assigns a lesson -- selects a challenge and assigns it to a specific student or an entire group
2. Student opens the task -- the assigned lesson appears on the dashboard with instructions and starter code
3. Student writes the solution -- works in the editor, uses the live preview and AI assistant
4. System checks automatically -- if the teacher configured auto-grading rules, the score is calculated immediately upon submission
5. Teacher grades the work -- reviews the student's solution, adds code review annotations, and assigns a grade

Grading

The teacher grades each solution:

• Points (0--100) -- a numerical score for the quality of the solution
• Feedback -- written comments with tips and praise
• Due date -- the teacher can set a deadline for when the student should complete the task
• Auto-grade -- optional automatic scoring based on defined rules (see the Auto-Grading Rules section)

The student can see their grade, the teacher's feedback, and code annotations on the dashboard.

Challenge properties

Each challenge has the following attributes:

• Category -- HTML, CSS, JS, HTML+CSS, or Python
• Difficulty level -- 1 (beginner), 2 (intermediate), 3 (advanced)
• Creator (created_by) -- field tracking who created the challenge
• is_global flag -- global challenges are available to all organizations
• is_active flag -- allows deactivating a challenge without deleting it

---

CSS Battle

CSS Battle challenges require the student to recreate a target image using HTML and CSS. This is an excellent way to practice styling -- students learn element positioning, colors, shapes, and gradients.

What does a task look like?

• On the left side, the target image is displayed -- the pattern to recreate
• On the right, the student writes code in two tabs: index.html and style.css
• Below the editor, a live preview shows the student's code result alongside the target

Starter files

Each CSS Battle task starts with ready-made files:

• index.html -- <div></div> (a body fragment, not a full document)
• style.css -- body reset + empty div selector, ready to be filled in

The system automatically wraps these fragments into a complete HTML document for the preview.

Canvas configuration

Each CSS Battle task can have its own canvas dimensions:

• Width (canvas_width) -- defaults to 400px
• Height (canvas_height) -- defaults to 300px
• The teacher sets the dimensions when creating the task

Automatic scoring

The system compares the student's image with the target image pixel by pixel and calculates a match score (0--100%):

• 100% -- perfect! The student's image is identical to the target
• 80--99% -- very good, minor differences
• 50--79% -- a good start, but there are noticeable differences
• Below 50% -- worth trying again

XP bonuses for CSS Battle

Students earn bonus experience points for strong CSS Battle results:

• 90%+ match -- bonus +50 XP
• 100% match (pixel-perfect) -- bonus +100 XP

Helper tools

• Comparison slider -- the student can move a slider to overlay their image on the target and see where differences are
• Color palette -- colors used in the target image are displayed as clickable swatches, so the student doesn't have to guess color values. Colors are automatically extracted from the target code.
• Live preview -- every code change instantly updates the preview

---

Interactive Lessons

Interactive lessons are a third type of challenge that combines theory with practice in a single, structured experience. The student progresses through sequential content blocks, acquiring knowledge and immediately testing it.

Block types

Each interactive lesson consists of an ordered sequence of blocks:

Theory block (theory)

• Richly formatted text with headings, lists, and highlights
• Code examples with syntax highlighting
• Illustrations and diagrams
• Ideal for introducing a new concept or explaining an idea

Quiz block (quiz)

• Test questions that check understanding of the theory
• Various question formats (single choice, multiple choice)
• Instant feedback after answering
• The student must answer correctly to continue

Code task block (code_task)

• The student writes and runs code in the editor
• The task is linked to the previously covered theory
• Automatic verification of the solution's correctness
• Hints available if the student gets stuck

Block progression

• The student progresses through blocks in a fixed order -- skipping ahead is not allowed
• Each block must be completed before moving on to the next one
• Progress is saved automatically -- the student can return to the lesson at any time
• Once all blocks are completed, the lesson is marked as finished

Example interactive lesson flow

Lesson: Introduction to CSS Flexbox

1. Theory -- What is Flexbox? Explanation of display: flex, main axis and cross axis
2. Quiz -- "Which property sets the direction of the main axis?" (single choice question)
3. Task -- "Arrange three elements in a row using Flexbox"
4. Theory -- The justify-content and align-items properties
5. Quiz -- "Which justify-content value distributes elements evenly?"
6. Task -- "Center an element both vertically and horizontally in a container"

---

Learning Paths

Learning paths are ordered sequences of challenges that form a complete curriculum. Instead of assigning individual challenges, the teacher can assign an entire path, and the student progresses through it step by step.

Available languages

Learning paths are available for three programming languages:

• HTML+CSS -- from HTML basics to advanced CSS layouts
• JavaScript -- from variables and loops to interactive applications
• Python Turtle -- turtle graphics programming (ideal for younger students)

Difficulty tiers

Each path is divided into three tiers:

• Beginner -- fundamental concepts, simple tasks, plenty of support
• Intermediate -- more complex tasks, fewer hints
• Advanced -- challenges requiring independent thinking and creativity

Gate mechanism

Certain steps in a path are marked as gates (is_gate). Gates are key tasks that the student must complete before they can proceed further:

• Gates ensure that the student has mastered the fundamentals before moving on to harder tasks
• The teacher can see which students are stuck at gates
• Tasks between gates can be completed in any order

Student progress

Each student sees their progress in every assigned path:

• Progress bar -- a visual percentage indicator of path completion
• Step indicators -- each step in the path has its own marker (completed, current, locked)
• Percentage completion -- e.g., "You've completed 12 out of 20 tasks (60%)"

Assigning paths

Teachers assign entire paths to students or groups:

1. Open the Challenges panel in the admin dashboard
2. Select the Learning Paths tab
3. Choose a path -- e.g., "HTML+CSS: Beginner"
4. Assign to a student, a group, or multiple students at once
5. Monitor progress -- track which students have completed each step

Example path: HTML+CSS for Beginners

Step	Type	Title	Gate?
1	Interactive lesson	What is HTML?	No
2	Standard challenge	My First Page	Yes
3	Interactive lesson	Tags and Attributes	No
4	Standard challenge	Shopping List in HTML	No
5	Standard challenge	Photo Gallery	Yes
6	Interactive lesson	Introduction to CSS	No
7	CSS Battle	Colorful Square	No
8	Standard challenge	Stylish Business Card	Yes

---

Auto-Grading Rules

Teachers can configure automatic grading criteria for each challenge. The system checks the student's solution immediately upon submission and calculates a score based on the defined rules.

Rule types

Rule type	Description	Example
output_match	The code output must exactly match the expected value	Expected output: Hello World!
contains_element	The HTML code must contain a specific element	Required element: <ul> with at least 3 <li> items
css_property	A specific element must have a given CSS property	Element .container must have display: flex
code_contains	The source code must contain a specific fragment	Code must contain addEventListener
regex_match	The code or output must match a regular expression	Pattern: function\s+\w+\(.*\)

Rule configuration

Each rule has:

• Type -- one of the types listed above
• Expected value -- what exactly should be checked
• Points -- how many points the student earns for meeting the rule
• Hint (optional) -- a tip shown to the student if the rule is not met

Example configuration

Challenge: "Create a Shopping List"

Rule	Points	Hint
contains_element: page contains <ul>	20 pts	"Use the <ul> tag to create a list"
contains_element: list has at least 5 <li> items	30 pts	"Add at least 5 items to the list"
contains_element: page contains <h1>	20 pts	"Add a page heading"
css_property: ul has list-style-type	15 pts	"Change the list bullet style in CSS"
css_property: body has font-family	15 pts	"Set a custom font for the page"

Auto-grading workflow

1. Student submits the solution -- clicks the "Submit" button
2. System checks rules -- each rule is verified individually
3. Score calculation -- sum of points for met rules
4. Instant feedback -- the student sees which rules were met and which were not (with hints)
5. Teacher can override -- the teacher's manual score always takes priority over the auto-score

Auto-grading preview

The teacher can test the auto-grading rules on any student submission:

• Open a student's solution in the panel
• Click "Preview auto-grade"
• The system shows which rules are met and which are not
• Useful for verifying that rules are configured correctly

Batch grading

The teacher can grade multiple submissions at once:

• Select students in the table
• Click "Grade selected"
• Apply auto-grading to all selected submissions
• Optionally add a shared comment

---

Code Reviews

Teachers can conduct detailed code reviews of student submissions, adding annotations to specific lines of code.

Review workflow

Each submission has a review status:

1. Pending (pending) -- the solution has been submitted, awaiting review
2. In review (in_review) -- the teacher has started reviewing the code
3. Completed (completed) -- the review is finished, the student can see the annotations

Code annotations

The teacher adds annotations directly to specific lines of the student's code:

Annotation types

• Suggestion (suggestion) -- a proposal for improving the code, e.g., "You could use forEach instead of a for loop"
• Issue (issue) -- a bug or problem to fix, e.g., "This selector doesn't target the correct element"
• Praise (praise) -- positive feedback, e.g., "Great use of CSS variables!"

What does it look like for the student?

• The student opens their solution in the editor
• Lines with annotations are highlighted with colors:
  • Yellow -- suggestion
  • Red -- issue
  • Green -- praise
• Clicking a highlighted line reveals the annotation text
• The student can fix their code based on the teacher's feedback

Multiple reviews

Each submission can have multiple reviews -- for example, the first review after the initial submission, the second after the student's corrections. Review history is preserved, making it possible to track the student's progress over time.

Example workflow

1. Student submits their solution for "Photo Gallery"
2. Teacher opens the solution and changes the status to "In review"
3. Teacher adds annotations:
   • Line 5 (issue): "Missing alt attribute on the <img> tag"
   • Line 12 (suggestion): "Use gap instead of margin in Flexbox"
   • Line 18 (praise): "Nice color choices!"
4. Teacher marks the review as completed
5. Student sees the annotations in the editor and fixes the code
6. Student submits the corrected solution
7. Teacher conducts a second review

---

Gradebook

The gradebook is a comprehensive view that summarizes the results of all students in one place.

Matrix view

The gradebook displays data in a matrix format: challenges x students:

• Columns -- each challenge is a separate column
• Rows -- each student is a separate row
• Cells -- the student's score for the given challenge (points, percentage, or status)

Cell colors indicate status:

• Gray -- not assigned or not started
• Yellow -- in progress
• Green -- completed and graded
• Red -- past due

Filtering

The teacher can filter the view by:

• Challenge -- show only selected challenges or an entire path
• Student -- search for a specific student by name
• Status -- show only incomplete, completed, or past-due items
• Group -- show students from a selected group

CSV export

The teacher can export gradebook data to a CSV file:

• Click the "Export CSV" button
• The file contains: student name, challenge name, score, submission date, status
• Ideal for importing into external grading systems or spreadsheets

Batch operations

From the gradebook, the teacher can:

• Batch grade -- apply auto-grading to multiple submissions at once
• Batch assign -- assign a challenge to multiple students simultaneously
• Export selected -- export only selected rows to CSV

---

Challenge Management (teacher's perspective)

Creating challenges

Teachers can create their own challenges from the admin panel:

1. Open the Challenges tab in the admin panel
2. Click "New challenge"
3. Fill in the form:
   • Title and task description
   • Category (HTML, CSS, JS, HTML+CSS, Python)
   • Difficulty level (1--3)
   • Type: standard lesson, CSS Battle, or interactive lesson
   • Starter files (code template)
   • Auto-grading rules (optional)
4. Save and assign to students

Challenge visibility (two-tier management)

The system uses two-tier material management:

• The organization owner creates challenges and assigns them to teachers
• Teachers see only challenges they created themselves (created_by) or that were assigned to them by the owner
• The owner sees all challenges in the organization
• Teachers can also create their own challenges -- these will be visible only to them and the owner

This allows the owner to control which materials are available to each teacher while also enabling teachers to create their own materials.

Assigning challenges

1. Open the Admin Panel -- go to the Challenges tab
2. Select the type -- switch between the Lessons, CSS Battle, and Interactive Lessons tabs
3. Assign a challenge -- select a specific student or an entire group
4. Set a deadline (optional) -- specify a due date for the task
5. Check progress -- review student solutions, scores, and statuses
6. Grade the work -- apply auto-grading or manually grade with comments and annotations

Results overview

In the panel, the teacher can see:

• The list of students assigned to a given challenge
• Each student's status: not started, in progress, completed
• The score (for lessons -- teacher's grade or auto-score, for CSS Battle -- automatic score)
• Code review status: pending, in review, completed
• The submission date
• Learning path progress bar (if the challenge is part of a path)

---

Example Workflow

Scenario: HTML+CSS course for a class

1. Owner creates a learning path "HTML+CSS: Beginner" with 20 tasks
2. Owner assigns the path to teacher Ms. Smith
3. Ms. Smith assigns the path to her group "Class 5A"
4. Students start with the first step -- the interactive lesson "What is HTML?"
5. After completing the interactive lesson, students move on to the "My First Page" challenge (gate)
6. System automatically grades submissions based on auto-grading rules
7. Ms. Smith conducts code reviews on selected submissions, adding annotations
8. Students fix their code based on the annotations
9. Ms. Smith checks progress in the gradebook and exports a CSV report
10. Students who completed the gate automatically unlock the next tasks in the path