danvics/pediatric-ai-scribe-v3
1
0
Fork 0
Code Issues Pull requests Projects Releases 14 Packages Wiki Activity Actions

Fix AI panel options: use style.display, redesign quiz card

Browse source 
Bug: classList.toggle('hidden') was silently ignored because
.lh-ai-opt-field{display:flex} is defined at CSS line 758, after
.hidden{display:none} at line 242 — same specificity, later rule wins.
Fix: updateAiOptions() now uses element.style.display directly (inline
styles always override class rules).

Also fix initial state: lh-ai-slides-field now uses style="display:none"
instead of class="hidden" so it's correctly hidden on load.

Panel syncs content type from editor on open (editorType → ctype select
→ updateAiOptions called immediately).

Per type:
- Quiz: word count hidden, slides hidden, quiz card visible (no toggle)
- Presentation: word count hidden, slides visible, quiz card hidden
- Article/Pearl: word count visible, slides hidden, quiz card with toggle

Quiz card redesign: gradient blue/indigo background, white header with
icon, clean body — replaces the plain grey rectangle.
This commit is contained in:
Daniel Onyejesi 2026-03-24 02:07:56 -04:00
parent d78b79714c
commit 9a584bcc8a
3 changed files with 52 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
public/components/cms.html
View file

@ -196,30 +196,33 @@
</div>
</div>
<!-- Row 2: context-aware size options -->
<!-- Row 2: context-aware size options (shown/hidden via style.display in JS) -->
<div class="lh-ai-opt-row" id="lh-ai-size-row">
<!-- Article / Pearl: word count hint -->
<div class="lh-ai-opt-field" id="lh-ai-words-field">
<label>Approx. word count <span style="color:var(--g400);font-weight:400;">(optional)</span></label>
<input type="number" id="lh-ai-word-count" value="" min="100" max="3000" step="50" class="cms-input-sm" style="width:100px;" placeholder="e.g. 600">
<div id="lh-ai-words-field" style="display:flex;flex-direction:column;gap:3px;">
<label style="font-size:11px;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:0.3px;">Approx. word count <span style="color:var(--g400);font-weight:400;">(optional)</span></label>
<input type="number" id="lh-ai-word-count" value="" min="100" max="3000" step="50" class="cms-input-sm" style="width:110px;" placeholder="e.g. 600">
</div>
<!-- Presentation: slide count -->
<div class="lh-ai-opt-field hidden" id="lh-ai-slides-field">
<label>Number of slides <span style="color:var(--g400);font-weight:400;">(optional)</span></label>
<input type="number" id="lh-ai-slide-count" value="" min="3" max="30" class="cms-input-sm" style="width:80px;" placeholder="e.g. 10">
<div id="lh-ai-slides-field" style="display:none;flex-direction:column;gap:3px;">
<label style="font-size:11px;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:0.3px;">Number of slides <span style="color:var(--g400);font-weight:400;">(optional)</span></label>
<input type="number" id="lh-ai-slide-count" value="" min="3" max="30" class="cms-input-sm" style="width:90px;" placeholder="e.g. 10">
</div>
</div>
<!-- Row 3: quiz questions — always visible for quiz, optional toggle for others -->
<div id="lh-ai-quiz-row" class="lh-ai-opt-row" style="align-items:center;padding:10px 12px;border:1.5px solid var(--g200);border-radius:8px;background:white;">
<!-- Toggle (hidden for quiz type) -->
<label id="lh-ai-q-toggle-label" style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;font-weight:500;color:var(--g700);margin:0;">
<input type="checkbox" id="lh-ai-q-toggle" style="accent-color:var(--blue);width:15px;height:15px;">
Also generate quiz questions
</label>
<div id="lh-ai-q-count-wrap" style="display:flex;align-items:center;gap:8px;margin-left:auto;">
<label style="font-size:12px;color:var(--g500);margin:0;">How many</label>
<input type="number" id="lh-ai-q-count" value="5" min="1" max="20" class="cms-input-sm" style="width:70px;">
<!-- Row 3: quiz questions card -->
<div id="lh-ai-quiz-row" class="lh-ai-quiz-card">
<div class="lh-ai-quiz-card-header" id="lh-ai-quiz-card-header">
<i class="fas fa-clipboard-question" style="color:var(--blue);font-size:14px;"></i>
<span id="lh-ai-quiz-card-title" style="font-weight:600;font-size:13px;color:var(--g800);">Quiz Questions</span>
</div>
<div class="lh-ai-quiz-card-body">
<label id="lh-ai-q-toggle-label" style="display:none;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--g700);margin:0;">
<input type="checkbox" id="lh-ai-q-toggle" style="accent-color:var(--blue);width:15px;height:15px;flex-shrink:0;">
Also generate quiz questions for this content
</label>
<div id="lh-ai-q-count-wrap" style="display:flex;align-items:center;gap:8px;">
<label style="font-size:12px;color:var(--g600);margin:0;">Number of questions</label>
<input type="number" id="lh-ai-q-count" value="5" min="1" max="20" class="cms-input-sm" style="width:70px;">
</div>
</div>
</div>

