{% extends 'layout/frontEndLayout.html.twig' %}
{% block name %}
Welcome to LiveEdu
{% endblock %}
{% block body %}
<div id="carouselExampleControls" class="carousel slide bs-slider box-slider" data-ride="carousel" data-pause="hover" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleControls" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleControls" data-slide-to="1"></li>
<li data-target="#carouselExampleControls" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox" data-ride="carousel"
data-interval="5000">
<div class="carousel-item active">
<div id="home" class="first-section" style="background-image:url({{ asset('assets/images/slider-01.jpg') }});">
<div class="dtab">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 text-right">
<div class="big-tagline">
<h2>
Bilingual Secondary Institute BETHESDA implements
<strong>
LiveEdu
</strong>
</h2>
</div>
</div>
</div>
<!-- end row -->
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<!-- end container -->
</div>
</div>
<!-- end section -->
</div>
<div class="carousel-item">
<div id="home" class="first-section" style="background-image:url({{ asset('assets/images/slider-02.jpg') }});">
<div class="dtab">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 text-left">
<div class="big-tagline">
<h2 data-animation="animated zoomInRight">
LiveEdu
<strong>
software online services
</strong>
</h2>
</div>
</div>
</div>
<!-- end row -->
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<!-- end container -->
</div>
</div>
<!-- end section -->
</div>
<div class="carousel-item">
<div id="home" class="first-section" style="background-image:url({{ asset('assets/images/slide_04.PNG') }});">
<div class="dtab">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 text-left">
<div class="big-tagline">
<h2 data-animation="animated zoomInRight">
<strong>
LiveEdu adds transparancy
</strong>
for quality education
</h2>
</div>
</div>
</div>
<!-- end row -->
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<!-- end container -->
</div>
</div>
<!-- end section -->
</div>
<!-- Left Control -->
<a class="new-effect carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="fa fa-angle-left" aria-hidden="true"></span>
<span class="sr-only">
Previous
</span>
</a>
<!-- Right Control -->
<a class="new-effect carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="fa fa-angle-right" aria-hidden="true"></span>
<span class="sr-only">
Next
</span>
</a>
</div>
</div>
<section class="card">
<article class="row card-body" id="officialExams">
<h1 class="card-title text-center">Taux de reussite aux examens officiels session 2023-2024</h1>
{% for key in results|keys %}
<div class="col-6 col-md-3 " >
<canvas id={{key}} height="120" data-exam-objects=" {{results[key]}}"></canvas>
</div>
{% endfor %}
</article>
</section>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script type="text/javascript">
//Generate a random color
const randomRgbColor = (type) => {
let r = Math.floor(Math.random() * 256); // Random between 0-255
let g = Math.floor(Math.random() * 256); // Random between 0-255
let b = Math.floor(Math.random() * 256); // Random between 0-255
if(type==="ECHEC"){
r = 128+ Math.floor(Math.random() * 128);
b =0;
} else {
r = 0;
b = 128+ Math.floor(Math.random() * 128);
}
return 'rgb(' + r + ',' + g + ',' + b + ')';
};
const colors=[], datasets = [];
const troisiemeAllExamsGraph = $("#troisiemeall"), troisiemeEspExamsGraph = $("#troisiemeesp") ,
premiereCExamsGraph = $("#premiere_c"), premiereDExamsGraph = $("#premiere_d") ,
premiereAEspExamsGraph = $("#premierea4esp"), premiereAAllExamsGraph = $("#premierea4all"),
terminaleCExamsGraph = $("#terminalec"), terminaleDExamsGraph = $("#terminale_d") ,
terminaleAEspExamsGraph = $("#terminaleaesp"), terminaleAAllExamsGraph = $("#terminaleaall"),
formvArtExamsGraph = $("#formvarts"), formvScienceExamsGraph = $("#formvscience")
;
const troisiemeAllExamsData = troisiemeAllExamsGraph.data('examObjects'), troisiemeEspExamsData = troisiemeEspExamsGraph.data('examObjects'),
premiereCExamsData = premiereCExamsGraph.data('examObjects'), premiereDExamsData = premiereDExamsGraph.data('examObjects'),
premiereAEspExamsData = premiereAEspExamsGraph.data('examObjects'), premiereAAllExamsData = premiereAAllExamsGraph.data('examObjects'),
terminaleCExamsData = terminaleCExamsGraph.data('examObjects'), terminaleDExamsData = terminaleDExamsGraph.data('examObjects'),
terminaleAEspExamsData = terminaleAEspExamsGraph.data('examObjects'), terminaleAAllExamsData = terminaleAAllExamsGraph.data('examObjects'),
formvArtExamsData = formvArtExamsGraph.data('examObjects'),formvScienceExamsData = formvScienceExamsGraph.data('examObjects');
// Draw the graph of official exam results
const drawCanvas = (examData, examGraph, name) => {
// console.log(examData, examGraph, name)
JSON.parse(examData)['mentionCategories'].map(cat => {
colors.push(randomRgbColor(cat));
});
const examChart = new Chart(examGraph, {
type: "polarArea",
data: {
labels: JSON.parse(examData)["mentionCategories"] ,
datasets: [{
data: JSON.parse(examData)["mentionCountCategories"],
backgroundColor: colors
}]
},
options: {
plugins: {
is3D : true,
title: {
display: true,
text: name,
font: {
size: 16,
family: 'Helvetica Neue',
},
position: 'bottom',
}
}
}
});
}
// Disposition des canVas dans le frontEnd
drawCanvas(terminaleDExamsData,terminaleDExamsGraph , "Terminale D" );
drawCanvas(terminaleCExamsData,terminaleCExamsGraph , "Terminale C" );
drawCanvas(terminaleAAllExamsData,terminaleAAllExamsGraph , "Terminale A All" );
drawCanvas(terminaleAEspExamsData,terminaleAEspExamsGraph , "Terminale A Esp" );
drawCanvas(premiereAAllExamsData,premiereAAllExamsGraph , "Premiere A All" );
drawCanvas(premiereAEspExamsData,premiereAEspExamsGraph , "Premiere A Esp" );
drawCanvas(premiereCExamsData,premiereCExamsGraph , "Premiere C" );
drawCanvas(premiereDExamsData,premiereDExamsGraph , "Premiere D" );
drawCanvas(troisiemeAllExamsData,troisiemeAllExamsGraph , "Troisieme All" );
drawCanvas(troisiemeEspExamsData,troisiemeEspExamsGraph , "Troisieme Esp" );
drawCanvas(formvArtExamsData,formvArtExamsGraph , "FORM 5 Art(.../5)" );
drawCanvas(formvScienceExamsData,formvScienceExamsGraph , "FORM 5 Science(../5)" );
</script>
{% endblock javascripts %}