Holistic Report Card Generator for School - Tutorial

Learn the system in 10-15 minutes

This tutorial helps teachers, coordinators, and school admins use Holistic Report Card Generator for School. You will learn setup, editing, default design loading, import/export, printing, and troubleshooting.

1. System Overview

The system has two main pages:

  • index.html - school-facing landing page with support information.
  • app.html - working report card editor and print interface.

CBSE NEP 2020 context: The app supports competency-based and holistic reporting, not only marks-focused reporting.

2. Getting Started

  1. Open index.html and click Launch Demo (app.html).
  2. Or directly open app.html in a modern browser.
  3. Ensure holistic.csv is present in project root.

3. CSV Data Preparation

Prepare your holistic.csv with columns used by the app.

  • Domain: broad area
  • Subject: subject/category under domain
  • Competency: skill or learning target
  • Description: details of expectation
  • Grading: grade/level per competency

4. Editor Basics

  1. Use Toggle Edit Mode to enable editing tools.
  2. Drag domain blocks using title handles.
  3. Resize domains with top/bottom resize handles.
  4. Use Undo and Redo for quick corrections.

5. Load Default Design

You can apply a baseline school design from layout-styles.json.

  1. Open File menu in the editor.
  2. Click Load Default Design (GitHub).
  3. Confirm overwrite to apply the default layout and styles.

This is useful when onboarding a new class or school branch and you want a consistent starting template.

6. Style and Layout Editing

  • Use sidebar to modify font family, size, color, bold, italic.
  • Set background color, transparency, opacity, and image URL.
  • Use image adjuster popup to control image size, position, and repeat.
  • Apply table fill color for consistent table readability.

8. Save, Export, Import

  • Save layout: stores current setup in browser localStorage.
  • Export layout: downloads layout-styles.json.
  • Import layout: reuses previous exports with overwrite or merge.

Recommended: Export one final version per term to keep an external backup.

9. Print and PDF

  1. Open File -> Print Report.
  2. Select A4 and correct margins in browser print dialog.
  3. Use Save as PDF if digital distribution is needed.

10. Recommended School Workflow

  1. Finalize one school-level default design.
  2. Share that design JSON with class coordinators.
  3. Each teacher updates only CSV and grading data.
  4. Review print preview before final export or print.

Need help?

Community support email: 66997515+ashokpjacob@users.noreply.github.com

For school customization and deployment support, use the Contact Sales action on the landing page.

Tutorial FAQ

Can I use this without internet?

Yes. Core editor features run locally in browser. Internet is only needed for GitHub-based default design loading and online links.

What if my imported layout does not match exactly?

The system uses style IDs and hint mapping. Re-export from the current version for best compatibility across terms.

Who should maintain the master design?

Usually the school coordinator or academic admin should own the master layout and share export files with teachers.