CHEM RANK

Pedagogical Challenges in Secondary School Chemistry

Within Thai secondary education, chemistry frequently poses significant learning hurdles. The curriculum demands mastery of abstract mental models—including atomic orbital structures, ionic nomenclature, redox balance equations, and multi-step stoichiometry calculations. Conventional assessment methodologies remain anchored to summative paper examinations and raw percentage grades.

For students requiring additional conceptual reinforcement, repeated low scores on routine quizzes frequently cause test anxiety, eroding academic confidence and triggering disengagement from the sciences. Simultaneously, civil service chemistry educators under the Secondary Educational Service Area Office Phang Nga, Phuket, Ranong encountered severe friction managing formative evaluation records: marking attendance, logging lab teamwork, and assessing daily homework in disconnected spreadsheets. Without real-time feedback loops, students could not connect daily classroom effort with tangible academic growth.

To overcome these barriers, educators collaborated with INTECH to conceptualize and develop CHEM RANK (Journey to Chemist)—a dedicated web application infusing motivational game mechanics directly into the science classroom.

---

Design Philosophy: Replacing Raw Scores with Droplets & 7 Ranks

CHEM RANK shifts the instructional paradigm from deficit-based assessment to continuous, purposeful effort accumulation:

• The Chemical Droplet Economy: Instead of cold marks out of 100, the system adopts “Chemical Droplets” as its foundational reward unit—symbolizing droplets collected in laboratory beakers. Teachers grant droplets whenever students demonstrate problem-solving initiative, assist lab partners, or exhibit safe chemical handling.
• 7-Tier Chemical Rank Progression Map: Student advancement is structured across seven progressive tiers named after authentic principles of chemical solution concentration:
  1. Tier 1: Initial Mist (0–10 Droplets) — Crystal-clear droplet icon marking the foundational step of scientific exploration.
  2. Tier 2: Primordial Drop (11–25 Droplets) — Sparkling droplet icon establishing fundamental chemical concepts.
  3. Tier 3: Inception Mixture (26–45 Droplets) — Orange conical flask representing active combination of conceptual elements.
  4. Tier 4: Forming Solution (46–70 Droplets) — Blue beaker indicating developing stability and formula fluency.
  5. Tier 5: Concentrated Substance (71–100 Droplets) — Rich purple elixir flask reflecting heightened analytical competency.
  6. Tier 6: Saturated State (101–135 Droplets) — Warm golden flask denoting advanced mastery requiring dedicated discipline.
  7. Tier 7: Supersaturation (136+ Droplets) — Crowned laboratory vessel recognizing expert laboratory mastery.
• Dynamic Classroom Leaderboard: Students access a real-time “Droplet Leaderboard” showing their current laboratory tier. This sparks friendly, constructive peer motivation while celebrating every student’s individual journey toward supersaturation.

---

Seamless In-Class Management for Educators

Teaching in active laboratory environments leaves little time for complex software navigation. CHEM RANK was engineered to minimize administrative friction:

• Single-Click AJAX Droplet Controls: Teachers can search for students or select student lab cohorts and click to award or adjust droplets. The interface registers reason tags (e.g., “Accurate Stoichiometry”, “Organized Lab Workstation”) with zero delays.
• Transparent Activity Log: Every droplet transaction records timestamped audit trails. Students can inspect their personal history, ensuring total evaluation fairness and mutual trust.
• Classroom Projection Ready: The dashboard and droplet progression maps are styled with high-contrast legibility, allowing teachers to project live rankings onto classroom screens during group competitions and lab reviews.

---

Technical Architecture & Clean Code (PHP, JavaScript & AJAX)

CHEM RANK was developed with an emphasis on low overhead, bulletproof stability, and clean code principles, ensuring smooth execution on standard educational web servers:

1. Backend Service: PHP & MySQL Clean Architecture

• MVC Structural Separation: The codebase strictly divides database interaction (Models), core ranking business logic (Controllers), and user presentation (Views), preventing tight coupling.
• Database Security via PDO: Every MySQL query executes through PDO prepared statements, eliminating SQL injection vectors.
• Role-Based Authentication: Clean separation of sessions ensures students cannot alter droplet values while granting educators comprehensive class administration rights.

2. Frontend & Asynchronous AJAX Engine

• Zero-Reload State Synchronization: Droplet adjustments and leaderboard recalculations communicate asynchronously via JavaScript Fetch/AJAX. The DOM updates immediately without disrupting active lectures.
• Custom CSS & Visual Identity: Styled with semantic HTML and tailored CSS, the pastel color palette and cheerful glassware iconography reduce subject intimidation and adapt across mobile phones, tablets, and large classroom displays.