Hi everyone so for a school project the teacher asked us to create a survey in HTML and js.
I've already created the layout with checkboxes but now I would like to link those checkboxes to the chart when the user clicks on the submit button.
sidenote : my HTML class is in French so if anyone speaks french i think it'll be easier for you to understand but any help would be appreciated
here is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Questionnaire Style De Coaching</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<title>JavaScript Chart on COVID-19 Data</title>
<script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-base.min.js"></script>
</head>
<body>
<header>
<nav>
<div class="menu">
<div class="titre">
<h1>PROFIL PERSONNEL</h1>
<h2>Les styles de coaching</h2>
</div>
</div>
</nav>
</header>
<main>
<p>Selectioner une ou plusieures options:
</p>
<div class="questionnaire">
<section class="sect">
<h1>1. Vos collaborateurs n'ont pas ete sensibles a vos conversations amicales et a vos attentions concernant leurs conditions de travail. La qualite et le respect des details sont en chute libre. </h1>
<input type="checkbox" id="A1" name="Q1" value="A">
<label for="A1">Pour chacun, vous precisez sa zone de responsabilite, les procedures adequates et les details. Vous lui demandez fermement des respecter et obtenez son accord.</label><br>
<input type="checkbox" id="A2" name="Q1" value="B">
<label for="A2">Vous reunissez le groupe pour retablir la situation. Vous reconnaissez les capacites et la qualite de chacun et faites appel a leur esprit d'equipe.</label><br>
<input type="checkbox" id="A3" name="Q1" value="C">
<label for="A3">Vous effecturez, avec chacun de vos collaborateurs, une analyse detaillee de ses resultats. Puis vous fixez, avec leur accord, des objectif et des delais realistes.</label><br>
<input type="checkbox" id="A4" name="Q1" value="D">
<label for="A4">Vous n'intervenez pas en tant que responsable. Au cours d'une reunion informelle, vous faites remarquer cependant: "Si les choses continuent comme ca, il faudra bientot qu'on fasse toutes les petites annonces". </label>
</section>
<section class="sect">
<h1>2. Les resultats de l'equipe s'ameliorent. Chacun de vos collaborateurs est conscient des normes et des objectifs qu'il doit attendre et vous souhaitez vous assurer que la progression se prosuit.</h1>
<input type="checkbox" id="B1" name="Q2" value="A">
<label for="B1">Vous engagez un dialogue avec chacun pour le feliciter de l'amelioration de ses resutats, et vous assurez un suivi precis des normes et des objectifs a attendre.</label><br>
<input type="checkbox" id="B2" name="Q2" value="B">
<label for="B2">Vous vous dites que vous n'avez pas de raison d'intervenir et vous investissez ce temps dans une recherche creative de nouvelles astuces de rentabilite. Vous participez aux reunions.</label><br>
<input type="checkbox" id="B3" name="Q2" value="C">
<label for="B3">Lors d'une reunion, vous declarez votre satisfaction d'appartenir a une equipe de cette qualite et votre certitude que chacun continuera a s'investir pour le bien commun.</label><br>
<input type="checkbox" id="B4" name="Q2" value="D">
<label for="B4">Vous soulignez a chacun les progres. Vous rappelez l'importamce des delais et de la tache a accomplir</label>
</section>
<section class="sect">
<h1>3. Le groupe manifeste des difficultes a resoudre un probleme dans son champ de responsabilite. Par ailleurs, la performance du groupe et les relations interpesonnelles sont bonnes.</h1>
<input type="checkbox" id="C1" name="Q2" value="A">
<label for="C1">Vous proposez puis organisez une reunion de resolutions de problemes, que vous animez, en veillant a ce qu'elle reste centree sur les objectifs definis.</label><br>
<input type="checkbox" id="C2" name="Q2" value="B">
<label for="C2">Dans l'ensemble, vous trouvez que "ca tourne rond". Cependant, au cours d'entretiens spontanes, vous proposez differents solutions. </label><br>
<input type="checkbox" id="C3" name="Q2" value="C">
<label for="C3">Vous prenez des mesures correctives et vous deonnz de nouvelles instructions qui obtiennent l'accord de vos collaborateurs. </label><br>
<input type="checkbox" id="C4" name="Q2" value="D">
<label for="C4">Vous valorisez le bon esprit de votre equipe et l'encouragez a travailler sur le probleme. Vous vous declarez disponible pour une intervention eventuelle.</label>
</section>
<section class="sect">
<h1>4. Une nouvelle procedure doit etre mise en oeuvre dans votre service. Le climat dans l'equipe et les resultats de vos collaborateurs sont bons. Ils acceptent et comprennent bien les avantage de ce changement.</h1>
<input type="checkbox" id="D1" name="Q2" value="A">
<label for="D1">Vous provoquiez une reunion pour conserver ce climat et stimulez de facon positive chacun de vos collaborateurs.</label><br>
<input type="checkbox" id="D2" name="Q2" value="B">
<label for="D2">Vous soulignez l'importamce de ce changement et annoncez que vous en surveillerez la mise en oeuvre et le suivi.</label><br>
<input type="checkbox" id="D3" name="Q2" value="C">
<label for="D3">Vous leur dites que vous etes sur que "cela va marcher", et leur demandez qu'ils determinent donc leurs propres orienations. Pendant ce temps vous vous centrez sur les implications de ce changement.</label><br>
<input type="checkbox" id="D4" name="Q2" value="D">
<label for="D4">Au cours d'entretiens individuels, vous demandez a vos collaborateurs de vous faire part de leurs suggestions afin de reflechir aux implications de cette modification.</label>
</section>
<section class="sect">
<h1>5. La performance du groupe baisse depuis plusieurs mois. Les membres de l'equipe se deseteressent des objectifs communs. Il vous faut continuellement leur rappeler de tenir les delais. Dans le passe, la redefinition des fonctions a permis d'ameliorer la situation.</h1>
<input type="checkbox" id="E1" name="Q2" value="A">
<label for="E1">Vous dites a votre equipe : "j'ai vu la concurrence hier. Ils m'ont dit "heureusement qu'on vous a" " .Puis vous demandez une reunion pour remetre les pendules a l'heure.</label><br>
<input type="checkbox" id="E2" name="Q2" value="B">
<label for="E2">Vous recevez chacun de vos collaborateurs pour redefinir avec lui ses fonctions, puis, au cours d'une d'une reunion de travail, vous batissez, avec eux, une procedure de suivi des objectifs communs.</label><br>
<input type="checkbox" id="E3" name="Q2" value="C">
<label for="E3">Vous convoquez vos collaborateurs un par un, vous leur reprecisez leur zone de responsabilite et leurs objectifs. Vous en surveillez la mise en oeuvre.</label><br>
<input type="checkbox" id="E4" name="Q2" value="D">
<label for="E4">Vous partagez avec votre equipe votre vision pessimiste de la situation. Puis, vous les associez a une definition globale des objectifs et des fonctions pour les remotiver. </label>
</section>
<section class="sect">
<h1>6. Vous etes nomme responsable d'une unite de travail qui etait auparavant dirigee de facon tres efficace et trop directive a votre gout. Tout en maintenant la productivite, vous souhaitez humainiser les rapports de travail.</h1>
<input type="checkbox" id="F1" name="Q2" value="A">
<label for="F1">Vous reconnaissez les merites de chacun et ce qu'il apporte au groupe, et entreprenez une action de "cohesion d'equipe" pour que le groupe se sente utile et que chacun s'y sente biena sa place.</label><br>
<input type="checkbox" id="F2" name="Q2" value="B">
<label for="F2">En attendant de bien comprendre la situation relationnelle, vous insistez sur l'importamce de delais et de l'action a accomplir. </label><br>
<input type="checkbox" id="F3" name="Q2" value="C">
<label for="F3">Vous modulez vos interventions de facon creative eb fonction des reaction de chacun face a vote nouvelle nomination.</label><br>
<input type="checkbox" id="F4" name="Q2" value="D">
<label for="F4">Vous commencez a associer chacun aux decisions le concernant puis mellez au point, en groupe, une procedure de gestion des resultats en fonction des objectifs.</label>
</section>
<section class="sect">
<h1>7. Vous envisagez des changement majuers dans la struture de votre equipe. Certains membres du groupe ont fait des suggestions positives concernant ces changement. De plus, l'ensemble a, jusque la, demontre une bonne capacite d'adaptation dans ses activites quotidiennes.</h1>
<input type="checkbox" id="G1" name="Q2" value="A">
<label for="G1">Vous tenez comple des suggestions faites et definissez a chacun les modifications de poste envisages. Vous annoncez que vous surpervisez la mise en oeuvre.</label><br>
<input type="checkbox" id="G2" name="Q2" value="B">
<label for="G2">Apres vous etre assure de l'adhesion de l'ensemble du groupe aux changement, vous l'incitez a en organiser la mise en oeuvre. Vous leur dites que vous leur faites pleinnent confiance. </label><br>
<input type="checkbox" id="G3" name="Q2" value="C">
<label for="G3">Vous tenez comple, objctivement, des propositions concretes qui vous sont et seront suggerees tout en assurant la coherence de l'ensemblede l'action.</label><br>
<input type="checkbox" id="G4" name="Q2" value="D">
<label for="G4">Hors hierarchie, vous participez aux reunions habituelles et donnez spontannement toutes vos idees.</label>
</section>
<section class="sect">
<h1>8. La performance technique du groupe et les relations interpersonnelles sont bonnes.</h1>
<input type="checkbox" id="H1" name="Q2" value="A">
<label for="H1">C'est une situation de reve! Vous etes pret pret a vous intergrer au groupe en tant qu'apporteur d'idees, mais vous le laissez travailler tranquille et imaginez de nouveaux debouches. Vous profitez de chaque occasion pour stimuler le groupe avec des idees astucieuses de developpement.</label><br>
<input type="checkbox" id="H2" name="Q2" value="B">
<label for="H2">Vous reunissez votre groupe et, les ayant felicites individuellement pour leurs performances, vous les associez a une etude d'efficacite acrue. </label><br>
<input type="checkbox" id="H3" name="Q2" value="C">
<label for="H3">Vous donnez les instructions necessaires pour la mise en oeuvre de nouvelles technique de production jugees plus perfomantes a long terme.</label><br>
<input type="checkbox" id="H4" name="Q2" value="D">
<label for="H4">Lors d'une reunion, vous montrez votre satisfaction du client qui regne au sein de l'equipe et vous faites part de votre plaisir d'appartenir a un groupe de cette qualite.</label>
</section>
<section class="sect">
<h1>9. Votre superieur vous a charge de diriger un comite qui doit faire des propositions de changement relatif aux methodes de production. Le groupe ne voit pas clairement ses objectifs, l'absenteisme aux sessions est eleve, et les reunions ont pris un caractere mondain. Les membre du groupe ont cependent toutes les capacites necessaires pour mener a bien cete qu'on leur a confiee. </h1>
<input type="checkbox" id="I1" name="Q2" value="A">
<label for="I1">Vous faites monter du the et des petits fours et vous dites au comite que si tout le monde a l'air de se desinteresser de la chose, autant que l'on passe un bon momment ensemble, avant le naufrage! Apres cela, vous decrivez la situation et demandez qu'on s'y mette serieusement.</label><br>
<input type="checkbox" id="I2" name="Q2" value="B">
<label for="I2">Vous faites, par note individuelle a chacun des membres du comite, un descriptif detaille de la situation assorti de vos reflexions puis vous les reunissez pour recueillir leurs suggestions et demarrer une nouvelle procedure de travail efficace. </label><br>
<input type="checkbox" id="I3" name="Q2" value="C">
<label for="I3">Vous rappelez le comite a l'ordre et donnez a chacun de ses membres des objectifs et des delais precis. Vous annoncez qu'ils seront controles de facon suivie.</label><br>
<input type="checkbox" id="I4" name="Q2" value="D">
<label for="I4">Pour preparer la reunion suivante, vous profitez de rencontres occasionnelles pour manifester votre inquietude et faire appel a leur esprit de groupe pour repartir du bon pied.</label>
</section>
<section class="sect">
<h1>10. Vos collaborateurs qui prennent habituellement a coeur leurs responsabilites ne semblent pas prets a adherer a vos recentes redefinition des fonctions.</h1>
<input type="checkbox" id="J1" name="Q2" value="A">
<label for="J1">Vous montrez que vous etes conscient de leurs inquietudes faceaux recentes redefinitions de fonction et vous les impliquez progressivement dans la mise en oeuvre du changement afin que chacun s'y sente a l'aise.</label><br>
<input type="checkbox" id="J2" name="Q2" value="B">
<label for="J2">Vous reaffirmez votre position, vous donnez des instructions claires et obtenez l'engagement de mise en application.</label><br>
<input type="checkbox" id="J3" name="Q2" value="C">
<label for="J3">Vous reagissez immediatement. Vous leur dites la semaine derniere, vous aviez des collaborateurs de tout premier plan mais que la direction a du les changer sans vous en avertr car vous ne les reconnaissez plus, que s'ils voulaient bien reprendre leur personnalite d'orgine, ils remettraient rapidement les choses sur rail!</label><br>
<input type="checkbox" id="J4" name="Q2" value="D">
<label for="J4">Vous expliquez dans le detail la necessite du changement. Vous recueillez et prenez en comple les suggestions de chacun et veillez au respect des nouvelles definitions.</label>
</section>
<section class="sect">
<h1>11. Vous venez d'etre nomme dans une nouvelle fonction. Votre predecesseur intervenait peu aupres de son equipe. Le groupe semble faire correctement son travail et les relations sont bonnes.</h1>
<input type="checkbox" id="K1" name="Q2" value="A">
<label for="K1">Afin de "prendre en mains" cette nouvelle equipe, vous prenez les mesures necessaires pour mettre en oeuvre vos methodes de travail.</label><br>
<input type="checkbox" id="K2" name="Q2" value="B">
<label for="K2">Vous associez l'ensemble de vos collaborateurs aux decisions et soutenez leurs bonnes initiatives. </label><br>
<input type="checkbox" id="K3" name="Q2" value="C">
<label for="K3">Vous analysez, avec chacun, la qualite de ses performances, puis vous etudiez, dans le detail, l'utillite d'adopter de nouvelles methodes de travail.</label><br>
<input type="checkbox" id="K4" name="Q2" value="D">
<label for="K4">Il n'y a aucune raison de bousculer tout ca. Vous continuez de laisser le groupe travailler par lui-meme. Occasionnellement, vous faites part de vos idees d'amelioration.</label>
</section>
<section class="sect">
<h1>12. Des informations recentes montrent qu'ild existe des difficultes dans votre equipe. Le groupe a, dans le passe, prove sa capacite a resoudre les probleme tout en maintement une bonne ambiance. De plus, chacun est competient a son poste. </h1>
<input type="checkbox" id="L1" name="Q2" value="A">
<label for="L1">Vous menez une equite aupres de chacun de vos collaborateurs pour bien cerner les difficultes puis, ensemble, vous etudiez les solutions possibles et choississez la plus performante.</label><br>
<input type="checkbox" id="L2" name="Q2" value="B">
<label for="L2">C'est pour vous l'occasion revee de vraimnet deleguer. Vous veillez au grain mais vous les laissez se debrouiller.</label><br>
<input type="checkbox" id="L3" name="Q2" value="C">
<label for="L3">Vous prenez rapidement les mesures necessaires pour retablir la situation, vous donnez de nouvelles instructionset obtenez l'accord du groupe.</label><br>
<input type="checkbox" id="L4" name="Q2" value="D">
<label for="L4">Vous faites savoir que vous etes au courant de leurs difficultes et que vous leur fautes confiance. D'ailleurs, vous leur rappelez que par le passe, ils s'etaient bien sortis d'affaires.</label>
</section>
</div>
</main>
<div class="boutton-soumetre">
<input type="button" id="boutton" onclick="show()" value="Voir mes resulats" class="resultats"></input>
</div>
<div id="showDiv" style="display: none;">
<div id="container" style="width: 100%; height: 100%;"></div>
<script>
anychart.onDocumentReady(function() {
// create the data
var data = {
header: ["Country", "Number of cases"],
rows: [
["voir", 337072],
["entendre", 131646],
["sentir", 128948]
]};
// create the column chart
var chart = anychart.column();
// add the data
chart.data(data);
// set the container
chart.container("container");
// draw the chart
chart.draw();
});
</script>
</div>
<button type="button" class="btnsave" style="display: none;">Sauvegarder</button>
<footer>
<p class="noms">Developper par Juneid Gaffar, Dieudonne Omba, Boulaid Boudada</p>
<p class="copyright">© College la cite</p>
</footer>
<script src="./js/main.js"></script>
</body>
</html>
And here is a picture of what the teacher asks us to to :
Thank you