7
public/css/styles.css
View file

@ -754,10 +754,15 @@ body{font-family:'Inter',system-ui,sans-serif;background:var(--g50);color:var(--
.lh-ai-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;border:2px dashed var(--g300);border-radius:10px;cursor:pointer;text-align:center;font-size:13px;color:var(--g600);transition:border-color 0.2s;background:var(--g50);}
.lh-ai-dropzone:hover{border-color:var(--blue);background:var(--blue-light);}
.lh-ai-options{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;padding:14px;background:var(--g50);border-radius:8px;}
.lh-ai-opt-row{display:flex;gap:10px;flex-wrap:wrap;}
.lh-ai-opt-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.lh-ai-opt-field{display:flex;flex-direction:column;gap:3px;}
.lh-ai-opt-field label{font-size:11px;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:0.3px;}
/* Quiz questions card inside AI panel */
.lh-ai-quiz-card{background:linear-gradient(135deg,#eff6ff,#eef2ff);border:1.5px solid #c7d2fe;border-radius:10px;overflow:hidden;}
.lh-ai-quiz-card-header{display:flex;align-items:center;gap:8px;padding:10px 14px;background:white;border-bottom:1px solid #e0e7ff;}
.lh-ai-quiz-card-body{padding:12px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
/* WebDAV browser */
.lh-webdav-item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--g100);transition:background 0.1s;}
.lh-webdav-item:last-child{border-bottom:none;}

44
public/js/learningHub.js
View file

@ -545,34 +545,38 @@
}
function updateAiOptions(type) {
var wordsField = document.getElementById('lh-ai-words-field');
var slidesField = document.getElementById('lh-ai-slides-field');
var toggleLabel = document.getElementById('lh-ai-q-toggle-label');
var toggleCb = document.getElementById('lh-ai-q-toggle');
var countWrap = document.getElementById('lh-ai-q-count-wrap');
var wordsField = document.getElementById('lh-ai-words-field');
var slidesField = document.getElementById('lh-ai-slides-field');
var quizRow = document.getElementById('lh-ai-quiz-row');
var cardTitle = document.getElementById('lh-ai-quiz-card-title');
var toggleLabel = document.getElementById('lh-ai-q-toggle-label');
var toggleCb = document.getElementById('lh-ai-q-toggle');
var countWrap = document.getElementById('lh-ai-q-count-wrap');
// Word count: only for article and pearl
if (wordsField) wordsField.classList.toggle('hidden', type === 'quiz' || type === 'presentation');
// Slide count: only for presentation
if (slidesField) slidesField.classList.toggle('hidden', type !== 'presentation');
// Use style.display directly — classList.toggle('hidden') doesn't work because
// .lh-ai-opt-field { display:flex } is defined later in CSS and overrides .hidden
if (wordsField) wordsField.style.display = (type === 'quiz' || type === 'presentation') ? 'none' : 'flex';
if (slidesField) slidesField.style.display = (type === 'presentation') ? 'flex' : 'none';
// Questions section
if (type === 'quiz') {
// Quiz: always generate questions, no toggle, show count directly
// Quiz: questions are the whole point — show the card prominently, no toggle needed
if (quizRow) quizRow.style.display = 'block';
if (cardTitle) cardTitle.textContent = 'Quiz Questions';
if (toggleLabel) toggleLabel.style.display = 'none';
if (toggleCb) { toggleCb.checked = true; toggleCb.disabled = true; }
if (countWrap) countWrap.style.display = 'flex';
if (toggleCb) { toggleCb.checked = true; toggleCb.disabled = true; }
if (countWrap) countWrap.style.display = 'flex';
} else if (type === 'presentation') {
// Presentation: no questions at all
if (toggleLabel) toggleLabel.style.display = 'none';
if (toggleCb) { toggleCb.checked = false; toggleCb.disabled = true; }
if (countWrap) countWrap.style.display = 'none';
// Presentation: no questions
if (quizRow) quizRow.style.display = 'none';
if (toggleCb) { toggleCb.checked = false; toggleCb.disabled = true; }
} else {
// Article / pearl: optional toggle
// Article / pearl: optional questions via toggle
if (quizRow) quizRow.style.display = 'block';
if (cardTitle) cardTitle.textContent = 'Quiz Questions (optional)';
if (toggleLabel) toggleLabel.style.display = 'flex';
if (toggleCb) { toggleCb.disabled = false; }
if (toggleCb) toggleCb.disabled = false;
var checked = toggleCb ? toggleCb.checked : false;
if (countWrap) countWrap.style.display = checked ? 'flex' : 'none';
if (countWrap) countWrap.style.display = checked ? 'flex' : 'none';
}
}