templates/learn/dictionary.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}HYPA - Apprendre{% endblock %}
  5. {% block stylesheets %}
  6.     <link rel="stylesheet" href="{{ asset("css/reset.css") }}">
  7.     <link rel="stylesheet" href="{{ asset("css/learn/dictionary.css") }}">
  8.     <style>
  9.         html {
  10.             font-family: HanMufa,sans-serif;
  11.         }
  12.         .character {
  13.             font-family: KaiTi,sans-serif;
  14.         }
  15.     </style>
  16. {% endblock %}
  18. {% block javascripts %}
  19.     <script>
  20.         document.addEventListener('DOMContentLoaded', principale);
  22.         function principale() {
  23.             console.log('js comportements chargé');
  24.             const playsoundButtons = document.querySelectorAll(".playsound")
  25.             playsoundButtons.forEach(button=>{
  26.                 button.addEventListener('click',playsound)
  27.             })
  29.             let semaphore = 1;
  30.             function resetSemaphore(){
  31.                 semaphore=1
  32.             }
  33.             function playsound(evt){
  34.                 if(semaphore) {
  35.                     semaphore=0
  36.                     let audio = new Audio(evt.currentTarget.id);
  37.                     audio.play();
  38.                     audio.addEventListener('ended',resetSemaphore)
  39.                 }
  40.             }
  41.         }
  42.     </script>
  43.     <script src="{{ asset("js/svg.js") }}"></script>
  44. {% endblock %}
  46. {% block body %}
  47.     <header>
  48.         <a href="{{ path("app_menu") }}" id="menu"><img src="{{ asset("images/nav_indicators/learn.png") }}" alt=""></a>
  49.         <h1>HYPA - Dictionnaire</h1>
  50.         <a href="{{ path("app_learn") }}">back to learn</a>
  51.     </header>
  52.     <section>
  53.         <table>
  54.             <tr>
  55.                 <td class="attribute">Character</td>
  56.                 <td class="attribute">Traceme</td>
  57.                 <td class="attribute">Path</td>
  58.                 <td class="attribute">HYPA</td>
  59.                 <td class="attribute">Radical</td>
  60.                 <td class="attribute">Listen</td>
  61.                 <td class="attribute">Course</td>
  62.             </tr>
  64.             {% for character in characters %}
  65.                 <tr  class="element">
  66.                     <td class="attribute character">{{ character.character }}</td>
  68.                     <td class="attribute svg_container"><img src="{{ asset("traceme_generator/svg/"~character.shortcutPath~"5.svg") }}" alt="" onload="SVGInject(this)" viewBox="0 0 500 500" class="svg"/></td>
  70.                     <td class="attribute shortcutPath">
  71.                         <table class="shortcutPathTable">
  72.                             <tr>
  73.                                 {% for num in character.shortcutPath|split('') %}
  74.                                     <td><span class="number" id="number{{ num }}">{{ num }}</span></td>
  75.                                     {% if not loop.index % 2 and not loop.last %}
  76.                                         <td><span>|</span></td>
  77.                                     {% endif %}
  78.                                 {% endfor %}
  79.                             </tr>
  80.                             <tr>
  81.                                 {% if character.shortcutPath|split('')|length > 0 %}
  82.                                     <td colspan="2" class="pathDescriptor"><span>CPI</span></td>
  83.                                     <td></td>
  84.                                 {% endif %}
  85.                                 {% if character.shortcutPath|split('')|length > 2 %}
  86.                                     <td colspan="2" class="pathDescriptor"><span>CPF</span></td>
  87.                                     <td></td>
  88.                                 {% endif %}
  89.                                 {% if character.shortcutPath|split('')|length > 4 %}
  90.                                     <td colspan="2" class="pathDescriptor"><span>CLE</span></td>
  91.                                     <td></td>
  92.                                 {% endif %}
  93.                                 {% if character.shortcutPath|split('')|length > 6 %}
  94.                                     <td><span></span></td>
  95.                                 {% endif %}
  96.                             </tr>
  97.                         </table>
  98.                     </td>
  100.                     <td class="attribute">{{ character.hypa }}</td>
  102. {#                    <td class="attribute character">{{ character.tones }}</td>#}
  104.                     <td class="attribute character">{{ character.fzRadicalValue }}</td>
  106.                     <td class="attribute">
  107.                         {% if character.course %}
  108.                             {% if character.rcc %}
  109.                                     <button class="playsound" id="{{ asset("dictionary/sound/"~character.course.title~"_sons/"~character.rcc.shortcutPath~".m4a") }}">sound</button>
  110.                                 {% else %}
  111.                             {#                            <audio controls controlsList="nodownload" src="{{ asset("dictionary/sound/"~character.course.title~"_sons/"~character.shortcutPath~".m4a") }}">#}
  112.                                     <button class="playsound" id="{{ asset("dictionary/sound/"~character.course.title~"_sons/"~character.shortcutPath~".m4a") }}">sound</button>
  113.                             {#                            </audio>#}
  114.                                 {% endif %}
  115.                         {% elseif character.origin %}
  116.                             {% if character.origin.course %}
  117.                                 <button class="playsound" id="{{ asset("dictionary/sound/"~character.origin.course.title~"_sons/"~character.shortcutPath~".m4a") }}">sound</button>
  118.                             {% endif %}
  119.                         {% endif %}
  120.                     </td>
  122.                     {% if character.course %}
  123.                         <td class="attribute"><a href="{{ path("app_course_view",{"page": character.placeInCourse, "course": character.course.courseId}) }}">{{ character.course.courseId }}</a></td>
  124.                     {% elseif character.origin %}
  125.                         {% if character.origin.course %}
  126.                             <td class="attribute"><a href="{{ path("app_course_view",{"page": character.origin.placeInCourse, "course": character.origin.course.courseId}) }}">{{ character.origin.course.courseId }}</a></td>
  127.                         {% endif %}
  128.                     {% else %}
  130.                         <td class="attribute"></td>
  131.                     {% endif %}
  132.                 </tr>
  133.             {% endfor %}
  134.         </table>
  135.     </section>
  136.     <section id="page_buttons_container">
  137.         {% if course is defined %}
  138.             {% if page > 1 %}
  139.                 <a href="{{ path("app_course",{"page": page - 1, "course": course}) }}" class="page_button"> << </a>
  140.             {% endif %}
  141.             {% if page < nbpages %}
  142.                 <a href="{{ path("app_course",{"page": page + 1, "course": course}) }}" class="page_button"> >> </a>
  143.             {% endif %}
  144.         {% else %}
  145.             {% if page > 1 %}
  146.                 <a href="{{ path("app_dictionary",{"page": page - 1}) }}" class="page_button"> << </a>
  147.             {% endif %}
  148.             {% if page < nbpages %}
  149.                 <a href="{{ path("app_dictionary",{"page": page + 1}) }}" class="page_button"> >> </a>
  150.             {% endif %}
  151.         {% endif %}
  152.     </section>
  153. {% endblock %}