opigno-learning-path-training-course.html.twig in Opigno Learning path 8

Default theme implementation to display learnign path course.

Available variables:

• passed
• score
• step
• completed
• badges
• time_spent

1 theme call to opigno-learning-path-training-course.html.twig

LearningPathAchievementController::build_lp_steps in src/Controller/LearningPathAchievementController.php

Returns LP steps.

File

templates/opigno-learning-path-training-course.html.twig

{#
/**
 * @file
 * Default theme implementation to display learnign path course.
 *
 * Available variables:
 * - passed
 * - score
 * - step
 * - completed
 * - badges
 * - time_spent
 */
#}

{% set is_passed = passed.percent == 100 %}
{% set process = (100 * step.progress)|round() %}

<div class="px-3 d-md-flex justify-content-center flex-wrap">
  <div class="float-left mr-3 mr-md-0">
    <div class="h4 mb-0 {{ is_passed ? 'color-green' : 'color-red' }}">{{ passed.value }}</div>
    <div>{{ 'Module'|t }}<br>{{ 'passed'|t }}</div>
  </div>
  <div class="lp_step_summary_course_step_passed_chart donut-wrapper ml-3 mb-3 mb-md-0 {{ is_passed ? 'passed' : 'not_passed' }}">
    <canvas class="donut"
            data-value="{{ passed.percent }}"
            data-width="7"
            data-color="{{ is_passed ? '#c2e76b' : '#ff5440' }}"
            data-track-color="#eeeeee"
            width="67"
            height="67"
            style="box-shadow: rgb(238, 238, 238) 0 0 0 3.5px inset;">
    </canvas>
  </div>
  <div class="ml-md-5 float-left mr-3 mr-md-0">
    <div class="h4 color-blue mb-0">{{ process ~ '%' }}</div>
    <div>{{ 'Completion'|t }}</div>
  </div>
  <div class="lp_step_summary_completion_chart donut-wrapper ml-3 mb-3 mb-md-0">
    <canvas class="donut"
            data-value="{{ process }}"
            data-width="7"
            data-color="#5bb4d8"
            data-track-color="#eeeeee"
            width="67"
            height="67"
            style="box-shadow: rgb(238, 238, 238) 0 0 0 3.5px inset;">
    </canvas>
  </div>
  <div class="ml-md-5 float-left mr-3 mr-md-0">
    <div class="h4 color-blue mb-0">{{ score ~ '%' }}</div>
    <div>{{ 'Score'|t }}</div>
  </div>
  <div class="lp_step_summary_approved_chart donut-wrapper ml-3 mb-3 mb-md-0">
    <canvas class="donut"
            data-value="{{ score }}"
            data-width="7"
            data-color="#5bb4d8"
            data-track-color="#eeeeee"
            width="67"
            height="67"
            style="box-shadow: rgb(238, 238, 238) 0 0 0 3.5px inset;">
    </canvas>
  </div>
  <div class="ml-md-5">
    <div class="text-italic">{{ 'Time spent'|t }}</div>
    <div class="h4 color-blue">{{ time_spent }}</div>
    <div class="text-italic">{{ 'Completed on'|t }}</div>
    <div class="h4 color-blue">{{ completed }}</div>
    <div class="text-italic">{{ 'Badges earned'|t }}</div>
    <div class="h4 color-blue">{{ badges }}</div>
  </div>
</div>
<hr class="lp_course_steps_wrapper ml-3 ml-md-7 mr-3 mr-md-5 my-4">