Checklist

Description

Creates interactive checklists with persistent storage, hierarchical checking, and optional strikethrough effects. Perfect for task lists, course progress tracking, and interactive learning activities.

Usage

Wrap a list (ul or ol) in a container with class .checklist. Each list item becomes a checkable item. Use special syntax for conditional content display.

Available Options

CSS Classes:
- .checklist - Main container
- .strikethrough - Adds strikethrough effect to checked items
- .hide-after - Hides content after checking (on list items)
- .show-after - Shows content after checking (on list items)
Special Syntax:
- @ - Prefix for conditional content that shows after checking

Examples

Basic Checklist

Complete Week 1 readings
Submit Assignment 1
Participate in discussion forum
Take Week 1 quiz

Checklist with Strikethrough

Review course syllabus
Set up development environment
Complete first coding exercise
Submit initial project proposal

Hierarchical Checklist

Week 1
- Software Process Models
- Software Design Process
Week 2
- Reference Architectures
- Object Oriented Design
  - Assignment 1
  - Due date: 15 May 2018
Week 4
- Software Design Process
- Object Oriented Design

Checklist with Conditional Content (@ symbol)

Read Chapter 1
@ This chapter covers the fundamental concepts you'll need for the rest of the course.
Complete Exercise 1
@ The solution is available in the resources folder.
Submit Assignment 1
@ Remember to include your name and student ID in the header.

Checklist with Hide-After Content

Initial Setup Instructions
- Download required software
- Configure development environment
- Test installation
Advanced Configuration
- Set up version control
- Configure IDE settings
- Test advanced features

Checklist with Show-After Content

Complete Prerequisites
- Basic programming knowledge
- Understanding of data structures
- Familiarity with algorithms
Pass Initial Assessment
- Take placement test
- Submit coding sample
- Complete interview

Complex Checklist Example

Course Introduction
@ Welcome! This course will cover advanced programming concepts.
- Review syllabus
- Set up development environment
- Join class discussion forum
Module 1: Fundamentals
- Read Chapter 1
- Complete exercises 1-5
- Submit first assignment
Module 2: Advanced Topics
- Read Chapters 2-3
- Complete project proposal
- Present to class

Notes

Checklist state is automatically saved to browser's localStorage
Parent items are automatically checked when all children are checked
Use @ at the beginning of text to create conditional content
.hide-after hides content when item is checked
.show-after shows content when item is checked
.strikethrough adds strikethrough effect to checked items
Supports nested lists with automatic hierarchical checking
Each checklist gets a unique ID based on the page URL
Content is preserved across browser sessions