templates/school/index.html.twig line 1

Open in your IDE?
  1. {% extends 'layout/frontEndLayout.html.twig' %}
  3. {% block name %}
  4. Welcome to LiveEdu
  6. {% endblock %}
  8. {% block body %}
  10. <div id="carouselExampleControls" class="carousel slide bs-slider box-slider" data-ride="carousel" data-pause="hover" data-interval="false">
  11. <!-- Indicators -->
  12. <ol class="carousel-indicators">
  13. <li data-target="#carouselExampleControls" data-slide-to="0" class="active"></li>
  14. <li data-target="#carouselExampleControls" data-slide-to="1"></li>
  15. <li data-target="#carouselExampleControls" data-slide-to="2"></li>
  16. </ol>
  17. <div class="carousel-inner" role="listbox" data-ride="carousel"
  18. data-interval="5000">
  19. <div class="carousel-item active">
  20. <div id="home" class="first-section" style="background-image:url({{ asset('assets/images/slider-01.jpg') }});">
  21. <div class="dtab">
  22. <div class="container">
  23. <div class="row">
  24. <div class="col-md-12 col-sm-12 text-right">
  25. <div class="big-tagline">
  26. <h2>
  27. Bilingual Secondary Institute BETHESDA implements
  61. <strong>
  67. LiveEdu
  96. </strong>
  97. </h2>
  99. </div>
  100. </div>
  101. </div>
  102. <!-- end row -->
  103. <br/>
  104. <br/>
  105. <br/>
  106. <br/>
  107. <br/>
  108. <br/>
  109. <br/>
  110. <br/>
  111. <br/>
  112. <br/>
  113. <br/>
  114. <br/>
  115. <br/>
  116. <br/>
  117. </div>
  118. <!-- end container -->
  119. </div>
  120. </div>
  121. <!-- end section -->
  123. </div>
  124. <div class="carousel-item">
  125. <div id="home" class="first-section" style="background-image:url({{ asset('assets/images/slider-02.jpg') }});">
  126. <div class="dtab">
  127. <div class="container">
  128. <div class="row">
  129. <div class="col-md-12 col-sm-12 text-left">
  130. <div class="big-tagline">
  131. <h2 data-animation="animated zoomInRight">
  132. LiveEdu
  166. <strong>
  167. software online services
  200. </strong>
  201. </h2>
  203. </div>
  204. </div>
  205. </div>
  206. <!-- end row -->
  207. <br/>
  208. <br/>
  209. <br/>
  210. <br/>
  211. <br/>
  212. <br/>
  213. <br/>
  214. <br/>
  215. <br/>
  216. <br/>
  217. <br/>
  218. <br/>
  219. <br/>
  220. <br/>
  221. </div>
  222. <!-- end container -->
  223. </div>
  224. </div>
  225. <!-- end section -->
  226. </div>
  227. <div class="carousel-item">
  228. <div id="home" class="first-section" style="background-image:url({{ asset('assets/images/slide_04.PNG') }});">
  229. <div class="dtab">
  230. <div class="container">
  231. <div class="row">
  232. <div class="col-md-12 col-sm-12 text-left">
  233. <div class="big-tagline">
  234. <h2 data-animation="animated zoomInRight">
  268. <strong>
  269. LiveEdu adds transparancy
  302. </strong>
  303. for quality education
  336. </h2>
  338. </div>
  339. </div>
  340. </div>
  341. <!-- end row -->
  342. <br/>
  343. <br/>
  344. <br/>
  345. <br/>
  346. <br/>
  347. <br/>
  348. <br/>
  349. <br/>
  350. <br/>
  351. <br/>
  352. <br/>
  353. <br/>
  354. <br/>
  355. <br/>
  356. </div>
  357. <!-- end container -->
  358. </div>
  359. </div>
  360. <!-- end section -->
  361. </div>
  362. <!-- Left Control -->
  363. <a class="new-effect carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
  364. <span class="fa fa-angle-left" aria-hidden="true"></span>
  365. <span class="sr-only">
  366. Previous
  399. </span>
  400. </a>
  402. <!-- Right Control -->
  403. <a class="new-effect carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
  404. <span class="fa fa-angle-right" aria-hidden="true"></span>
  405. <span class="sr-only">
  406. Next
  439. </span>
  440. </a>
  441. </div>
  442. </div>
  444. <section class="card">
  445. <article class="row card-body" id="officialExams">
  446. <h1 class="card-title text-center">Taux de reussite aux examens officiels session {{year.code}}</h1>
  447. {% for key in results|keys %}
  448. <div class="col-6 col-md-3 " >
  449. <canvas id={{key}} height="120" data-exam-objects=" {{results[key]}}"></canvas>
  450. </div>
  451. {% endfor %}
  452. </article>
  454. </section>
  456. {% endblock %}
  457. {% block javascripts %}
  458. {{ parent() }}
  459. <script type="text/javascript">
  460. //Generate a random color
  461. const randomRgbColor = (type) => {
  462. if (type === "ECHEC") {
  463. return "rgb(255,0,0)"; // rouge pur
  464. } else {
  465. // Couleurs aléatoires pour les autres
  466. let r = Math.floor(Math.random() * 256);
  467. let g = Math.floor(Math.random() * 256);
  468. let b = Math.floor(Math.random() * 256);
  469. return `rgb(${r},${g},${b})`;
  470. }
  471. ;
  473. };
  474. const colors=[], datasets = [];
  476. const troisiemeAllExamsGraph = $("#troisiemeall"), troisiemeEspExamsGraph = $("#troisiemeesp") ,
  477. premiereCExamsGraph = $("#premiere_c"), premiereDExamsGraph = $("#premiere_d") ,
  478. premiereAEspExamsGraph = $("#premierea4esp"), premiereAAllExamsGraph = $("#premierea4all"),
  479. terminaleCExamsGraph = $("#terminalec"), terminaleDExamsGraph = $("#terminale_d") ,
  480. terminaleAEspExamsGraph = $("#terminaleaesp"), terminaleAAllExamsGraph = $("#terminaleaall"),
  481. formvArtExamsGraph = $("#formvarts"), formvScienceExamsGraph = $("#formvscience")
  482. ;
  484. const troisiemeAllExamsData = troisiemeAllExamsGraph.data('examObjects'), troisiemeEspExamsData = troisiemeEspExamsGraph.data('examObjects'),
  485. premiereCExamsData = premiereCExamsGraph.data('examObjects'), premiereDExamsData = premiereDExamsGraph.data('examObjects'),
  486. premiereAEspExamsData = premiereAEspExamsGraph.data('examObjects'), premiereAAllExamsData = premiereAAllExamsGraph.data('examObjects'),
  487. terminaleCExamsData = terminaleCExamsGraph.data('examObjects'), terminaleDExamsData = terminaleDExamsGraph.data('examObjects'),
  488. terminaleAEspExamsData = terminaleAEspExamsGraph.data('examObjects'), terminaleAAllExamsData = terminaleAAllExamsGraph.data('examObjects'),
  489. formvArtExamsData = formvArtExamsGraph.data('examObjects'),formvScienceExamsData = formvScienceExamsGraph.data('examObjects');
  493. // Draw the graph of official exam results
  494. // Draw the graph of official exam results
  495. const drawCanvas = (examData, examGraph, name) => {
  496. // Parser une seule fois au lieu de 3
  497. const parsedData = JSON.parse(examData);
  499. // Convertir explicitement en nombres
  500. const values = parsedData["mentionCountCategories"].map(v => Number(v));
  502. // Vérifier si des valeurs sont invalides
  503. console.log("➡️ Graph:", name, "Labels:", parsedData["mentionCategories"], "Values:", values);
  505. // Générer les couleurs
  506. const colors = parsedData["mentionCategories"].map(cat => randomRgbColor(cat));
  508. // Créer le graphe
  509. const examChart = new Chart(examGraph, {
  510. type: "doughnut",
  511. data: {
  512. labels: parsedData["mentionCategories"],
  513. datasets: [{
  514. data: values,
  515. backgroundColor: colors
  516. }]
  517. },
  518. options: {
  519. cutout: "70%",
  520. plugins: {
  521. title: {
  522. display: true,
  523. text: name,
  524. font: {
  525. size: 16,
  526. family: 'Helvetica Neue',
  527. },
  528. position: 'bottom',
  529. }
  530. }
  531. }
  532. });
  533. };
  536. // Disposition des canVas dans le frontEnd
  537. drawCanvas(terminaleDExamsData,terminaleDExamsGraph , "Terminale D" );
  538. drawCanvas(terminaleCExamsData,terminaleCExamsGraph , "Terminale C" );
  539. drawCanvas(terminaleAAllExamsData,terminaleAAllExamsGraph , "Terminale A All" );
  540. drawCanvas(terminaleAEspExamsData,terminaleAEspExamsGraph , "Terminale A Esp" );
  541. drawCanvas(premiereAAllExamsData,premiereAAllExamsGraph , "Premiere A All" );
  542. drawCanvas(premiereAEspExamsData,premiereAEspExamsGraph , "Premiere A Esp" );
  543. drawCanvas(premiereCExamsData,premiereCExamsGraph , "Premiere C" );
  544. drawCanvas(premiereDExamsData,premiereDExamsGraph , "Premiere D" );
  545. drawCanvas(troisiemeAllExamsData,troisiemeAllExamsGraph , "Troisieme All" );
  546. drawCanvas(troisiemeEspExamsData,troisiemeEspExamsGraph , "Troisieme Esp" );
  547. drawCanvas(formvArtExamsData,formvArtExamsGraph , "FORM 5 Art(.../5)" );
  548. drawCanvas(formvScienceExamsData,formvScienceExamsGraph , "FORM 5 Science(../5)" );
  562. </script>
  564. {% endblock javascripts %}