templates/questionnaire/fr/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Outil{% endblock %}
  5. {% block body %}
  6.     <script>
  7.         {% if countPercent is defined %}
  8.         var countPercent = {{ countPercent }}
  9.             {% endif %}
  10.             {% if selectedPath is defined %}
  11.         var selectedPath = {{ selectedPath }}
  12.             {% endif %}
  14.     </script>
  16.     <div class="fs-3 mx-auto mt-5 mb-5 text-center w-75 fw-semibold">
  17.         {{ question }}
  18.     </div>
  20.     {{ form_start(form) }}
  22.     <div class="container text-center">
  24.         <div class="row">
  26.             {% for key, item in form.expertise %}
  28.                 <div class="col-sm-12 col-md-4 ">
  30.                     {% if isFirst is defined %}
  31.                         {{ form_widget(item, {'attr': {'class': 'form-check-input cc' ~ key|trans }}) }}
  32.                         <br>
  33.                         {{ form_label(item, '', {'label_attr': {'class': 'fs-5 p-3 formlabel'}}) }}
  34.                     {% else %}
  35.                         {% if selectedPath == '1' %}
  37.                             {{ form_widget(item, {'attr': {'class': 'form-check-input pinkbg ' ~ key|trans,
  38.                                 'style': 'border-color: #E6A497'}
  39.                             })
  40.                             }}
  41.                             <br>
  42.                             {{ form_label(item, '', {'label_attr': {'class': 'fs-5 p-3 formlabel'}}) }}
  43.                         {% endif %}
  44.                         {% if selectedPath == '2' %}
  46.                             {{ form_widget(item, {'attr':  {'class': 'form-check-input bluebg ' ~ key|trans,
  47.                                 'style': 'border-color: #6E8BC4'}}) }}
  48.                             <br>
  49.                             {{ form_label(item, '', {'label_attr': {'class': 'fs-5 p-3 formlabel'}}) }}
  50.                         {% endif %}
  51.                         {% if selectedPath == '3' %}
  53.                             {{ form_widget(item, {'attr':  {'class': 'form-check-input yellowbg ' ~ key|trans,
  54.                                 'style': 'border-color: #E6CA81'}}) }}
  55.                             <br>
  56.                             {{ form_label(item, '', {'label_attr': {'class': 'fs-5 p-3 formlabel'}}) }}
  57.                         {% endif %}
  59.                     {% endif %}
  61.                 </div>
  63.             {% endfor %}
  64.         </div>
  65.     </div>
  67.     <div class="container w-75 text-center">
  68.         <div class="row">
  70.             {% for key, item in selectedQuestionTips %}
  72.                 <div class=" col-sm-6  col-xl-4 my-1 p-2 mx-auto border-maincolor js-tips" style="display: none;"
  73.                      id="tiplevel{{ key }}">
  74.                     <span class="fw-bold">
  75.                         Pas sûr de votre réponse ? <br>
  76.                     </span>
  77.                     {{ item }}
  78.                 </div>
  80.             {% endfor %}
  82.         </div>
  83.     </div>
  86.     {{ form_end(form) }}
  88.     {% if countPercent != 0 %}
  89.         <div id="myProgress">
  90.             <div id="myBar">0%</div>
  91.         </div>
  94.     {% endif %}
  96.     <script>
  97.         var i = 0;
  100.             {% if countPercent is defined %}
  102.                 if (i === 0) {
  103.                     i = 1;
  104.                     var elem = document.getElementById("myBar");
  105.                     var width = 0;
  106.                     var id = setInterval(frame, 10);
  108.                     function frame() {
  109.                         if (width >= countPercent) {
  110.                             width = countPercent;
  111.                             clearInterval(id);
  112.                             i = 0;
  113.                         } else {
  114.                             width++;
  115.                             elem.style.width = width + "%";
  116.                             elem.innerHTML = width + "%";
  117.                         }
  118.                     }
  119.                 }
  121.             {% endif %}
  124.     </script>
  126.     <br><br>
  127.     {% if selectedPath is defined %}
  128.     <div class="form-btn js-restart-btn ms-5">
  129.         <a href="{{ path('app-questionnaire-clear') }}" class="custombuttona "> Recommencer</a>
  130.     </div>
  131.     {% endif %}
  132.     <div class="w-100 text-center fs-1 fw-semibold px-md-5 px-sm-2 py-5">
  133.         CONSORTIUM
  134.     </div>
  136.     <div class="customwrapper fw-bold my-5">
  137.         <a href="https://www.uab.cat/" target="_blank " class="text-decoration-none">
  138.             <div class="m-2 mediumitems text-center">
  139.                 <img src="{{ asset('images/logos/21 UAB Logo.png') }}" alt="" class="itemicon-legend">
  140.                 {#                    <div class="py-2"> #}
  141.                 {#                        Université Autonome de Barcelonne #}
  142.                 {#                    </div> #}
  143.             </div>
  144.         </a>
  146.         <div class="m-2 mediumitems text-center">
  147.             <a href="https://eurasianet.eu/" target="_blank" class="text-decoration-none">
  148.                 <img src="{{ asset('images/logos/08 Eurasianet Logo.png') }}" alt=""
  149.                      class="itemicon-legend ">
  150.                 {#                    <div class="py-2"> #}
  151.                 {#                        Eurasianet #}
  152.                 {#                    </div> #}
  153.             </a>
  154.         </div>
  156.         <div class="m-2 mediumitems text-center">
  157.             <a href="https://www.engagees-determinees.org/" target="_blank" class="text-decoration-none">
  158.                 <img src="{{ asset('images/logos/05 CSNlogo_vector_vert.png') }}" alt="" class="itemicon-legend">
  159.                 {#                    <div class="py-2"> #}
  160.                 {#                        Engagé.e.s et Déterminé.e.s #}
  161.                 {#                    </div> #}
  162.             </a>
  163.         </div>
  165.         <div class="m-2 mediumitems text-center">
  166.             <a href="http://jcvbraga.net/" target="_blank" class="text-decoration-none">
  167.                 <img src="{{ asset('images/logos/06 CVP Logo.jpg') }}" alt=""
  168.                      class="itemicon-legend">
  169.                 {#                    <div class="py-2"> #}
  170.                 {#                        Juventude CVP #}
  171.                 {#                    </div> #}
  172.             </a>
  174.         </div>
  176.     </div>
  180. {% endblock %}