templates/questionnaires/frontOffice/quiz.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  7.     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
  8.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  9.     <link rel="stylesheet" href="{{ asset('assets/css/quiz-front.css') }}">
  10.     <title>Quiz Front Page</title>
  12. </head>
  13. <style id="dynamic-css"></style>
  14. <style>
  16. </style>
  17. <body style="background: {% if questionnaire.getCodeCouleur() is not empty %}{{ 'background-color: ' ~ questionnaire.getCodeCouleur() ~ ' !important;' }}{% else %}url('/images/FOND-QUIZZ.png') center center fixed no-repeat; background-size: cover;{% endif %}"> 
  18.     <header class="d-none"> <span id="quizHeader">{{questionnaire.header}} </span> - <span id="headerGeneral">{{HeaderGeneral}}</span></header>
  19.         <script type="text/javascript">
  20.                document.addEventListener("DOMContentLoaded", function() {
  21.                     const elem = document.getElementById("headerGeneral").innerText;
  22.                     const quizheader = document.getElementById("quizHeader").innerText;
  24.                     const formattedCode = `
  25.                     ${elem}
  26.                     ${quizheader}
  27.                     `;
  28.                     if (elem.trim().startsWith("<style")) {
  29.                         const dynamicCss = elem;
  30.                         const cssContent = elem.replace(/<style[^>]*>/, '').replace(/<\/style>/, '');
  31.                         document.getElementById("dynamic-css").innerHTML = cssContent;
  32.                     } else {
  33.                         eval(formattedCode);
  34.                 }
  35.         });
  36.         </script>
  38.         <div class="quiz-container">
  39.             <div class="image-container">
  40.                 <img src="https://akoyaconfig.services-unifies.fr/uploads/logo/logo.png" alt="Akoya Logo" class="brand-image elevation-3 mb-3 " style="opacity: .8; width: 33%;">
  41.                 <img src="{{ asset('/uploads/quiz/' ~ questionnaire.getImgPrincipale()) }}" alt="Questionnaire Image" class="questionnaire-image mainimg image_quiz">
  42.             </div>
  43.             <div class="congrats-container texte_done m-5 d-none">
  44.                     <h2>Félicitations ! Voici votre résultat basé sur vos réponses :</h2>
  45.             </div>
  46.             <input type="hidden" id="quizId" name="quizId" value="{{ questionnaire.id }}">
  47.             <div class="content-container">
  48.                 <div class="title-stepper">
  49.                 <div class="progress-container">
  50.                         <div class="progress-bar"></div>
  51.                         <div class="stepper">
  52.                             {% for question in questionnaire.questions %}
  53.                                 <div style="background-color: {{ questionnaire.getCouleurContraste() }};" class="step">{{ loop.index }}</div>
  54.                             {% endfor %}
  55.                         </div>
  56.                     </div>
  57.                    
  58.                 </div>
  59.                  <img src="https://akoyaconfig.services-unifies.fr/uploads/logo/logo.png" alt="Akoya Logo" class="after d-none" style="opacity: .8; width: 33%;">
  60.                 <div id="loader" class="loader"></div>
  61.                 <div class="question-container" style="display: none;">
  62.                     <h2 class="question"></h2>
  63.                     <div class="body">
  64.                         <ul class="sortable-list list-group" data-questionnaire-id="{{ questionnaire.id }}">
  65.                             {% for question in questionnaire.questions %}
  66.                                 <li class="list-group-item mb-4 p-4 border border-secondary question-item" data-num-responses="{{ question.numResponses }}">
  67.                                     <div class="mb-3">
  68.                                         <p class="font-weight-bold">{{ question.question }}</p>
  69.                                         <span    style="color: {{ questionnaire.getCouleurContraste() }};" >{% if question.numResponses > 1 %}
  70.                                             Choisir <b>{{ question.numResponses }}</b> options
  71.                                             {% else %}
  72.                                                 Choisir <b>{{ question.numResponses }}</b> option
  73.                                             {% endif %}
  74.                                         </span>
  75.                                     </div>
  76.                                     <input type="hidden" id="{{ question.id }}" value="{{ question.numResponses }}" />
  77.                                     <ul class="pl-4">
  78.                                         {% for questionReponse in question.reponses %}
  79.                                             <li style="list-style: none !important;">
  80.                                                 <div class="mb-2">
  81.                                                     <div class="form-check">
  82.                                                         <input type="checkbox" class="form-check-input edit-response-checkbox" id="editResponse-{{ question.id }}-{{ questionReponse.id }}" data-rep-number="{{ question.numResponses }}" data-response-id="{{ questionReponse.id }}" required>
  83.                                                         <label class="form-check-label" for="editResponse-{{ question.id }}-{{ questionReponse.id }}">{{ questionReponse.content }}</label>
  84.                                                     </div>
  85.                                                 </div>
  86.                                             </li>
  87.                                         {% endfor %}
  88.                                     </ul>
  89.                                 </li>
  90.                             {% endfor %}
  91.                         </ul>
  93.                         <button class="next-btn" style="background-color: {{ questionnaire.getCouleurContraste() }} !important;">Valider</button>
  94.                     </div>
  95.                 </div>
  96.                 
  97.                 <button class="cta" id="start-button"   style="--background-color: {{ questionnaire.getCouleurContraste() }};">
  98.                 <input type="hidden" value="{{ questionnaire.getCouleurContraste() }}" id="buttons-color">
  99.                 <span>Commencer</span>
  100.                 <svg viewBox="0 0 13 10" height="10px" width="15px">
  101.                     <path d="M1,5 L11,5"></path>
  102.                     <polyline points="8 1 12 5 8 9"></polyline>
  103.                 </svg>
  104.                 </button>
  105.             
  106.             </div>
  107.         </div>
  110.         <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  111.         <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
  114.     <script>
  115.         $(document).ready(function () {
  116.            $("#start-button").click(function () {
  117.                 console.log("click");
  118.                 $("#loader").show();
  119.                 $(this).hide(); 
  120.                 setTimeout(function () {
  121.                     $("#loader").hide();
  122.                     $(".question-container").show();
  123.                 }, 2000);
  124.             });
  125.         });
  126.     </script>
  129.     <script>
  130.     let currentNumReponses = 0;
  131.         $(document).ready(function() {
  133.             $(document).on('submit', '.userDataForm', function(event) {
  135.                 event.preventDefault();
  136.                 if (!$('#acceptData').is(':checked')) {
  137.                     toastr.error("Vous devez accepter les conditions pour pouvoir envoyer par mail.");
  138.                     return false;
  139.                 }
  141.                 var allInputsValid = true;
  143.                 
  145.                 var formData = {};
  147.                 $(this).find('input').each(function() {
  148.                     var input = $(this);
  149.                     var inputName = input.attr('name');
  150.                     var inputSociete = input.attr('societe');
  151.                     var inputPrenom = input.attr('prenom');
  152.                     var inputTelephone = input.attr('telephone');
  153.                     var inputEmail= input.attr('email');
  154.                     var inputValue = input.val().trim();
  155.                     
  156.                     if (inputName === 'prenom' && inputValue === '') {
  157.                         allInputsValid = false;
  158.                         toastr.error("Le prénom est obligatoire.");
  159.                         return false;
  160.                     }
  162.                     if (inputName === 'societe' && inputValue === '') {
  163.                         // Societe field is optional, so no validation required
  164.                         return true;
  165.                     }
  167.                     if (inputName === 'telephone' && inputValue === '') {
  168.                         allInputsValid = false;
  169.                         toastr.error("Le numéro de téléphone est obligatoire.");
  170.                         return false;
  171.                     }
  173.                     if (inputName === 'email' && inputValue === '') {
  174.                         allInputsValid = false;
  175.                         toastr.error("L'adresse e-mail est obligatoire.");
  176.                         return false;
  177.                     }
  179.                     if (inputName === 'nom' && inputValue === '') {
  180.                         allInputsValid = false;
  181.                         toastr.error("Le nom est obligatoire.");
  182.                         return false;
  183.                     }
  185.                 });
  187.                 var profilesData = $('#profilesDataContainer').text();
  189.                const pointsData = {};
  191.                 $.each(JSON.parse(profilesData), function (profileId, points) {
  192.                     // Convert the profileId to a string before using it as a key
  193.                     pointsData[profileId.toString()] = points;
  194.                 });
  197.                 formData['profiles'] = JSON.stringify(pointsData);
  198.                 formData['prenom'] = $('#prenom').val().trim();
  199.                 formData['societe'] = $('#societe').val().trim();
  200.                 formData['telephone'] = $('#telephone').val().trim();
  201.                 formData['email'] = $('#email').val().trim();
  202.                 formData['nom'] = $('#nom').val().trim();
  203.                 formData['quizId'] = $('#quizId').val();
  205.                 if (!allInputsValid) {
  206.                     return false;
  207.                 }
  209.                 $.ajax({
  210.                     method: 'POST',
  211.                     url: '/candidat/save', 
  212.                     data: formData,
  213.                     dataType: 'json', 
  214.                     success: function(response) {
  215.                         toastr.success(response.success); 
  216.                         location.reload();
  217.                     },
  218.                     error: function(xhr, status, error) {
  219.                         const errorMessage = xhr.responseJSON ? xhr.responseJSON.error : 'An error occurred while saving your data.';
  220.                         toastr.error(errorMessage); 
  221.                     }
  222.                 });
  224.                 
  225.             });
  228.             const $questions = $('.question-item');
  229.             let currentQuestionIndex = 0;
  230.             let questionResponses = new Array($questions.length).fill(null).map(() => []); 
  232.             function showQuestion(index) {
  233.                 $questions.hide();
  234.                  var currentNumReponses = parseInt($($questions[index]).find('input[type="hidden"]').val());
  235.                 updateActiveStep(index);
  236.                 //console.log(currentNumReponses);
  237.                 $($questions[index]).show();
  238.                 
  239.             }
  241.             function checkNextButton() {
  242.                 $('.next-btn').prop('disabled', $('.edit-response-checkbox:checked').length === 0);
  243.             }
  245.             function calculateScore() {
  246.                 let scoreDetails = '';
  247.                 const url = '/findProfile';
  248.                 const requestData = JSON.stringify(questionResponses);
  250.                 for (let i = 0; i < questionResponses.length; i++) {
  251.                     const question = $questions.eq(i).find('.font-weight-bold').text();
  252.                     const selectedResponseIds = questionResponses[i];
  254.                     if (selectedResponseIds.length > 0) {
  255.                         let questionScoreDetails = `<p><strong>${question}</strong><br>`;
  257.                         for (const responseId of selectedResponseIds) {
  258.                             const responseText = $(`#editResponse${responseId}`).siblings('.form-check-label').text();
  259.                             questionScoreDetails += `- ${responseText}<br>`;
  260.                         }
  262.                         questionScoreDetails += '</p>';
  263.                         scoreDetails += questionScoreDetails;
  264.                     }
  265.                 }
  266.                     var buttonColor = $("#buttons-color").val();
  267.                   $.ajax({
  268.                     url: url,
  269.                     method: 'POST',
  270.                     data: requestData,
  271.                     contentType: 'application/json',
  272.                     success: function(response) {
  274.                         
  275.                         let scoreDetails = `
  276.                             
  277.                             <div class="justify-content-center mb-1 resultat1">
  278.                         `;
  279.                         var profileIds = [];
  280.                         var mostPointsProfile;
  281.                         let pointsData = {};
  282.                         for (let i = 0; i < response.length; i++) {
  283.                             const responseDetails = response[i];
  284.                             const profile = responseDetails.profile;
  285.                             const profileId = response[i].profile.id;
  286.                             profileIds.push(profileId);
  288.                             
  289.                             const points = responseDetails.points;
  290.                             pointsData[profileId] = points;
  292.                             if (profile) {
  293.                                 const responseNumber = i + 1;
  294.                                 const profileNumber = responseDetails.points === 0 ? 'aucun' : responseDetails.points;
  296.                                 let profileCardClass = 'winnerprofile';
  297.                                 if (i === 0) {
  298.                                     profileCardClass += ' winner'; 
  299.                                 }
  301.                                  const showPoints = responseDetails.testModeEnabled; 
  302.                                 console.log(showPoints);
  304.                                 let pointsHtml = '';
  305.                                 if (showPoints) {
  306.                                     pointsHtml = `<p class="profile-points">Points: ${responseDetails.points}</p>`;
  307.                                 }
  309.                                 //mostPointsProfile = responseProfiles[0];
  310.                              
  311.                                scoreDetails += `
  312.                                     <div class="mb-4">
  313.                                         <div class="${profileCardClass}">
  314.                                             <h3>${ i === 0 ? "Votre profil dominant" : "Mais aussi..."}</h3>
  315.                                             <div class="profile-details winner-profile}">
  316.                                                 <div class="profile-picture">
  317.                                                     <img class="winner-picture ${i === 0 ? ' resultat1_image' : 'resultat_secondaire_image'}" style="width: 280px ; height: 280px"' src="{{ asset('uploads/profils/${profile.imageProfil}') }}" alt="${profile.nomProfil}">
  318.                                                 </div>
  319.                                                 <div class="${i === 0 ? 'profile-info resultat1_texte' : 'profile-info resultat_secondaire_texte'}">
  320.                                                     <h5 class="profile-name">${profile.nomProfil}</h5>
  321.                                                     <p class="profile-description">${profile.textCourt}</p>
  322.                                                     ${pointsHtml}
  323.                                                 </div>
  324.                                                 ${i === 0 ? '<div class="winner-icon"><i class="fas fa-trophy"></i></div>' : ''}
  325.                                             </div>
  326.                                         </div>
  327.                                     </div>
  328.                                 `;
  330.                                 if (i === 0) {
  331.                                     scoreDetails += `
  332.                                         </div>
  333.                                         <div class="justify-content-around">
  334.                                     `;
  335.                                 }
  336.                             }
  337.                         }
  338.                         console.log(pointsData)
  339.                         scoreDetails += `
  340.                             </div> <br>
  341.                             <p class="text-muted">Vous voulez en savoir plus? Souhaitez vous avoir un rapport complet et des conseils liés a votre résultat? Rien de plus facile !
  342.                             renseigner vos coordonnées ci desous, un conseillé Akoya va vous recontacter trés vite !</p>
  343.                         `;
  345.                          var profilesData = JSON.stringify(pointsData);
  346.                         //$('#profilesDataContainer').text(profilesData);
  347.                         // Add the user data form here
  348.                         scoreDetails += `
  349.                         <form class="userDataForm ml-1 mt-5">
  350.                             <h3>Informations personnelles :</h3>
  351.                            <div id="profilesDataContainer" style="display: none;">${profilesData}</div>
  352.                             <div class="form-row">
  353.                                 <div class="form-group col-3">
  354.                                     <label for="nom">Nom* :</label>
  355.                                     <input type="text" class="form-control" id="nom" name="nom">
  356.                                 </div>
  357.                                 <div class="form-group col-3">
  358.                                     <label for="prenom">Prénom* :</label>
  359.                                     <input type="text" class="form-control" id="prenom" name="prenom">
  360.                                 </div>
  361.                                 <div class="form-group col-3">
  362.                                     <label for="societe">Société :</label>
  363.                                     <input type="text" class="form-control" id="societe" name="societe">
  364.                                 </div>
  365.                                 <div class="form-group col-3">
  366.                                     <label for="telephone">Téléphone* :</label>
  367.                                     <input type="tel" class="form-control" id="telephone" name="telephone">
  368.                                 </div>
  369.                             </div>
  370.                             <div class="form-group">
  371.                                 <label for="email">Adresse e-mail* :</label>
  372.                                 <input type="email" class="form-control" id="email" name="email">
  373.                             </div>
  374.                             <div class="form-check">
  375.                                 <input type="checkbox" class="form-check-input" id="acceptData" name="acceptData">
  376.                                 <label class="form-check-label" for="acceptData">J'accepte que mes données ci-dessus soient enregistrées et conservées pour une durée de 12 mois par AKOYA. 
  377.                                 Je peux à tout moment contacter AKOYA par email contact@akoya-academie.fr pour demander la suppresison de mes données</label>
  378.                             </div><br>
  379.                             <div class="form-check">
  380.                                 <input type="checkbox" class="form-check-input" id="contactMe" name="contactMe">
  381.                                 <label class="form-check-label" for="contactMe">Je souhaite être contacté(e) par Akoya pour approfondir mon résultat</label>
  382.                             </div><br>
  383.                             <button type="submit" style="background: ${buttonColor} !important;" class="btn text-white">Valider</button>
  384.                         </form>
  385.                     `;
  386.                     
  387.                         $('.body').html(scoreDetails);
  388.                         $('.progress-container').hide();
  389.                         $('.image-container').hide();
  390.                         $('.after').removeClass('d-none');
  391.                     },
  392.                     error: function(xhr, textStatus, errorThrown) {
  393.                         // Handle error if the AJAX request fails
  394.                         console.log('Error:', errorThrown);
  395.                     }
  396.                 });
  397.             }
  399.            function nextQuestion() {
  402.                 const selectedResponses = $('.edit-response-checkbox:checked').map(function() {
  403.                     const responseId = $(this).data('response-id');
  404.                     const repNumber = $(this).data('rep-number');
  405.                     console.log(responseId, repNumber);
  406.                     return { responseId, repNumber };
  407.                 }).get();
  409.                 //const currentNumReponses = parseInt($('.question-item.active').data('num-responses'));
  411.                 if (selectedResponses.length === 0) {
  412.                     toastr.error("Vous devez sélectionner au moins une réponse avant de passer à la question suivante.");
  413.                     return;
  414.                 }
  416.                 const totalSelectedReps = selectedResponses.map(response => response.repNumber);
  417.                 const hasUnexpectedRepNumber = selectedResponses.some(response => response.repNumber);
  419.                 console.log(totalSelectedReps.length, );
  420.                 if (totalSelectedReps.length !== totalSelectedReps[0]) {
  421.                     toastr.error("Vous devez sélectionner exactement " + totalSelectedReps[0] + " réponse(s) pour cette question.");
  422.                     return;
  423.                 }
  427.                 questionResponses[currentQuestionIndex] = selectedResponses.map(response => response.responseId);
  430.                 // Uncheck all checkboxes before moving to the next question
  431.                 $('.edit-response-checkbox').prop('checked', false);
  433.                 if (currentQuestionIndex < $questions.length - 1) {
  434.                     showQuestion(currentQuestionIndex + 1); 
  435.                     currentQuestionIndex++;
  436.                     $('.next-btn').prop('disabled', true);
  437.                     checkNextButton();
  438.                     updateActiveStep(currentQuestionIndex);
  439.                 } else {
  440.                     calculateScore();
  441.                 }
  442.             }
  444.             // Show the first question initially
  445.             showQuestion(currentQuestionIndex);
  447.             $('.edit-response-checkbox').on('change', function() {
  448.                 checkNextButton();
  449.             });
  451.             $('.next-btn').on('click', function() {
  452.                 nextQuestion();
  453.             });
  457.            function updateActiveStep(index) {
  458.                 $('.step').removeClass('active');
  459.                 $('.step:nth-child(' + (index + 1) + ')').addClass('active');
  460.             }
  461.     
  462.         });
  464.     </script>
  465. </body>
  466. </html>