templates/Nordinfo/Main/parts/quiz_block.html.twig line 1

Open in your IDE?
  1. {% set couleur = attribute(post, 'couleur') %}
  2. {% set couleurTexte = attribute(post, 'couleurTexte') %}
  3. {% set style = '' %}
  5. {% if couleur is not null and attribute(couleur, 'codeHexa') is not empty %}
  6.   {% set style = style ~ 'background-color: ' ~ attribute(couleur, 'codeHexa') ~ ';' %}
  7. {% endif %}
  8. {% if couleurTexte is not null and attribute(couleurTexte, 'codeHexa') is not empty %}
  9.   {% set style = style ~ 'color: ' ~ attribute(couleurTexte, 'codeHexa') ~ ';' %}
  10. {% endif %}
  12. <div class="checkboxesContainer _quiz"
  13.   {% if style is not empty %} style="{{ style }}"{% endif %}
  14.      id="checkboxesContainer{{ attribute(post, 'id') }}"
  15.      data-submitted="false">
  16.   <div class="container">
  17.     <h3 class="__title" id="sondageTitle{{ attribute(post, 'id') }}"
  18.       {% if couleurTexte is not null and attribute(couleurTexte, 'codeHexa') is not empty %}
  19.       style="color:{{ attribute(couleurTexte, 'codeHexa') }}"
  20.       {% endif %}>{{ attribute(post, 'title') }}</h3>
  21.     <div id="sondage{{ attribute(post, 'id') }}" class="d-flex justify-content-center">
  22.       <div data-checkbox-group>
  23.         {% for response in attribute(post, 'reponses') %}
  24.           <div class="form-check">
  25.             <input class="form-check-input" type="radio" name="sondageRadios{{ attribute(post, 'id') }}"
  26.                    id="resp{{ attribute(response, 'id') }}" value="{{ attribute(response, 'id') }}">
  27.             <label class="form-check-label" for="resp{{ attribute(response, 'id') }}">{{ attribute(response, 'texte') }}</label>
  28.           </div>
  29.           <script>
  30.             sondageid = '{{ attribute(post, 'id') }}';
  31.             respid = '{{ attribute(response, 'id') }}';
  32.             $('#resp' + respid).on('click', function () {
  33.               let $checkboxesContainer = $('#checkboxesContainer' + '{{ attribute(post, 'id') }}');
  34.               if ($checkboxesContainer[0].getAttribute('data-submitted') === 'false') {
  35.                 let checkboxesContainerInner = $checkboxesContainer[0].querySelector('.container');
  36.                 checkboxesContainerInner.style.opacity = '.1';
  37.                 let desc = $checkboxesContainer[0].querySelector('.desc-quiz');
  38.                 let answerSuccess = $checkboxesContainer[0].querySelector('[data-answer-success]');
  39.                 let checkboxes = $checkboxesContainer[0].querySelectorAll('input[type="radio"]');
  40.                 let checkbox = this;
  41.                 let checkboxLabel = document.querySelector('label[for="' + checkbox.getAttribute('id') + '"]');
  42.                 let iconSuccess = `{{ source('svg/check-solid.svg') }}`;
  43.                 let iconFail = `{{ source('svg/times-solid.svg') }}`;
  44.                 let $loaderSondage = $('#loaderSondage' + {{ attribute(post, 'id') }});
  45.                 let heightCheckboxesContainer = $checkboxesContainer.outerHeight();
  46.                 $checkboxesContainer.css('min-height', heightCheckboxesContainer + 'px');
  47.                 $loaderSondage.fadeIn();
  48.                 $.ajax({
  49.                   type: 'POST',
  50.                   url: "{{ path('ajax_count_sondage') }}",
  51.                   data: {
  52.                     'sondage_id': '{{ attribute(post, 'id') }}',
  53.                     'response_id': '{{ attribute(response, 'id') }}'
  54.                   },
  55.                   success: function (data) {
  56.                     $checkboxesContainer[0].setAttribute('data-submitted', 'true');
  57.                     $loaderSondage.hide();
  58.                     checkboxesContainerInner.style.opacity = '1';
  59.                     for (let i = 0; i < checkboxes.length; i++) {
  60.                       checkboxes[i].setAttribute('disabled', 'true');
  61.                     }
  62.                     checkbox.removeAttribute('disabled');
  63.                     if (data.valide === true) {
  64.                       checkboxLabel.insertAdjacentHTML('beforeend', iconSuccess);
  65.                     } else {
  66.                       checkboxLabel.insertAdjacentHTML('beforeend', iconFail);
  67.                     }
  68.                     if (document.body.contains(desc)) {
  69.                       $(desc).fadeIn();
  70.                       {% if is_detail == false %}window.masonryGrid.layout();{% endif %}
  71.                     }
  72.                     if (document.body.contains(answerSuccess)) {
  73.                       if (data.valide === true) {
  74.                         answerSuccess.innerText = 'Bonne réponse !';
  75.                       } else {
  76.                         answerSuccess.innerText = 'Mauvaise réponse !';
  77.                       }
  78.                     }
  79.                     $.each(data.votes, function (index, value) {
  80.                       let html = '<div class="__result"><div class="__text">' + value.texte + ' : <strong>' + value.pourcent + '%</strong></div><div class="__bar"><div class="__inner" style="width:' + value.pourcent + '%;"></div></div></div>';
  81.                       $('#result_quiz' + data.sondage).append(html);
  82.                     });
  83.                     {% if is_detail == false %}window.masonryGrid.layout();{% endif %}
  84.                   }
  85.                 });
  86.               }
  87.             });
  88.           </script>
  89.         {% endfor %}
  90.       </div>
  91.     </div>
  92.     <div class="desc-quiz" style="display:none;">
  93.       <div class="text-center" style="height:44px;padding-top:.5rem;padding-bottom:.75rem;">
  94.         <strong data-answer-success></strong>
  95.       </div>
  96.       {% if attribute(post, 'content')|length > 0 %}
  97.         <div style="padding-bottom:2em;">
  98.           {% if is_detail == true %}
  99.             {{ content_post|raw }}
  100.           {% else %}
  101.             {{ attribute(post, 'content')|raw }}
  102.           {% endif %}
  103.         </div>
  104.       {% endif %}
  105.     </div>
  106.     <div id="result_quiz{{ attribute(post, 'id') }}"></div>
  107.   </div>
  108.   <div class="__loader-container" id="loaderSondage{{ attribute(post, 'id') }}" style="display:none;">
  109.     <span class="loader">Chargement en cours</span>
  110.   </div>
  111. </div>