{% extends "base.html" %}

{% block title %}Documentation - AnZar{% endblock %}

{% block content %}
<div class="plain-page">
    <h1>Documentation</h1>
    <p class="lead">This page lists what AnZar offers and why each part exists. The step-by-step
    procedure for every screen, with screenshots, is in the instructor guide.</p>

    <h2>Profiles and connections</h2>
    <p>A Canvas account and a model endpoint are stored as named profiles, so a key is
    entered once and switching accounts or models does not disturb the grading work. The
    connections page tests whether an endpoint is reachable before a grading run starts,
    rather than in the middle of one.</p>

    <h2>Courses and submissions</h2>
    <p>AnZar pulls the courses, quizzes and assignments from Canvas. Submissions are
    downloaded into a data folder on this machine. Keeping the files on disk means what
    was graded stays inspectable afterwards, also after Canvas has moved on.</p>

    <h2>Criteria</h2>
    <p>Before grading, criteria are defined per question: what earns points and what does
    not. This is the division of labor in AnZar: the teacher writes the criteria, the
    model proposes points against them.</p>

    <h2>Grading</h2>
    <p>For quizzes the model reads the given answers; for assignments it reads the
    submitted files (PDF, DOCX, TXT, or a ZIP of code). It returns a point score per
    criterion with a short reason for each. Multiple-choice questions are left to Canvas;
    AnZar works on the questions that until then needed a human for every single answer.</p>

    <h2>Consistency check</h2>
    <p>The same answer is graded several times against the same criteria and the outcomes
    are compared. This shows how much the model's grading varies, so it is known before
    the scores are trusted for a whole class.</p>

    <h2>Review and upload</h2>
    <p>Model scores never go into Canvas directly. They appear on a review page where each
    one can be accepted, adjusted or rejected. Only after the upload is started explicitly,
    the scores are written to the Canvas gradebook.</p>

    <h2>History</h2>
    <p>Every grading run is written to the data folder and can be reopened from the
    grading history, so an earlier pass stays available for comparison.</p>

    <h2>The detailed guide</h2>
    <p>The instructor guide is a PDF that ships with the app: 23 pages, one section per
    screen, every step with a screenshot. It is stored in this installation under
    <code>frontend/static/docs/AnZar_Instructor_Guide.pdf</code>. The sections map to the
    list above as follows:</p>
    <ul class="guide-map">
        <li>Profiles and connections: guide sections 1 to 3 (first start, profiles, connection tests)</li>
        <li>Courses and submissions: sections 4, 12 and 13 (choosing the course, selecting an assignment, downloading the submissions)</li>
        <li>Criteria: sections 8, 14 and 15 (criteria per question, from a Canvas rubric, without one)</li>
        <li>Grading: sections 5 to 7 and 9 and 16 (the dashboard, selecting a quiz, the grading hub, the AI grading run, the grading agent)</li>
        <li>Review and upload: sections 10, 11 and 17 (reviewing quiz grades, pushing to Canvas, reviewing assignment grades)</li>
    </ul>

    <p class="closing">Scores stay a proposal of the model until the teacher accepts them.</p>
</div>
{% endblock %}

{% block extra_css %}
<style>
.plain-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
    color: var(--text-primary);
}
.plain-page h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 1rem;
}
.plain-page h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 2.25rem 0 0.5rem;
}
.plain-page p {
    margin: 0 0 0.9rem;
    line-height: 1.7;
}
.lead {
    color: var(--text-secondary);
}
.plain-page ul {
    margin: 0 0 0.9rem;
    padding-left: 1.25rem;
}
.plain-page li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
}
.plain-page code {
    font-family: Consolas, Menlo, monospace;
    font-size: 0.85em;
    background: var(--bg-secondary);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}
.closing {
    margin-top: 2.5rem;
    color: var(--text-secondary);
}
</style>
{% endblock %}

{% block scripts %}{% endblock %}