You are here

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

Same filename and directory in other branches
  1. 8 templates/opigno-learning-path-training-course.html.twig

Default theme implementation to display learnign path course.

Available variables:

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

File

templates/opigno-learning-path-training-course.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation to display learnign path course.
  5. *
  6. * Available variables:
  7. * - passed
  8. * - score
  9. * - step
  10. * - completed
  11. * - badges
  12. * - time_spent
  13. */
  14. #}
  15. {% set is_passed = passed.percent == 100 %}
  16. {% set process = (100 * step.progress)|round() %}
  17. <div class="course">
  18. <div class="course__container">
  19. <h2 class="course__title">
  20. {% if step.mandatory %}
  21. <i class="fi fi-rr-star"></i>
  22. {% endif %}
  23. {{ 'Course - @label'|t({'@label': step.name}) }}
  24. </h2>
  25. <div class="course__content">
  26. <div class="course__status">
  27. <div class="course__status-content">
  28. <div class="label">{{ 'Status' | t }}</div>
  29. <div class="state">{{ 'passed' | t }}</div>
  30. <div class="status">{{ passed.value }}</div>
  31. </div>
  32. </div>
  33. <div class="course__progress">
  34. <div class="label">{{ 'Completion' | t }}</div>
  35. {% include 'lp-circle-progress.html.twig' with {radius: 40, progress: passed.percent} %}
  36. </div>
  37. <div class="course__score">
  38. <div class="label">{{ 'Score' }}</div>
  39. {% include 'lp-circle-progress.html.twig' with {radius: 40, progress: process} %}
  40. </div>
  41. <div class="course__time-spent">
  42. <div class="inner">
  43. <div class="label">{{ 'Time spent' }}</div>
  44. <time class="value">{{ time_spent }}</time>
  45. </div>
  46. </div>
  47. <div class="course__completed-on">
  48. <div class="inner">
  49. <div class="label">{{ 'Completed on' }}</div>
  50. <time class="value">{{ completed }}</time>
  51. </div>
  52. </div>
  53. <div class="course__badges-earned">
  54. <div class="inner">
  55. <div class="label">{{ 'Badges earned' | t }}</div>
  56. <span class="value">{{ badges }}</span></div>
  57. </div>
  58. </div>
  59. </div>
  60. </div>