Avoid header duplicates, clean CSS

master
Aurelien Labate 3 years ago
parent f5fc65b087
commit 58e5a50e4a
  1. 53
      a_propos.php
  2. 268
      aide.php
  3. 202
      assets/css/aide.css
  4. 85
      assets/css/exemples.css
  5. 894
      assets/css/stylesheet.css
  6. BIN
      assets/img/help/schema_algo.png
  7. BIN
      assets/img/programm/editor/onglet_deroulant.png
  8. BIN
      assets/img/programm/editor/onglet_deroulant_selection.png
  9. BIN
      assets/img/programm/editor/support_menus.png
  10. 25
      assets/js/compil1.js
  11. 16
      assets/js/execution.js
  12. 203
      assets/js/interface.js
  13. 2
      assets/js/jquery/jquery.cleditor.js
  14. 4
      assets/js/traduction.js
  15. 103
      exemples.php
  16. 26
      includes/bas_de_page.php
  17. 21
      includes/config.php
  18. 35
      includes/footer.php
  19. 44
      includes/header.php
  20. 3
      includes/init.php
  21. 12
      includes/menu.php
  22. 253
      index.php

@ -1,38 +1,21 @@
<?php
require_once('includes/config.php');
$page_title = 'À propos';
require_once('includes/header.php');
?>
<!DOCTYPE html>
<html id="top">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="assets/css/aide.css" />
<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css" />
<script type="text/javascript" src="assets/js/jquery/jquery.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="assets/img/theme/favicon_ie.ico">
<title>Festiv'Algo - A propos</title>
<meta name="keywords" content="festivalgo, Festiv'Algo, algobox, site, application gratuite, nitrosax, algorithme, algorithmique, programmation, Casio, TI, HP, apprendre, bac, mathématiques, ROC, nouveaux programmes, réformes" />
<meta name="description" content="Vidéo de présentation de Festiv'Algo, une application pédagogique d'initiation à l'algorithmique dans l'esprit des nouveaux programmes de mathématiques. Une interface simple et interactive, des exemples, un tutoriel et un forum pour toutes vos questions." />
</head>
<body>
<div id="content">
<?php require_once("includes/menu.php"); ?>
<div id="contenu">
<article style="position: inherit;">
<iframe style="margin-top: 20px;" width="420" height="315" src="https://www.youtube.com/embed/8vJ-A4QNS1c" frameborder="0"></iframe>
<br /><br /><br /><h2>Evènements :</h2>
<div class="paragraphes">
<ul>
<li>27/12/19 : Suppression des fonctionnalités non utilisé pour alléger le cout de maintenance.</li>
<li>20/04/13 : Mise en ligne du site.</li>
<li>9/05/13 : Correction des problèmes de position du curseur dans l'onglet principal.</li>
<li>20/05/13 : Ajout de la coloration syntaxique pour le debuggage.</li>
<li>14/12/13 : Changement de serveur et remise en ligne du site après un mois d'indisponibilité.</li>
</ul>
</div>
</article>
</div>
<article id="about_page">
<iframe width="420" height="315" src="https://www.youtube.com/embed/8vJ-A4QNS1c" frameborder="0"></iframe>
<h2>Evènements :</h2>
<div class="text_block">
<ul>
<li>27/12/19 : Suppression des fonctionnalités non utilisé pour alléger le cout de maintenance.</li>
<li>20/04/13 : Mise en ligne du site.</li>
<li>9/05/13 : Correction des problèmes de position du curseur dans l'onglet principal.</li>
<li>20/05/13 : Ajout de la coloration syntaxique pour le debuggage.</li>
<li>14/12/13 : Changement de serveur et remise en ligne du site après un mois d'indisponibilité.</li>
</ul>
</div>
</body>
<?php require_once("includes/bas_de_page.php"); ?>
</html>
</article>
<?php
require_once('includes/footer.php');
?>

