Hugging Face's logo

Spaces:
robiul487
/
NCAkit
Sleeping

App Files Community
ismdrobiul489 commited on
Commit
16c30ea
·
1 Parent(s): 8426154

Fix: Close trends-tab before quiz-tab to fix tab nesting structure

Browse files
Files changed (1) hide show
  1. static/index.html +56 -57
static/index.html CHANGED
@@ -570,77 +570,76 @@
570
 
571
  <div id="trendsStatus" class="status hidden"></div>
572
  </div>
 
573
 
574
- <!-- Quiz Reel Tab -->
575
- <div id="quiz-tab" class="tab-content">
576
- <div class="card">
577
- <h2>🎯 Quiz Reel Generator</h2>
578
- <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">
579
- Create quiz videos with TTS, thinking time, and animated answer reveals
580
- </p>
581
 
582
- <form id="quizForm">
583
- <div id="quizContainer">
584
- <!-- Quiz 1 -->
585
- <div class="quiz-item"
586
- style="background: var(--bg-secondary); padding: 1.5rem; border-radius: 12px; margin-bottom: 1rem;">
587
- <h4 style="color: var(--accent); margin-bottom: 1rem;">Quiz 1</h4>
 
 
 
 
 
 
 
 
 
 
588
  <div class="form-group">
589
- <label>Hook (Category)</label>
590
- <input type="text" class="quiz-hook" placeholder="e.g., IQ TEST, MATH QUIZ"
591
- value="IQ TEST">
592
  </div>
593
  <div class="form-group">
594
- <label>Question *</label>
595
- <input type="text" class="quiz-question" placeholder="What is the tallest mountain?"
596
- required>
597
  </div>
598
- <div class="form-row">
599
- <div class="form-group">
600
- <label>Option A *</label>
601
- <input type="text" class="quiz-option-a" placeholder="Answer A" required>
602
- </div>
603
- <div class="form-group">
604
- <label>Option B *</label>
605
- <input type="text" class="quiz-option-b" placeholder="Answer B" required>
606
- </div>
607
- <div class="form-group">
608
- <label>Option C *</label>
609
- <input type="text" class="quiz-option-c" placeholder="Answer C" required>
610
- </div>
611
- </div>
612
- <div class="form-row">
613
- <div class="form-group">
614
- <label>Correct Answer *</label>
615
- <select class="quiz-correct" required>
616
- <option value="A">A</option>
617
- <option value="B">B</option>
618
- <option value="C">C</option>
619
- </select>
620
- </div>
621
  </div>
 
 
622
  <div class="form-group">
623
- <label>Explain (shown after answer)</label>
624
- <input type="text" class="quiz-explain" placeholder="Brief explanation of the answer">
 
 
 
 
625
  </div>
626
  </div>
 
 
 
 
627
  </div>
 
628
 
629
- <div style="display: flex; gap: 1rem; margin-bottom: 1.5rem;">
630
- <button type="button" id="addQuizBtn" class="btn btn-secondary" style="flex: 1;">
631
- ➕ Add Another Quiz
632
- </button>
633
- <button type="button" id="removeQuizBtn" class="btn btn-secondary"
634
- style="flex: 1; background: #dc2626;">
635
- ➖ Remove Last Quiz
636
- </button>
637
- </div>
638
 
639
- <button type="submit" class="btn btn-primary" style="width: 100%;">🎯 Generate Quiz Video</button>
640
- </form>
641
 
642
- <div id="quizStatus" class="status hidden"></div>
643
- </div>
644
  </div>
645
  </div>
646
 
 
570
 
571
  <div id="trendsStatus" class="status hidden"></div>
572
  </div>
573
+ </div>
574
 
575
+ <!-- Quiz Reel Tab -->
576
+ <div id="quiz-tab" class="tab-content">
577
+ <div class="card">
578
+ <h2>🎯 Quiz Reel Generator</h2>
579
+ <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">
580
+ Create quiz videos with TTS, thinking time, and animated answer reveals
581
+ </p>
582
 
583
+ <form id="quizForm">
584
+ <div id="quizContainer">
585
+ <!-- Quiz 1 -->
586
+ <div class="quiz-item"
587
+ style="background: var(--bg-secondary); padding: 1.5rem; border-radius: 12px; margin-bottom: 1rem;">
588
+ <h4 style="color: var(--accent); margin-bottom: 1rem;">Quiz 1</h4>
589
+ <div class="form-group">
590
+ <label>Hook (Category)</label>
591
+ <input type="text" class="quiz-hook" placeholder="e.g., IQ TEST, MATH QUIZ" value="IQ TEST">
592
+ </div>
593
+ <div class="form-group">
594
+ <label>Question *</label>
595
+ <input type="text" class="quiz-question" placeholder="What is the tallest mountain?"
596
+ required>
597
+ </div>
598
+ <div class="form-row">
599
  <div class="form-group">
600
+ <label>Option A *</label>
601
+ <input type="text" class="quiz-option-a" placeholder="Answer A" required>
 
602
  </div>
603
  <div class="form-group">
604
+ <label>Option B *</label>
605
+ <input type="text" class="quiz-option-b" placeholder="Answer B" required>
 
606
  </div>
607
+ <div class="form-group">
608
+ <label>Option C *</label>
609
+ <input type="text" class="quiz-option-c" placeholder="Answer C" required>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
610
  </div>
611
+ </div>
612
+ <div class="form-row">
613
  <div class="form-group">
614
+ <label>Correct Answer *</label>
615
+ <select class="quiz-correct" required>
616
+ <option value="A">A</option>
617
+ <option value="B">B</option>
618
+ <option value="C">C</option>
619
+ </select>
620
  </div>
621
  </div>
622
+ <div class="form-group">
623
+ <label>Explain (shown after answer)</label>
624
+ <input type="text" class="quiz-explain" placeholder="Brief explanation of the answer">
625
+ </div>
626
  </div>
627
+ </div>
628
 
629
+ <div style="display: flex; gap: 1rem; margin-bottom: 1.5rem;">
630
+ <button type="button" id="addQuizBtn" class="btn btn-secondary" style="flex: 1;">
631
+ ➕ Add Another Quiz
632
+ </button>
633
+ <button type="button" id="removeQuizBtn" class="btn btn-secondary"
634
+ style="flex: 1; background: #dc2626;">
635
+ ➖ Remove Last Quiz
636
+ </button>
637
+ </div>
638
 
639
+ <button type="submit" class="btn btn-primary" style="width: 100%;">🎯 Generate Quiz Video</button>
640
+ </form>
641
 
642
+ <div id="quizStatus" class="status hidden"></div>
 
643
  </div>
644
  </div>
645