← Back to portfolio

Case study · Qingban youth STEM platform

Fifty-nine lessons, and a line drawn at 95%

Qingban is a free STEM platform for left-behind children and the children of migrant workers: recorded lessons, no fee, and no account needed just to watch. The lessons are within a child's reach.

Role
Founder and independent developer: server build, CMS secondary development, templates, course publishing, certificate system, ongoing operation
Stack
PbootCMS 3.2.16 · PHP 8.2 · MySQL · Nginx · Bootstrap 4 · jQuery
Scope
59 videos · 40 columns (20 Chinese, 20 English) · 152 entries · 15 bilingual templates
Code
9,213 lines written on top of PbootCMS: 1,702 lines of PHP plus 7,511 lines of front end
Status
Live and running, free and open to any student
Evidence
The live site, a v1.0 build document and a user manual for students and administrators

01Project background

Qingban is aimed at one specific situation: a child studying in a county or township school that offers no programming course, in a home where nobody can sit down and write the first line of code with them. Left-behind children and the children of migrant workers lack different things, but outside the classroom they run into the same shortage: too few places to go. STEM is where it shows most, because that subject depends on equipment and on people who can teach it, and both tend to sit in the city.

Recording a course costs money once. After that, one more viewer adds almost nothing, which is about the only reliable advantage the internet offers here. So what Qingban does is narrow: record the lessons once, then publish them. Three tracks: 47 on Python, 6 on recreational mathematics, 6 on physics experiments.

The project was started and is supported by Hongxin Su. It has been run since founding by the Qingban Growth Center, and it charges nothing to students anywhere in the country. One thing worth stating plainly: a library of recorded lessons does not change how teachers are distributed across counties, and it does not stand in for the teacher in the room. What it can do is let a student who would otherwise never meet the subject see what it looks like.

02Defining "finished"

Progress is recorded from the video element itself, not from a button the student presses. While a lesson plays, the player reports its current position every ten seconds; the last position is kept so that reopening the page resumes where the student stopped. This runs on a separate table rather than the CMS content tables, because progress writes are frequent and the content tables are read on every page.

# lesson state, from the stored percentage
p = 0 or no row → not started
0 < p < 95 → in progress
p ≥ 95        → completed

The 95% line is a compromise, not a measurement of learning. Five percent is left at the end so that a student who stops during the credits is not stuck one second short of a certificate. The certificate number encodes what happened rather than who deserves it: CERT, the completion date, the four-digit course id, the six-digit user id. Printed from the browser with a stylesheet that drops the navigation, it fits on one sheet of A4.

What the rule actually proves: the playhead reached 95% of the video. It does not prove the student understood the lesson, and there is no quiz on this platform that would.

03What I did not build

  • No app. A URL works on a phone browser, and asking a family to install something is a step where people drop out. The site is responsive from 320px up.
  • The framework is not mine. This runs as secondary development on PbootCMS 3.2.16, and the reason is administrative rather than technical: whoever takes the site over is more likely to find someone who can edit a template than someone who can read a framework I wrote.
  • No recommendations and no leaderboard. What a thirteen-year-old studies next should not be decided by a model trained on other people’s children, and a public ranking mostly tells the kids with the least support where they stand.
  • No payment entry of any kind. Once a charity site accepts money, it also owes an audit trail, and that is a different project with a different team.

04Two languages means two column trees

Chinese and English are not a translation layer here. Each language owns its own columns and its own entries: 40 columns in total, 20 per language, holding 152 entries at 76 each. Switching language swaps the labels through a cookie plus a CSS class, and fifteen templates carry both wordings. The hreflang tags point Chinese, English and a default at the same page so a search engine indexes them as alternates.

The cost is that every entry gets written twice. Changing one title means changing two places, and a miss shows up as the two sides saying different things.

Course category page listing lessons with tags
A course column, English side. Same lessons, same order, separate entries.
Public welfare activities list page
Activity notices run on the same bilingual columns, so posting one is a form, not a deployment.

05What it runs on

1 server, no cluster
4 open ports, the rest closed
5 failed logins, then the address is banned for half an hour
30 days before expiry that the certificate check warns

Nginx in front, PHP 8.2 behind it, MySQL on the same machine. At this size, spreading the site across machines would add ways to fail without making anything better. The database listens on loopback and the application connects with its own user, so a leaked credential does not hand over the whole server. Certificates renew themselves, and a check watches the date: an expiry fails quietly, and nobody notices until the site is down.

06Where the value sits

  • Education equity. One set of lessons. A student in Shanghai and a student in a county town open the same address, and no region gets its own version.
  • Public outreach. An activity stays in the public activity column from the first notice to the closing post. When someone asks what we have done, the answer is a link to that column.
  • Practice and innovation. Maths is taught through figures, physics through experiments, Python by writing code, and none of it costs anything.
  • Replicability. The system was built by modifying an open-source PbootCMS install. Another organisation takes it, swaps columns and content, and goes live with the back end already there.