Skip to content

How to Use SisterShield

SisterShield supports three user roles: Student, Teacher, and Admin. Each role has access to different features. This guide walks through the primary workflows for each role.

Student Workflows

Register and Log In

  1. Navigate to the registration page (/register).
  2. Enter your name, email, and password. Select Student as your role.
  3. Choose your preferred language (Korean or English).
  4. After registration, log in at /login with your email and password.

Browse Courses

  1. From the dashboard, navigate to Courses.
  2. Published courses are listed with bilingual titles and descriptions.
  3. Click a course to view its detail page, including learning objectives and metadata.

Play a Course

  1. On a course detail page, click Start (for a new course) or Continue (to resume).
  2. The Twine story loads in an embedded player. Navigate by clicking choices in the story.
  3. Your progress is tracked automatically: visited passages, time spent, and quiz answers.
  4. When you reach the quiz section and complete the final passage, the course is marked as Completed.
  5. Return to the Progress page to see your completion status across all courses.

Track Progress

  1. Navigate to Progress from the dashboard sidebar.
  2. View a summary of all courses you have started or completed.
  3. Each entry shows completion percentage, time spent, and current status (Not Started, In Progress, Completed).

Upload a Submission

  1. Navigate to Submissions and click New Submission.
  2. Upload a Twine HTML file you have created.
  3. Add a title and description (in your preferred language; the other locale can be added later).
  4. Save as Draft or click Submit to send it for teacher review.

Use Quick Exit

If you are in a situation where you need to leave the app immediately:

  • Click the Quick Exit button in the header (red exit icon), or
  • Press the Escape key on your keyboard.

This clears your session data and immediately redirects your browser to weather.com. The browser’s back button will not return to SisterShield because window.location.replace() is used.

Get Help

  • Click the Get Help button (heart icon) in the header.
  • A dialog opens with crisis resources organized by region:
    • Korea: Women’s Emergency Hotline (1366), Digital Sexual Violence Counseling (02-735-8994), Police (112).
    • International: Cyber Civil Rights Initiative, UN Women, Internet Watch Foundation.

Teacher Workflows

Create a Course Manually

  1. Navigate to Courses and click New Course.
  2. Paste or upload Twee 3 source code.
  3. Fill in the bilingual title and description.
  4. The system validates the Twee source for structural errors.
  5. Save the course as a draft for further editing.

Generate a Course with AI

  1. Navigate to Courses and click Generate.
  2. Enter the course topic (e.g., “Cyberstalking prevention”).
  3. Add learning objectives (e.g., “Recognize signs of online stalking”).
  4. Specify the target audience (e.g., “High school students, ages 15-18”).
  5. Select the primary language (Korean or English).
  6. Click Generate. The LLM creates a full interactive Twee story with:
    • A named protagonist with a personal narrative.
    • 3-4 scenarios covering distinct TF-VAWG risks.
    • Safe and dangerous choice architecture.
    • Risk analysis passages with technical explanations.
    • A reflection arc, community action choices, key takeaways, and a 3-question quiz.
    • Real help resources (Korean and international).
  7. Review the generated story in the editor. Edit passages as needed.

Fix Errors in a Course

  1. On the course editor page, click Detect Errors.
  2. The system scans for dead links, duplicate passages, and orphan passages.
  3. If errors are found, click Fix with AI. The LLM repairs the issues while preserving the story.
  4. Review the fixes and save.

Translate a Course

  1. On the course editor, use Translate to create a version in the other locale.
  2. The LLM translates all narrative text, dialogue, and choices while preserving passage names and link targets.
  3. A new course is created with a unique IFID, linked via translationGroupId.

Batch Translate Metadata

  1. Navigate to Courses and use Translate All to fill in missing translations for course titles and descriptions across all courses.

Generate Images

  1. On the course editor, click Generate Image Prompts.
  2. The LLM analyzes the story and produces a style directive, character roster, and 8-12 DALL-E 3 prompts.
  3. Review the prompts. Click Generate on individual prompts to create images.
  4. All characters are depicted as young adults (18-22); violence and inappropriate content are excluded by design.

Publish a Course

  1. From the course editor, click Publish.
  2. The system compiles the Twee to HTML, injects tracking JavaScript, and stores the built file.
  3. The course status changes to PUBLISHED and becomes visible to students.

Review Submissions

  1. Navigate to Submissions. A global review queue shows all pending submissions.
  2. Click a submission to view its details and preview the Twine story.
  3. Select Approve, Reject, or Request Changes and add feedback.
  4. Approved submissions can optionally be published as new courses.

Admin Workflows

Admins have all Teacher capabilities plus:

User Management

  • TODO: Admin user management interface is planned for a future release. Currently, user roles are managed directly in the database or via the seed script.

Evidence Management

  • Manage landing page evidence items via the /api/hero-evidence API.
  • Create, update, reorder, and toggle visibility of bilingual evidence quotes.

System Overview

  • Access all courses, submissions, and progress data regardless of ownership.
  • View teacher access logs for audit purposes.

Keyboard Shortcuts

ShortcutActionContext
EscapeQuick Exit (redirect to weather.com)Anywhere (unless a dialog is open)

Language Switching

The locale switcher in the header allows toggling between Korean (ko-KR) and English (en-US) at any time. The URL path updates to reflect the selected locale (e.g., /en-US/dashboard or /ko-KR/dashboard). All UI strings, including validation messages and error codes, are translated.