KidC Frontend

This directory contains the frontend code for the KidC platform.

Structure

  • index.html - Main HTML template
  • app.js - Main JavaScript application code
  • style.css - Custom CSS styles

Features

Learning Path

The learning path displays all available lessons in a structured sequence. Users can:

  • See their progress through the curriculum
  • Click on lessons to view content
  • Track completed exercises

Lesson Content

Lesson content is displayed in a markdown-like format with:

  • Headers and paragraphs
  • Code examples
  • Lists
  • Explanations of C programming concepts

Code Editor

The interactive code editor allows users to:

  • Write and edit C code
  • Run code to see output
  • Submit solutions for automated testing
  • Receive immediate feedback

Exercises

Each lesson includes exercises that:

  • Challenge users to apply what they've learned
  • Provide starter code
  • Test solutions against expected outputs
  • Track completion status

Technologies

  • Monaco Editor for the code editor
  • TailwindCSS for styling
  • Vanilla JavaScript for application logic