upsc_quiz-1.0.x-dev/templates/upsc-quiz-main.html.twig

{#
/**
 * @file
 * Template for UPSC Quiz main page.
 *
 * Available variables:
 * - quiz_data: Array containing quiz questions and sections
 * - user_data: Array containing user information
 * - settings: Array containing quiz settings
 */
#}

<div id="upsc-quiz-app" class="upsc-quiz-wrapper">
  <!-- Welcome Screen -->
  <div class="screen" id="welcomeScreen">
    <div class="welcome-content">
      <h2>{{ 'Welcome to UPSC Exam Preparation Quiz'|t }}</h2>
      <p>{{ 'Test your knowledge across all major subjects covered in the Gujarat Public Service Commission examination.'|t }}</p>
      
      <div class="quiz-sections">
        <h3>{{ 'Quiz Sections Available:'|t }}</h3>
        <div class="sections-grid">
          <div class="section-card" data-section="reasoning">
            <i class="fas fa-brain"></i>
            <h4>{{ 'Reasoning & Logic'|t }}</h4>
            <p>{{ 'Logical reasoning, puzzles, and analytical skills'|t }}</p>
            <span class="question-count">{{ '15 Questions'|t }}</span>
          </div>
          <div class="section-card" data-section="english">
            <i class="fas fa-language"></i>
            <h4>{{ 'English Language'|t }}</h4>
            <p>{{ 'Grammar, comprehension, and vocabulary'|t }}</p>
            <span class="question-count">{{ '10 Questions'|t }}</span>
          </div>
          <div class="section-card" data-section="polity">
            <i class="fas fa-landmark"></i>
            <h4>{{ 'Indian Polity'|t }}</h4>
            <p>{{ 'Constitution, governance, and political system'|t }}</p>
            <span class="question-count">{{ '15 Questions'|t }}</span>
          </div>
          <div class="section-card" data-section="history">
            <i class="fas fa-scroll"></i>
            <h4>{{ 'History'|t }}</h4>
            <p>{{ 'Ancient, medieval, and modern Indian history'|t }}</p>
            <span class="question-count">{{ '12 Questions'|t }}</span>
          </div>
          <div class="section-card" data-section="geography">
            <i class="fas fa-globe-asia"></i>
            <h4>{{ 'Geography'|t }}</h4>
            <p>{{ 'Physical and human geography of India'|t }}</p>
            <span class="question-count">{{ '10 Questions'|t }}</span>
          </div>
          <div class="section-card" data-section="current-affairs">
            <i class="fas fa-newspaper"></i>
            <h4>{{ 'Current Affairs'|t }}</h4>
            <p>{{ 'Recent developments and general knowledge'|t }}</p>
            <span class="question-count">{{ '8 Questions'|t }}</span>
          </div>
        </div>
      </div>

      <div class="quiz-options">
        <h3>{{ 'Choose Your Quiz Mode:'|t }}</h3>
        <div class="quiz-modes">
          <button class="mode-btn" id="practiceMode">
            <i class="fas fa-play-circle"></i>
            <span>{{ 'Practice Mode'|t }}</span>
            <small>{{ 'No time limit, immediate feedback'|t }}</small>
          </button>
          <button class="mode-btn" id="examMode">
            <i class="fas fa-stopwatch"></i>
            <span>{{ 'Exam Mode'|t }}</span>
            <small>{{ 'Time limit: @time minutes'|t({'@time': settings.time_limit}) }}</small>
          </button>
          <button class="mode-btn" id="sectionMode">
            <i class="fas fa-list"></i>
            <span>{{ 'Section-wise'|t }}</span>
            <small>{{ 'Practice specific subjects'|t }}</small>
          </button>
        </div>
      </div>

      {% if user_data.anonymous %}
        <div class="login-notice">
          <div class="alert alert-info">
            <i class="fas fa-info-circle"></i>
            <p>{{ 'To save your progress and view detailed statistics, please <a href="@login_url">log in</a> or <a href="@register_url">create an account</a>.'|t({
              '@login_url': path('user.login'),
              '@register_url': path('user.register')
            })|raw }}</p>
          </div>
        </div>
      {% endif %}
    </div>
  </div>

  <!-- Section Selection Screen -->
  <div class="screen hidden" id="sectionScreen">
    <div class="section-selection">
      <h2>{{ 'Choose a Section to Practice'|t }}</h2>
      <div class="section-buttons">
        <button class="section-btn" data-section="reasoning">
          <i class="fas fa-brain"></i>
          {{ 'Reasoning & Logic'|t }}
        </button>
        <button class="section-btn" data-section="english">
          <i class="fas fa-language"></i>
          {{ 'English Language'|t }}
        </button>
        <button class="section-btn" data-section="polity">
          <i class="fas fa-landmark"></i>
          {{ 'Indian Polity'|t }}
        </button>
        <button class="section-btn" data-section="history">
          <i class="fas fa-scroll"></i>
          {{ 'History'|t }}
        </button>
        <button class="section-btn" data-section="geography">
          <i class="fas fa-globe-asia"></i>
          {{ 'Geography'|t }}
        </button>
        <button class="section-btn" data-section="current-affairs">
          <i class="fas fa-newspaper"></i>
          {{ 'Current Affairs'|t }}
        </button>
      </div>
      <button class="back-btn" id="backToWelcome">
        <i class="fas fa-arrow-left"></i> {{ 'Back to Main Menu'|t }}
      </button>
    </div>
  </div>

  <!-- Quiz Screen -->
  <div class="screen hidden" id="quizScreen">
    <!-- Progress Bar -->
    <div class="progress-container">
      <div class="progress-bar">
        <div class="progress-fill" id="progressFill"></div>
      </div>
      <div class="progress-text">
        <span id="currentQuestion">1</span> {{ 'of'|t }} <span id="totalQuestions">{{ quiz_data.total_questions }}</span>
      </div>
    </div>

    <!-- Section Navigation -->
    <div class="section-nav" id="sectionNav">
      <button class="nav-section" data-section="reasoning">{{ 'Reasoning'|t }}</button>
      <button class="nav-section" data-section="english">{{ 'English'|t }}</button>
      <button class="nav-section" data-section="polity">{{ 'Polity'|t }}</button>
      <button class="nav-section" data-section="history">{{ 'History'|t }}</button>
      <button class="nav-section" data-section="geography">{{ 'Geography'|t }}</button>
      <button class="nav-section" data-section="current-affairs">{{ 'Current Affairs'|t }}</button>
    </div>

    <!-- Question Container -->
    <div class="question-container">
      <div class="question-header">
        <span class="question-section" id="questionSection">{{ 'Reasoning & Logic'|t }}</span>
        <span class="question-number" id="questionNumber">{{ 'Question 1'|t }}</span>
      </div>
      
      <div class="question-content">
        <h3 id="questionText">{{ 'Loading question...'|t }}</h3>
        <div class="options-container" id="optionsContainer">
          <!-- Options will be populated by JavaScript -->
        </div>
      </div>

      <div class="question-actions">
        <button class="action-btn secondary" id="prevBtn" disabled>
          <i class="fas fa-chevron-left"></i> {{ 'Previous'|t }}
        </button>
        <button class="action-btn secondary" id="skipBtn">
          {{ 'Skip'|t }} <i class="fas fa-chevron-right"></i>
        </button>
        <button class="action-btn primary" id="nextBtn" disabled>
          {{ 'Next'|t }} <i class="fas fa-chevron-right"></i>
        </button>
      </div>
    </div>

    <!-- Question Navigation Grid -->
    <div class="question-grid" id="questionGrid">
      <!-- Question numbers will be populated by JavaScript -->
    </div>

    <!-- Control Panel -->
    <div class="control-panel">
      <button class="control-btn" id="reviewBtn">
        <i class="fas fa-eye"></i> {{ 'Review Answers'|t }}
      </button>
      <button class="control-btn submit" id="submitBtn">
        <i class="fas fa-check"></i> {{ 'Submit Quiz'|t }}
      </button>
      <button class="control-btn" id="pauseBtn">
        <i class="fas fa-pause"></i> {{ 'Pause'|t }}
      </button>
    </div>
  </div>

  <!-- Results Screen -->
  <div class="screen hidden" id="resultsScreen">
    <div class="results-container">
      <div class="results-header">
        <h2><i class="fas fa-chart-line"></i> {{ 'Quiz Results'|t }}</h2>
        <div class="overall-score">
          <div class="score-circle">
            <span id="overallPercentage">0%</span>
          </div>
          <div class="score-details">
            <p>{{ 'Total Score:'|t }} <span id="totalScore">0/{{ quiz_data.total_questions }}</span></p>
            <p>{{ 'Time Taken:'|t }} <span id="timeTaken">00:00</span></p>
          </div>
        </div>
      </div>

      <div class="section-results" id="sectionResults">
        <!-- Section-wise results will be populated by JavaScript -->
      </div>

      <div class="performance-analysis">
        <h3><i class="fas fa-analytics"></i> {{ 'Performance Analysis'|t }}</h3>
        <div class="analysis-content" id="analysisContent">
          <!-- Performance analysis will be populated by JavaScript -->
        </div>
      </div>

      <div class="result-actions">
        <button class="action-btn primary" id="reviewAnswersBtn">
          <i class="fas fa-list-check"></i> {{ 'Review All Answers'|t }}
        </button>
        <button class="action-btn secondary" id="retakeQuizBtn">
          <i class="fas fa-redo"></i> {{ 'Retake Quiz'|t }}
        </button>
        <button class="action-btn secondary" id="newQuizBtn">
          <i class="fas fa-home"></i> {{ 'Main Menu'|t }}
        </button>
      </div>
    </div>
  </div>

  <!-- Review Screen -->
  <div class="screen hidden" id="reviewScreen">
    <div class="review-container">
      <div class="review-header">
        <h2><i class="fas fa-list-check"></i> {{ 'Answer Review'|t }}</h2>
        <div class="review-filters">
          <button class="filter-btn active" data-filter="all">{{ 'All Questions'|t }}</button>
          <button class="filter-btn" data-filter="correct">{{ 'Correct'|t }}</button>
          <button class="filter-btn" data-filter="incorrect">{{ 'Incorrect'|t }}</button>
          <button class="filter-btn" data-filter="skipped">{{ 'Skipped'|t }}</button>
        </div>
      </div>

      <div class="review-content" id="reviewContent">
        <!-- Review content will be populated by JavaScript -->
      </div>

      <div class="review-actions">
        <button class="action-btn secondary" id="backToResults">
          <i class="fas fa-arrow-left"></i> {{ 'Back to Results'|t }}
        </button>
      </div>
    </div>
  </div>

  <!-- Loading Overlay -->
  <div class="loading-overlay hidden" id="loadingOverlay">
    <div class="loading-spinner">
      <i class="fas fa-spinner fa-spin"></i>
      <p>{{ 'Loading quiz...'|t }}</p>
    </div>
  </div>

  <!-- Confirmation Modal -->
  <div class="modal-overlay hidden" id="modalOverlay">
    <div class="modal">
      <div class="modal-header">
        <h3 id="modalTitle">{{ 'Confirm Action'|t }}</h3>
      </div>
      <div class="modal-body">
        <p id="modalMessage">{{ 'Are you sure you want to proceed?'|t }}</p>
      </div>
      <div class="modal-actions">
        <button class="action-btn secondary" id="modalCancel">{{ 'Cancel'|t }}</button>
        <button class="action-btn primary" id="modalConfirm">{{ 'Confirm'|t }}</button>
      </div>
    </div>
  </div>
</div>

<!-- Hidden data for JavaScript -->
<script type="application/json" id="quiz-data">
  {{ quiz_data|json_encode|raw }}
</script>

<script type="application/json" id="user-data">
  {{ user_data|json_encode|raw }}
</script>

<script type="application/json" id="quiz-settings">
  {{ settings|json_encode|raw }}
</script>