@ -1,113 +1,167 @@
<?php
require_once('includes/config.php');
$page_title = 'Aide';
require_once('includes/header.php');
?>
<!DOCTYPE html>
<html id="top">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="assets/css/aide.css" />
<script type="text/javascript" src="assets/js/jquery/jquery.js"></script>
<script type="text/javascript" src="assets/js/compil1.js"></script>
<script type="text/javascript" src="assets/js/compil2.js"></script>
<script type="text/javascript" src="assets/js/execution.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="assets/img/theme/favicon_ie.ico">
<title>Festiv'Algo - Aide pour la programmation d'algorithmes. Tutoriel d'algorithmique, TI Basic et Basic Casio.</title>
<meta name="keywords" content="festivalgo, algobox, tutoriel, aide, algorithme, algorithmique, programmation, Casio, TI, HP, apprendre, bac, mathématiques, ROC, nouveaux programmes, réformes" />
<meta name="description" content="Initiation simple et claire à l'algorithmique pour le Bac, dans l'esprit des nouveaux programmes de mathématiques." />
</head>
<article id="help_page">
<div class="layout_float">
<div>
<h2>&bull; Qu'est-ce qu'un <em>algorithme</em> ?</h2>
<p class="text_block">
Le mot <em>"algorithme"</em> vient du nom du mathématicien Persan <strong>Al-Khuwarizmi</strong>, qui inventa une méthode, au début du IXème siècle, pour résoudre des équations pas à pas.<br />
Un <em>algorithme</em> est une suite d'opérations appliquées dans un ordre donné.
</p>
</div>
<img src="assets/img/help/schema_algo.png" title="Schéma des 3 phases d'un algorithme" alt="Schéma d'un algorithme" />
</div>
<h2>&bull; Variables et affectation</h2>
<div class="text_block">
<p>
Dans un <em>algorithme</em>, on commence par <strong>l'entrée des données</strong>. Chacune de ces données est stockée dans la mémoire de la <strong>calculatrice</strong> ou de l'<strong>ordinateur</strong> à un emplacement nommé <strong>variable</strong> et est repérée par une lettre.<br />
Les <strong>instructions</strong> que l'on peut pratiquer avec une <strong>variable</strong> sont :
</p>
<p>
- <strong><b>la saisie</b></strong> : on demande à l'utilisateur de donner une valeur à une <strong>variable</strong>.
</p>
<div class="code_example_container">
<div class="code_example code_algo">
Saisir A
<small>Algorithme</small>
</div>
<div class="code_example code_casio">
? &rarr; A
<small>Casio</small>
</div>
<div class="code_example code_ti">
Input A
<small>TI</small>
</div>
</div>
<div class="code_result">
<span>Exécution :</span>
<input onkeypress='if(event.keyCode == 13) lire("a", 1, 0, 1);' autofocus size='7' maxlength='10' id='lire1' placeholder='A =' required rows='1' cols='5'/>
</div>
<p>
- <strong><b>l'affectation</b></strong> : on donne à la <strong>variable</strong> une certaine valeur ou le résultat d'un calcul.
</p>
<div class="code_example_container">
<div class="code_example code_algo">
A Prend_la_valeur 3 * 5
<small>Algorithme</small>
</div>
<div class="code_example code_casio">
3 * 5 &rarr; A
<small>Casio</small>
</div>
<div class="code_example code_ti">
3 * 5 &rarr; A
<small>TI</small>
</div>
</div>
<p>
- <strong><b>l'affichage</b></strong> : on affiche le contenu de la <strong>variable</strong>.
</p>
<div class="code_example_container">
<div class="code_example code_algo">
Afficher A
<small>Algorithme</small>
</div>
<div class="code_example code_casio">
A&ang;
<small>Casio</small>
</div>
<div class="code_example code_ti">
Disp A
<small>TI</small>
</div>
</div>
<div class="code_result">
<span>Exécution :</span>
15
</div>
</div>
<div class="layout_float">
<div>
<h2>&bull; Les conditions</h2>
<p class="text_block">
La résolution de certains problèmes conduit parfois à une situation dans laquelle la décision prise est soumise à <strong>condition</strong>.<br />
Si la <strong>condition</strong> est vérifiée, on effectue une première tâche, sinon on effectue une seconde tâche.
</p>
</div>
<img src="assets/img/help/schema_condition.png" title="Schéma d'une condition" alt="Schéma d'une condition" />
</div>
<div class="text_block">
<div class="code_example_container">
<div class="code_example code_algo">
Si A = 1<br />Alors ...<br />(Sinon ...)<br />Fin_si
<small>Algorithme</small>
</div>
<div class="code_example code_casio">
If A = 1<br />Then ...<br />(Else ...)<br />IfEnd
<small>Casio</small>
</div>
<div class="code_example code_ti">
If A = 1<br />Then ...<br />(Else ...)<br />End
<small>TI</small>
</div>
</div>
<p>Le "<em>Sinon</em>" n'est pas systématique. Sans cette <strong>instruction</strong>, si la <strong>condition</strong> n'est pas vérifiée, la tâche n'est pas effectuée et l'<em>algorithme</em> passe à l'<strong>instruction</strong> suivante.</p>
</div>
<h2>&bull; Les boucles</h2>
<div class="text_block">
<p>
Pendant l'<strong>exécution</strong> d'un <em>programme</em>, il est possible d'avoir à réaliser plusieurs fois de suites la même tâche.<br />
Il existe deux types de <strong>boucles</strong> :
</p>
<p>
- <strong><b>la boucle conditionelle</b></strong> : on répète les mêmes <strong>instructions</strong> tant qu'une <strong>condition</strong> est remplie.
</p>
<div class="code_example_container">
<div class="code_example code_algo">
Tant_que A = 1<br />...<br />...<br />Fin_tant_que
<small>Algorithme</small>
</div>
<div class="code_example code_casio">
While A = 1<br />...<br />...<br />End
<small>Casio</small>
</div>
<div class="code_example code_ti">
While A = 1<br />...<br />...<br />WhileEnd
<small>TI</small>
</div>
</div>
<body>
<div id="content" style="padding-bottom: 130px">
<?php require_once("includes/menu.php"); ?>
<article>
<div class="partie">
<h2>&bull; Qu'est-ce qu'un <mark>algorithme</mark> ?</h2>
<img id="schema_algo" src="assets/img/help/schema_algo.png" title="Schéma des 3 phases d'un algorithme" alt="Schéma d'un algorithme" />
<div class="paragraphes" id="par1">
Le mot <i>"<mark>algorithme</mark>"</i> vient du nom du mathématicien Persan <strong>Al-Khuwarizmi</strong>, qui inventa une méthode, au début du IXème siècle, pour résoudre des équations pas à pas.<br />
Un <mark>algorithme</mark> est une suite d'opérations appliquées dans un ordre donné.
</div>
</div>
<div class="partie">
<div class="titres">
<h2>&bull; Variables et affectation</h2>
</div>
<div class="paragraphes">
Dans un <mark>algorithme</mark>, on commence par <strong>l'entrée des données</strong>. Chacune de ces données est stockée dans la mémoire de la <strong>calculatrice</strong> ou de l'<strong>ordinateur</strong> à un emplacement nommé <strong>variable</strong> et est repérée par une lettre.<br />
Les <strong>instructions</strong> que l'on peut pratiquer avec une <strong>variable</strong> sont :<br /><br />
- <strong><b>la saisie</b></strong> : on demande à l'utilisateur de donner une valeur à une <strong>variable</strong>.<br />
<div class="exemples_code">
<div class="code_algo"><b>Saisir A</b></div><span class="type_algo"><strong>Algorithme</strong></span><div class="code_casio"><b>? &rarr; A</b></div><span class="type_casio"><strong>Casio</strong></span><div class="code_ti"><b>Input A</b></div><span class="type_ti"><strong>TI</strong></span>
<div class="resultats_code"><p class="resultats_title">Exécution :</p><div class="resultats_content">
<input onkeypress='if(event.keyCode == 13) lire("a", 1, 0, 1);' autofocus size='7' maxlength='10' id='lire1' placeholder='A =' required rows='1' cols='5'>
</div>
</div>
</div>
<br/>
- <strong><b>l'affectation</b></strong> : on donne à la <strong>variable</strong> une certaine valeur ou le résultat d'un calcul.<br />
<div class="exemples_code">
<div class="code_algo"><b>A Prend_la_valeur 3 * 5</b></div><span class="type_algo"><strong>Algorithme</strong></span><div class="code_casio"><b>3 * 5 &rarr; A</b></div><span class="type_casio"><strong>Casio</strong></span><div class="code_ti"><b>3 * 5 &rarr; A</b></div><span class="type_ti"><strong>TI</strong></span>
</div>
<br/>
- <strong><b>l'affichage</b></strong> : on affiche le contenu de la <strong>variable</strong>.
<div class="exemples_code">
<div class="code_algo"><b>Afficher A</b></div><span class="type_algo"><strong>Algorithme</strong></span><div class="code_casio"><b>A&ang;</b></div><span class="type_casio"><strong>Casio</strong></span><div class="code_ti"><b>Disp A</b></div><span class="type_ti"><strong>TI</strong></span>
<div class="resultats_code"><p class="resultats_title">Exécution :</p>
<div class="resultats_content">
15
</div>
</div>
</div>
</div>
</div>
<div class="partie">
<h2>&bull; Les conditions</h2>
<img id="schema_condition" src="assets/img/help/schema_condition.png" title="Schéma d'une condition" alt="Schéma d'une condition" />
<div class="paragraphes" id="par3">
La résolution de certains problèmes conduit parfois à une situation dans laquelle la décision prise est soumise à <strong>condition</strong>.<br />
Si la <strong>condition</strong> est vérifiée, on effectue une première tâche, sinon on effectue une seconde tâche.
</div>
<br /><br />
<div class="paragraphes">
<div class="exemples_code">
<div class="code_algo" id="code_condition"><b>Si A = 1<br />Alors ...<br />(Sinon ...)<br />Fin_si</b></div><span class="type_algo" id="type_condition"><strong>Algorithme</strong></span>
<div class="code_casio" id="code_condition"><b>If A = 1<br />Then ...<br />(Else ...)<br />IfEnd</b></div><span class="type_casio" id="type_condition"><strong>Casio</strong></span>
<div class="code_ti" id="code_condition"><b>If A = 1<br />Then ...<br />(Else ...)<br />End</b></div><span class="type_ti" id="type_condition"><strong>TI</strong></span>
</div>
Le "<em>Sinon</em>" n'est pas systématique. Sans cette <strong>instruction</strong>, si la <strong>condition</strong> n'est pas vérifiée, la tâche n'est pas effectuée et l'<mark>algorithme</mark> passe à l'<strong>instruction</strong> suivante.
</div>
</div>
<div class="partie">
<h2>&bull; Les boucles</h2>
<div class="paragraphes">
Pendant l'<strong>exécution</strong> d'un <mark>programme</mark>, il est possible d'avoir à réaliser plusieurs fois de suites la même tâche.<br />
Il existe deux types de <strong>boucles</strong> :<br /><br />
- <strong><b>la boucle conditionelle</b></strong> : on répète les mêmes <strong>instructions</strong> tant qu'une <strong>condition</strong> est remplie.
<div class="exemples_code">
<div class="code_algo" id="code_condition"><b>Tant_que A = 1<br />...<br />...<br />Fin_tant_que</b></div><span class="type_algo" id="type_condition"><strong>Algorithme</strong></span>
<div class="code_casio" id="code_condition"><b>While A = 1<br />...<br />...<br />End</b></div><span class="type_casio" id="type_condition"><strong>Casio</strong></span>
<div class="code_ti" id="code_condition"><b>While A = 1<br />...<br />...<br />WhileEnd</b></div><span class="type_ti" id="type_condition"><strong>TI</strong></span>
</div>
- <strong><b>la boucle itérative</b></strong> : on répète les mêmes <strong>instructions</strong> un certain nombre de fois.
<div class="exemples_code">
<div class="code_algo" id="code_condition"><b>Pour A Allant_de 0 à 10<br />...<br />...<br />Fin_pour</b></div><span class="type_algo" id="type_condition"><strong>Algorithme</strong></span>
<div class="code_casio" id="code_condition"><b>For 0 &rarr; A To 10<br />...<br />...<br />Next</b></div><span class="type_casio" id="type_condition"><strong>Casio</strong></span>
<div class="code_ti" id="code_condition"><b>For(A,0,10)<br />...<br />...<br />End</b></div><span class="type_ti" id="type_condition"><strong>TI</strong></span>
</div>
</div>
</div>
</article>
<div id="pub_aide">
<p>
- <strong><b>la boucle itérative</b></strong> : on répète les mêmes <strong>instructions</strong> un certain nombre de fois.
</p>
<div class="code_example_container">
<div class="code_example code_algo">
Pour A Allant_de 0 à 10<br />...<br />...<br />Fin_pour
<small>Algorithme</small>
</div>
<div class="code_example code_casio">
For 0 &rarr; A To 10<br />...<br />...<br />Next
<small>Casio</small>
</div>
<div class="code_example code_ti">
For(A,0,10)<br />...<br />...<br />End
<small>TI</small>
</div>
</div>
</div>
<?php require_once("includes/bas_de_page.php"); ?>
</body>
</html>
</article>
<?php
require_once('includes/footer.php');
?>

