# CHEM-1112 General Chemistry II Lab Course Repository

**Texas State Technical College - Chemistry Department**

## 📚 Course Information
- **Course**: CHEM-1112 General Chemistry II Lab
- **Institution**: Texas State Technical College
- **Department**: Chemistry Department
- **Instructional Designer**: Tammy ([@edutechtammy](https://github.com/edutechtammy))
- **Subject Matter Expert**: Agapito Serrato

## 🎯 Repository Purpose
This repository contains the complete course content for CHEM-1112 General Chemistry II Lab, designed for delivery through Canvas LMS. The course has been running for multiple semesters with continuous improvement each cycle.

## 🔄 Current Development Focus
We are actively working on several improvement initiatives:

### 🚨 Priority: Lesson Content Remediation
**Immediate Focus**: Address significant gaps in current lesson content
- **Content Audit**: Systematic review of all existing lessons to identify deficiencies
- **Missing Resources**: Fix broken links and add missing PDFs, worksheets, and references
- **Content Gaps**: Enhance minimal lessons that rely too heavily on third-party Labflow content
- **Student Support**: Add comprehensive explanations, examples, and guidance for better student outcomes
- **Quality Assurance**: Ensure each lesson provides complete, standalone educational value

#### Remediation Process:
1. **Assessment Phase**: Document specific issues found in each lesson
2. **Resource Identification**: List missing materials and broken links
3. **Content Development**: Create or source appropriate educational materials
4. **Integration**: Properly link and embed resources into lesson pages
5. **Verification**: Test all links and ensure content accessibility

### 📊 Rubric Project
- Developing clear scoring rubrics for all practice exercises and module exams
- Gradually integrating practice and assessment content with rubric data
- Improving consistency and transparency in grading

### 🧪 Interactive Learning Integration
- **CidiLab Sidebar Activities**: Integrating interactive activities directly into lesson pages
- **Custom Interactive Activities**: Building standalone interactive tools that will be:
  - Hosted in individual GitHub repositories for cross-course reusability
  - Embedded into Canvas lesson pages
  - Available as direct links to GitHub Pages deployments

## 🏠 Course Home Page
The repository includes a responsive home page (`index.html`) providing course overview and module status tracking. Features:
- Module progress indicators with status badges
- Canvas-styled responsive design
- Quick access to course materials and assessments
- Bootstrap-based layout with FontAwesome icons

## 🎨 CSS Architecture
The project uses a modular CSS architecture for improved maintainability:

### canvas-complete.css
- **Purpose**: Bootstrap + Canvas base styling for consistent foundation
- **Location**: `css/canvas-complete.css`
- **Contains**: CSS custom properties, responsive typography, grid system, core Canvas components
- **Dependencies**: Bootstrap 5.3.2 CDN, FontAwesome icons
- **Usage**: Include first to establish base styling framework

### cidilabs-activities.css
- **Purpose**: Activity-specific styling for CidiLabs interactive learning components
- **Location**: `css/cidilabs-activities.css`
- **Contains**: Flip cards, tabs, modals, order items, match items, select all, sort items
- **Dependencies**: canvas-complete.css (must load after foundation styles)
- **Usage**: Include second for interactive component functionality

### Benefits of Modular Architecture:
- **Reduced Duplication**: Eliminated CSS conflicts and duplicate definitions
- **Improved Maintainability**: Separation of concerns between foundation and activities
- **Better DevTools Experience**: Cleaner CSS inspection and debugging
- **Scalable Development**: Easy to add new components without conflicts

## 🖼️ Canvas Image Mapper System
A custom JavaScript solution for offline image support without modifying Canvas HTML:

### Purpose
- Enables course content to work seamlessly in both Canvas LMS and offline environments
- Automatically replaces Canvas file URLs with local file paths for GitHub Pages deployment
- No HTML modifications required - works entirely through JavaScript

### How It Works
1. **Detection**: Script identifies Canvas image URLs (instructure.com, canvas.tstc.edu)
2. **Mapping**: Looks up Canvas file IDs in `canvas-file-mapping.json`
3. **Replacement**: Dynamically replaces URLs with local file paths
4. **Fallback**: Reverts to Canvas URLs if local files are missing

### Files
- **Script**: `Files/00_image_script/canvas-image-mapper.js` (126 lines)
- **Mapping**: `Files/00_image_script/canvas-file-mapping.json` (organized by module)
- **Documentation**: `Files/00_image_script/README.md`

### Usage
1. Include script in HTML: `<script src="../Files/00_image_script/canvas-image-mapper.js"></script>`
2. Add Canvas file ID mappings to JSON: `"13901647": "M2/Electronegativity.jpg"`
3. Place image files in corresponding `Files/M[#]/` folders
4. Script automatically handles the rest!

### Benefits
- Works in both Canvas LMS and offline/GitHub Pages environments
- Maintains single source of truth for content
- Easy to add new images - just update JSON mapping
- Organized by module for easy maintenance
- Console logging for debugging

## 📝 Lesson Page Template System
Standardized template for creating new lesson pages with consistent structure:

### Template Location
- **Template File**: `template/lesson-page-template.html`
- **Usage Guide**: `template/TEMPLATE-USAGE-GUIDE.md`

### Features
- Standardized HTML structure with all required CDN links
- Consistent ordering of CSS and JavaScript files
- Pre-configured Canvas copy/paste boundary markers
- Placeholder text with `[brackets]` for easy find-and-replace
- Learning Objectives accordion included
- Example content blocks with proper styling
- Back button to course overview
- Canvas Image Mapper included by default

### Standardized Load Order
**CSS**: Google Fonts → Bootstrap → Canvas Complete → CidiLabs Activities → Font Awesome  
**JavaScript**: Bootstrap Bundle → canvas-complete.js → cidilabs-scripts.js → canvas-image-mapper.js

### Quick Start
1. Copy `template/lesson-page-template.html`
2. Rename following convention: `m[#]-[type]-[topic].html`
3. Replace all `[placeholder]` text
4. Add your lesson content between the content markers
5. Place in appropriate module folder

See `template/TEMPLATE-USAGE-GUIDE.md` for complete documentation.

## ⚠️ Critical Bootstrap Grid Issue - Flipcard Layout Fix
**IMPORTANT**: When using CidiLabs flipcards, always use the correct Bootstrap grid classes:

### ✅ Correct Usage
```html
<div class="col-md-4 col-sm-12">  <!-- 3 columns on medium+, stacked on small -->
```

### ❌ Incorrect Usage (Causes Vertical Stacking)
```html
<div class="col-sm-4">  <!-- Missing col-sm-12 fallback -->
```

**Why this matters:**
- `col-md-4` = 3 cards side-by-side on medium screens (768px+)
- `col-sm-12` = Full width (stacked) on small screens (576px+)
- Without the `col-sm-12` fallback, Bootstrap doesn't know how to handle small screens
- This causes all flipcards to stack vertically instead of displaying in rows

**Reference**: This issue was discovered and resolved in `02-chemical-bonding-and-molecular-geometry/m2-explore-molecular-geometry-and-polarity.html`. The flipcards work perfectly in Canvas but failed in local testing due to missing responsive breakpoint classes.

## 📂 Repository Structure
```
├── 00_Assets/                          # Shared resources and media
├── 01-intro-and-safety/               # Module 1: Course introduction and safety
├── 02-chemical-bonding-and-molecular-geometry/   # Module 2
├── 03-intermolecular-forces-of-liquids-and-solids/   # Module 3
├── 04-chemical-kinetics-and-equilibrium/   # Module 4
├── 05-acids-bases-and-solubility-equilibrium/   # Module 5
├── 06-entropy-enthalpy-and-free-energy-in-chemical-equilibrium/   # Module 6
├── 07-electrochemistry/               # Module 7
├── css/                               # Consolidated CSS files
│   ├── canvas-complete.css            # Bootstrap + Canvas base styling
│   └── cidilabs-activities.css        # CidiLabs interactive components
├── js/                                # Consolidated JavaScript files
│   ├── canvas-complete.js             # Canvas functionality
│   └── cidilabs-scripts.js            # CidiLabs interactive scripts
├── Files/                             # Canvas-specific resource organization
│   ├── 00_image_script/               # Canvas Image Mapper system
│   │   ├── canvas-image-mapper.js     # Offline image support script
│   │   ├── canvas-file-mapping.json   # Canvas ID to local file mappings
│   │   └── README.md                  # Image mapper documentation
│   ├── M0 Getting Started/
│   ├── M1/ - M7/                      # Module-specific resources
│   └── 00_Universal Resources/
├── template/                          # Lesson page template system
│   ├── lesson-page-template.html      # Standardized page template
│   └── TEMPLATE-USAGE-GUIDE.md        # Template documentation
├── syllabus/                          # Course syllabus materials
├── z_archive/                         # Archived content and backups
└── index.html                         # Course overview home page
```

## 🚨 CRITICAL: Content Synchronization Guidelines

### HTML File Structure - DO NOT AUTOMATE BODY CONTENT
**⚠️ WARNING**: The body content of lesson HTML files must remain manually managed to maintain synchronization with Canvas LMS.

#### Safe to Automate:
- `<head>` section modifications (Bootstrap CDN, CSS links, meta tags)
- Document structure (`<!DOCTYPE>`, `<html>`, opening/closing tags)
- JavaScript includes at end of document
- CSS file updates (`cidilabs-styles.css`, `cidilabs-scripts.js`)

### NEVER Automate:
- **Any content between `<!-- COPY/PASTE TO CANVAS ENVIRONMENT BEGINS HERE -->` and `<!-- COPY/PASTE TO CANVAS ENVIRONMENT ENDS HERE -->`**
- Content inside `<body>` tags that contains lesson material
- CidiLabs content blocks (`dp-wrapper`, `dp-content-block`, etc.)
- Learning objectives, assessments, or instructional content

#### Rationale:
- Body content is copy-pasted directly from Canvas lessons
- Manual editing ensures perfect synchronization with LMS environment
- Automated changes could break Canvas integration
- Content changes must be traceable and deliberately made

#### AI Development Guidelines:
- Focus automation on framework setup (Bootstrap, CSS, file structure)
- Extract and implement Canvas styling for offline development environment
- Build comprehensive modular CSS architecture for visual consistency
- Never modify lesson content without explicit human approval

### Development Environment Goals:
- Offline HTML files should render identically to Canvas environment
- Bootstrap 5.3.2 CDN integration to match CidiLabs framework
- Complete CSS extraction from Canvas for pixel-perfect offline experience
- Maintain content integrity while improving development workflow
- Modular CSS architecture for improved maintainability and reduced conflicts

## 🗓️ Semester-Based Versioning System
This repository uses a semester-based branching strategy to manage content across academic cycles:

### Branch Structure
- **main**: Always points to the current live semester content
- **26SP**: Spring 2026 (Current live semester)
- **26SU**: Summer 2026 (Active development)
- **26FA**: Fall 2026 (Future planning)
- **27SP/27SU/27FA**: Next academic year branches

### Versioning Convention
- Format: `[YY][SEASON]`
- Years: 26 = 2026, 27 = 2027, etc.
- Seasons: SP (Spring), SU (Summer), FA (Fall)

## 🚀 Development Workflow
1. **Active Development**: Primary work occurs on the upcoming semester branch (e.g., 26SU)
2. **Live Fixes**: Emergency updates to current semester branch (e.g., 26SP)
3. **Future Planning**: Long-term development on future semester branches (e.g., 26FA)

## 🛠️ Technologies Used
- **LMS**: Canvas
- **Interactive Tools**: CidiLab Sidebar
- **Custom Development**: HTML, CSS, JavaScript
- **Version Control**: Git/GitHub
- **Deployment**: GitHub Pages (for standalone interactive activities)

## 📖 Getting Started
For detailed instructions on working with this repository, see [`tammy-training.md`](./tammy-training.md) which contains:
- Daily workflow commands
- Semester transition procedures
- Reporting and change tracking
- Emergency procedures
- Pro tips and shortcuts

## 🤝 Contributing
This repository is actively maintained by the TSTC Chemistry Department instructional design team. Content updates should follow the semester-based branching strategy outlined in the training documentation.

## 📧 Contact
- **Instructional Designer**: Tammy ([@edutechtammy](https://github.com/edutechtammy))
- **Subject Matter Expert**: Agapito Serrato
- **Department**: TSTC Chemistry Department

## 📄 License
This content is proprietary to Texas State Technical College and is intended for educational use within the institution.

---

*Last Updated: February 2026*  
*Repository established for improved version control and collaborative course development*