templates/snippets/form-eligibilite-inscription.html.twig line 1

Open in your IDE?
  1. {% extends "layout-snippets.html.twig" %}
  2. {% block snippets %}
  3. {# Configs Générales #}
  4. {% set nbSlide = 16 %}
  5.     {% if editmode %}
  6.         <div class="uk-container apk-container-600 uk-text-center uk-margin-top">
  7.             <h3>Image par défaut</h3>
  8.             {{ pimcore_image("section-questions-img_default", {'width' : 100, 'height' : 100}) }}
  9.         </div>
  10.         <!-- .section-questions -->
  11.         <section class="uk-section">
  12.             <div class="section-questions">
  13.                 
  14.                 {% for i in 1..nbSlide %}
  15.                     <div class="uk-container uk-margin-bottom">
  16.                         <div uk-grid>
  17.                             <div class="uk-width-1-1">
  18.                                 <div class="section-questions-container">
  19.                                     <div style="background: #1e87f0; color: #FFF; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 20px; font-weight: bold; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); border-radius: 50%;">
  20.                                         {{ i }}
  21.                                     </div>
  22.                                     <div class="section-questions-container-icon uk-align-center uk-position-relative uk-flex uk-flex-middle">
  23.                                         {{ pimcore_image("section-questions-img_" ~ i, {'width' : 100, 'height' : 100}) }}
  24.                                     </div>
  25.                                     <div class="uk-container apk-container-600">
  26.                                         <h3 class="h-big-lowcase-grey">{{ pimcore_input("label-question_" ~ i) }}</h3>
  27.                                         <!--<div class="questions">
  28.                                             contenu
  29.                                         </div>-->
  30.                                     </div>
  31.                                 </div>
  32.                             </div>
  33.                         </div>
  34.                     </div>
  35.                     {% if i == 2 or i == 5 %}
  36.                         <div class="uk-container uk-margin-bottom">
  37.                             <div uk-grid>
  38.                                 <div class="uk-width-1-1">
  39.                                     <div class="section-questions-container">
  40.                                         <div style="background: #1e87f0; color: #FFF; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 20px; font-weight: bold; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); border-radius: 50%;">
  41.                                             {{ i }}.1
  42.                                         </div>
  43.                                         <div class="section-questions-container-icon uk-align-center uk-position-relative uk-flex uk-flex-middle">
  44.                                             {{ pimcore_image("section-questions-img_" ~ i ~ "-1", {'width' : 100, 'height' : 100}) }}
  45.                                         </div>
  46.                                         <div class="uk-container apk-container-600">
  47.                                             <h3 class="h-big-lowcase-grey">{{ pimcore_input("label-question_" ~ i ~ "-1") }}</h3>
  48.                                         <!-- <div class="questions">
  49.                                                 contenu
  50.                                             </div>-->
  51.                                         </div>
  52.                                     </div>
  53.                                 </div>
  54.                             </div>
  55.                         </div>
  56.                     {% endif %}
  57.                 {% endfor %}
  58.                     <div class="uk-container uk-margin-bottom">
  59.                         <div uk-grid>
  60.                             <div class="uk-width-1-1">
  61.                                 <div class="section-questions-container">
  62.                                     <div style="background: #1e87f0; color: #FFF; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 16px; font-weight: bold; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); border-radius: 50%;">
  63.                                         END
  64.                                     </div>
  65.                                     <div class="section-questions-container-icon uk-align-center uk-position-relative uk-flex uk-flex-middle">
  66.                                         {{ pimcore_image("section-questions-img_end", {"width" : 100, "height" : 100}) }}
  67.                                     </div>
  68.                                     <div class="uk-container apk-container-600">
  69.                                         <h3 class="h-big-lowcase-grey">{{ pimcore_input("label-question_end") }}</h3>
  70.                                         <div class="questions">
  71.                                             <div>
  72.                                                 {{ pimcore_wysiwyg("content-question_end") }}
  73.                                             </div>
  74.                                         </div>
  75.                                         {% if not pimcore_website_config('akimediaActivate') %}
  76.                                         <div class="uk-alert uk-alert-primary" uk-alert>
  77.                                             {{ pimcore_link("btn-action-question-end") }}                
  78.                                         </div>
  79.                                         {% endif %}
  80.                                     </div>
  81.                                 </div>
  82.                             </div>
  83.                         </div>
  84.                         {% if not pimcore_website_config('akimediaActivate') %}
  85.                         <div class="section-questions-container">
  86.                             <div class="uk-alert-primary uk-margin-medium-bottom" uk-alert>
  87.                                 <h3 class="uk-h3">SKIP TEST LINK</h3>
  88.                                 {{ pimcore_link("btn-action-skip-test") }}
  89.                             </div>
  90.                         </div>
  91.                         {% endif %}
  92.                     </div>
  93.             </div>
  94.         
  95.         </section>
  96.         
  97.     {% else %}
  98.         <!-- .section-questions -->
  99.         <div class="uk-container apk-container-1400">
  100.             <div>
  101.                 <section class="section-questions-padding">
  102.                     <div class="section-questions">
  103.                         <div uk-grid>
  104.                             <div class="uk-width-1-1">
  105.                                 <div class="section-questions-container">
  106.                                     <progress class="uk-progress" id="apk-progress-bar-question" value="0" max="100"></progress>
  107.                                     <div class="section-questions-container-icon uk-align-center uk-position-relative uk-flex uk-flex-middle">
  108.                                         {{ pimcore_image("section-questions-img_1", {
  109.                                             "attributes" : {
  110.                                                 "data-apk-image-step" : "1"
  111.                                             }
  112.                                         }) }}
  113.                                     </div>
  114.                                     <form id="form-quipeutdonnersonsang" class="uk-form-stacked" data-prev-step="0"
  115.                                         data-current-step="1">
  116.                                         <div class="uk-container">
  117.                                             <div class="questions">
  118.                                                 {#
  119.                                                 #--------------------------------
  120.                                                 # Question 1 : Homme / Femme
  121.                                                 #--------------------------------
  122.                                                 #}
  123.                                                 <div data-question="1">
  124.                                                     <h3 class="h-big-lowcase-grey">
  125.                                                         <span class="step-number">1.</span>
  126.                                                         {{ pimcore_input("label-question_1") }}
  127.                                                     </h3>
  128.                                                     <div class="question-message-before"></div>
  129.                                                     <div class="uk-form-controls">
  130.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q1" value="Homme"
  131.                                                                         autocomplete="false"/>
  132.                                                                 <span>{{ 'Homme'|trans }}</span></label>
  133.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q1" value="Femme"
  134.                                                                         autocomplete="false"/>
  135.                                                                 <span>{{ 'Femme'|trans }}</span></label>
  136.                                                         <button type="button" class="next apk-btn-secondary uk-hidden">{{ 'Valider'|trans }}</button>
  137.                                                     </div>
  138.                                                 </div>
  139.                                                 {#
  140.                                                 #--------------------------------
  141.                                                 # Question 2 : Date de naissance
  142.                                                 #--------------------------------
  143.                                                 #}
  144.                                                 <div data-question="2" class="uk-hidden">
  145.                                                     <h3 class="h-big-lowcase-grey">
  146.                                                         <span class="step-number">2.</span>
  147.                                                         {{ pimcore_input("label-question_2") }}
  148.                                                     </h3>
  149.                                                     <div class="question-message-before"></div>
  150.                                                     <div class="uk-form-controls">
  151.                                                         <div class="apk-form-inline">
  152.                                                             <input class="uk-input" type="text" name="q2"
  153.                                                                 placeholder="{{"jj/mm/aaaa"|trans }}"
  154.                                                                 value=""
  155.                                                                 data-toggle="datepicker" autocomplete="false"/>
  156.                                                             <button type="button" class="next apk-btn-secondary">{{ 'Valider'|trans }}</button>
  157.                                                         </div>
  158.                                                     </div>
  159.                                                 </div>
  160.                                                 {#
  161.                                                 #--------------------------------
  162.                                                 # Question 2.1 : Avez-vous fait un don ces trois dernières années ?
  163.                                                 #--------------------------------
  164.                                                 #}
  165.                                                 <div data-question="2.1" class="uk-hidden">
  166.                                                     <h3 class="h-big-lowcase-grey">
  167.                                                         
  168.                                                         {{ pimcore_input("label-question_2-1") }}
  169.                                                     </h3>
  170.                                                     <div class="question-message-before"></div>
  171.                                                     <div class="uk-form-controls">
  172.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q2.1" value="Oui"
  173.                                                                         autocomplete="false"/>
  174.                                                                 <span>{{ 'Oui'|trans }}</span></label>
  175.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q2.1" value="Non"
  176.                                                                         autocomplete="false" data-message="i18ln_erreur5"
  177.                                                                         data-color="red" data-where="after"/>
  178.                                                                 <span>{{ 'Non'|trans }}</span></label>
  179.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q2.1"
  180.                                                                         value="Je ne sais pas"
  181.                                                                         autocomplete="false" data-message="i18ln_erreur6"
  182.                                                                         data-color="red" data-where="after"/>
  183.                                                             {{ 'Je ne sais pas'|trans }}</label>
  184.                                                         <button type="button" class="next apk-btn-secondary uk-hidden">{{ 'Valider'|trans }}</button>
  185.                                                     </div>
  186.                                                 </div>
  187.                                                 {#
  188.                                                 #--------------------------------
  189.                                                 # Question 3 : Quel est votre poids et votre taille ?
  190.                                                 #--------------------------------
  191.                                                 #}
  192.                                                 <div data-question="3" class="uk-hidden">
  193.                                                     <h3 class="h-big-lowcase-grey">
  194.                                                         <span class="step-number">3.</span>
  195.                                                         {{ pimcore_input("label-question_3") }}
  196.                                                     </h3>
  197.                                                     <div class="question-message-before"></div>
  198.                                                     <div class="uk-form-controls">
  199.                                                         <div class="apk-form-inline">
  200.                                                             <input class="uk-input" type="number" name="q3" min="0" max="200"
  201.                                                                 autocomplete="false"/> {{ 'Kg'|trans }}
  202.                                                             <input class="uk-input uk-margin-left" type="number" name="q3taille" min="0" max="300"
  203.                                                                 autocomplete="false"/> {{ 'Cm'|trans }}
  204.                                                             <button type="button" class="uk-margin-left next apk-btn-secondary">{{ 'Valider'|trans }}</button>
  205.                                                         </div>
  206.                                                     </div>
  207.                                                 </div>
  208.                                                 {#
  209.                                                 #--------------------------------
  210.                                                 # Question 4 : De 1980 à 1996, avez-vous séjourné plus de 6 mois (tous séjours confondus) au Royaume-Uni
  211.                                                 #--------------------------------
  212.                                                 #}
  213.                                                 <div data-question="4" class="uk-hidden">
  214.                                                     <h3 class="h-big-lowcase-grey">
  215.                                                         <span class="step-number">4.</span>
  216.                                                         {{ pimcore_input("label-question_4") }}
  217.                                                     </h3>
  218.                                                     <div class="question-message-before"></div>
  219.                                                     <div class="uk-form-controls">
  220.                                                         <label><input class="uk-radio" type="radio" name="q4" value="Oui"
  221.                                                                         autocomplete="false" data-message="i18ln_erreur9"
  222.                                                                         data-color="red" data-where="after"/>
  223.                                                                 <span>{{ 'Oui'|trans }}</span></label>
  224.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q4" value="Non"
  225.                                                                         autocomplete="false"/>
  226.                                                                 <span>{{ 'Non'|trans }}</span></label>
  227.                                                         <button type="button" class="next apk-btn-secondary uk-hidden">{{ 'Valider'|trans }}</button>
  228.                                                     </div>
  229.                                                 </div>
  230.                                                 {#
  231.                                                 #--------------------------------
  232.                                                 # Question 5 : Avez-vous voyagé hors de la Belgique ces 6 derniers mois?
  233.                                                 #--------------------------------
  234.                                                 #}
  235.                                                 <div data-question="5" class="uk-hidden">
  236.                                                     <h3 class="h-big-lowcase-grey">
  237.                                                         <span class="step-number">5.</span>
  238.                                                         {{ pimcore_input("label-question_5") }}
  239.                                                     </h3>
  240.                                                     <div class="question-message-before"></div>
  241.                                                     <div class="uk-form-controls">
  242.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q5" value="Oui"
  243.                                                                         autocomplete="false"/>
  244.                                                                 <span>{{ 'Oui'|trans }}</span></label>
  245.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q5" value="Non"
  246.                                                                         autocomplete="false"/>
  247.                                                                 <span>{{ 'Non'|trans }}</span></label>
  248.                                                         <button type="button" class="next apk-btn-secondary uk-hidden">{{ 'Valider'|trans }}</button>
  249.                                                     </div>
  250.                                                 </div>
  251.                                                 {#
  252.                                                 #--------------------------------
  253.                                                 # Question 5.1 : Avez-vous voyagé à l’extérieur de l’Europe ?
  254.                                                 #--------------------------------
  255.                                                 #}
  256.                                                 <div data-question="5.1" class="uk-hidden">
  257.                                                     <h3 class="h-big-lowcase-grey">
  258.                                                         <span class="step-number">5.1.</span>
  259.                                                         {{ pimcore_input("label-question_5-1") }}
  260.                                                     </h3>
  261.                                                     <div class="question-message-before"></div>
  262.                                                     <div class="uk-form-controls">
  263.                                                         <label><input class="uk-radio" type="radio" name="q5.1" value="Oui"
  264.                                                                     autocomplete="false" data-message="i18ln_erreur11"
  265.                                                                     data-color="red" data-where="after"/>
  266.                                                             <span>{{ 'Oui'|trans }}</span></label>
  267.                                                         <label><input class="uk-radio" type="radio" name="q5.1" value="Non"
  268.                                                                         autocomplete="false" data-message="i18ln_erreur10"
  269.                                                                         data-color="red" data-where="after"/>
  270.                                                                 <span>{{ 'Non'|trans }}</span></label>
  271.                                                         <button type="button" class="next apk-btn-secondary uk-hidden">{{ 'Valider'|trans }}</button>
  272.                                                     </div>
  273.                                                 </div>
  274.                                                 {#
  275.                                                 #--------------------------------
  276.                                                 # Question 6 : êtes-vous enceinte ou avez-vous accouché dans les 6 derniers mois ?
  277.                                                 #--------------------------------
  278.                                                 #}
  279.                                                 
  280.                                                 <div data-question="6" class="uk-hidden">
  281.                                                     <h3 class="h-big-lowcase-grey">
  282.                                                         <span class="step-number">6.</span>
  283.                                                         {{ pimcore_input("label-question_6") }}
  284.                                                     </h3>
  285.                                                     <div class="question-message-before"></div>
  286.                                                     <div class="uk-form-controls">
  287.                                                         <label><input class="uk-radio" type="radio" name="q6" value="Oui"
  288.                                                                         autocomplete="false" data-message="i18ln_erreur12"
  289.                                                                         data-color="red" data-where="after"/>
  290.                                                                 <span>{{ 'Oui'|trans }}</span></label>
  291.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q6" value="Non"/>
  292.                                                             <span>{{ 'Non'|trans }}</span></label>
  293.                                                         <button type="button" class="next apk-btn-secondary uk-hidden">{{ 'Valider'|trans }}</button>
  294.                                                     </div>
  295.                                                 </div>
  296.                                                 
  297.                                                 {#
  298.                                                 #--------------------------------
  299.                                                 # Question 7 : Avez-vous eu récemment de la fièvre ou une infection (bronchite, infection urinaire...) ?
  300.                                                 #--------------------------------
  301.                                                 #}
  302.                                                 <div data-question="7" class="uk-hidden">
  303.                                                     <h3 class="h-big-lowcase-grey">
  304.                                                         <span class="step-number">7.</span>
  305.                                                         {{ pimcore_input("label-question_7") }}
  306.                                                     </h3>
  307.                                                     <div class="question-message-before"></div>
  308.                                                     <div class="uk-form-controls">
  309.                                                         <label><input class="uk-radio" type="radio" name="q7" value="Oui"
  310.                                                                         autocomplete="false" data-message="i18ln_erreur13"
  311.                                                                         data-color="red" data-where="after"/>
  312.                                                                 <span>{{ 'Oui'|trans }}</span></label>
  313.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q7" value="Non"/>
  314.                                                             <span>{{ 'Non'|trans }}</span></label>
  315.                                                         <button type="button" class="next apk-btn-secondary uk-hidden">{{ 'Valider'|trans }}</button>
  316.                                                     </div>
  317.                                                 </div>
  318.                                                 {#
  319.                                                 #--------------------------------
  320.                                                 # Question 8 : Prenez-vous des médicaments ?
  321.                                                 #--------------------------------
  322.                                                 #}
  323.                                                 <div data-question="8" class="uk-hidden">
  324.                                                     <h3 class="h-big-lowcase-grey">
  325.                                                         <span class="step-number">8.</span>
  326.                                                         {{ pimcore_input("label-question_8") }}
  327.                                                     </h3>
  328.                                                     <div class="question-message-before"></div>
  329.                                                     <div class="uk-form-controls" data-apk-toggle-target="#toggle-q8-yes">
  330.                                                         <label><input class="uk-radio" type="radio" name="q8" value="Oui"
  331.                                                                         autocomplete="false" data-apk-toggle="true"/>
  332.                                                                 <span>{{ 'Oui'|trans }}</span></label>
  333.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q8" value="Non"
  334.                                                                         autocomplete="false" data-apk-toggle="false"/>
  335.                                                                 <span>{{ 'Non'|trans }}</span></label>
  336.                                                         <button type="button" class="next apk-btn-secondary uk-hidden">{{ 'Valider'|trans }}</button>
  337.                                                     </div>
  338.                                                     <div id="toggle-q8-yes" class="apk-listing-medicine" style="display: none;">
  339.                                                         <h4>{{ 'Cochez les médicaments que vous prenez dans la liste ci-dessous'|trans }}</h4>
  340.                                                         <div class="uk-form-controls has-serialize-checkbox">
  341.                                                             <div class="uk-text-left uk-grid-small" uk-grid>
  342.                                                                 <div class="uk-width-1-3@s">
  343.                                                                     <!-- complement_1 -->
  344.                                                                     <div class="uk-position-relative"><label><input class="uk-checkbox" type="checkbox" name="q8.1"
  345.                                                                                     value="{{ 'Spray nasal'|trans }}"
  346.                                                                                     autocomplete="false" data-message="false"
  347.                                                                                     data-complement="true"
  348.                                                                                     data-where="complement_1" />
  349.                                                                             <span>{{ 'Spray nasal'|trans }}</span>
  350.                                                                         </label></div>
  351.                                                                     <div class="uk-position-relative"><label><input class="uk-checkbox" type="checkbox" name="q8.1"
  352.                                                                                     value="{{ 'Spray pour la gorge'|trans }}"
  353.                                                                                     autocomplete="false" data-message="false"
  354.                                                                                     data-complement="true"
  355.                                                                                     data-where="complement_1" />
  356.                                                                             <span>{{ 'Spray pour la gorge'|trans }}</span>
  357.                                                                         </label></div>
  358.                                                                     <div class="uk-position-relative"><label><input class="uk-checkbox" type="checkbox" name="q8.1"
  359.                                                                                     value="{{ 'Spray pour la toux'|trans }}"
  360.                                                                                     autocomplete="false" data-message="false"
  361.                                                                                     data-complement="true"
  362.                                                                                     data-where="complement_1" />
  363.                                                                             <span>{{ 'Spray pour la toux'|trans }}</span>
  364.                                                                         </label></div>
  365.                                                                     <div class="uk-position-relative"><label><input class="uk-checkbox" type="checkbox" name="q8.1"
  366.                                                                                     value="{{ 'Anthihistaminiques'|trans }}"
  367.                                                                                     autocomplete="false" data-message="false"
  368.                                                                                     data-complement="true"
  369.                                                                                     data-where="complement_1"/>
  370.                                                                             <span>{{ 'Anthihistaminiques'|trans }}</span>
  371.                                                                         </label></div>
  372.                                                                     <!-- complement_2 -->
  373.                                                                     <div class="uk-position-relative"><label><input class="uk-checkbox" type="checkbox" name="q8.2"
  374.                                                                                     value="{{ 'Antibiotiques'|trans }}"
  375.                                                                                     autocomplete="false" data-message="false"
  376.                                                                                     data-complement="true"
  377.                                                                                     data-where="complement_2" />
  378.                                                                             <span>{{ 'Antibiotiques'|trans }}</span>
  379.                                                                         </label></div>
  380.                                                                     <!-- complement_1 -->
  381.                                                                     <div class="uk-position-relative"><label><input class="uk-checkbox" type="checkbox" name="q8.1"
  382.                                                                                     value="{{ 'Dafalgan / paracétamol'|trans }}"
  383.                                                                                     autocomplete="false" data-message="false"
  384.                                                                                     data-complement="true"
  385.                                                                                     data-where="complement_1"/>
  386.                                                                             <span>{{ 'Dafalgan / paracétamol'|trans }}</span>
  387.                                                                         </label></div>
  388.                                                                     <!-- complement_3 -->
  389.                                                                     <div class="uk-position-relative"><label><input class="uk-checkbox" type="checkbox" name="q8.3"
  390.                                                                                     value="{{ 'Aspirine / anti-inflammatoires (Nurofen, Ibruprofen, Perdofemina...)'|trans }}"
  391.                                                                                     autocomplete="false" data-message="false"
  392.                                                                                     data-complement="true"
  393.                                                                                     data-where="complement_3"/>
  394.                                                                             <span>{{ 'Aspirine / anti-inflammatoires (Nurofen, Ibruprofen, Perdofemina...)'|trans }}</span>
  395.                                                                         </label></div>
  396.                                                                 </div>
  397.                                                                 <div class="uk-width-1-3@s">
  398.                                                                     <!-- complement_1 -->
  399.                                                                     <div class="uk-position-relative"><label><input class="uk-checkbox" type="checkbox" name="q8.1"
  400.                                                                                     value="{{ 'Antiacides comme Pantomed (Pantoprazole), Losec (Omeprazole)'|trans }}"
  401.                                                                                     autocomplete="false" data-message="false"
  402.                                                                                     data-complement="true"
  403.                                                                                     data-where="complement_1"/>
  404.                                                                             <span>{{ 'Antiacides comme Pantomed (Pantoprazole), Losec (Omeprazole)'|trans }}</span>
  405.                                                                         </label></div>
  406.                                                                     <div class="uk-position-relative"><label><input class="uk-checkbox" type="checkbox" name="q8.1"
  407.                                                                                     value="{{ 'Somnifères'|trans }}"
  408.                                                                                     autocomplete="false" data-message="false"
  409.                                                                                     data-complement="true"
  410.                                                                                     data-where="complement_1"/>
  411.                                                                             <span>{{ 'Somnifères'|trans }}</span>
  412.                                                                         </label></div>
  413.                                                                     <!-- complement_4 -->
  414.                                                                     <div class="uk-position-relative"><label><input class="uk-checkbox" type="checkbox" name="q8.4"
  415.                                                                                     value="{{ 'Isotrétinoïne (Traitement contre l\'acné)'|trans }}"
  416.                                                                                     autocomplete="false" data-message="false"
  417.                                                                                     data-complement="true"
  418.                                                                                     data-where="complement_4"/>
  419.                                                                             <span>{{ 'Isotrétinoïne (Traitement contre l\'acné)'|trans }}</span>
  420.                                                                         </label></div>
  421.                                                                     <div class="uk-position-relative"><label><input class="uk-checkbox" type="checkbox" name="q8.4"
  422.                                                                                     value="{{ 'Finastéride (Traitement pour la prostate ou contre la perte de cheveux)'|trans }}"
  423.                                                                                     autocomplete="false" data-message="false"
  424.                                                                                     data-complement="true"
  425.                                                                                     data-where="complement_4"/>
  426.                                                                             <span>{{ 'Finastéride (Traitement pour la prostate ou contre la perte de cheveux)'|trans }}</span>
  427.                                                                         </label></div>
  428.                                                                 </div>
  429.                                                                 <div class="uk-width-1-3@s">
  430.                                                                     <!-- complement_4 -->
  431.                                                                     <div class="uk-position-relative"><label><input class="uk-checkbox" type="checkbox" name="q8.4"
  432.                                                                                     value="{{ 'Dutastéride (Traitement pour la prostate)'|trans }}"
  433.                                                                                     autocomplete="false" data-message="false"
  434.                                                                                     data-complement="true"
  435.                                                                                     data-where="complement_4"/>
  436.                                                                             <span>{{ 'Dutastéride (Traitement pour la prostate)'|trans }}</span>
  437.                                                                         </label></div>
  438.                                                                     <!-- complement_5 -->
  439.                                                                     <div class="uk-position-relative"><label><input class="uk-checkbox" type="checkbox" name="q8.5"
  440.                                                                                     value="{{ 'Acitrétine (Traitement contre le psoriasis)'|trans }}"
  441.                                                                                     autocomplete="false" data-message="false"
  442.                                                                                     data-complement="true"
  443.                                                                                     data-where="complement_5"/>
  444.                                                                             <span>{{ 'Acitrétine (Traitement contre le psoriasis)'|trans }}</span>
  445.                                                                         </label></div>
  446.                                                                     <!-- complement_6 -->
  447.                                                                     <div class="uk-position-relative"><label><input class="uk-checkbox" type="checkbox" name="q8.6"
  448.                                                                                     value="Oui"
  449.                                                                                     autocomplete="false"
  450.                                                                                     data-message="i18ln_complement_14_6"
  451.                                                                                     data-complement="true"
  452.                                                                                     data-where="complement_6"/>
  453.                                                                             <span>{{ 'Autre(s)'|trans }}</span>
  454.                                                                         </label></div>
  455.                                                                 </div>
  456.                                                             </div>
  457.                                                         </div>
  458.                                                     </div>
  459.                                                 </div>
  460.                                                 {#
  461.                                                 #--------------------------------
  462.                                                 # Question 9 : Avez-vous été vacciné.e il y a moins d’un mois ?
  463.                                                 #--------------------------------
  464.                                                 #}
  465.                                                 <div data-question="9" class="uk-hidden">
  466.                                                     <h3 class="h-big-lowcase-grey">
  467.                                                         <span class="step-number">9.</span>
  468.                                                         {{ pimcore_input("label-question_9") }}
  469.                                                     </h3>
  470.                                                     <div class="question-message-before"></div>
  471.                                                     <div class="uk-form-controls" data-apk-toggle-target="#toggle-q9-yes">
  472.                                                         <label><input class="uk-radio" type="radio" name="q9" value="Oui"
  473.                                                                         autocomplete="false" data-apk-toggle="true"/>
  474.                                                                 <span>{{ 'Oui'|trans }}</span></label>
  475.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q9" value="Non"
  476.                                                                         data-apk-toggle="false"/>
  477.                                                                 <span>{{ 'Non'|trans }}</span></label>
  478.                                                         <button type="button" class="next apk-btn-secondary uk-hidden">{{ 'Valider'|trans }}</button>
  479.                                                     </div>
  480.                                                     <div id="toggle-q9-yes" style="display: none; padding-bottom: 15px;">
  481.                                                         <hr class="uk-margin-medium-top"/>
  482.                                                         <div class="uk-form-controls" data-apk-where="common"
  483.                                                             data-apk-message="i18ln_complement_15_common"
  484.                                                             data-apk-question="9">
  485.                                                             <div class="uk-text-left uk-grid-small" uk-grid>
  486.                                                                 <div class="uk-width-1-3@s">
  487.                                                                     <div><label><input class="uk-checkbox" type="checkbox" name="q9.1"
  488.                                                                                     value="{{ 'Hépatite B'|trans }}"
  489.                                                                                     autocomplete="false"
  490.                                                                                     data-message="i18ln_complement_15_1"
  491.                                                                                     data-color="false" data-complement="true"
  492.                                                                                     data-where="complement_1"/>
  493.                                                                             <span>{{ 'Hépatite B'|trans }}</span>
  494.                                                                         </label>
  495.                                                                     </div>
  496.                                                                     <div><label><input class="uk-checkbox" type="checkbox" name="q9.2"
  497.                                                                                     value="{{ 'Coqueluche'|trans }}"
  498.                                                                                     autocomplete="false"
  499.                                                                                     data-message="i18ln_complement_15_3"
  500.                                                                                     data-color="false" data-complement="true"
  501.                                                                                     data-where="complement_3"/>
  502.                                                                             <span>{{ 'Coqueluche'|trans }}</span>
  503.                                                                         </label>
  504.                                                                     </div>
  505.                                                                     <div><label><input class="uk-checkbox" type="checkbox" name="q9.3"
  506.                                                                                     value="{{ 'Grippe'|trans }}"
  507.                                                                                     autocomplete="false"
  508.                                                                                     data-message="i18ln_complement_15_3"
  509.                                                                                     data-color="false" data-complement="true"
  510.                                                                                     data-where="complement_3"/>
  511.                                                                             <span>{{ 'Grippe'|trans }}</span>
  512.                                                                         </label>
  513.                                                                     </div>
  514.                                                                 </div>
  515.                                                                 <div class="uk-width-1-3@s">
  516.                                                                     <div><label><input class="uk-checkbox" type="checkbox" name="q9.4"
  517.                                                                                     value="{{ 'Fièvre Jaune'|trans }}"
  518.                                                                                     autocomplete="false"
  519.                                                                                     data-message="i18ln_complement_15_2"
  520.                                                                                     data-color="false" data-complement="true"
  521.                                                                                     data-where="complement_2"/>
  522.                                                                             <span>{{ 'Fièvre Jaune'|trans }}</span>
  523.                                                                         </label>
  524.                                                                     </div>
  525.                                                                     <div><label><input class="uk-checkbox" type="checkbox" name="q9.5"
  526.                                                                                     value="{{ 'Tétanos'|trans }}"
  527.                                                                                     autocomplete="false"
  528.                                                                                     data-message="i18ln_complement_15_3"
  529.                                                                                     data-color="false" data-complement="true"
  530.                                                                                     data-where="complement_3"/>
  531.                                                                             <span>{{ 'Tétanos'|trans }}</span>
  532.                                                                         </label>
  533.                                                                     </div>
  534.                                                                 </div>
  535.                                                                 <div class="uk-width-1-3@s">
  536.                                                                     <div><label><input class="uk-checkbox" type="checkbox" name="q9.7"
  537.                                                                                     value="{{ 'SARS-CoV-2 (COVID 19)'|trans }}"
  538.                                                                                     autocomplete="false"
  539.                                                                                     data-message="i18ln_complement_15_5"
  540.                                                                                     data-color="false" data-complement="true"
  541.                                                                                     data-where="complement_5"/>
  542.                                                                             <span>{{ 'SARS-CoV-2 (COVID 19)'|trans }}</span>
  543.                                                                         </label>
  544.                                                                     </div>
  545.                                                                     <div><label><input class="uk-checkbox" type="checkbox" name="q9.6"
  546.                                                                                     value="{{ 'Autre'|trans }}"
  547.                                                                                     autocomplete="false"
  548.                                                                                     data-message="i18ln_complement_15_4"
  549.                                                                                     data-color="false" data-complement="true"
  550.                                                                                     data-where="complement_4"/>
  551.                                                                             <span>{{ 'Autre'|trans }}</span>
  552.                                                                         </label>
  553.                                                                     </div>
  554.                                                                 </div>
  555.                                                             </div>
  556.                                                         </div>
  557.                                                     </div>
  558.                                                 </div>
  559.                                                 {#
  560.                                                 #--------------------------------
  561.                                                 # Question 10 : Avez-vous subi une endoscopie (arthroscopie, gastroscopie, coloscopie…) ou une opération dans les 4 derniers mois ?
  562.                                                 #--------------------------------
  563.                                                 #}
  564.                                                 <div data-question="10" class="uk-hidden">
  565.                                                     <h3 class="h-big-lowcase-grey">
  566.                                                         <span class="step-number">10.</span>
  567.                                                         {{ pimcore_input("label-question_10") }}
  568.                                                     </h3>
  569.                                                     <div class="question-message-before"></div>
  570.                                                     <div class="uk-form-controls">
  571.                                                         <label><input class="uk-radio" type="radio" name="q10" value="Oui"
  572.                                                                         autocomplete="false" data-message="i18ln_erreur16"
  573.                                                                         data-color="red" data-where="after"/>
  574.                                                                 <span>{{ 'Oui'|trans }}</span></label>
  575.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q10"
  576.                                                                         value="Non"/>
  577.                                                                 <span>{{ 'Non'|trans }}</span></label>
  578.                                                         <button type="button" class="next apk-btn-secondary uk-hidden">{{ 'Valider'|trans }}</button>
  579.                                                     </div>
  580.                                                 </div>
  581.                                                 {#
  582.                                                 #--------------------------------
  583.                                                 # Question 11 : êtes-vous allé.e chez le dentiste au cours des 7 derniers jours ?
  584.                                                 #--------------------------------
  585.                                                 #}
  586.                                                 <div data-question="11" class="uk-hidden">
  587.                                                     <h3 class="h-big-lowcase-grey"><span class="step-number">11.</span>
  588.                                                         {{ pimcore_input("label-question_11") }}
  589.                                                     </h3>
  590.                                                     <div class="question-message-before"></div>
  591.                                                     <div class="uk-form-controls">
  592.                                                         <label><input class="uk-radio" type="radio" name="q11" value="Oui"
  593.                                                                         autocomplete="false" data-message="i18ln_info17"
  594.                                                                         data-color="red" data-where="after"/>
  595.                                                             <span>{{ 'Oui'|trans }}</span></label>
  596.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q11"
  597.                                                                         value="Non"/>
  598.                                                             <span>{{ 'Non'|trans }}</span></label>
  599.                                                         <button type="button" class="next apk-btn-secondary uk-hidden">{{ 'Valider'|trans }}</button>
  600.                                                     </div>
  601.                                                 </div>
  602.                                                 {#
  603.                                                 #--------------------------------
  604.                                                 # Question 12 : Avez-vous fait un piercing (y compris boucles d’oreilles) ou un tatouage (y compris maquillage permanent) durant ces 4 derniers mois ?
  605.                                                 #--------------------------------
  606.                                                 #}
  607.                                                 <div data-question="12" class="uk-hidden">
  608.                                                     <h3 class="h-big-lowcase-grey">
  609.                                                         <span class="step-number">12.</span>
  610.                                                         {{ pimcore_input("label-question_12") }}
  611.                                                     </h3>
  612.                                                     <div class="question-message-before"></div>
  613.                                                     <div class="uk-form-controls">
  614.                                                         <label><input class="uk-radio" type="radio" name="q12" value="Oui"
  615.                                                                         autocomplete="false" data-message="i18ln_erreur18"
  616.                                                                         data-color="red" data-where="after"/>
  617.                                                             <span>{{ 'Oui'|trans }}</span></label>
  618.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q12"
  619.                                                                         value="Non"/>
  620.                                                             <span>{{ 'Non'|trans }}</span></label>
  621.                                                         <button type="button" class="next apk-btn-secondary uk-hidden">{{ 'Valider'|trans }}</button>
  622.                                                     </div>
  623.                                                 </div>
  624.                                                 {#
  625.                                                 #--------------------------------
  626.                                                 # Question 13 : Avez-vous déjà consommé de la drogue ?
  627.                                                 #--------------------------------
  628.                                                 #}
  629.                                                 <div data-question="13" class="uk-hidden">
  630.                                                     <h3 class="h-big-lowcase-grey">
  631.                                                         <span class="step-number">13.</span>
  632.                                                         {{ pimcore_input("label-question_13") }}
  633.                                                     </h3>
  634.                                                     <div class="question-message-before"></div>
  635.                                                     <div class="uk-form-controls">
  636.                                                         <label><input class="uk-radio" type="radio" name="q13" value="Oui"
  637.                                                                         autocomplete="false" data-message="i18ln_info19"
  638.                                                                         data-color="red" data-where="after"/>
  639.                                                             <span>{{ 'Oui'|trans }}</span></label>
  640.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q13"
  641.                                                                         value="Non"/>
  642.                                                             <span>{{ 'Non'|trans }}</span></label>
  643.                                                         <button type="button" class="next apk-btn-secondary uk-hidden">{{ 'Valider'|trans }}</button>
  644.                                                     </div>
  645.                                                 </div>
  646.                                                 {#
  647.                                                 #--------------------------------
  648.                                                 # Question 14 : Avez-vous eu un.e nouveau.elle partenaire sexuel.le au cours des 4 derniers mois ? (avec ou sans préservatif)
  649.                                                 #--------------------------------
  650.                                                 #}
  651.                                                 <div data-question="14" class="uk-hidden">
  652.                                                     {# Si répondu F (femme) à la Q2 #}
  653.                                                     <h3 class="h-big-lowcase-grey">
  654.                                                         <span class="step-number">14.</span>
  655.                                                         {{ pimcore_input("label-question_14") }}
  656.                                                     </h3>
  657.                                                     <div class="question-message-before"></div>
  658.                                                     <div class="uk-form-controls">
  659.                                                         <label><input class="uk-radio" type="radio" name="q14" value="Oui"
  660.                                                                         autocomplete="false" data-message="i18ln_erreur20"
  661.                                                                         data-color="red" data-where="after"/>
  662.                                                                 <span>{{ 'Oui'|trans }}</span></label>
  663.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q14"
  664.                                                                         value="Non"/>
  665.                                                                 <span>{{ 'Non'|trans }}</span></label>
  666.                                                         <button type="button" class="next apk-btn-secondary uk-hidden">{{ 'Valider'|trans }}</button>
  667.                                                     </div>
  668.                                                 </div>
  669.                                                 {#
  670.                                                 #--------------------------------
  671.                                                 # Question 15 : Avez-vous eu une nouvelle partenaire sexuelle au cours des 4 derniers mois ? (avec ou sans préservatif)
  672.                                                 #--------------------------------
  673.                                                 #}
  674.                                                 <div data-question="15" class="uk-hidden">
  675.                                                     {# Si répondu H (homme) à la Q2 #}
  676.                                                     <h3 class="h-big-lowcase-grey">
  677.                                                         <span class="step-number">15.</span>
  678.                                                         {{ pimcore_input("label-question_15") }}
  679.                                                     </h3>
  680.                                                     <div class="question-message-before"></div>
  681.                                                     <div class="uk-form-controls">
  682.                                                         <label><input class="uk-radio" type="radio" name="q15" value="Oui"
  683.                                                                         autocomplete="false" data-message="i18ln_erreur21"
  684.                                                                         data-color="red" data-where="after"/>
  685.                                                             <span>{{ 'Oui'|trans }}</span></label>
  686.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q15"
  687.                                                                         value="Non"/>
  688.                                                             <span>{{ 'Non'|trans }}</span></label>
  689.                                                         <button type="button" class="next apk-btn-secondary uk-hidden">{{ 'Valider'|trans }}</button>
  690.                                                     </div>
  691.                                                 </div>
  692.                                                 {#
  693.                                                 #--------------------------------
  694.                                                 # Question 16 : Au cours des 12 derniers mois, avez-vous eu une relation sexuelle avec un homme ?
  695.                                                 #--------------------------------
  696.                                                 #}
  697.                                                 <div data-question="16" class="uk-hidden">
  698.                                                     {# Si répondu H (homme) à la Q2 #}
  699.                                                     <h3 class="h-big-lowcase-grey">
  700.                                                         <span class="step-number">16.</span>
  701.                                                         {{ pimcore_input("label-question_16") }}
  702.                                                     </h3>
  703.                                                     <div class="question-message-before"></div>
  704.                                                     <div class="uk-form-controls">
  705.                                                         <label><input class="uk-radio" type="radio" name="q16" value="Oui"
  706.                                                                         autocomplete="false" data-message="i18ln_erreur22"
  707.                                                                         data-color="red" data-where="after"/>
  708.                                                             <span>{{ 'Oui'|trans }}</span></label>
  709.                                                         <label><input class="uk-radio is-autovalidate" type="radio" name="q16"
  710.                                                                         value="Non"/>
  711.                                                             <span>{{ 'Non'|trans }}</span></label>
  712.                                                         <button type="button" class="next apk-btn-secondary uk-hidden">{{ 'Valider'|trans }}</button>
  713.                                                     </div>
  714.                                                 </div>
  715.                                                 {#
  716.                                                 #--------------------------------
  717.                                                 # END : Merci d’avoir fait le test !
  718.                                                 #--------------------------------
  719.                                                 #}
  720.                                                 <div data-question="end" class="uk-hidden">
  721.                                                     {# fin #}
  722.                                                     <h3 class="h-big-lowcase-grey">
  723.                                                         <span class="step-number">End.</span>
  724.                                                         {{ pimcore_input("label-question_end") }}
  725.                                                     </h3>
  726.                                                     <div>
  727.                                                         {{ pimcore_wysiwyg("content-question_end") }}
  728.                                                     </div>
  729.                                                     <div class="uk-margin-top">
  730.                                                         {% if pimcore_website_config('akimediaActivate') %}
  731.                                                             <a href="{{ path("inscriptionCentre", {id: centre}) }}" class="uk-button uk-button-primary">{{ "Je m'inscris"|trans }}</a>
  732.                                                         {% else %}
  733.                                                             {{ pimcore_link("btn-action-question-end") }}            
  734.                                                         {% endif %}
  735.                                                     </div>
  736.                                                 </div>
  737.                                             </div>
  738.                                             <div class="apk-step-actions uk-grid uk-text-center uk-text-left@s">
  739.                                                 <div class="uk-width-expand@s">
  740.                                                     <button type="button" class="start">{{ 'Retour au début'|trans }}</button>
  741.                                                 </div>
  742.                                                 <div class="uk-width-auto@s">
  743.                                                     <button type="button" class="prev uk-hidden">
  744.                                                         {{ 'Précédent'|trans }}
  745.                                                     </button>
  746.                                                     <button type="button" class="next-no-matter uk-hidden">
  747.                                                         {{ 'Continuer le test'|trans }}
  748.                                                     </button>
  749.                                                 </div>                                  
  750.                                             </div>
  751.                                             <div class="question-message-container-complement">
  752.                                                 <div class="question-message-complement_1"></div>
  753.                                                 <div class="question-message-complement_2"></div>
  754.                                                 <div class="question-message-complement_3"></div>
  755.                                                 <div class="question-message-complement_4"></div>
  756.                                                 <div class="question-message-complement_5"></div>
  757.                                                 <div class="question-message-complement_6"></div>
  758.                                                 <div class="question-message-common"></div>
  759.                                             </div>
  760.                                             <div class="question-message-after"></div>
  761.                                         </div>
  762.                                     </form>
  763.                                     <div class="apk-step-informations uk-hidden">
  764.                                         <div>Previous Step: <strong id="data-apk-prev-step">0</strong></div>
  765.                                         <div>Current Step: <strong id="data-apk-current-step">1</strong></div>
  766.                                         <!--<span id="data-apk-percent-step">0%</span>-->
  767.                                     </div>
  768.                                 </div>
  769.                             </div>
  770.                         </div>
  771.                     </div>
  772.                 </section>
  773.             </div>
  774.         </div>
  775.         
  776.             {# Pre-chargement des images des différentes étapes #}
  777.             <div data-apk-image-wrapper-step="default" class="uk-hidden uk-invisible">
  778.                 {{ pimcore_image("section-questions-img_default", {
  779.                     "imgAttributes" : {
  780.                         "data-apk-image-step" : "default"
  781.                     }
  782.                 }) }}
  783.             </div>
  784.             {% for i in 1..nbSlide %}
  785.                 <div data-apk-image-wrapper-step="{{i}}" class="uk-hidden uk-invisible">
  786.                     {{ pimcore_image("section-questions-img_" ~ i, {
  787.                         "imgAttributes" : {
  788.                             "data-apk-image-step" : i
  789.                         }
  790.                     }) }}
  791.                 </div>
  792.                 {% if i == 2 or i == 5 %}
  793.                     <div data-apk-image-wrapper-step="{{i}}.1" class="uk-hidden uk-invisible">
  794.                         {{ pimcore_image("section-questions-img_" ~ i ~'-1') }}
  795.                     </div>
  796.                 {% endif %}
  797.             {% endfor %}
  798.             <div data-apk-image-wrapper-step="end" class="uk-hidden uk-invisible">
  799.                 {{ pimcore_image("section-questions-img_end", {
  800.                     "imgAttributes" : {
  801.                         "data-apk-image-step" : "end"    
  802.                     }    
  803.                 }) }}
  804.             </div>
  805.         {% endif %}
  806.         
  807.     {% if not editmode %}
  808.     {% if app.request.locale =="nl" %}
  809.         {% set datePickerLang = "nl-NL" %}    
  810.     {% elseif app.request.locale == "de" %}
  811.         {% set datePickerLang = "de-DE" %}    
  812.     {% else %}
  813.         {% set datePickerLang = "fr-FR" %}    
  814.     {% endif %}
  815.     <link rel="stylesheet" href="/static/vendors/datepicker-master/dist/datepicker.min.css">
  816.     
  817.     {% do pimcore_head_script().appendFile(asset('/static/vendors/datepicker-master/dist/datepicker.min.js')) %}
  818.     {% do pimcore_head_script().appendFile(asset('/static/vendors/datepicker-master/i18n/datepicker' ~ datePickerLang|raw ~ '.js')) %}
  819.     {% do pimcore_head_script().appendFile(asset('/static/vendors/jQuery-Mask-Plugin-master/dist/jquery.mask.min.js')) %}
  820.     
  821.     <script>
  822.         document.addEventListener("DOMContentLoaded", function(event) { 
  823.             var datepickerInput;
  824.             try {
  825.                 datepickerInput = $('[data-toggle="datepicker"]').datepicker({
  826.                     format: 'dd/mm/yyyy',
  827.                     language: '{{datePickerLang}}',
  828.                     autoHide: true
  829.                 });
  830.             }
  831.             catch (e) {
  832.         
  833.             }
  834.             $(function () {
  835.                 $(document).ready(function () {
  836.                     $('input[data-toggle="datepicker"]').mask('00/00/0000').on('change input paste', function () {
  837.                         var isValid = isValidDate($(this));
  838.                     });
  839.                 });
  840.             });
  841.                 var $form = $('#form-quipeutdonnersonsang');
  842.                 function getAge(dateString) {
  843.                     var today = new Date();
  844.                     var birthDate = new Date(dateString);
  845.                     var age = today.getFullYear() - birthDate.getFullYear();
  846.                     var m = today.getMonth() - birthDate.getMonth();
  847.                     if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
  848.                         age--;
  849.                     }
  850.                     return age;
  851.                 }
  852.                 function removeMessage($question) {
  853.                     $question.find('.question-message-before').html('');
  854.                     $form.find('.question-message-after').html('');
  855.                     enableNext();
  856.                 }
  857.                 function showMessage($question, message, color, where) {
  858.                     removeMessage($question);
  859.                     if(where=='after'){
  860.                         var $error = $form.find('.question-message-' + where);
  861.                     } else if( where=='complement_1' || where=='complement_2' || where=='complement_3' || where=='complement_4' || where=='complement_5' || where=='complement_6') {
  862.                         var $error = $form.find('.question-message-' + where);
  863.                     } else {
  864.                         var $error = $question.find('.question-message-' + where);
  865.                     }
  866.                     $error.html(message).removeClass('question-message--red').removeClass('question-message--yellow').addClass('question-message--' + color);
  867.                     if (color == 'red') {
  868.                         disableNext();
  869.                     } else {
  870.                         enableNext();
  871.                     }
  872.                 }
  873.                 function resetAllMessage() {
  874.                     $form.find('.question-message-complement_1').html('');
  875.                     $form.find('.question-message-complement_2').html('');
  876.                     $form.find('.question-message-complement_3').html('');
  877.                     $form.find('.question-message-complement_4').html('');
  878.                     $form.find('.question-message-complement_5').html('');
  879.                     $form.find('.question-message-complement_6').html('');
  880.                     $form.find('.question-message-common').html('');
  881.                     $form.find('.question-message-after').html('');
  882.                 }
  883.                 function disableNext() {
  884.                     $('#form-quipeutdonnersonsang .next').addClass('apk-disabled-button').prop('disabled', true);
  885.                     $('#form-quipeutdonnersonsang .next-no-matter').removeClass('uk-hidden');
  886.                 }
  887.                 function enableNext() {
  888.                     $('#form-quipeutdonnersonsang .next').removeClass('apk-disabled-button').prop('disabled', false);
  889.                     $('#form-quipeutdonnersonsang .next-no-matter').addClass('uk-hidden');
  890.                 }
  891.                 function hideNext() {
  892.                     $('#form-quipeutdonnersonsang .next').addClass('uk-hidden');
  893.                     $('#form-quipeutdonnersonsang .next-no-matter').addClass('uk-hidden');
  894.                 }
  895.                 function hidePrev() {
  896.                     $('#form-quipeutdonnersonsang .prev').addClass('uk-hidden');
  897.                 }
  898.                 function showPrev() {
  899.                     $('#form-quipeutdonnersonsang .prev').removeClass('uk-hidden');
  900.                 }
  901.                 function updatePicto(currentStep) {
  902.                     if($('[data-apk-image-wrapper-step = "' + currentStep + '"] img').length){
  903.                         var $html = $('[data-apk-image-wrapper-step = "' + currentStep + '"]').html();
  904.                     } else {
  905.                         var $html = $('[data-apk-image-wrapper-step = "default"]').html();
  906.                     }
  907.                     $('.section-questions-container-icon').html($html)
  908.                 }
  909.                 var sexe = "";
  910.                 function showQuestion(prevNumber, number) {
  911.                 if(prevNumber == "1"){
  912.                     sexe = $('input[name="q1"]:checked').val();
  913.                 }
  914.                     //console.log('showQuestion ' + number);
  915.                     $form.find('[data-question]').addClass("uk-hidden");
  916.                     $form.find('[data-question="' + number + '"]').removeClass("uk-hidden");
  917.                     if($('#form-quipeutdonnersonsang .next-no-matter').hasClass('uk-hidden')==false){
  918.                         $('#form-quipeutdonnersonsang .next-no-matter').addClass('uk-hidden');
  919.                     }
  920.                     resetAllMessage();
  921.                     //tracking
  922.                     var labelStep = getStepLabelForGATracking(prevNumber);
  923.                     var langue = " {{ app.request.locale }}";
  924.                 if(sexe == "Homme" && prevNumber == "16"){
  925.                     window.dataLayer = window.dataLayer || [];
  926.                     window.dataLayer.push({
  927.                     'event': 'test_elibility',
  928.                     'step': "15"+labelStep,
  929.                     'language': langue,
  930.                     });
  931.                 }else{
  932.                     window.dataLayer = window.dataLayer || [];
  933.                     window.dataLayer.push({
  934.                     'event': 'test_elibility',
  935.                     'step': prevNumber+labelStep,
  936.                     'language': langue,
  937.                     });
  938.                     if(sexe == "Femme" && prevNumber == "14"){
  939.                     window.dataLayer = window.dataLayer || [];
  940.                     window.dataLayer.push({
  941.                         'event': 'test_elibility',
  942.                         'step': "15-merci",
  943.                         'language': langue,
  944.                     });
  945.                     }
  946.                 }
  947.                     if($('#data-apk-prev-step').text()!=false){
  948.                         showPrev();
  949.                     }
  950.                     updateStep(prevNumber, number);
  951.                     updatePicto(number);
  952.                     progressBar(number);
  953.                 }
  954.                 function getStepLabelForGATracking(step){
  955.                 switch (step) {
  956.                     case '1':
  957.                     return "-genre";
  958.                     break;
  959.                     case '2':
  960.                     //case '2.1':
  961.                     return "-date-naissance";
  962.                     break;
  963.                     case '3':
  964.                     return "-poids";
  965.                     break;
  966.                     case '4':
  967.                     return "-sejour-uk";
  968.                     break;
  969.                     case '5':
  970.                     //case '5.1':
  971.                     return "-voyage-hors-Belgique";
  972.                     break;
  973.                     case '6':
  974.                     return "-grossesse";
  975.                     break;
  976.                     case '7':
  977.                     return "-fievre-infection";
  978.                     break;
  979.                     case '8':
  980.                     return "-medicaments";
  981.                     break;
  982.                     case '9':
  983.                     return "-vaccins";
  984.                     break;
  985.                     case '10':
  986.                     return "-endoscopie";
  987.                     break;
  988.                     case '11':
  989.                     return "-dentiste";
  990.                     break;
  991.                     case '12':
  992.                     return "-piercing-tattoo";
  993.                     break;
  994.                     case '13':
  995.                     return "-drogues";
  996.                     break;
  997.                     case '14':
  998.                     return "-partenaire";
  999.                     break;
  1000.                     case '15':
  1001.                     if(sexe == "Homme"){
  1002.                         return "-partenaire";
  1003.                     }else{
  1004.                         return '';
  1005.                     }
  1006.                     break;
  1007.                     case '16':
  1008.                     if(sexe == "Homme"){
  1009.                         return "-merci";
  1010.                     }else{
  1011.                         return '';
  1012.                     }
  1013.                     break;
  1014.                     case 'end':
  1015.                     return "-merci";
  1016.                     break;
  1017.                 }
  1018.                 }
  1019.                 function updateStep(prevStep, currentStep) {
  1020.                     // var prev_step = $form.attr('data-prev-step');
  1021.                     // var current_step = $form.attr('data-current-step');
  1022.                     // $('#data-apk-prev-step').text(prev_step);
  1023.                     // $('#data-apk-current-step').text(current_step);
  1024.                     $('#data-apk-prev-step').text(prevStep);
  1025.                     $('#data-apk-current-step').text(currentStep);
  1026.                 }
  1027.                 function progressBar(currentStep) {
  1028.                     var totalSteps = ($('[data-question]').length - $('[data-question*="."]').length);
  1029.                     var totalProgress = currentStep * 100 / totalSteps;
  1030.                     if(currentStep=='1'){
  1031.                         $('#apk-progress-bar-question').attr('value', 0);
  1032.                     } else if(currentStep=='end') {
  1033.                         $('#apk-progress-bar-question').attr('value', 100);
  1034.                     } else {
  1035.                         $('#apk-progress-bar-question').attr('value', Math.round(totalProgress));
  1036.                     }
  1037.                     // Only for debug/dev
  1038.                     $('#data-apk-percent-step').text(currentStep + '/' + totalSteps + '=>' + Math.round(totalProgress) + '%');
  1039.                 }
  1040.                 function serializeCheckbox(element, arrayName) {
  1041.                     /*var fields = element.serializeArray();
  1042.                     jQuery.each( fields, function( i, field ) {
  1043.                         console.log( field.value + " " );
  1044.                     });*/
  1045.                     var returnArray = [];
  1046.                     var fields = element.serializeArray();
  1047.                     jQuery.each(fields, function (i, field) {
  1048.                         //console.log( field.value + " " );
  1049.                         returnArray.push(field.value);
  1050.                     });
  1051.                     returnArray = [arrayName, returnArray];
  1052.                     //console.log(returnArray);
  1053.                 }
  1054.                     var i18ln_erreur1 = '{{"!!Eligibilité!!erreur1"|trans|raw}}';
  1055.                     var i18ln_erreur2 = '{{"!!Eligibilité!!erreur2"|trans|raw}}';
  1056.                     var i18ln_erreur3 = '{{"!!Eligibilité!!erreur3"|trans|raw}}';
  1057.                     var i18ln_erreur4 = '{{"!!Eligibilité!!erreur4"|trans|raw}}';
  1058.                     var i18ln_erreur5 = '{{"!!Eligibilité!!erreur5"|trans|raw}}';
  1059.                     var i18ln_erreur6 = '{{"!!Eligibilité!!erreur6"|trans|raw}}';
  1060.                     var i18ln_erreur7 = '{{"!!Eligibilité!!erreur7"|trans|raw}}';
  1061.                     var i18ln_erreur8 = '{{"!!Eligibilité!!erreur8"|trans|raw}}';
  1062.                     var i18ln_erreur8_2 = '{{"!!Eligibilité!!erreur8_2"|trans|raw}}';
  1063.                     var i18ln_erreur9 = '{{"!!Eligibilité!!erreur9"|trans|raw}}';
  1064.                     var i18ln_erreur10 = '{{"!!Eligibilité!!erreur10"|trans|raw}}';
  1065.                     var i18ln_erreur11 = '{{"!!Eligibilité!!erreur11"|trans|raw}}';
  1066.                     var i18ln_complement_10_11 = '{{"!!Eligibilité!!complement10_11"|trans|raw}}';
  1067.                     i18ln_erreur10 += '<br/><br/>' + i18ln_complement_10_11;
  1068.                     i18ln_erreur11 += '<br/><br/>' + i18ln_complement_10_11;
  1069.                     var i18ln_erreur12 = '{{"!!Eligibilité!!erreur12"|trans|raw}}';
  1070.                     var i18ln_erreur13 = '{{"!!Eligibilité!!erreur13"|trans|raw}}';
  1071.                     //var i18ln_info14 = 'Attention ! Il arrive que la prise d’un médicament ne pose pas de problème pour le don de sang, mais que la maladie pour laquelle vous le prenez ou l’avez pris soit une contre-indication. En cas de doute, contactez-nous au <strong>0800 92 245</strong> ou envoyez-nous un mail à <strong>info@croix-rouge.be</strong><br /><br />Mentionnez toujours les médicaments que vous prenez au médecin de la collecte.';
  1072.                     var i18ln_complement_14_1 = '{{"!!Eligibilité!!complement14_1"|trans|raw}}';
  1073.                     var i18ln_complement_14_2 = '{{"!!Eligibilité!!complement14_2"|trans|raw}}';
  1074.                     var i18ln_complement_14_3 = '{{"!!Eligibilité!!complement14_3"|trans|raw}}';
  1075.                     var i18ln_complement_14_4 = '{{"!!Eligibilité!!complement14_4"|trans|raw}}';
  1076.                     var i18ln_complement_14_5 = '{{"!!Eligibilité!!complement14_5"|trans|raw}}';
  1077.                     var i18ln_complement_14_6 = '{{"!!Eligibilité!!complement14_6"|trans|raw}}';
  1078.                     var i18ln_complement_14_common = '{{"!!Eligibilité!!complement14_common"|trans|raw}}';
  1079.                     var i18ln_erreur15 = 'CONTENU ETAPE 9';
  1080.                     var i18ln_complement_15_1 = '{{"!!Eligibilité!!complement15_1"|trans|raw}}';
  1081.                     var i18ln_complement_15_2 = '{{"!!Eligibilité!!complement15_2"|trans|raw}}';
  1082.                     var i18ln_complement_15_3 = '{{"!!Eligibilité!!complement15_3"|trans|raw}}';
  1083.                     var i18ln_complement_15_4 = '{{"!!Eligibilité!!complement15_4"|trans|raw}}';
  1084.                     var i18ln_complement_15_5 = '{{"!!Eligibilité!!complement15_5"|trans|raw}}';
  1085.                     var i18ln_complement_15_common = '{{"!!Eligibilité!!complement15_common"|trans|raw}}';
  1086.                     var i18ln_erreur16 = '{{"!!Eligibilité!!erreur16"|trans|raw}}';
  1087.                     var i18ln_info17 = '{{"!!Eligibilité!!info17"|trans|raw}}';
  1088.                     var i18ln_erreur18 = '{{"!!Eligibilité!!erreur18"|trans|raw}}';
  1089.                     var i18ln_info19 = '{{"!!Eligibilité!!info19"|trans|raw}}';
  1090.                     var i18ln_erreur20 = '{{"!!Eligibilité!!erreur20"|trans|raw}}';
  1091.                     var i18ln_erreur21 = '{{"!!Eligibilité!!erreur21"|trans|raw}}';
  1092.                     var i18ln_erreur22 = '{{"!!Eligibilité!!erreur22"|trans|raw}}';    
  1093.                 (function ($) {
  1094.                     var $form = $('#form-quipeutdonnersonsang');
  1095.                     $form.find('.start').click(function (e) {
  1096.                         e.preventDefault();
  1097.                         $form.trigger('reset');
  1098.                         var currentStep = $('#data-apk-current-step').text();
  1099.                         showQuestion(currentStep, "1");
  1100.                         hidePrev();
  1101.                         updateStep("0", "1");
  1102.                     });
  1103.                     $form.find('.prev').click(function (e) {
  1104.                         e.preventDefault();
  1105.                         var targetStep = $('#data-apk-prev-step').text();
  1106.                         var currentStep = $('#data-apk-current-step').text();
  1107.                         var activePrev = false;
  1108.                         $("[data-question='" + currentStep + "'] input[type='radio'], [data-question='" + currentStep + "'] input[type='checkbox']").prop('checked', false);
  1109.                         $("[data-question='" + currentStep + "'] input[type='text'], [data-question='" + currentStep + "'] input[type='date']").prop('value', '');
  1110.                         $("[data-question='" + targetStep + "'] input[type='radio'], [data-question='" + targetStep + "'] input[type='checkbox']").prop('checked', false);
  1111.                         $("[data-question='" + targetStep + "'] input[type='text'], [data-question='" + targetStep + "'] input[type='date']").prop('value', '');
  1112.                         showQuestion(currentStep, targetStep);
  1113.                         updateStep(false, targetStep);
  1114.                         enableNext();
  1115.                         if (targetStep == '1' || activePrev == false) {
  1116.                             hidePrev();
  1117.                         }
  1118.                     });
  1119.                     $form.find('.next, .next-no-matter').click(function (e) {
  1120.                         e.preventDefault();
  1121.                         //$form.find('prev').removeClass('uk-invisible');
  1122.                         var $question = $form.find('[data-question]').not('.uk-hidden');
  1123.                         var questionN = $question.attr('data-question');
  1124.                         var $error = $question.find('.question-message');
  1125.                         // êtes-vous un homme ou une femme ?
  1126.                         if (questionN == "1") {
  1127.                             if ($form.find('[name="q' + questionN + '"]:checked').val() == '') {
  1128.                                 // Veuillez répondre à la question.
  1129.                                 showMessage($question, i18ln_erreur1, 'red', 'before');
  1130.                             } else {
  1131.                                 showQuestion(questionN, "2");
  1132.                                 showPrev();
  1133.                             }
  1134.                             if($(this).hasClass('next-no-matter')) {
  1135.                                 showQuestion(questionN, "2");
  1136.                                 showPrev();
  1137.                             }
  1138.                         }
  1139.                         // Quelle est votre date de naissance ?
  1140.                         else if (questionN == "2") {
  1141.                             if ($form.find('[name="q' + questionN + '"]').val() == '') {
  1142.                                 // Veuillez répondre à la question.
  1143.                                 showMessage($question, i18ln_erreur1, 'red', 'before');
  1144.                             }
  1145.                             else if (!isValidDate($form.find('[name="q' + questionN + '"]'))) {
  1146.                                 // Veuillez répondre à la question.
  1147.                                 showMessage($question, i18ln_erreur2, 'red', 'before');
  1148.                             } else {
  1149.                                 var age = getAge(datepickerInput.datepicker('getDate'));
  1150.                                 //console.log('age ' + age);
  1151.                                 if (isNaN(age) || age < 0) {
  1152.                                     // Veuillez entrer une date valide.
  1153.                                     showMessage($question, i18ln_erreur2, 'red', 'before');
  1154.                                 } else {
  1155.                                     if (age < 18) {
  1156.                                         // Vous êtes actuellement trop jeune pour donner votre sang. Mais nous vous remercions pour votre intérêt. Revenez nous voir dès que vous aurez 18 ans !
  1157.                                         showMessage($question, i18ln_erreur3, 'red', 'after');
  1158.                                     } else if (age >= 18 && age <= 65) {
  1159.                                         showQuestion(questionN, "3");
  1160.                                     } else if (age >= 66 && age <= 74) {
  1161.                                         showQuestion(questionN, "2.1");
  1162.                                     } else {
  1163.                                         // Malheureusement, vous ne pouvez pas donner votre sang car le 1er don de sang doit avoir été effectué avant votre 66ème anniversaire et le dernier don doit remonter à moins de 3 ans.
  1164.                                         showMessage($question, i18ln_erreur4, 'red', 'after');
  1165.                                     }
  1166.                                 }
  1167.                             }
  1168.                             if($(this).hasClass('next-no-matter')) {
  1169.                                 showQuestion(questionN, "3");
  1170.                             }
  1171.                         }
  1172.                         // Avez-vous fait un don ces trois dernières années ?
  1173.                         else if (questionN == "2.1") {
  1174.                             if ($form.find('[name="q' + questionN + '"]:checked').val() == '') {
  1175.                                 // Veuillez répondre à la question.
  1176.                                 showMessage($question, i18ln_erreur1, 'red');
  1177.                             } else {
  1178.                                 if ($('#form-quipeutdonnersonsang .next').prop("disabled") !== true) {
  1179.                                     showQuestion(questionN, "3");
  1180.                                 }
  1181.                             }
  1182.                             if($(this).hasClass('next-no-matter')) {
  1183.                                 showQuestion(questionN, "3");
  1184.                             }
  1185.                         }
  1186.                         // Quel est votre poids et votre taille ? Si <50kg
  1187.                         else if (questionN == "3") {
  1188.                             if ($form.find('[name="q' + questionN + '"]').val() == '') {
  1189.                                 // Veuillez répondre à la question.
  1190.                                 showMessage($question, i18ln_erreur1, 'red', 'before');
  1191.                             } else if (isNaN($form.find('[name="q' + questionN + '"]').val())) {
  1192.                                 // Veuillez entrer un nombre valide.
  1193.                                 showMessage($question, i18ln_erreur7, 'red', 'before');
  1194.                             } else if ($form.find('[name="q' + questionN + '"]').val() < parseInt($form.find('[name="q' + questionN + '"]').attr('min')) || $form.find('[name="q' + questionN + '"]').val() > parseInt($form.find('[name="q' + questionN + '"]').attr('max'))) {
  1195.                                 // Veuillez entrer un nombre valide.
  1196.                                 showMessage($question, i18ln_erreur7, 'red', 'before');
  1197.                             } else if ($form.find('[name="q' + questionN + '"]').val() < 50) {
  1198.                                 // Vous ne pouvez actuellement pas donner votre sang, car vous devez peser au minimum 50kg. C'est une condition légale, et ce dans le but de vous protéger. En effet, un don de sang ne peut pas dépasser 13% du volume sanguin total ; ce dernier dépend de la taille, du poids et du sexe.
  1199.                                 showMessage($question, i18ln_erreur8, 'red', 'after');
  1200.                             } else {
  1201.                                 if ($form.find('[name="q' + questionN + 'taille"]').val() == '') {
  1202.                                     // Veuillez répondre à la question.
  1203.                                     showMessage($question, i18ln_erreur1, 'red', 'before');
  1204.                                 } else if (isNaN($form.find('[name="q' + questionN + 'taille"]').val())) {
  1205.                                     // Veuillez entrer un nombre valide.
  1206.                                     showMessage($question, i18ln_erreur7, 'red', 'before');
  1207.                                 } else if ($form.find('[name="q' + questionN + 'taille"]').val() < parseInt($form.find('[name="q' + questionN + 'taille"]').attr('min')) || $form.find('[name="q' + questionN + 'taille"]').val() > parseInt($form.find('[name="q' + questionN + 'taille"]').attr('max'))) {
  1208.                                     // Veuillez entrer un nombre valide.
  1209.                                     showMessage($question, i18ln_erreur7, 'red', 'before');
  1210.                                 } else {
  1211.                                     var $poids = $form.find('[name="q' + questionN + '"]').val();
  1212.                                     var $taille = $form.find('[name="q' + questionN + 'taille"]').val();
  1213.                                     if (
  1214.                                         ($poids < 51 && $taille < 156) ||
  1215.                                         ($poids == 51 && $taille < 155) ||
  1216.                                         ($poids == 52 && $taille < 153) ||
  1217.                                         ($poids == 53 && $taille < 151) ||
  1218.                                         ($poids == 54 && $taille < 149) ||
  1219.                                         ($poids == 55 && $taille < 148) ||
  1220.                                         ($poids == 56 && $taille < 146)
  1221.                                     ) {
  1222.                                         // Attention ! La correspondance entre votre poids et votre taille ne convient pas pour donner votre sang.
  1223.                                         showMessage($question, i18ln_erreur8_2, 'red', 'after');
  1224.                                     } else {
  1225.                                         if ($('#form-quipeutdonnersonsang .next').prop("disabled") !== true) {
  1226.                                             showQuestion(questionN, "4");
  1227.                                         }
  1228.                                     }
  1229.                                 }
  1230.                             }
  1231.                             if($(this).hasClass('next-no-matter')) {
  1232.                                 showQuestion(questionN, "4");
  1233.                             }
  1234.                         }
  1235.                         // De 1980 à 1996, avez-vous séjourné plus de 6 mois (tous séjours confondus) au Royaume- Uni (Angleterre, Écosse, Pays de Galles et Irlande du Nord)?
  1236.                         else if (questionN == "4") {
  1237.                             if ($form.find('[name="q' + questionN + '"]:checked').val() == '') {
  1238.                                 // Veuillez répondre à la question.
  1239.                                 showMessage($question, i18ln_erreur1, 'red', 'before');
  1240.                             } else {
  1241.                                 if ($('#form-quipeutdonnersonsang .next').prop("disabled") !== true) {
  1242.                                     showQuestion(questionN, "5");
  1243.                                 }
  1244.                             }
  1245.                             if($(this).hasClass('next-no-matter')) {
  1246.                                 showQuestion(questionN, "5");
  1247.                             }
  1248.                         }
  1249.                         // Avez-vous voyagé hors de la Belgique ces 6 derniers mois?
  1250.                         else if (questionN == "5") {
  1251.                             if ($form.find('[name="q' + questionN + '"]:checked').val() == '') {
  1252.                                 // Veuillez répondre à la question.
  1253.                                 showMessage($question, i18ln_erreur1, 'red', 'before');
  1254.                             } else {
  1255.                                 if ($('#form-quipeutdonnersonsang .next').prop("disabled") !== true) {
  1256.                                     if ($form.find('[name="q' + questionN + '"]:checked').val() == 'Oui') {
  1257.                                         showQuestion(questionN, "5.1");
  1258.                                     } else {
  1259.                                         //alert($form.find('[name="q1"]:checked').val());
  1260.                                         if ($form.find('[name="q1"]:checked').val() == 'Femme') {
  1261.                                             showQuestion(questionN, "6");
  1262.                                         } else {
  1263.                                             showQuestion(questionN, "7");
  1264.                                         }
  1265.                                     }
  1266.                                 }
  1267.                             }
  1268.                             if($(this).hasClass('next-no-matter')) {
  1269.                                 if ($form.find('[name="q1"]:checked').val() == 'Femme') {
  1270.                                     showQuestion(questionN, "6");
  1271.                                 } else {
  1272.                                     showQuestion(questionN, "7");
  1273.                                 }
  1274.                             }
  1275.                         }
  1276.                         // Avez-vous voyagé à l’extérieur de l’Europe ?
  1277.                         else if (questionN == "5.1") {
  1278.                             if ($form.find('[name="q' + questionN + '"]:checked').val() == '') {
  1279.                                 // Veuillez répondre à la question.
  1280.                                 showMessage($question, i18ln_erreur1, 'red', 'before');
  1281.                             } else {
  1282.                                 if ($('#form-quipeutdonnersonsang .next').prop("disabled") !== true) {
  1283.                                     if ($form.find('[name="q1"]:checked').val() == 'Femme') {
  1284.                                         showQuestion(questionN, "6");
  1285.                                     } else {
  1286.                                         showQuestion(questionN, "7");
  1287.                                     }
  1288.                                 }
  1289.                             }
  1290.                             if($(this).hasClass('next-no-matter')) {
  1291.                                 if ($form.find('[name="q1"]:checked').val() == 'Femme') {
  1292.                                     showQuestion(questionN, "6");
  1293.                                 } else {
  1294.                                     showQuestion(questionN, "7");
  1295.                                 }
  1296.                             }
  1297.                         }
  1298.                         // Si répondu F à la Q1 : êtes-vous enceinte ou avez-vous accouché dans les 6 derniers mois ?
  1299.                         else if (questionN == "6") {
  1300.                             if ($form.find('[name="q' + questionN + '"]:checked').val() == '') {
  1301.                                 // Veuillez répondre à la question.
  1302.                                 showMessage($question, i18ln_erreur1, 'red', 'before');
  1303.                             } else {
  1304.                                 if ($('#form-quipeutdonnersonsang .next').prop("disabled") !== true) {
  1305.                                     if ($form.find('[name="q' + questionN + '"]:checked').val() == 'Non') {
  1306.                                         showQuestion(questionN, "7");
  1307.                                     }
  1308.                                 }
  1309.                             }
  1310.                             if($(this).hasClass('next-no-matter')) {
  1311.                                 showQuestion(questionN, "7");
  1312.                             }
  1313.                         }
  1314.                         // Q7 : Avez-vous eu récemment de la fièvre ou une infection (bronchite, infection urinaire...) ?
  1315.                         else if (questionN == "7") {
  1316.                             if ($('#form-quipeutdonnersonsang .next').prop("disabled") !== true) {
  1317.                                 showQuestion(questionN, "8");
  1318.                             }
  1319.                             if($(this).hasClass('next-no-matter')) {
  1320.                                 showQuestion(questionN, "8");
  1321.                             }
  1322.                         }
  1323.                         // Q8 : Prenez-vous des médicaments ?
  1324.                         else if (questionN == "8") {
  1325.                             // Veuillez répondre à la question.
  1326.                             //showMessage($question, i18ln_erreur1, 'red', 'before');
  1327.                             // if ($form.find('[name="q' + questionN + '"]:checked').val() == 'Non') {
  1328.                             //     disableNext();
  1329.                             // }
  1330.                             if ($form.find('[name="q' + questionN + '"]:checked').val() == '') {
  1331.                                 // Veuillez répondre à la question.
  1332.                                 showMessage($question, i18ln_erreur1, 'red', 'before');
  1333.                             } else {
  1334.                                 if ($('#form-quipeutdonnersonsang .next').prop("disabled") !== true) {
  1335.                                     if ($form.find('[name="q' + questionN + '"]:checked').val() == 'Non') {
  1336.                                         showQuestion(questionN, "9");
  1337.                                     }
  1338.                                 }
  1339.                             }
  1340.                             if($(this).hasClass('next-no-matter')) {
  1341.                                 showQuestion(questionN, "9");
  1342.                             }
  1343.                         }
  1344.                         // 9. Avez-vous été vacciné(e) il y a moins d’un mois ?
  1345.                         else if (questionN == "9") {
  1346.                             if ($form.find('[name="q' + questionN + '"]:checked').val() == '') {
  1347.                                 // Veuillez répondre à la question.
  1348.                                 showMessage($question, i18ln_erreur1, 'red', 'before');
  1349.                             } else {
  1350.                                 if ($('#form-quipeutdonnersonsang .next').prop("disabled") !== true) {
  1351.                                     if ($form.find('[name="q' + questionN + '"]:checked').val() != '') {
  1352.                                         showQuestion(questionN, "10");
  1353.                                     }
  1354.                                 }
  1355.                             }
  1356.                         }
  1357.                         // 10. Avez-vous subi une endoscopie (arthroscopie, gastroscopie, coloscopie…) ou une opération dans les 4 derniers mois ?
  1358.                         else if (questionN == "10") {
  1359.                             if ($form.find('[name="q' + questionN + '"]:checked').val() == '') {
  1360.                                 // Veuillez répondre à la question.
  1361.                                 showMessage($question, i18ln_erreur1, 'red', 'before');
  1362.                             } else {
  1363.                                 if ($('#form-quipeutdonnersonsang .next').prop("disabled") !== true) {
  1364.                                     if ($form.find('[name="q' + questionN + '"]:checked').val() == 'Non') {
  1365.                                         showQuestion(questionN, "11");
  1366.                                     }
  1367.                                 }
  1368.                             }
  1369.                             if($(this).hasClass('next-no-matter')) {
  1370.                                 showQuestion(questionN, "11");
  1371.                             }
  1372.                         }
  1373.                         // 11. êtes-vous allé.e chez le dentiste au cours des 7 derniers jours ?
  1374.                         else if (questionN == "11") {
  1375.                             if ($form.find('[name="q' + questionN + '"]:checked').val() == '') {
  1376.                                 // Veuillez répondre à la question.
  1377.                                 showMessage($question, i18ln_erreur1, 'red', 'before');
  1378.                             } else {
  1379.                                 if ($('#form-quipeutdonnersonsang .next').prop("disabled") !== true) {
  1380.                                     if ($form.find('[name="q' + questionN + '"]:checked').val() == 'Non' || $form.find('[name="q' + questionN + '"]:checked').val() == 'Oui') {
  1381.                                         showQuestion(questionN, "12");
  1382.                                     }
  1383.                                 }
  1384.                             }
  1385.                             if($(this).hasClass('next-no-matter')) {
  1386.                                 showQuestion(questionN, "12");
  1387.                             }
  1388.                         }
  1389.                         // 12. Avez-vous fait un piercing (y compris boucles d’oreilles) ou un tatouage (y compris maquillage permanent) durant ces 4 derniers mois ?
  1390.                         else if (questionN == "12") {
  1391.                             if ($form.find('[name="q' + questionN + '"]:checked').val() == '') {
  1392.                                 // Veuillez répondre à la question.
  1393.                                 showMessage($question, i18ln_erreur1, 'red', 'before');
  1394.                             } else {
  1395.                                 if ($('#form-quipeutdonnersonsang .next').prop("disabled") !== true) {
  1396.                                     if ($form.find('[name="q' + questionN + '"]:checked').val() == 'Non') {
  1397.                                         showQuestion(questionN, "13");
  1398.                                     }
  1399.                                 }
  1400.                             }
  1401.                             if($(this).hasClass('next-no-matter')) {
  1402.                                 showQuestion(questionN, "13");
  1403.                             }
  1404.                         }
  1405.                         // 13. Avez-vous déjà consommé de la drogue ?
  1406.                         else if (questionN == "13") {
  1407.                             if ($form.find('[name="q' + questionN + '"]:checked').val() == '') {
  1408.                                 // Veuillez répondre à la question.
  1409.                                 showMessage($question, i18ln_erreur1, 'red', 'before');
  1410.                             } else {
  1411.                                 if ($('#form-quipeutdonnersonsang .next').prop("disabled") !== true) {
  1412.                                     if ($form.find('[name="q' + questionN + '"]:checked').val() == 'Non' || $form.find('[name="q' + questionN + '"]:checked').val() == 'Oui') {
  1413.                                         if ($form.find('[name="q1"]:checked').val() == 'Femme') {
  1414.                                             showQuestion(questionN, "14");
  1415.                                         } else {
  1416.                                             showQuestion(questionN, "15");
  1417.                                         }
  1418.                                     }
  1419.                                 }
  1420.                             }
  1421.                             if($(this).hasClass('next-no-matter')) {
  1422.                                 if ($form.find('[name="q1"]:checked').val() == 'Femme') {
  1423.                                     showQuestion(questionN, "14");
  1424.                                 } else {
  1425.                                     showQuestion(questionN, "15");
  1426.                                 }
  1427.                             }
  1428.                         }
  1429.                         // 14. Si répondu F (femme) à la Q2: Avez-vous eu un.e nouveau.elle partenaire sexuel.le au cours des 4 derniers mois ? (avec ou sans préservatif)
  1430.                         else if (questionN == "14") {
  1431.                             if ($form.find('[name="q' + questionN + '"]:checked').val() == '') {
  1432.                                 // Veuillez répondre à la question.
  1433.                                 showMessage($question, i18ln_erreur1, 'red', 'before');
  1434.                             } else {
  1435.                                 if ($('#form-quipeutdonnersonsang .next').prop("disabled") !== true) {
  1436.                                     if ($form.find('[name="q' + questionN + '"]:checked').val() == 'Non') {
  1437.                                         showQuestion(questionN, "end");
  1438.                                         hideNext();
  1439.                                         hidePrev();
  1440.                                     }
  1441.                                 }
  1442.                             }
  1443.                             if($(this).hasClass('next-no-matter')) {
  1444.                                 showQuestion(questionN, "end");
  1445.                                 hideNext();
  1446.                                 hidePrev();
  1447.                             }
  1448.                         }
  1449.                         // 15. Si répondu H (hommme) à la Q2: Avez-vous eu une nouvelle partenaire sexuelle au cours des 4 derniers mois ? (avec ou sans préservatif)
  1450.                         else if (questionN == "15") {
  1451.                             if ($form.find('[name="q' + questionN + '"]:checked').val() == '') {
  1452.                                 // Veuillez répondre à la question.
  1453.                                 showMessage($question, i18ln_erreur1, 'red', 'before');
  1454.                             } else {
  1455.                                 if ($('#form-quipeutdonnersonsang .next').prop("disabled") !== true) {
  1456.                                     if ($form.find('[name="q' + questionN + '"]:checked').val() == 'Non') {
  1457.                                         showQuestion(questionN, "16");
  1458.                                     }
  1459.                                 }
  1460.                             }
  1461.                             if($(this).hasClass('next-no-matter')) {
  1462.                                 showQuestion(questionN, "16");
  1463.                             }
  1464.                         }
  1465.                         // 16. Si répondu H (hommme) à la Q2: Au cours des 12 derniers mois, avez-vous eu une relation sexuelle avec un homme ?
  1466.                         else if (questionN == "16") {
  1467.                             if ($form.find('[name="q' + questionN + '"]:checked').val() == '') {
  1468.                                 // Veuillez répondre à la question.
  1469.                                 showMessage($question, i18ln_erreur1, 'red', 'before');
  1470.                             } else {
  1471.                                 if ($('#form-quipeutdonnersonsang .next').prop("disabled") !== true) {
  1472.                                     if ($form.find('[name="q' + questionN + '"]:checked').val() == 'Non') {
  1473.                                         showQuestion(questionN, "end");
  1474.                                         hideNext();
  1475.                                         hidePrev();
  1476.                                     }
  1477.                                 }
  1478.                             }
  1479.                             if($(this).hasClass('next-no-matter')) {
  1480.                                 showQuestion(questionN, "end");
  1481.                                 hideNext();
  1482.                                 hidePrev();
  1483.                             }
  1484.                         }
  1485.                     });
  1486.                     $(document).on('change input cut copy paste', '#form-quipeutdonnersonsang :input', function () {
  1487.                         var $question = $(this).closest('[data-question]');
  1488.                         enableNext();
  1489.                         removeMessage($question)
  1490.                     });
  1491.                     $(document).on('change', '#form-quipeutdonnersonsang input[type="radio"]', function () {
  1492.                         var $question = $(this).closest('[data-question]');
  1493.                         if ($(this).attr('data-message') && $(this).attr('data-message') != 'false') {
  1494.                             showMessage($question, eval($(this).attr('data-message')), $(this).attr('data-color'), $(this).attr('data-where'));
  1495.                         } else {
  1496.                             removeMessage($question);
  1497.                         }
  1498.                         if($(this).hasClass('is-autovalidate')) {
  1499.                             $(this).parents('.uk-form-controls').find('.next').trigger( "click" );
  1500.                         }
  1501.                         if ($(this).attr('data-apk-toggle') == 'true' || $(this).attr('data-apk-toggle') == 'false') {
  1502.                             var toggleTarget = $(this).parents('[data-apk-toggle-target]').attr('data-apk-toggle-target');
  1503.                             if ($(this).attr('data-apk-toggle') == 'true') { // Note: Ajout du namespace 'atp' pour éviter des conflits avec d'autres functions JS (vendor)
  1504.                                 $(toggleTarget).show();
  1505.                                 $('#form-quipeutdonnersonsang .next-no-matter').removeClass('uk-hidden');
  1506.                             } else if ($(this).attr('data-apk-toggle') == 'false') {
  1507.                                 $(toggleTarget).hide();
  1508.                             }
  1509.                         }
  1510.                     });
  1511.                     $(document).on('change', '#form-quipeutdonnersonsang input[type="checkbox"]', function () {
  1512.                         var $question = $(this).closest('[data-question]');
  1513.                         if ($(this).prop('checked')) {
  1514.                             if ($(this).attr('data-message') && $(this).attr('data-message') != 'false') {
  1515.                                 showMessage($question, eval($(this).attr('data-message')), $(this).attr('data-color'), $(this).attr('data-where'));
  1516.                                 $('#form-quipeutdonnersonsang .next-no-matter').removeClass('uk-hidden');
  1517.                             }
  1518.                         } else {
  1519.                             var $question = $(this).closest('[data-question]');
  1520.                             var where = $(this).parents('[data-apk-where]').attr('data-apk-where');
  1521.                             //var message =  $(this).parents('[data-apk-message]').attr('data-apk-message');
  1522.                             var message = eval($(this).parents('[data-apk-message]').attr('data-apk-message'))
  1523.                             var countElementChecked = $(this).parents('[data-apk-message]').find('input:checked').length;
  1524.                             var $error = $form.find('.question-message-' + where);
  1525.                             var $errorContainer = $form.find('.question-message-container-complement');
  1526.                             if (countElementChecked >= 1) {
  1527.                                 if ($errorContainer.hasClass('is-not-empty') == false) {
  1528.                                     $errorContainer.addClass('is-not-empty')
  1529.                                 }
  1530.                                 $error.html(message);
  1531.                                 /*if( $question.attr('data-question') == "8" && ($form.find('[name="q8"]:checked').val() == 'Oui')) {
  1532.                                     $('#form-quipeutdonnersonsang .next-no-matter').removeClass('uk-hidden');
  1533.                                 }*/
  1534.                             } else {
  1535.                                 if ($errorContainer.hasClass('is-not-empty') == true) {
  1536.                                     $errorContainer.removeClass('is-not-empty')
  1537.                                 }
  1538.                                 $error.html('');
  1539.                             }
  1540.                             var currentWhere = $(this).attr('data-where');
  1541.                             var countWhere = $question.find('input[data-where=' + currentWhere + ']:checked').length;
  1542.                             //console.log(countWhere);
  1543.                             if (countWhere == 0) {
  1544.                                 //alert('DELETE: .question-message-' + currentWhere);
  1545.                                 if(currentWhere=='after'){
  1546.                                     alert('after checkbox');
  1547.                                 } else {
  1548.                                     $form.find('.question-message-' + currentWhere).html('');
  1549.                                 }
  1550.                             }
  1551.                             $('#form-quipeutdonnersonsang .next-no-matter').removeClass('uk-hidden');
  1552.                         }
  1553.                         if ($question.attr('data-question') == "9") {
  1554.                             if (
  1555.                                 $("input[name='q9.1']").prop("checked") == false &&
  1556.                                 $("input[name='q9.2']").prop("checked") == false &&
  1557.                                 $("input[name='q9.3']").prop("checked") == false &&
  1558.                                 $("input[name='q9.4']").prop("checked") == false &&
  1559.                                 $("input[name='q9.5']").prop("checked") == false &&
  1560.                                 $("input[name='q9.7']").prop("checked") == false &&
  1561.                                 $("input[name='q9.6']").prop("checked") == true
  1562.                             ) {
  1563.                                 //$form.find('.question-message-title-common').hide();
  1564.                                 $form.find('.question-message-complement_common').html('');
  1565.                             } else {
  1566.                                 //$form.find('.question-message-title-common').show();
  1567.                             }
  1568.                         }
  1569.                     });
  1570.                     /* $('[data-question="8"] .has-serialize-checkbox label').on('click', function () {
  1571.                         //if($("#toggle-q8-yes").css('display')=='block'){
  1572.                         serializeCheckbox($("#toggle-q8-yes :input[type='checkbox']"));
  1573.                         //}
  1574.                     });*/
  1575.                     $(document).on('change', '[data-question="8"] .has-serialize-checkbox input[type="checkbox"]', function () {
  1576.                         var element = '[data-question="8"] .has-serialize-checkbox label';
  1577.                         var q8_1 = [], q8_2 = [], q8_3 = [], q8_4 = [], q8_5 = [];
  1578.                         $(element + " input[name='q8.1']:checked").each(function () {
  1579.                             q8_1.push($(this).val());
  1580.                         });
  1581.                         $(element + " input[name='q8.2']:checked").each(function () {
  1582.                             q8_2.push($(this).val());
  1583.                         });
  1584.                         $(element + " input[name='q8.3']:checked").each(function () {
  1585.                             q8_3.push($(this).val());
  1586.                         });
  1587.                         $(element + " input[name='q8.4']:checked").each(function () {
  1588.                             q8_4.push($(this).val());
  1589.                         });
  1590.                         $(element + " input[name='q8.5']:checked").each(function () {
  1591.                             q8_5.push($(this).val());
  1592.                         });
  1593.                         var q8_6 = $(element + " input[name='q8.6']");
  1594.                         //console.log(JSON.stringify([q8_1, q8_2, q8_3]));
  1595.                         // console.log('1:'+q8_1.join(", "));
  1596.                         // console.log('2:'+q8_2.join(", "));
  1597.                         // console.log('3:'+q8_3.join(", "));
  1598.                     /* var containerMessage1 = $(this).closest('[data-question]').find('.question-message-complement_1');
  1599.                         var containerMessage2 = $(this).closest('[data-question]').find('.question-message-complement_2');
  1600.                         var containerMessage3 = $(this).closest('[data-question]').find('.question-message-complement_3');
  1601.                         var containerMessage4 = $(this).closest('[data-question]').find('.question-message-complement_4');
  1602.                         var containerMessage5 = $(this).closest('[data-question]').find('.question-message-complement_5');
  1603.                         var containerMessage6 = $(this).closest('[data-question]').find('.question-message-complement_6');
  1604.                         var containerMessageCommon = $(this).closest('[data-question]').find('.question-message-common');*/
  1605.                         var containerMessage1 = $form.find('.question-message-complement_1');
  1606.                         var containerMessage2 = $form.find('.question-message-complement_2');
  1607.                         var containerMessage3 = $form.find('.question-message-complement_3');
  1608.                         var containerMessage4 = $form.find('.question-message-complement_4');
  1609.                         var containerMessage5 = $form.find('.question-message-complement_5');
  1610.                         var containerMessage6 = $form.find('.question-message-complement_6');
  1611.                         var containerMessageCommon = $form.find('.question-message-common');
  1612.                         if (q8_1 != '') {
  1613.                             var containerMessage1Updated = i18ln_complement_14_1.replace("[[CHOICE]]", '<strong>' + q8_1.join(", ") + '</strong>');
  1614.                             containerMessage1.html(containerMessage1Updated);
  1615.                         } else {
  1616.                             containerMessage1.html('');
  1617.                         }
  1618.                         if (q8_2 != '') {
  1619.                             var containerMessage2Updated = i18ln_complement_14_2.replace("[[CHOICE]]", '<strong>' + q8_2.join(", ") + '</strong>');
  1620.                             containerMessage2.html(containerMessage2Updated);
  1621.                         } else {
  1622.                             containerMessage2.html('');
  1623.                         }
  1624.                         if (q8_3 != '') {
  1625.                             var containerMessage3Updated = i18ln_complement_14_3.replace("[[CHOICE]]", '<strong>' + q8_3.join(", ") + '</strong>');
  1626.                             containerMessage3.html(containerMessage3Updated);
  1627.                         } else {
  1628.                             containerMessage3.html('');
  1629.                         }
  1630.                         if (q8_4 != '') {
  1631.                             var containerMessage4Updated = i18ln_complement_14_4.replace("[[CHOICE]]", '<strong>' + q8_4.join(", ") + '</strong>');
  1632.                             containerMessage4.html(containerMessage4Updated);
  1633.                         } else {
  1634.                             containerMessage4.html('');
  1635.                         }
  1636.                         if (q8_5 != '') {
  1637.                             var containerMessage5Updated = i18ln_complement_14_5.replace("[[CHOICE]]", '<strong>' + q8_5.join(", ") + '</strong>');
  1638.                             containerMessage5.html(containerMessage5Updated);
  1639.                         } else {
  1640.                             containerMessage5.html('');
  1641.                         }
  1642.                         if (q8_6.prop('checked')) {
  1643.                             containerMessage6.html(i18ln_complement_14_6);
  1644.                         } else {
  1645.                             containerMessage6.html('');
  1646.                         }
  1647.                         if (q8_1 != '' || q8_2 != '' || q8_3 != '' || q8_4 != '' || q8_5 != '' || q8_6 != '') {
  1648.                             containerMessageCommon.html(i18ln_complement_14_common);
  1649.                         } else {
  1650.                             containerMessageCommon.html('');
  1651.                         }
  1652.                         $('#form-quipeutdonnersonsang .next-no-matter').removeClass('uk-hidden');
  1653.                     });
  1654.                     if ($('[data-apk-message]').length) {
  1655.                         $('[data-apk-message] label').on('click', function (e) {
  1656.                             //e.preventDefault();
  1657.                             var $question = $(this).closest('[data-question]');
  1658.                             var where = $(this).parents('[data-apk-where]').attr('data-apk-where');
  1659.                             //var message =  $(this).parents('[data-apk-message]').attr('data-apk-message');
  1660.                             var message = eval($(this).parents('[data-apk-message]').attr('data-apk-message'));
  1661.                             var countElementChecked = $(this).parents('[data-apk-message]').find('input:checked').length;
  1662.                             var $error = $form.find('.question-message-' + where);
  1663.                             var $errorContainer = $form.find('.question-message-container-complement');
  1664.                             if (countElementChecked >= 1) {
  1665.                                 if ($errorContainer.hasClass('is-not-empty') == false) {
  1666.                                     $errorContainer.addClass('is-not-empty')
  1667.                                 }
  1668.                                 $error.html(message);
  1669.                             } else {
  1670.                                 if ($errorContainer.hasClass('is-not-empty') == true) {
  1671.                                     $errorContainer.removeClass('is-not-empty')
  1672.                                 }
  1673.                                 $error.html('');
  1674.                             }
  1675.                             var currentWhere = $(this).find('input').attr('data-where');
  1676.                             var countWhere = $question.find('input[data-where=' + currentWhere + ']:checked').length;
  1677.                             //console.log(countWhere);
  1678.                             if (countWhere == 0) {
  1679.                                 //alert('DELETE: .question-message-' + currentWhere);
  1680.                                 $question.find('.question-message-' + currentWhere).html('');
  1681.                             }
  1682.                         });
  1683.                     }
  1684.                     /*$(document).on('change', '#form-quipeutdonnersonsang .has-apk-toggle [data-apk-toggle]', function () {
  1685.                         if($(this).attr('data-apk-toggle') && $(this).attr('data-apk-toggle')!='false') {
  1686.                         } else {
  1687.                         }
  1688.                     });*/
  1689.                 })(jQuery);
  1690.                 
  1691.             });
  1692.         </script>
  1693.     {% endif %}
  1694.     {% endblock %}