ICT 8 ConnectLearn, Code, Connect

A tool for every Grade 8 MCSian.

Developed by Sir JR

Ready

Current Project No project open

No activity selected Choose a project

Tabs/Pages

HTML tab: type the complete structure. CSS and JavaScript are optional unless required by the activity.

Ctrl + Z Undo Ctrl + Y/Shift+Z Redo Ctrl + S Save progress Ctrl + Enter Run Ctrl + 1/2/3 Tabs Ctrl + Hover class/id → CSS popup Ctrl + +/- Zoom Ctrl + Shift + F Full Editor

Output Preview

Your webpage appears here after clicking Run Code.

Teacher Feedback

Project Comment

No teacher comment yet.

💬

No teacher feedback yet

Your teacher’s saved project comment will appear here. You can view it, but you cannot edit it.

Result & Feedback

Choose an activity or rubric, then click Result to see the real score and feedback.

✓

No result yet

Choose an activity first, then click Result when you are ready to check your score.

Need help? View quick guide and shortcuts

Beginner-friendly guide

Simple reminders para hindi malito ang students habang nagco-code.

HTML tab: Required ang full structure: <!DOCTYPE html>, <html>, <head>, <title>, and <body>.

Suggestions: Red label means may closing tag. Green label means self-closing tag like <img>, <br>, or <input>.

Keyboard: Gumagana ang normal editor keys like Ctrl+Z, Ctrl+Y, Ctrl+S, Tab, at Ctrl+Enter. Use Save ZIP para ma-download ang code files.

Teacher Login

Manage Activities & Rubrics

Login using the teacher account you created in Firebase Authentication. Students can still use the editor without logging in.

Code uses your teacher account password for full admin access. Password mode lets you type the teacher email manually.

Student Records & Tracker

Register and Monitor Students

Create free student accounts using Student ID, or import an Excel/CSV class list. New accounts use the default password 123456 and must change it on first login.

0Students

0Logged In

0Projects

0Active Today

Student ID Full Name Gender Section

Ready to register students.

Import previewReview the records before importing them. Auth accounts activate on first student login.

#	Student ID	Name	Gender	Section	Status

Student	Section	Account	Projects	Last Activity	Action

Lightweight Presence

Online Students

Shows students who recently opened the app. Student devices update at a slow heartbeat only while active, so it stays light on Firebase.

0Online now

0Recently active

0Reading lessons

0Coding

Open this tab and click Refresh to see active students.

Privacy-safe: this only shows page/activity status and last active time. It does not capture screens, keystrokes, exact locations, or private content.

Google Sheets Sync

Student Compliance Tracker

Encode scores in Google Sheets. The app will publish only color/status to students, not the scores.

Scores hidden from students

Advanced Connection Setup Hidden by default. Open only when you need to edit the Apps Script URL or Sync Key. Show connection

Apps Script Web App URL Sync Key

These are saved in Firebase for the teacher account. Students cannot view this setup.

Term Sheet Subject Label

Sections to Sync

You may check one section, many sections, or Select All. Only checked sections will sync.

Section Google Sheet Links Hidden by default. Open only when you need to paste or edit section Google Sheet links. Show setup

Section Google Sheet Links

Paste each section's Google Sheet link here once. Click Save Settings to store them in Firebase for your teacher account, so another device can load them automatically.

Checked sections only

Task Names Students Will See Hidden by default. Open only when you need to rename WW, PT, or Term Assessment tasks. Show task names

Task Names Students Will See

Your Google Sheet can stay score-only. Edit display names here, or keep the default WW/PT/TA names.

Unchecked tasks will be hidden from students. Written Works and Performance Task scores stay hidden; Term Assessment raw score can be shown.

Login as teacher to load/save Compliance settings. Then check one or more sections, preview, and publish.

Published Status Viewer

Student Compliance Viewer

View each student's lacking list from the latest published Firebase records. This does not sync Google Sheets again.

Click Refresh Viewer after publishing to see student lacking lists.

Select a student to view specific lacking requirements.

PDF Lesson Library

Upload and Organize Lessons

Store PDFs in your own Google Drive and publish only the lesson details in Firebase. No Firebase Storage, billing account, or card is required.

Free Google Drive connection

Add a free Google OAuth Client ID in firebase-config.js to enable direct PDF upload. You can already use Paste PDF/Drive Link below.

Google Drive is not connected. Access tokens stay only in this browser tab.

New Lesson

Add a PDF Lesson

Lesson Title Term Lesson Number / Order

Short Description Optional

Choose a PDF file PDF only. The file goes to your connected Google Drive.

Ready to add a lesson.

Published Lessons

Edit, delete, or move lessons within each term.

Loading lessons...

Activities & Rubrics

Saved Activities

Students will see these saved activities in the activity selector. Each activity has its own instructions, rubric, and saved code.

Activity Title Passing Score (%)

Activity Instructions

Rubric Table Input

Type Rubric Like a Table

Use this for your usual 5-column format. Type the criteria on the left, then type the descriptions for each score level. The builder only creates the rubric; scoring happens later when Result/Feedback compares the student code and output against this rubric.

No image upload

Excellent Score Good Score Satisfactory / Fair Score Needs Improvement Score

Criteria	Excellent	Good	Satisfactory / Fair	Needs Improvement	Action

Type your rubric here, then click Apply Rubric Table.

Smart rubric generation is teacher-triggered only. If Gemini is unavailable, the app can still create a clean editable starter rubric without auto-check dropdowns.