modals
4 days ago
questions
4 days ago
attempt-details.php
4 days ago
attempt.php
4 days ago
content.php
4 days ago
nav-item.php
4 days ago
progress-bar.php
4 days ago
question-header.php
4 days ago
question.php
4 days ago
progress-bar.php
160 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Tutor quiz progress bar. |
| 4 | * |
| 5 | * @package Tutor\Templates |
| 6 | * @author Themeum <support@themeum.com> |
| 7 | * @link https://themeum.com |
| 8 | * @since 4.0.0 |
| 9 | */ |
| 10 | |
| 11 | defined( 'ABSPATH' ) || exit; |
| 12 | |
| 13 | use Tutor\Components\Button; |
| 14 | use Tutor\Components\Constants\Variant; |
| 15 | use Tutor\Helpers\TimerHelper; |
| 16 | |
| 17 | global $tutor_is_started_quiz; |
| 18 | |
| 19 | $remaining_time_secs = isset( $remaining_time_secs ) ? (int) $remaining_time_secs : 0; |
| 20 | $quiz_when_time_expires = $quiz_when_time_expires ?? 'auto_abandon'; |
| 21 | $form_id = $form_id ?? ''; |
| 22 | $modal_id = $modal_id ?? ''; |
| 23 | $has_time_limit = isset( $has_time_limit ) ? (bool) $has_time_limit : $remaining_time_secs > 0; |
| 24 | $hide_quiz_time_display = isset( $hide_quiz_time_display ) ? (bool) $hide_quiz_time_display : false; |
| 25 | $total_questions = isset( $total_questions ) ? (int) $total_questions : 0; |
| 26 | $quiz_title = get_the_title( $tutor_is_started_quiz->quiz_id ); |
| 27 | |
| 28 | $initial_tokens = TimerHelper::build_tokens( $remaining_time_secs ); |
| 29 | $sizer_tokens = TimerHelper::build_tokens( $remaining_time_secs ); |
| 30 | |
| 31 | $render_timer_tokens = static function ( array $tokens ) { |
| 32 | foreach ( $tokens as $token ) { |
| 33 | $type = (string) ( $token['type'] ?? '' ); |
| 34 | $value = (string) ( $token['value'] ?? '' ); |
| 35 | $cls = ''; |
| 36 | |
| 37 | if ( 'digit' === $type ) { |
| 38 | $cls = 'tutor-quiz-timer-digit-wrapper'; |
| 39 | } elseif ( 'separator' === $type ) { |
| 40 | $cls = 'tutor-quiz-timer-separator'; |
| 41 | } elseif ( 'suffix' === $type ) { |
| 42 | $cls = 'tutor-quiz-timer-suffix'; |
| 43 | } elseif ( 'spacer' === $type ) { |
| 44 | $cls = 'tutor-quiz-timer-spacer'; |
| 45 | } |
| 46 | |
| 47 | if ( ! $cls ) { |
| 48 | continue; |
| 49 | } |
| 50 | ?> |
| 51 | <span class="<?php echo esc_attr( $cls ); ?>"> |
| 52 | <?php if ( 'digit' === $type ) : ?> |
| 53 | <?php echo esc_html( $value ); ?> |
| 54 | <?php elseif ( 'spacer' !== $type ) : ?> |
| 55 | <?php echo esc_html( $value ); ?> |
| 56 | <?php endif; ?> |
| 57 | </span> |
| 58 | <?php |
| 59 | } |
| 60 | }; |
| 61 | |
| 62 | ?> |
| 63 | |
| 64 | <div class="tutor-quiz-header"> |
| 65 | <div |
| 66 | class="tutor-quiz-progress" |
| 67 | x-data="tutorQuizTimer({ |
| 68 | duration: <?php echo esc_attr( $remaining_time_secs ); ?>, |
| 69 | hasLimit: <?php echo $has_time_limit ? 'true' : 'false'; ?>, |
| 70 | expiresAction: '<?php echo esc_attr( $quiz_when_time_expires ); ?>', |
| 71 | formId: '<?php echo esc_attr( $form_id ); ?>', |
| 72 | totalQuestions: <?php echo esc_attr( $total_questions ); ?>, |
| 73 | })" |
| 74 | x-init="init()" |
| 75 | > |
| 76 | <div class="tutor-quiz-progress-header"> |
| 77 | <div class="tutor-quiz-progress-meta"> |
| 78 | <?php if ( $has_time_limit && ! $hide_quiz_time_display ) : ?> |
| 79 | <div |
| 80 | class="tutor-quiz-timer-frame" |
| 81 | :class="['is-' + timerState, 'is-' + timerFormat]" |
| 82 | :data-shaking="shaking ? '1' : '0'" |
| 83 | :data-format="timerFormat" |
| 84 | > |
| 85 | <div class="tutor-quiz-timer-frame-shape" aria-hidden="true"> |
| 86 | <div class="tutor-quiz-timer-frame-tabs"> |
| 87 | <span class="tutor-quiz-timer-frame-tab tutor-quiz-timer-frame-tab-start"></span> |
| 88 | <span class="tutor-quiz-timer-frame-tab tutor-quiz-timer-frame-tab-end"></span> |
| 89 | </div> |
| 90 | <div class="tutor-quiz-timer-frame-body"> |
| 91 | <div class="tutor-quiz-timer-frame-body-fill"></div> |
| 92 | <div class="tutor-quiz-timer-frame-body-stroke"></div> |
| 93 | </div> |
| 94 | </div> |
| 95 | |
| 96 | <div class="tutor-quiz-timer-text tutor-quiz-timer-text-sizer" aria-hidden="true"> |
| 97 | <?php $render_timer_tokens( $sizer_tokens ); ?> |
| 98 | </div> |
| 99 | |
| 100 | <div class="tutor-quiz-timer-text tutor-quiz-timer-text-fallback" :class="'is-' + timerState" x-show="!isReady"> |
| 101 | <?php $render_timer_tokens( $initial_tokens ); ?> |
| 102 | </div> |
| 103 | |
| 104 | <div class="tutor-quiz-timer-text tutor-quiz-timer-text-live" :class="'is-' + timerState" x-show="isReady"> |
| 105 | <template x-for="token in displayTokens" :key="token.key"> |
| 106 | <span |
| 107 | :class="{ |
| 108 | 'tutor-quiz-timer-digit-wrapper': token.type === 'digit', |
| 109 | 'tutor-quiz-timer-separator': token.type === 'separator', |
| 110 | 'tutor-quiz-timer-suffix': token.type === 'suffix', |
| 111 | 'tutor-quiz-timer-spacer': token.type === 'spacer' |
| 112 | }" |
| 113 | > |
| 114 | <template x-if="token.type === 'digit'"> |
| 115 | <span |
| 116 | class="tutor-quiz-timer-reel" |
| 117 | :style="'transform: translateY(-' + (Number(token.value) * 1.25) + 'em)'" |
| 118 | > |
| 119 | <?php for ( $i = 0; $i < 10; $i++ ) : ?> |
| 120 | <span><?php echo esc_html( $i ); ?></span> |
| 121 | <?php endfor; ?> |
| 122 | </span> |
| 123 | </template> |
| 124 | |
| 125 | <template x-if="token.type !== 'digit'"> |
| 126 | <span x-text="token.type === 'spacer' ? '' : token.value"></span> |
| 127 | </template> |
| 128 | </span> |
| 129 | </template> |
| 130 | </div> |
| 131 | </div> |
| 132 | <?php endif; ?> |
| 133 | |
| 134 | <div class="tutor-quiz-progress-title"> |
| 135 | <?php echo esc_html( $quiz_title ? $quiz_title : __( 'Quiz', 'tutor' ) ); ?> |
| 136 | </div> |
| 137 | </div> |
| 138 | |
| 139 | <?php |
| 140 | Button::make() |
| 141 | ->label( __( 'Quit', 'tutor' ) ) |
| 142 | ->variant( Variant::OUTLINE ) |
| 143 | ->attr( 'type', 'button' ) |
| 144 | ->attr( 'class', 'tutor-px-8' ) |
| 145 | ->attr( '@click', "TutorCore.modal.showModal('$modal_id')" ) |
| 146 | ->render(); |
| 147 | ?> |
| 148 | </div> |
| 149 | |
| 150 | <div class="tutor-quiz-progress-bar-wrapper"> |
| 151 | <div class="tutor-progress-bar tutor-progress-bar-brand"> |
| 152 | <div |
| 153 | class="tutor-progress-bar-fill" |
| 154 | :style="`--tutor-progress-width: ${attemptedProgress}%`" |
| 155 | ></div> |
| 156 | </div> |
| 157 | </div> |
| 158 | </div> |
| 159 | </div> |
| 160 |