Update um.html

user documentation
This commit is contained in:
raulsagrado
2026-03-16 14:49:05 -04:00
committed by GitHub
parent 20c2d925f0
commit 45462945e4
+477 -161
View File
@@ -1,208 +1,524 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>WIN Student Goal Tracker - User Manual</title> <meta
name="description"
content="WIN Student Goal Tracker user manual for teachers and program staff."
/>
<meta name="theme-color" content="#111827" />
<title>WIN Student Goal Tracker - User Manual</title>
<style> <style>
body{ :root{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,sans-serif; --bg:#f5f7fa;
margin:0; --card:#ffffff;
background:#f5f7fa; --text:#111827;
color:#1a1a1a; --muted:#4b5563;
line-height:1.6; --border:rgba(17,24,39,.08);
} --shadow:0 8px 24px rgba(17,24,39,.08);
--primary:#2563eb;
--primary-dark:#1d4ed8;
--header:#111827;
--success:#16a34a;
}
header{ *{box-sizing:border-box;}
background:#111827;
color:white;
padding:2rem;
text-align:center;
}
header h1{ html{scroll-behavior:smooth;}
margin:0;
font-size:2rem;
}
main{ body{
max-width:900px; margin:0;
margin:auto; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,sans-serif;
padding:2rem; background:var(--bg);
} color:var(--text);
line-height:1.65;
}
.card{ header{
background:white; background:var(--header);
padding:2rem; color:#fff;
border-radius:10px; padding:3rem 1.25rem 2.5rem;
box-shadow:0 4px 12px rgba(0,0,0,0.08); text-align:center;
} }
h2{ header h1{
margin-top:0; margin:0;
} font-size:clamp(2rem,4vw,2.6rem);
line-height:1.15;
}
h3{ header p{
margin-top:1.5rem; margin:.85rem auto 0;
} max-width:760px;
color:rgba(255,255,255,.88);
font-size:1.05rem;
}
.muted{ .hero-actions{
color:#555; display:flex;
} flex-wrap:wrap;
justify-content:center;
gap:.75rem;
margin-top:1.5rem;
}
.btn{ .btn{
display:inline-block; display:inline-flex;
background:#2563eb; align-items:center;
color:white; justify-content:center;
text-decoration:none; padding:.8rem 1.05rem;
padding:10px 18px; border-radius:12px;
border-radius:6px; text-decoration:none;
margin-top:20px; font-weight:700;
} border:1px solid rgba(255,255,255,.08);
transition:.2s ease;
}
.btn:hover{ .btn-primary{
background:#1d4ed8; background:var(--primary);
} color:#fff;
</style> }
.btn-primary:hover{
background:var(--primary-dark);
}
.btn-secondary{
background:#fff;
color:var(--text);
}
.btn-secondary:hover{
background:#eef2ff;
}
main{
max-width:1100px;
margin:0 auto;
padding:1.25rem 1rem 3rem;
}
.layout{
display:grid;
grid-template-columns:1fr;
gap:1rem;
}
@media (min-width: 980px){
.layout{
grid-template-columns:280px 1fr;
align-items:start;
}
.toc{
position:sticky;
top:1rem;
}
}
.card{
background:var(--card);
border:1px solid var(--border);
border-radius:16px;
box-shadow:var(--shadow);
padding:1.25rem;
}
.toc h2,
.content h2{
margin-top:0;
}
.toc ul{
list-style:none;
padding:0;
margin:0;
}
.toc li + li{
margin-top:.55rem;
}
.toc a{
color:var(--text);
text-decoration:none;
}
.toc a:hover{
color:var(--primary);
}
.toc .small{
color:var(--muted);
font-size:.95rem;
margin-top:1rem;
}
.content section + section{
margin-top:1rem;
}
.section-title{
font-size:1.35rem;
margin:0 0 .5rem;
}
.muted{
color:var(--muted);
}
.grid{
display:grid;
grid-template-columns:1fr;
gap:1rem;
}
@media (min-width: 760px){
.grid.two{
grid-template-columns:1fr 1fr;
}
}
.info-list,
.content ol,
.content ul{
padding-left:1.2rem;
}
.info-list li,
.content li{
margin:.3rem 0;
}
.callout{
border-left:4px solid var(--primary);
background:#eff6ff;
padding:1rem;
border-radius:12px;
margin-top:1rem;
}
.callout.success{
border-left-color:var(--success);
background:#f0fdf4;
}
code{
background:#eef2ff;
padding:.15rem .4rem;
border-radius:6px;
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
font-size:.95em;
}
.steps{
margin-top:.75rem;
}
.kpis{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:.75rem;
margin-top:1rem;
}
@media (min-width: 760px){
.kpis{
grid-template-columns:repeat(4,1fr);
}
}
.kpi{
background:#f9fafb;
border:1px solid var(--border);
border-radius:14px;
padding:1rem;
text-align:center;
}
.kpi strong{
display:block;
font-size:1.25rem;
margin-bottom:.25rem;
}
.footer{
text-align:center;
color:var(--muted);
padding:2rem 1rem 3rem;
font-size:.95rem;
}
.back-link{
margin-top:1.25rem;
display:inline-flex;
align-items:center;
gap:.5rem;
}
</style>
</head> </head>
<body> <body>
<header>
<h1>WIN Student Goal Tracker</h1>
<p>
User manual for teachers and program staff using the WIN platform to manage
students, goals, benchmarks, and progress events.
</p>
<header> <div class="hero-actions">
<h1>WIN Student Goal Tracker</h1> <a
<p>User Manual</p> class="btn btn-primary"
</header> href="https://win.opelly.me/login"
target="_blank"
rel="noopener noreferrer"
>
Open Live Application
</a>
<a class="btn btn-secondary" href="index.html">
Back to Project Home
</a>
</div>
</header>
<main> <main>
<div class="layout">
<aside class="toc card">
<h2>Contents</h2>
<ul>
<li><a href="#overview">1. Overview</a></li>
<li><a href="#access">2. Accessing the Application</a></li>
<li><a href="#program">3. Selecting a Program</a></li>
<li><a href="#dashboard">4. Student Dashboard</a></li>
<li><a href="#add-student">5. Adding a Student</a></li>
<li><a href="#goals">6. Viewing Student Goals</a></li>
<li><a href="#benchmarks">7. Managing Benchmarks</a></li>
<li><a href="#events">8. Recording Progress Events</a></li>
<li><a href="#workflow">9. Typical Workflow</a></li>
<li><a href="#tips">10. Usage Notes</a></li>
</ul>
<div class="card"> <p class="small">
Demo login:<br />
<code>opelly@gmail.com</code><br />
<code>1234</code>
</p>
</aside>
<h2>Overview</h2> <div class="content">
<section id="overview" class="card">
<h2 class="section-title">1. Overview</h2>
<p class="muted">
The WIN Student Goal Tracker is a web-based application designed to
help teachers and program staff organize student progress in a
structured way. Users can review assigned students, create or review
goals, define benchmarks, and document progress events over time.
</p>
<p class="muted"> <div class="kpis">
The WIN Student Goal Tracker is a web-based system designed to help instructors, <div class="kpi">
program coordinators, and support staff track student goals, progress, and <strong>Students</strong>
critical incidents for adult learners with intellectual and developmental Managed by teacher
disabilities. </div>
</p> <div class="kpi">
<strong>Goals</strong>
Tracked per student
</div>
<div class="kpi">
<strong>Benchmarks</strong>
Milestones per goal
</div>
<div class="kpi">
<strong>Events</strong>
Progress history
</div>
</div>
<p class="muted"> <div class="callout">
The system centralizes student goal management, progress tracking, and reporting This manual focuses on the current application workflow shown in the
to support educational programs and improve visibility into student development. deployed prototype and implemented interface.
</p> </div>
</section>
<section id="access" class="card">
<h2 class="section-title">2. Accessing the Application</h2>
<p>
To begin, open the login page at
<code>https://win.opelly.me/login</code>.
</p>
<h3>Primary Users</h3> <div class="steps">
<ol>
<li>Enter your assigned email address.</li>
<li>Enter your password.</li>
<li>Click <strong>Sign in</strong>.</li>
</ol>
</div>
<ul> <div class="callout success">
<li>Program instructors</li> After a successful login, the system will take you to the program
<li>Program coordinators</li> selection screen.
<li>Support staff working with student development programs</li> </div>
</ul> </section>
<section id="program" class="card">
<h2 class="section-title">3. Selecting a Program</h2>
<p class="muted">
After authentication, the system displays the list of programs
available to the logged-in user.
</p>
<h3>System Workflow</h3> <ol>
<li>Review the available program cards.</li>
<li>Select <strong>WIN Program Teacher (Primary)</strong>.</li>
<li>The application will open the main dashboard for that program.</li>
</ol>
</section>
<ol> <section id="dashboard" class="card">
<li>User logs into the system.</li> <h2 class="section-title">4. Student Dashboard</h2>
<li>User selects or creates a student profile.</li> <p>
<li>User creates one or more goals for the student.</li> The main dashboard displays the students assigned to the current
<li>User periodically updates progress for each goal.</li> teacher or user.
<li>User logs incidents if relevant to the student's progress.</li> </p>
<li>Dashboard and reports display progress and completion status.</li>
</ol>
<div class="grid two">
<div>
<h3>Information shown on each student card</h3>
<ul class="info-list">
<li>Student identifier</li>
<li>Expected graduation date</li>
<li>Number of goals</li>
<li>Number of progress events</li>
<li>Last activity date</li>
</ul>
</div>
<div>
<h3>Navigation</h3>
<ul class="info-list">
<li>The left sidebar lists students for quick access.</li>
<li>Clicking a student opens that students detail view.</li>
<li>The dashboard serves as the main starting point for daily use.</li>
</ul>
</div>
</div>
</section>
<h3>Core Features</h3> <section id="add-student" class="card">
<h2 class="section-title">5. Adding a Student</h2>
<p class="muted">
Teachers can add a new student record directly from the dashboard.
</p>
<ul> <ol>
<li>Student profile management</li> <li>Click <strong>+ Add a Student</strong>.</li>
<li>Goal creation and tracking</li> <li>Enter the <strong>Student Identifier</strong>.</li>
<li>Progress update logging</li> <li>Enter the <strong>Expected Graduation Date</strong>.</li>
<li>Incident tracking and documentation</li> <li>Click <strong>Add Student</strong> to save the record.</li>
<li>Instructor dashboard for monitoring progress</li> </ol>
<li>Structured reporting of goal completion</li>
</ul>
<p>
Once saved, the new student appears in the dashboard and sidebar.
</p>
</section>
<h3>Typical Instructor Tasks</h3> <section id="goals" class="card">
<h2 class="section-title">6. Viewing Student Goals</h2>
<p>
Selecting a student opens the goals view for that student. Goals are
the main tracking objects used to measure student development and
progress.
</p>
<h4>Create a Student Profile</h4> <h3>Goal details may include</h3>
<ul>
<li>Goal category or label</li>
<li>Goal description</li>
<li>Associated benchmarks</li>
<li>Related progress events</li>
</ul>
<ol> <div class="callout">
<li>Navigate to the student dashboard.</li> Users can use this page to quickly review whether a student is making
<li>Select "Create Student".</li> progress and what supporting events have been documented.
<li>Enter student information.</li> </div>
<li>Save the student profile.</li> </section>
</ol>
<section id="benchmarks" class="card">
<h2 class="section-title">7. Managing Benchmarks</h2>
<p>
Benchmarks break a goal into smaller, measurable steps. This makes it
easier to see incremental progress over time.
</p>
<h4>Create a Goal</h4> <h3>To add a benchmark</h3>
<ol>
<li>Open the selected students goal.</li>
<li>Go to the <strong>Benchmarks</strong> section.</li>
<li>Enter the benchmark description.</li>
<li>Click <strong>Save</strong>.</li>
</ol>
<ol> <h3>Example benchmark</h3>
<li>Select a student from the dashboard.</li> <p><code>Complete Computing for Good</code></p>
<li>Click "Add Goal".</li> </section>
<li>Enter goal title and description.</li>
<li>Define the target timeline.</li>
<li>Save the goal.</li>
</ol>
<section id="events" class="card">
<h2 class="section-title">8. Recording Progress Events</h2>
<p class="muted">
Progress events document meaningful activities, milestones, or notes
related to a students goal.
</p>
<h4>Update Goal Progress</h4> <h3>Each progress event should capture</h3>
<ul>
<li>A brief description of the activity</li>
<li>The user who recorded the event</li>
<li>The date of the event</li>
</ul>
<ol> <h3>Example</h3>
<li>Open the student profile.</li> <p><code>Took C4G loved it!</code></p>
<li>Select the goal being tracked.</li>
<li>Add a progress update or note.</li>
<li>Update completion status if applicable.</li>
<li>Save the progress update.</li>
</ol>
<div class="callout success">
Progress events create a historical record that can support follow-up,
reporting, and program evaluation.
</div>
</section>
<h4>Log an Incident</h4> <section id="workflow" class="card">
<h2 class="section-title">9. Typical Workflow</h2>
<ol>
<li>Log into the application.</li>
<li>Select the appropriate program.</li>
<li>Review the list of assigned students.</li>
<li>Add a student if needed.</li>
<li>Open a student record.</li>
<li>Review or create goals.</li>
<li>Add benchmarks to define milestones.</li>
<li>Record progress events as the student advances.</li>
</ol>
</section>
<ol> <section id="tips" class="card">
<li>Navigate to the student profile.</li> <h2 class="section-title">10. Usage Notes</h2>
<li>Select "Log Incident".</li> <ul>
<li>Enter incident details and description.</li> <li>Keep student identifiers consistent to avoid duplicate entries.</li>
<li>Save the incident record.</li> <li>Update progress events regularly so the record stays current.</li>
</ol> <li>Use benchmarks to make large goals easier to track.</li>
<li>Review student cards often to spot inactivity or missing updates.</li>
<li>Log out when finished using the system on a shared device.</li>
</ul>
<a href="index.html" class="btn btn-primary back-link">Back to Project Home</a>
</section>
</div>
</div>
</main>
<h3>Prototype Version</h3> <div class="footer">
© 2026 WIN Student Goal Tracker
<p class="muted"> </div>
The current version of the system exists as a user interface prototype created
in Figma. The prototype is used to evaluate usability and gather feedback from
stakeholders before full system implementation.
</p>
<h3>Stakeholder Evaluation</h3>
<p class="muted">
Stakeholders are invited to test the prototype and complete a short usability
survey evaluating how easy it is to perform common tasks within the system.
</p>
<ul>
<li>Task 1: Log in and create a student goal.</li>
<li>Task 2: Review a student dashboard and identify progress.</li>
<li>Task 3: Update progress on an existing goal.</li>
</ul>
<p class="muted">
Feedback collected from this evaluation will guide improvements to the final
system design.
</p>
<a href="index.html" class="btn">Back to Project Home</a>
</div>
</main>
</body> </body>
</html> </html>