templates/school/index.html.twig line 1

Open in your IDE?
  1. {% extends 'layout/frontEndLayout.html.twig' %}
  3. {% block name %}
  4. Welcome to LiveEdu
  38. {% endblock %}
  40. {% block body %}
  42. <div id="carouselExampleControls" class="carousel slide bs-slider box-slider" data-ride="carousel" data-pause="hover" data-interval="false">
  43. <!-- Indicators -->
  44. <ol class="carousel-indicators">
  45. <li data-target="#carouselExampleControls" data-slide-to="0" class="active"></li>
  46. <li data-target="#carouselExampleControls" data-slide-to="1"></li>
  47. <li data-target="#carouselExampleControls" data-slide-to="2"></li>
  48. </ol>
  49. <div class="carousel-inner" role="listbox" data-ride="carousel"
  50. data-interval="5000">
  51. <div class="carousel-item active">
  52. <div id="home" class="first-section" style="background-image:url({{ asset('assets/images/slider-01.jpg') }});">
  53. <div class="dtab">
  54. <div class="container">
  55. <div class="row">
  56. <div class="col-md-12 col-sm-12 text-right">
  57. <div class="big-tagline">
  58. <h2>
  59. Bilingual Secondary Institute BETHESDA implements
  93. <strong>
  99. LiveEdu
  128. </strong>
  129. </h2>
  131. </div>
  132. </div>
  133. </div>
  134. <!-- end row -->
  135. <br/>
  136. <br/>
  137. <br/>
  138. <br/>
  139. <br/>
  140. <br/>
  141. <br/>
  142. <br/>
  143. <br/>
  144. <br/>
  145. <br/>
  146. <br/>
  147. <br/>
  148. <br/>
  149. </div>
  150. <!-- end container -->
  151. </div>
  152. </div>
  153. <!-- end section -->
  155. </div>
  156. <div class="carousel-item">
  157. <div id="home" class="first-section" style="background-image:url({{ asset('assets/images/slider-02.jpg') }});">
  158. <div class="dtab">
  159. <div class="container">
  160. <div class="row">
  161. <div class="col-md-12 col-sm-12 text-left">
  162. <div class="big-tagline">
  163. <h2 data-animation="animated zoomInRight">
  164. LiveEdu
  198. <strong>
  199. software online services
  232. </strong>
  233. </h2>
  235. </div>
  236. </div>
  237. </div>
  238. <!-- end row -->
  239. <br/>
  240. <br/>
  241. <br/>
  242. <br/>
  243. <br/>
  244. <br/>
  245. <br/>
  246. <br/>
  247. <br/>
  248. <br/>
  249. <br/>
  250. <br/>
  251. <br/>
  252. <br/>
  253. </div>
  254. <!-- end container -->
  255. </div>
  256. </div>
  257. <!-- end section -->
  258. </div>
  259. <div class="carousel-item">
  260. <div id="home" class="first-section" style="background-image:url({{ asset('assets/images/slide_04.PNG') }});">
  261. <div class="dtab">
  262. <div class="container">
  263. <div class="row">
  264. <div class="col-md-12 col-sm-12 text-left">
  265. <div class="big-tagline">
  266. <h2 data-animation="animated zoomInRight">
  300. <strong>
  301. LiveEdu adds transparancy
  334. </strong>
  335. for quality education
  368. </h2>
  370. </div>
  371. </div>
  372. </div>
  373. <!-- end row -->
  374. <br/>
  375. <br/>
  376. <br/>
  377. <br/>
  378. <br/>
  379. <br/>
  380. <br/>
  381. <br/>
  382. <br/>
  383. <br/>
  384. <br/>
  385. <br/>
  386. <br/>
  387. <br/>
  388. </div>
  389. <!-- end container -->
  390. </div>
  391. </div>
  392. <!-- end section -->
  393. </div>
  394. <!-- Left Control -->
  395. <a class="new-effect carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
  396. <span class="fa fa-angle-left" aria-hidden="true"></span>
  397. <span class="sr-only">
  398. Previous
  431. </span>
  432. </a>
  434. <!-- Right Control -->
  435. <a class="new-effect carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
  436. <span class="fa fa-angle-right" aria-hidden="true"></span>
  437. <span class="sr-only">
  438. Next
  471. </span>
  472. </a>
  473. </div>
  474. </div>
  476. <section class="card">
  477. <article class="row card-body" id="officialExams">
  478. <h1 class="card-title text-center">Taux de reussite aux examens officiels session 2023-2024</h1>
  479. {% for key in results|keys %}
  480. <div class="col-6 col-md-3 " >
  481. <canvas id={{key}} height="120" data-exam-objects=" {{results[key]}}"></canvas>
  482. </div>
  483. {% endfor %}
  484. </article>
  486. </section>
  488. {% endblock %}
  489. {% block javascripts %}
  490. {{ parent() }}
  491. <script type="text/javascript">
  492. //Generate a random color
  493. const randomRgbColor = (type) => {
  494. let r = Math.floor(Math.random() * 256); // Random between 0-255
  495. let g = Math.floor(Math.random() * 256); // Random between 0-255
  496. let b = Math.floor(Math.random() * 256); // Random between 0-255
  497. if(type==="ECHEC"){
  498. r = 128+ Math.floor(Math.random() * 128);
  499. b =0;
  500. } else {
  501. r = 0;
  502. b = 128+ Math.floor(Math.random() * 128);
  503. }
  504. return 'rgb(' + r + ',' + g + ',' + b + ')';
  505. };
  506. const colors=[], datasets = [];
  508. const troisiemeAllExamsGraph = $("#troisiemeall"), troisiemeEspExamsGraph = $("#troisiemeesp") ,
  509. premiereCExamsGraph = $("#premiere_c"), premiereDExamsGraph = $("#premiere_d") ,
  510. premiereAEspExamsGraph = $("#premierea4esp"), premiereAAllExamsGraph = $("#premierea4all"),
  511. terminaleCExamsGraph = $("#terminalec"), terminaleDExamsGraph = $("#terminale_d") ,
  512. terminaleAEspExamsGraph = $("#terminaleaesp"), terminaleAAllExamsGraph = $("#terminaleaall"),
  513. formvArtExamsGraph = $("#formvarts"), formvScienceExamsGraph = $("#formvscience")
  514. ;
  516. const troisiemeAllExamsData = troisiemeAllExamsGraph.data('examObjects'), troisiemeEspExamsData = troisiemeEspExamsGraph.data('examObjects'),
  517. premiereCExamsData = premiereCExamsGraph.data('examObjects'), premiereDExamsData = premiereDExamsGraph.data('examObjects'),
  518. premiereAEspExamsData = premiereAEspExamsGraph.data('examObjects'), premiereAAllExamsData = premiereAAllExamsGraph.data('examObjects'),
  519. terminaleCExamsData = terminaleCExamsGraph.data('examObjects'), terminaleDExamsData = terminaleDExamsGraph.data('examObjects'),
  520. terminaleAEspExamsData = terminaleAEspExamsGraph.data('examObjects'), terminaleAAllExamsData = terminaleAAllExamsGraph.data('examObjects'),
  521. formvArtExamsData = formvArtExamsGraph.data('examObjects'),formvScienceExamsData = formvScienceExamsGraph.data('examObjects');
  530. // Draw the graph of official exam results
  531. const drawCanvas = (examData, examGraph, name) => {
  532. // console.log(examData, examGraph, name)
  533. JSON.parse(examData)['mentionCategories'].map(cat => {
  534. colors.push(randomRgbColor(cat));
  535. });
  536. const examChart = new Chart(examGraph, {
  537. type: "polarArea",
  538. data: {
  539. labels: JSON.parse(examData)["mentionCategories"] ,
  540. datasets: [{
  541. data: JSON.parse(examData)["mentionCountCategories"],
  542. backgroundColor: colors
  543. }]
  544. },
  545. options: {
  546. plugins: {
  547. is3D : true,
  548. title: {
  549. display: true,
  550. text: name,
  551. font: {
  552. size: 16,
  553. family: 'Helvetica Neue',
  554. },
  555. position: 'bottom',
  556. }
  557. }
  558. }
  559. });
  560. }
  562. // Disposition des canVas dans le frontEnd
  563. drawCanvas(terminaleDExamsData,terminaleDExamsGraph , "Terminale D" );
  564. drawCanvas(terminaleCExamsData,terminaleCExamsGraph , "Terminale C" );
  565. drawCanvas(terminaleAAllExamsData,terminaleAAllExamsGraph , "Terminale A All" );
  566. drawCanvas(terminaleAEspExamsData,terminaleAEspExamsGraph , "Terminale A Esp" );
  567. drawCanvas(premiereAAllExamsData,premiereAAllExamsGraph , "Premiere A All" );
  568. drawCanvas(premiereAEspExamsData,premiereAEspExamsGraph , "Premiere A Esp" );
  569. drawCanvas(premiereCExamsData,premiereCExamsGraph , "Premiere C" );
  570. drawCanvas(premiereDExamsData,premiereDExamsGraph , "Premiere D" );
  571. drawCanvas(troisiemeAllExamsData,troisiemeAllExamsGraph , "Troisieme All" );
  572. drawCanvas(troisiemeEspExamsData,troisiemeEspExamsGraph , "Troisieme Esp" );
  573. drawCanvas(formvArtExamsData,formvArtExamsGraph , "FORM 5 Art(.../5)" );
  574. drawCanvas(formvScienceExamsData,formvScienceExamsGraph , "FORM 5 Science(../5)" );
  588. </script>
  590. {% endblock javascripts %}