@ -1,202 +0,0 @@
#content
{
height: 2010px;
}
article
{
position: absolute;
width: 980px;
top: 285px;
left: 0px;
}
h2
{
font-family: 'Crete Round', serif;
font-size: 24px;
font-style: bold;
color: black;
text-align: left;
margin-left: 70px;
margin-bottom: 20px;
}
.partie
{
margin-bottom: 50px;
}
.paragraphes
{
text-align: justify;
background-color: #FFD745;
border: solid;
border-width: 4px;
border-radius: 5px;
border-color: #FAC801;
font-family: 'Crete Round', serif;
font-size: 16px;
font-style: none;
color: black;
padding: 5px 11px 7px 11px;
margin-left: 45px;
margin-right: 45px;
}
#par1
{
width: 455px;
}
#par3
{
width: 515px;
}
#schema_algo
{
float: right;
margin-left: 45px;
margin-right: 45px;
margin-top: -44px;
}
#schema_condition
{
float: right;
margin-left: 45px;
margin-right: 45px;
margin-top: -44px;
}
.exemples_code
{
margin-left: 25px;
margin-bottom: 10px;
}
#code_condition
{
height: 68px;
}
.code_algo
{
display: inline-block;
background-color: rgb(255, 84, 84);
width: 230px;
height: 22px;
border: solid;
border-radius: 14px;
border-width: 4px;
border-color: rgb(236, 10, 10);
font-family: Verdanna, Arial;
color: rgb(173, 0, 0);
font-size: 14px;
padding-left: 8px;
padding-top: 4px;
margin: 14px -40px 12px 0px;
}
.type_algo
{
font-family: 'Crete Round', serif;
position: relative;
right: 30px;
top: -6px;
font-size: 12px;
color: rgb(218, 7, 7);
}
.code_casio
{
display: inline-block;
background-color: rgb(145, 226, 99);
width: 230px;
height: 22px;
border: solid;
border-radius: 14px;
border-width: 4px;
border-color: rgb(66, 167, 66);
font-family: Verdanna, Arial;
color: rgb(62, 139, 10);
font-size: 14px;
padding-left: 8px;
padding-top: 4px;
margin: 14px -7px 12px 0px;
}
#type_condition
{
top: -54px;
}
.type_casio
{
font-family: 'Crete Round', serif;
position: relative;
right: 31px;
top: -6px;
font-size: 12px;
color: rgb(58, 173, 30);
}
.code_ti
{
display: inline-block;
background-color: rgb(155, 148, 248);
width: 230px;
height: 22px;
border: solid;
border-radius: 14px;
border-width: 4px;
border-color: rgb(60, 103, 167);
font-family: Verdanna, Arial;
color: rgb(40, 83, 175);
font-size: 14px;
padding-left: 8px;
padding-top: 4px;
margin: 14px -40px 12px 0px;
}
.type_ti
{
font-family: 'Crete Round', serif;
position: relative;
right: -19px;
top: -6px;
font-size: 12px;
color: rgb(12, 26, 99);
}
.resultats_code
{
width: 622px;
height: 45px;
background-color: #EED858;
border: solid;
border-width: 4px;
border-radius: 14px;
border-color: #D2A124;
font-family: 'Crete Round', serif;
padding: 0px 0px 8px 12px;
padding-left: 6px;
}
.resultats_title
{
font-size: 18px;
color: #DB7517;
margin-top: 0px;
}
.resultats_content
{
font-size: 15px;
color: #D29A17;
margin-top: -16px;
margin-left: 8px;
}

