core/templates/components/question-directives/question-player/question-player.component.html - develop - githubmirror/oppia

core/templates/components/question-directives/question-player/question-player.component.html
143 строки7 KB
Aditya Lakhotia
Fix part of #25941: Clean up legacy embedded <style> tags from HTML templates removing inconsistency of first 30 files (#26767)
20 июл 2026, 20:52
Не верифицирован
20 июл 2026, 20:52ed51d49
<div class="oppia-question-player-container"
     [ngClass]="{'oppia-new-question-player-container': isNewLessonPlayerEnabled()}">
  <!-- Question Player -->
  <div class="oppia-question-player" *ngIf="!resultsLoaded"
       [ngClass]="{'oppia-new-question-player': isNewLessonPlayerEnabled()}">

    <oppia-player-header *ngIf="isNewLessonPlayerEnabled()"></oppia-player-header>

    <h1 class="oppia-practice-session" tabindex="0" *ngIf="!isNewLessonPlayerEnabled()">
      Practice Session
    </h1>

    <div class="oppia-new-question-player-card" *ngIf="isNewLessonPlayerEnabled()">
      <div [hidden]="!(totalQuestions > 0)">
        <p [attr.aria-label]="'Question ' + currentQuestion + ' out of ' + totalQuestions">
          Question {{currentQuestion}}/{{totalQuestions}}
        </p>
      </div>
      <oppia-progress-bar [progressPercentage]="currentProgress"></oppia-progress-bar>
    </div>

    <div class="oppia-question-player-card" *ngIf="!isNewLessonPlayerEnabled()">
      <span class="beta-label"
            matTooltip="This feature is only available in English for now"
            matTooltipClass="oppia-mat-tooltip-list">
        Beta
      </span>
      <div *ngIf="!questionsLoading && totalQuestions > 0">
        <h2 class="oppia-question-player-header e2e-test-practice-question-header"
            tabindex="0"
            [attr.aria-label]="'Question ' + currentQuestion + ' out of ' + totalQuestions">
          Question {{currentQuestion}}/{{totalQuestions}}
        </h2>
        <div class="oppia-question-player-progress">
          <div class="current-progress" [ngStyle]="{'width': currentProgress + '%'}"></div>
        </div>
      </div>
      <div *ngIf="!questionsLoading && totalQuestions === 0">
        <h4 class="practice-questions-coming-soon-header">Coming Soon!</h4>
        <div class="practice-questions-coming-soon-text">There are no questions created yet for the selected subtopic(s). Please check back later!</div>
      </div>
    </div>
    <div class="oppia-question-player-body" *ngIf="!isNewLessonPlayerEnabled()">
      <oppia-conversation-skin [questionPlayerConfig]="questionPlayerConfig"></oppia-conversation-skin>
      <attribution-guide></attribution-guide>
    </div>
    <div class="oppia-new-question-player-body" *ngIf="isNewLessonPlayerEnabled()">
      <oppia-new-conversation-skin [questionPlayerConfig]="questionPlayerConfig"></oppia-new-conversation-skin>
    </div>
  </div>
  <!-- End of Question Player -->

  <!-- Results Page -->
  <div class="oppia-question-player-results d-flex flex-column" *ngIf="resultsLoaded">
    <div class="oppia-result-header">
      <h3 class="oppia-question-result-header e2e-test-practice-complete-message" *ngIf="testIsPassed" translate="I18N_QUESTION_PLAYER_TEST_PASSED" tabindex="0"></h3>
      <h3 class="oppia-question-result-header" *ngIf="!testIsPassed" translate="I18N_QUESTION_PLAYER_TEST_FAILED" tabindex="0"></h3>
    </div>

    <div class="oppia-result-body">
      <div class="score-ring-outer">
        <div class="score-ring-inner">
          <oppia-score-ring [score]="totalScore"
                            [testIsPassed]="testIsPassed">
          </oppia-score-ring>
        </div>
      </div>

      <div class="question-player-skills-results">
        <h3 class="oppia-result-detail-header" translate="I18N_QUESTION_PLAYER_LEARN_MORE_ABOUT_SCORE" tabindex="0"></h3>

        <div class="skill-score-body">
          <div class="score" *ngFor="let item of scorePerSkillMapping | keyvalue">
            <div *ngIf="item.value && item.value.total > 0">
              <div class="list-item"
                   (click)="openSkillMasteryModal(item.key)"
                   tabindex="0"
                   [attr.aria-label]="'Your score for ' + item.value.description + ' is ' +
                   item.value.score.toFixed(2) + ' answers correct of ' +
                   item.value.total">
                   {{item.value.description}}
              </div>
              <div class="score-outer d-flex justify-content-between align-items-center">
                <div class="oppia-skill-score-container">
                  <div class="score-bar" [ngStyle]="{width: getScorePercentage(item.value) + '%', background: getColorForScoreBar(item.value)}"></div>
                </div>
                <div class="score-text-outer">
                  <span class="score-recieved">{{item.value.score.toFixed(2)}}</span>
                  <span class="score-total">/ {{item.value.total}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="final-result" tabindex="0"
               [attr.aria-label]="'Your final result is: ' + finalCorrect.toFixed(2) +
               ' correct answers out of total ' + allQuestions">
            <span class="score-final-description" translate="I18N_QUESTION_ANSWERS_CORRECT"></span>
            <span class="score-final score-recieved">{{finalCorrect.toFixed(2)}}</span>
            <span class="score-final">/ {{allQuestions}}</span>
          </div>
          <div class="score-calculation-text" tabindex="0" translate="I18N_QUESTION_PLAYER_SCORE_CALCULATION"></div>
        </div>

        <button class="btn btn-secondary oppia-review-and-retry-button oppia-review-and-retry-button-text mt-4"
                *ngIf="!testIsPassed"
                (click)="reviewConceptCardAndRetryTest()">
          Review and Retry
        </button>
      </div>
    </div>

    <div class="results-footer">
      <div class="question-player-results-footer" *ngIf="showActionButtonsFooter()">
        <ng-container *ngFor="let actionButton of questionPlayerConfig.resultActionButtons">
          <span *ngIf="!(actionButton.type === 'RETRY_SESSION') && !(actionButton.type === 'DASHBOARD' && !userIsLoggedIn) && !(actionButton.type === 'REVIEW_LOWEST_SCORED_SKILL' && getWorstSkillIds().length === 0)"
                (click)="performAction(actionButton)">
            <div class="action-button-inner {{getActionButtonInnerClass(actionButton.type)}}"
                 role="button"
                 tabindex="0">
              <span [innerHTML]="getActionButtonIconHtml(actionButton.type)"></span>
              <span class="action-button-text" translate="{{actionButton.i18nId}}"></span>
            </div>
          </span>
        </ng-container>
      </div>
      <div class="question-player-results-footer" *ngIf="showActionButtonsFooter()">
        <span *ngFor="let actionButton of questionPlayerConfig.resultActionButtons"
              (click)="performAction(actionButton)">
          <div *ngIf="actionButton.type === 'RETRY_SESSION'"
               class="action-button-inner {{getActionButtonInnerClass(actionButton.type)}}"
               tabindex="0"
               aria-label="Retry"
               role="button">
            <span [innerHTML]="getActionButtonIconHtml(actionButton.type)"></span>
            <span class="action-button-text" translate="{{actionButton.i18nId}}"></span>
          </div>
        </span>
      </div>
    </div>

  </div>
  <!-- End of Results Page -->
</div>