592 lines
18 KiB
JavaScript
592 lines
18 KiB
JavaScript
var process = 0;
|
|
var pause = 0;
|
|
var reset = 0;
|
|
var lire_pending = 0;
|
|
var langage_avant_publier = 1;
|
|
|
|
$(document).ready(function() {
|
|
var TIME = 600;
|
|
|
|
var langage = 1;
|
|
var time = 0;
|
|
|
|
var indices = [
|
|
0, 2, 6 , 12,
|
|
20, 22, 26, 31,
|
|
39, 41, 45, 48,
|
|
56
|
|
];
|
|
var instructions = [
|
|
"Lire", "Afficher", "Si", "Alors", "Sinon", "Fin_Si", "Tant_que", "Fin_Tant_que", "Pour", "Allant_de", "à", "Fin_Pour", "Prend_la_valeur", "Hasard", "ET", "OU", "Partie_entière", "Partie_décimale", "Valeur_absolue", "Fin_programme",
|
|
"?", "∠", "If", "Then", "Else", "IfEnd", "While", "WhileEnd", "For", "To", "Next", "→", "#Ran", "and", "or", "Int", "Frac", "Abs", "Stop",
|
|
"Input", "Disp", "If", "Then", "Else", "End", "While", "For(", "End", "→", "rand", "and", "or", "int(", "fPart(", "abs(", "Stop"
|
|
];
|
|
|
|
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');
|
|
}
|
|
else if(langage == 2)
|
|
{
|
|
$('#conversion_casio').hide();
|
|
$('#conversion_ti').css('bottom', '-70px').css('right', '450px');
|
|
$('#conversion_algo').css('bottom', '-216px').css('right', '264px');
|
|
}
|
|
else if(langage == 3)
|
|
{
|
|
$('#conversion_ti').hide();
|
|
$('#conversion_algo').css('bottom', '-70px').css('right', '264px');
|
|
$('#conversion_casio').css('bottom', '-216px').css('right', '450px');
|
|
}
|
|
}
|
|
|
|
function hide_langage() {
|
|
$('.langage_actuel').hide();
|
|
}
|
|
|
|
function affiche_langage() {
|
|
hide_langage();
|
|
if(langage == 1)
|
|
$('#langage_algo').show();
|
|
if(langage == 2)
|
|
$('#langage_casio').show();
|
|
if(langage == 3)
|
|
$('#langage_ti').show();
|
|
|
|
$('#info_contenu').replaceWith("<span id='info_contenu'>Cliquez sur l'une des icônes, puis sélectionnez une instruction.</span>");
|
|
}
|
|
|
|
function changement_langage() {
|
|
var result;
|
|
|
|
$('#conversion_algo').click(function(event) {
|
|
if(new Date().getTime() - time > TIME && process == 0)
|
|
{
|
|
$('#executer').unbind('click');
|
|
time = new Date().getTime();
|
|
process = 1;
|
|
result = traduction(langage, 1, 1);
|
|
if(result == "completed")
|
|
{
|
|
langage = 1;
|
|
langage_avant_publier = 1;
|
|
affiche_conversion();
|
|
affiche_langage();
|
|
}
|
|
process = 0;
|
|
boutons();
|
|
$("#saisie").cleditor()[0].disable(false);
|
|
}
|
|
});
|
|
$('#conversion_casio').click(function(event) {
|
|
if(new Date().getTime() - time > TIME && process == 0)
|
|
{
|
|
$('#executer').unbind('click');
|
|
time = new Date().getTime();
|
|
process = 1;
|
|
result = traduction(langage, 2, 1);
|
|
if(result == "completed")
|
|
{
|
|
langage = 2;
|
|
langage_avant_publier = 2;
|
|
affiche_conversion();
|
|
affiche_langage();
|
|
}
|
|
process = 0;
|
|
boutons();
|
|
$("#saisie").cleditor()[0].disable(false);
|
|
}
|
|
});
|
|
$('#conversion_ti').click(function(event) {
|
|
if(new Date().getTime() - time > TIME && process == 0)
|
|
{
|
|
$('#executer').unbind('click');
|
|
time = new Date().getTime();
|
|
process = 1;
|
|
result = traduction(langage, 3, 1);
|
|
if(result == "completed")
|
|
{
|
|
langage = 3;
|
|
langage_avant_publier = 3;
|
|
affiche_conversion();
|
|
affiche_langage();
|
|
}
|
|
process = 0;
|
|
boutons();
|
|
$("#saisie").cleditor()[0].disable(false);
|
|
}
|
|
});
|
|
}
|
|
|
|
function init_boutons() {
|
|
$('#pause').hide();
|
|
}
|
|
|
|
function boutons() {
|
|
$('#executer').click(function() {
|
|
if(process == 0)
|
|
{
|
|
pause = 0;
|
|
process = 1;
|
|
reset = 0;
|
|
execution(langage, 0);
|
|
process = 0;
|
|
}
|
|
if(lire_pending == 1 && pause == 1)
|
|
{
|
|
$('#executer').hide();
|
|
$('#pause').show();
|
|
pause = 0;
|
|
document.getElementById("lire").focus();
|
|
}
|
|
});
|
|
$('#pause').click(function() {
|
|
$('#pause').hide();
|
|
$('#executer').show();
|
|
pause = 1;
|
|
});
|
|
$('#reset').click(function() {
|
|
$('#pause').hide();
|
|
$('#executer').show();
|
|
reset = 1;
|
|
process = 0;
|
|
execution_init();
|
|
$("#saisie").cleditor()[0].disable(false);
|
|
});
|
|
}
|
|
|
|
function signes() {
|
|
$('#signe1').click(function() {
|
|
addText(" ≥ ");
|
|
});
|
|
$('#signe2').click(function() {
|
|
addText(" ≤ ");
|
|
});
|
|
$('#signe3').click(function() {
|
|
addText(" ≠ ");
|
|
});
|
|
$('#signe4').click(function() {
|
|
addText("Racine_Carrée(");
|
|
});
|
|
$('#signe5').click(function() {
|
|
addText("^");
|
|
});
|
|
$('#signe6').click(function() {
|
|
addText("π");
|
|
});
|
|
$('#signe7').click(function() {
|
|
addText("exp(");
|
|
});
|
|
$('#signe8').click(function() {
|
|
addText("ln");
|
|
});
|
|
}
|
|
|
|
function addText(instext) {
|
|
/*var content = document.getElementById("saisie").value;
|
|
var saut = 0;
|
|
|
|
if(content.lastIndexOf("<div>") != -1)
|
|
saut = 6;
|
|
if(content.lastIndexOf("<br>") != -1)
|
|
saut = 10;
|
|
|
|
document.getElementById("saisie").value = content.substring(0, content.length - saut) + " " + instext;
|
|
|
|
if(content.lastIndexOf("<div>") != -1)
|
|
document.getElementById("saisie").value += "</div>";
|
|
|
|
$("#saisie").cleditor()[0].updateFrame().focus();*/
|
|
|
|
if(navigator.appName=='Microsoft Internet Explorer'){
|
|
var content = document.getElementById("saisie").value;
|
|
var saut = 0;
|
|
|
|
if(content.lastIndexOf("<div>") != -1)
|
|
saut = 6;
|
|
if(content.lastIndexOf("<br>") != -1)
|
|
saut = 10;
|
|
|
|
document.getElementById("saisie").value = content.substring(0, content.length - saut) + " " + instext;
|
|
|
|
if(content.lastIndexOf("<div>") != -1)
|
|
document.getElementById("saisie").value += "</div>";
|
|
|
|
$("#saisie").cleditor()[0].updateFrame().focus();
|
|
}
|
|
else
|
|
{
|
|
document.getElementById("main_iframe").blur();
|
|
document.getElementById("main_iframe").contentWindow.document.execCommand("InsertHTML", false, instext);
|
|
document.getElementById("main_iframe").focus();
|
|
}
|
|
}
|
|
|
|
function menus_deroulants_init() {
|
|
$('.onglet_deroulant').hide();
|
|
$('.instruction').hide();
|
|
$('#selection').hide();
|
|
}
|
|
|
|
function menus_deroulants_show() {
|
|
$('.icone').mouseenter(function() {
|
|
var iconeNb, indice_pointeur, ongletNb;
|
|
var id = $(this).attr('id');
|
|
|
|
$('#selection').hide();
|
|
|
|
if(id == 'entrees-sorties')
|
|
iconeNb = 0;
|
|
if(id == 'conditions')
|
|
iconeNb = 1;
|
|
if(id == 'boucles')
|
|
iconeNb = 2;
|
|
if(id == 'autres')
|
|
iconeNb = 3;
|
|
|
|
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);
|
|
});
|
|
}
|
|
|
|
function menus_deroulants_hide(ongletNb, id, indice_pointeur) {
|
|
$('#support_menus, .cleditorMain').mouseenter(function() {
|
|
menus_deroulants_init();
|
|
});
|
|
}
|
|
|
|
function affiche_menu_deroulant(iconeNb, ongletNb, indice_pointeur) {
|
|
var i;
|
|
|
|
$('.onglet_deroulant').css('left', 255 + 69 * iconeNb);
|
|
|
|
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();
|
|
}
|
|
}
|
|
|
|
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;
|
|
|
|
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];
|
|
|
|
switch(text)
|
|
{
|
|
case 'Lire':
|
|
syntaxe = "<span class='mot_cle'>Lire </span><span class='indications'>variable</span>";
|
|
break;
|
|
|
|
case 'Afficher':
|
|
syntaxe = "<span class='mot_cle'>Afficher </span><span class='indications'>\"Mon texte\" (ou variable)</span>";
|
|
break;
|
|
|
|
case 'Si':
|
|
syntaxe = "<span class='mot_cle'>Si </span><span class='indications'>condition</span><br /><span class='mot_cle'>Alors </span><span class='indications'>Instructions</span><br />(<span class='mot_cle'>Sinon </span><span class='indications'>Instructions</span>)<br /><span class='mot_cle'>Fin_Si</span>";
|
|
break;
|
|
|
|
case 'Tant_que':
|
|
syntaxe = "<span class='mot_cle'>Tant_que </span><span class='indications'>condition</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>Fin_Tant_que</span>";
|
|
break;
|
|
|
|
case 'Fin_Tant_que':
|
|
syntaxe = "<span class='mot_cle'>Tant_que </span><span class='indications'>condition</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>Fin_Tant_que</span>";
|
|
break;
|
|
|
|
case 'Pour':
|
|
syntaxe = "<span class='mot_cle'>Pour </span><span class='indications'>variable </span><span class='mot_cle'>Allant_de </span><span class='indications'>départ </span><span class='mot_cle'>à </span><span class='indications'>arrivée</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>Fin_Pour</span>";
|
|
break;
|
|
|
|
case 'Prend_la_valeur':
|
|
syntaxe = "<span class='indications'>variable </span><span class='mot_cle'>Prend_la_valeur </span><span class='indications'>valeur</span>";
|
|
break;
|
|
|
|
case 'Hasard':
|
|
syntaxe = "<span class='mot_cle'>Hasard(</span><span class='indications'>(valeur maximale)</span>";
|
|
break;
|
|
|
|
case 'ET':
|
|
syntaxe = "<span class='indications'>condition 1 </span><span class='mot_cle'>ET </span><span class='indications'>condition 2</span>";
|
|
break;
|
|
|
|
case 'OU':
|
|
syntaxe = "<span class='indications'>condition 1 </span><span class='mot_cle'>OU </span><span class='indications'>condition 2</span>";
|
|
break;
|
|
|
|
case 'Partie_entière':
|
|
syntaxe = "<span class='mot_cle'>Partie_entière </span><span class='indications'>(valeur)</span>";
|
|
break;
|
|
|
|
case 'Partie_décimale':
|
|
syntaxe = "<span class='mot_cle'>Partie_décimale </span><span class='indications'>(valeur)</span>";
|
|
break;
|
|
|
|
case 'Valeur_absolue':
|
|
syntaxe = "<span class='mot_cle'>Valeur_absolue </span><span class='indications'>(valeur)</span>";
|
|
break;
|
|
|
|
case 'Fin_programme':
|
|
syntaxe = "<span class='mot_cle'>Fin_programme</span>";
|
|
break;
|
|
|
|
case '?':
|
|
syntaxe = "<span class='mot_cle'>? </span><span class='indications'>→ variable</span>";
|
|
break;
|
|
|
|
case '∠':
|
|
syntaxe = "<span class='indications'>\"Mon texte\" (ou variable)</span><span class='mot_cle'>∠</span>";
|
|
break;
|
|
|
|
case 'If':
|
|
syntaxe = "<span class='mot_cle'>If </span><span class='indications'>condition</span><br /><span class='mot_cle'>Then </span><span class='indications'>Instructions</span><br />(<span class='mot_cle'>Else </span><span class='indications'>Instructions</span>)<br /><span class='mot_cle'>IfEnd</span>";
|
|
break;
|
|
|
|
case 'While':
|
|
syntaxe = "<span class='mot_cle'>While </span><span class='indications'>condition</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>WhileEnd</span>";
|
|
break;
|
|
|
|
case 'WhileEnd':
|
|
syntaxe = "<span class='mot_cle'>While </span><span class='indications'>condition</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>WhileEnd</span>";
|
|
break;
|
|
|
|
case 'For':
|
|
syntaxe = "<span class='mot_cle'>For </span><span class='indications'>départ→variable <span class='mot_cle'>To </span><span class='indications'>arrivée</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>Next</span>";
|
|
break;
|
|
|
|
case '→':
|
|
syntaxe = "<span class='indications'>valeur </span><span class='mot_cle'>→ </span><span class='indications'>variable</span>";
|
|
break;
|
|
|
|
case 'rand':
|
|
syntaxe = "<span class='mot_cle'>rand</span><span class='indications'>(valeur maximale)</span>";
|
|
break;
|
|
|
|
case 'and':
|
|
syntaxe = "<span class='indications'>condition 1 </span><span class='mot_cle'>and </span><span class='indications'>condition 2</span>";
|
|
break;
|
|
|
|
case 'or':
|
|
syntaxe = "<span class='indications'>condition 1 </span><span class='mot_cle'>or </span><span class='indications'>condition 2</span>";
|
|
break;
|
|
|
|
case 'Int':
|
|
syntaxe = "<span class='mot_cle'>Int</span><span class='indications'>(valeur)</span>";
|
|
break;
|
|
|
|
case 'Frac':
|
|
syntaxe = "<span class='mot_cle'>Frac</span><span class='indications'>(valeur)</span>";
|
|
break;
|
|
|
|
case 'Abs':
|
|
syntaxe = "<span class='mot_cle'>Abs</span><span class='indications'>(valeur)</span>";
|
|
break;
|
|
|
|
case 'Stop':
|
|
syntaxe = "<span class='mot_cle'>Stop</span>";
|
|
break;
|
|
|
|
case 'Input':
|
|
syntaxe = "<span class='mot_cle'>Input </span><span class='indications'>variable</span>";
|
|
break;
|
|
|
|
case 'Disp':
|
|
syntaxe = "<span class='mot_cle'>Disp </span><span class='indications'>\"Mon texte\" (ou variable)</span>";
|
|
break;
|
|
|
|
case 'If':
|
|
syntaxe = "<span class='mot_cle'>If </span><span class='indications'>condition</span><br /><span class='mot_cle'>Then </span><span class='indications'>Instructions</span><br />(<span class='mot_cle'>Else </span><span class='indications'>Instructions</span>)<br /><span class='mot_cle'>End</span>";
|
|
break;
|
|
|
|
case 'While':
|
|
syntaxe = "<span class='mot_cle'>While </span><span class='indications'>condition</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>End</span>";
|
|
break;
|
|
|
|
case 'For(':
|
|
syntaxe = "<span class='mot_cle'>For(</span><span class='indications'>variable, départ, arrivée)<br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>End</span>";
|
|
break;
|
|
|
|
case '#Ran':
|
|
syntaxe = "<span class='indications'>(valeur maximale)</span><span class='mot_cle'>#Ran</span>";
|
|
break;
|
|
|
|
case 'int(':
|
|
syntaxe = "<span class='mot_cle'>int(</span><span class='indications'>valeur)</span>";
|
|
break;
|
|
|
|
case 'fPart(':
|
|
syntaxe = "<span class='mot_cle'>fPart(</span><span class='indications'>valeur)</span>";
|
|
break;
|
|
|
|
case 'abs(':
|
|
syntaxe = "<span class='mot_cle'>abs(</span><span class='indications'>valeur)</span>";
|
|
break;
|
|
}
|
|
|
|
$('#info_contenu').replaceWith("<span id='info_contenu'><h3 id='syntaxe_titre'>Syntaxe</h3>" + "<div id='syntaxe'>" + syntaxe + "</div></span>");
|
|
});
|
|
}
|
|
$('.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];
|
|
|
|
if((num >= 16 && num <= 18) || num == 13 || (num >= 35 && num <= 37) || num == 49)
|
|
text += "()";
|
|
if(num >= 52 && num <= 54)
|
|
text += ")";
|
|
if(num == 32)
|
|
text = "()" + text;
|
|
|
|
/*if(text == "∠")
|
|
text = "∠";
|
|
if(text == "→")
|
|
text = "→";*/
|
|
|
|
addText(text + " ");
|
|
});
|
|
}
|
|
|
|
function default_code()
|
|
{
|
|
if((document.cookie.indexOf('exemple=') == -1 || readCookie('exemple') == "init") && document.cookie.indexOf('last_algo=') != -1 && document.cookie.indexOf('last_language=') != -1 && (readCookie('last_language') == 1 || readCookie('last_language') == 2 || readCookie('last_language') == 3)){
|
|
langage = readCookie('last_language');
|
|
|
|
var t;
|
|
switch(langage)
|
|
{
|
|
case "1": t = 1; break;
|
|
case "2": t = 2; break;
|
|
case "3": t = 3; break;
|
|
}
|
|
langage = t;
|
|
|
|
var code = unescape(readCookie('last_algo'));
|
|
|
|
document.getElementById("saisie").value = code;
|
|
$("#saisie").cleditor()[0].updateFrame().focus();
|
|
|
|
affiche_conversion();
|
|
affiche_langage();
|
|
}
|
|
}
|
|
|
|
$("#saisie").cleditor().focus(); // transforme le textarea en éditeur html
|
|
$('#debug').hide();
|
|
$('#disable').hide();
|
|
menus_deroulants_init('');
|
|
affiche_langage();
|
|
changement_langage();
|
|
affiche_conversion();
|
|
init_boutons();
|
|
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();
|
|
date.setTime(date.getTime()+(days*24*60*60*1000));
|
|
var expires = "; expires="+date.toGMTString();
|
|
}
|
|
else var expires = "";
|
|
document.cookie = name+"="+value;
|
|
}
|
|
|
|
function readCookie(name) {
|
|
var nameEQ = name + "=";
|
|
var ca = document.cookie.split(';');
|
|
for(var i=0;i < ca.length;i++) {
|
|
var c = ca[i];
|
|
while (c.charAt(0)==' ') c = c.substring(1,c.length);
|
|
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function alert_mobile() {
|
|
if(/iPhone|iPod|Android|opera mini|blackberry|palm os|palm|hiptop|avantgo|plucker|xiino|blazer|elaine|iris|3g_t|windows ce|opera mobi|windows ce; smartphone;|windows ce;iemobile/i.test(navigator.userAgent)){
|
|
alert("Cette interface ne fonctionne pas encore sur mobile. Merci de vous procurer un ordinateur pour l'utiliser.");
|
|
}
|
|
} |