@ -1,85 +0,0 @@
article
{
margin-top: 30px;
}
h2
{
font-size: 24px;
font-style: bold;
color: black;
text-align: left;
margin: 10px 10px 20px 10px;
}
h4
{
font-size: 12px;
font-style: bold;
color: rgb(255, 143, 0);
text-align: left;
margin: 18px 10px 6px 10px;
}
#contenu
{
margin-top: 10px;
}
.exemples
{
text-align: justify;
background-color: #FFD745;
border: solid;
border-width: 4px;
border-radius: 5px;
border-color: #FAC801;
font-family: 'Crete Round', serif;
font-size: 16px;
font-style: none;
color: black;
padding: 5px 11px 7px 11px;
margin-left: 45px;
margin-right: 262px;
}
.auteur
{
font-size: 14px;
text-align: left;
margin: 0px 10px 10px 20px;
}
.description
{
font-size: 14px;
text-align: left;
margin: 0px 10px 10px 20px;
}
.cleditorMain
{
position: relative;
top: 0px;
left: 198px;
}
.tester
{
margin-left: 444px;
}
#code
{
width: 400px;
padding: 3px 0px 4px 8px;
margin-left: 198px;
font-family: 'Crete Round', serif;
color: rgb(206, 133, 4);
text-align: left;
border: solid;
border-width: 4px;
border-radius: 5px;
border-color: rgb(221, 147, 53);
background-color: rgb(247, 226, 119);
}

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 412 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 367 B

