Kelas Sekejap — Sign-up & Login Flow

Interactive prototype · class-code model · one account that follows a student from Form 1 to MUET

The idea: the teacher hands out a class code. That single code silently sets the student's school, class, teacher and level — so nobody can land in the wrong form, and the teacher's dashboard fills itself. No email needed (works for hostel students). Scroll sideways to walk the five screens. Some fields are clickable.
Step 1
Student opens the site on their phone and enters the code the teacher gave the class.

Join your class

Enter the code your teacher gave you.

Looks like CH-4A-728 — from the whiteboard, or your teacher.
I already have an account · Log in
→
Step 2
The code is checked. The student sees exactly which class they're joining — a confidence check, and it stops wrong-class sign-ups.

Is this your class?

We found this class from your code.

🏫 Chung Hua High School
LevelSenior 1 · Form 4
Class4 Amanah (4A)
TeacherMadam Guan
SubjectEnglish — Speaking
Your level and lessons are set automatically. You can't pick the wrong form.
No — re-enter code
→
Step 3
Capture the details. Kept short — name and the school's own student ID are what the teacher needs to match her register.

Your details

So your teacher can find you on the register.

Daygo home daily
Hostelboarder
Helps your teacher know who practises on the computer lab vs. a phone.
→
Step 4
Login credentials — no email required. Username is pre-filled from the student ID; they just set a password.

Create your login

You'll use this every time you come back.

We made this from your student ID. Easy to remember.
Optional so hostel students without a phone can still register.
→
Step 5
Done — dropped straight into their level's lesson list, with only what the teacher has unlocked.
Senior 1 · Form 4 · B1 Mid

Hi, Wei Jie 👋

✓
You're in Madam Guan's 4A. Your progress is shared with her.

This week — unlocked

1
Giving an opinionHealth & Environment · 3 min
Done
2
Because… giving reasonsHealth & Environment · 3 min
To do
3
Agree or disagree?Health & Environment · 4 min
To do
🔒
Week 2Opens when Madam Guan unlocks it
Auto-set from class code Student enters Optional
Returning students log in with the username (their student ID) + password — no email, no magic link, works on any shared device in the computer lab or library. If they've moved up a form, the same account carries their history.
Log in
Any device — personal phone, mum's phone, computer lab, or library PC.

Welcome back

Log in to continue your practice.

Forgot password? Reset by phone or ask your teacher New here? Join with a class code
→
After login
Straight back to where they left off. A teacher who moved them up a form sees the new level here automatically.
Senior 1 · Form 4 · B1 Mid

Continue, Wei Jie

2
Because… giving reasonsPick up where you left off
Resume
✓
7-day streak. Keep it going before Friday's deadline.

Last year's Form 3 lessons and scores stay in your account under My progress.

Teacher side (desktop / smartboard). Madam Guan makes a class once, gets a code, and the roster fills itself as students join — no typing 55 names. This is the half that turns speaking into a classwork mark.
app.kelassekejap.com/teacher/classes

1 · Create a class

One minute, once per class. Level sets the whole syllabus.
Class code — share with students
CH-4A-728
Auto-generated · printable · QR available

2 · Roster fills itself

Students appear as they join with the code. hostel flag shows who may need lab/library access.
NameIDTypeStatus
Tan Wei JieCH24-1043HostelJoined
Nurul AisyahCH24-1044DayJoined
Lim Zhi HaoCH24-1051HostelJoined
Priya KumarCH24-1052DayInvited

47 of 54 joined · 7 not yet registered

Week 1 open
Week 2 🔒
Week 3 🔒
Madam Guan controls what's open and the deadline — one classwork mark per week.
Progression, handled once a year: when this year's Form 3 students become Form 4, the teacher either creates a new class code for them or bulk-promotes the class. Their account and full speaking history carry over — three years of Junior lessons still sit under one profile, so you can see a student's whole A2→B1→MUET journey.
What we capture, and why it's the minimum. Every field either routes the student to the right lessons or lets the teacher mark them. The class code does most of the work — three of the four "who/where" facts are derived, not typed.

🏫 School tenant

  • school_idPK
  • nameChung Hua HS
  • naming_conventionJunior/Senior
  • plan / seats2,800

🧑‍🏫 Teacher

  • teacher_idPK
  • school_idFK
  • nameMadam Guan
  • email + passwordlogin

👥 Class code

  • class_idPK
  • school_idFK
  • teacher_idFK
  • join_codeCH-4A-728
  • level / formForm 4 · B1 Mid
  • section4A
  • academic_year2027

🎓 Student

  • student_idPK
  • class_idFK → sets level
  • full_nameregister match
  • school_index_noCH24-1043
  • username= index no.
  • password_hashlogin
  • student_typeday / hostel
  • phoneoptional
🔑 join_code → resolves to Class → which carries school + teacher + level → so the Student record inherits all four from one code. The student only ever types name, ID, password.
Design decisions worth your sign-off:
• Username = student ID, not email. ~1,000 hostel students may have no email/phone — email login would lock them out. ID + password works on any shared device.
• Level is derived, never chosen. Students can't self-select the wrong form; the teacher's class code is the single source of truth.
• Day/Hostel flag. One tap, but it directly answers your open question — it shows Madam Guan who needs computer-lab/library access vs. a phone.
• One account, six levels. The account persists year to year; only the class link changes as they move up. Full A2→MUET history under one profile.