Sir JR Web Coding App

A tool for every Grade 8 MCSian.

Developed by Sir JR

Ready

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 + +/- Zoom Ctrl + Shift + F Full Editor

Output Preview

Your webpage appears here after clicking Run Code.

Teacher Feedback

Rubric-Based Feedback

Get deeper comments based on the rubric, code, output, and error checker.

✨

No detailed feedback yet

Click Result first, then use Review Feedback for clearer rubric notes.

This feedback follows the teacher rubric and checker results.

Result & Feedback

Run your code, then check your score based on the selected rubric.

✓

No result yet

Click See Result when you are done with your activity.

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.

Student Assistance

Suggestions & Helper Controls

These controls work even before teacher login. Apply locally for this browser, or log in to publish the same settings to every student device.

Assistance ON

Master Student Assistance Turn every suggestion and helper feature on or off at once.

⌨️ Code Suggestions Autocomplete popup while students type HTML, CSS, or JavaScript. 🧭 Code Helper & Error Hints Show the floating helper and beginner-friendly error checker. 💬 Rubric Feedback Show the detailed Teacher Feedback section and review buttons. 🚀 Super Studio Tools Optional advanced tools: Format, Snapshot, Restore, Commands, and Live Coach. When enabled, students see only a small Studio button first. 🔗 External Links in Same Preview When enabled, https:// links open inside the Output Preview instead of a new tab. Some sites may still block iframe loading.

Current settings are active on this device.

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

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. Click Apply + Smart Rubric Checker. The app will create the actual rubric rows and use the rubric text itself for smarter checking, not just the Auto Check dropdown.

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 + Smart Rubric Checker.

Welcome Grade 8 MCSian Students!

Log In to Save Your Work

Create Your New Password

My Projects

Continue a project or start something new.

Name Your Project

A tool for every Grade 8 MCSian.

Activity Rubric

Beginner-friendly guide

Student Projects

Add File

Rename Code Files

Message

Continue a project or start something new.

Error Checker

Beginner-friendly guide