About the project
Why an interactive website, who it is for, how it was built, and what it does not claim to be.
Project background
GenderLens began with a gap that many students recognize. The vocabulary of a Gender and Society course can be familiar — equality, stereotype, patriarchy, SOGIESC — while the situations that make those words matter remain easy to misread in the moment. A class can define harassment and still laugh at a group chat. A group can believe in fairness and still hand the notes to the same person every week.
We wanted a project that would put the vocabulary in front of a decision. The result is an interactive field guide: twelve concepts, six branching cases, six Philippine laws, nine arenas of everyday practice, and a challenge that asks learners to apply what they have read. The site is written for Filipino college students, but the standard is the one we would want for ourselves — accurate, specific, and honest about the limits of a website.
The project is not a substitute for a lawyer, a counselor, or a GAD office. It is a place to practise the first response: the one that happens before you have time to look something up.
Objectives
- Increase awareness of gender equality and social inclusion.
- Explain gender-related concepts in accessible language.
- Educate students about relevant Philippine legislation.
- Encourage respectful behavior through interactive decision-making.
- Promote women's empowerment and LGBTQIA+ inclusion.
- Challenge harmful stereotypes and discriminatory practices.
- Help students recognize inappropriate behavior and identify appropriate responses.
Target audience
The primary audience is Filipino college students aged 18 to 25, especially those in their first two years who are forming the habits they will carry into work and public life. The content assumes no prior coursework in gender studies; it defines terms before asking learners to apply them.
The site is also designed to be usable by student organizations, GAD offices, and teachers who want a short, self-contained activity for an orientation or a class. It is mobile-first because that is how students actually read, and it works without a login, a database, or a fast connection.
Educational approach
The design follows a simple sequence: notice, name, decide, reflect. Concepts are introduced with a definition, a Philippine example, and an explanation of why the distinction matters. Scenarios ask for a decision before the analysis appears, so the learner has to commit to a response and then compare it with the consequences.
Three learning principles shape the interaction. Case-based learning gives abstract ideas a situation to hold on to. Retrieval practice — the quiz, the mark-as-explored buttons, the myth checks — asks learners to recall rather than reread. Immediate feedback explains why an answer works, including the laws that may apply and the limits of a legal remedy.
Trauma-informed choices matter as much as instructional ones. The scenarios are fictional composites, avoid graphic detail, and center the choices of the person affected. Support routes are visible. No personal information is collected, and progress is stored only in the learner's browser.
Connection to Gender and Society concepts
| Course concept | Where it appears | What the learner does |
|---|---|---|
| Sex and gender | Concept 01; home diagram | Separates biological characteristics from social expectations. |
| Gender stereotypes | Concept 06; case 02; quiz | Identifies how task allocation reproduces a belief. |
| Power and patriarchy | Concept 08; cases 01 and 05 | Asks who is believed, who speaks, and who pays for objecting. |
| Gender-based violence | Cases 01, 04, 05; laws 9262 and 11313 | Matches a situation to a law and a reporting route. |
| Women's empowerment | Concept 11; inclusion leadership | Distinguishes representation from decision-making power. |
| LGBTQIA+ inclusion | Concept 12; case 03 | Drafts a policy response instead of debating a person's existence. |
| Intersectionality | Concept 09; inclusion equal opportunities | Identifies compounded barriers that a gender-only lens misses. |
| Awareness to action | Take Action; pledge | Commits to one specific, repeatable behavior. |
Method
- Planning.Defined the audience, the seven-page architecture, the content model, and the interaction types before writing code.
- Research.Read the official text of each statute, checked summaries against the Official Gazette and the Supreme Court E-Library, and drew on peer-reviewed and institutional sources. Wikipedia was not used.
- Design.Built a token-based visual system, a mobile-first grid, accessible controls, and a content model that separates text from interface.
- Build.Implemented the site in HTML5, CSS3, and vanilla JavaScript, with JSON content and localStorage for optional progress. No framework, backend, or external API.
- Review.Checked legal citations against official sources and flagged the claims that still need human verification. The review notes are listed below.
- Testing.Checked the layout at 1440, 1024, 768, 390, and 320 pixels; tested keyboard access, empty states, and every interactive control, and reviewed the reduced-motion stylesheet.
Before submission
Formal usability testing with classmates has not yet been conducted. Add the date, the number of participants, the tasks, and the changes made after testing. Replace the member placeholders below with the final names and contributions.
Group members
| Name | Role | Contribution |
|---|---|---|
| [Member 1 name] | Research and content | Concept entries, legal summaries, references. |
| [Member 2 name] | Design and front-end | Visual system, responsive layout, accessibility. |
| [Member 3 name] | Interaction and testing | Scenario engine, quiz, progress, test passes. |
| [Member 4 name] | Paper and documentation | One-page paper, README, deployment notes. |
Replace the highlighted placeholders. Do not claim contributions that were not made; the rubric rewards an honest account of the process.
References
APA 7th edition. Legal sources are cited to the official text where available. All links were checked during development; government sites may block automated requests but remain accessible in a browser.
- References are loading. If they do not appear, open the one-page paper.
Disclaimer, review notes, and credits
Educational information, not legal advice. The law summaries are paraphrases prepared for learning. They are not a substitute for the official text or for advice from a lawyer, the Public Attorney's Office, or a competent agency. Laws, penalties, procedures, and agency rules can change. A situation may involve more than one law, and the “most relevant” law in an activity is a teaching answer, not a legal conclusion.
No personal data. The site does not ask for a name, email address, account, or location. Progress, reflections, and the pledge are stored in the browser's localStorage and can be erased with the reset control. Nothing is transmitted to a server.
Editorial review notes
- Review notes are loading.
Image and type credits
Photographs are used under the Unsplash License. Typefaces are served through Google Fonts.
Source files, the content JSON, and deployment instructions are described in README.md. The editable version of the paper is GenderLens-Paper.md.