@ -1131,6 +1131,7 @@ function affiche_erreurs(code) {
var a;
affiche_debug();
let html_errors = '';
for(a = nb_erreurs - 1; a >= 0; a--)
{
@ -1139,37 +1140,37 @@ function affiche_erreurs(code) {
switch(erreur_syntaxe[4 * a + 2])
{
case "non_reconnu":
$("#debug_titre").after("<p class='erreurs'><span id='description_erreur'>&bull; ligne " + erreur_syntaxe[4 * a + 3] + " : expression \"" + erreur_syntaxe[4 * a + 1] + "\" non reconnue.</span><br /><img class='ampoule' src='assets/img/programm/ampoule.png'/><span id='suggestion_erreur'>Suggestion : vérifiez la syntaxe du mot.</span></p>");
html_errors += "<p class='erreurs'><span id='description_erreur'>&bull; ligne " + erreur_syntaxe[4 * a + 3] + " : expression \"" + erreur_syntaxe[4 * a + 1] + "\" non reconnue.</span><br /><img class='ampoule' src='assets/img/programm/ampoule.png'/><span id='suggestion_erreur'>Suggestion : vérifiez la syntaxe du mot.</span></p>";
expression = erreur_syntaxe[4 * a + 1];
break;
case "manquant":
$("#debug_titre").after("<p class='erreurs'><span id='description_erreur'>&bull; ligne " + erreur_syntaxe[4 * a + 3] + " : élément de syntaxe manquant.</span><br /><img class='ampoule' src='assets/img/programm/ampoule.png'/><span id='suggestion_erreur'>Suggestion : ajoutez " + erreur_syntaxe[4 * a] + ".</span></p>");
html_errors += "<p class='erreurs'><span id='description_erreur'>&bull; ligne " + erreur_syntaxe[4 * a + 3] + " : élément de syntaxe manquant.</span><br /><img class='ampoule' src='assets/img/programm/ampoule.png'/><span id='suggestion_erreur'>Suggestion : ajoutez " + erreur_syntaxe[4 * a] + ".</span></p>";
break;
case "tout":
$("#debug_titre").after("<p class='erreurs'><span id='description_erreur'>&bull; ligne " + erreur_syntaxe[4 * a + 3] + " : élément manquant.</span></p>");
html_errors += "<p class='erreurs'><span id='description_erreur'>&bull; ligne " + erreur_syntaxe[4 * a + 3] + " : élément manquant.</span></p>";
break;
case "instruction_illegale":
$("#debug_titre").after("<p class='erreurs'><span id='description_erreur'>&bull; ligne " + erreur_syntaxe[4 * a + 3] + " : instruction \"" + erreur_syntaxe[4 * a + 1] + "\" inadaptée au contexte.</span><br /><img class='ampoule' src='assets/img/programm/ampoule.png'/><span id='suggestion_erreur'>Suggestion : vérifiez vos " + erreur_syntaxe[4 * a + 4] + ".</span></p>");
html_errors += "<p class='erreurs'><span id='description_erreur'>&bull; ligne " + erreur_syntaxe[4 * a + 3] + " : instruction \"" + erreur_syntaxe[4 * a + 1] + "\" inadaptée au contexte.</span><br /><img class='ampoule' src='assets/img/programm/ampoule.png'/><span id='suggestion_erreur'>Suggestion : vérifiez vos " + erreur_syntaxe[4 * a + 4] + ".</span></p>";
expression = erreur_syntaxe[4 * a + 1];
break;
case "erreur_conditions":
$("#debug_titre").after("<p class='erreurs'><span id='description_erreur'>&bull; Erreur de conditions</span><br /><img class='ampoule' src='assets/img/programm/ampoule.png'/><span id='suggestion_erreur'>Suggestion : vérifiez vos conditions.</span></p>");
html_errors += "<p class='erreurs'><span id='description_erreur'>&bull; Erreur de conditions</span><br /><img class='ampoule' src='assets/img/programm/ampoule.png'/><span id='suggestion_erreur'>Suggestion : vérifiez vos conditions.</span></p>";
break;
case "erreur_boucles":
$("#debug_titre").after("<p class='erreurs'><span id='description_erreur'>&bull; Erreur de boucles</span><br /><img class='ampoule' src='assets/img/programm/ampoule.png'/><span id='suggestion_erreur'>Suggestion : vérifiez vos boucles.</span></p>");
html_errors += "<p class='erreurs'><span id='description_erreur'>&bull; Erreur de boucles</span><br /><img class='ampoule' src='assets/img/programm/ampoule.png'/><span id='suggestion_erreur'>Suggestion : vérifiez vos boucles.</span></p>";
break;
case "erreur_ti":
$("#debug_titre").after("<p class='erreurs'><span id='description_erreur'>&bull; Erreur de structure</span><br /><img class='ampoule' src='assets/img/programm/ampoule.png'/><span id='suggestion_erreur'>Suggestion : vérifiez vos conditions et vos boucles.</span></p>");
html_errors += "<p class='erreurs'><span id='description_erreur'>&bull; Erreur de structure</span><br /><img class='ampoule' src='assets/img/programm/ampoule.png'/><span id='suggestion_erreur'>Suggestion : vérifiez vos conditions et vos boucles.</span></p>";
break;
default:
$("#debug_titre").after("<p class='erreurs'><span id='description_erreur'>&bull; ligne " + erreur_syntaxe[4 * a + 3] + " : " + erreur_syntaxe[4 * a + 2] + " au contexte.</span><br /><img class='ampoule' src='assets/img/programm/ampoule.png'/><span id='suggestion_erreur'>Suggestion : remplacer \"" + erreur_syntaxe[4 * a + 1] + "\" par " + erreur_syntaxe[4 * a] + ".</span></p>");
html_errors += "<p class='erreurs'><span id='description_erreur'>&bull; ligne " + erreur_syntaxe[4 * a + 3] + " : " + erreur_syntaxe[4 * a + 2] + " au contexte.</span><br /><img class='ampoule' src='assets/img/programm/ampoule.png'/><span id='suggestion_erreur'>Suggestion : remplacer \"" + erreur_syntaxe[4 * a + 1] + "\" par " + erreur_syntaxe[4 * a] + ".</span></p>";
expression = erreur_syntaxe[4 * a + 1];
break;
}
@ -1177,20 +1178,24 @@ function affiche_erreurs(code) {
if(erreur_syntaxe[4 * a + 2] != "erreur_conditions" && erreur_syntaxe[4 * a + 2] != "erreur_boucles" && erreur_syntaxe[4 * a + 2] != "erreur_ti")
code = surligne_erreurs(code, erreur_syntaxe[4 * a + 3], expression);
}
if(html_errors) {
$('#programm #debug .debug_content').html(html_errors);
}
return code;
}
// affiche le "debug"
function affiche_debug() {
$('#execution').css('height', '85px');
$('#execution').hide();
$('#debug').show();
}
// cache le "debug"
function masque_erreurs() {
$('#execution').show();
$('#debug').hide();
$('#execution').css('height', '210px');
}
// efface le debug

@ -54,8 +54,8 @@ function execution(langage_source, nb) {
if(result == "failed")
return "failed";
$('#executer').hide();
$('#pause').show();
$('#programm .action_buttons .executer').hide();
$('#programm .action_buttons .pause').show();
reset_variables();
$("#saisie").cleditor()[0].disable(true);
@ -71,8 +71,8 @@ function instructions(nb, langage_source) {
{
if(pause == 1)
{
$('#executer').unbind('click');
$('#executer').click(function() {
$('#programm .action_buttons .executer').unbind('click');
$('#programm .action_buttons .executer').click(function() {
execution(langage_source, nb + 1);
});
@ -338,8 +338,8 @@ function instructions(nb, langage_source) {
{
display("<span id='fin_execution'>Fin de l'exécution</span>");
process = 0;
$('#pause').hide();
$('#executer').show();
$('#programm .action_buttons .pause').hide();
$('#programm .action_buttons .executer').show();
$("#saisie").cleditor()[0].disable(false);
}
}
@ -365,8 +365,8 @@ function lire(myvar, langage_source, nb, id) {
if(pause == 1)
{
$('#executer').hide();
$('#pause').show();
$('#programm .action_buttons .executer').hide();
$('#programm .action_buttons .pause').show();
}
pause = 0;

@ -4,7 +4,16 @@ var reset = 0;
var lire_pending = 0;
var langage_avant_publier = 1;
$(document).ready(function() {
const btn_conversion_algo = $('#programm .action_buttons .conversion_algo');
const btn_conversion_casio = $('#programm .action_buttons .conversion_casio');
const btn_conversion_ti = $('#programm .action_buttons .conversion_ti');
const btn_action_executer = $('#programm .action_buttons .executer');
const btn_action_pause = $('#programm .action_buttons .pause');
const btn_action_reset = $('#programm .action_buttons .reset');
var TIME = 600;
var langage = 1;
@ -23,31 +32,29 @@ $(document).ready(function() {
];
function affiche_conversion() {
$('#conversion_algo').show();
$('#conversion_casio').show();
$('#conversion_ti').show();
if(langage == 1)
{
$('#conversion_algo').hide();
$('#conversion_casio').css('bottom', '-70px').css('right', '264px');
$('#conversion_ti').css('bottom', '-216px').css('right', '450px');
btn_conversion_algo.hide();
btn_conversion_casio.show();
btn_conversion_ti.show();
}
else if(langage == 2)
{
$('#conversion_casio').hide();
$('#conversion_ti').css('bottom', '-70px').css('right', '450px');
$('#conversion_algo').css('bottom', '-216px').css('right', '264px');
btn_conversion_casio.hide();
btn_conversion_ti.show();
btn_conversion_algo.show();
}
else if(langage == 3)
{
$('#conversion_ti').hide();
$('#conversion_algo').css('bottom', '-70px').css('right', '264px');
$('#conversion_casio').css('bottom', '-216px').css('right', '450px');
btn_conversion_ti.hide();
btn_conversion_algo.show();
btn_conversion_casio.show();
}
return false;
}
function hide_langage() {
$('.langage_actuel').hide();
$('.current_language > span').hide();
}
function affiche_langage() {
@ -65,10 +72,10 @@ $(document).ready(function() {
function changement_langage() {
var result;
$('#conversion_algo').click(function(event) {
btn_conversion_algo.click(function(event) {
if(new Date().getTime() - time > TIME && process == 0)
{
$('#executer').unbind('click');
btn_action_executer.unbind('click');
time = new Date().getTime();
process = 1;
result = traduction(langage, 1, 1);
@ -84,10 +91,10 @@ $(document).ready(function() {
$("#saisie").cleditor()[0].disable(false);
}
});
$('#conversion_casio').click(function(event) {
btn_conversion_casio.click(function(event) {
if(new Date().getTime() - time > TIME && process == 0)
{
$('#executer').unbind('click');
btn_action_executer.unbind('click');
time = new Date().getTime();
process = 1;
result = traduction(langage, 2, 1);
@ -103,10 +110,10 @@ $(document).ready(function() {
$("#saisie").cleditor()[0].disable(false);
}
});
$('#conversion_ti').click(function(event) {
btn_conversion_ti.click(function(event) {
if(new Date().getTime() - time > TIME && process == 0)
{
$('#executer').unbind('click');
btn_action_executer.unbind('click');
time = new Date().getTime();
process = 1;
result = traduction(langage, 3, 1);
@ -125,11 +132,11 @@ $(document).ready(function() {
}
function init_boutons() {
$('#pause').hide();
btn_action_pause.hide();
}
function boutons() {
$('#executer').click(function() {
btn_action_executer.click(function() {
if(process == 0)
{
pause = 0;
@ -140,20 +147,20 @@ $(document).ready(function() {
}
if(lire_pending == 1 && pause == 1)
{
$('#executer').hide();
$('#pause').show();
btn_action_executer.hide();
btn_action_pause.show();
pause = 0;
document.getElementById("lire").focus();
}
});
$('#pause').click(function() {
$('#pause').hide();
$('#executer').show();
btn_action_pause.click(function() {
btn_action_pause.hide();
btn_action_executer.show();
pause = 1;
});
$('#reset').click(function() {
$('#pause').hide();
$('#executer').show();
btn_action_reset.click(function() {
btn_action_pause.hide();
btn_action_executer.show();
reset = 1;
process = 0;
execution_init();
@ -228,10 +235,8 @@ $(document).ready(function() {
}
}
function menus_deroulants_init() {
$('.onglet_deroulant').hide();
$('.instruction').hide();
$('#selection').hide();
function close_dropdown_menu() {
$('#dropdown_menu').hide();
}
function menus_deroulants_show() {
@ -239,8 +244,6 @@ $(document).ready(function() {
var iconeNb, indice_pointeur, ongletNb;
var id = $(this).attr('id');
$('#selection').hide();
if(id == 'entrees-sorties')
iconeNb = 0;
if(id == 'conditions')
@ -252,82 +255,47 @@ $(document).ready(function() {
indice_pointeur = indices[(langage - 1) * 4 + iconeNb];
ongletNb = indices[(langage - 1) * 4 + iconeNb + 1] - indice_pointeur;
menus_deroulants_init();
affiche_menu_deroulant(iconeNb, ongletNb, indice_pointeur);
selection(iconeNb, ongletNb, id, indice_pointeur);
menus_deroulants_hide(ongletNb, id);
});
let x = $(this).position().left;
// avoid overlapping the info box
if (iconeNb >= 3)
x = $(this).position().left + $(this).width() - 130
let y = $(this).position().top + $(this).height();
close_dropdown_menu();
show_dropdown(x, y, ongletNb, indice_pointeur);
add_instruction_events(ongletNb);
add_dropdown_close_events();
})
}
function menus_deroulants_hide(ongletNb, id, indice_pointeur) {
$('#support_menus, .cleditorMain').mouseenter(function() {
menus_deroulants_init();
function add_dropdown_close_events() {
$('.cleditorMain').mouseenter(function() {
close_dropdown_menu();
});
$('.top_buttons').mouseleave(() => {
close_dropdown_menu();
})
}
function affiche_menu_deroulant(iconeNb, ongletNb, indice_pointeur) {
var i;
$('.onglet_deroulant').css('left', 255 + 69 * iconeNb);
function show_dropdown(x, y, ongletNb, indice_pointeur) {
$('#dropdown_menu').hide();
$('#dropdown_menu').empty();
$('#dropdown_menu').css('top', y);
$('#dropdown_menu').css('left', x);
for(i = 1; i <= ongletNb; i++)
{
$('#onglet_deroulant' + i).show();
$('#instruction' + i).replaceWith("<p class='instruction' id='instruction" + i + "'>" + instructions[indice_pointeur + i - 1] + "</p>");
$('#instruction' + i).css('left', 261 + 69 * iconeNb).show();
$('#dropdown_menu').append('<li><a href="#" data-instruction-number="' + (indice_pointeur + i - 1) + '" class="instruction" id="instruction' + i + '">' + instructions[indice_pointeur + i - 1] + '</a></li>')
}
$('#dropdown_menu').show();
}
function Valeur_top(valeur_top) {
var onglet_click = 0;
switch(valeur_top)
{
case '-136px':
onglet_click = 1;
break;
case '-107px':
onglet_click = 2;
break;
case '-78px':
onglet_click = 3;
break;
case '-49px':
onglet_click = 4;
break;
case '-20px':
onglet_click = 5;
break;
case '9px':
onglet_click = 6;
break;
case '38px':
onglet_click = 7;
break;
case '67px':
onglet_click = 8;
break;
}
return onglet_click;
}
function selection(iconeNb, ongletNb, id, indice_pointeur) {
var i, valeur_top, onglet_click, text, syntaxe, test;
function add_instruction_events(ongletNb) {
var i, syntaxe;
for(i = 1; i <= ongletNb; i++)
{
$('#instruction' + i).mouseenter(function() {
valeur_top = $(this).css('top');
onglet_click = Valeur_top(valeur_top);
$('#selection').css('top', -155 + 29 * onglet_click)
.css('left', 255 + 69 * iconeNb)
.show();
text = instructions[indice_pointeur + onglet_click - 1];
let text = instructions[$(this).data('instruction-number')]
switch(text)
{
case 'Lire':
@ -479,19 +447,14 @@ $(document).ready(function() {
break;
}
$('#info_contenu').replaceWith("<span id='info_contenu'><h3 id='syntaxe_titre'>Syntaxe</h3>" + "<div id='syntaxe'>" + syntaxe + "</div></span>");
$('#infos').html(syntaxe);
});
}
$('.instruction').click(function() {
var num;
valeur_top = $(this).css('top');
menus_deroulants_init(id);
onglet_click = Valeur_top(valeur_top);
num = indice_pointeur + onglet_click - 1;
text = instructions[num];
let num = $(this).data('instruction-number');
let text = instructions[num]
close_dropdown_menu();
console.log(num)
if((num >= 16 && num <= 18) || num == 13 || (num >= 35 && num <= 37) || num == 49)
text += "()";
@ -500,12 +463,8 @@ $(document).ready(function() {
if(num == 32)
text = "()" + text;
/*if(text == "&ang;")
text = "&ang;";
if(text == "&rarr;")
text = "&rarr;";*/
addText(text + " ");
return false;
});
}
@ -534,9 +493,11 @@ $(document).ready(function() {
}
$("#saisie").cleditor().focus(); // transforme le textarea en éditeur html
$('#execution').show();
$('#debug').hide();
$('#disable').hide();
menus_deroulants_init('');
close_dropdown_menu();
affiche_langage();
changement_langage();
affiche_conversion();
@ -544,26 +505,10 @@ $(document).ready(function() {
boutons();
signes();
menus_deroulants_show();
copie_contenu();
default_code();
alert_mobile();
});
function copie_contenu() {
$('#publier').click(function() {
var texte;
if(langage_avant_publier == 1)
texte = document.getElementById('saisie').value;
else
texte = traduction(langage_avant_publier, 1, 0);
while(texte.indexOf(";") != -1)
texte = texte.replace(";","@");
createCookie("algorithme",texte,1);
});
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();

@ -36,7 +36,7 @@ $.cleditor = {
// Define the defaults used for all new cleditor instances
defaultOptions: {
width: 349, // width not including margins, borders or padding
width: 620, // width not including margins, borders or padding
height: 314, // height not including margins, borders or padding
controls: // controls to add to the toolbar
"undo redo | print",

@ -9,8 +9,8 @@ function traduction(langage_source, langage_cible, remplacer) {
"Valeur_absolue", "Abs", "Abs"
];
$('#pause').hide();
$('#executer').show();
$('#programm .action_buttons .pause').hide();
$('#programm .action_buttons .executer').show();
reset = 1;
process = 0;
execution_init();

@ -1,11 +1,12 @@
<?php
require_once('includes/config.php');
$page_title = 'Exemples d\'algorithmes';
require_once('includes/header.php');
$db_examples = [
[
'titre' => 'Algorithme d\'Euclide',
'auteur' => 'Nitrosax',
'description' => 'Calcule le Plus Grand Commun Diviseur entre deux nombres entiers.',
'description' => '<p>Calcule le Plus Grand Commun Diviseur entre deux nombres entiers.</p>',
'programme' => '<div>Lire A</div>
<div>Lire B</div>
<div>Tant_que B ≠ 0</div>
@ -19,7 +20,7 @@ $db_examples = [
[
'titre' => 'Plus ou moins',
'auteur' => 'Paul',
'description' => 'Petit jeu où il faut deviner un nombre.',
'description' => '<p>Petit jeu où il faut deviner un nombre.</p>',
'programme' => '<div>Afficher "Nombre maximal ?"</div>
<div>Lire A</div>
<div>A Prend_la_valeur Partie_entière (Hasard (a))</div>
@ -38,7 +39,7 @@ $db_examples = [
[
'titre' => 'Suite de Syracuse',
'auteur' => 'Nitrosax',
'description' => 'Affiche les termes de la suite de Syracuse en fonction du nombre de départ choisi par l\'utilisateur.',
'description' => '<p>Affiche les termes de la suite de Syracuse en fonction du nombre de départ choisi par l\'utilisateur.</p>',
'programme' => '<div>Lire A</div>
<div>Tant_que A &gt; 1</div>
<div>Si Partie_d&eacute;cimale (A/2) = 0</div>
@ -52,8 +53,8 @@ $db_examples = [
[
'titre' => 'Suite de Fibonacci',
'auteur' => 'Dark-Storm',
'description' => 'Cet algorithme calcule les N premiers termes de la suite de Fibonacci. N est rentré par l\'utilisateur.
La suite de Fibonacci sert à déterminer une approximation du nombre d\'Or en divisant un terme par le terme précédent.',
'description' => '<p>Cet algorithme calcule les N premiers termes de la suite de Fibonacci. N est rentré par l\'utilisateur.
La suite de Fibonacci sert à déterminer une approximation du nombre d\'Or en divisant un terme par le terme précédent.</p>',
'programme' => '<div>A Prend_la_valeur 0</div>
<div>B Prend_la_valeur 1</div>
<div>C Prend_la_valeur 0</div>
@ -68,8 +69,8 @@ La suite de Fibonacci sert à déterminer une approximation du nombre d\'Or en d
[
'titre' => 'Suite géométrique',
'auteur' => 'domPayeur',
'description' => 'Une toute petite contribution pour essayer Festiv\'Algo.
Le programme génère les termes u_1, u_2 ... u_n d\'une suite géométrique avec un rappel de cours.',
'description' => '<p>Une toute petite contribution pour essayer Festiv\'Algo.</p>
<p>Le programme génère les termes u_1, u_2 ... u_n d\'une suite géométrique avec un rappel de cours.</p>',
'programme' => '<div>Afficher " Programme suite géométrique"</div>
<div>Afficher " Un+1=q* Un"</div>
<div>Afficher " Un=Uo*q^n"</div>
@ -88,12 +89,15 @@ Le programme génère les termes u_1, u_2 ... u_n d\'une suite géométrique ave
], [
'titre' => 'Méthode de Monte Carlo ',
'auteur' => 'domPayeur',
'description' => 'Le hasard et la loi des grands nombres (ou stabilisation de la fréquence) pour déterminer une valeur approchée de PI.
Le principe:
Un point est généré de manière aléatoire dans un carré de côté 1.
On calcule la distance séparant ce point de l\'un des sommets du carré.
Si cette distance est inférieure à 1, le point est alors à l\'intérieur du quart de disque de rayon 1 ayant pour centre ce sommet.
L\'aire du quart de disque est Pi/4 et la fréquence d\'apparition du point dans ce quart de disque se stabilise pour un grand nombre de lancers autour de la valeur théorique qui est la probabilité de cet événement: ici le rapport aire du quart de disque / aire du carré soit ( Pi/4)/1 donc Pi/4; il ne reste plus qu\'à multiplier par 4 pour obtenir une valeur approchée de Pi.',
'description' => '
<p>Le hasard et la loi des grands nombres (ou stabilisation de la fréquence) pour déterminer une valeur approchée de PI.</p>
<p><strong>Le principe:</strong></p>
<ul>
<li>Un point est généré de manière aléatoire dans un carré de côté 1.</li>
<li>On calcule la distance séparant ce point de l\'un des sommets du carré.</li>
<li>Si cette distance est inférieure à 1, le point est alors à l\'intérieur du quart de disque de rayon 1 ayant pour centre ce sommet.</li>
<li>L\'aire du quart de disque est Pi/4 et la fréquence d\'apparition du point dans ce quart de disque se stabilise pour un grand nombre de lancers autour de la valeur théorique qui est la probabilité de cet événement: ici le rapport aire du quart de disque / aire du carré soit ( Pi/4)/1 donc Pi/4; il ne reste plus qu\'à multiplier par 4 pour obtenir une valeur approchée de Pi.</li>
</ul>',
'programme' => '<div>Afficher "Méthode de Monte-Carlo"</div>
<div>Afficher "Valeur approchée de pi"</div>
<div>Afficher "Grâce au rand !"</div>
@ -113,7 +117,7 @@ L\'aire du quart de disque est Pi/4 et la fréquence d\'apparition du point dans
[
'titre' => 'R.O.C. du Bac S',
'auteur' => 'Nitrosax',
'description' => 'Une restitution organisée de connaissance que les candidats du Bac S doivent connaître par coeur. Elle permet de montrer que pour tout nombre A rentré par l\'utilisateur, il existe un rang N tel que Un > A. L\'exemple utilise la suite : Un = 3^N.',
'description' => '<p>Une restitution organisée de connaissance que les candidats du Bac S doivent connaître par coeur. Elle permet de montrer que pour tout nombre A rentré par l\'utilisateur, il existe un rang N tel que Un > A. L\'exemple utilise la suite : Un = 3^N.</p>',
'programme' => '<div>Lire A</div>
<div>N Prend_la_valeur 0</div>
<div>Tant_que 3^n ≤ A</div>