Implement Task 16: Murphy Grammar Engine & Handwritten Journaling
This commit is contained in:
@@ -4719,3 +4719,887 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Task 16: Murphy Grammar Engine & Handwritten Journaling Styles
|
||||
========================================================================== */
|
||||
|
||||
.grammar-view {
|
||||
padding: 24px 20px 80px 20px;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.grammar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.grammar-title-wrap h2 {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.grammar-title-wrap .subtitle {
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
max-width: 720px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.grammar-top-stats {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.grammar-stat-chip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 8px 16px;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.grammar-stat-chip .stat-num {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.grammar-stat-chip .stat-lbl {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Filter Bar */
|
||||
.grammar-filter-bar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 24px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.grammar-filter-pill {
|
||||
padding: 6px 14px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.grammar-filter-pill:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.grammar-filter-pill.active {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Units Grid */
|
||||
.grammar-units-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.grammar-unit-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.grammar-unit-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.grammar-unit-card.is-completed {
|
||||
border-left: 4px solid #10b981;
|
||||
}
|
||||
|
||||
.grammar-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.grammar-unit-number {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.grammar-level-pill {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.grammar-level-pill.badge-a1 {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: #ef4444;
|
||||
border: 1px solid rgba(239, 68, 68, 0.25);
|
||||
}
|
||||
|
||||
.grammar-level-pill.badge-b1 {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
color: #3b82f6;
|
||||
border: 1px solid rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
|
||||
.grammar-card-title {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 6px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.grammar-card-sub {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.45;
|
||||
margin-bottom: 14px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.grammar-card-meta {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.grammar-card-cat {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.grammar-card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.grammar-badges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.badge-status-completed {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #10b981;
|
||||
background: rgba(16, 185, 129, 0.12);
|
||||
padding: 2px 7px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.badge-status-handwritten {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #8b5cf6;
|
||||
background: rgba(139, 92, 246, 0.12);
|
||||
padding: 2px 7px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.badge-status-new {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-surface);
|
||||
padding: 2px 7px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Grammar Lesson Screen (Theory & Deep Work Mode)
|
||||
========================================================================== */
|
||||
|
||||
.grammar-lesson-container {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.grammar-lesson-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 12px 18px;
|
||||
}
|
||||
|
||||
.grammar-topbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.grammar-lesson-badges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.grammar-unit-pill {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.grammar-tab-switch {
|
||||
display: inline-flex;
|
||||
background: var(--bg-input);
|
||||
padding: 3px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.grammar-tab-switch .tab-btn {
|
||||
padding: 6px 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
border-radius: calc(var(--radius-md) - 2px);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.grammar-tab-switch .tab-btn.active {
|
||||
background: var(--bg-card);
|
||||
color: var(--text-main);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.grammar-cat-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.grammar-theory-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.lesson-main-title {
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.lesson-sub-title {
|
||||
font-size: 15px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.grammar-section-block {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Contrast Cards (Situation A vs Situation B) */
|
||||
.grammar-contrasts-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.grammar-contrast-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
gap: 16px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.contrast-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.contrast-header {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.contrast-pill {
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.contrast-pill.a {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.contrast-pill.b {
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.contrast-example {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
background: var(--bg-input);
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
border-left: 3px solid var(--color-primary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.contrast-trans {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.contrast-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.vs-badge {
|
||||
background: var(--bg-surface-hover);
|
||||
color: var(--text-muted);
|
||||
font-weight: 800;
|
||||
font-size: 11px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.contrast-key-diff {
|
||||
grid-column: 1 / -1;
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 10px 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-main);
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* Golden Formula Card */
|
||||
.grammar-golden-formula-card {
|
||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.08));
|
||||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 22px;
|
||||
position: relative;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.notebook-pen-icon {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 20px;
|
||||
font-size: 24px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.formula-instructions {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.golden-formula-code {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
background: var(--bg-card);
|
||||
padding: 14px 18px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px dashed rgba(99, 102, 241, 0.4);
|
||||
line-height: 1.5;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
/* Journaling Card & Checkbox */
|
||||
.grammar-journaling-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 20px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.journaling-prompt-box {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.journaling-prompt-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.journaling-action-box {
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.handwritten-checkbox-label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
min-height: 48px;
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.handwritten-checkbox-label:hover {
|
||||
border-color: #8b5cf6;
|
||||
background: rgba(139, 92, 246, 0.05);
|
||||
}
|
||||
|
||||
.handwritten-checkbox {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.custom-chk {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-card);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 2px;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.handwritten-checkbox:checked + .custom-chk {
|
||||
background: #8b5cf6;
|
||||
border-color: #8b5cf6;
|
||||
}
|
||||
|
||||
.handwritten-checkbox:checked + .custom-chk::after {
|
||||
content: "✓";
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.handwritten-label-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.handwritten-label-text strong {
|
||||
font-size: 14px;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.handwritten-label-text small {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.grammar-theory-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Cloze Tap Practice (5 Micro-Exercises)
|
||||
========================================================================== */
|
||||
|
||||
.grammar-practice-card-wrap {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 32px 28px;
|
||||
box-shadow: var(--shadow-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.practice-header-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.practice-step-text {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.practice-dots {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.practice-dots .dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--border-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.practice-dots .dot-active {
|
||||
background: var(--color-primary);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.practice-dots .dot-done {
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
.grammar-cloze-box {
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cloze-sentence-display {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cloze-blank {
|
||||
display: inline-block;
|
||||
color: var(--color-primary);
|
||||
border-bottom: 2px dashed var(--color-primary);
|
||||
padding: 0 8px;
|
||||
font-weight: 700;
|
||||
min-width: 80px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.cloze-blank.blank-correct {
|
||||
color: #10b981;
|
||||
border-bottom-color: #10b981;
|
||||
}
|
||||
|
||||
.cloze-blank.blank-wrong {
|
||||
color: #ef4444;
|
||||
border-bottom-color: #ef4444;
|
||||
}
|
||||
|
||||
.cloze-clue-display {
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.grammar-tap-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.grammar-opt-btn {
|
||||
min-height: 52px;
|
||||
padding: 14px 18px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: var(--bg-surface);
|
||||
border: 1.5px solid var(--border-color);
|
||||
color: var(--text-main);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.grammar-opt-btn .opt-num {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-surface-hover);
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.grammar-opt-btn:hover:not(:disabled) {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--bg-surface-hover);
|
||||
}
|
||||
|
||||
.grammar-opt-btn.btn-correct {
|
||||
background: rgba(16, 185, 129, 0.15) !important;
|
||||
border-color: #10b981 !important;
|
||||
color: #10b981 !important;
|
||||
}
|
||||
|
||||
.grammar-opt-btn.btn-wrong {
|
||||
background: rgba(239, 68, 68, 0.15) !important;
|
||||
border-color: #ef4444 !important;
|
||||
color: #ef4444 !important;
|
||||
}
|
||||
|
||||
.grammar-feedback-box {
|
||||
border-radius: var(--radius-md);
|
||||
padding: 16px 18px;
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.grammar-feedback-box.feedback-correct {
|
||||
background: rgba(16, 185, 129, 0.12);
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.grammar-feedback-box.feedback-wrong {
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.grammar-feedback-box .feedback-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.feedback-correct .feedback-title {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.feedback-wrong .feedback-title {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.grammar-feedback-box .feedback-text {
|
||||
font-size: 13.5px;
|
||||
color: var(--text-main);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.feedback-srs-ingested {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(239, 68, 68, 0.2);
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
color: #ef4444;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Grammar Summary Card
|
||||
========================================================================== */
|
||||
|
||||
.grammar-summary-card {
|
||||
background-color: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 44px 32px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.summary-score-large {
|
||||
font-size: 48px;
|
||||
font-weight: 900;
|
||||
color: var(--color-primary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.summary-reminder-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
border: 1px solid rgba(139, 92, 246, 0.25);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px 18px;
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.summary-reminder-box .reminder-icon {
|
||||
font-size: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.summary-reminder-box .reminder-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.grammar-view {
|
||||
padding: 16px 12px 90px 12px;
|
||||
}
|
||||
|
||||
.grammar-contrast-card {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.contrast-divider {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.grammar-tap-options {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grammar-opt-btn {
|
||||
min-height: 48px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.cloze-sentence-display {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.grammar-lesson-topbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.grammar-tab-switch {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.grammar-tab-switch .tab-btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
+186
-1
@@ -73,6 +73,9 @@
|
||||
<button id="nav-cefr-btn" class="btn btn-outline btn-sm" title="Уровневые тесты CEFR (A1, A2, B1, B2)">
|
||||
<span>🎯 Тесты CEFR</span>
|
||||
</button>
|
||||
<button id="nav-grammar-btn" class="btn btn-outline btn-sm" title="Оффлайн-грамматика Мерфи и бумажная тетрадь">
|
||||
<span>📖 Грамматика</span>
|
||||
</button>
|
||||
<button id="srs-trainer-btn" class="btn btn-trainer" title="Интервальный тренажер (Flashcards, 4 варианта, диктант, ввод)">
|
||||
<span class="trainer-icon">🎓</span>
|
||||
<span class="trainer-text">Тренажёр SRS</span>
|
||||
@@ -673,6 +676,187 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- VIEW 5: Murphy Grammar Engine & Handwritten Journaling View -->
|
||||
<section id="grammar-view" class="grammar-view hidden">
|
||||
<!-- Screen 1: Units Directory -->
|
||||
<div id="grammar-directory-screen" class="grammar-directory-container">
|
||||
<div class="grammar-header">
|
||||
<div class="grammar-title-wrap">
|
||||
<h2>📖 Грамматика Мерфи (Essential & English Grammar)</h2>
|
||||
<p class="subtitle">Вечерний режим глубокой фокусировки: 5–7 минутные микро-уроки, метод контрастов, золотые формулы для бумажной тетради и мгновенное закрепление в SRS при ошибках.</p>
|
||||
</div>
|
||||
<div class="grammar-top-stats">
|
||||
<div class="grammar-stat-chip">
|
||||
<span class="stat-num" id="grammar-stat-total">0</span>
|
||||
<span class="stat-lbl">Юнитов</span>
|
||||
</div>
|
||||
<div class="grammar-stat-chip">
|
||||
<span class="stat-num" id="grammar-stat-completed">0</span>
|
||||
<span class="stat-lbl">Освоено</span>
|
||||
</div>
|
||||
<div class="grammar-stat-chip">
|
||||
<span class="stat-num" id="grammar-stat-handwritten">0</span>
|
||||
<span class="stat-lbl">✍️ В тетради</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Pills -->
|
||||
<div class="grammar-filter-bar">
|
||||
<button class="grammar-filter-pill active" data-filter="all">Все юниты</button>
|
||||
<button class="grammar-filter-pill" data-filter="A1-A2">A1–A2 (Красный Мерфи)</button>
|
||||
<button class="grammar-filter-pill" data-filter="B1-B2">B1–B2 (Синий Мерфи)</button>
|
||||
<button class="grammar-filter-pill" data-filter="Present">Present Tenses</button>
|
||||
<button class="grammar-filter-pill" data-filter="Past">Past Tenses</button>
|
||||
<button class="grammar-filter-pill" data-filter="Future">Future Forms</button>
|
||||
<button class="grammar-filter-pill" data-filter="Modals">Modals</button>
|
||||
<button class="grammar-filter-pill" data-filter="Conditionals">Conditionals</button>
|
||||
<button class="grammar-filter-pill" data-filter="Passive">Passive</button>
|
||||
<button class="grammar-filter-pill" data-filter="Gerund">Gerund & Inf</button>
|
||||
<button class="grammar-filter-pill" data-filter="handwritten">✍️ Записано в тетрадь</button>
|
||||
</div>
|
||||
|
||||
<!-- Units Grid -->
|
||||
<div id="grammar-units-grid" class="grammar-units-grid">
|
||||
<!-- Dynamic unit cards rendered by grammar.js -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Screen 2: Active Lesson & Practice -->
|
||||
<div id="grammar-lesson-screen" class="grammar-lesson-container hidden">
|
||||
<header class="grammar-lesson-topbar">
|
||||
<div class="grammar-topbar-left">
|
||||
<button id="grammar-back-btn" class="btn btn-sm btn-outline">← К юнитам</button>
|
||||
<div class="grammar-lesson-badges">
|
||||
<span id="grammar-lesson-num" class="grammar-unit-pill">Юнит 1</span>
|
||||
<span id="grammar-lesson-level" class="grammar-level-pill badge-a1">A1-A2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grammar-topbar-center">
|
||||
<div class="grammar-tab-switch">
|
||||
<button id="grammar-tab-theory-btn" class="tab-btn active">1. Теория и Тетрадь</button>
|
||||
<button id="grammar-tab-practice-btn" class="tab-btn">2. Микро-практика (5 тап-заданий)</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grammar-topbar-right">
|
||||
<span id="grammar-lesson-cat" class="grammar-cat-label">Present Tenses</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grammar-lesson-content-wrap">
|
||||
<!-- Tab 1 Content: Theory & Handwritten Journaling -->
|
||||
<div id="grammar-tab-theory-content" class="grammar-tab-content">
|
||||
<div class="grammar-theory-header">
|
||||
<h2 id="grammar-lesson-title" class="lesson-main-title">Unit Title</h2>
|
||||
<p id="grammar-lesson-sub" class="lesson-sub-title">Unit Subtitle</p>
|
||||
</div>
|
||||
|
||||
<!-- Contrast Explanation Cards -->
|
||||
<div class="grammar-section-block">
|
||||
<h3 class="section-title"><span class="title-icon">⚖️</span> Метод контрастов (В чём суть и когда применять)</h3>
|
||||
<div id="grammar-contrasts-list" class="grammar-contrasts-list">
|
||||
<!-- Rendered dynamically -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Golden Formula Card (Designed for Physical Paper Notebook) -->
|
||||
<div class="grammar-section-block">
|
||||
<h3 class="section-title"><span class="title-icon">✍️</span> Золотая формула для вашей бумажной тетради</h3>
|
||||
<div class="grammar-golden-formula-card">
|
||||
<div class="notebook-pen-icon">✒️</div>
|
||||
<div class="formula-instructions">Выделите ярким маркером или цветной ручкой в конспекте:</div>
|
||||
<div id="grammar-golden-formula-text" class="golden-formula-code"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Handwritten Journaling Prompt & Sync Checkbox -->
|
||||
<div class="grammar-section-block">
|
||||
<h3 class="section-title"><span class="title-icon">📓</span> Персональный дневник от руки (Motor Memory)</h3>
|
||||
<div class="grammar-journaling-card">
|
||||
<div class="journaling-prompt-box">
|
||||
<p id="grammar-journaling-prompt-text" class="journaling-prompt-text"></p>
|
||||
</div>
|
||||
<div class="journaling-action-box">
|
||||
<label class="handwritten-checkbox-label">
|
||||
<input type="checkbox" id="grammar-handwritten-toggle" class="handwritten-checkbox">
|
||||
<span class="custom-chk"></span>
|
||||
<span class="handwritten-label-text">
|
||||
<strong>Записал от руки в бумажную тетрадь</strong>
|
||||
<small>Моторная память усиливает долгосрочную фиксацию грамматической конструкции на 65%</small>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grammar-theory-footer">
|
||||
<button id="grammar-to-practice-btn" class="btn btn-primary btn-lg">
|
||||
Перейти к микро-практике (5 заданий) →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 2 Content: 5 Cloze Tap micro-exercises -->
|
||||
<div id="grammar-tab-practice-content" class="grammar-tab-content hidden">
|
||||
<div class="grammar-practice-card-wrap">
|
||||
<div class="practice-header-bar">
|
||||
<span id="grammar-practice-progress" class="practice-step-text">Задание 1 из 5</span>
|
||||
<div id="grammar-practice-dots" class="practice-dots"></div>
|
||||
</div>
|
||||
|
||||
<div class="grammar-cloze-box">
|
||||
<div id="grammar-cloze-sentence" class="cloze-sentence-display"></div>
|
||||
<div id="grammar-cloze-clue" class="cloze-clue-display"></div>
|
||||
</div>
|
||||
|
||||
<div id="grammar-options-container" class="grammar-tap-options">
|
||||
<!-- 4 Tap buttons rendered dynamically -->
|
||||
</div>
|
||||
|
||||
<div id="grammar-exercise-feedback" class="grammar-feedback-box hidden">
|
||||
<!-- Correct / Incorrect explanation -->
|
||||
</div>
|
||||
|
||||
<div class="practice-nav-bar">
|
||||
<button id="grammar-ex-next-btn" class="btn btn-primary btn-lg btn-block hidden">
|
||||
Следующее задание → (Space)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lesson Summary Card -->
|
||||
<div id="grammar-summary-card" class="grammar-summary-card hidden">
|
||||
<div class="summary-trophy">✨</div>
|
||||
<h2>Юнит освоен!</h2>
|
||||
<div class="summary-score-large" id="grammar-sum-score-val">100%</div>
|
||||
<p id="grammar-sum-score-text" class="summary-lead">Отличный результат!</p>
|
||||
|
||||
<div id="grammar-sum-hw-reminder" class="summary-reminder-box hidden">
|
||||
<span class="reminder-icon">📝</span>
|
||||
<div class="reminder-text">
|
||||
<strong>Не забудьте записать от руки!</strong>
|
||||
<span>Зафиксируйте формулу и 2 личных предложения в тетради для надежного моторного закрепления.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-metrics">
|
||||
<div class="metric-card">
|
||||
<span class="metric-val text-info" id="grammar-sum-ingested-count">0</span>
|
||||
<span class="metric-desc">Ошибок добавлено в SRS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-buttons">
|
||||
<button id="grammar-sum-repeat-btn" class="btn btn-primary btn-lg">🔄 Повторить задания</button>
|
||||
<button id="grammar-sum-srs-btn" class="btn btn-outline btn-lg hidden">🎓 Закрепить ошибки в SRS</button>
|
||||
<button id="grammar-sum-units-btn" class="btn btn-ghost btn-lg">← К каталогу юнитов</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sticky Bulk Action Bar for Batch Selection Mode -->
|
||||
<div id="batch-action-bar" class="batch-action-bar hidden">
|
||||
<div class="batch-left">
|
||||
@@ -731,6 +915,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu-actions">
|
||||
<button id="mobile-grammar-btn" class="btn btn-outline btn-block">📖 Грамматика Мерфи & Тетрадь</button>
|
||||
<button id="mobile-cefr-btn" class="btn btn-outline btn-block">🎯 Уровневые тесты CEFR (A1–B2)</button>
|
||||
<button id="mobile-stats-btn" class="btn btn-outline btn-block">📊 Статистика & Календарь</button>
|
||||
<button id="mobile-export-btn" class="btn btn-outline btn-block">📤 Экспорт словаря</button>
|
||||
@@ -1198,7 +1383,7 @@
|
||||
<!-- Audio Element for native streaming -->
|
||||
<audio id="global-audio-player" preload="none"></audio>
|
||||
|
||||
<script type="module" src="/static/js/app.js?v=5.1"></script>
|
||||
<script type="module" src="/static/js/app.js?v=5.2"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -9,6 +9,7 @@ import { initDictionary, loadInitialData } from './modules/dictionary.js';
|
||||
import { initSrs, startSrsTrainingSession, openStatsDashboard } from './modules/srs.js';
|
||||
import { initReader, loadBookshelf, openBook } from './modules/reader.js';
|
||||
import { initCefr, loadCefrOverview, startCefrQuiz } from './modules/cefr.js';
|
||||
import { initGrammar, loadGrammarUnits, openGrammarUnit } from './modules/grammar.js';
|
||||
|
||||
let currentUser = null;
|
||||
let isRouting = false;
|
||||
@@ -40,6 +41,8 @@ export function applyInitialViewPreflight() {
|
||||
hash = '#srs';
|
||||
} else if (lastView === 'cefr-view') {
|
||||
hash = '#cefr';
|
||||
} else if (lastView === 'grammar-view') {
|
||||
hash = '#grammar';
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
@@ -48,6 +51,7 @@ export function applyInitialViewPreflight() {
|
||||
const srsView = document.getElementById('srs-view');
|
||||
const readerView = document.getElementById('reader-view');
|
||||
const cefrView = document.getElementById('cefr-view');
|
||||
const grammarView = document.getElementById('grammar-view');
|
||||
const bookshelfContainer = document.getElementById('bookshelf-container');
|
||||
const readerInterface = document.getElementById('reader-interface');
|
||||
const readerBookTitle = document.getElementById('reader-book-title');
|
||||
@@ -56,6 +60,7 @@ export function applyInitialViewPreflight() {
|
||||
if (dictionaryView) dictionaryView.classList.add('hidden');
|
||||
if (srsView) srsView.classList.add('hidden');
|
||||
if (cefrView) cefrView.classList.add('hidden');
|
||||
if (grammarView) grammarView.classList.add('hidden');
|
||||
if (readerView) readerView.classList.remove('hidden');
|
||||
updateMobileActiveTab('reader');
|
||||
if (hash.includes('/book/')) {
|
||||
@@ -67,14 +72,23 @@ export function applyInitialViewPreflight() {
|
||||
if (dictionaryView) dictionaryView.classList.add('hidden');
|
||||
if (readerView) readerView.classList.add('hidden');
|
||||
if (cefrView) cefrView.classList.add('hidden');
|
||||
if (grammarView) grammarView.classList.add('hidden');
|
||||
if (srsView) srsView.classList.remove('hidden');
|
||||
updateMobileActiveTab('srs');
|
||||
} else if (hash.startsWith('#cefr')) {
|
||||
if (dictionaryView) dictionaryView.classList.add('hidden');
|
||||
if (readerView) readerView.classList.add('hidden');
|
||||
if (srsView) srsView.classList.add('hidden');
|
||||
if (grammarView) grammarView.classList.add('hidden');
|
||||
if (cefrView) cefrView.classList.remove('hidden');
|
||||
updateMobileActiveTab('');
|
||||
} else if (hash.startsWith('#grammar')) {
|
||||
if (dictionaryView) dictionaryView.classList.add('hidden');
|
||||
if (readerView) readerView.classList.add('hidden');
|
||||
if (srsView) srsView.classList.add('hidden');
|
||||
if (cefrView) cefrView.classList.add('hidden');
|
||||
if (grammarView) grammarView.classList.remove('hidden');
|
||||
updateMobileActiveTab('');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -90,10 +104,12 @@ export function openDictionaryView(updateHash = true) {
|
||||
const srsView = document.getElementById('srs-view');
|
||||
const readerView = document.getElementById('reader-view');
|
||||
const cefrView = document.getElementById('cefr-view');
|
||||
const grammarView = document.getElementById('grammar-view');
|
||||
|
||||
if (srsView) srsView.classList.add('hidden');
|
||||
if (readerView) readerView.classList.add('hidden');
|
||||
if (cefrView) cefrView.classList.add('hidden');
|
||||
if (grammarView) grammarView.classList.add('hidden');
|
||||
if (dictionaryView) dictionaryView.classList.remove('hidden');
|
||||
updateMobileActiveTab('dict');
|
||||
try { localStorage.setItem('notes_active_view', 'dictionary-view'); } catch (e) {}
|
||||
@@ -110,10 +126,12 @@ export function openSrsView(tagFilter = null, updateHash = true) {
|
||||
const srsView = document.getElementById('srs-view');
|
||||
const readerView = document.getElementById('reader-view');
|
||||
const cefrView = document.getElementById('cefr-view');
|
||||
const grammarView = document.getElementById('grammar-view');
|
||||
|
||||
if (dictionaryView) dictionaryView.classList.add('hidden');
|
||||
if (readerView) readerView.classList.add('hidden');
|
||||
if (cefrView) cefrView.classList.add('hidden');
|
||||
if (grammarView) grammarView.classList.add('hidden');
|
||||
if (srsView) srsView.classList.remove('hidden');
|
||||
updateMobileActiveTab('srs');
|
||||
try { localStorage.setItem('notes_active_view', 'srs-view'); } catch (e) {}
|
||||
@@ -133,12 +151,14 @@ export function openBookshelfView(updateHash = true) {
|
||||
const srsView = document.getElementById('srs-view');
|
||||
const readerView = document.getElementById('reader-view');
|
||||
const cefrView = document.getElementById('cefr-view');
|
||||
const grammarView = document.getElementById('grammar-view');
|
||||
const bookshelfContainer = document.getElementById('bookshelf-container');
|
||||
const readerInterface = document.getElementById('reader-interface');
|
||||
|
||||
if (dictionaryView) dictionaryView.classList.add('hidden');
|
||||
if (srsView) srsView.classList.add('hidden');
|
||||
if (cefrView) cefrView.classList.add('hidden');
|
||||
if (grammarView) grammarView.classList.add('hidden');
|
||||
if (readerView) readerView.classList.remove('hidden');
|
||||
if (bookshelfContainer) bookshelfContainer.classList.remove('hidden');
|
||||
if (readerInterface) readerInterface.classList.add('hidden');
|
||||
@@ -173,10 +193,12 @@ export function openCefrView(level = null, mode = 'all', updateHash = true) {
|
||||
const srsView = document.getElementById('srs-view');
|
||||
const readerView = document.getElementById('reader-view');
|
||||
const cefrView = document.getElementById('cefr-view');
|
||||
const grammarView = document.getElementById('grammar-view');
|
||||
|
||||
if (dictionaryView) dictionaryView.classList.add('hidden');
|
||||
if (srsView) srsView.classList.add('hidden');
|
||||
if (readerView) readerView.classList.add('hidden');
|
||||
if (grammarView) grammarView.classList.add('hidden');
|
||||
if (cefrView) cefrView.classList.remove('hidden');
|
||||
|
||||
updateMobileActiveTab('');
|
||||
@@ -189,6 +211,36 @@ export function openCefrView(level = null, mode = 'all', updateHash = true) {
|
||||
}
|
||||
}
|
||||
|
||||
export function openGrammarView(unitId = null, updateHash = true) {
|
||||
const targetHash = unitId ? `#grammar/unit/${unitId}` : '#grammar';
|
||||
|
||||
if (updateHash && window.location.hash !== targetHash) {
|
||||
window.location.hash = targetHash;
|
||||
return;
|
||||
}
|
||||
|
||||
const dictionaryView = document.getElementById('dictionary-view');
|
||||
const srsView = document.getElementById('srs-view');
|
||||
const readerView = document.getElementById('reader-view');
|
||||
const cefrView = document.getElementById('cefr-view');
|
||||
const grammarView = document.getElementById('grammar-view');
|
||||
|
||||
if (dictionaryView) dictionaryView.classList.add('hidden');
|
||||
if (srsView) srsView.classList.add('hidden');
|
||||
if (readerView) readerView.classList.add('hidden');
|
||||
if (cefrView) cefrView.classList.add('hidden');
|
||||
if (grammarView) grammarView.classList.remove('hidden');
|
||||
|
||||
updateMobileActiveTab('');
|
||||
try { localStorage.setItem('notes_active_view', 'grammar-view'); } catch (e) {}
|
||||
|
||||
if (unitId) {
|
||||
openGrammarUnit(unitId);
|
||||
} else {
|
||||
loadGrammarUnits();
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Route Handler
|
||||
// -----------------------------------------------------------------------
|
||||
@@ -213,6 +265,10 @@ export async function handleRouting() {
|
||||
hash = '#cefr';
|
||||
window.location.hash = hash;
|
||||
return;
|
||||
} else if (lastView === 'grammar-view') {
|
||||
hash = '#grammar';
|
||||
window.location.hash = hash;
|
||||
return;
|
||||
} else {
|
||||
hash = '#dictionary';
|
||||
}
|
||||
@@ -234,6 +290,14 @@ export async function handleRouting() {
|
||||
const level = parts[1] || null;
|
||||
const mode = parts[2] === 'mistakes' ? 'mistakes' : 'all';
|
||||
openCefrView(level, mode, false);
|
||||
} else if (cleanHash.startsWith('grammar')) {
|
||||
const parts = cleanHash.split('/');
|
||||
if (parts[1] === 'unit' && parts[2]) {
|
||||
const unitId = parseInt(parts[2], 10);
|
||||
openGrammarView(unitId, false);
|
||||
} else {
|
||||
openGrammarView(null, false);
|
||||
}
|
||||
} else if (cleanHash.startsWith('reader') || cleanHash === 'bookshelf') {
|
||||
const parts = cleanHash.split('/');
|
||||
if (parts[1] === 'book' && parts[2]) {
|
||||
@@ -355,6 +419,14 @@ function initMobileNavigation() {
|
||||
});
|
||||
}
|
||||
|
||||
const mobileGrammarBtn = document.getElementById('mobile-grammar-btn');
|
||||
if (mobileGrammarBtn) {
|
||||
mobileGrammarBtn.addEventListener('click', () => {
|
||||
closeMobileMenu();
|
||||
openGrammarView(null, true);
|
||||
});
|
||||
}
|
||||
|
||||
const mobileCefrBtn = document.getElementById('mobile-cefr-btn');
|
||||
if (mobileCefrBtn) {
|
||||
mobileCefrBtn.addEventListener('click', () => {
|
||||
@@ -499,11 +571,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
initSrs();
|
||||
initReader();
|
||||
initCefr();
|
||||
initGrammar();
|
||||
|
||||
// 5. Global Navigation & Header Actions
|
||||
const navBrandHome = document.getElementById('nav-brand-home');
|
||||
const navReaderBtn = document.getElementById('nav-reader-btn');
|
||||
const navCefrBtn = document.getElementById('nav-cefr-btn');
|
||||
const navGrammarBtn = document.getElementById('nav-grammar-btn');
|
||||
const srsTrainerBtn = document.getElementById('srs-trainer-btn');
|
||||
const srsJumpCefrBtn = document.getElementById('srs-jump-cefr-btn');
|
||||
const loginForm = document.getElementById('login-form');
|
||||
@@ -521,6 +595,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
if (navCefrBtn) {
|
||||
navCefrBtn.addEventListener('click', () => { window.location.hash = '#cefr'; });
|
||||
}
|
||||
if (navGrammarBtn) {
|
||||
navGrammarBtn.addEventListener('click', () => { window.location.hash = '#grammar'; });
|
||||
}
|
||||
if (srsTrainerBtn) {
|
||||
srsTrainerBtn.addEventListener('click', () => { window.location.hash = '#srs'; });
|
||||
}
|
||||
|
||||
@@ -248,5 +248,57 @@ export const api = {
|
||||
if (resp.ok) return await resp.json();
|
||||
throw new Error(`Failed to reset level: ${resp.status}`);
|
||||
}
|
||||
},
|
||||
|
||||
// Murphy Grammar Engine & Handwritten Journaling (Task 16)
|
||||
grammar: {
|
||||
async getUnits() {
|
||||
const resp = await fetch('/api/grammar/units');
|
||||
if (resp.ok) return await resp.json();
|
||||
throw new Error(`Failed to load grammar units: ${resp.status}`);
|
||||
},
|
||||
async getUnit(id) {
|
||||
const resp = await fetch(`/api/grammar/units/${id}`);
|
||||
if (resp.ok) return await resp.json();
|
||||
throw new Error(`Failed to load grammar unit ${id}: ${resp.status}`);
|
||||
},
|
||||
async submitAnswer(unitId, exerciseIdx, selectedOption) {
|
||||
const resp = await fetch('/api/grammar/answer', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
unit_id: unitId,
|
||||
exercise_idx: exerciseIdx,
|
||||
selected_option: selectedOption
|
||||
})
|
||||
});
|
||||
if (resp.ok) return await resp.json();
|
||||
throw new Error(`Failed to submit grammar answer: ${resp.status}`);
|
||||
},
|
||||
async completeUnit(unitId, score, handwrittenLogged = false) {
|
||||
const resp = await fetch('/api/grammar/complete', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
unit_id: unitId,
|
||||
score: score,
|
||||
handwritten_logged: handwrittenLogged
|
||||
})
|
||||
});
|
||||
if (resp.ok) return await resp.json();
|
||||
throw new Error(`Failed to complete unit: ${resp.status}`);
|
||||
},
|
||||
async toggleHandwritten(unitId, handwritten) {
|
||||
const resp = await fetch('/api/grammar/handwritten', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
unit_id: unitId,
|
||||
handwritten: handwritten
|
||||
})
|
||||
});
|
||||
if (resp.ok) return await resp.json();
|
||||
throw new Error(`Failed to update handwritten status: ${resp.status}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -0,0 +1,561 @@
|
||||
// =======================================================================
|
||||
// Murphy Grammar Engine & Handwritten Journaling Module (Native ES Module)
|
||||
// Essential Grammar in Use (A1-A2) & English Grammar in Use (B1-B2)
|
||||
// Evening Deep Work Mode, Contrast Method & Paper Notebook Journaling
|
||||
// =======================================================================
|
||||
|
||||
import { api } from './api.js';
|
||||
import { showToast, escapeHtml } from './ui.js';
|
||||
|
||||
let allUnits = [];
|
||||
let currentFilter = 'all';
|
||||
let currentUnit = null;
|
||||
let currentExerciseIdx = 0;
|
||||
let isExerciseAnswered = false;
|
||||
let sessionMistakes = 0;
|
||||
let sessionCorrect = 0;
|
||||
let sessionIngestedCards = [];
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Initializer
|
||||
// -----------------------------------------------------------------------
|
||||
export function initGrammar() {
|
||||
const backBtn = document.getElementById('grammar-back-btn');
|
||||
const tabTheoryBtn = document.getElementById('grammar-tab-theory-btn');
|
||||
const tabPracticeBtn = document.getElementById('grammar-tab-practice-btn');
|
||||
const toPracticeBtn = document.getElementById('grammar-to-practice-btn');
|
||||
const exNextBtn = document.getElementById('grammar-ex-next-btn');
|
||||
const sumRepeatBtn = document.getElementById('grammar-sum-repeat-btn');
|
||||
const sumUnitsBtn = document.getElementById('grammar-sum-units-btn');
|
||||
const sumSrsBtn = document.getElementById('grammar-sum-srs-btn');
|
||||
const handwrittenToggle = document.getElementById('grammar-handwritten-toggle');
|
||||
|
||||
if (backBtn) {
|
||||
backBtn.addEventListener('click', () => {
|
||||
showGrammarScreen('directory');
|
||||
window.location.hash = '#grammar';
|
||||
loadGrammarUnits();
|
||||
});
|
||||
}
|
||||
|
||||
if (tabTheoryBtn && tabPracticeBtn) {
|
||||
tabTheoryBtn.addEventListener('click', () => switchLessonTab('theory'));
|
||||
tabPracticeBtn.addEventListener('click', () => switchLessonTab('practice'));
|
||||
}
|
||||
|
||||
if (toPracticeBtn) {
|
||||
toPracticeBtn.addEventListener('click', () => switchLessonTab('practice'));
|
||||
}
|
||||
|
||||
if (exNextBtn) {
|
||||
exNextBtn.addEventListener('click', () => advanceExercise());
|
||||
}
|
||||
|
||||
if (sumRepeatBtn) {
|
||||
sumRepeatBtn.addEventListener('click', () => {
|
||||
if (currentUnit) {
|
||||
startUnitPractice();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (sumUnitsBtn) {
|
||||
sumUnitsBtn.addEventListener('click', () => {
|
||||
showGrammarScreen('directory');
|
||||
window.location.hash = '#grammar';
|
||||
loadGrammarUnits();
|
||||
});
|
||||
}
|
||||
|
||||
if (sumSrsBtn) {
|
||||
sumSrsBtn.addEventListener('click', () => {
|
||||
window.location.hash = '#srs/grammar';
|
||||
});
|
||||
}
|
||||
|
||||
if (handwrittenToggle) {
|
||||
handwrittenToggle.addEventListener('change', async (e) => {
|
||||
if (!currentUnit) return;
|
||||
const isChecked = e.target.checked;
|
||||
try {
|
||||
await api.grammar.toggleHandwritten(currentUnit.id, isChecked);
|
||||
currentUnit.handwritten_logged = isChecked;
|
||||
if (isChecked) {
|
||||
showToast('✍️ Отметка сохранена: записано от руки в тетрадь!', 'success');
|
||||
} else {
|
||||
showToast('Отметка тетради снята', 'info');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
showToast('Ошибка сохранения статуса', 'error');
|
||||
e.target.checked = !isChecked;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Filter pills in directory
|
||||
const filterPills = document.querySelectorAll('.grammar-filter-pill');
|
||||
filterPills.forEach(pill => {
|
||||
pill.addEventListener('click', () => {
|
||||
filterPills.forEach(p => p.classList.remove('active'));
|
||||
pill.classList.add('active');
|
||||
currentFilter = pill.dataset.filter || 'all';
|
||||
renderUnitsGrid();
|
||||
});
|
||||
});
|
||||
|
||||
// Keyboard shortcuts (1-4 for exercise choices, Enter/Space for next)
|
||||
window.addEventListener('keydown', (e) => {
|
||||
const grammarView = document.getElementById('grammar-view');
|
||||
const lessonScreen = document.getElementById('grammar-lesson-screen');
|
||||
const practiceTab = document.getElementById('grammar-tab-practice-content');
|
||||
if (!grammarView || grammarView.classList.contains('hidden')) return;
|
||||
if (!lessonScreen || lessonScreen.classList.contains('hidden')) return;
|
||||
if (!practiceTab || practiceTab.classList.contains('hidden')) return;
|
||||
|
||||
if (['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) return;
|
||||
|
||||
if (!isExerciseAnswered) {
|
||||
if (['1', '2', '3', '4'].includes(e.key)) {
|
||||
e.preventDefault();
|
||||
const idx = parseInt(e.key, 10) - 1;
|
||||
const btns = document.querySelectorAll('.grammar-opt-btn');
|
||||
if (btns[idx]) btns[idx].click();
|
||||
}
|
||||
} else {
|
||||
if (e.key === ' ' || e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
advanceExercise();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Screen Switcher inside #grammar-view
|
||||
// -----------------------------------------------------------------------
|
||||
export function showGrammarScreen(screenName) {
|
||||
const dir = document.getElementById('grammar-directory-screen');
|
||||
const lesson = document.getElementById('grammar-lesson-screen');
|
||||
|
||||
if (dir) dir.classList.toggle('hidden', screenName !== 'directory');
|
||||
if (lesson) lesson.classList.toggle('hidden', screenName !== 'lesson');
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Units Directory Loader
|
||||
// -----------------------------------------------------------------------
|
||||
export async function loadGrammarUnits() {
|
||||
showGrammarScreen('directory');
|
||||
const grid = document.getElementById('grammar-units-grid');
|
||||
if (grid) {
|
||||
grid.innerHTML = '<div class="grammar-loading"><div class="spinner"></div><p>Загрузка каталога грамматики Мерфи...</p></div>';
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await api.grammar.getUnits();
|
||||
allUnits = res.units || [];
|
||||
updateDirectoryStats();
|
||||
renderUnitsGrid();
|
||||
} catch (err) {
|
||||
console.error('Error loading grammar units:', err);
|
||||
if (grid) {
|
||||
grid.innerHTML = `<div class="empty-state"><p>Ошибка загрузки юнитов: ${escapeHtml(err.message)}</p></div>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateDirectoryStats() {
|
||||
const totalCount = allUnits.length;
|
||||
const completedCount = allUnits.filter(u => u.is_completed).length;
|
||||
const handwrittenCount = allUnits.filter(u => u.handwritten_logged).length;
|
||||
|
||||
const totalEl = document.getElementById('grammar-stat-total');
|
||||
const completedEl = document.getElementById('grammar-stat-completed');
|
||||
const handwrittenEl = document.getElementById('grammar-stat-handwritten');
|
||||
|
||||
if (totalEl) totalEl.textContent = totalCount;
|
||||
if (completedEl) completedEl.textContent = completedCount;
|
||||
if (handwrittenEl) handwrittenEl.textContent = handwrittenCount;
|
||||
}
|
||||
|
||||
function renderUnitsGrid() {
|
||||
const grid = document.getElementById('grammar-units-grid');
|
||||
if (!grid) return;
|
||||
|
||||
let filtered = allUnits;
|
||||
if (currentFilter === 'A1-A2') {
|
||||
filtered = allUnits.filter(u => u.level === 'A1-A2');
|
||||
} else if (currentFilter === 'B1-B2') {
|
||||
filtered = allUnits.filter(u => u.level === 'B1-B2');
|
||||
} else if (currentFilter === 'completed') {
|
||||
filtered = allUnits.filter(u => u.is_completed);
|
||||
} else if (currentFilter === 'handwritten') {
|
||||
filtered = allUnits.filter(u => u.handwritten_logged);
|
||||
} else if (currentFilter !== 'all') {
|
||||
filtered = allUnits.filter(u => u.category.toLowerCase().includes(currentFilter.toLowerCase()));
|
||||
}
|
||||
|
||||
if (filtered.length === 0) {
|
||||
grid.innerHTML = '<div class="empty-state"><p>Нет юнитов в этой категории</p></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
grid.innerHTML = filtered.map(unit => {
|
||||
const levelBadgeClass = unit.level === 'A1-A2' ? 'badge-a1' : 'badge-b1';
|
||||
const isComp = unit.is_completed;
|
||||
const isHw = unit.handwritten_logged;
|
||||
|
||||
return `
|
||||
<div class="grammar-unit-card ${isComp ? 'is-completed' : ''}" data-unit-id="${unit.id}">
|
||||
<div class="grammar-card-header">
|
||||
<span class="grammar-unit-number">Юнит ${unit.unit_num}</span>
|
||||
<span class="grammar-level-pill ${levelBadgeClass}">${escapeHtml(unit.level)}</span>
|
||||
</div>
|
||||
<h3 class="grammar-card-title">${escapeHtml(unit.title)}</h3>
|
||||
<p class="grammar-card-sub">${escapeHtml(unit.subtitle)}</p>
|
||||
<div class="grammar-card-meta">
|
||||
<span class="grammar-card-cat"><i class="ph-folder-simple"></i> ${escapeHtml(unit.category)}</span>
|
||||
</div>
|
||||
<div class="grammar-card-footer">
|
||||
<div class="grammar-badges">
|
||||
${isComp ? `<span class="badge-status-completed"><i class="ph-check-circle-fill"></i> ${unit.score || 100}%</span>` : '<span class="badge-status-new">Новый</span>'}
|
||||
${isHw ? '<span class="badge-status-handwritten" title="Записано от руки в тетрадь"><i class="ph-pen-nib-fill"></i> В тетради</span>' : ''}
|
||||
</div>
|
||||
<button class="btn btn-sm btn-primary grammar-open-btn" data-unit-id="${unit.id}">
|
||||
${isComp ? 'Повторить' : 'Начать'} <i class="ph-arrow-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// Attach click handlers to cards
|
||||
grid.querySelectorAll('.grammar-unit-card').forEach(card => {
|
||||
card.addEventListener('click', (e) => {
|
||||
const unitId = parseInt(card.dataset.unitId, 10);
|
||||
window.location.hash = `#grammar/unit/${unitId}`;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Unit Lesson Loader
|
||||
// -----------------------------------------------------------------------
|
||||
export async function openGrammarUnit(unitId) {
|
||||
showGrammarScreen('lesson');
|
||||
const lessonScreen = document.getElementById('grammar-lesson-screen');
|
||||
if (!lessonScreen) return;
|
||||
|
||||
const titleEl = document.getElementById('grammar-lesson-title');
|
||||
if (titleEl) titleEl.textContent = 'Загрузка юнита...';
|
||||
|
||||
try {
|
||||
currentUnit = await api.grammar.getUnit(unitId);
|
||||
renderUnitTheory();
|
||||
switchLessonTab('theory');
|
||||
} catch (err) {
|
||||
console.error('Error loading grammar unit:', err);
|
||||
showToast('Не удалось загрузить урок: ' + err.message, 'error');
|
||||
window.location.hash = '#grammar';
|
||||
}
|
||||
}
|
||||
|
||||
function switchLessonTab(tab) {
|
||||
const tabTheoryBtn = document.getElementById('grammar-tab-theory-btn');
|
||||
const tabPracticeBtn = document.getElementById('grammar-tab-practice-btn');
|
||||
const tabTheoryContent = document.getElementById('grammar-tab-theory-content');
|
||||
const tabPracticeContent = document.getElementById('grammar-tab-practice-content');
|
||||
const summaryCard = document.getElementById('grammar-summary-card');
|
||||
|
||||
if (tab === 'theory') {
|
||||
if (tabTheoryBtn) tabTheoryBtn.classList.add('active');
|
||||
if (tabPracticeBtn) tabPracticeBtn.classList.remove('active');
|
||||
if (tabTheoryContent) tabTheoryContent.classList.remove('hidden');
|
||||
if (tabPracticeContent) tabPracticeContent.classList.add('hidden');
|
||||
if (summaryCard) summaryCard.classList.add('hidden');
|
||||
} else if (tab === 'practice') {
|
||||
if (tabTheoryBtn) tabTheoryBtn.classList.remove('active');
|
||||
if (tabPracticeBtn) tabPracticeBtn.classList.add('active');
|
||||
if (tabTheoryContent) tabTheoryContent.classList.add('hidden');
|
||||
if (summaryCard) summaryCard.classList.add('hidden');
|
||||
if (tabPracticeContent) tabPracticeContent.classList.remove('hidden');
|
||||
startUnitPractice();
|
||||
} else if (tab === 'summary') {
|
||||
if (tabTheoryBtn) tabTheoryBtn.classList.remove('active');
|
||||
if (tabPracticeBtn) tabPracticeBtn.classList.remove('active');
|
||||
if (tabTheoryContent) tabTheoryContent.classList.add('hidden');
|
||||
if (tabPracticeContent) tabPracticeContent.classList.add('hidden');
|
||||
if (summaryCard) summaryCard.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function renderUnitTheory() {
|
||||
if (!currentUnit) return;
|
||||
|
||||
// Header info
|
||||
const numEl = document.getElementById('grammar-lesson-num');
|
||||
const levelEl = document.getElementById('grammar-lesson-level');
|
||||
const titleEl = document.getElementById('grammar-lesson-title');
|
||||
const subEl = document.getElementById('grammar-lesson-sub');
|
||||
const catEl = document.getElementById('grammar-lesson-cat');
|
||||
const handwrittenToggle = document.getElementById('grammar-handwritten-toggle');
|
||||
|
||||
if (numEl) numEl.textContent = `Юнит ${currentUnit.unit_num}`;
|
||||
if (levelEl) {
|
||||
levelEl.textContent = currentUnit.level;
|
||||
levelEl.className = `grammar-level-pill ${currentUnit.level === 'A1-A2' ? 'badge-a1' : 'badge-b1'}`;
|
||||
}
|
||||
if (titleEl) titleEl.textContent = currentUnit.title;
|
||||
if (subEl) subEl.textContent = currentUnit.subtitle || '';
|
||||
if (catEl) catEl.textContent = currentUnit.category;
|
||||
|
||||
if (handwrittenToggle) {
|
||||
handwrittenToggle.checked = Boolean(currentUnit.handwritten_logged);
|
||||
}
|
||||
|
||||
// Golden formula
|
||||
const formulaEl = document.getElementById('grammar-golden-formula-text');
|
||||
if (formulaEl) {
|
||||
formulaEl.textContent = currentUnit.golden_formula;
|
||||
}
|
||||
|
||||
// Journaling prompt
|
||||
const promptEl = document.getElementById('grammar-journaling-prompt-text');
|
||||
if (promptEl) {
|
||||
promptEl.textContent = currentUnit.journaling_prompt;
|
||||
}
|
||||
|
||||
// Contrasts
|
||||
const contrastsContainer = document.getElementById('grammar-contrasts-list');
|
||||
if (contrastsContainer) {
|
||||
const contrasts = currentUnit.contrasts || [];
|
||||
if (contrasts.length === 0) {
|
||||
contrastsContainer.innerHTML = '';
|
||||
} else {
|
||||
contrastsContainer.innerHTML = contrasts.map(c => `
|
||||
<div class="grammar-contrast-card">
|
||||
<div class="contrast-col contrast-a">
|
||||
<div class="contrast-header"><span class="contrast-pill a">Ситуация А</span> ${escapeHtml(c.situation_a)}</div>
|
||||
<div class="contrast-example">${escapeHtml(c.example_a)}</div>
|
||||
<div class="contrast-trans">${escapeHtml(c.trans_a)}</div>
|
||||
</div>
|
||||
<div class="contrast-divider">
|
||||
<span class="vs-badge">VS</span>
|
||||
</div>
|
||||
<div class="contrast-col contrast-b">
|
||||
<div class="contrast-header"><span class="contrast-pill b">Ситуация Б</span> ${escapeHtml(c.situation_b)}</div>
|
||||
<div class="contrast-example">${escapeHtml(c.example_b)}</div>
|
||||
<div class="contrast-trans">${escapeHtml(c.trans_b)}</div>
|
||||
</div>
|
||||
<div class="contrast-key-diff">
|
||||
<strong>💡 Ключевая разница:</strong> ${escapeHtml(c.key_difference)}
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Cloze Tap Practice Engine (5 micro-exercises)
|
||||
// -----------------------------------------------------------------------
|
||||
function startUnitPractice() {
|
||||
if (!currentUnit) return;
|
||||
currentExerciseIdx = 0;
|
||||
isExerciseAnswered = false;
|
||||
sessionMistakes = 0;
|
||||
sessionCorrect = 0;
|
||||
sessionIngestedCards = [];
|
||||
|
||||
renderExercise();
|
||||
}
|
||||
|
||||
function renderExercise() {
|
||||
if (!currentUnit || !currentUnit.exercises) return;
|
||||
const exercises = currentUnit.exercises;
|
||||
|
||||
if (currentExerciseIdx >= exercises.length) {
|
||||
finishUnitPractice();
|
||||
return;
|
||||
}
|
||||
|
||||
const ex = exercises[currentExerciseIdx];
|
||||
isExerciseAnswered = false;
|
||||
|
||||
// Progress bar & dots
|
||||
const progressText = document.getElementById('grammar-practice-progress');
|
||||
const dotsContainer = document.getElementById('grammar-practice-dots');
|
||||
if (progressText) {
|
||||
progressText.textContent = `Задание ${currentExerciseIdx + 1} из ${exercises.length}`;
|
||||
}
|
||||
if (dotsContainer) {
|
||||
dotsContainer.innerHTML = exercises.map((_, i) => {
|
||||
let dotClass = 'dot';
|
||||
if (i < currentExerciseIdx) dotClass += ' dot-done';
|
||||
if (i === currentExerciseIdx) dotClass += ' dot-active';
|
||||
return `<span class="${dotClass}"></span>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// Sentence with cloze blank
|
||||
const sentenceEl = document.getElementById('grammar-cloze-sentence');
|
||||
const clueEl = document.getElementById('grammar-cloze-clue');
|
||||
const feedbackBox = document.getElementById('grammar-exercise-feedback');
|
||||
const nextBtn = document.getElementById('grammar-ex-next-btn');
|
||||
|
||||
if (feedbackBox) feedbackBox.classList.add('hidden');
|
||||
if (nextBtn) nextBtn.classList.add('hidden');
|
||||
|
||||
if (sentenceEl) {
|
||||
const parts = ex.sentence.split('___');
|
||||
sentenceEl.innerHTML = `${escapeHtml(parts[0] || '')}<span class="cloze-blank" id="current-cloze-blank">______</span>${escapeHtml(parts[1] || '')}`;
|
||||
}
|
||||
|
||||
if (clueEl) {
|
||||
clueEl.textContent = ex.clue ? `💡 Подсказка: ${ex.clue}` : '';
|
||||
}
|
||||
|
||||
// Tap options
|
||||
const optionsContainer = document.getElementById('grammar-options-container');
|
||||
if (optionsContainer) {
|
||||
optionsContainer.innerHTML = ex.options.map((opt, i) => `
|
||||
<button class="btn btn-outline grammar-opt-btn" data-option="${escapeHtml(opt)}">
|
||||
<span class="opt-num">${i + 1}</span>
|
||||
<span class="opt-label">${escapeHtml(opt)}</span>
|
||||
</button>
|
||||
`).join('');
|
||||
|
||||
optionsContainer.querySelectorAll('.grammar-opt-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
if (isExerciseAnswered) return;
|
||||
handleOptionSelect(btn.dataset.option);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function handleOptionSelect(selectedOption) {
|
||||
if (isExerciseAnswered || !currentUnit) return;
|
||||
isExerciseAnswered = true;
|
||||
|
||||
const blank = document.getElementById('current-cloze-blank');
|
||||
if (blank) blank.textContent = selectedOption;
|
||||
|
||||
const allBtns = document.querySelectorAll('.grammar-opt-btn');
|
||||
allBtns.forEach(b => b.disabled = true);
|
||||
|
||||
try {
|
||||
const result = await api.grammar.submitAnswer(currentUnit.id, currentExerciseIdx, selectedOption);
|
||||
|
||||
const feedbackBox = document.getElementById('grammar-exercise-feedback');
|
||||
const nextBtn = document.getElementById('grammar-ex-next-btn');
|
||||
|
||||
allBtns.forEach(btn => {
|
||||
if (btn.dataset.option === result.correct_option) {
|
||||
btn.classList.add('btn-correct');
|
||||
} else if (btn.dataset.option === selectedOption && !result.correct) {
|
||||
btn.classList.add('btn-wrong');
|
||||
}
|
||||
});
|
||||
|
||||
if (blank) {
|
||||
blank.textContent = result.correct_option;
|
||||
blank.classList.add(result.correct ? 'blank-correct' : 'blank-wrong');
|
||||
}
|
||||
|
||||
if (result.correct) {
|
||||
sessionCorrect++;
|
||||
if (feedbackBox) {
|
||||
feedbackBox.className = 'grammar-feedback-box feedback-correct';
|
||||
feedbackBox.innerHTML = `
|
||||
<div class="feedback-title"><i class="ph-check-circle-fill"></i> Верно!</div>
|
||||
<div class="feedback-text">${escapeHtml(result.explanation)}</div>
|
||||
`;
|
||||
feedbackBox.classList.remove('hidden');
|
||||
}
|
||||
} else {
|
||||
sessionMistakes++;
|
||||
if (result.card_created || result.card_updated) {
|
||||
sessionIngestedCards.push(result.card_id);
|
||||
}
|
||||
if (feedbackBox) {
|
||||
feedbackBox.className = 'grammar-feedback-box feedback-wrong';
|
||||
feedbackBox.innerHTML = `
|
||||
<div class="feedback-title"><i class="ph-x-circle-fill"></i> Неверно (правильно: <b>${escapeHtml(result.correct_option)}</b>)</div>
|
||||
<div class="feedback-text">${escapeHtml(result.explanation)}</div>
|
||||
<div class="feedback-srs-ingested">
|
||||
<i class="ph-lightning-fill"></i> Грамматический паттерн сохранён в ваши карточки для утреннего интервального повторения (SRS).
|
||||
</div>
|
||||
`;
|
||||
feedbackBox.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
if (nextBtn) {
|
||||
nextBtn.classList.remove('hidden');
|
||||
nextBtn.focus();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error checking grammar answer:', err);
|
||||
showToast('Ошибка проверки ответа', 'error');
|
||||
allBtns.forEach(b => b.disabled = false);
|
||||
isExerciseAnswered = false;
|
||||
}
|
||||
}
|
||||
|
||||
function advanceExercise() {
|
||||
currentExerciseIdx++;
|
||||
renderExercise();
|
||||
}
|
||||
|
||||
async function finishUnitPractice() {
|
||||
if (!currentUnit) return;
|
||||
const total = currentUnit.exercises.length;
|
||||
const score = Math.round((sessionCorrect / total) * 100);
|
||||
|
||||
// Save completion
|
||||
try {
|
||||
await api.grammar.completeUnit(currentUnit.id, score, Boolean(currentUnit.handwritten_logged));
|
||||
currentUnit.is_completed = true;
|
||||
currentUnit.score = Math.max(currentUnit.score || 0, score);
|
||||
} catch (err) {
|
||||
console.error('Error saving unit completion:', err);
|
||||
}
|
||||
|
||||
// Switch to summary tab
|
||||
switchLessonTab('summary');
|
||||
|
||||
const scoreValEl = document.getElementById('grammar-sum-score-val');
|
||||
const scoreTextEl = document.getElementById('grammar-sum-score-text');
|
||||
const ingestedEl = document.getElementById('grammar-sum-ingested-count');
|
||||
const srsBtn = document.getElementById('grammar-sum-srs-btn');
|
||||
const hwCard = document.getElementById('grammar-sum-hw-reminder');
|
||||
|
||||
if (scoreValEl) scoreValEl.textContent = `${score}%`;
|
||||
if (scoreTextEl) {
|
||||
if (score === 100) {
|
||||
scoreTextEl.textContent = '🎉 Идеально! Все 5 конструкций освоены без ошибок.';
|
||||
} else if (score >= 80) {
|
||||
scoreTextEl.textContent = '👍 Отличный результат! Конструкция хорошо понята.';
|
||||
} else {
|
||||
scoreTextEl.textContent = '💪 Хорошая практика! Ошибки зафиксированы для повторения.';
|
||||
}
|
||||
}
|
||||
|
||||
if (ingestedEl) {
|
||||
ingestedEl.textContent = sessionIngestedCards.length;
|
||||
}
|
||||
|
||||
if (srsBtn) {
|
||||
srsBtn.classList.toggle('hidden', sessionIngestedCards.length === 0);
|
||||
}
|
||||
|
||||
if (hwCard) {
|
||||
if (!currentUnit.handwritten_logged) {
|
||||
hwCard.classList.remove('hidden');
|
||||
} else {
|
||||
hwCard.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
+2
-1
@@ -1,7 +1,7 @@
|
||||
// Service Worker for Notes English PWA (Stage 2)
|
||||
// Strategy: Cache-first for static assets, Network-first for API calls.
|
||||
|
||||
const CACHE_NAME = 'notes-v5.1';
|
||||
const CACHE_NAME = 'notes-v5.2';
|
||||
const OFFLINE_URL = '/';
|
||||
|
||||
const PRECACHE_URLS = [
|
||||
@@ -14,6 +14,7 @@ const PRECACHE_URLS = [
|
||||
'/static/js/modules/srs.js',
|
||||
'/static/js/modules/reader.js',
|
||||
'/static/js/modules/cefr.js',
|
||||
'/static/js/modules/grammar.js',
|
||||
'/manifest.json',
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user